diff --git a/web/components.d.ts b/web/components.d.ts
index 75d3ece..b533d17 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -7,6 +7,10 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ActionToolbar: typeof import('./src/components/actionToolbar.vue')['default']
+    CategoryContainer: typeof import('./src/components/CategoryContainer.vue')['default']
+    HeaderBar: typeof import('./src/components/HeaderBar.vue')['default']
+    ListViewElement: typeof import('./src/components/ListViewElement.vue')['default']
     LoginPage: typeof import('./src/components/loginPage.vue')['default']
   }
 }
diff --git a/web/src/components/HeaderBar.vue b/web/src/components/HeaderBar.vue
index ebe11b2..dadccd4 100644
--- a/web/src/components/HeaderBar.vue
+++ b/web/src/components/HeaderBar.vue
@@ -5,7 +5,7 @@
       dark
       prominent
     >
-     <img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" /> 
+     <img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" />
       <v-toolbar-title>Vuetify</v-toolbar-title>
       <v-spacer></v-spacer>
       <v-text-field
@@ -19,12 +19,16 @@
           clearable
           rounded="pill"
         ></v-text-field>
+      <v-btn icon variant="outlined" >
+        <LogOut />
+      </v-btn>
     </v-toolbar>
   </div>
-  
+
 </template>
 
 <script setup lang="ts">
+import { LogOut } from 'lucide-vue-next';
 </script>
 
 <style scoped>