diff --git a/app/components/NavBar.vue b/app/components/NavBar.vue
index 76f0ac5..cab651a 100644
--- a/app/components/NavBar.vue
+++ b/app/components/NavBar.vue
@@ -19,6 +19,11 @@
 
         <!-- Menu icons on the right side of the toolbar -->
         <template v-slot:append>
+            <v-btn
+                class="text-orange"
+                @click="theme.toggle()"
+                text="Light / Dark"
+            ></v-btn>
             <small class="text-white"> Logout </small>
             <v-btn icon="mdi-account" class="text-white" @click="logout">
             </v-btn>
@@ -55,7 +60,9 @@
 <script setup>
 import { ref, capitalize } from "vue";
 import { useSystemStore } from "~/stores/system";
+import { useTheme } from "vuetify";
 
+const theme = useTheme();
 const drawer = ref(false);
 const { data, status, signOut } = useAuth();
 const systemStore = useSystemStore();