diff --git a/package.json b/package.json
index 4b79afe4..c337e178 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vocechat-web",
-  "version": "0.3.29",
+  "version": "0.3.30",
   "private": true,
   "homepage": "https://voce.chat",
   "dependencies": {
diff --git a/public/locales/en/setting.json b/public/locales/en/setting.json
index f982cda1..6ea0288d 100644
--- a/public/locales/en/setting.json
+++ b/public/locales/en/setting.json
@@ -91,6 +91,7 @@
     "webhook_tip_title": "Webhooks can receive messages in a channel and should a URL provided by you.",
     "webhook_tip_desc": "Please provide a webhook URL that will return 200.",
     "manage": "Manage",
+    "how_to_use": "How To Use",
     "manage_desc": "You can delete a bot anytime, the bot user will be removed immediately and all APIs will be nullified.",
     "create_title": "Create Bot",
     "create_desc": "Give your bot a name. You can also add an endpoint webhook URL to receive data.",
diff --git a/public/locales/zh/setting.json b/public/locales/zh/setting.json
index 1b9ad960..4649e46c 100644
--- a/public/locales/zh/setting.json
+++ b/public/locales/zh/setting.json
@@ -89,6 +89,7 @@
     "webhook_tip_title": "Webhook是一个用以接收VoceChat推送数据的URL地址",
     "webhook_tip_desc": "请提供一个有效的Webhook URL：GET 请求响应 200即为有效。我们会使用POST推送数据。",
     "manage": "管理",
+    "how_to_use": "使用文档",
     "manage_desc": "机器人一旦删除，所有与其相关的接口也立即失效，包括Webhook。",
     "create_title": "创建机器人",
     "create_desc": "给你的机器人一个名字，同时也可以设置Webhook URL，用以接收推送的数据。",
diff --git a/src/common/component/ServerVersionChecker.tsx b/src/common/component/ServerVersionChecker.tsx
index e18169f9..6d928ee4 100644
--- a/src/common/component/ServerVersionChecker.tsx
+++ b/src/common/component/ServerVersionChecker.tsx
@@ -11,8 +11,10 @@ const ServerVersionChecker = ({ version, children }: PropsWithChildren<Props>) =
   if (!isSuccess) return null;
   const res = compareVersion(currentVersion, version);
   if (res < 0) return <div className='flex flex-col gap-2 items-start'>
-    <span className='text-gray-400 text-sm'>🚨 Server version:<strong className='font-bold'>{version}</strong> needed at least, your current version:<strong className='font-bold'>{currentVersion}</strong>, please upgrade the Server!</span>
-    <a className='text-blue-500 underline' href="https://doc.voce.chat/install/install-by-docker#update-vocechat-docker" target="_blank" rel="noopener noreferrer">How to Update VoceChat Server</a>
+    <span className='text-gray-400 text-sm'>Server version:<strong className='font-bold'>{version}</strong> needed at least 🚨</span>
+    <span className='text-gray-400 text-sm'>Your current version:<strong className='font-bold'>{currentVersion}</strong></span>
+    <span className='text-gray-400 text-sm'>Please upgrade the Server!</span>
+    <a className='text-blue-500 underline' href="https://doc.voce.chat/install/install-by-docker#update-vocechat-docker" target="_blank" rel="noopener noreferrer">How to Update VoceChat Server 📖 </a>
   </div>;
   return children;
 };
diff --git a/src/routes/setting/BotConfig/TestAPIKeyModal.tsx b/src/routes/setting/BotConfig/TestAPIKeyModal.tsx
index a8afe27a..f15508a0 100644
--- a/src/routes/setting/BotConfig/TestAPIKeyModal.tsx
+++ b/src/routes/setting/BotConfig/TestAPIKeyModal.tsx
@@ -50,7 +50,7 @@ const TestAPIKeyModal = ({ closeModal }: Props) => {
     return (
         <Modal id="modal-modal">
             <StyledModal
-                title={`Input API Key`}
+                title={key ? "" : `Input API Key`}
                 buttons={
                     <>
                         <Button className="cancel" onClick={closeModal}>
diff --git a/src/routes/setting/BotConfig/index.tsx b/src/routes/setting/BotConfig/index.tsx
index 9cc59c51..1093b30a 100644
--- a/src/routes/setting/BotConfig/index.tsx
+++ b/src/routes/setting/BotConfig/index.tsx
@@ -11,7 +11,7 @@ import IconDelete from '../../../assets/icons/delete.svg';
 import CreateModal from './CreateModal';
 import WebhookEdit from './WebhookEdit';
 import WebhookModal from './WebhookModal';
-import TestAPIKeyModal from './TestAPIKeyModal';
+// import TestAPIKeyModal from './TestAPIKeyModal';
 import DeleteModal from './DeleteModal';
 import BotAPIKeys from './BotAPIKeys';
 import { toast } from 'react-hot-toast';
@@ -28,7 +28,7 @@ const tdClass = "p-6 whitespace-nowrap text-sm font-medium text-gray-900 align-t
 type WebhookParams = { webhook?: string, uid: number };
 type DeleteParams = { name: string, uid: number };
 export default function BotConfig() {
-  const [testAPIKeyModalVisible, setTestAPIKeyModalVisible] = useState(false);
+  // const [testAPIKeyModalVisible, setTestAPIKeyModalVisible] = useState(false);
   const [updateAvatar, { isSuccess: updateAvatarSuccess }] = useUpdateAvatarByAdminMutation();
   const [createModalVisible, setCreateModalVisible] = useState(false);
   const [currWebhookParams, setCurrWebhookParams] = useState<WebhookParams | undefined>(undefined);
@@ -37,9 +37,9 @@ export default function BotConfig() {
   const { t } = useTranslation("setting", { keyPrefix: "bot" });
   const { t: ct } = useTranslation();
 
-  const toggleTestAPIKeyModalVisible = () => {
-    setTestAPIKeyModalVisible(prev => !prev);
-  };
+  // const toggleTestAPIKeyModalVisible = () => {
+  //   setTestAPIKeyModalVisible(prev => !prev);
+  // };
   const toggleCreateModalVisible = () => {
     setCreateModalVisible(prev => !prev);
   };
@@ -65,10 +65,14 @@ export default function BotConfig() {
           <Tip title={t("webhook_tip_title")} desc={t("webhook_tip_desc")} />
         </div>
         <div className="flex flex-col gap-1">
-          <h2 className='font-semibold'>{t("manage")}</h2>
+          <h2 className='font-semibold flex gap-4 items-center'>
+            {t("manage")}
+            <a href="https://doc.voce.chat/bot-and-webhook" target="_blank" className="text-sm text-blue-400 underline-offset-1 underline" rel="noopener noreferrer">
+              🔗 {t("how_to_use")}
+            </a>
+          </h2>
           <p className='text-gray-500 text-xs'>{t("manage_desc")}</p>
         </div>
-
         <div className="w-fit  overflow-hidden">
           <table className="min-w-full table-auto">
             <thead className="border-b bg-gray-50">
@@ -114,14 +118,14 @@ export default function BotConfig() {
         {/* <Button onClick={toggleCreateModalVisible} className="ghost small">{ct("action.add")}</Button> */}
         <div className="flex gap-4">
           <Button onClick={toggleCreateModalVisible} className="small">{ct("action.add")}</Button>
-          <Button onClick={toggleTestAPIKeyModalVisible} className="ghost small stroke-slate-200 fill-gray-200"> Test API Key</Button>
+          {/* {bots.length > 0 && <Button onClick={toggleTestAPIKeyModalVisible} className="ghost small stroke-slate-200 fill-gray-200"> Test API Key</Button>} */}
         </div>
 
       </div>
       {createModalVisible && <CreateModal closeModal={toggleCreateModalVisible} />}
       {currWebhookParams && <WebhookModal closeModal={toggleWebhookModalVisible} {...currWebhookParams} />}
       {currDeleteParams && <DeleteModal closeModal={toggleDeleteModalVisible} {...currDeleteParams} />}
-      {testAPIKeyModalVisible && <TestAPIKeyModal closeModal={toggleTestAPIKeyModalVisible} />}
+      {/* {testAPIKeyModalVisible && <TestAPIKeyModal closeModal={toggleTestAPIKeyModalVisible} />} */}
     </>
   );
 }
diff --git a/src/service-worker.ts b/src/service-worker.ts
index 6745a589..1076f36e 100644
--- a/src/service-worker.ts
+++ b/src/service-worker.ts
@@ -69,7 +69,7 @@ registerRoute(
     plugins: [
       // Ensure that once this runtime cache reaches a maximum size the
       // least-recently used images are removed.
-      new ExpirationPlugin({ maxEntries: 100 })
+      new ExpirationPlugin({ maxEntries: 100, maxAgeSeconds: 30 * 60 })
     ]
   })
 );