--- a/client/src/App.vue	Tue Sep 11 12:38:34 2018 +0200
+++ b/client/src/App.vue	Tue Sep 11 13:41:16 2018 +0200
@@ -1,11 +1,28 @@
 <template>
-  <div id="app" class="main d-flex flex-column">
-    <div class="userinterface">
-      <Topbar v-if="isAuthenticated"></Topbar>
-      <Sidebar v-if="isAuthenticated"></Sidebar>
+    <div id="app" class="main">
+        <div class="d-flex flex-column userinterface">
+            <div class="topcontainer">
+                <Topbar v-if="isAuthenticated"></Topbar>
+            </div>
+            <div class="midcontainer d-flex flex-row">
+                <div class="leftcontainer">
+                    <Sidebar v-if="isAuthenticated"></Sidebar>
+                </div>
+                <div class="middle">
+
+                </div>
+                <div class="rightcontainer">
+
+                </div>
+            </div>
+            <div class="bottomcontainer">
+                <User v-if="isAuthenticated"></User>
+            </div>
+        </div>
+        <div class="d-flex flex-column">
+            <router-view/>
+        </div>
     </div>
-    <router-view/>
-  </div>
 </template>
 
 <style lang="scss">
@@ -20,6 +37,33 @@
   background-color: #efefef !important;
 }
 
+.topcontainer {
+  height: 10vh;
+}
+
+.bottomcontainer {
+  .top {
+    height: 10vh;
+  }
+}
+
+.midcontainer {
+  height: 80vh;
+}
+
+.rightcontainer {
+  width: 20vw;
+}
+
+.leftcontainer {
+  width: 20vw;
+}
+
+.middle {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .userinterface {
   position: absolute;
   top: 0;
@@ -45,6 +89,7 @@
 import Sidebar from "./application/Sidebar";
 import Topbar from "./application/Topbar";
 import { mapGetters } from "vuex";
+import User from "./application/User";
 
 export default {
   name: "app",
@@ -53,7 +98,8 @@
   },
   components: {
     Sidebar,
-    Topbar
+    Topbar,
+    User
   }
 };
 </script>