diff --git a/app/app.vue b/app/app.vue
index 4eb5a73..5bbadc2 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -2,7 +2,7 @@
 import '~/assets/css/reset.css';
 import '~/assets/css/base.css';
 
-const { accent, neutral, hinting } = await useUserSettings();
+const { accent, neutral, hinting } = useUserSettings();
 
 // by default, disable hinting
 if (Number.isNaN(Number(hinting.value))) hinting.value = '0';
diff --git a/app/components/Attachment/Display.vue b/app/components/Attachment/Display.vue
index e493b7a..115e74d 100644
--- a/app/components/Attachment/Display.vue
+++ b/app/components/Attachment/Display.vue
@@ -4,7 +4,7 @@ const props = defineProps<{
         id: string;
         name: string;
         mimeType: string;
-        status: 'pending' | 'uploaded';
+        status?: 'pending' | 'uploaded';
         url: string;
     }
 }>();
diff --git a/app/components/ChatInput.vue b/app/components/ChatInput.vue
index f4f1437..9422ba4 100644
--- a/app/components/ChatInput.vue
+++ b/app/components/ChatInput.vue
@@ -93,8 +93,6 @@ const handleSubmit = () => {
         return;
     }
 
-    console.log(inputValue.value);
-
     if (inputValue.value.content.trim() || inputValue.value.fileIds.length > 0) {
         emit('submit', inputValue.value, selectedModel.value);
         inputValue.value = { content: '', fileIds: [] };
diff --git a/app/components/Dialog/QuickSwitcher.vue b/app/components/Dialog/QuickSwitcher.vue
index e9bf12e..24237ba 100644
--- a/app/components/Dialog/QuickSwitcher.vue
+++ b/app/components/Dialog/QuickSwitcher.vue
@@ -75,7 +75,6 @@ const handleKeyDown = (e: KeyboardEvent) => {
 
     // 60% of the window height aka 60vh
     const itemsPerPage = Math.floor(((window.innerHeight * 0.6) - (inputRef.value?.parentElement?.clientHeight || 0)) / 42);
-    console.log(itemsPerPage);
 
     switch (e.key) {
         case 'ArrowDown':
diff --git a/app/components/Dropdown.vue b/app/components/Dropdown.vue
index 3dbb6e5..520d3a0 100644
--- a/app/components/Dropdown.vue
+++ b/app/components/Dropdown.vue
@@ -29,10 +29,6 @@ const toggle = () => (isOpen.value = !isOpen.value);
 const close = () => (isOpen.value = false);
 
 defineExpose({ close });
-
-onMounted(() => {
-    console.log(triggerRef.value);
-})
 </script>
 
 <template>
diff --git a/app/components/FileSelector.vue b/app/components/FileSelector.vue
index 834da3a..f10ef24 100644
--- a/app/components/FileSelector.vue
+++ b/app/components/FileSelector.vue
@@ -75,8 +75,6 @@ const handleFileChange = (e: Event) => {
     const inputFiles = (e.target! as HTMLInputElement).files;
     if (inputFiles === null) return;
 
-    console.log(inputFiles);
-
     rawFiles.value = [...inputFiles].map(file => ({
         name: file.name,
         type: file.type,
diff --git a/app/components/Settings/AIServiceProvider.vue b/app/components/Settings/AIServiceProvider.vue
index 7ba6705..fcfeb88 100644
--- a/app/components/Settings/AIServiceProvider.vue
+++ b/app/components/Settings/AIServiceProvider.vue
@@ -2,7 +2,6 @@
 import { sortByReleaseDate } from '~/utils/sort';
 import { encryptData, decrypt, uint8ArrayToBase64, base64ToUint8Array } from '~/utils/crypto';
 import { providerBaseUrls, type Model } from '~/types/model';
-import { useSettings } from '~/composables/useSettings';
 import ModelItem from './ModelItem.vue';
 import RowVirtualizerDynamic from '../RowVirtualizerDynamic.vue';
 const triplit = useTriplitClient();
diff --git a/app/components/Settings/AppearanceSettings.vue b/app/components/Settings/AppearanceSettings.vue
index dda832b..b2b0a2f 100644
--- a/app/components/Settings/AppearanceSettings.vue
+++ b/app/components/Settings/AppearanceSettings.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { colorScheme, settings, updateSettings } = await useUserSettings();
+const { colorScheme, settings, updateSettings } = useUserSettings();
 
 const accents = ['violet', 'volcano', 'lime', 'sky', 'coral', 'emerald', 'amber', 'rose', 'cyan', 'indigo', 'magenta'];
 const neutrals = ['zinc', 'slate', 'obsidian'];
diff --git a/app/components/Settings/GeneralSettings.vue b/app/components/Settings/GeneralSettings.vue
index acdb860..e23f56c 100644
--- a/app/components/Settings/GeneralSettings.vue
+++ b/app/components/Settings/GeneralSettings.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+const props = defineProps<{
+    params?: string;
+}>();
+
 defineEmits(['navigate']);
 </script>
 
diff --git a/app/components/Settings/ProviderSettings.vue b/app/components/Settings/ProviderSettings.vue
index 60c7536..e138999 100644
--- a/app/components/Settings/ProviderSettings.vue
+++ b/app/components/Settings/ProviderSettings.vue
@@ -5,6 +5,10 @@ import { providerIcons } from '~/utils/model-mapping';
 const triplit = useTriplitClient();
 const { providers } = useModels();
 
+const props = defineProps<{
+    params?: string;
+}>();
+
 if (providers.value === undefined) throw new Error('Providers not loaded');
 
 // TODO: sometimes this code can create duplicate providers
diff --git a/app/components/Settings/SystemAssistants.vue b/app/components/Settings/SystemAssistants.vue
index fd1f30e..00b8090 100644
--- a/app/components/Settings/SystemAssistants.vue
+++ b/app/components/Settings/SystemAssistants.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
 import type { ModelWithProvider } from '~/composables/useModels';
 
-const { providers, allModels } = await useModels();
-const { settings, updateSettings } = await useUserSettings();
+const props = defineProps<{
+    params?: string;
+}>();
+
+const { providers, allModels } = useModels();
+const { settings, updateSettings } = useUserSettings();
 
 const toggle = async (key: string) => {
     const current = (settings.value.systemAssistants as any)[key];
diff --git a/app/components/ThemeSwitcher.vue b/app/components/ThemeSwitcher.vue
index d52fe92..d44ad12 100644
--- a/app/components/ThemeSwitcher.vue
+++ b/app/components/ThemeSwitcher.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
 
 type Theme = 'light' | 'dark' | 'system';
 
-const { updateSettings, settings } = await useUserSettings();
+const { updateSettings, settings } = useUserSettings();
 
 const selectTheme = (colorScheme: Theme) => {
     updateSettings({ appearance: { colorScheme } });
diff --git a/app/composables/useChat.ts b/app/composables/useChat.ts
index 0d232b6..1e9ec29 100644
--- a/app/composables/useChat.ts
+++ b/app/composables/useChat.ts
@@ -448,7 +448,7 @@ export const useChat = (agentId: string) => {
         FailedToGenerate,
     }
     const autoRename = async (topicId: string, prompt: string): Promise<Result<string, AutoRenameError>> => {
-        const { settings } = await useUserSettings();
+        const { settings } = useUserSettings();
 
         console.log(settings.value);
 
diff --git a/app/composables/useModels.ts b/app/composables/useModels.ts
index 990535a..311ae2c 100644
--- a/app/composables/useModels.ts
+++ b/app/composables/useModels.ts
@@ -1,4 +1,3 @@
-// // composables/useModels.ts
 import type { Entity } from '@triplit/client';
 import type schema from '#triplit/schema';
 
diff --git a/app/composables/useUserSettings.ts b/app/composables/useUserSettings.ts
index feb5a28..fced016 100644
--- a/app/composables/useUserSettings.ts
+++ b/app/composables/useUserSettings.ts
@@ -1,112 +1,109 @@
 import { schema } from '#triplit/schema';
 import { type Entity } from '@triplit/client';
-import { computed, watch } from 'vue';
+import { computed, watch, ref, type Ref } from 'vue';
 
-// TODO: most of this code is generated by gemini 3 flash with fixups, 
-// but its still bad code, so I'm going to clean it up later
-export const useUserSettings = async () => {
-    const { user, loggedIn } = useAuth();
+type UserSettings = Entity<typeof schema, 'settings'>;
+
+interface UserSettingsState {
+    accent: Ref<string>;
+    neutral: Ref<string>;
+    hinting: Ref<string>;
+    colorSchemePreference: Ref<'light' | 'dark' | 'system'>;
+    colorSchemeClass: Ref<'light' | 'dark' | undefined>;
+    remoteSettings: Ref<UserSettings | null>;
+    initPromise: Promise<void> | null;
+}
+
+export const useUserSettings = () => {
+    const nuxtApp = useNuxtApp();
     const triplit = useTriplitClient();
+    const { user, loggedIn } = useAuth();
 
-    const accent = useState('theme:accent', () => 'violet');
-    const neutral = useState('theme:neutral', () => 'zinc');
-    const hinting = useState('theme:hinting', () => '0');
+    if (!nuxtApp._userSettingsState) {
+        nuxtApp._userSettingsState = {
+            accent: ref('violet'),
+            neutral: ref('zinc'),
+            hinting: ref('0'),
+            colorSchemePreference: ref<'light' | 'dark' | 'system'>('system'),
+            colorSchemeClass: ref<undefined | 'light' | 'dark'>(undefined),
+            remoteSettings: ref<UserSettings | null>(null),
+            initPromise: null,
+        } as UserSettingsState;
+    }
 
-    const colorScheme: { preference: Ref<'light' | 'dark' | 'system'>; value: Ref<'light' | 'dark'>; class: Ref<'light' | 'dark' | undefined> } = {
-        preference: useState('theme:colorScheme', () => 'system' as 'light' | 'dark' | 'system'),
-        value: computed(() => {
-            if (colorScheme.preference.value === 'system') {
-                if (import.meta.client) {
-                    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const state = nuxtApp._userSettingsState as UserSettingsState;
 
-                    return prefersDark ? 'dark' : 'light';
+    const init = () => {
+        if (state.initPromise) return state.initPromise;
+
+        state.initPromise = (async () => {
+            const { results } = await useQuery('settings', triplit, triplit.query('settings'));
+
+            watch(results, (val) => {
+                if (val && val.length > 0) {
+                    state.remoteSettings.value = val[0] as UserSettings;
+                } else {
+                    state.remoteSettings.value = null;
                 }
+            }, { immediate: true, deep: true });
 
-                return 'dark';
-            }
+            watch(state.remoteSettings, (newSettings) => {
+                if (!newSettings?.appearance) return;
+                const { appearance } = newSettings;
 
-            return colorScheme.preference.value as 'light' | 'dark';
-        }),
-        class: ref<undefined | 'light' | 'dark'>(undefined)
-    }
+                if (appearance.colorScheme) {
+                    state.colorSchemePreference.value = appearance.colorScheme as 'light' | 'dark' | 'system';
+                }
+                if (appearance.accent) {
+                    state.accent.value = appearance.accent;
+                }
+                if (appearance.neutral) {
+                    state.neutral.value = appearance.neutral;
+                }
+                if (appearance.hinting !== undefined) {
+                    state.hinting.value = String(appearance.hinting);
+                }
+            }, { immediate: true, deep: true });
 
-    let listeningToColorScheme = false;
-    const changeSystemColorScheme = (e: MediaQueryListEvent) => {
-        if (colorScheme.preference.value !== 'system') return;
-
-        colorScheme.class.value = e.matches ? 'dark' : 'light';
-    }
-    watch(colorScheme.preference, () => {
-        if (colorScheme.preference.value === 'system') {
             if (import.meta.client) {
-                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-
-                if (!listeningToColorScheme) {
-                    listeningToColorScheme = true;
-                    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', changeSystemColorScheme);
-                }
-
-                colorScheme.class.value = prefersDark ? 'dark' : 'light';
-                return;
+                const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+                const update = () => {
+                    if (state.colorSchemePreference.value === 'system') {
+                        state.colorSchemeClass.value = mediaQuery.matches ? 'dark' : 'light';
+                    } else {
+                        state.colorSchemeClass.value = state.colorSchemePreference.value as 'dark' | 'light';
+                    }
+                };
+                mediaQuery.addEventListener('change', update);
+                watch(state.colorSchemePreference, update, { immediate: true });
+            } else {
+                watch(state.colorSchemePreference, (pref) => {
+                    state.colorSchemeClass.value = pref === 'system' ? 'dark' : (pref as 'dark' | 'light');
+                }, { immediate: true });
             }
+        })();
 
-            if (listeningToColorScheme) {
-                listeningToColorScheme = false;
-                window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', changeSystemColorScheme);
+        return state.initPromise;
+    };
+
+    const colorSchemeValue = computed(() => {
+        if (state.colorSchemePreference.value === 'system') {
+            if (import.meta.client) {
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
             }
-
-            // fallback to dark on the server
-            colorScheme.class.value = 'dark';
-            return;
+            return 'dark';
         }
+        return state.colorSchemePreference.value as 'dark' | 'light';
+    });
 
-        colorScheme.class.value = colorScheme.preference.value as 'light' | 'dark';
-    }, { immediate: true });
-
-    const start = Date.now();
-    const remoteSettings = useState<Entity<typeof schema, 'settings'> | null>('user:settings', () => null);
-    const { results } = await useQuery('settings', triplit, triplit.query('settings'))
-    console.log("fetching settings took", Date.now() - start);
-
-    watch(results, (val) => {
-        if (!val) {
-            remoteSettings.value = null;
-            return;
-        }
-
-        remoteSettings.value = val[0] as any;
-    }, { immediate: true, deep: true })
-
-    watch(remoteSettings, (newSettings) => {
-        if (!newSettings?.appearance) return;
-        const { appearance } = newSettings;
-
-        if (appearance.colorScheme) {
-            colorScheme.preference.value = appearance.colorScheme as 'light' | 'dark' | 'system';
-        }
-
-        if (appearance.accent) {
-            accent.value = appearance.accent;
-        }
-
-        if (appearance.neutral) {
-            neutral.value = appearance.neutral;
-        }
-
-        if (appearance.hinting !== undefined) {
-            hinting.value = String(appearance.hinting);
-        }
-    }, { immediate: true, deep: true });
-
-    // Effective settings with defaults for backwards compatibility
     const settings = computed(() => {
-        const remote = remoteSettings.value;
+        const remote = state.remoteSettings.value;
         return {
             appearance: {
-                colorScheme: remote?.appearance?.colorScheme ?? colorScheme.preference.value,
-                accent: remote?.appearance?.accent ?? accent.value,
-                neutral: remote?.appearance?.neutral ?? neutral.value,
-                hinting: remote?.appearance?.hinting ?? Number(hinting.value),
+                colorScheme: remote?.appearance?.colorScheme ?? state.colorSchemePreference.value,
+                accent: remote?.appearance?.accent ?? state.accent.value,
+                neutral: remote?.appearance?.neutral ?? state.neutral.value,
+                hinting: remote?.appearance?.hinting ?? Number(state.hinting.value),
                 fontSize: remote?.appearance?.fontSize ?? 'medium',
             },
             systemAssistants: {
@@ -119,9 +116,6 @@ export const useUserSettings = async () => {
         };
     });
 
-    /**
-     * Update settings both locally and on the server
-     */
     const updateSettings = async (updates: {
         appearance?: {
             colorScheme?: 'light' | 'dark' | 'system';
@@ -139,23 +133,23 @@ export const useUserSettings = async () => {
         };
     }) => {
         if (updates.appearance) {
-            if (updates.appearance.colorScheme) colorScheme.preference.value = updates.appearance.colorScheme;
-            if (updates.appearance.accent) accent.value = updates.appearance.accent;
-            if (updates.appearance.neutral) neutral.value = updates.appearance.neutral;
-            if (updates.appearance.hinting !== undefined) hinting.value = String(updates.appearance.hinting);
+            if (updates.appearance.colorScheme) state.colorSchemePreference.value = updates.appearance.colorScheme;
+            if (updates.appearance.accent) state.accent.value = updates.appearance.accent;
+            if (updates.appearance.neutral) state.neutral.value = updates.appearance.neutral;
+            if (updates.appearance.hinting !== undefined) state.hinting.value = String(updates.appearance.hinting);
         }
 
         if (!loggedIn.value || !user.value?.id) return;
 
-        const current = remoteSettings.value;
+        const current = state.remoteSettings.value;
         if (!current) {
             await triplit.insert('settings', {
                 userId: user.value.id,
                 appearance: {
-                    colorScheme: colorScheme.preference.value,
-                    accent: accent.value,
-                    neutral: neutral.value,
-                    hinting: Number(hinting.value),
+                    colorScheme: state.colorSchemePreference.value,
+                    accent: state.accent.value,
+                    neutral: state.neutral.value,
+                    hinting: Number(state.hinting.value),
                     ...(updates.appearance || {})
                 },
                 systemAssistants: {
@@ -187,12 +181,17 @@ export const useUserSettings = async () => {
     };
 
     return {
+        init,
         settings,
-        remoteSettings,
+        remoteSettings: state.remoteSettings,
         updateSettings,
-        accent,
-        neutral,
-        hinting,
-        colorScheme
+        accent: state.accent,
+        neutral: state.neutral,
+        hinting: state.hinting,
+        colorScheme: {
+            preference: state.colorSchemePreference,
+            value: colorSchemeValue,
+            class: state.colorSchemeClass
+        }
     };
 };
diff --git a/app/layouts/auth.vue b/app/layouts/auth.vue
index 2283f51..da75244 100644
--- a/app/layouts/auth.vue
+++ b/app/layouts/auth.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // TODO: when a user changes the color scheme and then signs in/up, the color
 // scheme will not be updated in the user's settings.
-const { colorScheme } = await useUserSettings();
+const { colorScheme } = useUserSettings();
 
 useHead({
     htmlAttrs: {
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 809fe64..51c07c7 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Dialog from '~/components/Dialog/index.vue';
 
-const { colorScheme } = await useUserSettings();
+const { colorScheme } = useUserSettings();
 const { toggle: toggleSidebar } = useSidebar();
 const { addShortcut } = useKeyboardShortcuts();
 
diff --git a/app/plugins/global-data.ts b/app/plugins/global-data.ts
index fa634ae..1a0fa8c 100644
--- a/app/plugins/global-data.ts
+++ b/app/plugins/global-data.ts
@@ -3,7 +3,8 @@ export default defineNuxtPlugin(async () => {
     // Warm up the caches
     await Promise.all([
         useAgents().init(),
-        useModels().init()
+        useModels().init(),
+        useUserSettings().init()
     ]);
 
     console.log('Global data ready');