diff --git a/src/components/BrainBlastBar.vue b/src/components/BrainBlastBar.vue
index 9bfc5eb..f24814b 100644
--- a/src/components/BrainBlastBar.vue
+++ b/src/components/BrainBlastBar.vue
@@ -4,18 +4,24 @@
     <v-app-bar-title>Brain Blast</v-app-bar-title>
 
     <template v-slot:append>
-      <v-btn @click="toggleTheme" icon="mdi-theme-light-dark"></v-btn>
+      <v-btn icon @click="toggleTheme">
+        <v-icon>{{ darkTheme ? 'mdi-white-balance-sunny' : 'mdi-moon-waning-crescent' }}</v-icon>
+      </v-btn>
     </template>
   </v-app-bar>
 </template>
 
 <script setup>
+  import { ref } from 'vue'
   import { useTheme } from 'vuetify'
   import RouterMenu from '@/components/RouterMenu.vue'
 
   const theme = useTheme()
+  const darkTheme = ref(true)
 
-  function toggleTheme () {
+  function toggleTheme() {
+    darkTheme.value = !darkTheme.value
     theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
   }
+
 </script>