diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 8df08df..1021a52 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -6560,6 +6560,12 @@
         }
       }
     },
+    "interpret": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npm.taobao.org/interpret/download/interpret-1.2.0.tgz",
+      "integrity": "sha1-1QYaYiS+WOgIOYX1AU2EQ1lXYpY=",
+      "dev": true
+    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -9542,6 +9548,15 @@
         "readable-stream": "^2.0.2"
       }
     },
+    "rechoir": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npm.taobao.org/rechoir/download/rechoir-0.6.2.tgz",
+      "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
+      "dev": true,
+      "requires": {
+        "resolve": "^1.1.6"
+      }
+    },
     "redent": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
@@ -9943,6 +9958,15 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "sass": {
+      "version": "1.26.5",
+      "resolved": "https://registry.npm.taobao.org/sass/download/sass-1.26.5.tgz",
+      "integrity": "sha1-LXrs+7q/ophWfI8GYVtuJNLWgJk=",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=2.0.0 <4.0.0"
+      }
+    },
     "sass-graph": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",
@@ -10346,6 +10370,17 @@
       "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
       "dev": true
     },
+    "shelljs": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npm.taobao.org/shelljs/download/shelljs-0.8.4.tgz?cache=0&sync_timestamp=1587787497223&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fshelljs%2Fdownload%2Fshelljs-0.8.4.tgz",
+      "integrity": "sha1-3naE/ut2f4cWsyYHiooAh1iQ48I=",
+      "dev": true,
+      "requires": {
+        "glob": "^7.0.0",
+        "interpret": "^1.0.0",
+        "rechoir": "^0.6.2"
+      }
+    },
     "signal-exit": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
@@ -11738,6 +11773,24 @@
       "resolved": "https://registry.npmjs.org/vue-apexcharts/-/vue-apexcharts-1.5.3.tgz",
       "integrity": "sha512-ImbvQxgwbLMrEc9/veDIJ7lzncf1fJDSNqqK0x2YDNUCq5tE9uqM4Gb/ZYUB5WlDM3vDpzwDEmsidWcaO6/WXQ=="
     },
+    "vue-cli-plugin-vuetify": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npm.taobao.org/vue-cli-plugin-vuetify/download/vue-cli-plugin-vuetify-2.0.5.tgz",
+      "integrity": "sha1-Cbp4koZT/H44Aeo35RIPlXQT3aQ=",
+      "dev": true,
+      "requires": {
+        "semver": "^7.1.2",
+        "shelljs": "^0.8.3"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.3.2",
+          "resolved": "https://registry.npm.taobao.org/semver/download/semver-7.3.2.tgz?cache=0&sync_timestamp=1586886225130&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-7.3.2.tgz",
+          "integrity": "sha1-YElisFK4HtB4aq6EOJ/7pw/9OTg=",
+          "dev": true
+        }
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz",
@@ -11830,6 +11883,20 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuetify": {
+      "version": "2.2.27",
+      "resolved": "https://registry.npm.taobao.org/vuetify/download/vuetify-2.2.27.tgz",
+      "integrity": "sha1-ooy2dzt8Vc2OnO3KwGEzuIbI7uQ="
+    },
+    "vuetify-loader": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npm.taobao.org/vuetify-loader/download/vuetify-loader-1.4.3.tgz",
+      "integrity": "sha1-3xMjxVi+CYkId+X76BezpxpsU40=",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.2.0"
+      }
+    },
     "watchpack": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 480b173..a05c748 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,8 @@
     "sass-loader": "^8.0.2",
     "vue": "^2.6.11",
     "vue-apexcharts": "^1.5.3",
-    "vue-router": "^3.1.6"
+    "vue-router": "^3.1.6",
+    "vuetify": "^2.2.11"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.3.0",
@@ -23,7 +24,11 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
+    "sass": "^1.19.0",
+    "sass-loader": "^8.0.0",
+    "vue-cli-plugin-vuetify": "~2.0.5",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify-loader": "^1.3.0"
   },
   "eslintConfig": {
     "root": true,
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 6196be4..fd6ea5d 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
   </head>
   <body style="margin:0px">
     <noscript>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 97d6bc3..47b7e18 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,46 +1,147 @@
 <template>
   <div class="app">
-    <div>
-      <Header />
-    </div>
-    <div class="Site-content">
-      <router-view />
-    </div>
-    <div>
-      <Footer />
-    </div>
+    <v-app id="geotimetracking">
+      <!-- Side navigation menu  -->
+      <v-navigation-drawer v-model="drawer" app clipped class="main_accent">
+        <v-list dense>
+          <v-list-item link to="/">
+            <v-list-item-action>
+              <v-icon>mdi-view-dashboard</v-icon>
+            </v-list-item-action>
+            <v-list-item-content>
+              <v-list-item-title>Home</v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+          <v-list-item link to="/timerecords" v-bind:class="{'d-none':!login}">
+            <v-list-item-action>
+              <v-icon>mdi-clock</v-icon>
+            </v-list-item-action>
+            <v-list-item-content>
+              <v-list-item-title>Time Records</v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+          <v-list-item link to="/weeksummary" v-bind:class="{'d-none':!login}">
+            <v-list-item-action>
+              <v-icon>mdi-chart-bar</v-icon>
+            </v-list-item-action>
+            <v-list-item-content>
+              <v-list-item-title>Week Summary</v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+          <v-list-item link to="/about">
+            <v-list-item-action>
+              <v-icon>mdi-information-outline</v-icon>
+            </v-list-item-action>
+            <v-list-item-content>
+              <v-list-item-title>About</v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+      </v-navigation-drawer>
+
+      <!-- Top menu bar -->
+      <v-app-bar app clipped-left class="main" elevation="10">
+        <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
+        <v-img src="./assets/logo.svg" max-height="100%" max-width="100" contain></v-img>
+        <v-toolbar-title>Geo Timetracking</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <!-- Menu with account icon -->        
+        <v-menu
+      v-model="menu"
+      :close-on-content-click="false"
+      :nudge-width="200"
+      offset-y
+    >
+      <template v-slot:activator="{ on }">
+        <v-btn
+          icon
+          v-on="on"
+        >
+          <v-icon>mdi-account</v-icon>
+        </v-btn>
+      </template>
+
+      <v-card>
+        <v-list>
+          <v-list-item>
+            <v-list-item-avatar>
+              <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John">
+            </v-list-item-avatar>
+
+            <v-list-item-content>
+              <v-list-item-title>John Doe</v-list-item-title>
+              <v-list-item-subtitle>Admin</v-list-item-subtitle>
+            </v-list-item-content>
+
+            <v-list-item-action>
+              <v-btn
+                :class="fav ? 'red--text' : ''"
+                icon
+                @click="fav = !fav"
+              >
+                <v-icon>mdi-heart</v-icon>
+              </v-btn>
+            </v-list-item-action>
+          </v-list-item>
+        </v-list>
+
+        <v-divider></v-divider>
+
+        <v-list>
+          <v-list-item>
+            <v-list-item-action>
+              <v-switch v-model="message" color="primary" :input-value="login" @change="login= !login"></v-switch>
+            </v-list-item-action>
+            <v-list-item-title>View as Guest</v-list-item-title>
+          </v-list-item>
+        </v-list>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+
+          <v-btn text @click="menu = false">Cancel</v-btn>
+          <v-btn color="primary" text @click="menu = false">Save</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-menu>
+      </v-app-bar>
+
+      <!-- Routed pages are inserted here -->
+      <v-content>
+        <router-view />
+      </v-content>
+
+      <!-- Footer on bottom -->
+      <v-footer app class="main">
+        <span>&copy; 2020 Team TacocaT</span>
+      </v-footer>
+    </v-app>
   </div>
 </template>
 
-
 <script>
-import Footer from './components/layout/Footer';
-import Header from './components/layout/Header';
 export default {
-  name:"app",
-  components: {
-    Footer,
-    Header
+  props: {
+    source: String
+  },
+  data: () => ({
+    drawer: null,
+    login: true
+  }),
+  created() {
+    this.$vuetify.theme.dark = true;
   }
-}
+};
 </script>
 
+
 <style scoped>
-
-.app {
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
-  font-family: 'Montserrat', sans-serif;
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: #131313;
-   color: #f1f1f1f1;
+.link {
+  color: #f1f1f1f1;
+  text-decoration: none;
 }
-.Site-content {
-  flex: 1;
+.v-application {
+    font-family: 'Montserrat', sans-serif;
+    background-color: var(--v-background-base) !important;
 }
-
-
 </style>
diff --git a/frontend/src/components/layout/Footer.vue b/frontend/src/components/layout/Footer.vue
deleted file mode 100644
index 8ec471e..0000000
--- a/frontend/src/components/layout/Footer.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-footer
-<template>
-    <div class="footer">
-      <h3>Links</h3>
-      <u><router-link to="/">Home</router-link></u>
-      <br>
-      <u><router-link to="/about">About</router-link></u>
-      <br>
-      <u><router-link to="/timerecords">Time Records</router-link></u>
-      <br>
-      <u><router-link to="/weeksummary">Week Summary</router-link></u>
-    </div>
-</template>
-
-<script>
-export default {
-name: "Footer"
-}
-</script>
-
-<style scoped>
-.footer {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-
-  flex-wrap: wrap;
-  height: 10vh;
-  background: #272727;
-  color: #f1f1f1f1;
-  text-align: center;
-  padding: 10px;
-}
-
-.footer a {
-  font-family: 'Montserrat', sans-serif;
-  color: #f1f1f1f1;
-  padding-right: 5px;
-  text-decoration: none;
-}
-</style>
diff --git a/frontend/src/components/layout/Header.vue b/frontend/src/components/layout/Header.vue
deleted file mode 100644
index ce02122..0000000
--- a/frontend/src/components/layout/Header.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-    <div class="header">
-      <div>
-        <u><router-link to="/"><img alt="Vue logo" src="../../assets/logo.svg"></router-link></u>
-      </div>
-      <div>
-        <u><router-link to="/signin">Sign In</router-link></u>
-      </div>
-    </div>
-</template>
-
-<script>
-  export default {
-  name: "Header"
-  }
-</script>
-
-<style scoped>
-.header {
-  display: flex;
-  height: 10vh;
-  justify-content: space-between;
-  background: #272727;
-  color: #f1f1f1f1;
-
-  padding: 10px;
-}
-
-.header a {
-  font-family: 'Montserrat', sans-serif;
-  color: #f1f1f1f1;
-  text-decoration: none;
-}
-
-.header img {
-  float: left;
-  height: 7vh;
-  width: auto;
-  /* padding: 5px; */
-
-}
-
-</style>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 1f5f073..574fd29 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,10 +1,12 @@
 import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
+import vuetify from './plugins/vuetify';
 
 Vue.config.productionTip = false;
 
 new Vue({
   router,
+  vuetify,
   render: h => h(App)
 }).$mount("#app");
diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js
new file mode 100644
index 0000000..b56520d
--- /dev/null
+++ b/frontend/src/plugins/vuetify.js
@@ -0,0 +1,27 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib';
+
+Vue.use(Vuetify);
+
+export default new Vuetify({
+    theme: {
+        options: {
+            customProperties: true
+        },
+        themes: {
+            dark: {
+                primary: '#0096ff',
+                secondary: '#b0bec5',
+                accent: '#8c9eff',
+                error: '#b71c1c',
+                
+                
+                main: '#272727',
+                main_accent: '#202020',
+                footer: '#404040',
+                background: '#131313',
+            },
+        },
+        dark:true
+    },
+});
diff --git a/frontend/src/views/TimeRecords.vue b/frontend/src/views/TimeRecords.vue
index 5fd58c4..57040b8 100644
--- a/frontend/src/views/TimeRecords.vue
+++ b/frontend/src/views/TimeRecords.vue
@@ -37,6 +37,48 @@ export default {
           end: "25.04.2020 / 16:30",
           time: "2:30",
           type: "Paid"
+        },
+        {
+          id: 4,
+          start: "25.04.2020 / 8:00",
+          end: "25.04.2020 / 13:00",
+          time: "5:00",
+          type: "Paid"
+        },
+        {
+          id: 5,
+          start: "25.04.2020 / 13:00",
+          end: "25.04.2020 / 14:00",
+          time: "1:00",
+          type: "Lunch"
+        },
+        {
+          id: 6,
+          start: "25.04.2020 / 14:00 ",
+          end: "25.04.2020 / 16:30",
+          time: "2:30",
+          type: "Paid"
+        },
+        {
+          id: 7,
+          start: "25.04.2020 / 8:00",
+          end: "25.04.2020 / 13:00",
+          time: "5:00",
+          type: "Paid"
+        },
+        {
+          id: 8,
+          start: "25.04.2020 / 13:00",
+          end: "25.04.2020 / 14:00",
+          time: "1:00",
+          type: "Lunch"
+        },
+        {
+          id: 9,
+          start: "25.04.2020 / 14:00 ",
+          end: "25.04.2020 / 16:30",
+          time: "2:30",
+          type: "Paid"
         }
       ]
     }
diff --git a/frontend/src/views/WeekSummary.vue b/frontend/src/views/WeekSummary.vue
index 0eef17d..7433655 100644
--- a/frontend/src/views/WeekSummary.vue
+++ b/frontend/src/views/WeekSummary.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h3 align='center'>Weeky Summary</h3>
+    <h3 align='center'>Week Summary</h3>
     <div id="chart">
       <apexchart type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
     </div>
diff --git a/frontend/vue.config.js b/frontend/vue.config.js
new file mode 100644
index 0000000..ef6e86b
--- /dev/null
+++ b/frontend/vue.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  "transpileDependencies": [
+    "vuetify"
+  ]
+}
\ No newline at end of file