diff --git a/src/background.ts b/src/background.ts
index b374d27..cf052e0 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -1,7 +1,7 @@
 "use strict";
 import {initApp} from './background/initApp';
 import {Recorder} from './background/recorder';
-// const portAudio = require('naudiodon');
+const portAudio = require('naudiodon');
 
 
 // NOTE Program Begins Here
@@ -9,13 +9,13 @@ import {Recorder} from './background/recorder';
 
     const isDevelopment = process.env.NODE_ENV !== "production";
 
-    // const recorder = new Recorder({
-    //     channelCount: 1,
-    //     sampleFormat: portAudio.SampleFormat16Bit,
-    //     sampleRate: 16000,
-    //     deviceId: -1, // Use -1 or omit the deviceId to select the default device
-    //     closeOnError: true
-    // }, 'binary');
+    const recorder = new Recorder({
+        channelCount: 1,
+        sampleFormat: portAudio.SampleFormat16Bit,
+        sampleRate: 16000,
+        deviceId: -1, // Use -1 or omit the deviceId to select the default device
+        closeOnError: true
+    }, 'binary');
 
     try {
         // await authenticate method
diff --git a/src/background/initApp.ts b/src/background/initApp.ts
index 89fc68d..4006055 100644
--- a/src/background/initApp.ts
+++ b/src/background/initApp.ts
@@ -11,10 +11,15 @@ let win: BrowserWindow | null;
 function createWindow() {
   // Create the browser window.
   win = new BrowserWindow({
-    width: 450,
-    height: 1025,
+    width: 350,
+    height: 500,
     resizable: true,
+
+    x: 10,
+    y: 10,
+
     webPreferences: {
+      devTools: false,
       // Use pluginOptions.nodeIntegration, leave this alone
       // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
       nodeIntegration: (process.env
diff --git a/src/background/recorder.ts b/src/background/recorder.ts
index 2897d69..88a38db 100644
--- a/src/background/recorder.ts
+++ b/src/background/recorder.ts
@@ -48,7 +48,7 @@ type inputOptions = {clear;
 
 export class Recorder implements RecorderI {
 
-  private ia: boolean;
+  private ia: any;
   private micWritable: StringWritable;
   private recorderOptions: inputOptions;
 
@@ -91,7 +91,7 @@ export class Recorder implements RecorderI {
     this.pause();
   }
 
-  private _update = (Event: boolean, record: boolean) => {
+  private _update = (Event: any, record: boolean) => {
       if (record) {
           console.log('recording');
           this.micWritable.data = '';
diff --git a/src/components/login/index.vue b/src/components/login/index.vue
index e63c46d..43287ec 100644
--- a/src/components/login/index.vue
+++ b/src/components/login/index.vue
@@ -1,5 +1,49 @@
 <template>
-  Login Component
+  <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>
 </template>
 
 <script lang="ts">
@@ -17,11 +61,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 
   #login {
-    width: 350px;
-    height: 500px;
-    background-color: #FF52CA;
-    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
-    // border-radius: 20px;
   }
   
 </style>
\ No newline at end of file
diff --git a/src/router.ts b/src/router.ts
index c4a488c..1523954 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -13,7 +13,7 @@ import Splash from "./views/splash.vue";
 const routes: Array<RouteRecordRaw> = [
 
   {
-    path: "/",
+    path: "/sdf",
     name: "Splash",
     component: Splash
   },
@@ -25,7 +25,7 @@ const routes: Array<RouteRecordRaw> = [
   },
 
   {
-    path: "/sdfds",
+    path: "/",
     name: "Login",
     component: Login
   },