diff --git a/frontend/src/components/layout/AppLayout.vue b/frontend/src/components/layout/AppLayout.vue
index e2239a4..56047ff 100644
--- a/frontend/src/components/layout/AppLayout.vue
+++ b/frontend/src/components/layout/AppLayout.vue
@@ -5,13 +5,11 @@
       title="Purrse"
       subtitle="Personal Finance"
       nav
+      @click="rail = !rail"
+      class="drawer-header"
     >
       <template v-slot:append>
-        <v-btn
-          :icon="rail ? 'mdi-chevron-right' : 'mdi-chevron-left'"
-          variant="text"
-          @click="rail = !rail"
-        />
+        <v-icon>mdi-chevron-left</v-icon>
       </template>
     </v-list-item>
 
@@ -26,7 +24,9 @@
         :to="item.route"
         :value="item.route"
         rounded="xl"
-      />
+      >
+        <v-tooltip v-if="rail" activator="parent" location="end">{{ item.title }}</v-tooltip>
+      </v-list-item>
     </v-list>
 
     <template v-slot:append>
@@ -37,7 +37,9 @@
           title="Logout"
           @click="handleLogout"
           rounded="xl"
-        />
+        >
+          <v-tooltip v-if="rail" activator="parent" location="end">Logout</v-tooltip>
+        </v-list-item>
       </v-list>
     </template>
   </v-navigation-drawer>
@@ -179,3 +181,14 @@ function handleLogout() {
   router.push('/login')
 }
 </script>
+
+<style scoped>
+.drawer-header {
+  cursor: pointer;
+}
+
+.v-navigation-drawer--rail .drawer-header :deep(.v-list-item__prepend) {
+  margin-inline-end: 0;
+  justify-content: center;
+}
+</style>