diff --git a/app.vue b/app.vue
index 6613179..e7a30f6 100644
--- a/app.vue
+++ b/app.vue
@@ -1,3 +1,12 @@
+<script setup>
+onNuxtReady(() => {
+  fetchSystemSettings()
+  // api key
+  const apiKey = useApiKey()
+  apiKey.value = getStoredApiKey()
+})
+</script>
+
 <template>
   <NuxtLayout>
     <NuxtLoadingIndicator />
diff --git a/components/Conversation.vue b/components/Conversation.vue
index 5254afb..ead2b96 100644
--- a/components/Conversation.vue
+++ b/components/Conversation.vue
@@ -166,20 +166,18 @@ const deleteMessage = (index) => {
   props.conversation.messages.splice(index, 1)
 }
 
-const showWebSearchToggle = ref(false)
-const enableWebSearch = ref(false)
-const enableCustomApiKey = ref(false)
-
 const settings = useSettings()
+const enableWebSearch = ref(false)
 
-watchEffect(() => {
-  if (settings.value) {
-    const settingsValue = toRaw(settings.value)
-    showWebSearchToggle.value = settingsValue.open_web_search && settingsValue.open_web_search === 'True'
-    enableCustomApiKey.value = settingsValue.open_api_key_setting && settingsValue.open_api_key_setting === 'True'
-  }
+const showWebSearchToggle = computed(() => {
+  return settings.value && settings.value.open_web_search && settings.value.open_web_search === 'True'
 })
 
+const enableCustomApiKey = computed(() => {
+  return settings.value && settings.value.open_api_key_setting && settings.value.open_api_key_setting === 'True'
+})
+
+
 onNuxtReady(() => {
   currentModel.value = getCurrentModel()
 })
diff --git a/components/NavigationDrawer.vue b/components/NavigationDrawer.vue
index c3ae6f9..8fb3a22 100644
--- a/components/NavigationDrawer.vue
+++ b/components/NavigationDrawer.vue
@@ -89,12 +89,8 @@ const loadConversations = async () => {
 }
 
 const settings = useSettings()
-const showApiKeySetting = ref(false)
-watchEffect(() => {
-  if (settings.value) {
-    const settingsValue = toRaw(settings.value)
-    showApiKeySetting.value = settingsValue.open_api_key_setting && settingsValue.open_api_key_setting === 'True'
-  }
+const showApiKeySetting = computed(() => {
+  return settings.value && settings.value.open_api_key_setting && settings.value.open_api_key_setting === 'True'
 })
 
 const signOut = async () => {
diff --git a/composables/states.js b/composables/states.js
index 629a650..53add5c 100644
--- a/composables/states.js
+++ b/composables/states.js
@@ -7,7 +7,7 @@ export const useApiKey = () => useState('apiKey', () => getStoredApiKey())
 
 export const useConversations = () => useState('conversations', () => [])
 
-export const useSettings = () => useState('settings', () => getSystemSettings())
+export const useSettings = () => useState('settings', () => {})
 
 export const useUser = () => useState('user', () => null)
 
diff --git a/utils/helper.js b/utils/helper.js
index 85a8719..7beb65e 100644
--- a/utils/helper.js
+++ b/utils/helper.js
@@ -53,14 +53,14 @@ const transformData = (list) => {
     return result;
 }
 
-export const getSystemSettings = async () => {
+export const fetchSystemSettings = async () => {
     const { data, error } = await useAuthFetch('/api/chat/settings/', {
         method: 'GET',
     })
     if (!error.value) {
-        return transformData(data.value)
+        const settings = useSettings()
+        settings.value = transformData(data.value)
     }
-    return {}
 }
 
 export const fetchUser = async () => {