diff --git a/FediNews/Components/Accounts/LoginComponent.razor b/FediNews/Components/Accounts/LoginComponent.razor
new file mode 100644
index 0000000..89bd19f
--- /dev/null
+++ b/FediNews/Components/Accounts/LoginComponent.razor
@@ -0,0 +1,21 @@
+<section class="LoginSection">
+    <h3>Login</h3>
+    <div class="login">
+        <div class="field">
+            <p>username / email</p>
+            <input type="text" spellcheck="false" autocapitalize="none"/>
+        </div>
+        <div class="field">
+            <p>password</p>
+            <input type="password"/>
+        </div>
+        <div>
+            <button class="btn" type="button">login</button>
+            <a class="forgot" href="/forgot">Forgot password?</a>
+        </div>
+    </div>
+</section>
+
+@code {
+
+}
diff --git a/FediNews/Components/Accounts/LoginComponent.razor.css b/FediNews/Components/Accounts/LoginComponent.razor.css
new file mode 100644
index 0000000..d0e0a31
--- /dev/null
+++ b/FediNews/Components/Accounts/LoginComponent.razor.css
@@ -0,0 +1,14 @@
+.LoginSection {
+    margin: 0 auto;
+}
+
+.field {
+    margin-top: 12px;
+    margin-bottom: 12px;
+}
+
+.btn {
+    margin-right: auto;
+    margin-left: 0;
+    text-align: right;
+}
diff --git a/FediNews/Components/Accounts/RegisterComponent.razor b/FediNews/Components/Accounts/RegisterComponent.razor
new file mode 100644
index 0000000..84059bc
--- /dev/null
+++ b/FediNews/Components/Accounts/RegisterComponent.razor
@@ -0,0 +1,28 @@
+<section class="RegisterSection">
+    <h3>Register</h3>
+    <div class="register">
+        <div class="field">
+            <p>username</p>
+            <input type="text" spellcheck="false" autocapitalize="none"/>
+        </div>
+        <div class="field">
+            <p>email (optional)</p>
+            <input type="text" spellcheck="false" autocapitalize="none"/>
+        </div>
+        <div class="field">
+            <p>password</p>
+            <input type="password"/>
+        </div>
+        <div>
+            @* <div> *@
+            @*     <input type="checkbox" id="agree2rules" name="agree2rules"/> *@
+            @*     <label for="agree2rules">I've read the <a>rules</a>, <a>legal</a> and <a>privacy policy</a> and I agree to them.</label> *@
+            @* </div> *@
+            <button class="btn" type="button">register</button>
+        </div>
+    </div>
+</section>
+
+@code {
+
+}
diff --git a/FediNews/Components/Accounts/RegisterComponent.razor.css b/FediNews/Components/Accounts/RegisterComponent.razor.css
new file mode 100644
index 0000000..92a6320
--- /dev/null
+++ b/FediNews/Components/Accounts/RegisterComponent.razor.css
@@ -0,0 +1,14 @@
+.RegisterSection {
+    margin: 0 auto;
+}
+
+.field {
+    margin-top: 12px;
+    margin-bottom: 12px;
+}
+
+.btn {
+    margin-right: auto;
+    margin-left: 0;
+    text-align: right;
+}
diff --git a/FediNews/Components/Items/PostListView.razor b/FediNews/Components/Items/PostListView.razor
index f83c925..7ef39d1 100644
--- a/FediNews/Components/Items/PostListView.razor
+++ b/FediNews/Components/Items/PostListView.razor
@@ -1,20 +1,15 @@
 <article class="link">
     <div class="score">
-        <p>@PostNr.</p>
-        <p>↑</p>
+        <p class="scoretxt">@PostNr.<a class="upvote">↑</a></p>
     </div>
     <div class="content">
-        <div class="head">
-            <a href="https://git.moonleay.net">This is the title of the post</a>
-            <p>(git.moonleay.net)</p>
-        </div>
+        <p class="urladdr"><a class="title" href="https://git.moonleay.net">This is the title of the post</a>(git.moonleay.net)</p>
         <div class="tail">
-            <p>105 pts by <a href="/user/moonleay">moonleay</a> 30 minutes ago | <a>60 comments</a></p>
+            <p class="tailtext">105 points by <a class="user" href="/user/moonleay">moonleay@news.moonleay.net</a>, 1 hour ago with <a class="comments">69 comments</a></p>
         </div>
     </div>
 </article>
 
 @code {
     [Parameter] public int PostNr { get; set; }
-
 }
diff --git a/FediNews/Components/Items/PostListView.razor.css b/FediNews/Components/Items/PostListView.razor.css
index 40a8f78..66f67e3 100644
--- a/FediNews/Components/Items/PostListView.razor.css
+++ b/FediNews/Components/Items/PostListView.razor.css
@@ -2,33 +2,81 @@
     width: 100%;
     display: flex;
     flex-direction: row;
-    /*align-items: center;*/
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
 }
 
+@media(max-width: 600px) {
+    .link {
+        margin-top: 0.9rem !important;
+        margin-bottom: 0.9rem !important;
+    }
+
+    .title {
+        font-size: 1.1rem !important;
+    }
+
+    .scoretxt {
+        font-size: 0.9rem !important;
+    }
+
+    .tailtext {
+        font-size: 0.9rem !important;
+    }
+}
+
 .score {
-    display: flex;
-    flex-direction: row;
-    /*align-items: center;*/
-    margin-right: 0.5rem;
-    min-width: 2.3rem;
-    margin-left: 0;
-
-}
-
-.content {
-
-}
-
-.head {
     display: flex;
     flex-direction: row;
     align-items: center;
+    margin-right: 0.3rem;
+    margin-left: 0.2rem;
+    min-width: 2.4rem;
+    text-align: right;
+    text-align: -moz-right;
+    text-align: -webkit-right;
+}
+
+.scoretxt {
+    margin-left: auto;
+    margin-right: 0;
+    color: grey;
+}
+
+.upvote {
+    color: grey;
+    text-decoration: none;
+}
+
+.title {
+    font-size: 1.05rem;
+    line-height: 14pt;
+    margin-right: 0.5rem;
+    color: black;
+    text-decoration: none;
+}
+
+.urladdr {
+    color: grey;
+    font-size: 0.8rem;
 }
 
 .tail {
     display: flex;
     flex-direction: row;
     align-items: center;
+    font-size: 0.8rem;
+}
+
+.user, .comments {
+    text-decoration: underline;
+    color: grey;
+}
+
+.tailtext {
+    color: grey;
+}
+
+.content {
+    margin-right: 0.5rem;
 }
diff --git a/FediNews/Components/Layout/Footer.razor b/FediNews/Components/Layout/Footer.razor
index 0858f05..5f0d41f 100644
--- a/FediNews/Components/Layout/Footer.razor
+++ b/FediNews/Components/Layout/Footer.razor
@@ -1,5 +1,8 @@
-<footer>
-    <p></p>
+<footer class="footer">
+    <div class="footerline"></div>
+    <div class="content">
+        <p class="footertxt"><a href="/guidelines">Guidelines</a> | <a href="/rules">Rules</a> | <a href="https://git.moonleay.net/Websites/FediNews">Code</a> | <a href="/modlog">Modlog</a> | <a href="/legal">Legal</a> | <a href="/imprint">Imprint</a> | <a href="/privacy-policy">Privacy Policy</a></p>
+    </div>
 </footer>
 
 @code {
diff --git a/FediNews/Components/Layout/Footer.razor.css b/FediNews/Components/Layout/Footer.razor.css
index e69de29..353b883 100644
--- a/FediNews/Components/Layout/Footer.razor.css
+++ b/FediNews/Components/Layout/Footer.razor.css
@@ -0,0 +1,36 @@
+.footer {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    margin: 1rem auto auto;
+}
+
+.footerline {
+    display: flex;
+    width: 100%;
+    height: 2px;
+    background-color: #8422e8;
+}
+
+.footertxt a {
+    color: grey;
+    text-decoration: none;
+    font-size: 0.7rem;
+}
+
+.footertxt a:hover {
+    text-decoration: underline;
+}
+
+.footertxt {
+    color: grey;
+    font-size: 0.8rem;
+}
diff --git a/FediNews/Components/Layout/MainLayout.razor b/FediNews/Components/Layout/MainLayout.razor
index bc0fd31..7436310 100644
--- a/FediNews/Components/Layout/MainLayout.razor
+++ b/FediNews/Components/Layout/MainLayout.razor
@@ -4,10 +4,12 @@
     <NavBar/>
 
     <main>
-        <article class="content px-4">
+        <div class="content px-4">
             @Body
-        </article>
+        </div>
     </main>
+
+    <Footer/>
 </div>
 
 <div id="blazor-error-ui">
diff --git a/FediNews/Components/Layout/MainLayout.razor.css b/FediNews/Components/Layout/MainLayout.razor.css
index c97e23c..6f79d5b 100644
--- a/FediNews/Components/Layout/MainLayout.razor.css
+++ b/FediNews/Components/Layout/MainLayout.razor.css
@@ -3,13 +3,17 @@
     flex-direction: column;
     align-content: center;
 
-    max-width: 1000px;
+    /*min-width: 600px;*/
+    width: 85%;
     margin: 8px auto auto;
     background-color: #f6f6ef;
 }
 
-@media (max-width: 1000px) {
-    margin: 0 auto auto;
+@media (max-width: 600px) {
+    .page {
+        margin: 0 auto auto;
+        width: 100%;
+    }
 }
 
 #blazor-error-ui {
@@ -24,9 +28,9 @@
     z-index: 1000;
 }
 
-    #blazor-error-ui .dismiss {
-        cursor: pointer;
-        position: absolute;
-        right: 0.75rem;
-        top: 0.5rem;
-    }
+#blazor-error-ui .dismiss {
+    cursor: pointer;
+    position: absolute;
+    right: 0.75rem;
+    top: 0.5rem;
+}
diff --git a/FediNews/Components/Layout/NavBar.razor b/FediNews/Components/Layout/NavBar.razor
index 0b40dd9..bfa11cb 100644
--- a/FediNews/Components/Layout/NavBar.razor
+++ b/FediNews/Components/Layout/NavBar.razor
@@ -1,8 +1,8 @@
-<nav>
-    <div class="navigation">
-        <a class="logo" href="/">
-            <img src="logo.png" alt="F"/>
-        </a>
+<nav class="navigation">
+    <a class="logo" href="/">
+        <img src="logo.png" alt="F"/>
+    </a>
+    <div class="pagenav">
         <a class="name" href="/"><span>Fedi News</span></a>
         <div class="navlinks">
             <a class="new" href="/new">new</a>
@@ -11,9 +11,9 @@
             <span>|</span>
             <a class="submit" href="/submit">submit</a>
         </div>
-        <div class="account">
-            <a href="/login">login</a>
-        </div>
+    </div>
+    <div class="account">
+        <a href="/login">login</a>
     </div>
 </nav>
 
diff --git a/FediNews/Components/Layout/NavBar.razor.css b/FediNews/Components/Layout/NavBar.razor.css
index fa771ef..64ebc5b 100644
--- a/FediNews/Components/Layout/NavBar.razor.css
+++ b/FediNews/Components/Layout/NavBar.razor.css
@@ -1,6 +1,5 @@
 nav {
     display: flex;
-    flex-direction: column;
     background-color: #8422e8;
     position: sticky;
     color: white !important;
@@ -29,6 +28,14 @@ nav {
     align-items: center;
 }
 
+@media(min-width: 601px) {
+    .pagenav {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+}
+
 .name {
     font-weight: bolder;
     margin-right: 0.6rem;
@@ -43,6 +50,11 @@ nav {
 
 .navlinks a {
     color: white;
+    text-decoration: none;
+}
+
+.navlinks a:hover {
+    text-decoration: underline !important;
 }
 
 .account {
diff --git a/FediNews/Components/Pages/Account/Login.razor b/FediNews/Components/Pages/Account/Login.razor
new file mode 100644
index 0000000..0a8bd22
--- /dev/null
+++ b/FediNews/Components/Pages/Account/Login.razor
@@ -0,0 +1,14 @@
+@page "/login"
+
+<PageTitle>Login | Fedi News</PageTitle>
+
+<div class="accountManagement">
+    <LoginComponent/>
+    <div class="seperatorVert"></div>
+    <div class="seperatorHoriz"></div>
+    <RegisterComponent/>
+</div>
+
+@code {
+
+}
diff --git a/FediNews/Components/Pages/Account/Login.razor.css b/FediNews/Components/Pages/Account/Login.razor.css
new file mode 100644
index 0000000..e7979b2
--- /dev/null
+++ b/FediNews/Components/Pages/Account/Login.razor.css
@@ -0,0 +1,37 @@
+.accountManagement {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    margin-top: 7.2px;
+}
+
+@media (max-width: 600px) {
+    .accountManagement {
+        flex-direction: column;
+    }
+
+    .seperatorVert {
+        display: none !important;
+    }
+
+    .seperatorHoriz {
+        display: flex !important;
+    }
+}
+
+.seperatorVert {
+    display: flex;
+    height: 100px;
+    background-color: grey;
+    margin: 0 2rem;
+    width: 2px;
+}
+
+.seperatorHoriz {
+    display: none;
+    width: 100px;
+    height: 2px;
+    background-color: grey;
+    margin: 2rem 0;
+}
diff --git a/FediNews/Components/Pages/Content/Submit.razor b/FediNews/Components/Pages/Content/Submit.razor
new file mode 100644
index 0000000..2830c21
--- /dev/null
+++ b/FediNews/Components/Pages/Content/Submit.razor
@@ -0,0 +1,24 @@
+@page "/submit"
+<article>
+    <h3>Submit to Fedi News</h3>
+    <div>
+        <p>title</p>
+        <input type="text" />
+    </div>
+    <div>
+        <p>url</p>
+        <input type="text"/>
+    </div>
+    <div>
+        <p>comment</p>
+        <textarea></textarea>
+    </div>
+    <div>
+        <button >submit</button>
+    </div>
+    <p>Leave url blank to submit a text-only post. If there is no url, the comment will appear directly under the title. A comment is optional, if a url is present.</p>
+</article>
+
+@code {
+
+}
diff --git a/FediNews/Components/_Imports.razor b/FediNews/Components/_Imports.razor
index a0f7616..7a1972b 100644
--- a/FediNews/Components/_Imports.razor
+++ b/FediNews/Components/_Imports.razor
@@ -9,3 +9,4 @@
 @using FediNews
 @using FediNews.Components
 @using FediNews.Components.Items
+@using FediNews.Components.Accounts;