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/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/_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;