diff --git a/apps/desktop/src/renderer/components.d.ts b/apps/desktop/src/renderer/components.d.ts
index 2ec4bee26..60663a22a 100644
--- a/apps/desktop/src/renderer/components.d.ts
+++ b/apps/desktop/src/renderer/components.d.ts
@@ -39,6 +39,7 @@ declare module 'vue' {
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
@@ -49,6 +50,7 @@ declare module 'vue' {
     SettingsView: typeof import('./../../../../packages/ui/src/components/SettingsView.vue')['default']
     UpdateAvailable: typeof import('./src/components/update/Available.vue')['default']
     UpdateDownloadProgress: typeof import('./src/components/update/DownloadProgress.vue')['default']
+    UpdateNotAvailable: typeof import('./src/components/update/NotAvailable.vue')['default']
     UpdateView: typeof import('./src/components/update/View.vue')['default']
   }
 }
diff --git a/apps/desktop/src/renderer/src/components/update/Available.vue b/apps/desktop/src/renderer/src/components/update/Available.vue
index 34933b3e9..4d7836716 100644
--- a/apps/desktop/src/renderer/src/components/update/Available.vue
+++ b/apps/desktop/src/renderer/src/components/update/Available.vue
@@ -37,11 +37,11 @@ watch(releaseNotes, () => {
   <MyDialog
     v-model="dialogVisible"
     :title="$t('update.updateTitle', { version })"
-    width="min(100vw - 80px, 960px)"
+    width="min(100vw - 200px, 960px)"
   >
-    <div class="h-[min(50vh,400px)] overflow-y-auto">
+    <ElScrollbar class="h-[min(50vh,400px)]">
       <div class="prose prose-sm" v-html="releaseNotes" />
-    </div>
+    </ElScrollbar>
     <template #footer>
       <div class="flex gap-6 justify-between">
         <ElButton @click="ignoreCurrentVersion">
diff --git a/apps/desktop/src/renderer/src/components/update/NotAvailable.vue b/apps/desktop/src/renderer/src/components/update/NotAvailable.vue
new file mode 100644
index 000000000..3f849bd0d
--- /dev/null
+++ b/apps/desktop/src/renderer/src/components/update/NotAvailable.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import Logo from '../../../../../../../packages/ui/src/assets/images/logo.png'
+
+const dialogVisible = defineModel<boolean>({ default: false })
+
+const version = ref(`v${window.__APP_VERSION__}`)
+</script>
+
+<template>
+  <MyDialog
+    v-model="dialogVisible"
+    width="280px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :show-close="false"
+    center
+  >
+    <div class="text-center select-none">
+      <img class="mx-auto mb-6" :src="Logo" alt="MQTTX" width="64" height="64">
+      <div class="mb-0.5 text-title font-semibold text-2xl">
+        MQTTX
+      </div>
+      <div class="mb-6 text-default text-sm">
+        {{ version }}
+      </div>
+      <div class="text-default">
+        {{ $t('update.noUpdateAvailable') }}
+      </div>
+    </div>
+    <template #footer>
+      <ElButton class="w-full" type="primary" @click="dialogVisible = false">
+        {{ $t('common.close') }}
+      </ElButton>
+    </template>
+  </MyDialog>
+</template>
diff --git a/apps/desktop/src/renderer/src/components/update/View.vue b/apps/desktop/src/renderer/src/components/update/View.vue
index 8f5b4c33e..e6227bc40 100644
--- a/apps/desktop/src/renderer/src/components/update/View.vue
+++ b/apps/desktop/src/renderer/src/components/update/View.vue
@@ -2,6 +2,8 @@
 import type { ProgressInfo } from 'electron-updater'
 import useSettingsService from '@database/services/SettingsService'
 
+const updateNotAvailableDialogVisible = ref(false)
+
 const updateAvailableDialogVisible = ref(false)
 const version = ref('')
 const changelog = ref('')
@@ -10,17 +12,11 @@ const downloadProgressDialogVisible = ref(false)
 const downloadProgress = ref<ProgressInfo | null>(null)
 const updateDownloaded = ref(false)
 
-const { t } = useI18n()
-
 window.api.onUpdateStatus((_event, updateEvent) => {
   const { status } = updateEvent
   if (status === 'update-not-available') {
     if (window.forceCheck) {
-      ElMessage({
-        message: t('update.noUpdateAvailable'),
-        type: 'info',
-        plain: true,
-      })
+      updateNotAvailableDialogVisible.value = true
       window.forceCheck = false
     }
   } else if (status === 'update-available') {
@@ -58,6 +54,9 @@ onMounted(async () => {
 </script>
 
 <template>
+  <UpdateNotAvailable
+    v-model="updateNotAvailableDialogVisible"
+  />
   <UpdateAvailable
     v-model="updateAvailableDialogVisible"
     :version="version"
diff --git a/apps/web/components.d.ts b/apps/web/components.d.ts
index 7e49a3c7a..9e69181fa 100644
--- a/apps/web/components.d.ts
+++ b/apps/web/components.d.ts
@@ -38,6 +38,7 @@ declare module 'vue' {
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
diff --git a/packages/tailwind-config/base.config.ts b/packages/tailwind-config/base.config.ts
index 4d65088a5..7c4d319bb 100644
--- a/packages/tailwind-config/base.config.ts
+++ b/packages/tailwind-config/base.config.ts
@@ -17,6 +17,7 @@ const config: Config = {
         DEFAULT: {
           css: {
             'color': 'var(--color-text-default)',
+            'maxWidth': 'unset',
             'strong': {
               color: 'var(--color-text-title)',
             },
@@ -49,6 +50,7 @@ const config: Config = {
               borderInlineStartColor: 'var(--color-main-green)',
               backgroundColor: 'var(--color-bg-primary)',
               paddingInlineEnd: '1.1111111em',
+              marginInlineEnd: '1.1111111em',
               paddingTop: '0.1em',
               paddingBottom: '0.1em',
             },
diff --git a/packages/ui/components.d.ts b/packages/ui/components.d.ts
index 39b239cad..c49528268 100644
--- a/packages/ui/components.d.ts
+++ b/packages/ui/components.d.ts
@@ -33,6 +33,7 @@ declare module 'vue' {
     ElMain: typeof import('element-plus/es')['ElMain']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
diff --git a/packages/ui/src/components/HelpView.vue b/packages/ui/src/components/HelpView.vue
index 4c7ac9765..91ede5927 100644
--- a/packages/ui/src/components/HelpView.vue
+++ b/packages/ui/src/components/HelpView.vue
@@ -179,99 +179,101 @@ const helpPractice = computed(() => [
 </script>
 
 <template>
-  <div id="help-view" class="px-4 pt-4 pb-12 bg-primary min-h-full select-none">
-    <div class="mx-auto max-w-screen-lg">
-      <div class="mb-12 flex justify-between items-center">
-        <h1 class="text-lg text-title font-semibold">
-          {{ $t('help.helpMQTT') }}
-        </h1>
-        <ElTooltip
-          v-if="locale === 'zh'"
-          placement="bottom"
-          content="2024 MQTT 协议入门教程"
-        >
-          <a
-            target="_blank"
-            rel="noopener"
-            class="text-sm text-main-green"
-            href="https://www.emqx.com/zh/resources/beginners-guide-to-the-mqtt-protocol?utm_source=mqttx&utm_medium=referral&utm_campaign=mqttx-to-mqtt-ebook-zh"
+  <ElScrollbar id="help-view" class="bg-primary min-h-full select-none">
+    <div class="px-4 pt-4 pb-12">
+      <div class="mx-auto max-w-screen-lg">
+        <div class="mb-12 flex justify-between items-center">
+          <h1 class="text-lg text-title font-semibold">
+            {{ $t('help.helpMQTT') }}
+          </h1>
+          <ElTooltip
+            v-if="locale === 'zh'"
+            placement="bottom"
+            content="2024 MQTT 协议入门教程"
           >
-            下载 MQTT 电子书
-            <span>→</span>
-          </a>
-        </ElTooltip>
-      </div>
-
-      <section class="mb-16 grid grid-cols-3 gap-6">
-        <a
-          v-for="item in helpTop"
-          :key="item.icon"
-          class="block text-center cursor-pointer rounded-lg py-6 px-3 bg-gradient-card"
-          :href="item.link"
-          target="_blank"
-          rel="noopener"
-        >
-          <img class="mb-3 mx-auto" :src="getImage(item.icon)" :alt="item.icon" width="24" height="24">
-          <h2 class="text-title text-sm font-semibold">{{ item.title }}</h2>
-        </a>
-      </section>
+            <a
+              target="_blank"
+              rel="noopener"
+              class="text-sm text-main-green"
+              href="https://www.emqx.com/zh/resources/beginners-guide-to-the-mqtt-protocol?utm_source=mqttx&utm_medium=referral&utm_campaign=mqttx-to-mqtt-ebook-zh"
+            >
+              下载 MQTT 电子书
+              <span>→</span>
+            </a>
+          </ElTooltip>
+        </div>
 
-      <section class="mb-16">
-        <h2 class="mb-2 text-lg text-title font-semibold">
-          {{ $t('help.guideTitle') }}
-        </h2>
-        <p class="mb-6 text-sm text-default">
-          {{ $t('help.guideDesc') }}
-        </p>
-        <div class="grid grid-cols-2 gap-6">
+        <section class="mb-16 grid grid-cols-3 gap-6">
           <a
-            v-for="item in helpGuide"
-            :key="item.link"
-            class="block cursor-pointer rounded-lg p-4 border border-solid border-border-default"
-            :href="`${item.link}${help.blogUtm}`"
+            v-for="item in helpTop"
+            :key="item.icon"
+            class="block text-center cursor-pointer rounded-lg py-6 px-3 bg-gradient-card"
+            :href="item.link"
             target="_blank"
             rel="noopener"
           >
-            <p class="text-title font-semibold text-sm">
-              {{ item.title }}
-              <span class="text-main-green ml-1">
-                →
-              </span>
-            </p>
+            <img class="mb-3 mx-auto" :src="getImage(item.icon)" :alt="item.icon" width="24" height="24">
+            <h2 class="text-title text-sm font-semibold">{{ item.title }}</h2>
           </a>
-        </div>
-      </section>
+        </section>
 
-      <section>
-        <h2 class="mb-2 text-lg text-title font-semibold">
-          {{ $t('help.practiceTitle') }}
-        </h2>
-        <p class="mb-6 text-sm text-default">
-          {{ $t('help.practiceDesc') }}
-        </p>
-        <div class="grid grid-cols-[repeat(auto-fill,120px)] gap-6">
-          <template v-for="item in helpPractice">
+        <section class="mb-16">
+          <h2 class="mb-2 text-lg text-title font-semibold">
+            {{ $t('help.guideTitle') }}
+          </h2>
+          <p class="mb-6 text-sm text-default">
+            {{ $t('help.guideDesc') }}
+          </p>
+          <div class="grid grid-cols-2 gap-6">
             <a
-              v-if="item.link"
+              v-for="item in helpGuide"
               :key="item.link"
-              class="block cursor-pointer text-center rounded-lg py-6 px-3 bg-card-normal"
+              class="block cursor-pointer rounded-lg p-4 border border-solid border-border-default"
               :href="`${item.link}${help.blogUtm}`"
               target="_blank"
               rel="noopener"
             >
-              <img
-                class="mb-3 mx-auto"
-                :class="[{ invert: item.invert?.includes(settings?.currentTheme ?? '') }]"
-                :src="getImage(item.icon)"
-                :alt="item.icon"
-                width="32"
-                height="32"
-              >
-              <p class="text-default text-sm">{{ item.title }}</p>
+              <p class="text-title font-semibold text-sm">
+                {{ item.title }}
+                <span class="text-main-green ml-1">
+                  →
+                </span>
+              </p>
             </a>
-          </template>
-        </div>
-      </section>
+          </div>
+        </section>
+
+        <section>
+          <h2 class="mb-2 text-lg text-title font-semibold">
+            {{ $t('help.practiceTitle') }}
+          </h2>
+          <p class="mb-6 text-sm text-default">
+            {{ $t('help.practiceDesc') }}
+          </p>
+          <div class="grid grid-cols-[repeat(auto-fill,120px)] gap-6">
+            <template v-for="item in helpPractice">
+              <a
+                v-if="item.link"
+                :key="item.link"
+                class="block cursor-pointer text-center rounded-lg py-6 px-3 bg-card-normal"
+                :href="`${item.link}${help.blogUtm}`"
+                target="_blank"
+                rel="noopener"
+              >
+                <img
+                  class="mb-3 mx-auto"
+                  :class="[{ invert: item.invert?.includes(settings?.currentTheme ?? '') }]"
+                  :src="getImage(item.icon)"
+                  :alt="item.icon"
+                  width="32"
+                  height="32"
+                >
+                <p class="text-default text-sm">{{ item.title }}</p>
+              </a>
+            </template>
+          </div>
+        </section>
+      </div>
     </div>
-  </div>
+  </ElScrollbar>
 </template>
diff --git a/packages/ui/src/components/SettingsView.vue b/packages/ui/src/components/SettingsView.vue
index fd89e6e09..939d38206 100644
--- a/packages/ui/src/components/SettingsView.vue
+++ b/packages/ui/src/components/SettingsView.vue
@@ -73,222 +73,116 @@ const AImodelsOptions = [
 </script>
 
 <template>
-  <div id="settings-view" class="px-4 pt-4 pb-12 bg-primary min-h-full select-none">
-    <div class="mx-auto max-w-screen-lg">
-      <h1 class="mb-12 text-lg text-title font-semibold">
-        {{ $t('settings.settings') }}
-      </h1>
-
-      <section class="settings-section">
-        <div class="section-title">
-          {{ $t('settings.general') }}
-        </div>
-
-        <ElDivider />
-
-        <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16">
-            <label>{{ $t('settings.language') }}</label>
-          </ElCol>
-          <ElCol :span="8">
-            <ElSelect v-model="settings.currentLang" automatic-dropdown>
-              <ElOption v-for="{ label, value } in langOptions" :key="value" :label="label" :value="value" />
-            </ElSelect>
-          </ElCol>
-        </ElRow>
-
-        <ElDivider />
-
-        <template v-if="platformType === 'desktop'">
+  <ElScrollbar id="settings-view" class="bg-primary min-h-full select-none">
+    <div class="px-4 pt-4 pb-12">
+      <div class="mx-auto max-w-screen-lg">
+        <h1 class="mb-12 text-lg text-title font-semibold">
+          {{ $t('settings.settings') }}
+        </h1>
+
+        <section class="settings-section">
+          <div class="section-title">
+            {{ $t('settings.general') }}
+          </div>
+
+          <ElDivider />
+
           <ElRow type="flex" justify="space-between" align="middle">
             <ElCol :span="16">
-              <label>{{ $t('settings.automatically') }}</label>
+              <label>{{ $t('settings.language') }}</label>
+            </ElCol>
+            <ElCol :span="8">
+              <ElSelect v-model="settings.currentLang" automatic-dropdown>
+                <ElOption v-for="{ label, value } in langOptions" :key="value" :label="label" :value="value" />
+              </ElSelect>
+            </ElCol>
+          </ElRow>
+
+          <ElDivider />
+
+          <template v-if="platformType === 'desktop'">
+            <ElRow type="flex" justify="space-between" align="middle">
+              <ElCol :span="16">
+                <label>{{ $t('settings.automatically') }}</label>
+              </ElCol>
+              <ElCol :span="8">
+                <ElSwitch v-model="settings.autoCheck" />
+              </ElCol>
+            </ElRow>
+
+            <ElDivider />
+          </template>
+
+          <ElRow type="flex" justify="space-between" align="middle">
+            <ElCol :span="16" class="!flex gap-1 items-center">
+              <label>{{ $t('settings.autoResub') }}</label>
+              <ElTooltip
+                placement="top"
+                :open-delay="500"
+                :content="$t('settings.autoResubDesc')"
+              >
+                <div class="label-icon">
+                  <ElIconWarning />
+                </div>
+              </ElTooltip>
+            </ElCol>
+            <ElCol :span="8">
+              <ElSwitch v-model="settings.autoResub" />
+            </ElCol>
+          </ElRow>
+
+          <ElDivider />
+
+          <ElRow type="flex" justify="space-between" align="middle">
+            <ElCol :span="16" class="!flex gap-1 items-center">
+              <label>{{ $t('settings.multiTopics') }}</label>
+              <ElTooltip
+                placement="top"
+
+                :open-delay="500"
+                :content="$t('settings.multiTopicsDesc')"
+              >
+                <div class="label-icon">
+                  <ElIconWarning />
+                </div>
+              </ElTooltip>
             </ElCol>
             <ElCol :span="8">
-              <ElSwitch v-model="settings.autoCheck" />
+              <ElSwitch v-model="settings.multiTopics" />
             </ElCol>
           </ElRow>
 
           <ElDivider />
-        </template>
-
-        <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16" class="!flex gap-1 items-center">
-            <label>{{ $t('settings.autoResub') }}</label>
-            <ElTooltip
-              placement="top"
-              :open-delay="500"
-              :content="$t('settings.autoResubDesc')"
-            >
-              <div class="label-icon">
-                <ElIconWarning />
-              </div>
-            </ElTooltip>
-          </ElCol>
-          <ElCol :span="8">
-            <ElSwitch v-model="settings.autoResub" />
-          </ElCol>
-        </ElRow>
-
-        <ElDivider />
-
-        <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16" class="!flex gap-1 items-center">
-            <label>{{ $t('settings.multiTopics') }}</label>
-            <ElTooltip
-              placement="top"
-
-              :open-delay="500"
-              :content="$t('settings.multiTopicsDesc')"
-            >
-              <div class="label-icon">
-                <ElIconWarning />
-              </div>
-            </ElTooltip>
-          </ElCol>
-          <ElCol :span="8">
-            <ElSwitch v-model="settings.multiTopics" />
-          </ElCol>
-        </ElRow>
-
-        <ElDivider />
-
-        <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16">
-            <label>{{ $t('settings.maxReconnectTimes') }}</label>
-          </ElCol>
-          <ElCol :span="8">
-            <ElInputNumber
-              v-model="settings.maxReconnectTimes"
-              :min="1"
-            />
-          </ElCol>
-        </ElRow>
-
-        <ElDivider />
-      </section>
-
-      <section class="settings-section">
-        <div class="section-title">
-          {{ $t('settings.appearance') }}
-        </div>
-
-        <ElDivider />
-
-        <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16" class="!flex gap-1 items-center">
-            <label>{{ $t('settings.syncOsTheme') }}</label>
-            <ElTooltip
-              placement="top"
-              :open-delay="500"
-              :content="$t('settings.syncOsThemeDesc')"
-            >
-              <div class="label-icon">
-                <ElIconWarning />
-              </div>
-            </ElTooltip>
-          </ElCol>
-          <ElCol :span="8">
-            <ElSwitch v-model="settings.syncOsTheme" />
-          </ElCol>
-        </ElRow>
-
-        <ElDivider />
-
-        <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16">
-            <label>{{ $t('settings.theme') }}</label>
-          </ElCol>
-          <ElCol :span="8">
-            <ElSelect
-              v-model="settings.currentTheme"
-              :disabled="settings.syncOsTheme"
-            >
-              <ElOption
-                v-for="{ label, value } in themeOptions"
-                :key="value"
-                :label="label"
-                :value="value"
+
+          <ElRow type="flex" justify="space-between" align="middle">
+            <ElCol :span="16">
+              <label>{{ $t('settings.maxReconnectTimes') }}</label>
+            </ElCol>
+            <ElCol :span="8">
+              <ElInputNumber
+                v-model="settings.maxReconnectTimes"
+                :min="1"
               />
-            </ElSelect>
-          </ElCol>
-        </ElRow>
-
-        <ElDivider />
-
-        <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16" class="!flex gap-1 items-center">
-            <label>{{ $t('settings.jsonHighlight') }}</label>
-            <ElTooltip
-              placement="top"
-              :open-delay="500"
-            >
-              <template #content>
-                <div v-html="$t('settings.jsonHighlightDesc')" />
-              </template>
-              <div class="label-icon">
-                <ElIconWarning />
-              </div>
-            </ElTooltip>
-          </ElCol>
-          <ElCol :span="8">
-            <ElSwitch v-model="settings.jsonHighlight" />
-          </ElCol>
-        </ElRow>
-
-        <ElDivider />
-      </section>
-
-      <section v-if="platformType === 'desktop'" class="settings-section">
-        <div class="section-title">
-          {{ $t('settings.extends') }}
-        </div>
-
-        <ElDivider />
-
-        <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16" class="!flex gap-1 items-center">
-            <label>MQTTX CLI</label>
-            <ElTooltip
-              placement="top"
-              :open-delay="500"
-              :content="$t('settings.installCLITips')"
-            >
-              <div class="label-icon">
-                <ElIconWarning />
-              </div>
-            </ElTooltip>
-          </ElCol>
-          <ElCol :span="8">
-            <ElButton
-              class="w-20"
-              type="primary"
-            >
-              <div class="text-main-white w-4 h-4">
-                <ElIconDownload />
-              </div>
-            </ElButton>
-          </ElCol>
-        </ElRow>
-
-        <ElDivider />
-      </section>
-
-      <section class="settings-section">
-        <div class="section-title">
-          {{ $t('settings.advanced') }}
-        </div>
-
-        <ElDivider />
-
-        <template v-if="platformType === 'desktop'">
+            </ElCol>
+          </ElRow>
+
+          <ElDivider />
+        </section>
+
+        <section class="settings-section">
+          <div class="section-title">
+            {{ $t('settings.appearance') }}
+          </div>
+
+          <ElDivider />
+
           <ElRow type="flex" justify="space-between" align="middle">
             <ElCol :span="16" class="!flex gap-1 items-center">
-              <label>{{ $t('log.logLevel') }}</label>
+              <label>{{ $t('settings.syncOsTheme') }}</label>
               <ElTooltip
                 placement="top"
                 :open-delay="500"
-                :content="$t('log.logLevelDesc')"
+                :content="$t('settings.syncOsThemeDesc')"
               >
                 <div class="label-icon">
                   <ElIconWarning />
@@ -296,176 +190,284 @@ const AImodelsOptions = [
               </ElTooltip>
             </ElCol>
             <ElCol :span="8">
-              <ElSelect v-model="settings.logLevel">
-                <ElOption v-for="{ label, value } in logLevelOptions" :key="value" :label="label" :value="value" />
+              <ElSwitch v-model="settings.syncOsTheme" />
+            </ElCol>
+          </ElRow>
+
+          <ElDivider />
+
+          <ElRow type="flex" justify="space-between" align="middle">
+            <ElCol :span="16">
+              <label>{{ $t('settings.theme') }}</label>
+            </ElCol>
+            <ElCol :span="8">
+              <ElSelect
+                v-model="settings.currentTheme"
+                :disabled="settings.syncOsTheme"
+              >
+                <ElOption
+                  v-for="{ label, value } in themeOptions"
+                  :key="value"
+                  :label="label"
+                  :value="value"
+                />
               </ElSelect>
             </ElCol>
           </ElRow>
 
           <ElDivider />
-        </template>
-
-        <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16">
-            <label>{{ $t('settings.dataRecovery') }}</label>
-          </ElCol>
-          <ElCol :span="8">
-            <ElButton
-              class="w-20"
-              type="primary"
-            >
-              <div class="text-main-white w-4 h-4">
-                <ElIconUpload />
-              </div>
-            </ElButton>
-          </ElCol>
-        </ElRow>
-
-        <ElDivider />
-
-        <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16">
-            <label>{{ $t('settings.dataBackup') }}</label>
-          </ElCol>
-          <ElCol :span="8">
-            <ElButton
-              class="w-20"
-              type="primary"
-            >
-              <div class="text-main-white w-4 h-4">
-                <ElIconPrinter />
-              </div>
-            </ElButton>
-          </ElCol>
-        </ElRow>
-
-        <ElDivider />
-
-        <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16">
-            <label>{{ $t('settings.historyCleanup') }}</label>
-          </ElCol>
-          <ElCol :span="8">
-            <ElButton
-              class="w-20"
-              type="danger"
-            >
-              <div class="text-main-white w-4 h-4">
-                <ElIconDelete />
-              </div>
-            </ElButton>
-          </ElCol>
-        </ElRow>
-
-        <ElDivider />
-
-        <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16" class="!flex gap-1 items-center">
-            <label>{{ $t('settings.ignoreQoS0Message') }}</label>
-            <ElTooltip
-              placement="top"
-              :open-delay="500"
-              :content="$t('settings.ignoreQoS0MessageDesc')"
-            >
-              <div class="label-icon">
-                <ElIconWarning />
-              </div>
-            </ElTooltip>
-          </ElCol>
-          <ElCol :span="8">
-            <ElSwitch v-model="settings.ignoreQoS0Message" />
-          </ElCol>
-        </ElRow>
-
-        <ElDivider />
-      </section>
-
-      <section class="settings-section">
-        <div class="section-title">
-          MQTTX Copilot
-        </div>
-
-        <ElDivider />
-
-        <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16">
-            <label>{{ $t('settings.enableCopilot') }}</label>
-          </ElCol>
-          <ElCol :span="8">
-            <ElSwitch v-model="settings.enableCopilot" />
-          </ElCol>
-        </ElRow>
-
-        <ElDivider />
-
-        <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16">
-            <label>API Host</label>
-          </ElCol>
-          <ElCol :span="8">
-            <ElAutocomplete
-              v-model.trim="settings.openAIAPIHost"
-              type="text"
-              clearable
-              :fetch-suggestions="queryAIAPIHost"
-              :disabled="!settings.enableCopilot"
-              placeholder="https://api.openai.com/v1"
-            />
-          </ElCol>
-        </ElRow>
-
-        <ElDivider />
-
-        <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16">
-            <label>API Key</label>
-          </ElCol>
-          <ElCol :span="8">
-            <ElInput
-              v-model.trim="settings.openAIAPIKey"
-              placeholder="sk-*******"
-              type="password"
-              show-password
-              clearable
-              :disabled="!settings.enableCopilot"
-            />
-          </ElCol>
-        </ElRow>
-
-        <ElDivider />
-
-        <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16">
-            <label>{{ $t('settings.model') }}</label>
-          </ElCol>
-          <ElCol :span="8">
-            <ElInput
-              v-model.trim="settings.model"
-              placeholder="gpt-4o"
-              type="text"
-              clearable
-              :disabled="!settings.enableCopilot"
-              @focus="showAIModelsSelect = true"
-              @clear="showAIModelsSelect = true"
-              @input="showAIModelsSelect = false"
-            />
-            <transition name="el-zoom-in-bottom">
-              <ElCascaderPanel
-                v-if="showAIModelsSelect"
-                v-model="settings.model"
-                class="ai-models-select"
-                :options="AImodelsOptions"
-                :props="{ emitPath: false, label: 'value' }"
-                @change="showAIModelsSelect = false"
+
+          <ElRow type="flex" justify="space-between" align="middle">
+            <ElCol :span="16" class="!flex gap-1 items-center">
+              <label>{{ $t('settings.jsonHighlight') }}</label>
+              <ElTooltip
+                placement="top"
+                :open-delay="500"
+              >
+                <template #content>
+                  <div v-html="$t('settings.jsonHighlightDesc')" />
+                </template>
+                <div class="label-icon">
+                  <ElIconWarning />
+                </div>
+              </ElTooltip>
+            </ElCol>
+            <ElCol :span="8">
+              <ElSwitch v-model="settings.jsonHighlight" />
+            </ElCol>
+          </ElRow>
+
+          <ElDivider />
+        </section>
+
+        <section v-if="platformType === 'desktop'" class="settings-section">
+          <div class="section-title">
+            {{ $t('settings.extends') }}
+          </div>
+
+          <ElDivider />
+
+          <ElRow type="flex" justify="space-between" align="middle">
+            <ElCol :span="16" class="!flex gap-1 items-center">
+              <label>MQTTX CLI</label>
+              <ElTooltip
+                placement="top"
+                :open-delay="500"
+                :content="$t('settings.installCLITips')"
+              >
+                <div class="label-icon">
+                  <ElIconWarning />
+                </div>
+              </ElTooltip>
+            </ElCol>
+            <ElCol :span="8">
+              <ElButton
+                class="w-20"
+                type="primary"
+              >
+                <div class="text-main-white w-4 h-4">
+                  <ElIconDownload />
+                </div>
+              </ElButton>
+            </ElCol>
+          </ElRow>
+
+          <ElDivider />
+        </section>
+
+        <section class="settings-section">
+          <div class="section-title">
+            {{ $t('settings.advanced') }}
+          </div>
+
+          <ElDivider />
+
+          <template v-if="platformType === 'desktop'">
+            <ElRow type="flex" justify="space-between" align="middle">
+              <ElCol :span="16" class="!flex gap-1 items-center">
+                <label>{{ $t('log.logLevel') }}</label>
+                <ElTooltip
+                  placement="top"
+                  :open-delay="500"
+                  :content="$t('log.logLevelDesc')"
+                >
+                  <div class="label-icon">
+                    <ElIconWarning />
+                  </div>
+                </ElTooltip>
+              </ElCol>
+              <ElCol :span="8">
+                <ElSelect v-model="settings.logLevel">
+                  <ElOption v-for="{ label, value } in logLevelOptions" :key="value" :label="label" :value="value" />
+                </ElSelect>
+              </ElCol>
+            </ElRow>
+
+            <ElDivider />
+          </template>
+
+          <ElRow type="flex" justify="space-between" align="middle">
+            <ElCol :span="16">
+              <label>{{ $t('settings.dataRecovery') }}</label>
+            </ElCol>
+            <ElCol :span="8">
+              <ElButton
+                class="w-20"
+                type="primary"
+              >
+                <div class="text-main-white w-4 h-4">
+                  <ElIconUpload />
+                </div>
+              </ElButton>
+            </ElCol>
+          </ElRow>
+
+          <ElDivider />
+
+          <ElRow type="flex" justify="space-between" align="middle">
+            <ElCol :span="16">
+              <label>{{ $t('settings.dataBackup') }}</label>
+            </ElCol>
+            <ElCol :span="8">
+              <ElButton
+                class="w-20"
+                type="primary"
+              >
+                <div class="text-main-white w-4 h-4">
+                  <ElIconPrinter />
+                </div>
+              </ElButton>
+            </ElCol>
+          </ElRow>
+
+          <ElDivider />
+
+          <ElRow type="flex" justify="space-between" align="middle">
+            <ElCol :span="16">
+              <label>{{ $t('settings.historyCleanup') }}</label>
+            </ElCol>
+            <ElCol :span="8">
+              <ElButton
+                class="w-20"
+                type="danger"
+              >
+                <div class="text-main-white w-4 h-4">
+                  <ElIconDelete />
+                </div>
+              </ElButton>
+            </ElCol>
+          </ElRow>
+
+          <ElDivider />
+
+          <ElRow type="flex" justify="space-between" align="middle">
+            <ElCol :span="16" class="!flex gap-1 items-center">
+              <label>{{ $t('settings.ignoreQoS0Message') }}</label>
+              <ElTooltip
+                placement="top"
+                :open-delay="500"
+                :content="$t('settings.ignoreQoS0MessageDesc')"
+              >
+                <div class="label-icon">
+                  <ElIconWarning />
+                </div>
+              </ElTooltip>
+            </ElCol>
+            <ElCol :span="8">
+              <ElSwitch v-model="settings.ignoreQoS0Message" />
+            </ElCol>
+          </ElRow>
+
+          <ElDivider />
+        </section>
+
+        <section class="settings-section">
+          <div class="section-title">
+            MQTTX Copilot
+          </div>
+
+          <ElDivider />
+
+          <ElRow type="flex" justify="space-between" align="middle">
+            <ElCol :span="16">
+              <label>{{ $t('settings.enableCopilot') }}</label>
+            </ElCol>
+            <ElCol :span="8">
+              <ElSwitch v-model="settings.enableCopilot" />
+            </ElCol>
+          </ElRow>
+
+          <ElDivider />
+
+          <ElRow type="flex" justify="space-between" align="middle">
+            <ElCol :span="16">
+              <label>API Host</label>
+            </ElCol>
+            <ElCol :span="8">
+              <ElAutocomplete
+                v-model.trim="settings.openAIAPIHost"
+                type="text"
+                clearable
+                :fetch-suggestions="queryAIAPIHost"
+                :disabled="!settings.enableCopilot"
+                placeholder="https://api.openai.com/v1"
+              />
+            </ElCol>
+          </ElRow>
+
+          <ElDivider />
+
+          <ElRow type="flex" justify="space-between" align="middle">
+            <ElCol :span="16">
+              <label>API Key</label>
+            </ElCol>
+            <ElCol :span="8">
+              <ElInput
+                v-model.trim="settings.openAIAPIKey"
+                placeholder="sk-*******"
+                type="password"
+                show-password
+                clearable
+                :disabled="!settings.enableCopilot"
+              />
+            </ElCol>
+          </ElRow>
+
+          <ElDivider />
+
+          <ElRow type="flex" justify="space-between" align="middle">
+            <ElCol :span="16">
+              <label>{{ $t('settings.model') }}</label>
+            </ElCol>
+            <ElCol :span="8">
+              <ElInput
+                v-model.trim="settings.model"
+                placeholder="gpt-4o"
+                type="text"
+                clearable
+                :disabled="!settings.enableCopilot"
+                @focus="showAIModelsSelect = true"
+                @clear="showAIModelsSelect = true"
+                @input="showAIModelsSelect = false"
               />
-            </transition>
-          </ElCol>
-        </ElRow>
+              <transition name="el-zoom-in-bottom">
+                <ElCascaderPanel
+                  v-if="showAIModelsSelect"
+                  v-model="settings.model"
+                  class="ai-models-select"
+                  :options="AImodelsOptions"
+                  :props="{ emitPath: false, label: 'value' }"
+                  @change="showAIModelsSelect = false"
+                />
+              </transition>
+            </ElCol>
+          </ElRow>
 
-        <ElDivider />
-      </section>
+          <ElDivider />
+        </section>
+      </div>
     </div>
-  </div>
+  </ElScrollbar>
 </template>
 
 <style lang="scss">
diff --git a/packages/ui/src/components/about/View.vue b/packages/ui/src/components/about/View.vue
index 3a79c47e4..aaabc12ca 100644
--- a/packages/ui/src/components/about/View.vue
+++ b/packages/ui/src/components/about/View.vue
@@ -11,23 +11,25 @@ const version = computed(() => `${t('common.version')} v${window.__APP_VERSION__
 </script>
 
 <template>
-  <div id="help-view" class="px-4 pt-4 pb-12 bg-primary min-h-full select-none">
-    <div class="mx-auto max-w-screen-lg">
-      <h1 class="mb-12 text-lg text-title font-semibold">
-        {{ $t('about.about') }}
-      </h1>
-      <div class="px-6 flex flex-col items-center justify-center min-h-[calc(100vh-140px)]">
-        <div class="flex gap-20 items-center">
-          <img :src="logo" alt="MQTTX" width="200" height="192">
-          <div>
-            <div class="mb-4 font-semibold text-2xl text-title">
-              {{ version }}
+  <ElScrollbar id="help-view" class="bg-primary min-h-full select-none">
+    <div class="px-4 pt-4 pb-12">
+      <div class="mx-auto max-w-screen-lg">
+        <h1 class="mb-12 text-lg text-title font-semibold">
+          {{ $t('about.about') }}
+        </h1>
+        <div class="px-6 flex flex-col items-center justify-center min-h-[calc(100vh-140px)]">
+          <div class="flex gap-20 items-center">
+            <img :src="logo" alt="MQTTX" width="200" height="192">
+            <div>
+              <div class="mb-4 font-semibold text-2xl text-title">
+                {{ version }}
+              </div>
+              <AboutInfo />
+              <AboutFooter />
             </div>
-            <AboutInfo />
-            <AboutFooter />
           </div>
         </div>
       </div>
     </div>
-  </div>
+  </ElScrollbar>
 </template>
diff --git a/packages/ui/src/i18n/common.ts b/packages/ui/src/i18n/common.ts
index edfc80a7c..efca547f2 100644
--- a/packages/ui/src/i18n/common.ts
+++ b/packages/ui/src/i18n/common.ts
@@ -13,6 +13,13 @@ export default {
     ja: '確認',
     hu: 'Megerősít',
   },
+  close: {
+    zh: '关闭',
+    en: 'Close',
+    ja: '閉じる',
+    tr: 'Kapat',
+    hu: 'Bezárás',
+  },
   inputRequired: {
     zh: '请输入',
     en: 'Please input',
diff --git a/packages/ui/src/i18n/update.ts b/packages/ui/src/i18n/update.ts
index 2c52a8a73..730df3287 100644
--- a/packages/ui/src/i18n/update.ts
+++ b/packages/ui/src/i18n/update.ts
@@ -63,10 +63,10 @@ export default {
     hu: 'Telepítés és újraindítás',
   },
   noUpdateAvailable: {
-    zh: '您当前使用的已经是最新版本，无需更新。',
-    en: 'You are already on the latest version, no update is necessary.',
-    ja: '現在使用しているバージョンは最新です。更新の必要はありません。',
-    tr: 'Kullandığınız sürüm zaten en son sürüm, güncelleme gerekli değil.',
-    hu: 'A jelenlegi verzió már a legújabb, nincs szükség frissítésre.',
+    zh: '当前没有可用的更新。',
+    en: 'Currently no update available.',
+    ja: '現在、利用可能な更新はありません。',
+    tr: 'Şu anda güncelleme yok.',
+    hu: 'Jelenleg nincs elérhető frissítés.',
   },
 }