diff --git a/login.svg b/login.svg
new file mode 100644
index 0000000..a2ccbf3
--- /dev/null
+++ b/login.svg
@@ -0,0 +1,45 @@
+  <svg 
+    id="login"
+    xmlns="http://www.w3.org/2000/svg" 
+    width="350" 
+    height="500" 
+  >
+    <g transform="translate(-4423 -283)">
+      <rect 
+        id="background"
+        width="350" 
+        height="500" 
+        transform="translate(4423 283)" 
+        fill="#ebebeb"
+      />
+
+      <!-- login Form -->
+      <g id="loginForm" data-name="Group 540" transform="translate(-7 1)">
+
+        <!-- email Box -->
+        <rect 
+          id="emailBox" 
+          width="161" 
+          height="41" 
+          rx="10" 
+          transform="translate(4525 470)" 
+          fill="#b9b9b9"/>
+
+        <!-- password Box -->
+        <rect id="passwordBox" 
+          width="161" 
+          height="41" 
+          rx="10" 
+          transform="translate(4525 538)" 
+          fill="#b9b9b9"
+        />
+
+        <text id="Email" transform="translate(4530 523)" font-size="11" font-family="SFCompactDisplay-Bold, SF Compact Display" font-weight="700"><tspan x="0" y="0">Email</tspan></text>
+        <text id="Password" transform="translate(4530 591)" font-size="11" font-family="SFCompactDisplay-Bold, SF Compact Display" font-weight="700"><tspan x="0" y="0">Password</tspan></text>
+      </g>
+      <text id="Login" transform="translate(4518 450)" font-size="20" font-family="SFProText-Bold, SF Pro Text" font-weight="700"><tspan x="0" y="0">Login</tspan></text>
+      <rect id="Rectangle_1493" data-name="Rectangle 1493" width="120" height="38" rx="19" transform="translate(4538 659)" fill="#58c4fd"/>
+      <text id="Submit" transform="translate(4571 684)" fill="#fff" font-size="16" font-family="SFCompactDisplay-Bold, SF Compact Display" font-weight="700"><tspan x="0" y="0">Submit</tspan></text>
+      <text id="Create_account" data-name="Create account" transform="translate(4560 628)" fill="#58c4fd" font-size="11" font-family="SFCompactDisplay-Bold, SF Compact Display" font-weight="700"><tspan x="0" y="0">Create account</tspan></text>
+    </g>
+  </svg>
\ No newline at end of file
diff --git a/src/components/login/index.vue b/src/components/login/index.vue
index 43287ec..c75d625 100644
--- a/src/components/login/index.vue
+++ b/src/components/login/index.vue
@@ -1,49 +1,34 @@
 <template>
-  <svg 
-    id="login"
-    xmlns="http://www.w3.org/2000/svg" 
-    width="350" 
-    height="500" 
-  >
-    <g transform="translate(-4423 -283)">
-      <rect 
-        id="background"
-        width="350" 
-        height="500" 
-        transform="translate(4423 283)" 
-        fill="#ebebeb"
+  <div id="login">
+
+    <!-- login title -->   
+    <div id="loginTitle">Login</div>
+
+    <!-- username and password forms --> 
+    <div id="loginBox">   
+
+      <!-- username -->   
+      <input 
+        class="input" 
+        type="text" 
+        v-model="login.username" 
+        placeholder="username" 
       />
 
-      <!-- login Form -->
-      <g id="loginForm" data-name="Group 540" transform="translate(-7 1)">
+      <!-- password -->
+      <input 
+        class="input" 
+        type="password" 
+        v-model="login.password" 
+        placeholder="Password" 
+      />
 
-        <!-- email Box -->
-        <rect 
-          id="emailBox" 
-          width="161" 
-          height="41" 
-          rx="10" 
-          transform="translate(4525 470)" 
-          fill="#b9b9b9"/>
+    </div>
 
-        <!-- password Box -->
-        <rect id="passwordBox" 
-          width="161" 
-          height="41" 
-          rx="10" 
-          transform="translate(4525 538)" 
-          fill="#b9b9b9"
-        />
+    <!-- submit button --> 
+    <button class="button" v-on:click="submitCreds">Submit</button>
 
-        <text id="Email" transform="translate(4530 523)" font-size="11" font-family="SFCompactDisplay-Bold, SF Compact Display" font-weight="700"><tspan x="0" y="0">Email</tspan></text>
-        <text id="Password" transform="translate(4530 591)" font-size="11" font-family="SFCompactDisplay-Bold, SF Compact Display" font-weight="700"><tspan x="0" y="0">Password</tspan></text>
-      </g>
-      <text id="Login" transform="translate(4518 450)" font-size="20" font-family="SFProText-Bold, SF Pro Text" font-weight="700"><tspan x="0" y="0">Login</tspan></text>
-      <rect id="Rectangle_1493" data-name="Rectangle 1493" width="120" height="38" rx="19" transform="translate(4538 659)" fill="#58c4fd"/>
-      <text id="Submit" transform="translate(4571 684)" fill="#fff" font-size="16" font-family="SFCompactDisplay-Bold, SF Compact Display" font-weight="700"><tspan x="0" y="0">Submit</tspan></text>
-      <text id="Create_account" data-name="Create account" transform="translate(4560 628)" fill="#58c4fd" font-size="11" font-family="SFCompactDisplay-Bold, SF Compact Display" font-weight="700"><tspan x="0" y="0">Create account</tspan></text>
-    </g>
-  </svg>
+  </div>
 </template>
 
 <script lang="ts">
@@ -54,6 +39,15 @@ export default defineComponent({
 
   name: "Login",
 
+  data: function() {
+return {
+    login: {
+      username: "",
+      password: ""
+    }
+  };
+}
+
 });
 
 </script>
@@ -61,6 +55,41 @@ export default defineComponent({
 <style lang="scss" scoped>
 
   #login {
+    width: 350px;
+    height: 500px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: #e6e6e6;
+  }
+
+  #loginBox {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .input {
+    background-color: #B9B9B9;
+    border: none;
+    color: white;
+    padding: 16px;
+    text-decoration: none;
+    margin: 4px 2px;
+    cursor: pointer;
+    border-radius: 10px;
+  }
+
+  .button {
+    background-color: #58C4FD;
+    border: none;
+    color: white;
+    padding: 10px 20px;
+    text-decoration: none;
+    border-radius: 20px;
+    font-weight: bold;
   }
   
 </style>
\ No newline at end of file
diff --git a/src/preload.ts b/src/preload.ts
index 87f3b68..b0cd4b9 100644
--- a/src/preload.ts
+++ b/src/preload.ts
@@ -7,10 +7,13 @@ declare global {
     ipcRenderer: typeof ipcRenderer;
   }
 }
+
 window.ipcRenderer = ipcRenderer;
 
 process.once("loaded", () => {
+
   window.addEventListener("message", event => {
+
     // do something with custom event
     const message = event.data;
 
@@ -25,6 +28,11 @@ process.once("loaded", () => {
     if (message.myTypeField === "update-recorder") {
       ipcRenderer.send("update-recorder", message.record);
     }
-  });
-});
 
+    if (message.myTypeField === "submit-creds") {
+      ipcRenderer.send("submit-creds", message)
+    }
+
+  });
+
+});
\ No newline at end of file
diff --git a/src/router.ts b/src/router.ts
index 1523954..9e4c6d3 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -19,7 +19,7 @@ const routes: Array<RouteRecordRaw> = [
   },
 
   {
-    path: "/home",
+    path: "/sdf",
     name: "Home",
     component: Home
   },
@@ -37,4 +37,4 @@ const router = createRouter({
   routes
 });
 
-export default router;
+export default router;
\ No newline at end of file