--- a/client/src/assets/application.scss	Fri Aug 31 11:38:42 2018 +0200
+++ b/client/src/assets/application.scss	Fri Aug 31 12:11:38 2018 +0200
@@ -10,7 +10,7 @@
 $transition: 0.5s;
 $transition-fast: 0.1s;
 $transition-slow: 3s;
-$topbarheight: 4vh;
+$topbarheight: 5vh;
 
 %fully-centered {
   position: absolute;

--- a/client/src/components/Sidebar.vue	Fri Aug 31 11:38:42 2018 +0200
+++ b/client/src/components/Sidebar.vue	Fri Aug 31 12:11:38 2018 +0200
@@ -10,17 +10,6 @@
         <router-link class="d-flex nav-link" to="users">Users</router-link>
       </div>
     </nav>
-    <div :class="userinfoStyle">
-      <div class="menupadding userinfo">
-        <img class="userpic" src="../assets/user.png">
-        <span class="username">{{ userinfo }}</span>
-      </div>
-      <div>
-        <span class="logout" @click="logoff">
-          <i class="fa fa-power-off"></i>
-        </span>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -30,7 +19,7 @@
 export default {
   name: "sidebar",
   computed: {
-    ...mapGetters("user", ["userinfo", "isSysAdmin"]),
+    ...mapGetters("user", ["isSysAdmin"]),
     ...mapGetters("application", ["sidebarCollapsed"]),
     menuStyle() {
       return {
@@ -41,14 +30,6 @@
         "visibility-collapsed": this.sidebarCollapsed
       };
     },
-    userinfoStyle() {
-      return {
-        user: true,
-        "d-flex": true,
-        "visibility-extended": !this.sidebarCollapsed,
-        "visibility-collapsed": this.sidebarCollapsed
-      };
-    },
     collapseStyle() {
       return {
         collapser: true,
@@ -65,12 +46,6 @@
         shadow: true
       };
     }
-  },
-  methods: {
-    logoff() {
-      this.$store.commit("user/clear_auth");
-      this.$router.push("/login");
-    }
   }
 };
 </script>
@@ -82,10 +57,6 @@
 $collapser-left-offset: 170px;
 $sidebar-collapsed-width: 0px;
 
-.menupadding {
-  padding: 0.5rem 1rem;
-}
-
 .collapser {
   position: absolute;
   top: 0px;
@@ -104,11 +75,6 @@
   transition: $transition;
 }
 
-.userpic {
-  position: relative;
-  left: 1px;
-}
-
 .menu {
   height: 90%;
 }
@@ -121,14 +87,11 @@
   transition: $transition-fast;
 }
 
-.user {
-  margin-top: auto;
-}
 .sidebar {
   margin-top: $topbarheight;
   background-color: #ffffff;
   padding-top: $large-offset;
-  height: 96vh;
+  height: 95vh;
 }
 
 .overlay {
@@ -145,20 +108,4 @@
   width: $sidebar-full-width;
   transition: $transition;
 }
-
-.username {
-  margin-left: $small-offset;
-}
-
-.userinfo {
-  font-weight: bold;
-}
-
-.logout {
-  position: relative;
-  top: 16px;
-  left: -5px;
-  margin-left: $small-offset;
-  cursor: pointer;
-}
 </style>

--- a/client/src/components/Topbar.vue	Fri Aug 31 11:38:42 2018 +0200
+++ b/client/src/components/Topbar.vue	Fri Aug 31 12:11:38 2018 +0200
@@ -1,24 +1,91 @@
 <template>
-    <div class="topbar shadow-sm d-flex flex-row justify-content-between">
-        <div class="align-self-center">
-            <i @click="toggleSidebar" class="menubutton fa fa-bars"></i>
-        </div>
-        <div class="">
-            <h2>Topbar</h2>
-        </div>
-        <div>
-
-        </div>
+  <div class="topbar shadow-sm d-flex flex-row justify-content-between">
+    <div class="align-self-center">
+      <i @click="toggleSidebar" class="menubutton fa fa-bars"></i>
     </div>
+    <div class="searchcontainer align-self-center">
+      <label class="searchlabel" for="search">
+        <i class="fa fa-search"></i>
+      </label>
+      <input id="search" type="text" class="search searchbar">
+    </div>
+    <div class="align-self-center usermanagement">
+      <img class="userpic" src="../assets/user.png">
+      <span class="username">{{ userinfo }}</span>
+      <span class="logout" @click="logoff">
+        <i class="fa fa-power-off"></i>
+      </span>
+    </div>
+  </div>
 </template>
 
+<style lang="scss">
+@import "../assets/application.scss";
+.topbar {
+  min-height: 38px;
+  height: $topbarheight;
+}
+
+.searchcontainer {
+  min-width: 300px;
+  margin-left: auto;
+}
+
+.usermanagement {
+  min-width: 300px;
+  margin-left: auto;
+}
+.logout {
+  position: relative;
+  top: 3px;
+  font-size: x-large;
+  font-weight: bold;
+  margin-right: $offset;
+}
+
+.userpic {
+  margin-right: 0.5rem;
+}
+.username {
+  font-weight: bold;
+  margin-right: 1.5rem;
+}
+
+.searchlabel {
+  color: #aaaaaa;
+  position: relative;
+  top: 2px;
+  font-size: x-large;
+  margin-right: $small-offset;
+}
+
+.searchbar {
+  width: 50vw;
+  border: 1px solid;
+  border-color: #aaaaaa;
+  border-radius: 10px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+</style>
+
+
 <script>
+import { mapGetters } from "vuex";
+
 export default {
   name: "topbar",
   methods: {
     toggleSidebar() {
       this.$store.commit("application/toggleSidebar");
+    },
+    logoff() {
+      this.$store.commit("user/clear_auth");
+      this.$router.push("/login");
     }
+  },
+  computed: {
+    ...mapGetters("user", ["userinfo"])
   }
 };
 </script>