diff --git a/FullstackProsjekt/src/frontend/src/App.vue b/FullstackProsjekt/src/frontend/src/App.vue
index 13efea371bfefe657e7bec7ee777a5bbe605d836..afd2b13658db7b30ec9260d2775e97a30733ae5b 100644
--- a/FullstackProsjekt/src/frontend/src/App.vue
+++ b/FullstackProsjekt/src/frontend/src/App.vue
@@ -2,11 +2,14 @@
 import { RouterLink, RouterView } from 'vue-router';
 import { onMounted, onUnmounted, watch } from 'vue';
 import { getToken, setToken, removeToken, refreshAndStoreToken } from '@/tokenController.js';
+import Sidebar from "@/components/shared/sidebar/Sidebar.vue"
+import { sidebarWidth}  from "@/components/shared/sidebar/state.js";
 
 export default {
-  components: { RouterLink, RouterView },
+  components: { RouterLink, RouterView, Sidebar },
   setup() {
     let intervalId = null;
+    return {sidebarWidth}
 
     // Start interval for token refresh
     const startInterval = () => {
@@ -64,3 +67,10 @@ export default {
   }
 };
 </script>
+
+<template>
+  <Sidebar/>
+  <div style="{'margin-left': sidebarWidth}">
+    <RouterView />
+  </div>
+</template>