diff --git a/CHANGELOG b/CHANGELOG
index 0f744e76..53c0db1e 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -4,4 +4,15 @@
 
 DB changes
 
-- db/2024-01-13-path.sql
+- `db/2024-01-13-patch.sql`
+
+## 2024-04-03
+
+DB changes
+
+- `db/2024-04-03-patch.sql`
+
+Changes:
+
+- add delete account
+- add admin panel search
diff --git a/README.md b/README.md
index 5bc0b55c..37b573e4 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,9 @@
 
 ## [English](README_EN.md)
 
-- [Backend](https://temp-email-api.dreamhunter2333.xyz/):
+[CHANGELOG](CHANGELOG)
+
+[Backend](https://temp-email-api.dreamhunter2333.xyz/)
 ![](https://uptime.aks.awsl.icu/api/badge/10/status)
 ![](https://uptime.aks.awsl.icu/api/badge/10/uptime)
 ![](https://uptime.aks.awsl.icu/api/badge/10/ping)
@@ -10,7 +12,7 @@
 ![](https://uptime.aks.awsl.icu/api/badge/10/cert-exp)
 ![](https://uptime.aks.awsl.icu/api/badge/10/response)
 
-- [Frontend](https://temp-email.dreamhunter2333.xyz/):
+[Frontend](https://temp-email.dreamhunter2333.xyz/)
 ![](https://uptime.aks.awsl.icu/api/badge/12/status)
 ![](https://uptime.aks.awsl.icu/api/badge/12/uptime)
 ![](https://uptime.aks.awsl.icu/api/badge/12/ping)
@@ -98,7 +100,8 @@ git clone https://github.com/dreamhunter2333/cloudflare_temp_email.git
 wrangler d1 create dev
 wrangler d1 execute dev --file=db/schema.sql
 # schema 更新，如果你在此日期之前初始化过数据库，可以执行此命令更新
-# wrangler d1 execute dev --file=db/2024-01-13-path.sql
+# wrangler d1 execute dev --file=db/2024-01-13-patch.sql
+# wrangler d1 execute dev --file=db/2024-04-03-patch.sql
 ```
 
 创建完成后，我们在 cloudflare 的控制台可以看到 D1 数据库
diff --git a/README_EN.md b/README_EN.md
index 0783a0da..d52158bc 100644
--- a/README_EN.md
+++ b/README_EN.md
@@ -2,6 +2,8 @@
 
 ## [中文](README.md)
 
+[CHANGELOG](CHANGELOG)
+
 ## [Live Demo](https://temp-email.dreamhunter2333.xyz/)
 
 This is a temporary email service that uses Cloudflare Workers to create a temporary email address and view the received email in web browser.
@@ -33,7 +35,8 @@ This is a temporary email service that uses Cloudflare Workers to create a tempo
 wrangler d1 create dev
 wrangler d1 execute dev --file=db/schema.sql
 # schema update, if you have initialized the database before this date, you can execute this command to update
-# wrangler d1 execute dev --file=db/2024-01-13-path.sql
+# wrangler d1 execute dev --file=db/2024-01-13-patch.sql
+# wrangler d1 execute dev --file=db/2024-04-03-patch.sql
 ```
 
 ![d1](readme_assets/d1.png)
diff --git a/db/2024-01-13-path.sql b/db/2024-01-13-patch.sql
similarity index 100%
rename from db/2024-01-13-path.sql
rename to db/2024-01-13-patch.sql
diff --git a/db/2024-04-03-patch.sql b/db/2024-04-03-patch.sql
new file mode 100644
index 00000000..d79c5aef
--- /dev/null
+++ b/db/2024-04-03-patch.sql
@@ -0,0 +1,4 @@
+ALTER TABLE
+    address
+ADD
+    updated_at DATETIME;
diff --git a/db/schema.sql b/db/schema.sql
index 2e415b61..5b70df5f 100644
--- a/db/schema.sql
+++ b/db/schema.sql
@@ -11,7 +11,8 @@ CREATE TABLE IF NOT EXISTS mails (
 CREATE TABLE IF NOT EXISTS address (
     id INTEGER PRIMARY KEY,
     name TEXT UNIQUE,
-    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
 );
 
 CREATE TABLE IF NOT EXISTS auto_reply_mails (
diff --git a/frontend/package.json b/frontend/package.json
index ffb6608d..ca6ec184 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,8 @@
   "devDependencies": {
     "@vicons/fa": "^0.12.0",
     "@vitejs/plugin-vue": "^4.6.2",
+    "unplugin-auto-import": "^0.17.5",
+    "unplugin-vue-components": "^0.26.0",
     "vite": "^5.2.6",
     "vite-plugin-pwa": "^0.19.7",
     "workbox-window": "^7.0.0"
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 626a20e9..2a526ee1 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -40,6 +40,12 @@ devDependencies:
   '@vitejs/plugin-vue':
     specifier: ^4.6.2
     version: 4.6.2(vite@5.2.6)(vue@3.4.21)
+  unplugin-auto-import:
+    specifier: ^0.17.5
+    version: 0.17.5(@vueuse/core@10.9.0)(rollup@2.79.1)
+  unplugin-vue-components:
+    specifier: ^0.26.0
+    version: 0.26.0(rollup@2.79.1)(vue@3.4.21)
   vite:
     specifier: ^5.2.6
     version: 5.2.6
@@ -60,6 +66,10 @@ packages:
       '@jridgewell/trace-mapping': 0.3.25
     dev: true
 
+  /@antfu/utils@0.7.7:
+    resolution: {integrity: sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==}
+    dev: true
+
   /@apideck/better-ajv-errors@0.3.6(ajv@8.12.0):
     resolution: {integrity: sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==}
     engines: {node: '>=10'}
@@ -1595,6 +1605,21 @@ packages:
       rollup: 2.79.1
     dev: true
 
+  /@rollup/pluginutils@5.1.0(rollup@2.79.1):
+    resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.5
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+      rollup: 2.79.1
+    dev: true
+
   /@rollup/rollup-android-arm-eabi@4.13.1:
     resolution: {integrity: sha512-4C4UERETjXpC4WpBXDbkgNVgHyWfG3B/NKY46e7w5H134UDOFqUJKpsLm0UYmuupW+aJmRgeScrDNfvZ5WV80A==}
     cpu: [arm]
@@ -1756,7 +1781,6 @@ packages:
 
   /@types/web-bluetooth@0.0.20:
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
-    dev: false
 
   /@vicons/fa@0.12.0:
     resolution: {integrity: sha512-g2PIeJLsTHUjt6bK63LxqC0uYQB7iu+xViJOxvp1s8b9/akpXVPVWjDTTsP980/0KYyMMe4U7F/aUo7wY+MsXA==}
@@ -1855,11 +1879,9 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
-    dev: false
 
   /@vueuse/metadata@10.9.0:
     resolution: {integrity: sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==}
-    dev: false
 
   /@vueuse/shared@10.9.0(vue@3.4.21):
     resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==}
@@ -1868,7 +1890,6 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
-    dev: false
 
   /acorn@8.11.3:
     resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
@@ -1899,6 +1920,14 @@ packages:
       color-convert: 2.0.1
     dev: true
 
+  /anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+    dev: true
+
   /array-buffer-byte-length@1.0.1:
     resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==}
     engines: {node: '>= 0.4'}
@@ -1995,6 +2024,11 @@ packages:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
 
+  /binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+    dev: true
+
   /brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
     dependencies:
@@ -2067,6 +2101,21 @@ packages:
       supports-color: 7.2.0
     dev: true
 
+  /chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.2
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
   /clipboard@2.0.11:
     resolution: {integrity: sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==}
     dependencies:
@@ -2377,6 +2426,11 @@ packages:
     engines: {node: '>=0.8.0'}
     dev: true
 
+  /escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+    dev: true
+
   /estree-walker@1.0.1:
     resolution: {integrity: sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==}
     dev: true
@@ -2384,6 +2438,12 @@ packages:
   /estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
+  /estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+    dependencies:
+      '@types/estree': 1.0.5
+    dev: true
+
   /esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
@@ -2658,6 +2718,13 @@ packages:
       has-bigints: 1.0.2
     dev: true
 
+  /is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+    dependencies:
+      binary-extensions: 2.3.0
+    dev: true
+
   /is-boolean-object@1.1.2:
     resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
     engines: {node: '>= 0.4'}
@@ -2834,6 +2901,10 @@ packages:
     hasBin: true
     dev: true
 
+  /jsonc-parser@3.2.1:
+    resolution: {integrity: sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==}
+    dev: true
+
   /jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
     dependencies:
@@ -2852,6 +2923,19 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /local-pkg@0.4.3:
+    resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /local-pkg@0.5.0:
+    resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
+    engines: {node: '>=14'}
+    dependencies:
+      mlly: 1.6.1
+      pkg-types: 1.0.3
+    dev: true
+
   /lodash-es@4.17.21:
     resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
     dev: false
@@ -2927,6 +3011,22 @@ packages:
       brace-expansion: 2.0.1
     dev: true
 
+  /minimatch@9.0.4:
+    resolution: {integrity: sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
+  /mlly@1.6.1:
+    resolution: {integrity: sha512-vLgaHvaeunuOXHSmEbZ9izxPx3USsk8KCQ8iC+aTlp5sKRSoZvwhHh5L9VbKSaVC6sJDqbyohIS76E2VmHIPAA==}
+    dependencies:
+      acorn: 8.11.3
+      pathe: 1.1.2
+      pkg-types: 1.0.3
+      ufo: 1.5.3
+    dev: true
+
   /ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
     dev: true
@@ -2967,6 +3067,11 @@ packages:
     resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
     dev: true
 
+  /normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /object-inspect@1.13.1:
     resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
     dev: true
@@ -3001,6 +3106,10 @@ packages:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
     dev: true
 
+  /pathe@1.1.2:
+    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
+    dev: true
+
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
@@ -3009,6 +3118,14 @@ packages:
     engines: {node: '>=8.6'}
     dev: true
 
+  /pkg-types@1.0.3:
+    resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
+    dependencies:
+      jsonc-parser: 3.2.1
+      mlly: 1.6.1
+      pathe: 1.1.2
+    dev: true
+
   /possible-typed-array-names@1.0.0:
     resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
     engines: {node: '>= 0.4'}
@@ -3051,6 +3168,13 @@ packages:
       safe-buffer: 5.2.1
     dev: true
 
+  /readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      picomatch: 2.3.1
+    dev: true
+
   /regenerate-unicode-properties@10.1.1:
     resolution: {integrity: sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==}
     engines: {node: '>=4'}
@@ -3193,6 +3317,10 @@ packages:
       is-regex: 1.1.4
     dev: true
 
+  /scule@1.3.0:
+    resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
+    dev: true
+
   /seemly@0.3.8:
     resolution: {integrity: sha512-MW8Qs6vbzo0pHmDpFSYPna+lwpZ6Zk1ancbajw/7E8TKtHdV+1DfZZD+kKJEhG/cAoB/i+LiT+5msZOqj0DwRA==}
     dev: false
@@ -3331,6 +3459,12 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /strip-literal@1.3.0:
+    resolution: {integrity: sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==}
+    dependencies:
+      acorn: 8.11.3
+    dev: true
+
   /supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -3450,6 +3584,10 @@ packages:
       possible-typed-array-names: 1.0.0
     dev: true
 
+  /ufo@1.5.3:
+    resolution: {integrity: sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==}
+    dev: true
+
   /unbox-primitive@1.0.2:
     resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
     dependencies:
@@ -3486,6 +3624,26 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /unimport@3.7.1(rollup@2.79.1):
+    resolution: {integrity: sha512-V9HpXYfsZye5bPPYUgs0Otn3ODS1mDUciaBlXljI4C2fTwfFpvFZRywmlOu943puN9sncxROMZhsZCjNXEpzEQ==}
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@2.79.1)
+      acorn: 8.11.3
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      fast-glob: 3.3.2
+      local-pkg: 0.5.0
+      magic-string: 0.30.8
+      mlly: 1.6.1
+      pathe: 1.1.2
+      pkg-types: 1.0.3
+      scule: 1.3.0
+      strip-literal: 1.3.0
+      unplugin: 1.10.1
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
   /unique-string@2.0.0:
     resolution: {integrity: sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==}
     engines: {node: '>=8'}
@@ -3498,6 +3656,70 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
+  /unplugin-auto-import@0.17.5(@vueuse/core@10.9.0)(rollup@2.79.1):
+    resolution: {integrity: sha512-fHNDkDSxv3PGagX1wmKBYBkgaM4AKAgZmdJw/bxjhNljx9KSXSgHpGfX0MwUrq9qw6q1bhHIZVWyOwoY2koo4w==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@nuxt/kit': ^3.2.2
+      '@vueuse/core': '*'
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+      '@vueuse/core':
+        optional: true
+    dependencies:
+      '@antfu/utils': 0.7.7
+      '@rollup/pluginutils': 5.1.0(rollup@2.79.1)
+      '@vueuse/core': 10.9.0(vue@3.4.21)
+      fast-glob: 3.3.2
+      local-pkg: 0.5.0
+      magic-string: 0.30.8
+      minimatch: 9.0.4
+      unimport: 3.7.1(rollup@2.79.1)
+      unplugin: 1.10.1
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
+  /unplugin-vue-components@0.26.0(rollup@2.79.1)(vue@3.4.21):
+    resolution: {integrity: sha512-s7IdPDlnOvPamjunVxw8kNgKNK8A5KM1YpK5j/p97jEKTjlPNrA0nZBiSfAKKlK1gWZuyWXlKL5dk3EDw874LQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/parser': ^7.15.8
+      '@nuxt/kit': ^3.2.2
+      vue: 2 || 3
+    peerDependenciesMeta:
+      '@babel/parser':
+        optional: true
+      '@nuxt/kit':
+        optional: true
+    dependencies:
+      '@antfu/utils': 0.7.7
+      '@rollup/pluginutils': 5.1.0(rollup@2.79.1)
+      chokidar: 3.6.0
+      debug: 4.3.4
+      fast-glob: 3.3.2
+      local-pkg: 0.4.3
+      magic-string: 0.30.8
+      minimatch: 9.0.4
+      resolve: 1.22.8
+      unplugin: 1.10.1
+      vue: 3.4.21
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    dev: true
+
+  /unplugin@1.10.1:
+    resolution: {integrity: sha512-d6Mhq8RJeGA8UfKCu54Um4lFA0eSaRa3XxdAJg8tIdxbu1ubW0hBCZUL7yI2uGyYCRndvbK8FLHzqy2XKfeMsg==}
+    engines: {node: '>=14.0.0'}
+    dependencies:
+      acorn: 8.11.3
+      chokidar: 3.6.0
+      webpack-sources: 3.2.3
+      webpack-virtual-modules: 0.6.1
+    dev: true
+
   /upath@1.2.0:
     resolution: {integrity: sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==}
     engines: {node: '>=4'}
@@ -3614,7 +3836,6 @@ packages:
         optional: true
     dependencies:
       vue: 3.4.21
-    dev: false
 
   /vue-i18n@9.10.2(vue@3.4.21):
     resolution: {integrity: sha512-ECJ8RIFd+3c1d3m1pctQ6ywG5Yj8Efy1oYoAKQ9neRdkLbuKLVeW4gaY5HPkD/9ssf1pOnUrmIFjx2/gkGxmEw==}
@@ -3670,6 +3891,15 @@ packages:
     resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
     dev: true
 
+  /webpack-sources@3.2.3:
+    resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
+    engines: {node: '>=10.13.0'}
+    dev: true
+
+  /webpack-virtual-modules@0.6.1:
+    resolution: {integrity: sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==}
+    dev: true
+
   /whatwg-url@7.1.0:
     resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
     dependencies:
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index f56c8733..afd926b4 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,12 +1,11 @@
 <script setup>
-import { NMessageProvider, NGrid, NBackTop, NSpin } from 'naive-ui'
-import { NGi, NSpace, NButton, NConfigProvider } from 'naive-ui'
 import { darkTheme, NGlobalStyle } from 'naive-ui'
 import { zhCN } from 'naive-ui'
 import { computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useGlobalState } from './store'
 import { useIsMobile } from './utils/composables'
+import Header from './views/Header.vue';
 
 const { localeCache, themeSwitch, loading } = useGlobalState()
 const theme = computed(() => themeSwitch.value ? darkTheme : null)
@@ -42,7 +41,10 @@ onMounted(async () => {
           <n-gi v-if="!isMobile" span="1"></n-gi>
           <n-gi :span="isMobile ? 12 : 10">
             <div class="main">
-              <router-view></router-view>
+              <n-space vertical>
+                <Header />
+                <router-view></router-view>
+              </n-space>
             </div>
           </n-gi>
           <n-gi v-if="!isMobile" span="1"></n-gi>
diff --git a/frontend/src/api/index.js b/frontend/src/api/index.js
index 91e5bdec..02fe0da8 100644
--- a/frontend/src/api/index.js
+++ b/frontend/src/api/index.js
@@ -36,6 +36,11 @@ const apiFetch = async (path, options = {}) => {
         }
         const data = response.data;
         return data;
+    } catch (error) {
+        if (error.response) {
+            throw new Error(`Code ${error.response.status}: ${error.response.data}` || "error");
+        }
+        throw error;
     } finally {
         loading.value = false;
     }
diff --git a/frontend/src/views/Admin.vue b/frontend/src/views/Admin.vue
index 8aeea8a9..16957c90 100644
--- a/frontend/src/views/Admin.vue
+++ b/frontend/src/views/Admin.vue
@@ -1,12 +1,8 @@
 <script setup>
-import { NSpace, NLayoutHeader, NInput, NPagination } from 'naive-ui'
-import { NButton, NModal, NTabs, NTabPane, NInputGroup } from 'naive-ui'
-import { NList, NListItem, NThing, NTag } from 'naive-ui'
-import { NDataTable, NPopconfirm } from 'naive-ui'
 import { ref, h, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-import { useMessage } from 'naive-ui'
+import { User, UserCheck, MailBulk } from '@vicons/fa'
 
 import { useGlobalState } from '../store'
 import { api } from '../api'
@@ -17,6 +13,7 @@ const message = useMessage()
 
 const showEmailPassword = ref(false)
 const curEmailPassword = ref("")
+const addressQuery = ref("")
 
 const authFunc = async () => {
   try {
@@ -42,9 +39,15 @@ const { t } = useI18n({
       delete: 'Delete',
       deleteTip: 'Are you sure to delete this email?',
       refresh: 'Refresh',
-      emails: 'Emails',
+      mails: 'Emails',
       itemCount: 'itemCount',
       query: 'Query',
+      userCount: 'User Count',
+      activeUser: '7 days Active User',
+      mailCount: 'Mail Count',
+      account: 'Account',
+      unknow: 'Unknow',
+      addressQueryTip: 'Leave blank to query all addresses',
     },
     zh: {
       title: '临时邮件 Admin',
@@ -59,9 +62,15 @@ const { t } = useI18n({
       delete: '删除',
       deleteTip: '确定要删除这个邮箱吗？',
       refresh: '刷新',
-      emails: '邮件',
+      mails: '邮件',
       itemCount: '总数',
       query: '查询',
+      userCount: '用户总数',
+      activeUser: '周活跃用户',
+      mailCount: '邮件总数',
+      account: '账号',
+      unknow: '未知',
+      addressQueryTip: '留空查询所有地址',
     }
   }
 });
@@ -97,6 +106,7 @@ const fetchData = async () => {
       `/admin/address`
       + `?limit=${pageSize.value}`
       + `&offset=${(page.value - 1) * pageSize.value}`
+      + (addressQuery.value ? `&query=${addressQuery.value}` : "")
     );
     data.value = results;
     if (addressCount > 0) {
@@ -129,6 +139,7 @@ const columns = [
         h(NButton,
           {
             type: 'success',
+            ghost: true,
             onClick: () => showPassword(row.id)
           },
           { default: () => t('showPass') }
@@ -136,12 +147,13 @@ const columns = [
         h(NButton,
           {
             type: 'success',
+            ghost: true,
             onClick: () => {
               mailAddress.value = row.name
               tab.value = "mails"
             }
           },
-          { default: () => t('emails') }
+          { default: () => t('mails') }
         ),
         h(NPopconfirm,
           {
@@ -161,12 +173,30 @@ watch([page, pageSize], async () => {
   await fetchData()
 })
 
+const statistics = ref({
+  userCount: 0,
+  mailCount: 0,
+  activeUserCount7days: 0,
+})
+
+const fetchStatistics = async () => {
+  try {
+    const { userCount, activeUserCount7days, mailCount } = await api.fetch(`/admin/statistics`);
+    statistics.value.mailCount = mailCount || 0;
+    statistics.value.userCount = userCount || 0;
+    statistics.value.activeUserCount7days = activeUserCount7days || 0;
+  } catch (error) {
+    console.log(error)
+    message.error(error.message || "error");
+  }
+}
 
 onMounted(async () => {
   if (!adminAuth.value) {
     showAdminAuth.value = true
   } else {
     await fetchData()
+    await fetchStatistics()
   }
 })
 
@@ -231,47 +261,66 @@ const fetchMailUnknowData = async () => {
 </script>
 
 <template>
-  <n-space vertical>
-    <n-layout-header>
-      <div>
-        <h2>{{ t('title') }}</h2>
-      </div>
-      <div>
-        <n-button tertiary @click="() => router.push('/')" type="primary">
-          {{ t('home') }}
+  <div>
+    <n-modal v-model:show="showAdminAuth" :closable="false" :closeOnEsc="false" :maskClosable="false" preset="dialog"
+      title="Dialog">
+      <template #header>
+        <div>{{ t('auth') }}</div>
+      </template>
+      <p>{{ t('authTip') }}</p>
+      <n-input v-model:value="adminAuth" type="textarea" :autosize="{
+      minRows: 3
+    }" />
+      <template #action>
+        <n-button @click="authFunc" size="small" tertiary round type="primary">
+          {{ t('auth') }}
         </n-button>
-      </div>
-      <n-modal v-model:show="showAdminAuth" :closable="false" :closeOnEsc="false" :maskClosable="false" preset="dialog"
-        title="Dialog">
-        <template #header>
-          <div>{{ t('auth') }}</div>
-        </template>
-        <p>{{ t('authTip') }}</p>
-        <n-input v-model:value="adminAuth" type="textarea" :autosize="{
-          minRows: 3
-        }" />
-        <template #action>
-          <n-button @click="authFunc" size="small" tertiary round type="primary">
-            {{ t('auth') }}
-          </n-button>
-        </template>
-      </n-modal>
-      <n-modal v-model:show="showEmailPassword" preset="dialog" title="Dialog">
-        <template #header>
-          <div>{{ t("password") }}</div>
-        </template>
-        <span>
-          <p>{{ t("passwordTip") }}</p>
-        </span>
-        <n-card>
-          <b>{{ curEmailPassword }}</b>
-        </n-card>
-        <template #action>
-        </template>
-      </n-modal>
-    </n-layout-header>
+      </template>
+    </n-modal>
+    <n-modal v-model:show="showEmailPassword" preset="dialog" title="Dialog">
+      <template #header>
+        <div>{{ t("password") }}</div>
+      </template>
+      <span>
+        <p>{{ t("passwordTip") }}</p>
+      </span>
+      <n-card>
+        <b>{{ curEmailPassword }}</b>
+      </n-card>
+      <template #action>
+      </template>
+    </n-modal>
+    <n-row>
+      <n-col :span="8">
+        <n-statistic :label="t('userCount')" :value="statistics.userCount">
+          <template #prefix>
+            <n-icon :component="User" />
+          </template>
+        </n-statistic>
+      </n-col>
+      <n-col :span="8">
+        <n-statistic :label="t('activeUser')" :value="statistics.activeUserCount7days">
+          <template #prefix>
+            <n-icon :component="UserCheck" />
+          </template>
+        </n-statistic>
+      </n-col>
+      <n-col :span="8">
+        <n-statistic :label="t('mailCount')" :value="statistics.mailCount">
+          <template #prefix>
+            <n-icon :component="MailBulk" />
+          </template>
+        </n-statistic>
+      </n-col>
+    </n-row>
     <n-tabs type="segment" v-model:value="tab">
-      <n-tab-pane name="account" tab="account">
+      <n-tab-pane name="account" :tab="t('account')">
+        <n-input-group>
+          <n-input v-model:value="addressQuery" clearable :placeholder="t('addressQueryTip')" />
+          <n-button @click="fetchData" type="primary" ghost>
+            {{ t('query') }}
+          </n-button>
+        </n-input-group>
         <div style="display: inline-block;">
           <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" :page-sizes="[20, 50, 100]"
             show-size-picker>
@@ -280,16 +329,13 @@ const fetchMailUnknowData = async () => {
             </template>
           </n-pagination>
         </div>
-        <n-button tertiary @click="fetchData" type="primary">
-          {{ t('refresh') }}
-        </n-button>
         <n-data-table :columns="columns" :data="data" :bordered="false" />
       </n-tab-pane>
-      <n-tab-pane name="mails" tab="mails">
+      <n-tab-pane name="mails" :tab="t('mails')">
         <n-input-group>
           <n-input v-model:value="mailAddress" />
           <n-button @click="fetchMailData" type="primary" ghost>
-            {{ t('refresh') }}
+            {{ t('query') }}
           </n-button>
         </n-input-group>
         <n-list hoverable clickable>
@@ -317,7 +363,7 @@ const fetchMailUnknowData = async () => {
           </n-list-item>
         </n-list>
       </n-tab-pane>
-      <n-tab-pane name="unknow" tab="unknown">
+      <n-tab-pane name="unknow" :tab="t('unknow')">
         <n-button @click="fetchMailUnknowData" type="primary" ghost>
           {{ t('query') }}
         </n-button>
@@ -348,16 +394,10 @@ const fetchMailUnknowData = async () => {
         </n-list>
       </n-tab-pane>
     </n-tabs>
-  </n-space>
+  </div>
 </template>
 
 <style scoped>
-.n-layout-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
 .n-pagination {
   margin-top: 10px;
   margin-bottom: 10px;
diff --git a/frontend/src/views/Content.vue b/frontend/src/views/Content.vue
deleted file mode 100644
index 598feba0..00000000
--- a/frontend/src/views/Content.vue
+++ /dev/null
@@ -1,308 +0,0 @@
-<script setup>
-import { NSpace, NAlert, NSwitch, NCard, NInput, NInputGroupLabel } from 'naive-ui'
-import { NButton, NLayout, NInputGroup, NModal, NSelect, NPagination } from 'naive-ui'
-import { NList, NListItem, NThing, NTag, NIcon, NSplit, NResult } from 'naive-ui'
-import { NDrawer, NDrawerContent } from 'naive-ui'
-import { watch, onMounted, ref } from "vue";
-import { useMessage } from 'naive-ui'
-import { useI18n } from 'vue-i18n'
-import { useGlobalState } from '../store'
-import { api } from '../api'
-import { CloudDownloadRound } from '@vicons/material'
-import { useIsMobile } from '../utils/composables'
-
-const message = useMessage()
-const isMobile = useIsMobile()
-
-const { settings, themeSwitch } = useGlobalState()
-const autoRefresh = ref(false)
-const data = ref([])
-const timer = ref(null)
-
-const count = ref(0)
-const page = ref(1)
-const pageSize = ref(20)
-
-const showAttachments = ref(false)
-const curAttachments = ref([])
-const curMail = ref(null);
-
-const { t } = useI18n({
-  locale: 'zh',
-  messages: {
-    en: {
-      autoRefresh: 'Auto Refresh',
-      refresh: 'Refresh',
-      attachments: 'Show Attachments',
-      pleaseSelectMail: "Please select a mail to view."
-    },
-    zh: {
-      autoRefresh: '自动刷新',
-      refresh: '刷新',
-      attachments: '查看附件',
-      pleaseSelectMail: "请选择一封邮件查看。"
-    }
-  }
-});
-
-const setupAutoRefresh = async (autoRefresh) => {
-  if (autoRefresh) {
-    timer.value = setInterval(async () => {
-      await refresh();
-    }, 30000)
-  } else {
-    clearInterval(timer.value)
-    timer.value = null
-  }
-}
-
-watch(autoRefresh, async (autoRefresh, old) => {
-  setupAutoRefresh(autoRefresh)
-})
-
-watch([page, pageSize], async ([page, pageSize], [oldPage, oldPageSize]) => {
-  if (page !== oldPage || pageSize !== oldPageSize) {
-    await refresh();
-  }
-})
-
-const refresh = async () => {
-  if (typeof settings.value.address != 'string' || settings.value.address.trim() === '') {
-    return;
-  }
-  try {
-    const { results, count: totalCount } = await api.fetch(
-      `/api/mails`
-      + `?limit=${pageSize.value}`
-      + `&offset=${(page.value - 1) * pageSize.value}`
-    );
-    data.value = results;
-    if (totalCount > 0) {
-      count.value = totalCount;
-    }
-    if (!isMobile.value && !curMail.value && data.value.length > 0) {
-      curMail.value = results[0];
-    }
-  } catch (error) {
-    message.error(error.message || "error");
-    console.error(error);
-  }
-};
-
-const clickRow = async (row) => {
-  curMail.value = row;
-};
-
-const getAttachments = async (attachment_id) => {
-  try {
-    const res = await api.fetch(
-      `/api/attachment/${attachment_id}`
-    );
-    curAttachments.value = res
-      .filter((item) => item?.content?.data)
-      .map((item) => {
-        return {
-          id: item.contentId || Math.random().toString(36).substring(2, 15),
-          filename: item.filename || "",
-          size: item.size,
-          url: URL.createObjectURL(
-            new Blob(
-              [new Uint8Array(item.content.data)],
-              { type: item.contentType || 'application/octet-stream' }
-            ))
-        }
-      });
-    showAttachments.value = true;
-  } catch (error) {
-    message.error(error.message || "error");
-  }
-};
-
-const mailItemClass = (row) => {
-  return curMail.value && row.id == curMail.value.id ? (themeSwitch.value ? 'overlay overlay-dark-backgroud' : 'overlay overlay-light-backgroud') : '';
-};
-
-onMounted(async () => {
-  await api.getSettings();
-  await refresh();
-});
-</script>
-
-<template>
-  <div>
-    <n-layout v-if="settings.address">
-      <n-split class="left" v-if="!isMobile" direction="horizontal" :max="0.75" :min="0.25" :default-size="0.25">
-        <template #1>
-          <div>
-            <div style="display: inline-block; margin-top: 10px; margin-bottom: 10px;">
-              <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" simple size="small" />
-            </div>
-            <n-switch v-model:value="autoRefresh" size="small">
-              <template #checked>
-                {{ t('autoRefresh') }}
-              </template>
-              <template #unchecked>
-                {{ t('autoRefresh') }}
-              </template></n-switch>
-            <n-button class="center" @click="refresh" size="small" type="primary">
-              {{ t('refresh') }}
-            </n-button>
-          </div>
-          <div style="overflow: scroll; height: 80vh;">
-            <n-list hoverable clickable>
-              <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)"
-                :class="mailItemClass(row)">
-                <n-thing class="center" :title="row.subject" style="overflow: scroll">
-                  <template #description>
-                    <n-tag type="info">
-                      ID: {{ row.id }}
-                    </n-tag>
-                    <n-tag type="info">
-                      {{ row.created_at }}
-                    </n-tag>
-                    <div style="word-break: break-all; font-size: small;">
-                      FROM: {{ row.source }}
-                    </div>
-                  </template>
-                </n-thing>
-              </n-list-item>
-            </n-list>
-          </div>
-        </template>
-        <template #2>
-          <n-card v-if="curMail" class="mail-item" :title="curMail.subject" style="overflow: scroll;">
-            <n-space>
-              <n-tag type="info">
-                ID: {{ curMail.id }}
-              </n-tag>
-              <n-tag type="info">
-                {{ curMail.created_at }}
-              </n-tag>
-              <n-tag type="info">
-                FROM: {{ curMail.source }}
-              </n-tag>
-              <n-button v-if="curMail.attachment_id" size="small" tertiary type="info"
-                @click="getAttachments(curMail.attachment_id)">
-                {{ t('attachments') }}
-              </n-button>
-            </n-space>
-            <div v-html="curMail.message" style="max-height: 100vh;"></div>
-          </n-card>
-          <n-card class="mail-item" v-else>
-            <n-result status="info" :title="t('pleaseSelectMail')">
-            </n-result>
-          </n-card>
-        </template>
-      </n-split>
-      <div class="left" v-else>
-        <div>
-          <div style="display: inline-block; margin-top: 10px; margin-bottom: 10px;">
-            <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" simple size="small" />
-          </div>
-          <n-switch v-model:value="autoRefresh" size="small">
-            <template #checked>
-              {{ t('autoRefresh') }}
-            </template>
-            <template #unchecked>
-              {{ t('autoRefresh') }}
-            </template></n-switch>
-          <n-button class="center" @click="refresh" size="small" type="primary">
-            {{ t('refresh') }}
-          </n-button>
-        </div>
-        <div id="drawer-target" style="overflow: scroll; max-height: 80vh;">
-          <n-list hoverable clickable>
-            <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)">
-              <n-thing class="center" :title="row.subject" style="overflow: scroll">
-                <template #description>
-                  <n-tag type="info">
-                    ID: {{ row.id }}
-                  </n-tag>
-                  <n-tag type="info">
-                    {{ row.created_at }}
-                  </n-tag>
-                  <div style="word-break: break-all; font-size: small;">
-                    FROM: {{ row.source }}
-                  </div>
-                </template>
-              </n-thing>
-            </n-list-item>
-          </n-list>
-        </div>
-        <n-drawer v-model:show="curMail" width="100%" :trap-focus="false" :block-scroll="false" to="#drawer-target">
-          <n-drawer-content :title="curMail.subject" closable>
-            <n-card style="overflow: scroll;">
-              <n-space>
-                <n-tag type="info">
-                  ID: {{ curMail.id }}
-                </n-tag>
-                <n-tag type="info">
-                  {{ curMail.created_at }}
-                </n-tag>
-                <n-tag type="info">
-                  FROM: {{ curMail.source }}
-                </n-tag>
-                <n-button v-if="curMail.attachment_id" size="small" tertiary type="info"
-                  @click="getAttachments(curMail.attachment_id)">
-                  {{ t('attachments') }}
-                </n-button>
-              </n-space>
-              <div v-html="curMail.message" style="max-height: 100vh;"></div>
-            </n-card>
-          </n-drawer-content>
-        </n-drawer>
-      </div>
-    </n-layout>
-    <n-modal v-model:show="showAttachments" preset="dialog" title="Dialog">
-      <template #header>
-        <div>{{ t("attachments") }}</div>
-      </template>
-      <n-list hoverable clickable>
-        <n-list-item v-for="row in curAttachments" v-bind:key="row.id">
-          <n-thing class="center" :title="row.filename">
-            <template #description>
-              <n-space>
-                <n-tag type="info">
-                  Size: {{ row.size }}
-                </n-tag>
-              </n-space>
-            </template>
-          </n-thing>
-          <template #suffix>
-            <n-button tag="a" target="_blank" tertiary type="info" size="small'" :download="row.filename"
-              :href="row.url">
-              <n-icon :component="CloudDownloadRound" />
-            </n-button>
-          </template>
-        </n-list-item>
-      </n-list>
-      <template #action>
-      </template>
-    </n-modal>
-  </div>
-</template>
-
-<style scoped>
-.left {
-  overflow: scroll;
-  text-align: left;
-}
-
-.overlay {
-  width: 100%;
-  height: 100%;
-  z-index: 1000;
-}
-
-.overlay-dark-backgroud {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-.overlay-light-backgroud {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-.mail-item {
-  height: 100%;
-}
-</style>
diff --git a/frontend/src/views/Header.vue b/frontend/src/views/Header.vue
index 1be84186..589e5bb5 100644
--- a/frontend/src/views/Header.vue
+++ b/frontend/src/views/Header.vue
@@ -1,15 +1,10 @@
 <script setup>
-import { NGrid, NLayoutHeader, NInput } from 'naive-ui'
-import { NButton, NSelect, NModal, NIcon, NMenu, NAlert } from 'naive-ui'
-import { NInputGroup, NInputGroupLabel, NCard, NResult } from 'naive-ui'
-import { NSwitch, NPopconfirm, NSkeleton } from 'naive-ui'
-import { useMessage } from 'naive-ui'
 import useClipboard from 'vue-clipboard3'
 import { ref, h, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { useIsMobile } from '../utils/composables'
-import { DarkModeFilled, LightModeFilled, MenuFilled } from '@vicons/material'
+import { DarkModeFilled, LightModeFilled, MenuFilled, AdminPanelSettingsFilled } from '@vicons/material'
 import { GithubAlt, Language, User, Home, Copy } from '@vicons/fa'
 
 import { useGlobalState } from '../store'
@@ -19,11 +14,14 @@ const message = useMessage()
 
 const { jwt, localeCache, themeSwitch, showAuth, adminAuth, auth } = useGlobalState()
 const { showLogin, openSettings, settings } = useGlobalState()
+const route = useRoute()
 const router = useRouter()
 const isMobile = useIsMobile()
+const isAdminRoute = computed(() => route.path.includes('admin'))
 
 const showNewEmail = ref(false)
 const showLogout = ref(false)
+const showDelteAccount = ref(false)
 const password = ref('')
 const showPassword = ref(false)
 const emailName = ref("")
@@ -67,6 +65,8 @@ const { t } = useI18n({
             login: 'Login',
             logout: 'Logout',
             logoutConfirm: 'Are you sure to logout?',
+            delteAccount: "Delete Account",
+            delteAccountConfirm: "Are you sure to delete your account and all emails for this account?",
             auth: 'Auth',
             authTip: 'Please enter the correct auth code',
             settings: 'Settings',
@@ -93,6 +93,8 @@ const { t } = useI18n({
             login: '登录',
             logout: '登出',
             logoutConfirm: '确定要登出吗？',
+            delteAccount: "删除账户",
+            delteAccountConfirm: "确定要删除你的账户和其中的所有邮件吗?",
             auth: '授权',
             authTip: '请输入正确的授权码',
             settings: '设置',
@@ -116,6 +118,7 @@ const { t } = useI18n({
     }
 });
 
+const showUserMenu = computed(() => !!settings.value.address)
 
 const menuOptions = computed(() => [
     {
@@ -143,7 +146,10 @@ const menuOptions = computed(() => [
                 size: "small",
                 onClick: () => router.push('/admin')
             },
-            { default: () => "Admin" }
+            {
+                default: () => "Admin",
+                icon: () => h(NIcon, { component: AdminPanelSettingsFilled }),
+            }
         ),
         show: !!adminAuth.value,
         key: "admin"
@@ -161,7 +167,7 @@ const menuOptions = computed(() => [
                 icon: () => h(NIcon, { component: User }),
             }
         ),
-        show: !!jwt.value,
+        show: showUserMenu.value,
         key: "user",
         children: [
             {
@@ -202,6 +208,19 @@ const menuOptions = computed(() => [
                     { default: () => t('logout') }
                 ),
                 key: "logout"
+            },
+            {
+                label: () => h(
+                    NButton,
+                    {
+                        tertiary: true,
+                        ghost: true,
+                        size: "small",
+                        onClick: () => { showDelteAccount.value = true }
+                    },
+                    { default: () => t('delteAccount') }
+                ),
+                key: "delte_account"
             }
         ]
     },
@@ -261,7 +280,7 @@ const menuOptions = computed(() => [
     }
 ]);
 
-const menuOptionsMobile = [
+const menuOptionsMobile = computed(() => [
     {
         label: t('menu'),
         icon: () => h(
@@ -273,7 +292,7 @@ const menuOptionsMobile = [
         key: "menu",
         children: menuOptions.value
     },
-];
+]);
 
 
 const copy = async () => {
@@ -301,6 +320,18 @@ const newEmail = async () => {
     }
 };
 
+const deleteAccount = async () => {
+    try {
+        await api.fetch(`/api/delete_address`, {
+            method: 'DELETE'
+        });
+        jwt.value = '';
+        location.reload()
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+};
+
 onMounted(async () => {
     await api.getOpenSettings(message);
     emailDomain.value = openSettings.value.domains ? openSettings.value.domains[0].value : "";
@@ -316,32 +347,34 @@ onMounted(async () => {
                 <n-menu v-else mode="horizontal" :options="menuOptionsMobile" />
             </div>
         </n-layout-header>
-        <n-card v-if="!settings.fetched">
-            <n-skeleton style="height: 50vh" />
-        </n-card>
-        <n-alert v-else-if="settings.address" type="info" show-icon>
-            <span>
-                <b>{{ t('yourAddress') }} <b>{{ settings.address }}</b></b>
-                <n-button style="margin-left: 10px" @click="copy" size="small" tertiary round type="primary">
-                    <n-icon :component="Copy" /> {{ t('copy') }}
-                </n-button>
-            </span>
-        </n-alert>
-        <n-card v-else>
-            <n-result status="info" :description="t('pleaseGetNewEmail')">
-                <template #footer>
-                    <n-alert v-if="jwt" type="warning" show-icon>
-                        <span>{{ t('fetchAddressError') }}</span>
-                    </n-alert>
-                    <n-button @click="showLogin = true" tertiary round type="primary">
-                        {{ t('login') }}
+        <div v-if="!isAdminRoute">
+            <n-card v-if="!settings.fetched">
+                <n-skeleton style="height: 50vh" />
+            </n-card>
+            <n-alert v-else-if="settings.address" type="info" show-icon>
+                <span>
+                    <b>{{ t('yourAddress') }} <b>{{ settings.address }}</b></b>
+                    <n-button style="margin-left: 10px" @click="copy" size="small" tertiary round type="primary">
+                        <n-icon :component="Copy" /> {{ t('copy') }}
                     </n-button>
-                    <n-button @click="showNewEmail = true" tertiary round type="primary">
-                        {{ t('getNewEmail') }}
-                    </n-button>
-                </template>
-            </n-result>
-        </n-card>
+                </span>
+            </n-alert>
+            <n-card v-else>
+                <n-result status="info" :description="t('pleaseGetNewEmail')">
+                    <template #footer>
+                        <n-alert v-if="jwt" type="warning" show-icon>
+                            <span>{{ t('fetchAddressError') }}</span>
+                        </n-alert>
+                        <n-button @click="showLogin = true" tertiary round type="primary">
+                            {{ t('login') }}
+                        </n-button>
+                        <n-button @click="showNewEmail = true" tertiary round type="primary">
+                            {{ t('getNewEmail') }}
+                        </n-button>
+                    </template>
+                </n-result>
+            </n-card>
+        </div>
         <n-modal v-model:show="showNewEmail" preset="dialog" title="Dialog">
             <template #header>
                 <div>{{ t('getNewEmail') }}</div>
@@ -404,6 +437,17 @@ onMounted(async () => {
                 </n-button>
             </template>
         </n-modal>
+        <n-modal v-model:show="showDelteAccount" preset="dialog" title="Dialog">
+            <template #header>
+                <div>{{ t('delteAccount') }}</div>
+            </template>
+            <p>{{ t('delteAccountConfirm') }}</p>
+            <template #action>
+                <n-button @click="deleteAccount" size="small" tertiary round type="error">
+                    {{ t('delteAccount') }}
+                </n-button>
+            </template>
+        </n-modal>
         <n-modal v-model:show="showAuth" :closable="false" :closeOnEsc="false" :maskClosable="false" preset="dialog"
             title="Dialog">
             <template #header>
diff --git a/frontend/src/views/Index.vue b/frontend/src/views/Index.vue
index d94b8f2c..7d537acf 100644
--- a/frontend/src/views/Index.vue
+++ b/frontend/src/views/Index.vue
@@ -1,12 +1,304 @@
 <script setup>
-import { NSpace } from 'naive-ui'
-import Header from './Header.vue';
-import Content from './Content.vue';
+import { watch, onMounted, ref } from "vue";
+import { useMessage } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { useGlobalState } from '../store'
+import { api } from '../api'
+import { CloudDownloadRound } from '@vicons/material'
+import { useIsMobile } from '../utils/composables'
+
+const message = useMessage()
+const isMobile = useIsMobile()
+
+const { settings, themeSwitch } = useGlobalState()
+const autoRefresh = ref(false)
+const data = ref([])
+const timer = ref(null)
+
+const count = ref(0)
+const page = ref(1)
+const pageSize = ref(20)
+
+const showAttachments = ref(false)
+const curAttachments = ref([])
+const curMail = ref(null);
+
+const { t } = useI18n({
+  locale: 'zh',
+  messages: {
+    en: {
+      autoRefresh: 'Auto Refresh',
+      refresh: 'Refresh',
+      attachments: 'Show Attachments',
+      pleaseSelectMail: "Please select a mail to view."
+    },
+    zh: {
+      autoRefresh: '自动刷新',
+      refresh: '刷新',
+      attachments: '查看附件',
+      pleaseSelectMail: "请选择一封邮件查看。"
+    }
+  }
+});
+
+const setupAutoRefresh = async (autoRefresh) => {
+  if (autoRefresh) {
+    timer.value = setInterval(async () => {
+      await refresh();
+    }, 30000)
+  } else {
+    clearInterval(timer.value)
+    timer.value = null
+  }
+}
+
+watch(autoRefresh, async (autoRefresh, old) => {
+  setupAutoRefresh(autoRefresh)
+})
+
+watch([page, pageSize], async ([page, pageSize], [oldPage, oldPageSize]) => {
+  if (page !== oldPage || pageSize !== oldPageSize) {
+    await refresh();
+  }
+})
+
+const refresh = async () => {
+  if (typeof settings.value.address != 'string' || settings.value.address.trim() === '') {
+    return;
+  }
+  try {
+    const { results, count: totalCount } = await api.fetch(
+      `/api/mails`
+      + `?limit=${pageSize.value}`
+      + `&offset=${(page.value - 1) * pageSize.value}`
+    );
+    data.value = results;
+    if (totalCount > 0) {
+      count.value = totalCount;
+    }
+    if (!isMobile.value && !curMail.value && data.value.length > 0) {
+      curMail.value = results[0];
+    }
+  } catch (error) {
+    message.error(error.message || "error");
+    console.error(error);
+  }
+};
+
+const clickRow = async (row) => {
+  curMail.value = row;
+};
+
+const getAttachments = async (attachment_id) => {
+  try {
+    const res = await api.fetch(
+      `/api/attachment/${attachment_id}`
+    );
+    curAttachments.value = res
+      .filter((item) => item?.content?.data)
+      .map((item) => {
+        return {
+          id: item.contentId || Math.random().toString(36).substring(2, 15),
+          filename: item.filename || "",
+          size: item.size,
+          url: URL.createObjectURL(
+            new Blob(
+              [new Uint8Array(item.content.data)],
+              { type: item.contentType || 'application/octet-stream' }
+            ))
+        }
+      });
+    showAttachments.value = true;
+  } catch (error) {
+    message.error(error.message || "error");
+  }
+};
+
+const mailItemClass = (row) => {
+  return curMail.value && row.id == curMail.value.id ? (themeSwitch.value ? 'overlay overlay-dark-backgroud' : 'overlay overlay-light-backgroud') : '';
+};
+
+onMounted(async () => {
+  await api.getSettings();
+  await refresh();
+});
 </script>
 
 <template>
-    <n-space vertical>
-        <Header />
-        <Content />
-    </n-space>
+  <div>
+    <n-layout v-if="settings.address">
+      <n-split class="left" v-if="!isMobile" direction="horizontal" :max="0.75" :min="0.25" :default-size="0.25">
+        <template #1>
+          <div>
+            <div style="display: inline-block; margin-top: 10px; margin-bottom: 10px;">
+              <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" simple size="small" />
+            </div>
+            <n-switch v-model:value="autoRefresh" size="small">
+              <template #checked>
+                {{ t('autoRefresh') }}
+              </template>
+              <template #unchecked>
+                {{ t('autoRefresh') }}
+              </template></n-switch>
+            <n-button class="center" @click="refresh" size="small" type="primary">
+              {{ t('refresh') }}
+            </n-button>
+          </div>
+          <div style="overflow: scroll; height: 80vh;">
+            <n-list hoverable clickable>
+              <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)"
+                :class="mailItemClass(row)">
+                <n-thing class="center" :title="row.subject" style="overflow: scroll">
+                  <template #description>
+                    <n-tag type="info">
+                      ID: {{ row.id }}
+                    </n-tag>
+                    <n-tag type="info">
+                      {{ row.created_at }}
+                    </n-tag>
+                    <div style="word-break: break-all; font-size: small;">
+                      FROM: {{ row.source }}
+                    </div>
+                  </template>
+                </n-thing>
+              </n-list-item>
+            </n-list>
+          </div>
+        </template>
+        <template #2>
+          <n-card v-if="curMail" class="mail-item" :title="curMail.subject" style="overflow: scroll;">
+            <n-space>
+              <n-tag type="info">
+                ID: {{ curMail.id }}
+              </n-tag>
+              <n-tag type="info">
+                {{ curMail.created_at }}
+              </n-tag>
+              <n-tag type="info">
+                FROM: {{ curMail.source }}
+              </n-tag>
+              <n-button v-if="curMail.attachment_id" size="small" tertiary type="info"
+                @click="getAttachments(curMail.attachment_id)">
+                {{ t('attachments') }}
+              </n-button>
+            </n-space>
+            <div v-html="curMail.message" style="max-height: 100vh;"></div>
+          </n-card>
+          <n-card class="mail-item" v-else>
+            <n-result status="info" :title="t('pleaseSelectMail')">
+            </n-result>
+          </n-card>
+        </template>
+      </n-split>
+      <div class="left" v-else>
+        <div>
+          <div style="display: inline-block; margin-top: 10px; margin-bottom: 10px;">
+            <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" simple size="small" />
+          </div>
+          <n-switch v-model:value="autoRefresh" size="small">
+            <template #checked>
+              {{ t('autoRefresh') }}
+            </template>
+            <template #unchecked>
+              {{ t('autoRefresh') }}
+            </template></n-switch>
+          <n-button class="center" @click="refresh" size="small" type="primary">
+            {{ t('refresh') }}
+          </n-button>
+        </div>
+        <div id="drawer-target" style="overflow: scroll; max-height: 80vh;">
+          <n-list hoverable clickable>
+            <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)">
+              <n-thing class="center" :title="row.subject" style="overflow: scroll">
+                <template #description>
+                  <n-tag type="info">
+                    ID: {{ row.id }}
+                  </n-tag>
+                  <n-tag type="info">
+                    {{ row.created_at }}
+                  </n-tag>
+                  <div style="word-break: break-all; font-size: small;">
+                    FROM: {{ row.source }}
+                  </div>
+                </template>
+              </n-thing>
+            </n-list-item>
+          </n-list>
+        </div>
+        <n-drawer v-model:show="curMail" width="100%" :trap-focus="false" :block-scroll="false" to="#drawer-target">
+          <n-drawer-content :title="curMail.subject" closable>
+            <n-card style="overflow: scroll;">
+              <n-space>
+                <n-tag type="info">
+                  ID: {{ curMail.id }}
+                </n-tag>
+                <n-tag type="info">
+                  {{ curMail.created_at }}
+                </n-tag>
+                <n-tag type="info">
+                  FROM: {{ curMail.source }}
+                </n-tag>
+                <n-button v-if="curMail.attachment_id" size="small" tertiary type="info"
+                  @click="getAttachments(curMail.attachment_id)">
+                  {{ t('attachments') }}
+                </n-button>
+              </n-space>
+              <div v-html="curMail.message" style="max-height: 100vh;"></div>
+            </n-card>
+          </n-drawer-content>
+        </n-drawer>
+      </div>
+    </n-layout>
+    <n-modal v-model:show="showAttachments" preset="dialog" title="Dialog">
+      <template #header>
+        <div>{{ t("attachments") }}</div>
+      </template>
+      <n-list hoverable clickable>
+        <n-list-item v-for="row in curAttachments" v-bind:key="row.id">
+          <n-thing class="center" :title="row.filename">
+            <template #description>
+              <n-space>
+                <n-tag type="info">
+                  Size: {{ row.size }}
+                </n-tag>
+              </n-space>
+            </template>
+          </n-thing>
+          <template #suffix>
+            <n-button tag="a" target="_blank" tertiary type="info" size="small'" :download="row.filename"
+              :href="row.url">
+              <n-icon :component="CloudDownloadRound" />
+            </n-button>
+          </template>
+        </n-list-item>
+      </n-list>
+      <template #action>
+      </template>
+    </n-modal>
+  </div>
 </template>
+
+<style scoped>
+.left {
+  overflow: scroll;
+  text-align: left;
+}
+
+.overlay {
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+}
+
+.overlay-dark-backgroud {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.overlay-light-backgroud {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.mail-item {
+  height: 100%;
+}
+</style>
diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue
index 4bda8ab2..3f4dca43 100644
--- a/frontend/src/views/Settings.vue
+++ b/frontend/src/views/Settings.vue
@@ -1,6 +1,4 @@
 <script setup>
-import { NSpace, NFormItem, NInput, NSwitch, NButton, NCard } from 'naive-ui'
-import { useMessage } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { onMounted, ref } from 'vue'
 
@@ -79,33 +77,30 @@ onMounted(async () => {
 </script>
 
 <template>
-    <n-space vertical>
-        <Header />
-        <div class="center">
-            <n-card v-if="settings.address" :title='t("settings")'>
-                <div class="right">
-                    <n-button type="primary" @click="saveSettings">{{ t('save') }}</n-button>
-                </div>
-                <div class="left">
-                    <n-form-item :label="t('enableAutoReply')" label-placement="left">
-                        <n-switch v-model:value="enableAutoReply" />
-                    </n-form-item>
-                    <n-form-item :label="t('name')" label-placement="left">
-                        <n-input :disabled="!enableAutoReply" v-model:value="name" />
-                    </n-form-item>
-                    <n-form-item :label="t('sourcePrefix')" label-placement="left">
-                        <n-input :disabled="!enableAutoReply" v-model:value="sourcePrefix" />
-                    </n-form-item>
-                    <n-form-item :label="t('subject')" label-placement="left">
-                        <n-input :disabled="!enableAutoReply" v-model:value="subject" />
-                    </n-form-item>
-                    <n-form-item :label="t('autoReply')" label-placement="left">
-                        <n-input :disabled="!enableAutoReply" type="textarea" v-model:value="autoReplyMessage" />
-                    </n-form-item>
-                </div>
-            </n-card>
-        </div>
-    </n-space>
+    <div class="center">
+        <n-card v-if="settings.address" :title='t("settings")'>
+            <div class="right">
+                <n-button type="primary" @click="saveSettings">{{ t('save') }}</n-button>
+            </div>
+            <div class="left">
+                <n-form-item :label="t('enableAutoReply')" label-placement="left">
+                    <n-switch v-model:value="enableAutoReply" />
+                </n-form-item>
+                <n-form-item :label="t('name')" label-placement="left">
+                    <n-input :disabled="!enableAutoReply" v-model:value="name" />
+                </n-form-item>
+                <n-form-item :label="t('sourcePrefix')" label-placement="left">
+                    <n-input :disabled="!enableAutoReply" v-model:value="sourcePrefix" />
+                </n-form-item>
+                <n-form-item :label="t('subject')" label-placement="left">
+                    <n-input :disabled="!enableAutoReply" v-model:value="subject" />
+                </n-form-item>
+                <n-form-item :label="t('autoReply')" label-placement="left">
+                    <n-input :disabled="!enableAutoReply" type="textarea" v-model:value="autoReplyMessage" />
+                </n-form-item>
+            </div>
+        </n-card>
+    </div>
 </template>
 
 <style scoped>
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 684db9fb..f2199361 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -4,6 +4,9 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { VitePWA } from 'vite-plugin-pwa'
 import { splitVendorChunkPlugin } from 'vite';
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -13,6 +16,22 @@ export default defineConfig({
   plugins: [
     vue(),
     splitVendorChunkPlugin(),
+    AutoImport({
+      imports: [
+        'vue',
+        {
+          'naive-ui': [
+            'useMessage',
+            'NButton',
+            'NPopconfirm',
+            'NIcon',
+          ]
+        }
+      ]
+    }),
+    Components({
+      resolvers: [NaiveUiResolver()]
+    }),
     VitePWA({
       registerType: 'autoUpdate',
       devOptions: {
diff --git a/worker/src/router.js b/worker/src/router.js
index 63ce1580..2029f047 100644
--- a/worker/src/router.js
+++ b/worker/src/router.js
@@ -48,7 +48,30 @@ api.get('/api/mails', async (c) => {
 })
 
 api.get('/api/settings', async (c) => {
-    const { address } = c.get("jwtPayload")
+    const { address, address_id } = c.get("jwtPayload")
+    if (address.startsWith(c.env.PREFIX)) {
+        // check address id
+        if (address_id && address_id > 0) {
+            try {
+                const db_address_id = await c.env.DB.prepare(
+                    `SELECT id FROM address where name = ?`
+                ).bind(address.substring(c.env.PREFIX.length)).first("id");
+                if (db_address_id != address_id) {
+                    return c.text("Invalid address", 400)
+                }
+            } catch (error) {
+                return c.text("Invalid address", 400)
+            }
+        }
+        // update address updated_at
+        try {
+            c.env.DB.prepare(
+                `UPDATE address SET updated_at = datetime('now') where name = ?`
+            ).bind(address.substring(c.env.PREFIX.length)).run();
+        } catch (e) {
+            console.warn("Failed to update address")
+        }
+    }
     const results = await c.env.DB.prepare(
         `SELECT * FROM auto_reply_mails where address = ? `
     ).bind(address).first();
@@ -135,23 +158,75 @@ api.get('/api/new_address', async (c) => {
         }
         return c.text("Failed to create address", 500)
     }
+    let address_id = 0;
+    try {
+        address_id = await c.env.DB.prepare(
+            `SELECT id FROM address where name = ?`
+        ).bind(name + "@" + domain).first("id");
+        address_id = results.id;
+    } catch (error) {
+        console.log(error);
+    }
     // create jwt
     const jwt = await Jwt.sign({
-        address: emailAddress
+        address: emailAddress,
+        address_id: address_id
     }, c.env.JWT_SECRET)
     return c.json({
         jwt: jwt
     })
 })
 
+api.delete('/api/delete_address', async (c) => {
+    const { address } = c.get("jwtPayload")
+    let name = address;
+    if (address.startsWith(c.env.PREFIX)) {
+        name = address.substring(c.env.PREFIX.length);
+    }
+    const { success } = await c.env.DB.prepare(
+        `DELETE FROM address WHERE name = ? `
+    ).bind(name).run();
+    if (!success) {
+        return c.text("Failed to delete address", 500)
+    }
+    const { success: mailSuccess } = await c.env.DB.prepare(
+        `DELETE FROM mails WHERE address = ? `
+    ).bind(address).run();
+    if (!mailSuccess) {
+        return c.text("Failed to delete mails", 500)
+    }
+    return c.json({
+        success: success
+    })
+})
+
 api.get('/admin/address', async (c) => {
-    const { limit, offset } = c.req.query();
+    const { limit, offset, query } = c.req.query();
     if (!limit || limit < 0 || limit > 100) {
         return c.text("Invalid limit", 400)
     }
     if (!offset || offset < 0) {
         return c.text("Invalid offset", 400)
     }
+    if (query) {
+        const { results } = await c.env.DB.prepare(
+            `SELECT * FROM address where concat('${c.env.PREFIX}', name) like ? order by id desc limit ? offset ? `
+        ).bind(`%${query}%`, limit, offset).all();
+        let count = 0;
+        if (offset == 0) {
+            const { count: addressCount } = await c.env.DB.prepare(
+                `SELECT count(*) as count FROM address where concat('${c.env.PREFIX}', name) like ?`
+            ).bind(`%${query}%`).first();
+            count = addressCount;
+        }
+        return c.json({
+            results: results.map((r) => {
+                r.name = c.env.PREFIX + r.name;
+                return r;
+            }),
+            count: count
+        })
+    }
     const { results } = await c.env.DB.prepare(
         `SELECT * FROM address order by id desc limit ? offset ? `
     ).bind(limit, offset).all();
@@ -179,6 +254,13 @@ api.delete('/admin/delete_address/:id', async (c) => {
     if (!success) {
         return c.text("Failed to delete address", 500)
     }
+    const { success: mailSuccess } = await c.env.DB.prepare(
+        `DELETE FROM mails WHERE address IN
+        (select concat('${c.env.PREFIX}', name) from address where id = ?) `
+    ).bind(id).run();
+    if (!mailSuccess) {
+        return c.text("Failed to delete mails", 500)
+    }
     return c.json({
         success: success
     })
@@ -192,7 +274,8 @@ api.get('/admin/show_password/:id', async (c) => {
     // compute address
     const emailAddress = c.env.PREFIX + name
     const jwt = await Jwt.sign({
-        address: emailAddress
+        address: emailAddress,
+        address_id: id
     }, c.env.JWT_SECRET)
     return c.json({
         password: jwt
@@ -252,6 +335,24 @@ api.get('/admin/mails_unknow', async (c) => {
     })
 });
 
+
+api.get('/admin/statistics', async (c) => {
+    const { count: mailCount } = await c.env.DB.prepare(`
+            SELECT count(*) as count FROM mails`
+    ).first();
+    const { count: addressCount } = await c.env.DB.prepare(`
+            SELECT count(*) as count FROM address`
+    ).first();
+    const { count: activeUserCount7days } = await c.env.DB.prepare(`
+            SELECT count(*) as count FROM address where updated_at > datetime('now', '-7 day')`
+    ).first();
+    return c.json({
+        mailCount: mailCount,
+        userCount: addressCount,
+        activeUserCount7days: activeUserCount7days
+    })
+});
+
 // attachments
 api.get("/api/attachment/:attachment_id", async (c) => {
     const { attachment_id } = c.req.param();