diff --git a/resources/js/composables/useAppearance.ts b/resources/js/composables/useAppearance.ts
index 8abf354c..19a56592 100644
--- a/resources/js/composables/useAppearance.ts
+++ b/resources/js/composables/useAppearance.ts
@@ -62,9 +62,9 @@ export function initializeTheme() {
     mediaQuery()?.addEventListener('change', handleSystemThemeChange);
 }
 
-export function useAppearance() {
-    const appearance = ref<Appearance>('system');
+const appearance = ref<Appearance>('system');
 
+export function useAppearance() {
     onMounted(() => {
         const savedAppearance = localStorage.getItem('appearance') as Appearance | null;