diff --git a/app/components/login.hbs b/app/components/login.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..0eb4dbbb70644240a1e34219e70d411323b31b63
--- /dev/null
+++ b/app/components/login.hbs
@@ -0,0 +1,38 @@
+<form>
+  <div class="mb-3 form-floating">
+    <Input id='identification'
+      class="form-control"
+      placeholder="Username or email"
+      @value={{this.username}} />
+    <label for="identification" class="form-label">Username or Email</label>
+  </div>
+
+  <div class="mb-3 form-floating">
+    <Input id='password'
+      class="form-control"
+      placeholder="Enter Password"
+      @type="password"
+      @value={{this.password}} />
+      <label for="password" class="form-label">Password</label>
+  </div>
+
+  {{#if this.disabled}}
+  <button
+    class="btn btn-block btn-primary btn-lg w-100"
+    disabled
+    type="submit">Sign In</button>
+  {{else}}
+    <button
+    class="btn btn-block btn-primary btn-lg w-100"
+    type="submit"
+    {{on "click" this.onSubmit}}>Sign In</button>
+  {{/if}}
+  <div class="mt-3">
+    <input type="checkbox" id="remember" name="remember">
+    <label class="font-weight-normal my-2" for="remember">
+      Remember Me
+    </label>
+  </div>
+
+  {{yield}}
+</form>
\ No newline at end of file
diff --git a/app/components/login.js b/app/components/login.js
new file mode 100644
index 0000000000000000000000000000000000000000..71bd76c99dd336436005578f1b331b9830d44c4c
--- /dev/null
+++ b/app/components/login.js
@@ -0,0 +1,27 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+
+export default class LoginComponent extends Component {
+  @tracked username;
+  @tracked password;
+
+  get disabled() {
+    if (!this.username) {
+      return true;
+    }
+
+    if (!this.password) {
+      return true;
+    }
+
+    return false;
+  }
+
+  @action
+  onSubmit(event) {
+    event.preventDefault();
+    this.args.onSubmit(this.username, this.password);
+  }
+}
diff --git a/app/controllers/login.js b/app/controllers/login.js
index d1221ab82d5330432aaa9678abcd4f740737b2a8..b16ecbe80d06ceb642cad585553c1d8528ca6de6 100644
--- a/app/controllers/login.js
+++ b/app/controllers/login.js
@@ -9,15 +9,11 @@ export default class LoginController extends Controller {
   @service session;
 
   @action
-  async authenticate(event) {
-    event.preventDefault();
-
-    let { identification, password } = this;
-
+  async authenticate(username, password) {
     try {
       await this.session.authenticate(
         'authenticator:auth-token',
-        identification,
+        username,
         password
       );
     } catch (error) {
@@ -30,13 +26,4 @@ export default class LoginController extends Controller {
     }
   }
 
-  @action
-  updateIdentification(event) {
-    this.identification = event.target.value;
-  }
-
-  @action
-  updatePassword(event) {
-    this.password = event.target.value;
-  }
 }
diff --git a/app/templates/login.hbs b/app/templates/login.hbs
index 0fb526003cc159d53866b095fde12bd7727ef110..16d6b7b666aaf11d671e86a55d0585edf05a2243 100644
--- a/app/templates/login.hbs
+++ b/app/templates/login.hbs
@@ -11,42 +11,11 @@
           Please sign in to start your session
         </p>
 
-        <form {{on "submit" this.authenticate}}>
-
-          <div class="mb-3 form-floating">
-            <input id='identification'
-              class="form-control"
-              placeholder="Username or email"
-              value={{this.identification}}
-              {{on "change" this.updateIdentification}}>
-            <label for="identification" class="form-label">Username or Email</label>
-          </div>
-
-          <div class="mb-3 form-floating">
-            <input id='password'
-              class="form-control"
-              placeholder="Enter Password"
-              type="password"
-              value={{this.password}}
-              {{on "change" this.updatePassword}}>
-              <label for="password" class="form-label">Password</label>
-          </div>
-
-          <button
-            class="btn btn-block btn-primary btn-lg w-100"
-            type="submit">Sign In</button>
-
-          <div class="mt-3">
-            <input type="checkbox" id="remember" name="remember">
-            <label class="font-weight-normal my-2" for="remember">
-              Remember Me
-            </label>
-          </div>
-
+        <Login @onSubmit={{this.authenticate}}>
           {{#if this.errorMessage}}
             <p class="text-danger">{{this.errorMessage}}</p>
           {{/if}}
-        </form>
+        </Login>
 
       </div> <!-- card-body -->
     </div> <!-- card -->