diff --git a/frontend/public/index.html b/frontend/public/index.html
index 4123528..6196be4 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -7,7 +7,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
-  <body>
+  <body style="margin:0px">
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a2ec7f2..92a6fcb 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -3,7 +3,6 @@
     <Header />
     <router-view />
     <Footer />
-
   </div>
 </template>
 
@@ -22,15 +21,18 @@ export default {
 
 <style scoped>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  /* font-family: Avenir, Helvetica, Arial, sans-serif; */
+
+  font-family: 'Montserrat', sans-serif;
+
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  
-  color: #2c3e50;
+  background-color: #131313;
+   color: #f1f1f1f1;
 }
 
 #nav {
-  padding: 30px;
+
 }
 
 #nav a {
diff --git a/frontend/src/components/layout/Footer.vue b/frontend/src/components/layout/Footer.vue
index 3f6aace..0af1360 100644
--- a/frontend/src/components/layout/Footer.vue
+++ b/frontend/src/components/layout/Footer.vue
@@ -1,3 +1,4 @@
+footer
 <template>
     <div class="footer">
       <h3>Links</h3>
@@ -15,14 +16,15 @@ name: "Footer"
 
 <style scoped>
 .footer {
-  background: #333;
-  color: #fff;
+  background: #272727;
+  color: #f1f1f1f1;
   text-align: center;
   padding: 10px;
 }
 
 .footer a {
-  color: #fff;
+  font-family: 'Montserrat', sans-serif;
+  color: #f1f1f1f1;
   padding-right: 5px;
   text-decoration: none;
 }
diff --git a/frontend/src/components/layout/Header.vue b/frontend/src/components/layout/Header.vue
index b0b9288..d5098bd 100644
--- a/frontend/src/components/layout/Header.vue
+++ b/frontend/src/components/layout/Header.vue
@@ -1,56 +1,42 @@
 <template>
     <div class="header">
       <div>
-      <img alt="Vue logo" src="../../assets/logo.svg">
+        <img alt="Vue logo" src="../../assets/logo.svg">
       </div>
-
       <div>
-          <u><router-link to="/login">Login</router-link></u>
-      </div>
-
-
-
-
-
+        <u><router-link to="/login">Login</router-link></u>
       </div>
+    </div>
 </template>
 
 <script>
-export default {
-name: "Header"
-}
+  export default {
+  name: "Header"
+  }
 </script>
 
 <style scoped>
 .header {
- display: flex;
-   justify-content: space-between;
-  background: #333;
-  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  background: #272727;
+  color: #f1f1f1f1;
 
   padding: 10px;
 }
 
 .header a {
-  float: left;
-  color: #fff;
-
-  padding: 10px;
+  font-family: 'Montserrat', sans-serif;
+  color: #f1f1f1f1;
   text-decoration: none;
 }
 
 .header img {
   float: left;
-  height: 50px;
+  height: 60px;
   width: auto;
-  padding: 10px;
+  padding: 5px;
 
 }
-.header p {
-     margin-left: 50%;
-}
-
-
-
 
 </style>
