diff --git a/.eslintrc.js b/.eslintrc.js
index 2c6a7fa..ffc893b 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -4,7 +4,7 @@ module.exports = {
     node: true
   },
   extends: [
-    'plugin:vue/essential',
+    'plugin:vue/recommended',
     '@vue/standard'
   ],
   parserOptions: {
diff --git a/src/App.vue b/src/App.vue
index 3fc4761..b66fd22 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,8 @@
 <template>
   <v-app>
-   <AppBar />
+    <AppBar />
     <v-main>
-      <router-view/>
+      <router-view />
     </v-main>
   </v-app>
 </template>
diff --git a/src/components/Login.vue b/src/components/Login.vue
new file mode 100644
index 0000000..e64b47e
--- /dev/null
+++ b/src/components/Login.vue
@@ -0,0 +1,52 @@
+<template>
+  <v-form v-model="valid">
+    <v-container>
+      <v-col cols="12" class="mb-4">
+        <h1 class="display-2 font-weight-bold mb-3">
+          Login
+        </h1>
+      </v-col>
+
+      <v-col
+        cols="12"
+        md="4"
+      >
+        <v-text-field
+          v-model="username"
+          :rules="usernameRules"
+          label="Username"
+          required
+        />
+      </v-col>
+
+      <v-col
+        cols="12"
+        md="4"
+      >
+        <v-text-field
+          v-model="password"
+          type="password"
+          :rules="passwordRules"
+          label="Password"
+          required
+        />
+      </v-col>
+    </v-container>
+  </v-form>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    valid: false,
+    username: '',
+    password: '',
+    usernameRules: [
+      v => !!v || 'Username is required'
+    ],
+    passwordRules: [
+      v => !!v || 'Password is required'
+    ]
+  })
+}
+</script>
diff --git a/src/router/index.js b/src/router/index.js
index d36779e..b3460a7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,12 +11,12 @@ const routes = [
     component: Home
   },
   {
-    path: '/about',
-    name: 'About',
+    path: '/login',
+    name: 'Signin',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../views/Signin.vue')
   }
 ]
 
diff --git a/src/views/Signin.vue b/src/views/Signin.vue
new file mode 100644
index 0000000..cc4aed1
--- /dev/null
+++ b/src/views/Signin.vue
@@ -0,0 +1,15 @@
+<template>
+  <Login />
+</template>
+
+<script>
+import Login from '../components/Login'
+
+export default {
+  name: 'Signin',
+
+  components: {
+    Login
+  }
+}
+</script>