diff --git a/web/src/components/NavBar.vue b/web/src/components/NavBar.vue
index dca85de..7a4398e 100644
--- a/web/src/components/NavBar.vue
+++ b/web/src/components/NavBar.vue
@@ -1,45 +1,23 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-const expanded = defineProps();
-const drawer = ref(false);
-</script>
+<script setup lang="ts"></script>
 
 <template>
-  <v-app-bar rounded="lg">
-    <template v-slot:prepend>
-      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
-    </template>
+  <v-app class="mx-5 my-3">
+    <v-app-bar :elevation="2" rounded density="comfortable">
+      <template v-slot:prepend>
+        <v-app-bar-nav-icon></v-app-bar-nav-icon>
+      </template>
 
-    <template v-slot:append>
-      <!-- FIXME: Button invisible -->
-      <v-btn icon="mdi-account" variant="text">
-        <v-menu activator="parent">
-          <v-list>
-            <v-list-item
-              v-for="(item, index) in [
-                { title: 'Profile' },
-                { title: 'Settings' },
-                { title: 'Log Out' },
-              ]"
-              :key="index"
-              :value="index"
-            >
-              <v-list-item-title>{{ item.title }}</v-list-item-title>
-            </v-list-item>
-          </v-list>
-        </v-menu>
-      </v-btn>
-    </template>
-  </v-app-bar>
+      <v-app-bar-title>Application Bar</v-app-bar-title>
 
-  <v-navigation-drawer v-if="drawer">
-    <v-list-item title="DocuSphere" subtitle="Vuetify"></v-list-item>
-    <v-divider></v-divider>
-    <v-list-item link title="List Item 1"></v-list-item>
-    <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>
+      <template v-slot:append>
+        <v-btn icon="mdi-heart"></v-btn>
+
+        <v-btn icon="mdi-magnify"></v-btn>
+
+        <v-btn icon="mdi-dots-vertical"></v-btn>
+      </template>
+    </v-app-bar>
+  </v-app>
 </template>
 
 <style scoped></style>
diff --git a/web/src/pages/index.vue b/web/src/pages/index.vue
index 2594977..97fcae7 100644
--- a/web/src/pages/index.vue
+++ b/web/src/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <NavBar/>
+  <NavBar />
 </template>
 
 <script lang="ts" setup>
-import NavBar from '@/components/NavBar.vue'
+import NavBar from "@/components/NavBar.vue";
 </script>