--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Map.jsx	Tue Jun 26 17:26:34 2018 +0200
@@ -0,0 +1,35 @@
+/*eslint no-unused-vars: ["error", { "args": "none" }]*/
+import ol_Map from "ol/map";
+import ol_layer_Tile from "ol/layer/tile";
+import ol_source_OSM from "ol/source/osm";
+import ol_View from "ol/view";
+
+export default {
+  render(h) {
+    return <div id="map" />;
+  },
+  data() {
+    return {
+      lat: 52.278889,
+      long: 8.043056,
+      zoom: 12,
+      projection: "EPSG:4326"
+    };
+  },
+  mounted() {
+    console.log(this.centerX);
+    new ol_Map({
+      layers: [
+        new ol_layer_Tile({
+          source: new ol_source_OSM()
+        })
+      ],
+      target: "map",
+      view: new ol_View({
+        center: [this.long, this.lat],
+        zoom: this.zoom,
+        projection: this.projection
+      })
+    });
+  }
+};

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Sidebar.vue	Tue Jun 26 17:26:34 2018 +0200
@@ -0,0 +1,49 @@
+<template>
+  <div class="sidebar">
+    <nav class="nav flex-column">
+      <a class="nav-link active" href="#">Active</a>
+      <a class="nav-link" href="#">Link</a>
+      <a class="nav-link" href="#">Link</a>
+      <a class="nav-link disabled" href="#">Disabled</a>
+    </nav>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "sidebar",
+  computed: {
+    sidebarStyle() {
+      return {
+        sidebarcollapsed: this.collapsed,
+        sidebarextended: this.collapsed
+      };
+    }
+  },
+  data() {
+    return {
+      collapsed: false
+    };
+  }
+};
+</script>
+
+<style lang="scss">
+@import "../assets/application.scss";
+
+$sidebar-full-width: 150px;
+
+$sidebar-collapsed-width: 80px;
+
+.sidebar {
+  padding-top: $large-offset;
+}
+
+.sidebarcollapsed {
+  width: $sidebar-collapsed-width;
+}
+
+.sidebarextended {
+  width: $sidebar-full-width;
+}
+</style>

--- a/client/src/views/Login.vue	Tue Jun 26 16:40:44 2018 +0200
+++ b/client/src/views/Login.vue	Tue Jun 26 17:26:34 2018 +0200
@@ -12,22 +12,17 @@
              <span class="loginerror">{{ loginAttemptFailed }}</span>
            </div>
         <div class="input-group mb-3 emailgroup">
-          <div class="input-group-prepend">
-            <span class="input-group-text"><i class="fa fa-envelope-open-o mail-icon"></i></span>
-          </div>
           <input type="text" v-model="username" id="inputEmail" class="form-control" :placeholder="emailLabel" required autofocus>
         </div>
         <div class="input-group mb-3 passwordgroup">
-          <div class="input-group-prepend">
-            <span class="input-group-text"><span class="password-icon">*</span></span>
-          </div>
+
           <input :type="isPasswordVisible" v-model="password" id="inputPassword" class="form-control" :placeholder="passwordLabel" required>
           <div class="input-group-append">
             <span class="input-group-text" id="basic-addon2" @click="showPassword"><i class="fa fa-eye"></i></span>
           </div>
         </div>
-        <button class="submitbutton btn btn-lg btn-primary btn-block" :disabled="submitted" type="submit">{{ loginButtonLabel }}</button>
-        <div class="forgottenlink"><a href="#">{{ passPhraseForgotten }}</a></div>
+        <button class="submitbutton btn btn-primary btn-block" :disabled="submitted" type="submit">{{ loginButtonLabel }}</button>
+        <div class="forgottenlink small"><a href="#">{{ passPhraseForgotten }}</a></div>
         <div class="secondary-logo"><img :src="secondaryLogo"></div>
       </form>
     </div>
@@ -35,7 +30,71 @@
 </template>
 
 <style lang="scss">
-@import "../assets/login.scss";
+@import "../assets/application.scss";
+$logincollapsed: 470px;
+$loginextended: 550px;
+
+.emailgroup {
+  box-shadow: $basic-shadow-light !important;
+}
+.forgottenlink {
+  text-align: right;
+  margin-top: $small-offset;
+  margin-bottom: $small-offset;
+}
+#inputPassword {
+  border-right: none;
+}
+.input-group-text {
+  background-color: white !important;
+}
+
+.login {
+  width: 375px;
+  @extend %fully-centered;
+  padding-top: $offset;
+  padding-bottom: $offset;
+  box-shadow: $basic-shadow;
+}
+.logincollapsed {
+  height: $logincollapsed;
+}
+
+.loginextended {
+  height: $loginextended;
+}
+.loginerror {
+  white-space: pre;
+}
+.loginerrormessage {
+  box-shadow: $basic-shadow-light !important;
+}
+.loginform {
+  width: 300px;
+}
+.logogroup {
+  margin-top: $offset;
+  margin-bottom: $offset;
+}
+.mail-icon {
+  width: $iconwidth;
+}
+.passwordgroup {
+  box-shadow: $basic-shadow-light !important;
+}
+.password-icon {
+  position: relative;
+  top: 10px;
+  font-size: $iconsize;
+  line-height: $iconLineHeight;
+  width: $iconwidth;
+}
+.submitbutton {
+  box-shadow: $basic-shadow-light !important;
+}
+.title {
+  margin-left: $offset;
+}
 </style>
 
 <script>
@@ -53,10 +112,10 @@
     };
   },
   computed: {
-    isPasswordVisible: function() {
+    isPasswordVisible() {
       return this.readablePassword ? "text" : "password";
     },
-    loginStyle: function() {
+    loginStyle() {
       return {
         login: true,
         logincollapsed: !this.loginFailed,

--- a/client/src/views/Main.vue	Tue Jun 26 16:40:44 2018 +0200
+++ b/client/src/views/Main.vue	Tue Jun 26 17:26:34 2018 +0200
@@ -1,22 +1,15 @@
 <template>
   <div class="main d-flex">
-    <div class="sidebar">Sidebar!</div>
+    <Sidebar></Sidebar>
     <Map></Map>
   </div>
 </template>
 
 <style lang="scss">
-@import "../assets/application.scss";
-$sidebar-full-width: 150px;
-$sidebar-collapsed-width: 80px;
-
 .main {
   height: 100vh;
 }
-.sidebar {
-  padding-top: $large-offset;
-  width: $sidebar-full-width;
-}
+
 #map {
   background-color: #ffffff;
   width: 100%;
@@ -24,11 +17,13 @@
 </style>
 
 <script>
-import Map from "./Map";
+import Map from "../components/Map";
+import Sidebar from "../components/Sidebar";
 export default {
   name: "mainview",
   components: {
-    Map
+    Map,
+    Sidebar
   }
 };
 </script>