Try to use tailwind

web/src/App.vue

@@ -24,30 +24,27 @@ export default defineComponent({
 </script>
 
 <template>
-  <v-app>
-    <v-app-bar app>
-      <v-app-bar-nav-icon @click="toggleMenu" />
+  <div class="flex-row">
+    <div class="flex w-full">
+      <span class="flex-1" @click="toggleMenu">Home</span>
 
-      <v-app-bar-title>{{$store.getters.CurrentBudget.Name}}</v-app-bar-title>
+      <span class="flex-1">{{$store.getters.CurrentBudget.Name}}</span>
 
-      <v-spacer></v-spacer>
+      <div class="flex flex-1 flex-row">
+        <router-link class="flex-1" v-if="loggedIn" to="/">Dashboard</router-link>
+        <router-link class="flex-1" v-if="!loggedIn" to="/login">Login</router-link>
+        <a class="flex-1" v-if="loggedIn" @click="logout">Logout</a>
+      </div>
+    </div>
 
-      <v-btn v-if="loggedIn"><router-link to="/">Dashboard</router-link></v-btn>
-
-      <v-spacer></v-spacer>
-
-      <v-btn v-if="!loggedIn"><router-link to="/login">Login</router-link></v-btn>
-      <v-btn v-if="loggedIn"><a @click="logout">Logout</a></v-btn>
-    </v-app-bar>
-
-    <v-navigation-drawer app v-model="$store.state.ShowMenu">
+    <div :class="$store.state.ShowMenu ? 'visible' : 'hidden'">
       <router-view name="sidebar"></router-view>
-    </v-navigation-drawer>
+    </div>
   
-    <v-main>
+    <div>
       <router-view></router-view>
-    </v-main>
-  </v-app>
+    </div>
+  </div>
 </template>
 
 <style>
@@ -55,8 +52,5 @@ export default defineComponent({
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
 }
 </style>