diff --git a/attendancetracker/API/DB.js b/attendancetracker/API/DB.js
new file mode 100644
index 0000000..e172792
--- /dev/null
+++ b/attendancetracker/API/DB.js
@@ -0,0 +1,5 @@
+// DB.js
+
+module.exports = {
+    DB: 'mongodb://localhost:27017/mevncrud'
+}
\ No newline at end of file
diff --git a/attendancetracker/API/post.model.js b/attendancetracker/API/post.model.js
new file mode 100644
index 0000000..e69de29
diff --git a/attendancetracker/API/post.route.js b/attendancetracker/API/post.route.js
new file mode 100644
index 0000000..e69de29
diff --git a/attendancetracker/API/server.js b/attendancetracker/API/server.js
new file mode 100644
index 0000000..01eb520
--- /dev/null
+++ b/attendancetracker/API/server.js
@@ -0,0 +1,21 @@
+const express = require('express');
+const app = express();
+const bodyParser = require('body-parser');
+const PORT = 4000;
+const cors = require('cors');
+const mongoose = require('mongoose');
+const config = require('./DB.js');
+
+mongoose.Promise = global.Promise;
+mongoose.connect(config.DB, { useNewUrlParser: true }).then(
+  () => {console.log('Database is connected') },
+  err => { console.log('Can not connect to the database'+ err)}
+);
+
+app.use(cors());
+app.use(bodyParser.urlencoded({extended: true}));
+app.use(bodyParser.json());
+
+app.listen(PORT, function(){
+  console.log('Server is running on Port:',PORT);
+});
\ No newline at end of file
diff --git a/attendancetracker/package-lock.json b/attendancetracker/package-lock.json
index 0141895..c1aa06e 100644
--- a/attendancetracker/package-lock.json
+++ b/attendancetracker/package-lock.json
@@ -2467,6 +2467,14 @@
         "node-releases": "^1.1.47"
       }
     },
+    "buefy": {
+      "version": "0.8.12",
+      "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.8.12.tgz",
+      "integrity": "sha512-scKb+0piTAEYk8mopu5HzshlGsT0K9ChlfkGhQgAF7jC9lH3Ta7anYXG+l8uBoSpqgChK0H19jPP55FbeKn1nA==",
+      "requires": {
+        "bulma": "0.7.5"
+      }
+    },
     "buffer": {
       "version": "4.9.2",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
@@ -2508,6 +2516,11 @@
       "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=",
       "dev": true
     },
+    "bulma": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.5.tgz",
+      "integrity": "sha512-cX98TIn0I6sKba/DhW0FBjtaDpxTelU166pf7ICXpCCuplHWyu6C9LYZmL5PEsnePIeJaiorsTEzzNk3Tsm1hw=="
+    },
     "bytes": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
diff --git a/attendancetracker/package.json b/attendancetracker/package.json
index e80b4f8..6ddb6bd 100644
--- a/attendancetracker/package.json
+++ b/attendancetracker/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "axios": "^0.19.2",
+    "buefy": "^0.8.12",
     "core-js": "^3.6.4",
     "vue": "^2.6.11",
     "vue-axios": "^2.1.5",
diff --git a/attendancetracker/public/style.css b/attendancetracker/public/style.css
new file mode 100644
index 0000000..e69de29
diff --git a/attendancetracker/src/App.vue b/attendancetracker/src/App.vue
index 55df315..b41fb2d 100644
--- a/attendancetracker/src/App.vue
+++ b/attendancetracker/src/App.vue
@@ -1,28 +1,20 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+  
+  <div class="container">
+  <transition name="fade">
+    <router-view></router-view>
+  </transition>
+</div>
 </template>
 
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
-</script>
 
 <style>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+font-family: 'Avenir', Helvetica, Arial, sans-serif;
+-webkit-font-smoothing: antialiased;
+-moz-osx-font-smoothing: grayscale;
+text-align: center;
+color: #2c3e50;
+margin-top: 60px;
 }
 </style>
diff --git a/attendancetracker/src/components/HelloWorld.vue b/attendancetracker/src/components/HelloWorld.vue
index 879051a..93b2521 100644
--- a/attendancetracker/src/components/HelloWorld.vue
+++ b/attendancetracker/src/components/HelloWorld.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="hello">
-    <h1>{{ msg }}</h1>
+    <h1>Johnny is horrible </h1>
     <p>
-      For a guide and recipes on how to configure / customize this project,<br>
+      For a guid:e and recipes on how to configure / customize this project,<br>
       check out the
       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
     </p>
diff --git a/attendancetracker/src/components/Login.vue b/attendancetracker/src/components/Login.vue
new file mode 100644
index 0000000..07ab017
--- /dev/null
+++ b/attendancetracker/src/components/Login.vue
@@ -0,0 +1,37 @@
+<template>
+    <div class="login-box">
+      <h1 class="title">Login</h1>
+      <div class="field">
+      <label class="label">Name</label>
+        <div class="control">
+           <input class="input" type="text" placeholder="e.g Alex Smith">
+        </div>
+      </div>
+
+    <div class="field">
+      <label class="label">Email</label>
+      <div class="control">
+        <input class="input" type="email" placeholder="e.g. alexsmith@gmail.com">
+      </div>
+    </div>
+      </div>
+  </template>
+
+  <script>
+    export default {
+        data(){
+        return {
+          post:{}
+        }
+    },
+    methods: {
+      login(){
+          let uri = 'http://localhost:4000/posts/add';
+          this.axios.post(uri, this.post).then(() => {
+          this.$router.push({name: 'posts'});
+      });
+}
+    }
+  }
+</script>
+  
\ No newline at end of file
diff --git a/attendancetracker/src/main.js b/attendancetracker/src/main.js
index 63eb05f..ceaece1 100644
--- a/attendancetracker/src/main.js
+++ b/attendancetracker/src/main.js
@@ -1,8 +1,35 @@
 import Vue from 'vue'
 import App from './App.vue'
+import Buefy from 'buefy'
 
+Vue.use(Buefy)
 Vue.config.productionTip = false
 
-new Vue({
-  render: h => h(App),
-}).$mount('#app')
+import VueRouter from 'vue-router';
+Vue.use(VueRouter);
+
+import VueAxios from 'vue-axios';
+import axios from 'axios';
+
+Vue.use(VueAxios, axios);
+Vue.config.productionTip = false;
+
+import HelloWorld from './components/HelloWorld.vue';
+import Login from './components/Login.vue';
+
+const routes = [
+  {
+      name: 'home',
+      path: '/',
+      component: HelloWorld
+  },
+  {
+      name: 'login',
+      path: '/login',
+      component: Login
+  }
+];
+
+const router = new VueRouter({ mode: 'history', routes: routes});
+
+new Vue(Vue.util.extend({ router }, App)).$mount('#app');
\ No newline at end of file