diff --git a/components.d.ts b/components.d.ts
index 4d08b34..1d94901 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,8 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    ElButton: typeof import('element-plus/es')['ElButton']
-    ElDrawer: typeof import('element-plus/es')['ElDrawer']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElInput: typeof import('element-plus/es')['ElInput']
@@ -18,5 +17,6 @@ declare module 'vue' {
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
   }
 }
diff --git a/entrypoints/sidepanel/Sidepanel.vue b/entrypoints/sidepanel/Sidepanel.vue
index 215b8bd..2183df1 100644
--- a/entrypoints/sidepanel/Sidepanel.vue
+++ b/entrypoints/sidepanel/Sidepanel.vue
@@ -33,7 +33,7 @@ const faviconUrl = ref('');
 const title = ref('');
 const isAIChecking = ref(false);
 const GROQ_APIKEY = ref('');
-const isCheckTw5 = ref(false);
+const isCheckTw5 = ref(false); // 是否连接tw
 const inputVisible = ref(false);
 const InputRef = ref();
 const inputValue = ref();
@@ -60,6 +60,7 @@ async function getContent(
     tip: false,
   }
 ) {
+  html.value = '';
   const tabs = await browser.tabs.query({ active: true, currentWindow: true });
 
   const tab = tabs[0];
@@ -194,6 +195,22 @@ async function ai2md() {
 }
 
 async function savePort(port: number) {
+  if (!port) {
+    notify({
+      message: '请输入端口号',
+      type: 'error',
+    });
+    return;
+  }
+  // 检查端口号范围的合法性
+  if (port < 1024 || port > 65535) {
+    notify({
+      message: '端口号范围 1024 - 65535',
+      type: 'error',
+    });
+    return;
+  }
+
   await portStorage.setValue(port);
   if (isCheckTw5.value) {
     // 更新status
@@ -202,6 +219,14 @@ async function savePort(port: number) {
 }
 
 async function saveAuth(option: { username: string; password: string }) {
+  // 检查用户名或者密码是否合法
+  if (!option.username || !option.password) {
+    notify({
+      message: '请输入' + (option.username ? '密码' : '用户名'),
+      type: 'error',
+    });
+    return;
+  }
   await authStorage.setValue(option);
   if (password.value) {
     checkStatus(port, status, isChecking, username, password);
@@ -214,60 +239,74 @@ const toggleInfoDialog = () => {
 </script>
 
 <template>
+  <!-- <el-empty v-if="!html" /> -->
+  <!-- <el-skeleton
+    style="width: 100%"
+    :loading="html.length === 0"
+    animated
+    :throttle="800" /> -->
   <div class="inset-x-0 mb-4">
     <div
-      class="backdrop-blur-lg z-[999] flex justify-center items-center bg-gray-200/50 inset-x-0 gap-2 p-2 rounded-md px-6">
+      class="backdrop-blur-lg z-[999] flex justify-center items-center bg-gray-200/50 inset-x-0 gap-1 p-2 rounded-md px-6">
       <!-- class="group aspect-square hover:aspect-auto transition-all duration-800"> -->
-      <ElButton
-        @click="toggleInfoDialog"
-        size="small"
-        plain
-        type="primary"
-        title="显示更多信息"
-        class="aspect-square">
-        <WI.OcticonInfo24 />
-        <!-- <span
-          class="duration-800 hidden ml-2 transition-all group-hover:block delay-75"
-          >详情</span
-        > -->
-      </ElButton>
-      <ElButton
-        type="primary"
-        plain
-        size="small"
-        class="aspect-square"
-        title="刷新"
-        @click="
-          getContent({
-            tip: true,
-          })
-        ">
-        <WI.MdiCloudRefreshVariant />
-      </ElButton>
-
-      <ElButton
-        @click="saveMarkdown(md, title!)"
-        size="small"
-        type="warning"
-        plain
-        title="保存"
-        class="aspect-square">
-        <WI.MaterialSymbolsDownload />
-      </ElButton>
+      <el-tooltip
+        content="详情"
+        placement="bottom">
+        <ElButton
+          @click="toggleInfoDialog"
+          size="default"
+          plain
+          type="primary"
+          class="aspect-square">
+          <WI.OcticonInfo24 />
+        </ElButton>
+      </el-tooltip>
+      <el-tooltip
+        content="重新获取内容"
+        placement="bottom">
+        <ElButton
+          type="primary"
+          plain
+          size="default"
+          class="aspect-square"
+          @click="
+            getContent({
+              tip: true,
+            })
+          ">
+          <WI.MdiCloudRefreshVariant />
+        </ElButton>
+      </el-tooltip>
+
+      <el-tooltip
+        content="下载"
+        placement="bottom">
+        <ElButton
+          @click="saveMarkdown(md, title!)"
+          size="default"
+          type="warning"
+          plain
+          class="aspect-square">
+          <WI.MaterialSymbolsDownload />
+        </ElButton>
+      </el-tooltip>
 
       <!-- copy -->
-      <ElButton
-        @click="copyMd(md)"
-        size="small"
-        title="复制"
-        type="info"
-        plain
-        class="aspect-square">
-        <WI.MdiContentCopy />
-      </ElButton>
+      <el-tooltip
+        content="复制"
+        placement="bottom">
+        <ElButton
+          @click="copyMd(md)"
+          size="default"
+          type="primary"
+          plain
+          class="aspect-square">
+          <WI.ZondiconsCopy />
+        </ElButton>
+      </el-tooltip>
 
       <!-- ai -->
-      <!--         <ElButton
+      <!--  <ElButton
           @click="ai2md"
           size="small"
           class="aspect-square"
@@ -276,34 +315,39 @@ const toggleInfoDialog = () => {
         </ElButton> -->
 
       <!-- journal -->
-      <ElButton
-        @click="addJournal"
-        size="small"
-        class="aspect-square"
-        plain
-        title="添加日记"
-        type="success"
-        tooltip="添加到日记本">
-        <WI.BiJournals />
-      </ElButton>
+      <el-tooltip
+        content="写点什么吧"
+        placement="bottom">
+        <ElButton
+          @click="addJournal"
+          size="default"
+          class="aspect-square"
+          plain
+          type="success">
+          <WI.PhPencil />
+        </ElButton>
+      </el-tooltip>
 
       <!-- save to tiddlywiki -->
-      <ElButton
-        v-show="isCheckTw5"
-        @click="handleSave"
-        size="small"
-        title="保存到 TiddlyWiki"
-        class="aspect-square">
-        <WI.FaRegularSave />
-      </ElButton>
+      <el-tooltip
+        content="保存到 TiddlyWiki"
+        placement="bottom">
+        <ElButton
+          v-show="isCheckTw5"
+          @click="handleSave"
+          size="default"
+          plain
+          class="aspect-square">
+          <WI.SimpleIconsTiddlywiki />
+        </ElButton>
+      </el-tooltip>
     </div>
   </div>
 
   <div>
     <ElTabs
-      type=""
-      :model-value="currentTab"
-      class="">
+      type="border-card"
+      :model-value="currentTab">
       <!-- preview -->
       <ElTabPane
         name="preview"
@@ -368,92 +412,108 @@ const toggleInfoDialog = () => {
           <span class="ml-1">配置</span>
         </template>
 
-        <div class="items-center">
-          <h2>连接到 Nodejs TiddlyWiki5</h2>
-          <el-switch
-            v-model="isCheckTw5"
-            style="
-              --el-switch-on-color: #13ce66;
-              --el-switch-off-color: #ff4949;
-            " />
-
-          <!-- auth -->
+        <div class="items-center mx-2">
           <div>
-            <h2>TiddlyWiki5 登录认证</h2>
+            <h2>登录</h2>
             <div class="flex gap-2">
-              <el-form label-width="68px">
+              <el-form
+                label-width="68px"
+                label-position="top">
                 <el-form-item label="用户名">
                   <ElInput
                     v-model.trim.number="username"
-                    clearable />
+                    minlength="3"
+                    maxlength="20"
+                    show-word-limit
+                    placeholder="请输入用户名" />
                 </el-form-item>
                 <el-form-item label="密码">
                   <ElInput
+                    minlength="4"
+                    maxlength="20"
                     v-model.trim.number="password"
                     type="password"
-                    clearable
+                    placeholder="请输入密码"
                     show-password />
                 </el-form-item>
                 <el-form-item label="">
                   <ElButton
                     type="success"
                     plain
+                    :disabled="isChecking"
                     @click="
                       saveAuth({
                         username,
                         password,
                       })
-                    "
-                    >保存</ElButton
-                  >
+                    ">
+                    保存
+                  </ElButton>
                 </el-form-item>
               </el-form>
             </div>
           </div>
 
+          <h2>连接TiddlyWiki5</h2>
+          <el-switch
+            :loading="isChecking"
+            inline-prompt
+            v-model="isCheckTw5"
+            :inactive-icon="WI.SimpleIconsTiddlywiki"
+            :active-icon="WI.SimpleIconsTiddlywiki" />
+
           <div>
-            <h2>Nodejs TiddlyWiki5 端口</h2>
+            <h2>端口号</h2>
             <div class="flex gap-2">
               <ElInput
                 v-model.trim.number="port"
-                clearable />
+                type="number"
+                placeholder="请输入端口号" />
               <ElButton
                 type="success"
                 plain
+                @keyup.enter="savePort(port)"
                 @click="savePort(port)"
+                :disabled="isChecking"
                 >保存</ElButton
               >
             </div>
           </div>
-          <h2>剪藏标签</h2>
-          <!-- tag -->
-          <div class="flex gap-2">
-            <ElTag
-              v-for="tag in dynamicTags"
-              :key="tag"
-              closable
-              :disable-transitions="false"
-              @close="handleClose(tag)">
-              {{ tag }}
-            </ElTag>
-            <ElInput
-              v-if="inputVisible"
-              ref="InputRef"
-              v-model="inputValue"
-              class="w-20"
-              size="small"
-              @keyup.enter="handleInputConfirm"
-              @blur="handleInputConfirm" />
-
-            <ElButton
-              v-else
-              class="button-new-tag"
-              size="small"
-              type="success"
-              plain
-              @click="showInput">
-              +
-            </ElButton>
+
+          <div v-show="isCheckTw5">
+            <h2>标签</h2>
+            <!-- tag -->
+            <div class="flex gap-2">
+              <ElTag
+                v-for="tag in dynamicTags"
+                :key="tag"
+                closable
+                :disable-transitions="false"
+                @close="handleClose(tag)">
+                <div class="flex items-center gap-2">
+                  <WI.MdiTagOutline />
+                  {{ tag }}
+                </div>
+              </ElTag>
+              <ElInput
+                v-if="inputVisible"
+                ref="InputRef"
+                v-model="inputValue"
+                class="w-20"
+                size="default"
+                @keyup.enter="handleInputConfirm"
+                @blur="handleInputConfirm" />
+
+              <ElButton
+                v-else
+                class="button-new-tag"
+                size="small"
+                type="success"
+                plain
+                @click="showInput">
+                +
+              </ElButton>
+            </div>
           </div>
 
           <div class="hidden">
@@ -481,14 +541,18 @@ const toggleInfoDialog = () => {
         </div>
       </ElTabPane>
 
-      <el-drawer
+      <!-- <el-drawer
         v-model="infoDialogStatus"
         direction="btt"
-        title="连接信息">
+        title=""> -->
+      <el-dialog
+        v-model="infoDialogStatus"
+        width="80%"
+        align-center>
         <Info
           :status="status"
           :json="json" />
-      </el-drawer>
+      </el-dialog>
     </ElTabs>
   </div>
 </template>
diff --git a/entrypoints/sidepanel/components/Info.vue b/entrypoints/sidepanel/components/Info.vue
index 2d60aeb..3579f9e 100644
--- a/entrypoints/sidepanel/components/Info.vue
+++ b/entrypoints/sidepanel/components/Info.vue
@@ -4,11 +4,13 @@ defineProps(['status', 'json']);
 </script>
 
 <template>
-  <div class="flex gap-2 flex-col">
+  <div class="flex gap-2 flex-wrap justify-center">
     <ElTag> TiddlyWiki5: {{ status.tiddlywiki_version }} </ElTag>
     <ElTag> Username: {{ status.username }} </ElTag>
-    <ElTag> {{ json.name.toUpperCase() }}: {{ json.version }} </ElTag>
-    <ElLink href="https://github.com/oeyoews/usewiki2" target="_blank">
+    <ElTag> {{ json.name }}: {{ json.version }} </ElTag>
+    <ElLink
+      href="https://github.com/oeyoews/usewiki2"
+      target="_blank">
       <WI.CharmGithub />
     </ElLink>
   </div>
diff --git a/package.json b/package.json
index f1810b3..b5c2e01 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "usewiki2",
   "description": "Convert HTML to Markdown, and save to your computer, support nodejs tiddlywiki",
   "private": true,
-  "version": "3.5.1",
+  "version": "3.6.0",
   "type": "module",
   "scripts": {
     "dev": "wxt",
@@ -49,6 +49,7 @@
   "devDependencies": {
     "@iconify-json/bi": "^1.1.23",
     "@iconify-json/charm": "^1.1.12",
+    "@iconify-json/entypo": "^1.1.8",
     "@iconify-json/eos-icons": "^1.1.10",
     "@iconify-json/fa": "^1.1.8",
     "@iconify-json/fa-regular": "^1.1.8",
@@ -56,9 +57,12 @@
     "@iconify-json/material-symbols": "^1.1.79",
     "@iconify-json/mdi": "^1.1.66",
     "@iconify-json/octicon": "^1.1.54",
+    "@iconify-json/ph": "^1.1.11",
     "@iconify-json/ri": "^1.1.20",
+    "@iconify-json/simple-icons": "^1.1.108",
     "@iconify-json/streamline": "^1.1.8",
     "@iconify-json/tdesign": "^1.1.3",
+    "@iconify-json/zondicons": "^1.1.8",
     "@vitejs/plugin-vue": "^5.0.4",
     "typescript": "^5.4.5",
     "vue-tsc": "^2.0.16",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 99677fc..6afd562 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -105,6 +105,9 @@ importers:
       '@iconify-json/charm':
         specifier: ^1.1.12
         version: 1.1.12
+      '@iconify-json/entypo':
+        specifier: ^1.1.8
+        version: 1.1.8
       '@iconify-json/eos-icons':
         specifier: ^1.1.10
         version: 1.1.10
@@ -126,15 +129,24 @@ importers:
       '@iconify-json/octicon':
         specifier: ^1.1.54
         version: 1.1.54
+      '@iconify-json/ph':
+        specifier: ^1.1.11
+        version: 1.1.11
       '@iconify-json/ri':
         specifier: ^1.1.20
         version: 1.1.20
+      '@iconify-json/simple-icons':
+        specifier: ^1.1.108
+        version: 1.1.108
       '@iconify-json/streamline':
         specifier: ^1.1.8
         version: 1.1.8
       '@iconify-json/tdesign':
         specifier: ^1.1.3
         version: 1.1.3
+      '@iconify-json/zondicons':
+        specifier: ^1.1.8
+        version: 1.1.8
       '@vitejs/plugin-vue':
         specifier: ^5.0.4
         version: 5.0.4(vite@5.2.11(@types/node@20.12.8))(vue@3.4.26(typescript@5.4.5))
@@ -658,6 +670,9 @@ packages:
   '@iconify-json/charm@1.1.12':
     resolution: {integrity: sha512-a/O7GM2ENm4I+mSddGaHdPNh/RHCbLT4Nlv6Dfgfg+VXTkwjmvzHB1kt3YUB9089UMG6Co3KU2LHXVrCAeuvnw==}
 
+  '@iconify-json/entypo@1.1.8':
+    resolution: {integrity: sha512-Bp7oLs6/7sZtCiBGU4oIwjqvsP3Ii/AusOJiaSYsDAhTGxwgrOl41UbKPrIN563S/r8lESJa25EBgHLdn4zZrg==}
+
   '@iconify-json/eos-icons@1.1.10':
     resolution: {integrity: sha512-sLkaMSrzHgATDFpVYs3/ymeNxR8CtkZCh1Ds9fYxjfhNmXArofbWhHwANqM4Sw9XNbMJq/Z5yxJ5BPTYqjhRcA==}
 
@@ -682,15 +697,24 @@ packages:
   '@iconify-json/octicon@1.1.54':
     resolution: {integrity: sha512-1sKH5THuE9pMg7r4e/31vHaHJMBU32QdDLBt0riKt+4NXhEkF39AMxITGREagO4TeCw6ygqDgouj9ZE2y0l+Tg==}
 
+  '@iconify-json/ph@1.1.11':
+    resolution: {integrity: sha512-izLvLZrU7WM03zNwNWNrAySv3i45hM3D3K6USjCGBSQMUG0HB8zxwrMf4O0leDrganmuQBH7Z0DWTgyH1ET/fg==}
+
   '@iconify-json/ri@1.1.20':
     resolution: {integrity: sha512-yScIGjLFBCJKWKskQTWRjNI2Awoq+VRDkRxEsCQvSfdz41n+xkRtFG2K6J1OVI90ClRHfjFC8VJ2+WzxxyFjTQ==}
 
+  '@iconify-json/simple-icons@1.1.108':
+    resolution: {integrity: sha512-GeC0Oy3j385BgjI0TadEzVbzM/cYjvAot22hJLNal3wKLmf/8t6RtH2PgRiNaK+SxELeDYdSAHocXxw4QoKXYA==}
+
   '@iconify-json/streamline@1.1.8':
     resolution: {integrity: sha512-9G9y1BYgh3VTZdE8CPUVSfzjHL39/PkkdPpyVCeWYZ64flyPEEBMeRz4YyoOU8A8MMTUj2zCq9GcsLpZb9Yg1Q==}
 
   '@iconify-json/tdesign@1.1.3':
     resolution: {integrity: sha512-A0yjgmepPW+95Vgz6WHwsR0q/IQbFS6faXHhoEcevamhM077om6ddM2C2Usiz9WTqWLeUFGM7SRu0DuLxlq5Sg==}
 
+  '@iconify-json/zondicons@1.1.8':
+    resolution: {integrity: sha512-zT824sPnuPqL0iYx4Ru2ZzaZA74BF0hPEayAH/hMPesOsEEEA7zrcJ/Rbdfc2haV8a6d9Qrf6La6Mr2NyIgC7g==}
+
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
@@ -3938,6 +3962,10 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/entypo@1.1.8':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/eos-icons@1.1.10':
     dependencies:
       '@iconify/types': 2.0.0
@@ -3970,10 +3998,18 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/ph@1.1.11':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/ri@1.1.20':
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/simple-icons@1.1.108':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/streamline@1.1.8':
     dependencies:
       '@iconify/types': 2.0.0
@@ -3982,6 +4018,10 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/zondicons@1.1.8':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/types@2.0.0': {}
 
   '@iconify/utils@2.1.23':
diff --git a/utils/checkStatus.ts b/utils/checkStatus.ts
index 26491f7..508e208 100644
--- a/utils/checkStatus.ts
+++ b/utils/checkStatus.ts
@@ -27,27 +27,34 @@ export async function checkStatus(
           title: '连接成功',
           type: 'success',
           position: 'bottom-right',
+          duration: 1000,
         });
       } else {
         if (response.status == 401) {
           // response.statusText,
           notify({
-            title: '请设置用户名和密码',
+            title: '请设置正确的用户名和密码',
             type: 'error',
             position: 'bottom-right',
           });
         }
       }
     },
-    async onRequestError({ request, response, options }) {
+    async onRequestError({ error, request, response, options }) {
       notify({
-        title: response?.statusText,
+        //  + error.message,
+        title: '请检查端口号是否正确',
         type: 'error',
+        position: 'bottom-right',
+        duration: 2000,
       });
     },
   });
 
   try {
+    // if (isChecking.value) {
+    //   return;
+    // }
     const data = await twFetch('/status');
     status.value = data;
   } catch (error) {
diff --git a/utils/icons/index.ts b/utils/icons/index.ts
index ea28115..c76dfd9 100644
--- a/utils/icons/index.ts
+++ b/utils/icons/index.ts
@@ -12,3 +12,7 @@ export { default as FaFileTextO } from '~icons/fa/file-text-o';
 export { default as FaRegularSave } from '~icons/fa-regular/save';
 export { default as MdiCloudRefreshVariant } from '~icons/mdi/cloud-refresh-variant';
 export { default as OcticonInfo24 } from '~icons/octicon/info-24';
+export { default as SimpleIconsTiddlywiki } from '~icons/simple-icons/tiddlywiki';
+export { default as MdiTagOutline } from '~icons/mdi/tag-outline';
+export { default as PhPencil } from '~icons/ph/pencil';
+export { default as ZondiconsCopy } from '~icons/zondicons/copy';