diff --git a/web/index.html b/web/index.html
index 791426e..b2535d4 100644
--- a/web/index.html
+++ b/web/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
   </head>
-  <body class="bg-slate-200 text-slate-800 dark:bg-slate-800 dark:text-slate-200">
+  <body class="bg-slate-200 text-slate-800 dark:bg-slate-800 dark:text-slate-200 box-border w-full">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
diff --git a/web/src/App.vue b/web/src/App.vue
index 83b0eed..2345236 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -27,35 +27,33 @@ export default defineComponent({
 </script>
 
 <template>
-    <div class="box-border w-full">
-        <div class="flex flex-col md:flex-row flex-1">
-            <div
-                :class="[Menu.Expand ? 'md:w-72' : 'md:w-36', Menu.Show ? '' : 'hidden']"
-                class="md:block flex-shrink-0 w-full bg-gray-500 border-r-4 border-black"
-            >
-                <router-view name="sidebar"></router-view>
+    <div class="flex flex-col md:flex-row flex-1">
+        <div
+            :class="[Menu.Expand ? 'md:w-72' : 'md:w-36', Menu.Show ? '' : 'hidden']"
+            class="md:block flex-shrink-0 w-full bg-gray-500 border-r-4 border-black"
+        >
+            <router-view name="sidebar"></router-view>
+        </div>
+
+        <div class="flex-1">
+            <div class="flex bg-gray-400 dark:bg-gray-600 p-4 fixed md:static top-0 left-0 w-full h-14">
+                <span
+                    class="flex-1 font-bold text-5xl -my-3 hidden md:inline"
+                    @click="toggleMenuSize"
+                >≡</span>
+                <span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span>
+
+                <span class="flex-1">{{ CurrentBudgetName }}</span>
+
+                <div class="flex flex-1 flex-row justify-end -mx-4">
+                    <router-link class="mx-4" v-if="LoggedIn" to="/dashboard">Dashboard</router-link>
+                    <router-link class="mx-4" v-if="!LoggedIn" to="/login">Login</router-link>
+                    <a class="mx-4" v-if="LoggedIn" @click="logout">Logout</a>
+                </div>
             </div>
 
-            <div class="flex-1">
-                <div class="flex bg-gray-400 dark:bg-gray-600 p-4">
-                    <span
-                        class="flex-1 font-bold text-5xl -my-3 hidden md:inline"
-                        @click="toggleMenuSize"
-                    >≡</span>
-                    <span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span>
-
-                    <span class="flex-1">{{ CurrentBudgetName }}</span>
-
-                    <div class="flex flex-1 flex-row justify-end -mx-4">
-                        <router-link class="mx-4" v-if="LoggedIn" to="/dashboard">Dashboard</router-link>
-                        <router-link class="mx-4" v-if="!LoggedIn" to="/login">Login</router-link>
-                        <a class="mx-4" v-if="LoggedIn" @click="logout">Logout</a>
-                    </div>
-                </div>
-
-                <div class="p-3 pl-6">
-                    <router-view></router-view>
-                </div>
+            <div class="p-3 pl-6">
+                <router-view></router-view>
             </div>
         </div>
     </div>
diff --git a/web/src/pages/BudgetSidebar.vue b/web/src/pages/BudgetSidebar.vue
index b488f54..032910d 100644
--- a/web/src/pages/BudgetSidebar.vue
+++ b/web/src/pages/BudgetSidebar.vue
@@ -30,7 +30,7 @@ function getAccountName(account : Account) {
 </script>
 
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col mt-14 md:mt-0">
     <span class="m-2 p-1 px-3 h-10 overflow-hidden" :class="[ExpandMenu ? 'text-2xl' : 'text-md']">
       <router-link to="/dashboard" style="font-size:150%">⌂</router-link>
       {{CurrentBudgetName}}
