diff --git a/package.json b/package.json
index adc54e08..af2f7415 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "@types/webextension-polyfill": "^0.8.3",
     "@typescript-eslint/eslint-plugin": "^5.25.0",
     "@vitejs/plugin-vue": "^2.3.3",
+    "@volar-plugins/vetur": "^0.1.0",
     "@vue/compiler-sfc": "^3.2.35",
     "@vue/test-utils": "^2.0.0",
     "@vueuse/core": "^8.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 71a59516..377c158e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,6 +10,7 @@ specifiers:
   '@types/webextension-polyfill': ^0.8.3
   '@typescript-eslint/eslint-plugin': ^5.25.0
   '@vitejs/plugin-vue': ^2.3.3
+  '@volar-plugins/vetur': ^0.1.0
   '@vue/compiler-sfc': ^3.2.35
   '@vue/test-utils': ^2.0.0
   '@vueuse/core': ^8.5.0
@@ -56,6 +57,7 @@ devDependencies:
   '@types/webextension-polyfill': 0.8.3
   '@typescript-eslint/eslint-plugin': 5.36.2_yqf6kl63nyoq5megxukfnom5rm
   '@vitejs/plugin-vue': 2.3.4_vite@2.9.15+vue@3.2.38
+  '@volar-plugins/vetur': 0.1.0
   '@vue/compiler-sfc': 3.2.38
   '@vue/test-utils': 2.0.2_vue@3.2.38
   '@vueuse/core': 8.9.4_vue@3.2.38
@@ -198,6 +200,12 @@ packages:
     resolution: {integrity: sha512-CQkeV+oJxUazwjlHD0/3ZD08QWKuGQkhnrKo3e6ly5pd48VUpXbb77q0xMU4+vc2CkJnDS02Eq/M9ugyX20XZA==}
     dev: true
 
+  /@babel/code-frame/7.12.11:
+    resolution: {integrity: sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==}
+    dependencies:
+      '@babel/highlight': 7.14.5
+    dev: true
+
   /@babel/code-frame/7.14.5:
     resolution: {integrity: sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==}
     engines: {node: '>=6.9.0'}
@@ -315,6 +323,23 @@ packages:
     dev: true
     optional: true
 
+  /@eslint/eslintrc/0.4.3:
+    resolution: {integrity: sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.3.4
+      espree: 7.3.1
+      globals: 13.17.0
+      ignore: 4.0.6
+      import-fresh: 3.3.0
+      js-yaml: 3.14.1
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@eslint/eslintrc/1.3.1:
     resolution: {integrity: sha512-OhSY22oQQdw3zgPOOwdoj01l/Dzl1Z+xyUP33tkSN+aqyEhymJCcPHyXt+ylW8FSe0TfRC2VG+ROQOapD0aZSQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -356,6 +381,17 @@ packages:
       - supports-color
     dev: true
 
+  /@humanwhocodes/config-array/0.5.0:
+    resolution: {integrity: sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==}
+    engines: {node: '>=10.10.0'}
+    dependencies:
+      '@humanwhocodes/object-schema': 1.2.1
+      debug: 4.3.4
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@humanwhocodes/config-array/0.9.5:
     resolution: {integrity: sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==}
     engines: {node: '>=10.10.0'}
@@ -404,8 +440,8 @@ packages:
       - supports-color
     dev: true
 
-  /@intlify/bundle-utils/3.2.1_vue-i18n@9.1.9:
-    resolution: {integrity: sha512-rf4cLBOnbqmpXVcCdcYHilZpMt1m82syh3WLBJlZvGxN2KkH9HeHVH4+bnibF/SDXCHNh6lM6wTpS/qw+PkcMg==}
+  /@intlify/bundle-utils/3.4.0_vue-i18n@9.1.9:
+    resolution: {integrity: sha512-2UQkqiSAOSPEHMGWlybqWm4G2K0X+FyYho5AwXz6QklSX1EY5EDmOSxZmwscn2qmKBnp6OYsme5kUrnN9xrWzQ==}
     engines: {node: '>= 12'}
     peerDependencies:
       petite-vue-i18n: '*'
@@ -416,8 +452,8 @@ packages:
       vue-i18n:
         optional: true
     dependencies:
-      '@intlify/message-compiler': 9.3.0-beta.6
-      '@intlify/shared': 9.3.0-beta.6
+      '@intlify/message-compiler': 9.3.0-beta.10
+      '@intlify/shared': 9.3.0-beta.10
       jsonc-eslint-parser: 1.4.1
       source-map: 0.6.1
       vue-i18n: 9.1.9_vue@3.2.38
@@ -449,11 +485,11 @@ packages:
       '@intlify/shared': 9.1.9
       source-map: 0.6.1
 
-  /@intlify/message-compiler/9.3.0-beta.6:
-    resolution: {integrity: sha512-3PJqRJoqvFHExA9DCkf7fZYKbvYne1tYQ0fptJAhUOZsELarh8wr4aPLKWCkQSRuutdrtZ/n5CcPgJgUmVthDw==}
+  /@intlify/message-compiler/9.3.0-beta.10:
+    resolution: {integrity: sha512-RoOC6yceOykLRhN0NlbkNOBUx1el6iphx3W8NfOx3jHVNtfT1FYokx14/5sU3F1F0uxeG4sp6q+ppKvaF8o+ww==}
     engines: {node: '>= 14'}
     dependencies:
-      '@intlify/shared': 9.3.0-beta.6
+      '@intlify/shared': 9.3.0-beta.10
       source-map: 0.6.1
     dev: true
 
@@ -473,8 +509,8 @@ packages:
     resolution: {integrity: sha512-xKGM1d0EAxdDFCWedcYXOm6V5Pfw/TMudd6/qCdEb4tv0hk9EKeg7lwQF1azE0dP2phvx0yXxrt7UQK+IZjNdw==}
     engines: {node: '>= 10'}
 
-  /@intlify/shared/9.3.0-beta.6:
-    resolution: {integrity: sha512-ITA1R4tvJYwZXT5x6QCSwxcwQ4dU52zrzVm/EUbgsp8oWzYS1xexBrxyNM80PSQudYvL2rvcZJKQ7yBh7b0LkQ==}
+  /@intlify/shared/9.3.0-beta.10:
+    resolution: {integrity: sha512-h93uAanbAt/XgjDHclrVB7xix6r7Uz11wx0iGNOCdHP7aA2LCJjUT3uNbekJjjbo+Fl5jzTSJZdm2SexzoqhRA==}
     engines: {node: '>= 14'}
     dev: true
 
@@ -493,8 +529,8 @@ packages:
       vue-i18n:
         optional: true
     dependencies:
-      '@intlify/bundle-utils': 3.2.1_vue-i18n@9.1.9
-      '@intlify/shared': 9.3.0-beta.6
+      '@intlify/bundle-utils': 3.4.0_vue-i18n@9.1.9
+      '@intlify/shared': 9.3.0-beta.10
       '@rollup/pluginutils': 4.2.1
       debug: 4.3.4
       fast-glob: 3.2.11
@@ -803,6 +839,28 @@ packages:
       vue: 3.2.38
     dev: true
 
+  /@volar-plugins/vetur/0.1.0:
+    resolution: {integrity: sha512-Qaws7TI8d/kkjihSQrW/3YGqiLeLZ1dMjfxDBe4vJKhzXw82sN4+Wr8NwGf2s15KyVDPQTjkPHv6ukn4vFD9Og==}
+    dependencies:
+      '@volar/vue-language-service-types': 0.34.17
+      vls: 0.8.2
+      vscode-html-languageservice: 5.0.3
+      vscode-uri: 3.0.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@volar/vue-language-service-types/0.34.17:
+    resolution: {integrity: sha512-skDO8ZS6Vs0M+zbnYeoBWk7JX8WbCeCohOwnkstqYxXtcqEU4HTeTShhVxrfyWGS0FLHVE79VAhicxjul2EnHw==}
+    dependencies:
+      vscode-languageserver-protocol: 3.17.2
+      vscode-languageserver-textdocument: 1.0.7
+    dev: true
+
+  /@vscode/l10n/0.0.10:
+    resolution: {integrity: sha512-E1OCmDcDWa0Ya7vtSjp/XfHFGqYJfh+YPC1RkATU71fTac+j1JjCcB3qwSzmlKAighx2WxhLlfhS0RwAN++PFQ==}
+    dev: true
+
   /@vue/compiler-core/3.2.38:
     resolution: {integrity: sha512-/FsvnSu7Z+lkd/8KXMa4yYNUiqQrI22135gfsQYVGuh5tqEgOB0XqrUdb/KnCLa5+TmQLPwvyUnKMyCpu+SX3Q==}
     dependencies:
@@ -1091,12 +1149,26 @@ packages:
       uri-js: 4.4.1
     dev: true
 
+  /ajv/8.11.2:
+    resolution: {integrity: sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+      uri-js: 4.4.1
+    dev: true
+
   /ansi-align/3.0.0:
     resolution: {integrity: sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==}
     dependencies:
       string-width: 3.1.0
     dev: true
 
+  /ansi-colors/4.1.3:
+    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
+    engines: {node: '>=6'}
+    dev: true
+
   /ansi-regex/4.1.0:
     resolution: {integrity: sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==}
     engines: {node: '>=6'}
@@ -1162,6 +1234,12 @@ packages:
       zip-stream: 2.1.3
     dev: true
 
+  /argparse/1.0.10:
+    resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
+    dependencies:
+      sprintf-js: 1.0.3
+    dev: true
+
   /argparse/2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
@@ -1227,6 +1305,11 @@ packages:
     resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
     dev: true
 
+  /astral-regex/2.0.0:
+    resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
+    engines: {node: '>=8'}
+    dev: true
+
   /async/0.2.10:
     resolution: {integrity: sha512-eAkdoKxU6/LkKDBzLpT+t6Ff5EtfSF4wx1WfJiPEEV7WNLnDaRXk0oVysiEPm262roaachGexwUv94WhSgN5TQ==}
     dev: true
@@ -1355,6 +1438,11 @@ packages:
       ieee754: 1.2.1
     dev: true
 
+  /builtin-modules/1.1.1:
+    resolution: {integrity: sha512-wxXCdllwGhI2kCC0MnvTGYTMvnVZTvqgypkiTI8Pa5tcz2i6VqsqwYGgqwXji+4RgCzms6EajE4IxiUH6HH8nQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /builtin-modules/3.2.0:
     resolution: {integrity: sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==}
     engines: {node: '>=6'}
@@ -1464,6 +1552,12 @@ packages:
     resolution: {integrity: sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==}
     dev: true
 
+  /character-parser/2.2.0:
+    resolution: {integrity: sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==}
+    dependencies:
+      is-regex: 1.1.4
+    dev: true
+
   /character-reference-invalid/1.1.4:
     resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
     dev: true
@@ -1932,6 +2026,11 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: true
 
+  /diff/4.0.2:
+    resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
+    engines: {node: '>=0.3.1'}
+    dev: true
+
   /dir-glob/3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -2043,6 +2142,13 @@ packages:
       once: 1.4.0
     dev: true
 
+  /enquirer/2.3.6:
+    resolution: {integrity: sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==}
+    engines: {node: '>=8.6'}
+    dependencies:
+      ansi-colors: 4.1.3
+    dev: true
+
   /entities/2.2.0:
     resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
     dev: true
@@ -2803,6 +2909,21 @@ packages:
       strip-indent: 3.0.0
     dev: true
 
+  /eslint-plugin-vue/7.20.0_eslint@7.32.0:
+    resolution: {integrity: sha512-oVNDqzBC9h3GO+NTgWeLMhhGigy6/bQaQbHS+0z7C4YEu/qK/yxHvca/2PTZtGNPsCrHwOTgKMrwu02A9iPBmw==}
+    engines: {node: '>=8.10'}
+    peerDependencies:
+      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      eslint: 7.32.0
+      eslint-utils: 2.1.0
+      natural-compare: 1.4.0
+      semver: 6.3.0
+      vue-eslint-parser: 7.11.0_eslint@7.32.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /eslint-plugin-vue/8.7.1_eslint@8.23.0:
     resolution: {integrity: sha512-28sbtm4l4cOzoO1LtzQPxfxhQABararUb1JtqusQqObJpWX2e/gmVyeYVfepizPFne0Q5cILkYGiBoV36L12Wg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2893,6 +3014,55 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
+  /eslint/7.32.0:
+    resolution: {integrity: sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    hasBin: true
+    dependencies:
+      '@babel/code-frame': 7.12.11
+      '@eslint/eslintrc': 0.4.3
+      '@humanwhocodes/config-array': 0.5.0
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.3
+      debug: 4.3.4
+      doctrine: 3.0.0
+      enquirer: 2.3.6
+      escape-string-regexp: 4.0.0
+      eslint-scope: 5.1.1
+      eslint-utils: 2.1.0
+      eslint-visitor-keys: 2.1.0
+      espree: 7.3.1
+      esquery: 1.4.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 6.0.1
+      functional-red-black-tree: 1.0.1
+      glob-parent: 5.1.2
+      globals: 13.17.0
+      ignore: 4.0.6
+      import-fresh: 3.3.0
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      js-yaml: 3.14.1
+      json-stable-stringify-without-jsonify: 1.0.1
+      levn: 0.4.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.1
+      progress: 2.0.3
+      regexpp: 3.2.0
+      semver: 7.3.7
+      strip-ansi: 6.0.1
+      strip-json-comments: 3.1.1
+      table: 6.8.1
+      text-table: 0.2.0
+      v8-compile-cache: 2.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /eslint/8.11.0:
     resolution: {integrity: sha512-/KRpd9mIRg2raGxHRGwW9ZywYNAClZrHjdueHcrVDuO3a6bj83eoTirCCk0M0yPwOjWYKHwRVRid+xK4F/GHgA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -3001,6 +3171,15 @@ packages:
       eslint-visitor-keys: 1.3.0
     dev: true
 
+  /espree/7.3.1:
+    resolution: {integrity: sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    dependencies:
+      acorn: 7.4.1
+      acorn-jsx: 5.3.2_acorn@7.4.1
+      eslint-visitor-keys: 1.3.0
+    dev: true
+
   /espree/9.3.1:
     resolution: {integrity: sha512-bvdyLmJMfwkV3NCRl5ZhJf22zBFo1y8bYh3VYb+bfzqNB4Je68P2sSuXyuFquzWLebHpNd2/d5uv7yoP9ISnGQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -3673,6 +3852,11 @@ packages:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     dev: true
 
+  /ignore/4.0.6:
+    resolution: {integrity: sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==}
+    engines: {node: '>= 4'}
+    dev: true
+
   /ignore/5.2.0:
     resolution: {integrity: sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==}
     engines: {node: '>= 4'}
@@ -3864,6 +4048,13 @@ packages:
     hasBin: true
     dev: true
 
+  /is-expression/4.0.0:
+    resolution: {integrity: sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==}
+    dependencies:
+      acorn: 7.4.1
+      object-assign: 4.1.1
+    dev: true
+
   /is-extglob/2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -4047,6 +4238,14 @@ packages:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
     dev: true
 
+  /js-yaml/3.14.1:
+    resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
+    hasBin: true
+    dependencies:
+      argparse: 1.0.10
+      esprima: 4.0.1
+    dev: true
+
   /js-yaml/4.1.0:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
@@ -4122,6 +4321,10 @@ packages:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
     dev: true
 
+  /json-schema-traverse/1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+    dev: true
+
   /json-schema/0.2.3:
     resolution: {integrity: sha512-a3xHnILGMtk+hDOqNwHzF6e2fNbiMrXZvxKQiEv2MlgQP+pjIOzqAmKYD2mDpXYE/44M7g+n9p2bKkYWDUcXCQ==}
     dev: true
@@ -4381,6 +4584,10 @@ packages:
     resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==}
     dev: true
 
+  /lodash.truncate/4.4.2:
+    resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==}
+    dev: true
+
   /lodash.union/4.6.0:
     resolution: {integrity: sha1-SLtQiECfFvGCFmZkHETdGqrjzYg=}
     dev: true
@@ -4575,7 +4782,6 @@ packages:
     dependencies:
       minimist: 1.2.6
     dev: true
-    optional: true
 
   /mkdirp/1.0.4:
     resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
@@ -5190,6 +5396,12 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /prettier/2.8.0:
+    resolution: {integrity: sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    dev: true
+
   /process-nextick-args/2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
     dev: true
@@ -5226,6 +5438,18 @@ packages:
     resolution: {integrity: sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==}
     dev: true
 
+  /pug-error/2.0.0:
+    resolution: {integrity: sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ==}
+    dev: true
+
+  /pug-lexer/5.0.1:
+    resolution: {integrity: sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==}
+    dependencies:
+      character-parser: 2.2.0
+      is-expression: 4.0.0
+      pug-error: 2.0.0
+    dev: true
+
   /pump/3.0.0:
     resolution: {integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==}
     dependencies:
@@ -5421,6 +5645,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /require-from-string/2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /requires-port/1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
     dev: true
@@ -5685,6 +5914,15 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /slice-ansi/4.0.0:
+    resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      astral-regex: 2.0.0
+      is-fullwidth-code-point: 3.0.0
+    dev: true
+
   /sonic-boom/2.8.0:
     resolution: {integrity: sha512-kuonw1YOYYNOve5iHdSahXPOK49GqwA+LZhI6Wz/l0rP57iKyXXIHaRagOBHAPmGwJC6od2Z9zgvZ5loSgMlVg==}
     dependencies:
@@ -5769,6 +6007,10 @@ packages:
     engines: {node: '>= 10.x'}
     dev: true
 
+  /sprintf-js/1.0.3:
+    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
+    dev: true
+
   /sshpk/1.16.1:
     resolution: {integrity: sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==}
     engines: {node: '>=0.10.0'}
@@ -5992,6 +6234,17 @@ packages:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
     dev: true
 
+  /table/6.8.1:
+    resolution: {integrity: sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==}
+    engines: {node: '>=10.0.0'}
+    dependencies:
+      ajv: 8.11.2
+      lodash.truncate: 4.4.2
+      slice-ansi: 4.0.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+    dev: true
+
   /tar-stream/2.2.0:
     resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
     engines: {node: '>=6'}
@@ -6129,6 +6382,30 @@ packages:
     resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
     dev: true
 
+  /tslint/6.1.3_typescript@4.8.2:
+    resolution: {integrity: sha512-IbR4nkT96EQOvKE2PW/djGz8iGNeJ4rF2mBfiYaR/nvUWYKJhLwimoJKgjIFEIDibBtOevj7BqCRL4oHeWWUCg==}
+    engines: {node: '>=4.8.0'}
+    deprecated: TSLint has been deprecated in favor of ESLint. Please see https://github.com/palantir/tslint/issues/4534 for more information.
+    hasBin: true
+    peerDependencies:
+      typescript: '>=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev || >=2.7.0-dev || >=2.8.0-dev || >=2.9.0-dev || >=3.0.0-dev || >= 3.1.0-dev || >= 3.2.0-dev || >= 4.0.0-dev'
+    dependencies:
+      '@babel/code-frame': 7.14.5
+      builtin-modules: 1.1.1
+      chalk: 2.4.2
+      commander: 2.20.3
+      diff: 4.0.2
+      glob: 7.2.0
+      js-yaml: 3.14.1
+      minimatch: 3.1.2
+      mkdirp: 0.5.5
+      resolve: 1.22.1
+      semver: 5.7.1
+      tslib: 1.14.1
+      tsutils: 2.29.0_typescript@4.8.2
+      typescript: 4.8.2
+    dev: true
+
   /tsup/5.12.9_typescript@4.8.2:
     resolution: {integrity: sha512-dUpuouWZYe40lLufo64qEhDpIDsWhRbr2expv5dHEMjwqeKJS2aXA/FPqs1dxO4T6mBojo7rvo3jP9NNzaKyDg==}
     hasBin: true
@@ -6164,6 +6441,15 @@ packages:
       - ts-node
     dev: true
 
+  /tsutils/2.29.0_typescript@4.8.2:
+    resolution: {integrity: sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==}
+    peerDependencies:
+      typescript: '>=2.1.0 || >=2.1.0-dev || >=2.2.0-dev || >=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev || >=2.7.0-dev || >=2.8.0-dev || >=2.9.0-dev || >= 3.0.0-dev || >= 3.1.0-dev'
+    dependencies:
+      tslib: 1.14.1
+      typescript: 4.8.2
+    dev: true
+
   /tsutils/3.21.0_typescript@4.8.2:
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
@@ -6609,6 +6895,54 @@ packages:
       - supports-color
     dev: true
 
+  /vls/0.8.2:
+    resolution: {integrity: sha512-esrJmf7yRY5rlG7d5Jmucp7P2ZeWHOi7p1aADwxbPiN69SgNUq1Tp24YJ0vUXiEU8mgOW0tf0dL4f6LlSu6K/g==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      eslint: 7.32.0
+      eslint-plugin-vue: 7.20.0_eslint@7.32.0
+      prettier: 2.8.0
+      pug-lexer: 5.0.1
+      tslint: 6.1.3_typescript@4.8.2
+      typescript: 4.8.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /vscode-html-languageservice/5.0.3:
+    resolution: {integrity: sha512-6rfrtcHhXDMXmC5pR2WXrx02HiNCzQDynOBMn+53zLxr2hvZrDzoc0QgC0FaFGfcglf7GeOsfhkWvJBFC/a70g==}
+    dependencies:
+      '@vscode/l10n': 0.0.10
+      vscode-languageserver-textdocument: 1.0.7
+      vscode-languageserver-types: 3.17.2
+      vscode-uri: 3.0.6
+    dev: true
+
+  /vscode-jsonrpc/8.0.2:
+    resolution: {integrity: sha512-RY7HwI/ydoC1Wwg4gJ3y6LpU9FJRZAUnTYMXthqhFXXu77ErDd/xkREpGuk4MyYkk4a+XDWAMqe0S3KkelYQEQ==}
+    engines: {node: '>=14.0.0'}
+    dev: true
+
+  /vscode-languageserver-protocol/3.17.2:
+    resolution: {integrity: sha512-8kYisQ3z/SQ2kyjlNeQxbkkTNmVFoQCqkmGrzLH6A9ecPlgTbp3wDTnUNqaUxYr4vlAcloxx8zwy7G5WdguYNg==}
+    dependencies:
+      vscode-jsonrpc: 8.0.2
+      vscode-languageserver-types: 3.17.2
+    dev: true
+
+  /vscode-languageserver-textdocument/1.0.7:
+    resolution: {integrity: sha512-bFJH7UQxlXT8kKeyiyu41r22jCZXG8kuuVVA33OEJn1diWOZK5n8zBSPZFHVBOu8kXZ6h0LIRhf5UnCo61J4Hg==}
+    dev: true
+
+  /vscode-languageserver-types/3.17.2:
+    resolution: {integrity: sha512-zHhCWatviizPIq9B7Vh9uvrH6x3sK8itC84HkamnBWoDFJtzBf7SWlpLCZUit72b3os45h6RWQNC9xHRDF8dRA==}
+    dev: true
+
+  /vscode-uri/3.0.6:
+    resolution: {integrity: sha512-fmL7V1eiDBFRRnu+gfRWTzyPpNIHJTc4mWnFkwBUmO9U3KPgJAmTx7oxi2bl/Rh6HLdU7+4C9wlj0k2E4AdKFQ==}
+    dev: true
+
   /vue-demi/0.12.5_vue@3.2.38:
     resolution: {integrity: sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==}
     engines: {node: '>=12'}
@@ -6624,6 +6958,24 @@ packages:
       vue: 3.2.38
     dev: true
 
+  /vue-eslint-parser/7.11.0_eslint@7.32.0:
+    resolution: {integrity: sha512-qh3VhDLeh773wjgNTl7ss0VejY9bMMa0GoDG2fQVyDzRFdiU3L7fw74tWZDHNQXdZqxO3EveQroa9ct39D2nqg==}
+    engines: {node: '>=8.10'}
+    peerDependencies:
+      eslint: '>=5.0.0'
+    dependencies:
+      debug: 4.3.4
+      eslint: 7.32.0
+      eslint-scope: 5.1.1
+      eslint-visitor-keys: 1.3.0
+      espree: 6.2.1
+      esquery: 1.4.0
+      lodash: 4.17.21
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /vue-eslint-parser/8.3.0_eslint@8.23.0:
     resolution: {integrity: sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
diff --git a/src/background/apis/history.ts b/src/background/apis/history.ts
index a4795039..ed254cf8 100644
--- a/src/background/apis/history.ts
+++ b/src/background/apis/history.ts
@@ -4,7 +4,7 @@ import { API_URL } from '.'
 export const setupHistoryAPIs = () => {
   browser.runtime.onMessage.addListener((message) => {
     if (message.contentScriptQuery === 'getHistoryList') {
-      const url = `https://${API_URL}/x/web-interface/history/cursor`
+      const url = `${API_URL}/x/web-interface/history/cursor?ps=20&type=${message.type}&view_at=${message.viewAt}`
       return fetch(url)
         .then(response => response.json())
         .then(data => (data))
diff --git a/src/background/apis/index.ts b/src/background/apis/index.ts
index 4a44ad24..115307b1 100644
--- a/src/background/apis/index.ts
+++ b/src/background/apis/index.ts
@@ -4,6 +4,7 @@ import { setupUserAPIs } from './user'
 import { setupSearchAPIs } from './search'
 import { setupNotificationsAPIs } from './notifications'
 import { setupMomentsAPIs } from './moments'
+import { setupHistoryAPIs } from './history'
 
 export const APP_URL = 'https://app.bilibili.com'
 export const API_URL = 'https://api.bilibili.com'
@@ -15,4 +16,5 @@ export const setupAllAPIs = () => {
   setupSearchAPIs()
   setupNotificationsAPIs()
   setupMomentsAPIs()
+  setupHistoryAPIs()
 }
diff --git a/src/components/Progress.vue b/src/components/Progress.vue
new file mode 100644
index 00000000..65d6fe56
--- /dev/null
+++ b/src/components/Progress.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{
+  percentage: number
+}>()
+</script>
+
+<template>
+  <div
+    bg="$bew-theme-color"
+    h="6px"
+    border="rounded-$bew-radius"
+    :style="{ width: `${percentage}%` }"
+  />
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/Topbar/HistoryDropdown.vue b/src/components/Topbar/HistoryDropdown.vue
index 224e0605..2629117c 100644
--- a/src/components/Topbar/HistoryDropdown.vue
+++ b/src/components/Topbar/HistoryDropdown.vue
@@ -1,299 +1,161 @@
-<script lang="ts">
-import { isNewArticle, isNewVideo, setLastestOffsetID } from './notify'
-import { language } from '~/logic'
-import { calcTimeSince, getUserID } from '~/utils'
-import type { MomentItem } from '~/types'
-import { LanguageType, MomentType } from '~/types'
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { Ref } from 'vue'
+import { onMounted, reactive, ref, watch } from 'vue'
+import { useDateFormat } from '@vueuse/core'
+import type { HistoryItem } from './types'
+import { HistoryType } from './types'
+import { calcCurrentTime } from '~/utils'
+const { t } = useI18n()
 
-export default defineComponent({
-  data() {
-    return {
-      moments: [] as MomentItem[],
-      calcTimeSince,
-      MomentType,
-      momentTabs: [
-        {
-          id: 0,
-          name: this.$t('topbar.moments_dropdown.tabs.videos'),
-          isSelected: true,
-        },
-        {
-          id: 1,
-          name: this.$t('topbar.moments_dropdown.tabs.live'),
-          isSelected: false,
-        },
-        {
-          id: 2,
-          name: this.$t('topbar.moments_dropdown.tabs.articles'),
-          isSelected: false,
-        },
-      ],
-      selectedTab: 0,
-      isLoading: false,
-      // when noMoreContent is true, the user can't scroll down to load more content
-      noMoreContent: false,
-      livePage: 1,
-      LanguageType,
-      language,
-    }
+const historys = reactive<Array<HistoryItem>>([])
+const historyTabs = reactive([
+  {
+    id: 0,
+    name: t('topbar.moments_dropdown.tabs.videos'),
+    isSelected: true,
   },
-  watch: {
-    selectedTab(newVal: number, oldVal: number) {
-      if (newVal === oldVal)
-        return
-
-      this.scrollToTop(this.$refs.momentsWrap as HTMLElement, 300)
-      this.moments = []
-      if (newVal === 0) {
-        this.getNewMoments([MomentType.Video, MomentType.Bangumi])
-      }
-      else if (newVal === 1) {
-        this.livePage = 1
-        this.getLiveMoments(this.livePage)
-      }
-      else if (newVal === 2) {
-        this.getNewMoments([MomentType.Article])
-      }
-    },
+  {
+    id: 1,
+    name: t('topbar.moments_dropdown.tabs.live'),
+    isSelected: false,
   },
-  mounted() {
-    this.getNewMoments([MomentType.Video, MomentType.Bangumi])
+  {
+    id: 2,
+    name: t('topbar.moments_dropdown.tabs.articles'),
+    isSelected: false,
+  },
+])
+const selectedTab = ref<number>(0)
+const isLoading = ref<boolean>(false)
+// when noMoreContent is true, the user can't scroll down to load more content
+const noMoreContent = ref<boolean>(false)
+const livePage = ref<number>(1)
+const historysWrap = ref<HTMLElement>() as Ref<HTMLElement>
 
-    const momentsWrap = this.$refs.momentsWrap as HTMLDivElement
-    momentsWrap.addEventListener('scroll', () => {
+watch(selectedTab, (newVal: number, oldVal: number) => {
+  if (newVal === oldVal)
+    return
+
+  historys.length = 0
+  if (historysWrap.value)
+    scrollToTop(historysWrap.value, 300)
+
+  if (newVal === 0) {
+    getHistoryList(HistoryType.Archive)
+  }
+  else if (newVal === 1) {
+    livePage.value = 1
+    getHistoryList(HistoryType.Live)
+  }
+  else if (newVal === 2) {
+    getHistoryList(HistoryType.Article)
+  }
+})
+
+onMounted(() => {
+  getHistoryList(HistoryType.Archive)
+
+  if (historysWrap.value) {
+    historysWrap.value.addEventListener('scroll', () => {
+      // When you scroll to the bottom, they will automatically
+      // add the next page of data to the history list
       if (
-        momentsWrap.clientHeight + momentsWrap.scrollTop
-          >= momentsWrap.scrollHeight
-        && this.moments.length > 0
-        && !this.isLoading
+        historysWrap.value.clientHeight + historysWrap.value.scrollTop
+          >= historysWrap.value.scrollHeight - 20
+        && historys.length > 0
+        && !isLoading.value
       ) {
-        if (this.selectedTab === 0 && !this.noMoreContent)
-          this.getHistoryMoments([MomentType.Video, MomentType.Bangumi])
-        else if (this.selectedTab === 1 && !this.noMoreContent)
-          this.getLiveMoments(this.livePage)
-        else if (this.selectedTab === 2 && !this.noMoreContent)
-          this.getHistoryMoments([MomentType.Article])
+        if (selectedTab.value === 0 && !noMoreContent.value) {
+          getHistoryList(
+            HistoryType.Archive,
+            historys[historys.length - 1].view_at,
+          )
+        }
+        else if (selectedTab.value === 1 && !noMoreContent.value) {
+          getHistoryList(
+            HistoryType.Live,
+            historys[historys.length - 1].view_at,
+          )
+        }
+        else if (selectedTab.value === 2 && !noMoreContent.value) {
+          getHistoryList(
+            HistoryType.Article,
+            historys[historys.length - 1].view_at,
+          )
+        }
       }
     })
-  },
-  methods: {
-    onClickTab(tabId: number) {
-      // Prevent changing tab when loading, cuz it will cause a bug
-      if (this.isLoading)
-        return
-
-      this.selectedTab = tabId
-      this.momentTabs.forEach((tab) => {
-        tab.isSelected = tab.id === tabId
-      })
-    },
-    getHistoryList() {
-      this.isLoading = true
-      browser.runtime
-        .sendMessage({
-          contentScriptQuery: 'getHistoryList',
-          // uid: getUserID(),
-          // typeList,
-        })
-        .then((res) => {
-          if (res.code === 0) {
-            if (this.moments.length !== 0 && res.data.cards.length < 20) {
-              this.isLoading = false
-              this.noMoreContent = true
-              return
-            }
-
-            res.data.cards.forEach((item: any) => {
-              this.pushItemIntoMoments(item)
-            })
-
-            // set this lastest offset id, which will clear the new moment's marker point
-            // after you watch these moments.
-            if (this.selectedTab === 0)
-              setLastestOffsetID(MomentType.Video, this.moments[0].id)
-            else if (this.selectedTab === 2)
-              setLastestOffsetID(MomentType.Article, this.moments[0].id)
-
-            this.noMoreContent = false
-          }
-          this.isLoading = false
-        })
-    },
-
-    getNewMoments(typeList: number[]) {
-      this.isLoading = true
-      browser.runtime
-        .sendMessage({
-          contentScriptQuery: 'getNewMoments',
-          uid: getUserID(),
-          typeList,
-        })
-        .then((res) => {
-          if (res.code === 0) {
-            if (this.moments.length !== 0 && res.data.cards.length < 20) {
-              this.isLoading = false
-              this.noMoreContent = true
-              return
-            }
-
-            res.data.cards.forEach((item: any) => {
-              this.pushItemIntoMoments(item)
-            })
-
-            // set this lastest offset id, which will clear the new moment's marker point
-            // after you watch these moments.
-            if (this.selectedTab === 0)
-              setLastestOffsetID(MomentType.Video, this.moments[0].id)
-            else if (this.selectedTab === 2)
-              setLastestOffsetID(MomentType.Article, this.moments[0].id)
-
-            this.noMoreContent = false
-          }
-          this.isLoading = false
-        })
-    },
-    getHistoryMoments(typeList: number[]) {
-      this.isLoading = true
-      browser.runtime
-        .sendMessage({
-          contentScriptQuery: 'getHistoryMoments',
-          uid: getUserID(),
-          typeList,
-          offsetDynamicID: this.moments[this.moments.length - 1].dynamic_id_str,
-        })
-        .then((res) => {
-          if (res.code === 0) {
-            if (res.data.has_more === 0) {
-              this.isLoading = false
-              this.noMoreContent = true
-              return
-            }
-
-            res.data.cards.forEach((item: any) => {
-              this.pushItemIntoMoments(item)
-            })
-            this.noMoreContent = false
-          }
-          this.isLoading = false
-        })
-    },
-    getLiveMoments(page: number) {
-      this.isLoading = true
-      browser.runtime
-        .sendMessage({
-          contentScriptQuery: 'getLiveMoments',
-          page,
-          pageSize: 10,
-        })
-        .then((res) => {
-          if (res.code === 0) {
-            // if the length of this list is less then the pageSize, it means that it have no more contents
-            if (this.moments.length !== 0 && res.data.list.length < 10) {
-              this.isLoading = false
-              this.noMoreContent = true
-              return
-            }
-
-            // if the length of this list is equal to the pageSize, this means that it may have the next page.
-            if (res.data.list.length === 10)
-              this.livePage++
-            res.data.list.forEach((item: any) => {
-              this.moments.push({
-                id: item.roomid,
-                uid: item.uid,
-                name: item.uname,
-                face: item.face,
-                url: item.link,
-                title: item.title,
-                cover: item.pic,
-              } as MomentItem)
-            })
-            this.noMoreContent = false
-          }
-          this.isLoading = false
-        })
-    },
-    pushItemIntoMoments(item: any) {
-      const card = JSON.parse(item.card)
-
-      if (item.desc.type === MomentType.Video) {
-        // if this is a video moment
-        this.moments.push({
-          type: item.desc.type,
-          id: item.desc.dynamic_id,
-          uid: item.desc.uid,
-          name: item.desc.user_profile.info.uname,
-          face: item.desc.user_profile.info.face,
-          aid: card.aid,
-          bvid: item.desc.bvid,
-          url: card.short_link_v2,
-          ctime: card.ctime,
-          title: card.title,
-          cover: card.pic,
-          dynamic_id_str: item.desc.dynamic_id_str,
-          isNew: isNewVideo(item.desc.dynamic_id),
-        } as MomentItem)
-      }
-      else if (item.desc.type === MomentType.Bangumi) {
-        // bangumi moment
-        this.moments.push({
-          type: item.desc.type,
-          id: item.desc.dynamic_id,
-          name: card.apiSeasonInfo.title,
-          face: card.apiSeasonInfo.cover,
-          episode_id: card.episode_id,
-          url: card.url,
-          title: card.new_desc,
-          cover: card.cover,
-          dynamic_id_str: item.desc.dynamic_id_str,
-          isNew: isNewVideo(item.desc.dynamic_id),
-        } as MomentItem)
-      }
-      else if (item.desc.type === MomentType.Article) {
-        // article moment
-        this.moments.push({
-          type: item.desc.type,
-          id: item.desc.dynamic_id,
-          uid: item.desc.uid,
-          name: item.desc.user_profile.info.uname,
-          face: item.desc.user_profile.info.face,
-          url: `https://www.bilibili.com/read/cv${card.id}`,
-          ctime: card.publish_time,
-          title: card.title,
-          cover: card.image_urls[0],
-          dynamic_id_str: item.desc.dynamic_id_str,
-          isNew: isNewArticle(item.desc.dynamic_id),
-        } as MomentItem)
-      }
-    },
-    /**
-     * smooth scroll to the top of the html element
-     */
-    scrollToTop(element: HTMLElement, duration: number) {
-      // cancel if already on top
-      if (element.scrollTop === 0)
-        return
-
-      const cosParameter = element.scrollTop / 2
-      let scrollCount = 0
-      let oldTimestamp = 0
-
-      function step(newTimestamp: number) {
-        if (oldTimestamp !== 0) {
-          // if duration is 0 scrollCount will be Infinity
-          scrollCount += (Math.PI * (newTimestamp - oldTimestamp)) / duration
-          if (scrollCount >= Math.PI)
-            return (element.scrollTop = 0)
-          element.scrollTop
-            = cosParameter + cosParameter * Math.cos(scrollCount)
-        }
-        oldTimestamp = newTimestamp
-        window.requestAnimationFrame(step)
-      }
-      window.requestAnimationFrame(step)
-    },
-  },
+  }
 })
+
+function onClickTab(tabId: number) {
+  // Prevent changing tab when loading, cuz it will cause a bug
+  if (isLoading.value)
+    return
+
+  selectedTab.value = tabId
+  historyTabs.forEach((tab) => {
+    tab.isSelected = tab.id === tabId
+  })
+}
+
+/**
+ * Get history list
+ * @param {HistoryType} type
+ * @param {number} viewAt Last viewed timestamp
+ */
+function getHistoryList(type: HistoryType, viewAt = 0 as number) {
+  isLoading.value = true
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'getHistoryList',
+      type,
+      viewAt,
+    })
+    .then((res) => {
+      if (res.code === 0) {
+        if (historys.length !== 0 && res.data.list.length < 20) {
+          isLoading.value = false
+          noMoreContent.value = true
+          return
+        }
+
+        res.data.list.forEach((item: HistoryItem) => {
+          historys.push(item)
+        })
+
+        noMoreContent.value = false
+      }
+      isLoading.value = false
+    })
+}
+
+/**
+ * smooth scroll to the top of the html element
+ */
+function scrollToTop(element: HTMLElement, duration: number) {
+  // cancel if already on top
+  if (element.scrollTop === 0)
+    return
+
+  const cosParameter = element.scrollTop / 2
+  let scrollCount = 0
+  let oldTimestamp = 0
+
+  function step(newTimestamp: number) {
+    if (oldTimestamp !== 0) {
+      // if duration is 0 scrollCount will be Infinity
+      scrollCount += (Math.PI * (newTimestamp - oldTimestamp)) / duration
+      if (scrollCount >= Math.PI)
+        return (element.scrollTop = 0)
+      element.scrollTop = cosParameter + cosParameter * Math.cos(scrollCount)
+    }
+    oldTimestamp = newTimestamp
+    window.requestAnimationFrame(step)
+  }
+  window.requestAnimationFrame(step)
+}
 </script>
 
 <template>
@@ -303,6 +165,7 @@ export default defineComponent({
     rounded="$bew-radius"
     pos="relative"
     style="box-shadow: var(--bew-shadow-2)"
+    overflow="hidden"
   >
     <!-- top bar -->
     <div
@@ -312,13 +175,13 @@ export default defineComponent({
       pos="fixed top-0 left-0"
       w="full"
       bg="$bew-content-1"
-      z="1"
+      z="2"
       border="!rounded-t-$bew-radius"
       style="backdrop-filter: var(--bew-filter-glass)"
     >
       <div flex="~">
         <div
-          v-for="tab in momentTabs"
+          v-for="tab in historyTabs"
           :key="tab.id"
           m="r-4"
           transition="all duration-300"
@@ -335,110 +198,156 @@ export default defineComponent({
       </a>
     </div>
 
-    <!-- moments wrapper -->
-    <div ref="momentsWrap" h="430px" overflow="y-scroll" p="x-4">
+    <!-- historys wrapper -->
+    <div
+      ref="historysWrap"
+      flex="~ col gap-4"
+      h="430px"
+      overflow="y-scroll"
+      p="x-4"
+    >
       <!-- loading -->
-      <loading
-        v-if="isLoading && moments.length === 0"
+      <Loading
+        v-if="isLoading && historys.length === 0"
+        pos="absolute left-0"
+        bg="$bew-content-1"
+        z="1"
+        w="full"
         h="full"
         flex="~"
         items="center"
       />
 
       <!-- empty -->
-      <empty v-if="!isLoading && moments.length === 0" w="full" h="full" />
+      <Empty v-if="!isLoading && historys.length === 0" w="full" h="full" />
 
-      <!-- moments -->
+      <!-- historys -->
       <transition-group name="list">
         <a
-          v-for="(moment, index) in moments"
-          :key="index"
-          :href="moment.url"
+          v-for="historyItem in historys"
+          :key="historyItem.kid"
+          :href="
+            historyItem.history.bvid
+              ? historyItem.history.bvid
+              : `/read/cv${historyItem.history.oid}`
+          "
           target="_blank"
-          flex="~"
-          justify="between"
-          m="b-4"
-          first:m="t-16"
-          p="2"
-          rounded="$bew-radius"
           hover:bg="$bew-fill-2"
-          transition="all duration-300"
-          cursor="pointer"
-          pos="relative"
+          border="rounded-$bew-radius"
+          p="2"
+          m="first:t-50px last:b-4"
+          class="group"
+          transition="duration"
         >
-          <!-- new moment dot -->
-          <div
-            v-if="moment.isNew"
-            rounded="full"
-            w="8px"
-            h="8px"
-            m="t-2 l-2"
-            bg="$bew-theme-color"
-            pos="absolute -top-10px -left-10px"
-            style="box-shadow: 0 0 4px var(--bew-theme-color)"
-          />
-
-          <a
-            :href="
-              moment.type === MomentType.Video
-                ? `https://space.bilibili.com/${moment.uid}`
-                : moment.url
-            "
-            target="_blank"
-          >
-            <img
-              :src="`${moment.face}@60w_60h_1c`"
-              rounded="$bew-radius"
-              w="40px"
-              h="40px"
-              m="r-4"
+          <section flex="~ gap-4" align="item-start">
+            <!-- Video cover, live cover, ariticle cover -->
+            <div
+              bg="$bew-fill-1"
+              w="150px"
+              flex="shrink-0"
+              border="rounded-$bew-radius-half"
+              overflow="hidden"
             >
-          </a>
+              <!-- Video -->
+              <template v-if="selectedTab === 0">
+                <div pos="relative">
+                  <img
+                    w="150px"
+                    class="aspect-video"
+                    :src="`${historyItem.cover}@256w_144h_1c`"
+                    :alt="historyItem.title"
+                    bg="contain"
+                  >
+                  <div
+                    pos="absolute bottom-0 right-0"
+                    bg="black opacity-60"
+                    m="1"
+                    p="x-2 y-1"
+                    text="white xs"
+                    border="rounded-full"
+                    opacity="0"
+                    group-hover:opacity="100"
+                  >
+                    {{
+                      `${calcCurrentTime(historyItem.progress)} /
+                    ${calcCurrentTime(historyItem.duration)}`
+                    }}
+                  </div>
+                </div>
+                <Progress
+                  :percentage="
+                    (historyItem.progress / historyItem.duration) * 100
+                  "
+                />
+              </template>
 
-          <div flex="~" justify="between" w="full">
-            <div>
-              <span>{{ moment.name }}</span>
-              {{ $t('topbar.moments_dropdown.uploaded') }}{{ moment.title }}
-              <div
-                v-if="moment.type !== MomentType.Bangumi"
-                text="$bew-text-2 sm"
-                m="y-2"
-              >
-                <!-- Videos and articles -->
-                <div v-if="selectedTab === 0 || selectedTab === 2">
-                  {{ calcTimeSince(new Date(moment.ctime * 1000))
-                  }}{{
-                    language === LanguageType.English
-                      ? ` ${$t('common.ago')}`
-                      : $t('common.ago')
-                  }}
+              <!-- Live -->
+              <template v-else-if="selectedTab === 1">
+                <div pos="relative">
+                  <img
+                    w="150px"
+                    class="aspect-video"
+                    :src="`${historyItem.cover}@256w_144h_1c`"
+                    :alt="historyItem.title"
+                    bg="contain"
+                  >
                 </div>
-                <!-- Live -->
-                <div
-                  v-else-if="selectedTab === 1"
-                  text="$bew-theme-color"
-                  font="bold"
-                  flex="~"
-                  items="center"
+              </template>
+
+              <!-- Article -->
+              <div v-else-if="selectedTab === 2">
+                <img
+                  w="150px"
+                  class="aspect-video"
+                  :src="`${
+                    Array.isArray(historyItem.covers)
+                      ? historyItem.covers[0]
+                      : ''
+                  }@256w_144h_1c`"
+                  :alt="historyItem.title"
+                  bg="contain"
                 >
-                  <fluent:live-24-filled m="r-2" />
-                  {{ $t('topbar.moments_dropdown.live_status') }}
-                </div>
               </div>
             </div>
-            <img
-              :src="`${moment.cover}@128w_72h_1c`"
-              w="82px"
-              h="46px"
-              m="l-4"
-              rounded="$bew-radius"
-            >
-          </div>
+
+            <!-- Description -->
+            <div>
+              <h3
+                style="
+                  -webkit-line-clamp: 2;
+                  -webkit-box-orient: vertical;
+                  display: -webkit-box;
+                "
+                overflow="hidden"
+                text="overflow-ellipsis"
+              >
+                {{ historyItem.title }}
+              </h3>
+              <div text="$bew-text-2 sm" m="t-4" flex="~" align="items-center">
+                {{ historyItem.author_name }}
+                <span
+                  v-if="historyItem.live_status === 1"
+                  text="$bew-theme-color"
+                  m="l-2"
+                ><tabler:live-photo />
+                  Live
+                </span>
+              </div>
+              <p text="$bew-text-2 sm">
+                {{
+                  useDateFormat(
+                    historyItem.view_at * 1000,
+                    'YYYY-MM-DD HH:mm:ss',
+                  ).value
+                }}
+              </p>
+            </div>
+          </section>
         </a>
       </transition-group>
 
       <!-- loading -->
-      <loading v-if="isLoading && moments.length !== 0" m="-t-4" />
+      <loading v-if="isLoading && historys.length !== 0" m="-t-4" />
     </div>
   </div>
 </template>
diff --git a/src/components/Topbar/MomentsDropdown.vue b/src/components/Topbar/MomentsDropdown.vue
index 590bd5e4..deaceff6 100644
--- a/src/components/Topbar/MomentsDropdown.vue
+++ b/src/components/Topbar/MomentsDropdown.vue
@@ -3,10 +3,11 @@ import { useI18n } from 'vue-i18n'
 import type { Ref, UnwrapNestedRefs } from 'vue'
 import { onMounted, reactive, ref, watch } from 'vue'
 import { isNewArticle, isNewVideo, setLastestOffsetID } from './notify'
+import { MomentType } from './types'
+import type { MomentItem } from './types'
 import { language } from '~/logic'
 import { calcTimeSince, getUserID } from '~/utils'
-import type { MomentItem } from '~/types'
-import { LanguageType, MomentType } from '~/types'
+import { LanguageType } from '~/enums/appEnums'
 const { t } = useI18n()
 
 const moments = reactive<Array<MomentItem>>([]) as UnwrapNestedRefs<
diff --git a/src/components/Topbar/index.vue b/src/components/Topbar/index.vue
index c2ce8cf5..a899061d 100644
--- a/src/components/Topbar/index.vue
+++ b/src/components/Topbar/index.vue
@@ -5,7 +5,7 @@ import { updateInterval } from './notify'
 import { getUserID } from '~/utils'
 
 export default defineComponent({
-  components: { MomentsDropdown },
+  components: { MomentsDropdown, HistoryDropdown },
   data() {
     return {
       mid: getUserID() || '',
@@ -16,7 +16,7 @@ export default defineComponent({
       showNotificationsDropDown: false,
       showMomentsDropDown: false,
       showUploadDropDown: false,
-      showHistoryDropDown: false,
+      showHistoryDropDown: true,
       isLogin: !!getUserID(),
       unReadmessage: {},
       unReadDm: {},
@@ -36,7 +36,8 @@ export default defineComponent({
     this.initUserPanel()
 
     document.addEventListener('scroll', () => {
-      if (window.scrollY > 0) this.showTopbarMask = true
+      if (window.scrollY > 0)
+        this.showTopbarMask = true
       else this.showTopbarMask = false
     })
   },
@@ -82,34 +83,38 @@ export default defineComponent({
           contentScriptQuery: 'getUserInfo',
         })
         .then((res) => {
-          if (res.code === 0) this.userInfo = res.data
+          if (res.code === 0)
+            this.userInfo = res.data
         })
     },
     async getUnreadMessageCount() {
-      if (!this.isLogin) return
+      if (!this.isLogin)
+        return
 
       await browser.runtime
         .sendMessage({
           contentScriptQuery: 'getUnreadMsg',
         })
-        .then((res) => (this.unReadmessage = res.data))
+        .then(res => (this.unReadmessage = res.data))
 
       await browser.runtime
         .sendMessage({
           contentScriptQuery: 'getUnreadDm',
         })
-        .then((res) => (this.unReadDm = res.data))
+        .then(res => (this.unReadDm = res.data))
 
       this.unReadmessageCount = 0
       for (const [key, value] of Object.entries(this.unReadmessage)) {
-        if (key !== 'up') this.unReadmessageCount += parseInt(`${value}`)
+        if (key !== 'up')
+          this.unReadmessageCount += parseInt(`${value}`)
       }
 
       for (const [, value] of Object.entries(this.unReadDm))
         this.unReadmessageCount += parseInt(`${value}`)
     },
     getNewMomentsCount() {
-      if (!this.isLogin) return
+      if (!this.isLogin)
+        return
 
       browser.runtime
         .sendMessage({
@@ -220,7 +225,7 @@ export default defineComponent({
             :style="{
               backgroundImage: `url(${`${userInfo.face}`.replace(
                 'http:',
-                ''
+                '',
               )})`,
             }"
           />
@@ -232,7 +237,7 @@ export default defineComponent({
             :style="{
               backgroundImage: `url(${`${userInfo.face}`.replace(
                 'http:',
-                ''
+                '',
               )})`,
             }"
           />
@@ -310,7 +315,7 @@ export default defineComponent({
         <div
           class="right-side-item"
           @mouseenter="showHistoryDropDown = true"
-          @mouseleave="showHistoryDropDown = false"
+          @mouseleave="showHistoryDropDown = true"
         >
           <a
             href="https://www.bilibili.com/account/history"
diff --git a/src/components/Topbar/notify.ts b/src/components/Topbar/notify.ts
index f9be49e2..4afc45e3 100644
--- a/src/components/Topbar/notify.ts
+++ b/src/components/Topbar/notify.ts
@@ -1,5 +1,5 @@
-import { MomentType } from '~/types'
-import { getUserID, getCookie, setCookie } from '~/utils'
+import { MomentType } from './types'
+import { getCookie, getUserID, setCookie } from '~/utils'
 
 /** Update the time interval of topbar notifications and moments counts */
 export const updateInterval = 1000 * 60 * 5 // Updated every 5 minutes
diff --git a/src/components/Topbar/types.ts b/src/components/Topbar/types.ts
new file mode 100644
index 00000000..8bd91b7f
--- /dev/null
+++ b/src/components/Topbar/types.ts
@@ -0,0 +1,57 @@
+export enum MomentType {
+  Video = 8,
+  Article = 64,
+  Bangumi = 512,
+  PGC = 4097,
+  Movie = 4098,
+  TvShow = 4099,
+  ChineseAnime = 4100,
+  Documentary = 4101,
+}
+
+export interface MomentItem {
+  type?: MomentType
+  id: number
+  uid: number
+  name: string
+  face: string
+  aid?: number
+  bvid?: string
+  episode_id?: number
+  url: string
+  ctime?: number
+  title: string
+  cover: string
+  dynamic_id_str?: string
+  isNew: boolean
+}
+
+// https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/history&toview/history.md#%E8%8E%B7%E5%8F%96%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95%E5%88%97%E8%A1%A8_web%E7%AB%AF
+export enum HistoryType {
+  Archive = 'archive', // archive：稿件
+  PGC = 'pgc', // pgc：剧集 (番剧 / 影视)
+  Live = 'live', // live：直播
+  ArticleList = 'article-list', // article-list：文集
+  Article = 'article', // article：文章
+}
+
+export interface HistoryItem {
+  title: string
+  cover: string
+  covers: Array<string> | null
+  history: {
+    business: HistoryType
+    epid?: number
+    bvid?: string
+    part?: string
+    oid: number
+  }
+  author_name: string
+  author_face: string
+  author_mid: string
+  view_at: number
+  progress: number
+  duration: number
+  kid: number
+  live_status: 0 | 1 // 0：未开播 1：已开播
+}
diff --git a/src/contentScripts/views/Home/RecommendContent.vue b/src/contentScripts/views/Home/RecommendContent.vue
index 7ed6fb57..82d57996 100644
--- a/src/contentScripts/views/Home/RecommendContent.vue
+++ b/src/contentScripts/views/Home/RecommendContent.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { accessKey, language } from '~/logic/index'
 import { calcCurrentTime, calcTimeSince, numFormatter } from '~/utils'
-import { LanguageType } from '~/types'
+import { LanguageType } from '~/enums/appEnums'
 
 export default defineComponent({
   data() {
@@ -25,13 +25,17 @@ export default defineComponent({
     }, 2000)
 
     window.onscroll = async () => {
-      if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
+      if (window.innerHeight + window.scrollY >= document.body.scrollHeight) {
         if (!this.isLoading)
           return
 
-        if (this.videoList.length <= (this.MAX_LIMIT - 20)) {
-          await this.getRecommendVideos(this.videoList[this.videoList.length - 1]?.idx)
-          await this.getRecommendVideos(this.videoList[this.videoList.length - 1]?.idx)
+        if (this.videoList.length <= this.MAX_LIMIT - 20) {
+          await this.getRecommendVideos(
+            this.videoList[this.videoList.length - 1]?.idx,
+          )
+          await this.getRecommendVideos(
+            this.videoList[this.videoList.length - 1]?.idx,
+          )
         }
         else {
           this.isLoading = false
@@ -41,12 +45,11 @@ export default defineComponent({
   },
   methods: {
     async getRecommendVideos(idx?: number) {
-      const response = await browser.runtime
-        .sendMessage({
-          contentScriptQuery: 'getRecommendVideos',
-          idx,
-          accessKey: this.accessKey,
-        })
+      const response = await browser.runtime.sendMessage({
+        contentScriptQuery: 'getRecommendVideos',
+        idx,
+        accessKey: this.accessKey,
+      })
 
       if (response.code === 0) {
         const resData = [] as any[]
@@ -72,7 +75,15 @@ export default defineComponent({
     gotoVideo(uri: string) {
       window.open(`/video/av${uri.split('/')[3]}`)
     },
-    submitDislike(videoIndex: number, reasonID: number, goto: string, id: string, mid: string, rid: string, tagID: string) {
+    submitDislike(
+      videoIndex: number,
+      reasonID: number,
+      goto: string,
+      id: string,
+      mid: string,
+      rid: string,
+      tagID: string,
+    ) {
       browser.runtime
         .sendMessage({
           contentScriptQuery: 'submitDislike',
@@ -91,7 +102,15 @@ export default defineComponent({
           }
         })
     },
-    undoDislike(videoIndex: number, reasonID: number, goto: string, id: string, mid: string, rid: string, tagID: string) {
+    undoDislike(
+      videoIndex: number,
+      reasonID: number,
+      goto: string,
+      id: string,
+      mid: string,
+      rid: string,
+      tagID: string,
+    ) {
       browser.runtime
         .sendMessage({
           contentScriptQuery: 'undoDislike',
@@ -121,12 +140,14 @@ export default defineComponent({
       done()
     },
   },
-
 })
 </script>
 
 <template>
-  <div m="lg:x-22 <lg:x-16 b-0 t-0" grid="~ xl:cols-4 lg:cols-3 md:cols-2 gap-4">
+  <div
+    m="lg:x-22 <lg:x-16 b-0 t-0"
+    grid="~ xl:cols-4 lg:cols-3 md:cols-2 gap-4"
+  >
     <transition-group name="list" @enter="onEnter">
       <div
         v-for="(video, index) in videoList"
@@ -148,22 +169,24 @@ export default defineComponent({
             border="solid $bew-fill-1"
             text="$bew-text-3 sm center"
             rounded="$bew-radius"
-            style="aspect-ratio: 16/9;"
+            style="aspect-ratio: 16/9"
           >
             {{ $t('home.video_removed') }}
             <button
               text="$bew-theme-color base"
               font="bold"
               m="t-4"
-              @click="undoDislike(
-                index,
-                video.selectedReasonID,
-                video.goto,
-                video.param,
-                video.mid,
-                video.tid,
-                video.tag.tag_id,
-              )"
+              @click="
+                undoDislike(
+                  index,
+                  video.selectedReasonID,
+                  video.goto,
+                  video.param,
+                  video.mid,
+                  video.tid,
+                  video.tag.tag_id,
+                )
+              "
             >
               {{ $t('common.undo') }}
             </button>
@@ -177,16 +200,28 @@ export default defineComponent({
                 class="overflow-hidden w-full relative rounded-$bew-radius z-1"
                 style="aspect-ratio: 16/9"
               >
-                <img class="cover" :src="`${video.cover.replace('http:', '')}@672w_378h_1c`" loading="lazy">
+                <img
+                  class="cover"
+                  :src="`${video.cover.replace('http:', '')}@672w_378h_1c`"
+                  loading="lazy"
+                >
               </div>
-              <img class="cover-shadow" :src="`${video.cover.replace('http:', '')}@672w_378h_1c`" loading="lazy">
+              <img
+                class="cover-shadow"
+                :src="`${video.cover.replace('http:', '')}@672w_378h_1c`"
+                loading="lazy"
+              >
             </div>
           </a>
           <div class="detail">
             <div class="flex">
-              <a class="avatar" cursor="pointer" @click="gotoChannel(video.mid)">
+              <a
+                class="avatar"
+                cursor="pointer"
+                @click="gotoChannel(video.mid)"
+              >
                 <img
-                  :src="`${(`${video.face}`).replace('http:', '')}@60w_60h_1c`"
+                  :src="`${`${video.face}`.replace('http:', '')}@60w_60h_1c`"
                   width="48"
                   height="48"
                   loading="lazy"
@@ -232,7 +267,10 @@ export default defineComponent({
                     w="180px"
                     bg="$bew-content-1"
                     rounded="$bew-radius"
-                    style="box-shadow: var(--bew-shadow-2); backdrop-filter: var(--bew-filter-glass);"
+                    style="
+                      box-shadow: var(--bew-shadow-2);
+                      backdrop-filter: var(--bew-filter-glass);
+                    "
                   >
                     <p p="2" text="$bew-text-3">
                       {{ $t('home.not_interested_in') }}
@@ -247,13 +285,17 @@ export default defineComponent({
                         hover:bg="$bew-fill-2"
                         transition="all duration-300"
                         rounded="$bew-radius"
-                        @click.stop="submitDislike(index,
-                                                   reason.reason_id,
-                                                   video.goto,
-                                                   video.param,
-                                                   video.mid,
-                                                   video.tid,
-                                                   video.tag.tag_id)"
+                        @click.stop="
+                          submitDislike(
+                            index,
+                            reason.reason_id,
+                            video.goto,
+                            video.param,
+                            video.mid,
+                            video.tid,
+                            video.tag.tag_id,
+                          )
+                        "
                       >
                         {{ reason.reason_name }}
                       </li>
@@ -265,13 +307,19 @@ export default defineComponent({
                 {{ video.name }}
               </div>
               <div class="video-info">
-                {{ numFormatter(video.play) }}{{ language === LanguageType.English
-                  ? ` ${$t('common.view', video.play)}`
-                  : $t('common.view', video.play) }}
+                {{ numFormatter(video.play)
+                }}{{
+                  language === LanguageType.English
+                    ? ` ${$t('common.view', video.play)}`
+                    : $t('common.view', video.play)
+                }}
                 <span class="text-xs font-light">•</span>
-                {{ calcTimeSince(new Date(video.ctime * 1000)) }}{{ language === LanguageType.English
-                  ? ` ${$t('common.ago')}`
-                  : $t('common.ago') }}
+                {{ calcTimeSince(new Date(video.ctime * 1000))
+                }}{{
+                  language === LanguageType.English
+                    ? ` ${$t('common.ago')}`
+                    : $t('common.ago')
+                }}
               </div>
             </div>
           </div>
@@ -292,7 +340,7 @@ export default defineComponent({
     justify="center"
   >
     <button
-      style="box-shadow: var(--bew-shadow-1);"
+      style="box-shadow: var(--bew-shadow-1)"
       bg="!$bew-theme-color"
       w="60px"
       h="60px"
diff --git a/src/types/index.ts b/src/enums/appEnums.ts
similarity index 78%
rename from src/types/index.ts
rename to src/enums/appEnums.ts
index e8587d65..f1600538 100644
--- a/src/types/index.ts
+++ b/src/enums/appEnums.ts
@@ -1,5 +1,3 @@
-export * from './topbar/moments'
-
 export enum LanguageType {
   English = 'en',
   Mandarin_SC = 'cmn-SC',
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 38c56165..df0bf625 100755
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,11 +1,15 @@
 :root {
   --bew-radius: 12px;
+  --bew-radius-half: calc(var(--bew-radius) / 2);
 
   --bew-filter-glass: blur(20px) saturate(180%);
 
-  --bew-shadow-1: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --bew-shadow-2: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --bew-shadow-3: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --bew-shadow-1: 0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --bew-shadow-2: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --bew-shadow-3: 0 20px 25px -5px rgb(0 0 0 / 0.1),
+    0 8px 10px -6px rgb(0 0 0 / 0.1);
   --bew-shadow-4: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 
   --bew-theme-color: rgb(0, 161, 214);
@@ -47,7 +51,7 @@
 @supports not (backdrop-filter: blur(15px)) {
   :root,
   :root.dark {
-    --bew-content-1:  var(--bew-content-solid-1);
+    --bew-content-1: var(--bew-content-solid-1);
   }
 }
 
@@ -58,6 +62,10 @@ body,
   padding: 0;
 }
 
+html {
+  filter: none !important;
+}
+
 body {
   background: var(--bew-bg);
   color: var(--bew-text-1);
diff --git a/src/types/topbar/moments.ts b/src/types/topbar/moments.ts
deleted file mode 100644
index 78ba515a..00000000
--- a/src/types/topbar/moments.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export enum MomentType {
-  Video = 8,
-  Article = 64,
-  Bangumi = 512,
-  PGC = 4097,
-  Movie = 4098,
-  TvShow = 4099,
-  ChineseAnime = 4100,
-  Documentary = 4101,
-}
-
-export interface MomentItem {
-  type?: MomentType
-  id: number
-  uid: number
-  name: string
-  face: string
-  aid?: number
-  bvid?: string
-  episode_id?: number
-  url: string
-  ctime?: number
-  title: string
-  cover: string
-  dynamic_id_str?: string
-  isNew: boolean
-}
diff --git a/src/utils/dataFormatter.ts b/src/utils/dataFormatter.ts
index 52fec3e5..ed31ed19 100644
--- a/src/utils/dataFormatter.ts
+++ b/src/utils/dataFormatter.ts
@@ -36,8 +36,8 @@ export const numFormatter = (num: number) => {
   return item ? (num / item.value).toFixed(digits).replace(rx, '$1') + item.symbol : '0'
 }
 
-export const calcTimeSince = (date: any) => {
-  const seconds = Math.floor(((new Date() as any) - date) / 1000)
+export const calcTimeSince = (date: number | string) => {
+  const seconds = Math.floor(((Number(new Date())) - Number(date)) / 1000)
   let interval = seconds / 31536000
   if (interval > 1)
     return `${Math.floor(interval)} ${t('common.year', Math.floor(interval))}`
diff --git a/volar.config.js b/volar.config.js
new file mode 100644
index 00000000..e238545f
--- /dev/null
+++ b/volar.config.js
@@ -0,0 +1,5 @@
+const vetur = require('@volar-plugins/vetur')
+
+module.exports = {
+  plugins: [vetur()],
+}