diff --git a/components/Prompt.vue b/components/Prompt.vue
index 412c773..5dba4a3 100644
--- a/components/Prompt.vue
+++ b/components/Prompt.vue
@@ -96,10 +96,12 @@ onMounted( () => {
       <template v-slot:activator="{ props }">
         <v-btn
             v-bind="props"
-            icon="speaker_notes"
-            title="Common prompts"
-            class="mr-3"
-        ></v-btn>
+            icon
+        >
+          <v-icon
+              icon="speaker_notes"
+          ></v-icon>
+        </v-btn>
       </template>
 
       <v-container>
diff --git a/composables/states.js b/composables/states.js
index e2a228d..9d38a7b 100644
--- a/composables/states.js
+++ b/composables/states.js
@@ -7,4 +7,6 @@ export const useApiKey = () => useState('apiKey', () => getStoredApiKey())
 
 export const useConversion = () => useState('conversion', () => getDefaultConversionData())
 
-export const useConversions = () => useState('conversions', () => [])
\ No newline at end of file
+export const useConversions = () => useState('conversions', () => [])
+
+export const useSettings = () => useState('settings', () => {})
\ No newline at end of file
diff --git a/lang/en-US.json b/lang/en-US.json
index acfd3b4..8ec87ab 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -34,6 +34,7 @@
   "copied": "Copied",
   "delete": "Delete",
   "signOut": "Sign out",
+  "webSearch": "Web Search",
   "welcomeScreen": {
     "introduction1": "is an unofficial client for ChatGPT, but uses the official OpenAI API.",
     "introduction2": "You will need an OpenAI API Key before you can use this client.",
diff --git a/lang/zh-CN.json b/lang/zh-CN.json
index 8f384c1..648f178 100644
--- a/lang/zh-CN.json
+++ b/lang/zh-CN.json
@@ -34,6 +34,7 @@
   "copied": "已复制",
   "delete": "删除",
   "signOut": "退出登录",
+  "webSearch": "网页搜索",
   "welcomeScreen": {
     "introduction1": "是一个非官方的ChatGPT客户端，但使用OpenAI的官方API",
     "introduction2": "在使用本客户端之前，您需要一个OpenAI API密钥。",
diff --git a/layouts/default.vue b/layouts/default.vue
index 5ff6a6d..d6f1180 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -84,6 +84,7 @@ const loadConversations = async () => {
 
 const {mdAndUp} = useDisplay()
 
+
 const drawerPermanent = computed(() => {
   return mdAndUp.value
 })
@@ -97,8 +98,9 @@ const signOut = async () => {
   }
 }
 
-onNuxtReady(async () => {
+onMounted(async () => {
   loadConversations()
+  loadSettings()
 })
 
 </script>
diff --git a/pages/index.vue b/pages/index.vue
index c8927b5..360bd82 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -5,8 +5,6 @@ definePageMeta({
   middleware: ["auth"]
 })
 import {EventStreamContentType, fetchEventSource} from '@microsoft/fetch-event-source'
-import { nextTick } from 'vue'
-import MessageActions from "~/components/MessageActions.vue";
 
 const { $i18n, $auth } = useNuxtApp()
 const runtimeConfig = useRuntimeConfig()
@@ -53,11 +51,19 @@ const abortFetch = () => {
 const fetchReply = async (message) => {
   ctrl = new AbortController()
 
+  let webSearchParams = {}
+  console.log(enableWebSearch.value)
+  if (enableWebSearch.value) {
+    webSearchParams['web_search'] = {
+      ua: navigator.userAgent
+    }
+  }
+
   const data = Object.assign({}, currentModel.value, {
     openaiApiKey: openaiApiKey.value,
     message: message,
     conversationId: currentConversation.value.id
-  })
+  }, webSearchParams)
 
   try {
     await fetchEventSource('/api/conversation/', {
@@ -157,6 +163,18 @@ const deleteMessage = (index) => {
   currentConversation.value.messages.splice(index, 1)
 }
 
+const showWebSearchToggle = ref(false)
+const enableWebSearch = ref(false)
+
+const settings = useSettings()
+
+watchEffect(() => {
+  if (settings.value) {
+    const settingsValue = toRaw(settings.value)
+    showWebSearchToggle.value = settingsValue.open_web_search && settingsValue.open_web_search === 'True'
+  }
+})
+
 </script>
 
 <template>
@@ -209,31 +227,19 @@ const deleteMessage = (index) => {
         ></v-btn>
         <MsgEditor ref="editor" :send-message="send" :disabled="fetchingResponse" :loading="fetchingResponse" />
       </div>
-      <v-toolbar>
+      <v-toolbar
+          density="comfortable"
+          color="transparent"
+      >
         <Prompt v-show="!fetchingResponse" :use-prompt="usePrompt" />
         <v-switch
+            v-if="showWebSearchToggle"
+            v-model="enableWebSearch"
             hide-details
-            inset
             color="primary"
-            label="Search on the web"
+            :label="$t('webSearch')"
         ></v-switch>
-        <v-btn
-            icon
-            class="hidden-xs-only"
-        >
-          <v-icon>mdi-arrow-left</v-icon>
-        </v-btn>
-
-        <v-toolbar-title>Title</v-toolbar-title>
-
         <v-spacer></v-spacer>
-
-        <v-btn
-            icon
-            class="hidden-xs-only"
-        >
-          <v-icon>mdi-magnify</v-icon>
-        </v-btn>
       </v-toolbar>
 
 <!--      <div class="py-2 text-disabled text-caption font-weight-light text-center">-->
diff --git a/utils/helper.js b/utils/helper.js
index b3c0b6c..cfcc296 100644
--- a/utils/helper.js
+++ b/utils/helper.js
@@ -50,4 +50,23 @@ export const genTitle = async (conversationId) => {
         return data.value.title
     }
     return null
+}
+
+const transformData = (list) => {
+    const result = {};
+    for (let i = 0; i < list.length; i++) {
+        const item = list[i];
+        result[item.name] = item.value;
+    }
+    return result;
+}
+
+export const loadSettings = async () => {
+    const settings = useSettings()
+    const { data, error } = await useAuthFetch('/api/chat/settings/', {
+        method: 'GET'
+    })
+    if (!error.value) {
+        settings.value = transformData(data.value)
+    }
 }
\ No newline at end of file