diff --git a/attendancetracker/API/attendance.route.js b/attendancetracker/API/attendance.route.js
new file mode 100644
index 0000000..67c7ec8
--- /dev/null
+++ b/attendancetracker/API/attendance.route.js
@@ -0,0 +1,76 @@
+const express = require('express');
+const attendanceRoute = express.Router();
+
+let Att = require('./attendee.model');
+
+  attendanceRoute.route('/add').post(function (req, res) {
+    let post = new Att(req.body);
+    post.save()
+      .then(() => {
+        res.status(200).send("account created");
+      })
+      .catch(() => {
+        res.status(400).send("unable to save to database");
+      });
+  });
+
+
+  attendanceRoute.route('/attendees').post(function (req, res) {
+    let username = req.body.user;
+    console.log(username)
+    Att.find({user: username}, function (err, posts){
+        if(err) {
+          res.json(err);
+        }
+        res.json(posts);
+    });
+  });
+
+
+  attendanceRoute.route('/getById').post(function (req, res) {
+    let username = req.body.user;
+    console.log(username)
+    Att.find({user: username}, function (err, posts){
+        if(err) {
+          res.json(err);
+        }
+        res.json(posts);
+    });
+  });
+
+
+  attendanceRoute.route('/getarr').post(function (req, res) {
+    console.log(req.body.number);
+    var id = req.body.number;
+    //console.log(id)
+    Att.findById(id, function (err, arr){
+        if(err) {
+          res.json(err);
+        }
+        res.json(arr);
+        //console.log(arr);
+    });
+  });
+
+  attendanceRoute.route('/post').post(function (req, res) {
+    let id = req.body.id;
+    let presences = req.body.presences;
+    let absenses = req.body.absenses;
+    Att.findById(id, function(err, post) {
+    if (!post)
+      res.status(404).send("data is not found");
+    else {
+        //console.log(post);
+        post.presences = presences;
+        post.absenses = absenses;
+        post.save().then(() => {
+          res.json('Update complete');
+      })
+      .catch(() => {
+            res.status(400).send("unable to update the database");
+      });
+    }
+  });
+});
+
+module.exports = attendanceRoute;
\ No newline at end of file
diff --git a/attendancetracker/API/attendee.model.js b/attendancetracker/API/attendee.model.js
new file mode 100644
index 0000000..61f1c67
--- /dev/null
+++ b/attendancetracker/API/attendee.model.js
@@ -0,0 +1,16 @@
+const mongoose = require('mongoose');
+const Schema  = mongoose.Schema;
+
+let Attendee = new Schema({
+    name: { type: String, required: true },
+    user: { type: String, required: true },
+    active: { type: Boolean, required: false },
+    presences: {type: Array, reqired: false},
+    absenses: {type: Array, required: false},
+    createdDate: { type: Date, default: Date.now }
+},{
+    collection: 'attendees'
+}
+);
+
+module.exports = mongoose.model('Attendee', Attendee);
\ No newline at end of file
diff --git a/attendancetracker/API/login.route.js b/attendancetracker/API/login.route.js
index bf38eec..238b2fb 100644
--- a/attendancetracker/API/login.route.js
+++ b/attendancetracker/API/login.route.js
@@ -11,6 +11,7 @@ loginRoute.route('/add').post(function (req, res) {
       console.log(user);
   if(user == null){
     let post = new LInfo(req.body);  
+    post.dates = [];
     console.log(post);
     post.save()
     .then(() => {
@@ -47,4 +48,36 @@ loginRoute.route('/post').post(function (req, res) {
       }
     });
   });
+
+
+  loginRoute.route('/getdates').post(function (req, res) {
+    var username = req.body.user;
+    LInfo.findOne({user: username}, function (err, post){
+        if(err) {
+          res.json(err);
+        }
+        res.json(post);
+    });
+  });
+
+  loginRoute.route('/update').post(function (req, res){
+
+    var username = req.body.user;
+    var dates = req.body.dates;
+
+    Att.findOne({user: username}, function(err, post) {
+      if (!post)
+        res.status(404).send("data is not found");
+      else {
+          //console.log(post);
+          post.dates = dates;
+          post.save().then(() => {
+            res.json('Update complete');
+        })
+        .catch(() => {
+              res.status(400).send("unable to update the database");
+        });
+      }
+  });
+});
 module.exports = loginRoute;
\ No newline at end of file
diff --git a/attendancetracker/API/server.js b/attendancetracker/API/server.js
index 9472caf..e384255 100644
--- a/attendancetracker/API/server.js
+++ b/attendancetracker/API/server.js
@@ -5,8 +5,11 @@ const PORT = 4000;
 const cors = require('cors');
 const mongoose = require('mongoose');
 const config = require('./DB.js');
+const attendanceRoute = require('./attendance.route');
 const loginRoute = require('./login.route');
 
+
+
 mongoose.Promise = global.Promise;
 mongoose.connect(config.DB, { useNewUrlParser: true }).then(
   () => {console.log('Database is connected') },
@@ -18,6 +21,8 @@ app.use(bodyParser.urlencoded({extended: true}));
 app.use(bodyParser.json());
 
 app.use('/login', loginRoute);
+app.use('/attendance', attendanceRoute);
+
 
 app.listen(PORT, function(){
   console.log('Server is running on Port:',PORT);
diff --git a/attendancetracker/API/user.model.js b/attendancetracker/API/user.model.js
index 8187d40..93274ff 100644
--- a/attendancetracker/API/user.model.js
+++ b/attendancetracker/API/user.model.js
@@ -6,6 +6,7 @@ let LInfo = new Schema({
     pass: { type: String, required: true },
     firstName: { type: String, required: false },
     lastName: { type: String, required: false },
+    dates: {type: Array, required: false},
     createdDate: { type: Date, default: Date.now }
 },{
     collection: 'users1'
diff --git a/attendancetracker/package-lock.json b/attendancetracker/package-lock.json
index 3655b8a..5a3ca6e 100644
--- a/attendancetracker/package-lock.json
+++ b/attendancetracker/package-lock.json
@@ -1567,178 +1567,177 @@
       "dev": true
     },
     "@webassemblyjs/ast": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
-      "integrity": "sha512-aJMfngIZ65+t71C3y2nBBg5FFG0Okt9m0XEgWZ7Ywgn1oMAT8cNwx00Uv1cQyHtidq0Xn94R4TAywO+LCQ+ZAQ==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
+      "integrity": "sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/helper-module-context": "1.8.5",
-        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
-        "@webassemblyjs/wast-parser": "1.8.5"
+        "@webassemblyjs/helper-module-context": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/wast-parser": "1.9.0"
       }
     },
     "@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.8.5.tgz",
-      "integrity": "sha512-9p+79WHru1oqBh9ewP9zW95E3XAo+90oth7S5Re3eQnECGq59ly1Ri5tsIipKGpiStHsUYmY3zMLqtk3gTcOtQ==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz",
+      "integrity": "sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==",
       "dev": true
     },
     "@webassemblyjs/helper-api-error": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.8.5.tgz",
-      "integrity": "sha512-Za/tnzsvnqdaSPOUXHyKJ2XI7PDX64kWtURyGiJJZKVEdFOsdKUCPTNEVFZq3zJ2R0G5wc2PZ5gvdTRFgm81zA==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz",
+      "integrity": "sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw==",
       "dev": true
     },
     "@webassemblyjs/helper-buffer": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.8.5.tgz",
-      "integrity": "sha512-Ri2R8nOS0U6G49Q86goFIPNgjyl6+oE1abW1pS84BuhP1Qcr5JqMwRFT3Ah3ADDDYGEgGs1iyb1DGX+kAi/c/Q==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz",
+      "integrity": "sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA==",
       "dev": true
     },
     "@webassemblyjs/helper-code-frame": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.8.5.tgz",
-      "integrity": "sha512-VQAadSubZIhNpH46IR3yWO4kZZjMxN1opDrzePLdVKAZ+DFjkGD/rf4v1jap744uPVU6yjL/smZbRIIJTOUnKQ==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz",
+      "integrity": "sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/wast-printer": "1.8.5"
+        "@webassemblyjs/wast-printer": "1.9.0"
       }
     },
     "@webassemblyjs/helper-fsm": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.8.5.tgz",
-      "integrity": "sha512-kRuX/saORcg8se/ft6Q2UbRpZwP4y7YrWsLXPbbmtepKr22i8Z4O3V5QE9DbZK908dh5Xya4Un57SDIKwB9eow==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz",
+      "integrity": "sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw==",
       "dev": true
     },
     "@webassemblyjs/helper-module-context": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.8.5.tgz",
-      "integrity": "sha512-/O1B236mN7UNEU4t9X7Pj38i4VoU8CcMHyy3l2cV/kIF4U5KoHXDVqcDuOs1ltkac90IM4vZdHc52t1x8Yfs3g==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz",
+      "integrity": "sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "mamacro": "^0.0.3"
+        "@webassemblyjs/ast": "1.9.0"
       }
     },
     "@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.8.5.tgz",
-      "integrity": "sha512-Cu4YMYG3Ddl72CbmpjU/wbP6SACcOPVbHN1dI4VJNJVgFwaKf1ppeFJrwydOG3NDHxVGuCfPlLZNyEdIYlQ6QQ==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz",
+      "integrity": "sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw==",
       "dev": true
     },
     "@webassemblyjs/helper-wasm-section": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.8.5.tgz",
-      "integrity": "sha512-VV083zwR+VTrIWWtgIUpqfvVdK4ff38loRmrdDBgBT8ADXYsEZ5mPQ4Nde90N3UYatHdYoDIFb7oHzMncI02tA==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz",
+      "integrity": "sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/helper-buffer": "1.8.5",
-        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
-        "@webassemblyjs/wasm-gen": "1.8.5"
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-buffer": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/wasm-gen": "1.9.0"
       }
     },
     "@webassemblyjs/ieee754": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.8.5.tgz",
-      "integrity": "sha512-aaCvQYrvKbY/n6wKHb/ylAJr27GglahUO89CcGXMItrOBqRarUMxWLJgxm9PJNuKULwN5n1csT9bYoMeZOGF3g==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz",
+      "integrity": "sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==",
       "dev": true,
       "requires": {
         "@xtuc/ieee754": "^1.2.0"
       }
     },
     "@webassemblyjs/leb128": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.8.5.tgz",
-      "integrity": "sha512-plYUuUwleLIziknvlP8VpTgO4kqNaH57Y3JnNa6DLpu/sGcP6hbVdfdX5aHAV716pQBKrfuU26BJK29qY37J7A==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.9.0.tgz",
+      "integrity": "sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==",
       "dev": true,
       "requires": {
         "@xtuc/long": "4.2.2"
       }
     },
     "@webassemblyjs/utf8": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.8.5.tgz",
-      "integrity": "sha512-U7zgftmQriw37tfD934UNInokz6yTmn29inT2cAetAsaU9YeVCveWEwhKL1Mg4yS7q//NGdzy79nlXh3bT8Kjw==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.9.0.tgz",
+      "integrity": "sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w==",
       "dev": true
     },
     "@webassemblyjs/wasm-edit": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.8.5.tgz",
-      "integrity": "sha512-A41EMy8MWw5yvqj7MQzkDjU29K7UJq1VrX2vWLzfpRHt3ISftOXqrtojn7nlPsZ9Ijhp5NwuODuycSvfAO/26Q==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz",
+      "integrity": "sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/helper-buffer": "1.8.5",
-        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
-        "@webassemblyjs/helper-wasm-section": "1.8.5",
-        "@webassemblyjs/wasm-gen": "1.8.5",
-        "@webassemblyjs/wasm-opt": "1.8.5",
-        "@webassemblyjs/wasm-parser": "1.8.5",
-        "@webassemblyjs/wast-printer": "1.8.5"
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-buffer": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/helper-wasm-section": "1.9.0",
+        "@webassemblyjs/wasm-gen": "1.9.0",
+        "@webassemblyjs/wasm-opt": "1.9.0",
+        "@webassemblyjs/wasm-parser": "1.9.0",
+        "@webassemblyjs/wast-printer": "1.9.0"
       }
     },
     "@webassemblyjs/wasm-gen": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.8.5.tgz",
-      "integrity": "sha512-BCZBT0LURC0CXDzj5FXSc2FPTsxwp3nWcqXQdOZE4U7h7i8FqtFK5Egia6f9raQLpEKT1VL7zr4r3+QX6zArWg==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz",
+      "integrity": "sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
-        "@webassemblyjs/ieee754": "1.8.5",
-        "@webassemblyjs/leb128": "1.8.5",
-        "@webassemblyjs/utf8": "1.8.5"
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/ieee754": "1.9.0",
+        "@webassemblyjs/leb128": "1.9.0",
+        "@webassemblyjs/utf8": "1.9.0"
       }
     },
     "@webassemblyjs/wasm-opt": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.8.5.tgz",
-      "integrity": "sha512-HKo2mO/Uh9A6ojzu7cjslGaHaUU14LdLbGEKqTR7PBKwT6LdPtLLh9fPY33rmr5wcOMrsWDbbdCHq4hQUdd37Q==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz",
+      "integrity": "sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/helper-buffer": "1.8.5",
-        "@webassemblyjs/wasm-gen": "1.8.5",
-        "@webassemblyjs/wasm-parser": "1.8.5"
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-buffer": "1.9.0",
+        "@webassemblyjs/wasm-gen": "1.9.0",
+        "@webassemblyjs/wasm-parser": "1.9.0"
       }
     },
     "@webassemblyjs/wasm-parser": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.8.5.tgz",
-      "integrity": "sha512-pi0SYE9T6tfcMkthwcgCpL0cM9nRYr6/6fjgDtL6q/ZqKHdMWvxitRi5JcZ7RI4SNJJYnYNaWy5UUrHQy998lw==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz",
+      "integrity": "sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/helper-api-error": "1.8.5",
-        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
-        "@webassemblyjs/ieee754": "1.8.5",
-        "@webassemblyjs/leb128": "1.8.5",
-        "@webassemblyjs/utf8": "1.8.5"
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-api-error": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/ieee754": "1.9.0",
+        "@webassemblyjs/leb128": "1.9.0",
+        "@webassemblyjs/utf8": "1.9.0"
       }
     },
     "@webassemblyjs/wast-parser": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.8.5.tgz",
-      "integrity": "sha512-daXC1FyKWHF1i11obK086QRlsMsY4+tIOKgBqI1lxAnkp9xe9YMcgOxm9kLe+ttjs5aWV2KKE1TWJCN57/Btsg==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz",
+      "integrity": "sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/floating-point-hex-parser": "1.8.5",
-        "@webassemblyjs/helper-api-error": "1.8.5",
-        "@webassemblyjs/helper-code-frame": "1.8.5",
-        "@webassemblyjs/helper-fsm": "1.8.5",
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/floating-point-hex-parser": "1.9.0",
+        "@webassemblyjs/helper-api-error": "1.9.0",
+        "@webassemblyjs/helper-code-frame": "1.9.0",
+        "@webassemblyjs/helper-fsm": "1.9.0",
         "@xtuc/long": "4.2.2"
       }
     },
     "@webassemblyjs/wast-printer": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.8.5.tgz",
-      "integrity": "sha512-w0U0pD4EhlnvRyeJzBqaVSJAo9w/ce7/WPogeXLzGkO6hzhr4GnQIZ4W4uUt5b9ooAaXPtnXlj0gzsXEOUNYMg==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz",
+      "integrity": "sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/wast-parser": "1.8.5",
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/wast-parser": "1.9.0",
         "@xtuc/long": "4.2.2"
       }
     },
@@ -1771,9 +1770,9 @@
       }
     },
     "acorn": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.0.tgz",
-      "integrity": "sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw==",
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
+      "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
       "dev": true
     },
     "acorn-jsx": {
@@ -2166,15 +2165,66 @@
       }
     },
     "babel-loader": {
-      "version": "8.0.6",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.6.tgz",
-      "integrity": "sha512-4BmWKtBOBm13uoUwd08UwjZlaw3O9GWf456R9j+5YykFZ6LUIjIKLc0zEZf+hauxPOJs96C8k6FvYD09vWzhYw==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz",
+      "integrity": "sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==",
       "dev": true,
       "requires": {
-        "find-cache-dir": "^2.0.0",
-        "loader-utils": "^1.0.2",
-        "mkdirp": "^0.5.1",
-        "pify": "^4.0.1"
+        "find-cache-dir": "^2.1.0",
+        "loader-utils": "^1.4.0",
+        "mkdirp": "^0.5.3",
+        "pify": "^4.0.1",
+        "schema-utils": "^2.6.5"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.0.tgz",
+          "integrity": "sha512-D6gFiFA0RRLyUbvijN74DWAjXSFxWKaWP7mldxkVhyhAV3+SWA9HEJPHQ2c9soIeTFJqcSdFDGFgdqs1iUU2Hw==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "emojis-list": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+          "dev": true
+        },
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        },
+        "schema-utils": {
+          "version": "2.6.5",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.5.tgz",
+          "integrity": "sha512-5KXuwKziQrTVHh8j/Uxz+QUbxkaLW9X/86NBlx/gnKgtsZA2GIVMUn17qWhRFwF8jdYb3Dig5hRO/W5mZqy6SQ==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.12.0",
+            "ajv-keywords": "^3.4.1"
+          }
+        }
       }
     },
     "babel-plugin-dynamic-import-node": {
@@ -3775,6 +3825,11 @@
       "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
       "dev": true
     },
+    "debounce": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz",
+      "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg=="
+    },
     "debug": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@@ -7334,13 +7389,13 @@
       }
     },
     "loader-fs-cache": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.2.tgz",
-      "integrity": "sha512-70IzT/0/L+M20jUlEqZhZyArTU6VKLRTYRDAYN26g4jfzpJqjipLL3/hgYpySqI9PwsVRHHFja0LfEmsx9X2Cw==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz",
+      "integrity": "sha512-ldcgZpjNJj71n+2Mf6yetz+c9bM4xpKtNds4LbqXzU/PTdeAX0g3ytnU1AJMEcTk2Lex4Smpe3Q/eCTsvUBxbA==",
       "dev": true,
       "requires": {
         "find-cache-dir": "^0.1.1",
-        "mkdirp": "0.5.1"
+        "mkdirp": "^0.5.1"
       },
       "dependencies": {
         "find-cache-dir": {
@@ -7522,12 +7577,6 @@
         "semver": "^5.6.0"
       }
     },
-    "mamacro": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/mamacro/-/mamacro-0.0.3.tgz",
-      "integrity": "sha512-qMEwh+UujcQ+kbz3T6V+wAmO2U8veoq2w+3wY8MquqwVA3jChfwY+Tk52GZKDfACEPjuZ7r2oJLejwpt8jtwTA==",
-      "dev": true
-    },
     "map-age-cleaner": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
@@ -7875,20 +7924,12 @@
       }
     },
     "mkdirp": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
       "dev": true,
       "requires": {
-        "minimist": "0.0.8"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
-        }
+        "minimist": "^1.2.5"
       }
     },
     "moment": {
@@ -11945,6 +11986,14 @@
       "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
       "integrity": "sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA=="
     },
+    "vue-google-charts": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/vue-google-charts/-/vue-google-charts-0.3.2.tgz",
+      "integrity": "sha512-pyNLJvjY1ZTAI91ppqGth9YaA7TA7wuotn33f7PIYkwJ4jmUbm2ZBSEkc2QaGKv8jLHkTg+gYDOmvWDTc9pAvQ==",
+      "requires": {
+        "debounce": "^1.1.0"
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -12012,12 +12061,12 @@
       "dev": true
     },
     "watchpack": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
-      "integrity": "sha512-i6dHe3EyLjMmDlU1/bGQpEw25XSjkJULPuAVKCbNRefQVq48yXKUpwg538F7AZTf9kyr57zj++pQFltUa5H7yA==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.1.tgz",
+      "integrity": "sha512-+IF9hfUFOrYOOaKyfaI7h7dquUIOgyEMoQMLA7OP5FxegKA2+XdXThAZ9TU2kucfhDH7rfMHs1oPYziVGWRnZA==",
       "dev": true,
       "requires": {
-        "chokidar": "^2.0.2",
+        "chokidar": "^2.1.8",
         "graceful-fs": "^4.1.2",
         "neo-async": "^2.5.0"
       }
@@ -12041,15 +12090,15 @@
       }
     },
     "webpack": {
-      "version": "4.41.6",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.41.6.tgz",
-      "integrity": "sha512-yxXfV0Zv9WMGRD+QexkZzmGIh54bsvEs+9aRWxnN8erLWEOehAKUTeNBoUbA6HPEZPlRo7KDi2ZcNveoZgK9MA==",
+      "version": "4.42.1",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.42.1.tgz",
+      "integrity": "sha512-SGfYMigqEfdGchGhFFJ9KyRpQKnipvEvjc1TwrXEPCM6H5Wywu10ka8o3KGrMzSMxMQKt8aCHUFh5DaQ9UmyRg==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/helper-module-context": "1.8.5",
-        "@webassemblyjs/wasm-edit": "1.8.5",
-        "@webassemblyjs/wasm-parser": "1.8.5",
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-module-context": "1.9.0",
+        "@webassemblyjs/wasm-edit": "1.9.0",
+        "@webassemblyjs/wasm-parser": "1.9.0",
         "acorn": "^6.2.1",
         "ajv": "^6.10.2",
         "ajv-keywords": "^3.4.1",
@@ -12061,7 +12110,7 @@
         "loader-utils": "^1.2.3",
         "memory-fs": "^0.4.1",
         "micromatch": "^3.1.10",
-        "mkdirp": "^0.5.1",
+        "mkdirp": "^0.5.3",
         "neo-async": "^2.6.1",
         "node-libs-browser": "^2.2.1",
         "schema-utils": "^1.0.0",
diff --git a/attendancetracker/package.json b/attendancetracker/package.json
index 794fd36..b5c0756 100644
--- a/attendancetracker/package.json
+++ b/attendancetracker/package.json
@@ -19,6 +19,7 @@
     "vue-axios": "^2.1.5",
     "vue-ctk-date-time-picker": "^2.4.0",
     "vue-full-calendar": "^2.7.0",
+    "vue-google-charts": "^0.3.2",
     "vue-router": "^3.1.5"
   },
   "devDependencies": {
diff --git a/attendancetracker/src/App.vue b/attendancetracker/src/App.vue
index 8230e01..0092782 100644
--- a/attendancetracker/src/App.vue
+++ b/attendancetracker/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="">
   <transition name="fade">
     <router-view></router-view>
   </transition>
diff --git a/attendancetracker/src/components/Attendance.vue b/attendancetracker/src/components/Attendance.vue
new file mode 100644
index 0000000..2eca75b
--- /dev/null
+++ b/attendancetracker/src/components/Attendance.vue
@@ -0,0 +1,262 @@
+<template>
+
+    <div id="whole-page">
+      <h1 id="title">Attendance</h1> 
+        <div class="attendance">    
+         <table id="presences">
+         <tr style="border: none">
+         <td colspan="3" style="border: none; padding: 5px;">
+         <center>Changes are denoted by a coloured row.</center>
+         </td>
+         </tr>
+          <tr>
+            <th class="name">Name</th>
+            <th class="present">Present</th>
+            <th class="absent">Absent</th>
+          </tr>
+          <tbody id="table">
+            <tr v-for="attendee in attendees" :key="attendee._id">
+              <input type="hidden" :value="attendee.id"> 
+              <td class="name" :id="attendee._id + ':n'">{{ attendee.name }}</td>
+              <td class="present presentcheckbox" :id="attendee._id + ':pcheckbox'">
+                  <input type="checkbox" :value="attendee._id" v-model="presentNames" :id="attendee._id + ':p'" @click="test(attendee._id, 'p', $event)">
+              </td>
+              <td class="absent absentcheckbox" :id="attendee._id + ':acheckbox'" >
+                  <input type="checkbox" :value="attendee._id" v-model="absentNames" :id="attendee._id + ':a'" @click="test(attendee._id, 'a', $event)">
+              </td>
+            </tr>
+          </tbody>
+          <tr>
+              <td class="buttone" colspan="3">
+                <form @submit.prevent="postAttendance">
+                   <button ><span>Take Attendance</span></button>
+                </form>
+              </td>
+          </tr>
+        </table>
+        </div>
+    </div>
+</template>
+
+
+<style scoped>
+  #whole-page {
+    font-family: Open Sans, 'Source Sans Pro', sans-serif;
+    height: 100vh; 
+    width: 100vw; 
+    padding: 0; 
+    margin: 0; 
+    background-color: #f1f5f2;
+  }
+
+  #title{
+    font-family: Roboto, Open Sans, sans-serif; 
+    color: #3d5a80; 
+    text-align: center; 
+  }
+
+  table {
+    table-layout: fixed; 
+    border-collapse: collapse; 
+    width: 50%; 
+    position: absolute; 
+    left: 35vw; 
+    background-color: white; 
+    border-radius: 10px; 
+  }
+
+  th {
+    padding-top: 2vh;
+    padding-bottom: 1vh; 
+    font-size: 25px;
+    border-bottom: 1px solid #000F08; 
+  }
+
+  td {
+    padding-top: 3vh; 
+    padding-bottom: 3vh; 
+    border-bottom: 1px solid #000F08; 
+  }
+
+  .name {
+    padding-left: 1.25vw; 
+    border-right: 1px solid #000F08; 
+  }
+
+
+  .absent, .present {
+    text-align: center; 
+    width: 20%; 
+  }
+
+  .presentcheckbox {
+    background-color: 
+  }
+
+  .buttone {
+    text-align: center; 
+    border-bottom: none; 
+  }
+
+  .buttone button {
+    background-color: #98c1d9; 
+    border: 1px #98c1d9; 
+    border-radius: 5px; 
+    padding: 1vh; 
+    padding-left: 2vh; 
+    padding-right: 2vh; 
+    color: #F7FFFB;
+    font-family: Roboto, Open Sans, sans-serif;  
+  }
+
+  .buttone button:hover {
+    background-color: #A4D0EA; 
+  }
+
+</style>
+  
+  <script>
+
+    export default {
+        mounted() {
+          this.user = document.cookie.substring(document.cookie.indexOf("=")+1);
+          if(document.cookie == ""){
+              this.$router.push({name: 'login'});
+          }else{
+          this.post.user = this.user;
+          //alert(this.post.user);
+          let uri = 'http://65.92.152.100:4000/attendance/attendees';
+          this.axios.post(uri, this.post).then(res => {
+          this.attendees = res.data;
+          //console.log(this.attendees);
+          for(var element of this.attendees){
+            //console.log(element);
+            if(element.presences.indexOf(this.$route.params.id) > -1){
+              this.presentNames.push(element._id);
+              //document.getElementById(element + ":pcheckbox").style.backgroundColor = "green";
+            }else{
+              this.absentNames.push(element._id);
+              //document.getElementById(element + ":acheckbox").style.backgroundColor = "red";
+            }
+            
+          }
+          //console.log(this.presentNames);
+        });
+      }
+        },
+      data() {
+        return {
+          attendees: [],
+          att: {},
+          absentNames: [],
+          presentNames: [],
+          checked: true,
+          post: {},
+          user: null
+        }
+      },
+      methods: {
+        postAttendance(){
+          //iterate through all present, then all absent, and get array of that id user, then check for the current day, if it contains delete, and append the date to the correct array
+          for(var element of this.presentNames){
+            var test = {number: element};
+            let uri = 'http://65.92.152.100:4000/attendance/getarr';
+            this.axios.post(uri, test).then(res => {
+              var arr = res.data.presences;
+              arr = arr.filter(e => e !== this.$route.params.id);
+              //console.log(arr);
+              
+              var arr2 = res.data.absenses;
+              arr2 = arr2.filter(e => e !== this.$route.params.id);
+              //console.log(arr2);
+
+              
+              arr.push(this.$route.params.id);
+              
+              this.post.presences = arr;
+              this.post.absenses = arr2;
+              //console.log(res.data._id);
+              var test2 = {id: res.data._id, presences: arr, absenses: arr2};
+              //console.log(test2);
+              let url = 'http://65.92.152.100:4000/attendance/post';
+              this.axios.post(url, test2).then(res => {
+                console.log(res);
+                
+                /*
+                var ldata = {user: this.user};
+                let url2 = 'http://65.92.152.100:4000/login/getdates';
+                this.axios.post(url2, ldata).then(res => {
+                  console.log(res.data);
+                  var arrd = res.data.dates;
+                  arrd = arrd.filter(e => e !== this.$route.params.id, this.date);
+                  var ddata = {dates: arrd, user: this.user};
+                  arrd.push(ddata);
+                  console.log(arrd);
+
+                  let url3 = 'http://65.92.152.100:4000/login/update';
+                  this.axios.post(url3, ddata).then(res => {
+                    console.log(res);
+                  })
+                })
+                */
+
+              })
+              
+            })
+          }
+          //alert("hello");
+
+          for(var element1 of this.absentNames){
+            var test1 = {number: element1};
+            let uri1 = 'http://65.92.152.100:4000/attendance/getarr';
+            this.axios.post(uri1, test1).then(res => {
+              var arrr = res.data.absenses;
+              arrr = arrr.filter(e => e !== this.$route.params.id);
+              //console.log(arrr);
+              
+              var arrr2 = res.data.presences;
+              arrr2 = arrr2.filter(e => e !== this.$route.params.id);
+
+              
+              arrr.push(this.$route.params.id);
+              
+              this.post.absenses = arrr;
+              //console.log(res.data._id);
+              var testt2 = {id: res.data._id, presences: arrr2, absenses: arrr};
+              //console.log(test2);
+              let url1 = 'http://65.92.152.100:4000/attendance/post';
+              this.axios.post(url1, testt2).then(res => {
+                console.log(res);
+                this.$router.push({name: 'calendar'});
+              })
+              
+            })
+          }
+        },
+        test(input, type){
+          var letter;
+          if(type == "a"){
+            //alert(input);
+            //console.log(this.presentNames);
+            this.presentNames = this.presentNames.filter(e => e !== input);
+            //console.log(this.presentNames);
+            letter = "p";
+            document.getElementById(input + ":acheckbox").style.backgroundColor = "red";
+            document.getElementById(input + ":pcheckbox").style.backgroundColor = "#f2f2f2";
+          }else{
+            this.absentNames = this.absentNames.filter(e => e !== input);
+            
+            document.getElementById(input + ":pcheckbox").style.backgroundColor = "green";
+            document.getElementById(input + ":acheckbox").style.backgroundColor = "#f2f2f2";
+            letter = "a";
+          }
+          document.getElementById(input + ":" + letter).checked = false;
+          
+
+          
+          
+        }
+        }
+      } 
+    
+  </script>
\ No newline at end of file
diff --git a/attendancetracker/src/components/Attendees.vue b/attendancetracker/src/components/Attendees.vue
new file mode 100644
index 0000000..d32f3f8
--- /dev/null
+++ b/attendancetracker/src/components/Attendees.vue
@@ -0,0 +1,69 @@
+<template>
+    <div>
+        <table>
+
+            <tr>
+                <th>Name </th>
+                <th>Delete</th>
+            </tr>
+
+            <tr v-for="attendee in attendees" :key="attendee._id">
+                <td>{{attendee.name}}</td>
+                <td> <form @submit.prevent="del" ><input type="hidden" :value="attendee._id"><button>Delete</button></form> </td>
+            </tr>
+        </table>
+    <br>
+        <form @submit.prevent="addUser">
+            <input type="text" id="name" v-model="attendee.name">
+            <button>Add User</button>
+        </form>
+    </div>
+</template>
+
+<style>
+
+</style>
+
+<script>
+export default {
+        mounted() {
+            this.checkAccount();
+          this.post.user = this.user;
+          //alert(this.post.user);
+          let uri = 'http://65.92.152.100:4000/attendance/attendees';
+          this.axios.post(uri, this.post).then(res => {
+          this.attendees = res.data;
+          console.log(this.attendees);
+          });
+
+        },
+      data() {
+        return {
+          user: null,
+          attendees: [],
+          post: {},
+          attendee: {}
+        }
+      },
+      methods: {
+        checkAccount(){
+            this.user = document.cookie.substring(document.cookie.indexOf("=")+1);
+            if(document.cookie == ""){
+                this.$router.push({name: 'login'});
+        }
+        },
+        del(){
+
+        },
+        addUser(){
+          alert(this.attendee.name);
+          this.attendee.user = this.user;
+          
+          let uri = 'http://65.92.152.100:4000/attendance/add';
+          this.axios.post(uri, this.attendee).then(() => {
+              location.reload();
+          });
+        }
+      }
+}
+</script>
\ No newline at end of file
diff --git a/attendancetracker/src/components/Calendar.vue b/attendancetracker/src/components/Calendar.vue
index e69de29..d9e2267 100644
--- a/attendancetracker/src/components/Calendar.vue
+++ b/attendancetracker/src/components/Calendar.vue
@@ -0,0 +1,165 @@
+<template>
+
+    <div id="page">
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <div class="container-fluid">
+
+            <button type="button" id="sidebarCollapse" class="btn btn-info">
+                <i class="fas fa-align-left"></i>
+                <span>Toggle Sidebar</span>
+            </button>
+
+        </div>
+    </nav>
+
+        <h1>Welcome, {{user}}</h1>
+        
+        <form @submit.prevent="att">
+        <div id="cal">
+       <b-calendar v-model="value" locale="en-US" class="cal" selected-variant="danger" width="150vh" hide-header></b-calendar> 
+        </div>
+        <button class="btn btn-primary">Take/View Attendance</button>
+        </form>
+  
+<!-- Trigger/Open The Modal -->
+<h2>Modal Example</h2>
+
+<!-- Trigger/Open The Modal -->
+<form @submit.prevent="btnClick">
+<button id="myBtn">Open Modal</button>
+</form>
+<!-- The Modal -->
+<div id="myModal" class="modal">
+
+  <!-- Modal content -->
+  <div class="modal-content">
+    <span class="close" @click="spanClick">&times;</span>
+    <p>Some text in the Modal..</p>
+  </div>
+
+</div>
+
+  
+  <form @submit.prevent="logout">
+    <button id="logout"> Log Out </button> 
+  </form>
+
+
+  <form @submit.prevent="addUser">
+    <input type="text" id="name" v-model="attendee.name">
+    <button>Add User</button>
+  </form>
+</div>
+</template>
+
+<style>
+    #cal{
+        text-align: center; 
+        height: 50vh; 
+    }
+    .cal {
+      height: 500px; 
+      border: 1px red; 
+    }
+
+    .modal {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  padding-top: 100px; /* Location of the box */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0,0,0); /* Fallback color */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content */
+.modal-content {
+  background-color: #fefefe;
+  margin: auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+}
+
+/* The Close Button */
+.close {
+  color: #aaaaaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+</style>
+  
+  <script> 
+    export default {
+        mounted() {
+            this.checkAccount()
+
+              // Get the modal
+              this.modal = document.getElementById("myModal");
+
+              // Get the button that opens the modal
+              this.btn = document.getElementById("myBtn");
+
+              // Get the <span> element that closes the modal
+              this.span = document.getElementsByClassName("close")[0];
+
+              
+        },
+      data() {
+        return {
+          value: '',
+          context: null,
+          user: null,
+          attendee: {}, 
+          modal: null, 
+          btn: null, 
+          span: null
+        }
+      },
+      methods: {
+        logout() {
+            document.cookie = "user= ; expires=Sun, 29 Dec 2019 00:00:00 UTC; path=/;";
+            this.$router.push({name: 'login'});
+        },
+        checkAccount(){
+            this.user = document.cookie.substring(document.cookie.indexOf("=")+1);
+            if(document.cookie == ""){
+                this.$router.push({name: 'login'});
+            }
+        },
+        att(){
+          if(this.value == ''){
+            alert("SILLY BOII You must select a date!");
+          }else{
+            this.$router.push({name: 'attendance', params: { id: this.value }});
+          }
+        },
+        addUser(){
+          alert(this.attendee.name);
+          this.attendee.user = this.user;
+          
+          let uri = 'http://65.92.152.100:4000/attendance/add';
+          this.axios.post(uri, this.attendee).then(() => {
+          });
+        },
+        btnClick() {
+          this.modal.style.display = "block";
+        },
+        spanClick() {
+          this.modal.style.display = "none";
+        }
+      }
+    }
+  </script>
\ No newline at end of file
diff --git a/attendancetracker/src/components/Insights.vue b/attendancetracker/src/components/Insights.vue
new file mode 100644
index 0000000..bbe29e7
--- /dev/null
+++ b/attendancetracker/src/components/Insights.vue
@@ -0,0 +1,111 @@
+<template>
+    <div>
+        <table id="presences">
+          <tr>
+            <th class="name">Name</th>
+            <th class="present">Presences</th>
+            <th class="absent">Absences</th>
+          </tr>
+          <tbody id="table">
+            <tr v-for="attendee in attendees" :key="attendee._id">
+              <input type="hidden" :value="attendee.id"> 
+              <td>{{ attendee.name }}</td>
+              <td>{{attendee.presences.length}}</td>
+              <td>{{attendee.absenses.length}}</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <div v-if="chartData.length == 1">Chart Loading Please wait...</div>
+        <div v-else><GChart type="BarChart" :data="chartData" :options="chartOptions" /></div>
+
+
+    </div>
+</template>
+
+<style>
+
+</style>
+
+<script>
+
+
+export default {
+        mounted() {
+            
+            this.user = document.cookie.substring(document.cookie.indexOf("=")+1);
+            if(document.cookie == ""){
+                this.$router.push({name: 'login'});
+            }
+            
+            if(this.$route.params.method == "id"){
+                this.getAttById();
+            }else if(this.$route.params.method == "presences"){
+                this.getAttByPresences();
+                
+            }else if(this.$route.params.method == "absences"){
+                this.getAttByAbsenses();
+                
+            }
+            console.log(this.$route.params.method)
+
+            
+        },
+      data() {
+        return {
+          attendees: [],
+          user: "",
+          chartData: [
+              ["User", "Attendances"]
+          ],
+          chartOptions: {
+        chart: {
+          title: "Company Performance",
+          subtitle: "Sales, Expenses, and Profit: 2014-2017"
+        }
+        }
+        }
+      },
+      methods: {
+          getAttById(){
+            var data = {user: this.user};
+            let uri = 'http://65.92.152.100:4000/attendance/getById';
+            this.axios.post(uri, data).then(res => {
+                console.log(res);
+                this.attendees = res.data;
+
+                for(var i = 0; i < this.attendees.length; i++){
+                this.chartData[i+1] = [this.attendees[i].name, parseInt(this.attendees[i].presences.length, 10)]
+                }
+          });
+          },
+          getAttByPresences(){
+              var data = {user: this.user};
+            let uri = 'http://65.92.152.100:4000/attendance/getById';
+            this.axios.post(uri, data).then(res => {
+                console.log(res);
+                this.attendees = res.data;
+                this.attendees.sort(function(a, b){return b.presences.length - a.presences.length});
+
+                for(var i = 0; i < this.attendees.length; i++){
+                this.chartData[i+1] = [this.attendees[i].name, parseInt(this.attendees[i].presences.length, 10)]
+                }
+                //console.log(this.chartData)
+          });
+          },
+          getAttByAbsenses(){
+              var data = {user: this.user};
+            let uri = 'http://65.92.152.100:4000/attendance/getById';
+            this.axios.post(uri, data).then(res => {
+                console.log(res);
+                this.attendees = res.data;
+                this.attendees.sort(function(a, b){return b.absenses.length - a.absenses.length});
+
+                for(var i = 0; i < this.attendees.length; i++){
+                this.chartData[i+1] = [this.attendees[i].name, parseInt(this.attendees[i].presences.length, 10)]
+                }
+          });
+      }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/attendancetracker/src/components/Login.vue b/attendancetracker/src/components/Login.vue
index ce5c48a..33f0f42 100644
--- a/attendancetracker/src/components/Login.vue
+++ b/attendancetracker/src/components/Login.vue
@@ -1,33 +1,148 @@
 <template>
-  <form @submit.prevent="add">
-    <div class="login">
-      <h1 class="title">Login</h1>
-      <div class="field">
-      <label class="label">Username</label>
-        <div class="control">
-           <input type="text" class="form-control" v-model="post.user">
-        </div> 
+  <div id="whole-page">
+    <h1 id="title">Club Attendance Tracker</h1>
+    <div id="login">
+      <form @submit.prevent="add" id="login-form">
+        <div class="login-form">
+          <h1 class="title">Club Login</h1>
+          <div class="field">
+          <label class="label">Username</label>
+            <div class="control">
+              <input type="text" v-model="post.user" class="text-input">
+            </div> 
+          </div>
+        <div class="field">
+          <label class="label">Password</label>
+          <div class="control">
+            <input type="password" v-model="post.pass" class="text-input">
+          </div>
+        </div>
+        <div>
+          <p id="incorrect">Username/Password Incorrect</p> 
+        </div>
+        <div class="login-button">
+          <div class="control">
+              <button class="buttone"><span>Log in </span></button> <a href="/register" class="buttone button" style="color: white"><span>Register</span></a>
+          </div>
+        </div>
       </div>
-    <div class="field">
-      <label class="label">Password</label>
-      <div class="control">
-        <input type="password" class="form-control" v-model="post.pass">
-      </div>
-    </div>
-    <div class="login-button">
-      <div class="control">
-          <button>Click Me</button>
-      </div>
-    </div>
-  </div>
-</form>
+    </form>
+  </div> 
+</div>
   </template>
 
-  <style>
-  .field {
-    width: 50%; 
-    font-family: 
+  <style scoped>
+
+  #title{
+    font-family: Open Sans, Roboto, sans-serif; 
+    color: #3d5a80; 
+    background-color: #f1f5f2;
+    text-align: center;
+    position: relative;
+    top: 75px; 
   }
+  #whole-page {
+    font-family: Open Sans, 'Source Sans Pro', sans-serif;
+    background-color: #f1f5f2;
+  }
+
+  #login {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  }
+
+.login-form{
+  background-color: white;
+  padding: 40px;
+  border-radius: 15px;
+  width: 500px;
+}
+
+#incorrect{
+    display: none; 
+    color: red;
+    font-style: italic;
+    font-size: 20px;
+    font-family: Arial;
+    text-align: center;
+}
+
+.text-input{
+  width: 100%;
+  padding: 12px 20px;
+  margin-top: -5px;
+  box-sizing: border-box;
+  border: 3px solid #ccc;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+  outline: none;
+}
+
+input:focus {
+  border: 3px solid #555555;
+}
+
+.label{
+  font-size: 18px;
+  color: #555555;
+  font-family: Roboto, Open Sans, Sans-serif;
+}
+
+
+.title{
+  font-size: 30px;
+  font-weight: 100;
+  letter-spacing: 0.5px;
+  color: #555555;
+  font-family: Roboto, Open Sans, Sans-serif;
+}
+
+.control{
+  text-align: center;
+}
+
+.buttone {
+  display: inline-block;
+  border-radius: 4px;
+  background-color: #98c1d9;
+  border: none;
+  color: #FFFFFF;
+  text-align: center;
+  font-size: 28px;
+  padding: 10px;
+  width: 140px;
+  transition: all 0.5s;
+  cursor: pointer;
+  margin: 5px;
+}
+
+.buttone span {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  transition: 0.5s;
+}
+
+.buttone span:after {
+  content: '\00bb';
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  right: -20px;
+  transition: 0.5s;
+}
+
+.buttone:hover span {
+  padding-right: 25px;
+}
+
+.buttone:hover span:after {
+  opacity: 1;
+  right: 0;
+}
+
   
   </style>
 
@@ -43,16 +158,16 @@
             let uri = 'http://65.92.152.100:4000/login/post';
             this.axios.post(uri, this.post).then(res => {
               if(!res.data){
-                alert("Incorrect Username/Password");
+                 document.getElementById("incorrect").style.display = "block"; 
+                 document.getElementsByClassName("text-input")[0].style.border = "3px solid red"; 
+                 document.getElementsByClassName("text-input")[1].style.border = "3px solid red"; 
               }else{
-                this.$router.push({name: 'account'});
-                console.log(res.data);
-                alert("Username: " + res.data.user);
-                alert("Password: " + res.data.pass);
+                document.getElementById("incorrect").style.display = "none"; 
+                this.$router.push({name: 'calendar'});
                 document.cookie = "user="+res.data.user;
               }
             });
-            }
+          }
         }
     }
-  </script>
+  </script>
\ No newline at end of file
diff --git a/attendancetracker/src/components/Register.vue b/attendancetracker/src/components/Register.vue
index 5ff5554..0579345 100644
--- a/attendancetracker/src/components/Register.vue
+++ b/attendancetracker/src/components/Register.vue
@@ -1,34 +1,157 @@
 <template>
-  <form @submit.prevent="add">
-    <div class="login">
-      <h1 class="title">Register</h1>
-      <div class="field">
-      <label class="label">Username</label>
-        <div class="control">
-           <input type="text" class="form-control" v-model="post.user">
+<div id="whole-page">
+    <div id="register">
+      <form @submit.prevent="add" id="login-form">
+        <div class="login-form">
+          <h1 class="title">Register</h1>
+          <div class="field">
+          <label class="label">Username</label>
+            <div class="control">
+              <input type="text" v-model="post.user" class="text-input">
+            </div> 
+          </div>
+          <div class="field">
+            <label class="label">Email</label>
+              <div class="control">
+                <input type="email" v-model="post.email" class="text-input">
+              </div> 
+            </div>
+        <div class="field">
+          <label class="label">Password</label>
+          <div class="control">
+            <input type="password" v-model="post.pass" class="text-input">
+          </div>
+        </div>
+        <div>
+          <p id="reminder">Please ensure all fields are filled in, and that your passwords match</p> 
+        </div>
+        <div class="login-button">
+          <div class="control">
+              <button class="buttone" style="width: 55%"><span>Create Account</span></button><a href="/" class="buttone button" style="color: white; width: 25%"><span>Login</span></a>
+        </div>
         </div> 
       </div>
-    <div class="field">
-      <label class="label">Password</label>
-      <div class="control">
-        <input type="password" class="form-control" v-model="post.pass">
-      </div>
-    </div>
-    <div class="login-button">
-      <div class="control">
-          <button>Click Me</button>
-      </div>
-    </div>
-  </div>
-</form>
+    </form>
+  </div> 
+</div>
   </template>
 
-  <style>
-  .field {
-    width: 50%; 
-    font-family: 
+  <style scoped>
+  #whole-page {
+    font-family: Open Sans, 'Source Sans Pro', sans-serif;
+    background-color: #f1f5f2;
   }
+
+  #register {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  }
+
+.login-form{
+  background-color: white;
+  padding: 40px;
+  border-radius: 15px;
+  width: 500px;
+}
+
+#incorrect{
+    display: none; 
+    color: red;
+    font-style: italic;
+    font-size: 20px;
+    font-family: Arial;
+    text-align: center;
+}
+
+.text-input{
+  width: 100%;
+  padding: 12px 20px;
+  margin-top: -5px;
+  box-sizing: border-box;
+  border: 3px solid #ccc;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+  outline: none;
+}
+
+input:focus {
+  border: 3px solid #555555;
+}
+
+.label{
+  font-size: 18px;
+  color: #555555;
+  font-family: Roboto, Open Sans, Sans-serif;
+  font-weight: 550; 
+}
+
+
+.title{
+  font-size: 30px;
+  font-weight: 100;
+  letter-spacing: 0.5px;
+  color: #3d5a80;
+  font-family: Roboto, Open Sans, Sans-serif;
+  font-weight: bold; 
+}
+
+.control{
+  text-align: center;
+}
+
+.buttone {
+  display: inline-block;
+  border-radius: 4px;
+  background-color: #98c1d9;
+  border: none;
+  color: #FFFFFF;
+  text-align: center;
+  font-size: 28px;
+  padding: 10px;
+  width: 300px;
+  transition: all 0.5s;
+  cursor: pointer;
+  margin: 5px;
+}
+
+.buttone span {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  transition: 0.5s;
+}
+
+.buttone span:after {
+  content: '\00bb';
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  right: -20px;
+  transition: 0.5s;
+}
+
+.buttone:hover span {
+  padding-right: 25px;
+}
+
+.buttone:hover span:after {
+  opacity: 1;
+  right: 0;
+}
+
+#reminder { 
+  display: none; 
+  color: red;
+  font-style: italic;
+  font-size: 20px;
+  font-family: Arial;
+  text-align: center;
+}
+
   
+    
   </style>
 
   <script>
@@ -40,16 +163,22 @@
           },
         methods: {
             add(){
+            if(this.post.user != "" || this.post.email != "" || this.post.pass != ""){ 
             let uri = 'http://65.92.152.100:4000/login/add';
             this.axios.post(uri, this.post).then(res => {
+              console.log(res);
               if(!res.data.user){
                 alert("Success! Account Created!");
                 this.$router.push({name: ''});
               }else{
-               alert("That Username Already Exists!");
+                alert("Error username already in use!")
               }
             });
+            
+            }else{
+              alert("Fields must not be empty!")
             }
         }
     }
+  }
   </script>
diff --git a/attendancetracker/src/main.js b/attendancetracker/src/main.js
index d64c2e4..7cb6336 100644
--- a/attendancetracker/src/main.js
+++ b/attendancetracker/src/main.js
@@ -1,14 +1,15 @@
 import Vue from 'vue'
 import App from './App.vue'
-import Buefy from 'buefy'
+
 import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
 
 // Install BootstrapVue
 Vue.use(BootstrapVue)
 // Optionally install the BootstrapVue icon components plugin
 Vue.use(IconsPlugin)
 
-Vue.use(Buefy)
 Vue.config.productionTip = false
 
 import VueRouter from 'vue-router';
@@ -17,12 +18,22 @@ Vue.use(VueRouter);
 import VueAxios from 'vue-axios';
 import axios from 'axios';
 
+import VueGoogleCharts from 'vue-google-charts'
+
+
 Vue.use(VueAxios, axios);
 Vue.config.productionTip = false;
 
+Vue.use(VueGoogleCharts)
+
 import Login from './components/Login.vue';
 import Calendar from './components/Calendar.vue';
 import Register from './components/Register.vue';
+import Attendance from './components/Attendance.vue';
+import Insights from './components/Insights.vue';
+import Attendees from './components/Attendees.vue';
+
+
 const routes = [
   {
       name: 'login',
@@ -38,7 +49,22 @@ const routes = [
     name: 'Register',
     path: '/register',
     component: Register
-  }
+  },
+  {
+    name: 'attendance',
+    path: '/attendance/:id',
+    component: Attendance
+  },
+  {
+    name: 'Insights',
+    path: '/insights/:method',
+    component: Insights
+  },
+  {
+    name: 'Attendees',
+    path: '/attendees',
+    component: Attendees
+  },
 ];
 
 const router = new VueRouter({ mode: 'history', routes: routes});