diff --git a/.eslintcache b/.eslintcache
index 81e97ee..b5d4ded 100644
--- a/.eslintcache
+++ b/.eslintcache
@@ -1 +1 @@
-[{"/root/code/my/utools/nat-utools/src/index.tsx":"1","/root/code/my/utools/nat-utools/src/react/reportWebVitals.ts":"2","/root/code/my/utools/nat-utools/src/pages/manager/index.tsx":"3","/root/code/my/utools/nat-utools/src/model/nat.ts":"4","/root/code/my/utools/nat-utools/src/store/server.ts":"5","/root/code/my/utools/nat-utools/src/components/icon/index.tsx":"6","/root/code/my/utools/nat-utools/src/components/nat-edit/index.tsx":"7","/root/code/my/utools/nat-utools/src/components/alert/index.tsx":"8","/root/code/my/utools/nat-utools/src/components/nat-log/index.tsx":"9","/root/code/my/utools/nat-utools/src/components/help/index.tsx":"10"},{"size":697,"mtime":1627279865447,"results":"11","hashOfConfig":"12"},{"size":425,"mtime":1627263151942,"results":"13","hashOfConfig":"12"},{"size":3269,"mtime":1627279795438,"results":"14","hashOfConfig":"12"},{"size":510,"mtime":1627267804565,"results":"15","hashOfConfig":"12"},{"size":4235,"mtime":1627279817838,"results":"16","hashOfConfig":"12"},{"size":406,"mtime":1627263151934,"results":"17","hashOfConfig":"12"},{"size":1626,"mtime":1627269048414,"results":"18","hashOfConfig":"12"},{"size":842,"mtime":1627268262179,"results":"19","hashOfConfig":"12"},{"size":1109,"mtime":1627270225081,"results":"20","hashOfConfig":"12"},{"size":783,"mtime":1627278401400,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"35h0pq",{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"41","messages":"42","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/root/code/my/utools/nat-utools/src/index.tsx",[],"/root/code/my/utools/nat-utools/src/react/reportWebVitals.ts",[],["43","44"],"/root/code/my/utools/nat-utools/src/pages/manager/index.tsx",[],"/root/code/my/utools/nat-utools/src/model/nat.ts",[],"/root/code/my/utools/nat-utools/src/store/server.ts",["45"],"/root/code/my/utools/nat-utools/src/components/icon/index.tsx",[],"/root/code/my/utools/nat-utools/src/components/nat-edit/index.tsx",[],"/root/code/my/utools/nat-utools/src/components/alert/index.tsx",[],"/root/code/my/utools/nat-utools/src/components/nat-log/index.tsx",[],"/root/code/my/utools/nat-utools/src/components/help/index.tsx",[],{"ruleId":"46","replacedBy":"47"},{"ruleId":"48","replacedBy":"49"},{"ruleId":"50","severity":1,"message":"51","line":2,"column":30,"nodeType":"52","messageId":"53","endLine":2,"endColumn":34},"no-native-reassign",["54"],"no-negated-in-lhs",["55"],"@typescript-eslint/no-unused-vars","'toJS' is defined but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
+[{"/mnt/e/code/pro/utools/nat-utools/src/index.tsx":"1","/mnt/e/code/pro/utools/nat-utools/src/react/reportWebVitals.ts":"2","/mnt/e/code/pro/utools/nat-utools/src/pages/manager/index.tsx":"3","/mnt/e/code/pro/utools/nat-utools/src/model/nat.ts":"4","/mnt/e/code/pro/utools/nat-utools/src/store/server.ts":"5","/mnt/e/code/pro/utools/nat-utools/src/components/icon/index.tsx":"6","/mnt/e/code/pro/utools/nat-utools/src/components/alert/index.tsx":"7","/mnt/e/code/pro/utools/nat-utools/src/components/help/index.tsx":"8","/mnt/e/code/pro/utools/nat-utools/src/components/nat-edit/index.tsx":"9","/mnt/e/code/pro/utools/nat-utools/src/components/nat-log/index.tsx":"10"},{"size":697,"mtime":1627282191594,"results":"11","hashOfConfig":"12"},{"size":425,"mtime":1627282191598,"results":"13","hashOfConfig":"12"},{"size":3512,"mtime":1628044105015,"results":"14","hashOfConfig":"12"},{"size":510,"mtime":1627282191595,"results":"15","hashOfConfig":"12"},{"size":4400,"mtime":1628044184011,"results":"16","hashOfConfig":"12"},{"size":406,"mtime":1627282191591,"results":"17","hashOfConfig":"12"},{"size":842,"mtime":1627282191589,"results":"18","hashOfConfig":"12"},{"size":1442,"mtime":1628043988331,"results":"19","hashOfConfig":"12"},{"size":1626,"mtime":1627282191593,"results":"20","hashOfConfig":"12"},{"size":1109,"mtime":1627282191594,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"olkzyp",{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/mnt/e/code/pro/utools/nat-utools/src/index.tsx",[],"/mnt/e/code/pro/utools/nat-utools/src/react/reportWebVitals.ts",[],"/mnt/e/code/pro/utools/nat-utools/src/pages/manager/index.tsx",[],"/mnt/e/code/pro/utools/nat-utools/src/model/nat.ts",[],"/mnt/e/code/pro/utools/nat-utools/src/store/server.ts",[],"/mnt/e/code/pro/utools/nat-utools/src/components/icon/index.tsx",[],"/mnt/e/code/pro/utools/nat-utools/src/components/alert/index.tsx",[],"/mnt/e/code/pro/utools/nat-utools/src/components/help/index.tsx",[],"/mnt/e/code/pro/utools/nat-utools/src/components/nat-edit/index.tsx",[],"/mnt/e/code/pro/utools/nat-utools/src/components/nat-log/index.tsx",[]]
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 4982d4d..afcfe35 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,8 +2,9 @@
 /dist
 /node_modules
 /build
-/build-preload
 /.cache
+/utools/build
+/utools/index.js
 
 # Logs
 logs
diff --git a/package.json b/package.json
index 733ef89..40ad297 100644
--- a/package.json
+++ b/package.json
@@ -7,10 +7,8 @@
     "serve": "craco build && cra-build-watch",
     "serve:preload": "cd ./preload && npm run serve",
     "build": "npm run build:html && npm run build:preload",
-    "build:html": "craco build",
+    "build:html": "rm -rf ./utools/build && craco build && cp -r ./build ./utools",
     "build:preload": "cd ./preload && npm run build",
-    "build:demo": "env-cmd -f .env.staging craco build",
-    "test": "craco test",
     "commit": "git-cz"
   },
   "dependencies": {
diff --git a/preload/package.json b/preload/package.json
index 47c7c3f..9d8dbc2 100644
--- a/preload/package.json
+++ b/preload/package.json
@@ -5,8 +5,8 @@
   "homepage": ".",
   "main": "./dist/index.js",
   "scripts": {
-    "serve": "parcel src/index.ts --out-dir ../build-preload --target node --bundle-node-modules",
-    "build": "rm -rf ../build-preload && parcel build src/index.ts --out-dir ../build-preload --target node --bundle-node-modules --no-source-maps"
+    "serve": "parcel src/index.ts --out-dir ../utools/ --target node --bundle-node-modules",
+    "build": "rm -rf ../utools/index.js && parcel build src/index.ts --out-dir ../utools --target node --bundle-node-modules --no-source-maps"
   },
   "dependencies": {
     "localtunnel": "^2.0.1",
diff --git a/src/components/help/index.module.scss b/src/components/help/index.module.scss
index d92bfe1..595eff8 100644
--- a/src/components/help/index.module.scss
+++ b/src/components/help/index.module.scss
@@ -27,6 +27,9 @@
     color: #666;
     padding: 16px 0;
     line-height: 1.7;
+    max-height: 50vh;
+    overflow-y: auto;
+    overflow-x: hidden;
   }
 
   .btn {
diff --git a/src/components/help/index.tsx b/src/components/help/index.tsx
index ebf7caf..0503895 100644
--- a/src/components/help/index.tsx
+++ b/src/components/help/index.tsx
@@ -11,8 +11,28 @@ const Help: FC = () => {
           <div className={styles.title}>关于内网穿透NAT</div>
 
           <div className={styles.content}>
-            该 utools 扩展是基于 localtunnel 的封装，目前已在 GitHub 开源：
-            <span className={styles.link} onClick={()=>utools.shellOpenExternal('https://github.com/lblblong/nat-utools')}>https://github.com/lblblong/nat-utools</span>
+            <p>
+              该 utools 扩展是基于 localtunnel 的封装，目前已在 GitHub 开源：
+              <span
+                className={styles.link}
+                onClick={() => utools.shellOpenExternal('https://github.com/lblblong/nat-utools')}
+              >
+                https://github.com/lblblong/nat-utools
+              </span>
+            </p>
+            <h4>使用说明：</h4>
+            <p>
+              点击右下角 +
+              号按钮，输入你本地服务监听的端口号，如果需要自定义子域名则输入自定义的子域名，然后点击确定，即可获得可被外网访问的地址
+            </p>
+            <h4>状态说明：</h4>
+            <p>
+              <ul>
+                <li>灰色：未启动</li>
+                <li>灰蓝闪动：连接中</li>
+                <li>蓝色：已启动</li>
+              </ul>
+            </p>
           </div>
         </div>
       )}
diff --git a/src/pages/manager/index.module.scss b/src/pages/manager/index.module.scss
index 811fa37..87f2919 100644
--- a/src/pages/manager/index.module.scss
+++ b/src/pages/manager/index.module.scss
@@ -103,5 +103,25 @@
         }
       }
     }
+
+    .loading {
+      .lbox {
+        .state {
+          animation-name: blink;
+          animation-duration: 0.5s;
+          animation-iteration-count: infinite;
+          transition: all 0.5s;
+        }
+      }
+    }
+  }
+}
+
+@keyframes blink {
+  from {
+    background-color: #dfdfdf;
+  }
+  to {
+    background-color: var(--color-primary);
   }
 }
diff --git a/src/pages/manager/index.tsx b/src/pages/manager/index.tsx
index 5df8024..259ab26 100644
--- a/src/pages/manager/index.tsx
+++ b/src/pages/manager/index.tsx
@@ -28,22 +28,31 @@ export const IndexPage = () => {
           <div className={styles.list}>
             {StoreServer.natList.map((it) => {
               return (
-                <div className={classNames(styles.item, { [styles.active]: it.state === NatState.on })} key={it.id}>
+                <div
+                  className={classNames(styles.item, {
+                    [styles.active]: it.state === NatState.on,
+                    [styles.loading]: it.state === NatState.loading,
+                  })}
+                  key={it.id}
+                >
                   <div className={styles.lbox}>
                     <span className={styles.state}></span>
                     <span className={styles.name}>
                       {it.port}
                       {it.subdomain ? ` - ${it.subdomain}` : ''}
                     </span>
-                    <span className={styles.url}>{it.url}</span>
+                    <span
+                      className={styles.url}
+                      onClick={() => {
+                        utools.shellOpenExternal(it.url!)
+                      }}
+                    >
+                      {it.url}
+                    </span>
                   </div>
 
                   <div className={styles.rbox}>
-                    <button
-                      disabled={it.state === NatState.loading}
-                      className={classNames(styles.btn, styles.del)}
-                      onClick={() => StoreServer.del(it.id)}
-                    >
+                    <button className={classNames(styles.btn, styles.del)} onClick={() => StoreServer.del(it.id)}>
                       删除
                     </button>
                     <button
@@ -71,7 +80,7 @@ export const IndexPage = () => {
                       className={styles.btn}
                       onClick={() => StoreServer.toggle(it.id)}
                     >
-                      {it.state === NatState.on ? '关闭服务' : '启动服务'}
+                      {it.state === NatState.off ? '启动服务' : '关闭服务'}
                     </button>
                   </div>
                 </div>
diff --git a/src/store/server.ts b/src/store/server.ts
index f4c74c6..38d355c 100644
--- a/src/store/server.ts
+++ b/src/store/server.ts
@@ -1,5 +1,5 @@
 import localtunnel from 'localtunnel'
-import { makeAutoObservable, toJS } from 'mobx'
+import { makeAutoObservable } from 'mobx'
 import { openAlert } from 'src/components/alert'
 import { openHelp } from 'src/components/help'
 import { openNatEdit } from 'src/components/nat-edit'
@@ -23,6 +23,9 @@ class Store {
     utools.onPluginEnter(this.onPluginEnter)
     utools.onPluginReady(() => {
       this.loadDb()
+      if (this.natList.length === 0) {
+        openHelp()
+      }
     })
   }
 
@@ -46,12 +49,14 @@ class Store {
     const nat = this.getNatById(id)
     if (nat.state === NatState.loading) return
     nat.state = NatState.loading
+    nat.logs.push('启动中')
     nat.tunnel = await window.localtunnel({
       port: nat.port,
       subdomain: nat.subdomain,
     })
     nat.url = nat.tunnel.url
     nat.state = NatState.on
+    nat.logs.push('启动成功')
 
     const onRequest = (req: any) => {
       nat.logs.push(`${req.method} ${req.path}`)
@@ -68,6 +73,7 @@ class Store {
       nat.state = NatState.off
       nat.tunnel = undefined
       nat.url = ''
+      nat.logs.push('已关闭')
     })
     nat.tunnel?.on('error', onError)
     nat.tunnel?.on('request', onRequest)
@@ -81,7 +87,7 @@ class Store {
 
   async stop(id: number) {
     const nat = this.getNatById(id)
-    if (nat.state !== NatState.on || nat.tunnel === undefined) return
+    if (nat.state === NatState.off) return
 
     return new Promise<void>((ok) => {
       nat.tunnel?.once('close', () => {
@@ -128,7 +134,7 @@ class Store {
 
   toggle = async (id: number) => {
     const nat = this.getNatById(id)
-    if (nat.state === NatState.on) {
+    if (nat.state === NatState.on || nat.state === NatState.loading) {
       await this.stop(nat.id)
     } else {
       await this.start(nat.id)
diff --git a/assets/logo.png b/utools/assets/logo.png
similarity index 100%
rename from assets/logo.png
rename to utools/assets/logo.png
diff --git a/plugin.json b/utools/plugin.json
similarity index 78%
rename from plugin.json
rename to utools/plugin.json
index 0f5c5dd..4ec8294 100644
--- a/plugin.json
+++ b/utools/plugin.json
@@ -2,9 +2,9 @@
   "pluginName": "Live Server",
   "description": "启动静态资源实时服务，静态页面开发神器。",
   "author": "lblblong",
-  "homepage": "https://github.com/lblblong/live-server-utools",
+  "homepage": "https://github.com/lblblong/nat-utools",
   "main": "./build/index.html",
-  "preload": "./build-preload/index.js",
+  "preload": "./index.js",
   "version": "0.0.1",
   "logo": "assets/logo.png",
   "platform": ["win32"],