1. still no clue nothing works

web/src/components/NavBar.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-const expanded = defineProps();
 const drawer = ref(false);
 </script>
 
 <template>
-  <v-app-bar rounded="lg">
+  <v-container class="justify-center d-flex fill-height align-center">
+    <v-app-bar
+      rounded="lg"
+      class="mx-3 mt-2 w-auto max-width"
+      density="compact"
+    >
       <template v-slot:prepend>
         <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
       </template>
@@ -40,6 +44,8 @@ const drawer = ref(false);
       <v-list-item link title="List Item 2"></v-list-item>
       <v-list-item link title="List Item 3"></v-list-item>
     </v-navigation-drawer>
+  </v-container>
 </template>
 
+.max-width { max-width: 90%; }
 <style scoped></style>

web/src/plugins/vuetify.ts

@@ -14,6 +14,6 @@ import { createVuetify } from "vuetify";
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
   theme: {
-    defaultTheme: "dark", // 'light' | 'dark'
+    defaultTheme: "light", // 'light' | 'dark'
   },
 });