diff --git a/components/navigation/navigation.vue b/components/navigation/navigation.vue
index 512fc15..eed71da 100644
--- a/components/navigation/navigation.vue
+++ b/components/navigation/navigation.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { useDisplay } from "vuetify/lib/framework.mjs";
+import { useDisplay, useTheme } from "vuetify/lib/framework.mjs";
 import { ref } from "vue";
 import { navigateTo, useRoute } from "#app";
 
@@ -8,6 +8,11 @@ const route = useRoute();
 const { mobile } = useDisplay();
 const navOpen = ref(!mobile.value);
 const navSelected = ref([route.path]);
+
+const theme = useTheme();
+function switchTheme() {
+  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark';
+}
 </script>
 
 <template>
@@ -22,5 +27,11 @@ const navSelected = ref([route.path]);
       <VListItem prepend-icon="mdi-receipt-text" title="Orders" value="/orders" @click="navigateTo('/orders')" />
       <VDivider />
     </VList>
+    <template #append>
+      <VList density="compact" nav>
+        <VDivider />
+        <VListItem prepend-icon="mdi-theme-light-dark" title="Switch theme" class="mx-auto" @click="switchTheme()" />
+      </VList>
+    </template>
   </VNavigationDrawer>
 </template>