diff --git a/src/angular/frontend/src/app/components/home/home.component.html b/src/angular/frontend/src/app/components/home/home.component.html
index cff4407..a378c15 100644
--- a/src/angular/frontend/src/app/components/home/home.component.html
+++ b/src/angular/frontend/src/app/components/home/home.component.html
@@ -1,120 +1 @@
-<p><app-link href="/dashboard/test">test</app-link> - <app-link href="/dashboard/test/testa">testa</app-link> - <app-link href="/dashboard/test/testb">testb</app-link></p>
-<p><app-link href="/dashboard/test2">test2</app-link> - <app-link href="/dashboard/test2/testa">testa</app-link> - <app-link href="/dashboard/test2/testb">testb</app-link></p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
+<h2>CRINGE</h2>
diff --git a/src/angular/frontend/src/app/components/home/home.component.ts b/src/angular/frontend/src/app/components/home/home.component.ts
index 4101bca..4175f96 100644
--- a/src/angular/frontend/src/app/components/home/home.component.ts
+++ b/src/angular/frontend/src/app/components/home/home.component.ts
@@ -1,10 +1,12 @@
 import { Component } from '@angular/core';
 import {LinkComponent} from '../link/link.component';
+import {LoginComponent} from '../login/login.component';
 
 @Component({
   selector: 'app-home',
   imports: [
-    LinkComponent
+    LinkComponent,
+    LoginComponent
   ],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss',
diff --git a/src/angular/frontend/src/app/components/login/login.component.html b/src/angular/frontend/src/app/components/login/login.component.html
index ec064e0..f6ef100 100644
--- a/src/angular/frontend/src/app/components/login/login.component.html
+++ b/src/angular/frontend/src/app/components/login/login.component.html
@@ -1,16 +1,32 @@
-@if (errors().length > 0) {
-  <div class="errors">
-    @for (error of errors(); track error) {
-      <div class="error">{{ error }}</div>
+<div class="container">
+  <form [formGroup]="loginFormGroup" (ngSubmit)="onSubmit($event)" class="single-column-form">
+    @if (errors().length > 0) {
+      <div class="errors">
+        @for (error of errors(); track error) {
+          <div class="error">{{ error }}</div>
+        }
+      </div>
     }
-  </div>
-}
-<form [formGroup]="loginFormGroup" (ngSubmit)="onSubmit($event)">
-  <input required type="text" name="username" placeholder="Username" formControlName="usernameOrEmail">
-  <input required type="password" name="password" placeholder="*****" formControlName="password">
-  <div class="group">
-    <input id="remember" type="checkbox" name="remember" formControlName="keep">
-    <label for="remember">Keep me signed in</label><br>
-    <input type="submit" value="Login">
-  </div>
-</form>
+    <div class="form-group">
+      <h2 class="title">Login</h2>
+      <div class="fields">
+        <div class="form-field">
+          <label for="username">Username</label>
+          <input type="text" name="username" placeholder="Username" formControlName="usernameOrEmail" required />
+        </div>
+        <div class="form-field">
+          <label for="password">Password</label>
+          <input type="password" name="password" placeholder="*****" formControlName="password" required />
+        </div>
+        <div class="form-field full-width">
+          <label for="checkbox">Keep me signed in</label>
+          <input type="checkbox" id="checkbox" name="checkbox" />
+        </div>
+      </div>
+    </div>
+    <div class="actions">
+      <button type="submit" class="primary">Login</button>
+    </div>
+  </form>
+
+</div>
diff --git a/src/angular/frontend/src/app/components/login/login.component.scss b/src/angular/frontend/src/app/components/login/login.component.scss
index 21b9667..860037d 100644
--- a/src/angular/frontend/src/app/components/login/login.component.scss
+++ b/src/angular/frontend/src/app/components/login/login.component.scss
@@ -1,17 +1,14 @@
-form {
-  padding: 1rem;
+:host {
   display: flex;
-  flex-direction: column;
-  gap: .75rem;
-  max-width: 400px;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
 
-  .group {
-    display: flex;
-    flex-direction: row;
-    gap: .25rem;
-
-    input[type="submit"] {
-      margin-left: auto;
-    }
+  .container {
+    width: 100%;
+    max-width: 500px;
+    padding: 1rem;
   }
 }
+
diff --git a/src/angular/frontend/src/form.scss b/src/angular/frontend/src/form.scss
new file mode 100644
index 0000000..2655c68
--- /dev/null
+++ b/src/angular/frontend/src/form.scss
@@ -0,0 +1,77 @@
+form {
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+
+  &.single-column-form {
+    .form-group .fields {
+      grid-template-columns: 1fr !important;
+    }
+  }
+
+  .form-group {
+
+    .fields {
+
+      display: grid;
+      gap: 1rem;
+      grid-template-columns: 1fr 1fr;
+
+      @media only screen and (width <= 720px) {
+        grid-template-columns: 1fr;
+      }
+
+      .form-field {
+
+        display: flex;
+        flex-direction: column;
+
+        &.full-width {
+          grid-column: 1 / -1;
+        }
+
+        input {
+          border: none;
+          outline: none;
+          color: var(--neutral-10);
+          accent-color: var(--secondary-color);
+        }
+
+        input:not([type="checkbox"], [type="radio"]) {
+          padding: 0.5em;
+          border-radius: 0.5em;
+          background-color: var(--neutral-80);
+        }
+
+        &:has(input[required]:not([type="radio"])) {
+          label::after {
+            content: " *";
+          }
+        }
+
+        &:has(input[type="checkbox"], input[type="radio"]) {
+          flex-direction: row-reverse;
+          margin-right: auto;
+          gap: 0.5ch;
+          align-items: start;
+        }
+      }
+    }
+
+  }
+
+  .actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: flex-end;
+  }
+
+  .errors {
+    background-color: oklch(from var(--danger-color) clamp(0, l/1.5, 1) clamp(0, c/1.7, 1) clamp(0, h, 360));
+    padding: 1rem;
+    border-radius: 0.5rem;
+  }
+
+}
diff --git a/src/angular/frontend/src/styles.scss b/src/angular/frontend/src/styles.scss
index 2737dc5..073b6c0 100644
--- a/src/angular/frontend/src/styles.scss
+++ b/src/angular/frontend/src/styles.scss
@@ -1,5 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
 @use "color-theme";
+@use "form";
 
 html, input {
   font-size: 18px;