diff --git a/components/common/History.vue b/components/common/History.vue
new file mode 100644
index 0000000..03143bd
--- /dev/null
+++ b/components/common/History.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    <div title="Change Color">
+      <div
+          class="cursor-pointer	flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700"
+      >
+        <Icon name="ic:baseline-history" class=" text-lg dark:text-white" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/components/common/SettingsChange.vue b/components/common/SettingsChange.vue
new file mode 100644
index 0000000..5073700
--- /dev/null
+++ b/components/common/SettingsChange.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const localePath = useLocalePath()
+const router = useRouter();
+</script>
+
+<template>
+  <div>
+  <div title="Change Color">
+    <div
+        class="cursor-pointer	flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700"
+        @click="router.push(localePath('/settings'))"
+    >
+      <Icon name="uil:setting" class=" text-lg dark:text-white" />
+    </div>
+  </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/components/tab/list.vue b/components/tab/list.vue
index 6cf78a9..3c411f4 100644
--- a/components/tab/list.vue
+++ b/components/tab/list.vue
@@ -5,6 +5,7 @@ const emit = defineEmits(['action'])
 const handleActionFromDnsList = (urlParam:string) => {
   emit('action', urlParam)
 }
+const {t} = useI18n()
 </script>
 
 <template>
@@ -12,23 +13,30 @@ const handleActionFromDnsList = (urlParam:string) => {
     <div class="flex justify-between w-full">
       <div class="space-x-2">
         <!-- 左边的新元素 -->
-        <UTooltip text="支持列表" :popper="{ placement: 'top' }">
+        <UTooltip :text="t('popper.support')" :popper="{ placement: 'top' }">
           <CommonDomainList  />
         </UTooltip>
 
-        <UTooltip text="Dns查询" :popper="{ placement: 'top' }">
+        <UTooltip :text="t('popper.history')" :popper="{ placement: 'top' }">
+          <CommonHistory  />
+        </UTooltip>
+
+        <UTooltip :text="t('popper.dns')" :popper="{ placement: 'top' }">
           <CommonDnsList @action="handleActionFromDnsList" />
         </UTooltip>
       </div>
       <div class="flex space-x-2">
         <!-- 右边的现有元素 -->
+        <UTooltip :text="t('popper.setting')" :popper="{ placement: 'top' }">
+          <CommonSettingsChange />
+        </UTooltip>
         <UTooltip :text="timeStore.timeZones" :popper="{ placement: 'top' }">
           <CommonTimeZonesChange />
         </UTooltip>
-        <UTooltip text="主题模式" :popper="{ placement: 'top' }">
+        <UTooltip :text="t('popper.theme')" :popper="{ placement: 'top' }">
           <CommonColorChange />
         </UTooltip>
-        <UTooltip text="切换语言" :popper="{ placement: 'top' }">
+        <UTooltip :text="t('popper.language')" :popper="{ placement: 'top' }">
           <CommonLanguageChange />
         </UTooltip>
       </div>
diff --git a/lang/en.ts b/lang/en.ts
index c59293b..d71ea2a 100644
--- a/lang/en.ts
+++ b/lang/en.ts
@@ -81,6 +81,17 @@ export default defineI18nLocale(async locale => {
             title: 'Whois Key Information Extraction API',
             description: 'Extract key information from domain WHOIS information, including registrar, creation date, expiration date, DNS, status, etc.',
             keywords: 'Domain whois query, whois query, whois information query, whois query tool, whois query website, whois query api, whois query interface',
+        },
+        popper: {
+            //支持列表
+            support: 'Support List',
+            //history
+            history: 'Query History',
+            //支持的DNS服务器列表
+            dns: 'Supported DNS Server List',
+            setting: 'Website Settings',
+            theme: 'Theme',
+            language: 'Language',
         }
     }
 })
diff --git a/lang/tw.ts b/lang/tw.ts
index d471b3e..564d3fe 100644
--- a/lang/tw.ts
+++ b/lang/tw.ts
@@ -3,12 +3,12 @@ export default defineI18nLocale(async locale => {
         app: {
             title: 'Nuxt Whois',
         },
-        whois:{
+        whois: {
             title: 'Whois查詢',
             description: '查詢{domain}的Whois信息，包括註冊者聯繫方式、域名狀態、DNS記錄等詳細信息。快速、準確地獲取域名所有權和註冊信息。',
             keywords: 'Whois查詢, {domain}, 域名信息, 域名所有者, 域名註冊信息'
         },
-        dns:{
+        dns: {
             title: 'DNS查詢',
             description: '查詢{domain}的DNS記錄，包括A記錄、AAAA記錄、CNAME記錄、MX記錄、NS記錄、TXT記錄等。',
             keywords: 'DNS查詢, {domain}, 域名解析, 域名解析記錄'
@@ -21,7 +21,7 @@ export default defineI18nLocale(async locale => {
             description: '提供域名WHOIS查詢、域名DNS查詢、域名註冊商查詢、域名註冊信息查詢等服務',
             keywords: '域名whois查詢,whois查詢,whois信息查詢,whois查詢工具,whois查詢網站,whois查詢api,whois查詢接口',
         },
-        error:{
+        error: {
             formatDomain: '域名格式錯誤',
             validDomain: '域名必須包含有效的頂級域',
             notFound: '未找到域名資料',
@@ -81,6 +81,20 @@ export default defineI18nLocale(async locale => {
             title: 'Whois關鍵信息提取API',
             description: '提取域名WHOIS信息中的關鍵信息，包括註冊商、註冊日期、到期日期、DNS、狀態等。',
             keywords: '域名whois查詢,whois查詢,whois信息查詢,whois查詢工具,whois查詢網站,whois查詢api,whois查詢接口',
+        },
+        popper: {
+            //支援列表
+            support: '支援列表',
+            //查詢歷史
+            history: '查詢歷史',
+            //Dns查詢
+            dns: 'DNS查詢',
+            //網站設定
+            setting: '網站設定',
+            //主題模式
+            theme: '主題模式',
+            //語言設定
+            language: '語言設定',
         }
     }
 })
diff --git a/lang/zh.ts b/lang/zh.ts
index f96cb28..de170c2 100644
--- a/lang/zh.ts
+++ b/lang/zh.ts
@@ -85,6 +85,20 @@ export default defineI18nLocale(async locale => {
             title: 'Whois关键信息提取API',
             description: '提取域名WHOIS信息中的关键信息，包括注册商、注册日期、到期日期、DNS、状态等。',
             keywords: '域名whois查询,whois查询,whois信息查询,whois查询工具,whois查询网站,whois查询api,whois查询接口',
+        },
+        popper: {
+            //支持列表
+            support: '支持列表',
+            //查询历史
+            history: '查询历史',
+            //Dns查询
+            dns: 'Dns查询',
+            //网站设置
+            setting: '网站设置',
+            //主题模式
+            theme: '主题模式',
+            //语言设置
+            language: '切换语言',
         }
     }
 })
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 0955e62..491d30a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -9,6 +9,9 @@ export default defineNuxtConfig({
     '@pinia/nuxt', // needed
     '@pinia-plugin-persistedstate/nuxt',
   ],
+  features:{
+      inlineStyles: true,
+  } ,
   runtimeConfig: {
       public: {
           Domain: 'Nuxt Whois',
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
new file mode 100644
index 0000000..85af715
--- /dev/null
+++ b/pages/settings/index.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>