diff --git a/frontend-reactive/app/components/auth.ts b/frontend-reactive/app/components/auth.ts
index 90ac277..65145c3 100644
--- a/frontend-reactive/app/components/auth.ts
+++ b/frontend-reactive/app/components/auth.ts
@@ -23,6 +23,7 @@ export interface PasskeySignature {
 export default class Auth extends Component<PasskeySignature> {
   @tracked username: string = '';
   @tracked error: string | undefined;
+  @tracked isLogin = true;
   @service declare auth: AuthService;
 
   @action async startLogin() {
diff --git a/frontend-reactive/app/components/auth/login.hbs b/frontend-reactive/app/components/auth/login.hbs
new file mode 100644
index 0000000..452cb2b
--- /dev/null
+++ b/frontend-reactive/app/components/auth/login.hbs
@@ -0,0 +1,12 @@
+<div class="login-wrapper">
+  <label>
+    <Input
+      @type="text"
+      @value={{this.username}}
+      @placeholder="Username"
+    />
+  </label>
+  <div type="button" class="login-start-button" {{on "click" this.onLoginStart}}>
+    Login
+  </div>
+</div>
\ No newline at end of file
diff --git a/frontend-reactive/app/components/auth/login.ts b/frontend-reactive/app/components/auth/login.ts
new file mode 100644
index 0000000..f033473
--- /dev/null
+++ b/frontend-reactive/app/components/auth/login.ts
@@ -0,0 +1,24 @@
+import { action } from '@ember/object'
+import Component from '@glimmer/component'
+import { tracked } from '@glimmer/tracking'
+
+export interface AuthLoginSignature {
+  // The arguments accepted by the component
+  Args: {}
+  // Any blocks yielded by the component
+  Blocks: {
+    default: []
+  }
+  // The element to which `...attributes` is applied in the component template
+  Element: null
+}
+
+export default class AuthLogin extends Component<AuthLoginSignature> {
+  @tracked username = ''
+
+  @action onLoginStart() {
+    console.log('Starting login for username ' + this.username)
+    // Check if username is approved for login
+    // If it is, continue with login
+  }
+}
diff --git a/frontend-reactive/app/components/auth/registration-form.hbs b/frontend-reactive/app/components/auth/post-registration-form.hbs
similarity index 67%
rename from frontend-reactive/app/components/auth/registration-form.hbs
rename to frontend-reactive/app/components/auth/post-registration-form.hbs
index 4fe281f..465589d 100644
--- a/frontend-reactive/app/components/auth/registration-form.hbs
+++ b/frontend-reactive/app/components/auth/post-registration-form.hbs
@@ -1,6 +1,6 @@
 <div class="registration-form">
   <h1 class="registration-form-username">username: {{this.args.username}}</h1>
-  <div class="registration-form-displayname">
+  <div class="registration-form-displayname-wrapper">
     <label>
       Displayname
       <Input
@@ -10,7 +10,7 @@
       />
     </label>
   </div>
-  <div class="registration-form-description">
+  <div class="registration-form-description-wrapper">
     <label>
       Description
       <Input
@@ -20,13 +20,13 @@
       />
     </label>
   </div>
-  <div class="registration-form-mail">
-    <label>
-      Email
-      <Input @type="text" @value={{this.email}} placeholder="Email address" />
-    </label>
-  </div>
-  <div class="registration-form-gender">
+  {{!--<div class="registration-form-mail-wrapper">--}}
+  {{!--  <label>--}}
+  {{!--    Email--}}
+  {{!--    <Input @type="text" @value={{this.email}} placeholder="Email address" />--}}
+  {{!--  </label>--}}
+  {{!--</div>--}}
+  <div class="registration-form-gender-wrapper">
     <Util::StringArray
       @list={{this.gender}}
       @onNewElement={{this.genderAddedHandler}}
@@ -34,10 +34,10 @@
     />
   </div>
   <p>{{this.extracted}}</p>
-  <div class="register-form-being">
+  <div class="register-form-being-wrapper">
     <Util::Multiselect @elements={{this.beingTypes}} />
   </div>
-  <div class="register-form-default-post-mode">
+  <div class="register-form-default-post-mode-wrapper">
     <Util::OneOfArray
       @elements={{array "Public" "Local" "Followers" "Direct"}}
       @selected={{this.defaultpostmode}}
@@ -45,7 +45,7 @@
       @required={{true}}
     />
   </div>
-  <div class="register-form-follow-approval">
+  <div class="register-form-follow-approval-wrapper">
     <label>
       Require approval for follow requests
       <Input
@@ -55,15 +55,14 @@
       />
     </label>
   </div>
-  <div class="register-form-indexable">
+  <div class="register-form-indexable-wrapper">
     <label>
       Whether the account is indexable
       <Input @type="checkbox" name="Indexable" @checked={{this.indexable}} />
     </label>
   </div>
-  <div class="register-form-custom-fields">
+  <div class="register-form-custom-fields-wrapper">
     <Util::MapEdit @list={{this.customProperties}} />
   </div>
-  {{! TODO: Custom fields (Two string arrays, lets go. Definitely won't be a pain to sync them up) }}
   {{! TODO: Icon, Background, Banner }}
-</div>
\ No newline at end of file
+</div>
diff --git a/frontend-reactive/app/components/auth/registration-form.ts b/frontend-reactive/app/components/auth/post-registration-form.ts
similarity index 90%
rename from frontend-reactive/app/components/auth/registration-form.ts
rename to frontend-reactive/app/components/auth/post-registration-form.ts
index cddb52e..500c1dc 100644
--- a/frontend-reactive/app/components/auth/registration-form.ts
+++ b/frontend-reactive/app/components/auth/post-registration-form.ts
@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
-export interface AuthRegistrationFormSignature {
+export interface AuthPostRegistrationFormSignature {
   // The arguments accepted by the component
   Args: {
     username: string;
@@ -14,7 +14,7 @@ export interface AuthRegistrationFormSignature {
   Element: null;
 }
 
-export default class AuthRegistrationForm extends Component<AuthRegistrationFormSignature> {
+export default class AuthPostRegistrationForm extends Component<AuthPostRegistrationFormSignature> {
   @tracked displayname: string = this.args.username;
   @tracked description: string = '';
   @tracked gender: Array<{ value: string }> = [];
diff --git a/frontend-reactive/app/components/auth/register-start.hbs b/frontend-reactive/app/components/auth/register-start.hbs
new file mode 100644
index 0000000..fb5c4b1
--- /dev/null
+++ b/frontend-reactive/app/components/auth/register-start.hbs
@@ -0,0 +1 @@
+{{yield}}
\ No newline at end of file
diff --git a/frontend-reactive/app/components/auth/register-start.ts b/frontend-reactive/app/components/auth/register-start.ts
new file mode 100644
index 0000000..6615c03
--- /dev/null
+++ b/frontend-reactive/app/components/auth/register-start.ts
@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+
+export interface AuthRegisterStartSignature {
+  // The arguments accepted by the component
+  Args: {};
+  // Any blocks yielded by the component
+  Blocks: {
+    default: [];
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+export default class AuthRegisterStart extends Component<AuthRegisterStartSignature> {}
diff --git a/frontend-reactive/app/templates/registerform.hbs b/frontend-reactive/app/templates/registerform.hbs
index bd2907d..a052435 100644
--- a/frontend-reactive/app/templates/registerform.hbs
+++ b/frontend-reactive/app/templates/registerform.hbs
@@ -1,2 +1,4 @@
 {{page-title "RegisterForm"}}
-<Auth::RegistrationForm @username="bob" />
\ No newline at end of file
+<Auth::Login />
+<br>
+<!--<Auth::PostRegistrationForm @username="bob" />-->
\ No newline at end of file
diff --git a/frontend-reactive/tests/integration/components/auth/login-test.ts b/frontend-reactive/tests/integration/components/auth/login-test.ts
new file mode 100644
index 0000000..5c2b7ff
--- /dev/null
+++ b/frontend-reactive/tests/integration/components/auth/login-test.ts
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | auth/login', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Auth::Login />`);
+
+    assert.dom().hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <Auth::Login>
+        template block text
+      </Auth::Login>
+    `);
+
+    assert.dom().hasText('template block text');
+  });
+});
diff --git a/frontend-reactive/tests/integration/components/auth/registration-form-test.ts b/frontend-reactive/tests/integration/components/auth/post-registration-form-test.ts
similarity index 84%
rename from frontend-reactive/tests/integration/components/auth/registration-form-test.ts
rename to frontend-reactive/tests/integration/components/auth/post-registration-form-test.ts
index 0da1110..5cc0b51 100644
--- a/frontend-reactive/tests/integration/components/auth/registration-form-test.ts
+++ b/frontend-reactive/tests/integration/components/auth/post-registration-form-test.ts
@@ -10,15 +10,15 @@ module('Integration | Component | auth/registration-form', function (hooks) {
     // Set any properties with this.set('myProperty', 'value');
     // Handle any actions with this.set('myAction', function(val) { ... });
 
-    await render(hbs`<Auth::RegistrationForm />`);
+    await render(hbs`<Auth::PostRegistrationForm />`);
 
     assert.dom().hasText('');
 
     // Template block usage:
     await render(hbs`
-      <Auth::RegistrationForm>
+      <Auth::PostRegistrationForm>
         template block text
-      </Auth::RegistrationForm>
+      </Auth::PostRegistrationForm>
     `);
 
     assert.dom().hasText('template block text');
diff --git a/frontend-reactive/tests/integration/components/auth/register-start-test.ts b/frontend-reactive/tests/integration/components/auth/register-start-test.ts
new file mode 100644
index 0000000..7a19cc9
--- /dev/null
+++ b/frontend-reactive/tests/integration/components/auth/register-start-test.ts
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | auth/register-start', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Auth::RegisterStart />`);
+
+    assert.dom().hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <Auth::RegisterStart>
+        template block text
+      </Auth::RegisterStart>
+    `);
+
+    assert.dom().hasText('template block text');
+  });
+});