diff --git a/package.json b/package.json
index 388243e..c740ac7 100644
--- a/package.json
+++ b/package.json
@@ -45,12 +45,13 @@
   "homepage": "https://github.com/molvqingtai/WebChat",
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
+    "@number-flow/react": "^0.3.2",
     "@perfsee/jsonr": "^1.13.0",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-hover-card": "^1.1.2",
-    "@radix-ui/react-icons": "^1.3.1",
+    "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-portal": "^1.1.2",
@@ -63,13 +64,14 @@
     "@resreq/timer": "^1.1.6",
     "@rtco/client": "^0.2.17",
     "@tailwindcss/typography": "^0.5.15",
-    "@webext-core/messaging": "^2.0.2",
+    "@webcomponents/custom-elements": "^1.6.0",
+    "@webext-core/messaging": "^2.1.0",
     "@webext-core/proxy-service": "^1.2.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "danmu": "^0.14.0",
     "date-fns": "^4.1.0",
-    "framer-motion": "^11.11.13",
+    "framer-motion": "^11.11.17",
     "idb-keyval": "^6.2.1",
     "lucide-react": "^0.456.0",
     "nanoid": "^5.0.8",
@@ -123,13 +125,13 @@
     "prettier": "^3.3.3",
     "rimraf": "^6.0.1",
     "semantic-release": "^24.2.0",
-    "tailwindcss": "^3.4.14",
+    "tailwindcss": "^3.4.15",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.14.0",
     "vite-plugin-svgr": "^4.3.0",
     "webext-bridge": "^6.0.1",
-    "wxt": "^0.19.13"
+    "wxt": "^0.19.15"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "eslint --fix --flag unstable_ts_config"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fc454e4..bdce6c7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@hookform/resolvers':
         specifier: ^3.9.1
         version: 3.9.1(react-hook-form@7.53.2(react@18.3.1))
+      '@number-flow/react':
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@perfsee/jsonr':
         specifier: ^1.13.0
         version: 1.13.0
@@ -27,8 +30,8 @@ importers:
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-icons':
-        specifier: ^1.3.1
-        version: 1.3.1(react@18.3.1)
+        specifier: ^1.3.2
+        version: 1.3.2(react@18.3.1)
       '@radix-ui/react-label':
         specifier: ^2.1.0
         version: 2.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -64,13 +67,16 @@ importers:
         version: 0.2.17
       '@tailwindcss/typography':
         specifier: ^0.5.15
-        version: 0.5.15(tailwindcss@3.4.14)
+        version: 0.5.15(tailwindcss@3.4.15)
+      '@webcomponents/custom-elements':
+        specifier: ^1.6.0
+        version: 1.6.0
       '@webext-core/messaging':
-        specifier: ^2.0.2
-        version: 2.0.2
+        specifier: ^2.1.0
+        version: 2.1.0
       '@webext-core/proxy-service':
         specifier: ^1.2.0
-        version: 1.2.0(@webext-core/messaging@2.0.2)(webextension-polyfill@0.12.0)
+        version: 1.2.0(@webext-core/messaging@2.1.0)(webextension-polyfill@0.12.0)
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.0
@@ -84,8 +90,8 @@ importers:
         specifier: ^4.1.0
         version: 4.1.0
       framer-motion:
-        specifier: ^11.11.13
-        version: 11.11.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^11.11.17
+        version: 11.11.17(@emotion/is-prop-valid@0.8.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       idb-keyval:
         specifier: ^6.2.1
         version: 6.2.1
@@ -191,7 +197,7 @@ importers:
         version: 8.14.0(eslint@9.14.0(jiti@2.4.0))(typescript@5.6.3)
       '@vitejs/plugin-react':
         specifier: ^4.3.3
-        version: 4.3.3(vite@5.4.10(@types/node@22.9.0))
+        version: 4.3.3(vite@5.4.11(@types/node@22.9.0))
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.4.49)
@@ -209,7 +215,7 @@ importers:
         version: 5.2.1(@types/eslint@9.6.1)(eslint-config-prettier@9.1.0(eslint@9.14.0(jiti@2.4.0)))(eslint@9.14.0(jiti@2.4.0))(prettier@3.3.3)
       eslint-plugin-tailwindcss:
         specifier: ^3.17.5
-        version: 3.17.5(tailwindcss@3.4.14)
+        version: 3.17.5(tailwindcss@3.4.15)
       globals:
         specifier: ^15.12.0
         version: 15.12.0
@@ -241,11 +247,11 @@ importers:
         specifier: ^24.2.0
         version: 24.2.0(typescript@5.6.3)
       tailwindcss:
-        specifier: ^3.4.14
-        version: 3.4.14
+        specifier: ^3.4.15
+        version: 3.4.15
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.14)
+        version: 1.0.7(tailwindcss@3.4.15)
       typescript:
         specifier: ^5.6.3
         version: 5.6.3
@@ -254,13 +260,13 @@ importers:
         version: 8.14.0(eslint@9.14.0(jiti@2.4.0))(typescript@5.6.3)
       vite-plugin-svgr:
         specifier: ^4.3.0
-        version: 4.3.0(rollup@4.21.3)(typescript@5.6.3)(vite@5.4.10(@types/node@22.9.0))
+        version: 4.3.0(rollup@4.21.3)(typescript@5.6.3)(vite@5.4.11(@types/node@22.9.0))
       webext-bridge:
         specifier: ^6.0.1
         version: 6.0.1
       wxt:
-        specifier: ^0.19.13
-        version: 0.19.13(@types/node@22.9.0)(bufferutil@4.0.8)(rollup@4.21.3)(utf-8-validate@6.0.4)
+        specifier: ^0.19.15
+        version: 0.19.15(@types/node@22.9.0)(bufferutil@4.0.8)(rollup@4.21.3)(utf-8-validate@6.0.4)
 
 packages:
 
@@ -463,6 +469,12 @@ packages:
     engines: {node: '>= 0.10.4'}
     hasBin: true
 
+  '@emotion/is-prop-valid@0.8.8':
+    resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
+
+  '@emotion/memoize@0.7.4':
+    resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
+
   '@esbuild/aix-ppc64@0.21.5':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
@@ -744,6 +756,12 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
+  '@number-flow/react@0.3.2':
+    resolution: {integrity: sha512-/Rg7WjIZR/yjHJAzRHN7+Cif+s9U02QewMl9WEKPoAY9O6jg0wA/IsAl3lJgeM1ic31bDJ92wfCkwE9ud62VmQ==}
+    peerDependencies:
+      react: ^18 || ^19.0.0-rc-915b914b3a-20240515
+      react-dom: ^18
+
   '@octokit/auth-token@5.1.1':
     resolution: {integrity: sha512-rh3G3wDO8J9wSjfI436JUKzHIxq8NaiL0tVeB2aXmG6p/9859aUOAjA9pmSPNGGZxfwmaJ9ozOJImuNVJdpvbA==}
     engines: {node: '>= 18'}
@@ -1058,10 +1076,10 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-icons@1.3.1':
-    resolution: {integrity: sha512-QvYompk0X+8Yjlo/Fv4McrzxohDdM5GgLHyQcPpcsPvlOSXCGFjdbuyGL5dzRbg0GpknAjQJJZzdiRK7iWVuFQ==}
+  '@radix-ui/react-icons@1.3.2':
+    resolution: {integrity: sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==}
     peerDependencies:
-      react: ^16.x || ^17.x || ^18.x || ^19.x
+      react: ^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc
 
   '@radix-ui/react-id@1.1.0':
     resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
@@ -1552,8 +1570,8 @@ packages:
   '@types/babel__traverse@7.20.6':
     resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==}
 
-  '@types/chrome@0.0.269':
-    resolution: {integrity: sha512-vF7x8YywnhXX2F06njQ/OE7a3Qeful43C5GUOsUksXWk89WoSFUU3iLeZW8lDpVO9atm8iZIEiLQTRC3H7NOXQ==}
+  '@types/chrome@0.0.280':
+    resolution: {integrity: sha512-AotSmZrL9bcZDDmSI1D9dE7PGbhOur5L0cKxXd7IqbVizQWCY4gcvupPUVsQ4FfDj3V2tt/iOpomT9EY0s+w1g==}
 
   '@types/conventional-commits-parser@5.0.0':
     resolution: {integrity: sha512-loB369iXNmAZglwWATL+WRe+CRMmmBPtpolYzIebFaX4YA3x+BEfLqhUAV9WanycKI3TG1IMr5bMJDajDKLlUQ==}
@@ -1633,8 +1651,8 @@ packages:
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
-  '@types/webextension-polyfill@0.10.7':
-    resolution: {integrity: sha512-10ql7A0qzBmFB+F+qAke/nP1PIonS0TXZAOMVOxEUsm+lGSW6uwVcISFNa0I4Oyj0884TZVWGGMIWeXOVSNFHw==}
+  '@types/webextension-polyfill@0.12.1':
+    resolution: {integrity: sha512-xPTFWwQ8BxPevPF2IKsf4hpZNss4LxaOLZXypQH4E63BDLmcwX/RMGdI4tB4VO4Nb6xDBH3F/p4gz4wvof1o9w==}
 
   '@types/webextension-polyfill@0.8.3':
     resolution: {integrity: sha512-GN+Hjzy9mXjWoXKmaicTegv3FJ0WFZ3aYz77Wk8TMp1IY3vEzvzj1vnsa0ggV7vMI1i+PUxe4qqnIJKCzf9aTg==}
@@ -1708,6 +1726,9 @@ packages:
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0
 
+  '@webcomponents/custom-elements@1.6.0':
+    resolution: {integrity: sha512-CqTpxOlUCPWRNUPZDxT5v2NnHXA4oox612iUGnmTUGQFhZ1Gkj8kirtl/2wcF6MqX7+PqqicZzOCBKKfIn0dww==}
+
   '@webext-core/fake-browser@1.3.1':
     resolution: {integrity: sha512-NpBl0rXL6rT3msdl9Fb1GPLd/MKJEZ3pHpxuMdlu+qKW78T6SWJqDvyAVs8VjAmYs9RHoQJc+yObxQoGWdskXQ==}
 
@@ -1717,8 +1738,8 @@ packages:
   '@webext-core/match-patterns@1.0.3':
     resolution: {integrity: sha512-NY39ACqCxdKBmHgw361M9pfJma8e4AZo20w9AY+5ZjIj1W2dvXC8J31G5fjfOGbulW9w4WKpT8fPooi0mLkn9A==}
 
-  '@webext-core/messaging@2.0.2':
-    resolution: {integrity: sha512-915LXfDSB6Gx/ahTVB3ajCGPb4G3xz0rJmGiM6zDR9ULdHoCYmW2Xi+kmAD2WaQ65alit1uYEiGzzEuZiSqpvA==}
+  '@webext-core/messaging@2.1.0':
+    resolution: {integrity: sha512-1Bwr97HDMRQJ+XFwvhAvE4fdHK7Ge1o3NHxr/Cyv5yYCDAfz6cSzQaopeGZkkW/kN5eBRb1g3yonVwXC5ZXt8w==}
 
   '@webext-core/proxy-service@1.2.0':
     resolution: {integrity: sha512-MCUadVakeb7L47AvdtlbJfBUDjFdejr5t4E2WrwZagnev3a5I/xh2wHCkE+G0ihO/VUt/m0R1MPX+y4YVFRyPA==}
@@ -1726,6 +1747,9 @@ packages:
       '@webext-core/messaging': '>=1.3.1'
       webextension-polyfill: ^0.10.0
 
+  '@wxt-dev/storage@1.0.0':
+    resolution: {integrity: sha512-Pr0nZUnA6ElAIq5yl+GdZfvhAI3/wXf7ZdwOHShI2VtDirfgo+tBFQZ123f86l5i81v7FfvrQi3WFSzojcRsJw==}
+
   '@xobotyi/scrollbar-width@1.9.5':
     resolution: {integrity: sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==}
 
@@ -2035,8 +2059,8 @@ packages:
     resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
     engines: {node: '>=8'}
 
-  ci-info@4.0.0:
-    resolution: {integrity: sha512-TdHqgGf9odd8SXNuxtUBVx8Nv+qZOejE6qyqiy5NtbYYQOeFa6zmHkxlPzmaLxWWHsU6nJmB7AETdVPi+2NBUg==}
+  ci-info@4.1.0:
+    resolution: {integrity: sha512-HutrvTNsF48wnxkzERIXOe5/mlcfFcbfCmwcg6CJnizbSue78AbDt+1cgl26zwn61WFxhcPykPfZrbqjGmBb4A==}
     engines: {node: '>=8'}
 
   citty@0.1.6:
@@ -2505,6 +2529,9 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
+  es-module-lexer@1.5.4:
+    resolution: {integrity: sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==}
+
   es-object-atoms@1.0.0:
     resolution: {integrity: sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==}
     engines: {node: '>= 0.4'}
@@ -2809,8 +2836,8 @@ packages:
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
-  framer-motion@11.11.13:
-    resolution: {integrity: sha512-aoEA83gsqRRsnh4TN7S9YNcKVLrg+GtPNnxNMd9bGn23+pLmuKGQeccPnqffEKzlkgmy2MkMo0jRkK41S2LzWw==}
+  framer-motion@11.11.17:
+    resolution: {integrity: sha512-O8QzvoKiuzI5HSAHbcYuL6xU+ZLXbrH7C8Akaato4JzQbX2ULNeniqC2Vo5eiCtFktX9XsJ+7nUhxcl2E2IjpA==}
     peerDependencies:
       '@emotion/is-prop-valid': '*'
       react: ^18.0.0
@@ -3969,8 +3996,8 @@ packages:
       react: '*'
       react-dom: '*'
 
-  nano-spawn@0.1.0:
-    resolution: {integrity: sha512-Q0fYRut0GGSoysqrS6hF1jlQEc3yOglnGXwsS+DcoaLwu6NCkUxOB8om08hvUF0V+bNRjExzKM3v8ATbfrLWyQ==}
+  nano-spawn@0.2.0:
+    resolution: {integrity: sha512-IjZBIOLxSlxu+m/kacg9JuP93oUpRemeV0mEuCy64nzBKKIL9m0aLJHtVPcVuzJDHFhElzjpwbW4a3tMzgKoZQ==}
     engines: {node: '>=18.19'}
 
   nanoevents@6.0.2:
@@ -4143,6 +4170,9 @@ packages:
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
+  number-flow@0.3.7:
+    resolution: {integrity: sha512-N3pKXV7hw4PhdhZ3Z6QQspRO4djveotVBetxedHB3QrFw9oDluGfdwh7ju7mK9GO9CjTV9XmGjEcaCIwJ3IJMQ==}
+
   nypm@0.3.12:
     resolution: {integrity: sha512-D3pzNDWIvgA+7IORhD/IuWzEk4uXv6GsgOxiid4UU3h9oq5IqV1KtPDi63n4sZJ/xcWlr88c0QM2RgN5VbOhFA==}
     engines: {node: ^14.16.0 || >=16.10.0}
@@ -4168,9 +4198,6 @@ packages:
     resolution: {integrity: sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==}
     engines: {node: '>= 0.4'}
 
-  ofetch@1.3.4:
-    resolution: {integrity: sha512-KLIET85ik3vhEfS+3fDlc/BAZiAp+43QEC/yCo5zkNoY2YaKvNkOaFr/6wCFgFH1kuYQM5pMNi0Tg8koiIemtw==}
-
   ofetch@1.4.1:
     resolution: {integrity: sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==}
 
@@ -4212,8 +4239,8 @@ packages:
     resolution: {integrity: sha512-ERAyNnZOfqM+Ao3RAvIXkYh5joP220yf59gVe2X/cI6SiCxIdi4c9HZKZD8R6q/RDXEje1THBju6iExiSsgJaQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  ora@8.1.0:
-    resolution: {integrity: sha512-GQEkNkH/GHOhPFXcqZs3IDahXEQcQxsSjEkK4KvEEST4t7eNzoMjxTzef+EZ+JluDEV+Raoi3WQ2CflnRdSVnQ==}
+  ora@8.1.1:
+    resolution: {integrity: sha512-YWielGi1XzG1UTvOaCFaNgEnuhZVMSHYkW/FQ7UX8O26PtlpdM84c0f7wLPlkvx2RfiQmnzd61d/MGxmpQeJPw==}
     engines: {node: '>=18'}
 
   os-shim@0.1.3:
@@ -5157,8 +5184,8 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
 
-  tailwindcss@3.4.14:
-    resolution: {integrity: sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==}
+  tailwindcss@3.4.15:
+    resolution: {integrity: sha512-r4MeXnfBmSOuKUWmXe6h2CcyfzJCEk4F0pptO5jlnYSIViUkVmsawj80N5h2lO3gwcmSb4n3PuN+e+GC1Guylw==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
@@ -5525,8 +5552,8 @@ packages:
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
-  vite-node@2.1.3:
-    resolution: {integrity: sha512-I1JadzO+xYX887S39Do+paRePCKoiDrWRRjp9kkG5he0t7RXNvPAJPCQSJqbGN4uCrFFeS3Kj3sLqY8NMYBEdA==}
+  vite-node@2.1.5:
+    resolution: {integrity: sha512-rd0QIgx74q4S1Rd56XIiL2cYEdyWn13cunYBIuqh9mpmQr7gGS0IxXoP8R6OaZtNQQLyXSWbd4rXKYUbhFpK5w==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
 
@@ -5535,8 +5562,8 @@ packages:
     peerDependencies:
       vite: '>=2.6.0'
 
-  vite@5.4.10:
-    resolution: {integrity: sha512-1hvaPshuPUtxeQ0hsVH3Mud0ZanOLwVTneA1EgbAM5LhaZEqyPWGRQ7BtaMvUrTDeEaC8pxtj6a6jku3x4z6SQ==}
+  vite@5.4.11:
+    resolution: {integrity: sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -5671,8 +5698,8 @@ packages:
       utf-8-validate:
         optional: true
 
-  wxt@0.19.13:
-    resolution: {integrity: sha512-iWtMkCo6Puy3UsxQ7x0HQSYqxOz6Vu2vZ/BB/lzKMCrkrmlXj4IUAEqjEcQCdBRTkiGTx0f8qFtrA+o9QtUe7w==}
+  wxt@0.19.15:
+    resolution: {integrity: sha512-Y3wLr5DZpu0XjsOBqs1Wafcvgup7d2L+IpmkZHli2dw0VVhSqssYrKatpprKSDj0i0/SW9esSeooEI2id8/G3Q==}
     hasBin: true
 
   xdg-basedir@5.1.0:
@@ -6029,6 +6056,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@emotion/is-prop-valid@0.8.8':
+    dependencies:
+      '@emotion/memoize': 0.7.4
+    optional: true
+
+  '@emotion/memoize@0.7.4':
+    optional: true
+
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
@@ -6318,6 +6353,12 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
 
+  '@number-flow/react@0.3.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      number-flow: 0.3.7
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   '@octokit/auth-token@5.1.1': {}
 
   '@octokit/core@6.1.2':
@@ -6601,7 +6642,7 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
-  '@radix-ui/react-icons@1.3.1(react@18.3.1)':
+  '@radix-ui/react-icons@1.3.2(react@18.3.1)':
     dependencies:
       react: 18.3.1
 
@@ -7109,13 +7150,13 @@ snapshots:
     dependencies:
       defer-to-connect: 2.0.1
 
-  '@tailwindcss/typography@0.5.15(tailwindcss@3.4.14)':
+  '@tailwindcss/typography@0.5.15(tailwindcss@3.4.15)':
     dependencies:
       lodash.castarray: 4.4.0
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.14
+      tailwindcss: 3.4.15
 
   '@types/babel__core@7.20.5':
     dependencies:
@@ -7138,7 +7179,7 @@ snapshots:
     dependencies:
       '@babel/types': 7.25.6
 
-  '@types/chrome@0.0.269':
+  '@types/chrome@0.0.280':
     dependencies:
       '@types/filesystem': 0.0.36
       '@types/har-format': 1.2.15
@@ -7221,7 +7262,7 @@ snapshots:
 
   '@types/unist@3.0.3': {}
 
-  '@types/webextension-polyfill@0.10.7': {}
+  '@types/webextension-polyfill@0.12.1': {}
 
   '@types/webextension-polyfill@0.8.3': {}
 
@@ -7313,17 +7354,19 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@vitejs/plugin-react@4.3.3(vite@5.4.10(@types/node@22.9.0))':
+  '@vitejs/plugin-react@4.3.3(vite@5.4.11(@types/node@22.9.0))':
     dependencies:
       '@babel/core': 7.25.2
       '@babel/plugin-transform-react-jsx-self': 7.24.7(@babel/core@7.25.2)
       '@babel/plugin-transform-react-jsx-source': 7.24.7(@babel/core@7.25.2)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.2
-      vite: 5.4.10(@types/node@22.9.0)
+      vite: 5.4.11(@types/node@22.9.0)
     transitivePeerDependencies:
       - supports-color
 
+  '@webcomponents/custom-elements@1.6.0': {}
+
   '@webext-core/fake-browser@1.3.1':
     dependencies:
       lodash.merge: 4.6.2
@@ -7334,18 +7377,23 @@ snapshots:
 
   '@webext-core/match-patterns@1.0.3': {}
 
-  '@webext-core/messaging@2.0.2':
+  '@webext-core/messaging@2.1.0':
     dependencies:
       serialize-error: 11.0.3
       uid: 2.0.2
       webextension-polyfill: 0.10.0
 
-  '@webext-core/proxy-service@1.2.0(@webext-core/messaging@2.0.2)(webextension-polyfill@0.12.0)':
+  '@webext-core/proxy-service@1.2.0(@webext-core/messaging@2.1.0)(webextension-polyfill@0.12.0)':
     dependencies:
-      '@webext-core/messaging': 2.0.2
+      '@webext-core/messaging': 2.1.0
       get-value: 3.0.1
       webextension-polyfill: 0.12.0
 
+  '@wxt-dev/storage@1.0.0':
+    dependencies:
+      async-mutex: 0.5.0
+      dequal: 2.0.3
+
   '@xobotyi/scrollbar-width@1.9.5': {}
 
   JSONStream@1.3.5:
@@ -7668,7 +7716,7 @@ snapshots:
 
   ci-info@3.9.0: {}
 
-  ci-info@4.0.0: {}
+  ci-info@4.1.0: {}
 
   citty@0.1.6:
     dependencies:
@@ -8176,6 +8224,8 @@ snapshots:
 
   es-errors@1.3.0: {}
 
+  es-module-lexer@1.5.4: {}
+
   es-object-atoms@1.0.0:
     dependencies:
       es-errors: 1.3.0
@@ -8364,11 +8414,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-tailwindcss@3.17.5(tailwindcss@3.4.14):
+  eslint-plugin-tailwindcss@3.17.5(tailwindcss@3.4.15):
     dependencies:
       fast-glob: 3.3.2
       postcss: 8.4.49
-      tailwindcss: 3.4.14
+      tailwindcss: 3.4.15
 
   eslint-scope@8.2.0:
     dependencies:
@@ -8612,10 +8662,11 @@ snapshots:
 
   fraction.js@4.3.7: {}
 
-  framer-motion@11.11.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  framer-motion@11.11.17(@emotion/is-prop-valid@0.8.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       tslib: 2.7.0
     optionalDependencies:
+      '@emotion/is-prop-valid': 0.8.8
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
@@ -9966,7 +10017,7 @@ snapshots:
       stacktrace-js: 2.0.2
       stylis: 4.3.4
 
-  nano-spawn@0.1.0: {}
+  nano-spawn@0.2.0: {}
 
   nanoevents@6.0.2: {}
 
@@ -10066,6 +10117,8 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
+  number-flow@0.3.7: {}
+
   nypm@0.3.12:
     dependencies:
       citty: 0.1.6
@@ -10090,12 +10143,6 @@ snapshots:
       has-symbols: 1.0.3
       object-keys: 1.1.1
 
-  ofetch@1.3.4:
-    dependencies:
-      destr: 2.0.3
-      node-fetch-native: 1.6.4
-      ufo: 1.5.4
-
   ofetch@1.4.1:
     dependencies:
       destr: 2.0.3
@@ -10161,7 +10208,7 @@ snapshots:
       strip-ansi: 7.1.0
       wcwidth: 1.0.1
 
-  ora@8.1.0:
+  ora@8.1.1:
     dependencies:
       chalk: 5.3.0
       cli-cursor: 5.0.0
@@ -10434,7 +10481,7 @@ snapshots:
       lodash.camelcase: 4.3.0
       lodash.kebabcase: 4.1.1
       lodash.snakecase: 4.1.1
-      ofetch: 1.3.4
+      ofetch: 1.4.1
       open: 9.1.0
       ora: 6.3.1
       prompts: 2.4.2
@@ -11184,11 +11231,11 @@ snapshots:
 
   tailwind-merge@2.5.4: {}
 
-  tailwindcss-animate@1.0.7(tailwindcss@3.4.14):
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.15):
     dependencies:
-      tailwindcss: 3.4.14
+      tailwindcss: 3.4.15
 
-  tailwindcss@3.4.14:
+  tailwindcss@3.4.15:
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -11203,7 +11250,7 @@ snapshots:
       micromatch: 4.0.8
       normalize-path: 3.0.0
       object-hash: 3.0.0
-      picocolors: 1.1.0
+      picocolors: 1.1.1
       postcss: 8.4.49
       postcss-import: 15.1.0(postcss@8.4.49)
       postcss-js: 4.0.1(postcss@8.4.49)
@@ -11409,7 +11456,7 @@ snapshots:
   unimport@3.13.1(rollup@4.21.3):
     dependencies:
       '@rollup/pluginutils': 5.1.3(rollup@4.21.3)
-      acorn: 8.12.1
+      acorn: 8.14.0
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
       fast-glob: 3.3.2
@@ -11460,7 +11507,7 @@ snapshots:
 
   unplugin@1.14.1:
     dependencies:
-      acorn: 8.12.1
+      acorn: 8.14.0
       webpack-virtual-modules: 0.6.2
 
   unstorage@1.13.1(idb-keyval@6.2.1):
@@ -11563,12 +11610,13 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
-  vite-node@2.1.3(@types/node@22.9.0):
+  vite-node@2.1.5(@types/node@22.9.0):
     dependencies:
       cac: 6.7.14
       debug: 4.3.7
+      es-module-lexer: 1.5.4
       pathe: 1.1.2
-      vite: 5.4.10(@types/node@22.9.0)
+      vite: 5.4.11(@types/node@22.9.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -11580,18 +11628,18 @@ snapshots:
       - supports-color
       - terser
 
-  vite-plugin-svgr@4.3.0(rollup@4.21.3)(typescript@5.6.3)(vite@5.4.10(@types/node@22.9.0)):
+  vite-plugin-svgr@4.3.0(rollup@4.21.3)(typescript@5.6.3)(vite@5.4.11(@types/node@22.9.0)):
     dependencies:
       '@rollup/pluginutils': 5.1.3(rollup@4.21.3)
       '@svgr/core': 8.1.0(typescript@5.6.3)
       '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.6.3))
-      vite: 5.4.10(@types/node@22.9.0)
+      vite: 5.4.11(@types/node@22.9.0)
     transitivePeerDependencies:
       - rollup
       - supports-color
       - typescript
 
-  vite@5.4.10(@types/node@22.9.0):
+  vite@5.4.11(@types/node@22.9.0):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.49
@@ -11734,22 +11782,22 @@ snapshots:
       bufferutil: 4.0.8
       utf-8-validate: 6.0.4
 
-  wxt@0.19.13(@types/node@22.9.0)(bufferutil@4.0.8)(rollup@4.21.3)(utf-8-validate@6.0.4):
+  wxt@0.19.15(@types/node@22.9.0)(bufferutil@4.0.8)(rollup@4.21.3)(utf-8-validate@6.0.4):
     dependencies:
       '@aklinker1/rollup-plugin-visualizer': 5.12.0(rollup@4.21.3)
-      '@types/chrome': 0.0.269
-      '@types/webextension-polyfill': 0.10.7
+      '@types/chrome': 0.0.280
+      '@types/webextension-polyfill': 0.12.1
       '@webext-core/fake-browser': 1.3.1
       '@webext-core/isolated-element': 1.1.2
       '@webext-core/match-patterns': 1.0.3
+      '@wxt-dev/storage': 1.0.0
       async-mutex: 0.5.0
       c12: 1.11.2(magicast@0.3.5)
       cac: 6.7.14
       chokidar: 3.6.0
-      ci-info: 4.0.0
+      ci-info: 4.1.0
       consola: 3.2.3
       defu: 6.1.4
-      dequal: 2.0.3
       dotenv: 16.4.5
       esbuild: 0.21.5
       fast-glob: 3.3.2
@@ -11765,20 +11813,20 @@ snapshots:
       linkedom: 0.18.5
       magicast: 0.3.5
       minimatch: 10.0.1
-      nano-spawn: 0.1.0
+      nano-spawn: 0.2.0
       normalize-path: 3.0.0
       nypm: 0.3.12
       ohash: 1.1.4
       open: 10.1.0
-      ora: 8.1.0
+      ora: 8.1.1
       perfect-debounce: 1.0.0
-      picocolors: 1.1.0
+      picocolors: 1.1.1
       prompts: 2.4.2
       publish-browser-extension: 2.2.2
       scule: 1.3.0
       unimport: 3.13.1(rollup@4.21.3)
-      vite: 5.4.10(@types/node@22.9.0)
-      vite-node: 2.1.3(@types/node@22.9.0)
+      vite: 5.4.11(@types/node@22.9.0)
+      vite-node: 2.1.5(@types/node@22.9.0)
       web-ext-run: 0.2.1(bufferutil@4.0.8)(utf-8-validate@6.0.4)
       webextension-polyfill: 0.12.0
     transitivePeerDependencies:
diff --git a/src/app/content/App.tsx b/src/app/content/App.tsx
index befa8c8..378e887 100644
--- a/src/app/content/App.tsx
+++ b/src/app/content/App.tsx
@@ -1,3 +1,4 @@
+import '@webcomponents/custom-elements'
 import Header from '@/app/content/views/Header'
 import Footer from '@/app/content/views/Footer'
 import Main from '@/app/content/views/Main'
diff --git a/src/app/content/components/LikeButton.tsx b/src/app/content/components/LikeButton.tsx
index 5357996..f9cc4ce 100644
--- a/src/app/content/components/LikeButton.tsx
+++ b/src/app/content/components/LikeButton.tsx
@@ -1,6 +1,7 @@
 import { type MouseEvent, type FC, type ReactElement } from 'react'
 import { Button } from '@/components/ui/Button'
 import { cn } from '@/utils'
+import NumberFlow from '@number-flow/react'
 
 export interface LikeButtonIconProps {
   children: JSX.Element
@@ -40,7 +41,11 @@ const LikeButton: FC<LikeButtonProps> & { Icon: FC<LikeButtonIconProps> } = ({
       size="xs"
     >
       {children}
-      {!!count && <span className="min-w-0 text-xs">{count}</span>}
+      {!!count && (
+        <span className="min-w-0 text-xs">
+          {import.meta.env.FIREFOX ? <span className="tabular-nums">{count}</span> : <NumberFlow value={count} />}
+        </span>
+      )}
     </Button>
   )
 }
diff --git a/src/app/content/components/MessageItem.tsx b/src/app/content/components/MessageItem.tsx
index ce92931..62f4c28 100644
--- a/src/app/content/components/MessageItem.tsx
+++ b/src/app/content/components/MessageItem.tsx
@@ -1,5 +1,5 @@
 import { type FC } from 'react'
-import { FrownIcon, ThumbsUpIcon } from 'lucide-react'
+import { FrownIcon, HeartIcon } from 'lucide-react'
 import LikeButton from './LikeButton'
 import FormatDate from './FormatDate'
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/Avatar'
@@ -71,7 +71,7 @@ const MessageItem: FC<MessageItemProps> = (props) => {
               count={props.data.likeUsers.length}
             >
               <LikeButton.Icon>
-                <ThumbsUpIcon size={14}></ThumbsUpIcon>
+                <HeartIcon size={14}></HeartIcon>
               </LikeButton.Icon>
             </LikeButton>
             <LikeButton
diff --git a/src/app/content/views/AppButton/index.tsx b/src/app/content/views/AppButton/index.tsx
index ff78511..dda1a38 100644
--- a/src/app/content/views/AppButton/index.tsx
+++ b/src/app/content/views/AppButton/index.tsx
@@ -50,7 +50,7 @@ const AppButton: FC<AppButtonProps> = ({ className }) => {
     minX: 50,
     maxX: window.innerWidth - 50,
     maxY: window.innerHeight - 22,
-    minY: window.innerHeight / 2
+    minY: 750
   })
 
   useWindowResize(({ width, height }) => {
diff --git a/src/app/content/views/Header/index.tsx b/src/app/content/views/Header/index.tsx
index b24c588..20746f5 100644
--- a/src/app/content/views/Header/index.tsx
+++ b/src/app/content/views/Header/index.tsx
@@ -11,6 +11,7 @@ import { ScrollArea } from '@/components/ui/ScrollArea'
 import { Virtuoso } from 'react-virtuoso'
 import AvatarCircles from '@/components/magicui/AvatarCircles'
 import Link from '@/components/Link'
+import NumberFlow from '@number-flow/react'
 
 const Header: FC = () => {
   const siteInfo = getSiteInfo()
@@ -41,7 +42,7 @@ const Header: FC = () => {
 
   return (
     <div className="z-10 grid h-12 grid-flow-col grid-cols-[theme('spacing.20')_auto_theme('spacing.20')] items-center justify-between rounded-t-xl bg-white px-4 backdrop-blur-lg dark:bg-slate-950">
-      <Avatar className="size-8">
+      <Avatar className="size-8 rounded-sm">
         <AvatarImage src={siteInfo.icon} alt="favicon" />
         <AvatarFallback>
           <Globe2Icon size="100%" className="text-gray-400" />
@@ -49,14 +50,14 @@ const Header: FC = () => {
       </Avatar>
       <HoverCard>
         <HoverCardTrigger asChild>
-          <Button className="overflow-hidden p-2" variant="link">
+          <Button className="overflow-hidden rounded-md p-2" variant="link">
             <span className="truncate text-lg font-semibold text-slate-600 dark:text-slate-50">
               {siteInfo.hostname.replace(/^www\./i, '')}
             </span>
           </Button>
         </HoverCardTrigger>
         <HoverCardContent className="w-80 rounded-lg p-0">
-          <ScrollArea className="max-h-96 min-h-[72px] p-2" ref={setVirtualOnlineGroupScrollParentRef}>
+          <ScrollArea type="scroll" className="max-h-96 min-h-[72px] p-2" ref={setVirtualOnlineGroupScrollParentRef}>
             <Virtuoso
               data={virtualOnlineGroup}
               defaultItemHeight={56}
@@ -67,7 +68,7 @@ const Header: FC = () => {
                   href={site.origin}
                   className="grid cursor-pointer grid-cols-[auto_1fr] items-center gap-x-2 rounded-lg px-2 py-1.5 hover:bg-accent hover:text-accent-foreground"
                 >
-                  <Avatar className="size-10">
+                  <Avatar className="size-10 rounded-sm">
                     <AvatarImage src={site.icon} alt="favicon" />
                     <AvatarFallback>
                       <Globe2Icon size="100%" className="text-gray-400" />
@@ -78,23 +79,30 @@ const Header: FC = () => {
                       <h4 className="flex-1 truncate text-sm font-semibold">{site.hostname.replace(/^www\./i, '')}</h4>
                       <div className="shrink-0 text-sm">
                         <div className="flex items-center gap-x-1 text-nowrap text-xs text-slate-500">
-                          <span className="relative flex size-2">
-                            <span
-                              className={cn(
-                                'absolute inline-flex size-full animate-ping rounded-full opacity-75',
-                                site.users.length > 1 ? 'bg-green-400' : 'bg-orange-400'
-                              )}
-                            ></span>
-                            <span
-                              className={cn(
-                                'relative inline-flex size-full rounded-full',
-                                site.users.length > 1 ? 'bg-green-500' : 'bg-orange-500'
-                              )}
-                            ></span>
-                          </span>
-                          <span className="dark:text-slate-50">
-                            ONLINE {site.users.length > 99 ? '99+' : site.users.length}
-                          </span>
+                          <div className="flex items-center gap-x-1 pt-px">
+                            <span className="relative flex size-2">
+                              <span
+                                className={cn(
+                                  'absolute inline-flex size-full animate-ping rounded-full opacity-75',
+                                  site.users.length > 1 ? 'bg-green-400' : 'bg-orange-400'
+                                )}
+                              ></span>
+                              <span
+                                className={cn(
+                                  'relative inline-flex size-full rounded-full',
+                                  site.users.length > 1 ? 'bg-green-500' : 'bg-orange-500'
+                                )}
+                              ></span>
+                            </span>
+                            <span className="flex items-center leading-none dark:text-slate-50">
+                              <span className="py-[0.25em]">ONLINE</span>
+                            </span>
+                          </div>
+                          {import.meta.env.FIREFOX ? (
+                            <span className="tabular-nums">{site.users.length}</span>
+                          ) : (
+                            <NumberFlow className="tabular-nums" willChange value={site.users.length} />
+                          )}
                         </div>
                       </div>
                     </div>
@@ -108,33 +116,45 @@ const Header: FC = () => {
       </HoverCard>
       <HoverCard>
         <HoverCardTrigger asChild>
-          <Button className="p-0" variant="link">
-            <div className="flex items-center gap-x-1 text-nowrap text-xs text-slate-500">
-              <span className="relative flex size-2">
-                <span
-                  className={cn(
-                    'absolute inline-flex size-full animate-ping rounded-full opacity-75',
-                    chatOnlineCount > 1 ? 'bg-green-400' : 'bg-orange-400'
-                  )}
-                ></span>
-                <span
-                  className={cn(
-                    'relative inline-flex size-full rounded-full',
-                    chatOnlineCount > 1 ? 'bg-green-500' : 'bg-orange-500'
-                  )}
-                ></span>
-              </span>
-              <span className="dark:text-slate-50">ONLINE {chatOnlineCount > 99 ? '99+' : chatOnlineCount}</span>
+          <Button className=" rounded-md p-0  hover:no-underline" variant="link">
+            <div className="relative flex items-center gap-x-1 text-nowrap text-xs  text-slate-500 hover:after:absolute hover:after:bottom-0  hover:after:left-0 hover:after:h-px hover:after:w-full hover:after:bg-black">
+              <div className="flex items-center gap-x-1 pt-px">
+                <span className="relative flex size-2">
+                  <span
+                    className={cn(
+                      'absolute inline-flex size-full animate-ping rounded-full opacity-75',
+                      chatOnlineCount > 1 ? 'bg-green-400' : 'bg-orange-400'
+                    )}
+                  ></span>
+                  <span
+                    className={cn(
+                      'relative inline-flex size-full rounded-full',
+                      chatOnlineCount > 1 ? 'bg-green-500' : 'bg-orange-500'
+                    )}
+                  ></span>
+                </span>
+                <span className="flex items-center leading-none dark:text-slate-50">
+                  <span className="py-[0.25em]">ONLINE</span>
+                </span>
+              </div>
+              {import.meta.env.FIREFOX ? (
+                <span className="tabular-nums">{Math.min(chatUserList.length, 99)}</span>
+              ) : (
+                <span className="tabular-nums">
+                  <NumberFlow className="tabular-nums" willChange value={Math.min(chatUserList.length, 99)} />
+                  {chatUserList.length > 99 && <span className="text-xs">+</span>}
+                </span>
+              )}
             </div>
           </Button>
         </HoverCardTrigger>
         <HoverCardContent className="w-36 rounded-lg p-0">
-          <ScrollArea className="max-h-[204px] min-h-9 p-1" ref={setChatUserListScrollParentRef}>
+          <ScrollArea type="scroll" className="max-h-[204px] min-h-9 p-1" ref={setChatUserListScrollParentRef}>
             <Virtuoso
               data={chatUserList}
               defaultItemHeight={28}
               customScrollParent={chatUserListScrollParentRef!}
-              itemContent={(index, user) => (
+              itemContent={(_index, user) => (
                 <div className={cn('flex  items-center gap-x-2 rounded-md px-2 py-1.5 outline-none')}>
                   <Avatar className="size-4 shrink-0">
                     <AvatarImage className="size-full" src={user.userAvatar} alt="avatar" />
diff --git a/src/utils/getSiteInfo.ts b/src/utils/getSiteInfo.ts
index d32b9ba..a5c7651 100644
--- a/src/utils/getSiteInfo.ts
+++ b/src/utils/getSiteInfo.ts
@@ -10,6 +10,21 @@ export interface SiteInfo {
   description: string
 }
 
+const getIcon = (): string => {
+  const path =
+    document.querySelector('link[rel="icon" i]')?.getAttribute('href') ??
+    document.querySelector('link[rel="shortcut icon" i]')?.getAttribute('href') ??
+    document.querySelector('meta[property="og:image" i]')?.getAttribute('content') ??
+    document.querySelector('link[rel="apple-touch-icon" i]')?.getAttribute('href') ??
+    `/favicon.ico`
+
+  if (path.startsWith('data:') || path.startsWith('//')) {
+    return path
+  } else {
+    return buildFullURL(document.location.origin, path)
+  }
+}
+
 const getSiteInfo = (): SiteInfo => {
   return {
     host: document.location.host,
@@ -20,14 +35,7 @@ const getSiteInfo = (): SiteInfo => {
       document.querySelector('meta[property="og:site_name" i]')?.getAttribute('content') ??
       document.querySelector('meta[property="og:title" i]')?.getAttribute('content') ??
       document.title,
-    icon: buildFullURL(
-      document.location.origin,
-      document.querySelector('link[rel="icon" i]')?.getAttribute('href') ??
-        document.querySelector('link[rel="shortcut icon" i]')?.getAttribute('href') ??
-        document.querySelector('meta[property="og:image" i]')?.getAttribute('content') ??
-        document.querySelector('link[rel="apple-touch-icon" i]')?.getAttribute('href') ??
-        `/favicon.ico`
-    ),
+    icon: getIcon(),
     description:
       document.querySelector('meta[property="og:description i"]')?.getAttribute('content') ??
       document.querySelector('meta[name="description" i]')?.getAttribute('content') ??