diff --git a/website/package.json b/website/package.json
index d1a4d26b..83a2374c 100644
--- a/website/package.json
+++ b/website/package.json
@@ -5,10 +5,10 @@
 	"license": "MPL-2.0",
 	"private": true,
 	"type": "module",
-    "engines": {
-        "node": ">=18",
-        "pnpm": ">=8"
-    },
+	"engines": {
+		"node": ">=18",
+		"pnpm": ">=8"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/tachiyomiorg/website.git"
@@ -69,6 +69,9 @@
 	},
 	"dependencies": {
 		"@mdi/js": "^7.2.96",
+		"axios": "^1.4.0",
+		"element-plus": "^2.3.9",
+		"lodash.groupby": "^4.6.0",
 		"vitepress-plugin-auto-sidebar": "^1.1.0"
 	}
 }
diff --git a/website/pnpm-lock.yaml b/website/pnpm-lock.yaml
index ade45950..b0caea70 100644
--- a/website/pnpm-lock.yaml
+++ b/website/pnpm-lock.yaml
@@ -8,6 +8,15 @@ dependencies:
   '@mdi/js':
     specifier: ^7.2.96
     version: 7.2.96
+  axios:
+    specifier: ^1.4.0
+    version: 1.4.0
+  element-plus:
+    specifier: ^2.3.9
+    version: 2.3.9(vue@3.3.4)
+  lodash.groupby:
+    specifier: ^4.6.0
+    version: 4.6.0
   vitepress-plugin-auto-sidebar:
     specifier: ^1.1.0
     version: 1.1.0
@@ -84,7 +93,7 @@ devDependencies:
     version: 1.8.1(eslint@8.46.0)(vite@4.4.9)
   vitepress:
     specifier: ^1.0.0-rc.4
-    version: 1.0.0-rc.4(@algolia/client-search@4.19.1)(search-insights@2.7.0)(stylus@0.59.0)
+    version: 1.0.0-rc.4(@algolia/client-search@4.19.1)(axios@1.4.0)(search-insights@2.7.0)(stylus@0.59.0)
   vue:
     specifier: ^3.3.4
     version: 3.3.4
@@ -248,12 +257,10 @@ packages:
   /@babel/helper-string-parser@7.22.5:
     resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/helper-validator-identifier@7.22.5:
     resolution: {integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/highlight@7.22.10:
     resolution: {integrity: sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==}
@@ -270,7 +277,6 @@ packages:
     hasBin: true
     dependencies:
       '@babel/types': 7.22.10
-    dev: true
 
   /@babel/types@7.22.10:
     resolution: {integrity: sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==}
@@ -279,7 +285,6 @@ packages:
       '@babel/helper-string-parser': 7.22.5
       '@babel/helper-validator-identifier': 7.22.5
       to-fast-properties: 2.0.0
-    dev: true
 
   /@csstools/css-parser-algorithms@2.3.1(@csstools/css-tokenizer@2.2.0):
     resolution: {integrity: sha512-xrvsmVUtefWMWQsGgFffqWSK03pZ1vfDki4IVIIUxxDKnGBzqNgv0A7SB1oXtVNEkcVO8xi1ZrTL29HhSu5kGA==}
@@ -315,6 +320,11 @@ packages:
       postcss-selector-parser: 6.0.13
     dev: true
 
+  /@ctrl/tinycolor@3.6.0:
+    resolution: {integrity: sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ==}
+    engines: {node: '>=10'}
+    dev: false
+
   /@docsearch/css@3.5.1:
     resolution: {integrity: sha512-2Pu9HDg/uP/IT10rbQ+4OrTQuxIWdKVUEdcw9/w7kZJv9NeHS6skJx1xuRiFyoGKwAzcHXnLp7csE99sj+O1YA==}
     dev: true
@@ -355,6 +365,14 @@ packages:
       - search-insights
     dev: true
 
+  /@element-plus/icons-vue@2.1.0(vue@3.3.4):
+    resolution: {integrity: sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      vue: 3.3.4
+    dev: false
+
   /@esbuild/android-arm64@0.18.20:
     resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
     engines: {node: '>=12'}
@@ -590,6 +608,23 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
+  /@floating-ui/core@1.4.1:
+    resolution: {integrity: sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==}
+    dependencies:
+      '@floating-ui/utils': 0.1.1
+    dev: false
+
+  /@floating-ui/dom@1.5.1:
+    resolution: {integrity: sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==}
+    dependencies:
+      '@floating-ui/core': 1.4.1
+      '@floating-ui/utils': 0.1.1
+    dev: false
+
+  /@floating-ui/utils@0.1.1:
+    resolution: {integrity: sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==}
+    dev: false
+
   /@humanwhocodes/config-array@0.11.10:
     resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==}
     engines: {node: '>=10.10.0'}
@@ -624,7 +659,6 @@ packages:
 
   /@jridgewell/sourcemap-codec@1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-    dev: true
 
   /@mdi/js@7.2.96:
     resolution: {integrity: sha512-paR9M9ZT7rKbh2boksNUynuSZMHhqRYnEZOm/KrZTjQ4/FzyhjLHuvw/8XYzP+E7fS4+/Ms/82EN1pl/OFsiIA==}
@@ -721,6 +755,10 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /@sxzz/popperjs-es@2.11.7:
+    resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
+    dev: false
+
   /@types/eslint@8.44.2:
     resolution: {integrity: sha512-sdPRb9K6iL5XZOmBubg8yiFp5yS/JdUDQsq5e6h95km91MCYMuvp7mh1fjPEYUhvHepKpZOjnEaMBR4PxjWDzg==}
     dependencies:
@@ -744,6 +782,16 @@ packages:
     resolution: {integrity: sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==}
     dev: true
 
+  /@types/lodash-es@4.17.8:
+    resolution: {integrity: sha512-euY3XQcZmIzSy7YH5+Unb3b2X12Wtk54YWINBvvGQ5SmMvwb11JQskGsfkH/5HXK77Kr8GF0wkVDIxzAisWtog==}
+    dependencies:
+      '@types/lodash': 4.14.197
+    dev: false
+
+  /@types/lodash@4.14.197:
+    resolution: {integrity: sha512-BMVOiWs0uNxHVlHBgzTIqJYmj+PgCo4euloGF+5m4okL3rEYzM2EEv78mw8zWSMM57dM7kVIgJ2QDvwHSoCI5g==}
+    dev: false
+
   /@types/markdown-it@12.2.3:
     resolution: {integrity: sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==}
     dependencies:
@@ -767,6 +815,10 @@ packages:
     resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==}
     dev: true
 
+  /@types/web-bluetooth@0.0.16:
+    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
+    dev: false
+
   /@types/web-bluetooth@0.0.17:
     resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==}
     dev: true
@@ -921,14 +973,12 @@ packages:
       '@vue/shared': 3.3.4
       estree-walker: 2.0.2
       source-map-js: 1.0.2
-    dev: true
 
   /@vue/compiler-dom@3.3.4:
     resolution: {integrity: sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==}
     dependencies:
       '@vue/compiler-core': 3.3.4
       '@vue/shared': 3.3.4
-    dev: true
 
   /@vue/compiler-sfc@3.3.4:
     resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==}
@@ -943,14 +993,12 @@ packages:
       magic-string: 0.30.2
       postcss: 8.4.27
       source-map-js: 1.0.2
-    dev: true
 
   /@vue/compiler-ssr@3.3.4:
     resolution: {integrity: sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==}
     dependencies:
       '@vue/compiler-dom': 3.3.4
       '@vue/shared': 3.3.4
-    dev: true
 
   /@vue/devtools-api@6.5.0:
     resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
@@ -964,20 +1012,17 @@ packages:
       '@vue/shared': 3.3.4
       estree-walker: 2.0.2
       magic-string: 0.30.2
-    dev: true
 
   /@vue/reactivity@3.3.4:
     resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==}
     dependencies:
       '@vue/shared': 3.3.4
-    dev: true
 
   /@vue/runtime-core@3.3.4:
     resolution: {integrity: sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==}
     dependencies:
       '@vue/reactivity': 3.3.4
       '@vue/shared': 3.3.4
-    dev: true
 
   /@vue/runtime-dom@3.3.4:
     resolution: {integrity: sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==}
@@ -985,7 +1030,6 @@ packages:
       '@vue/runtime-core': 3.3.4
       '@vue/shared': 3.3.4
       csstype: 3.1.2
-    dev: true
 
   /@vue/server-renderer@3.3.4(vue@3.3.4):
     resolution: {integrity: sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==}
@@ -995,11 +1039,9 @@ packages:
       '@vue/compiler-ssr': 3.3.4
       '@vue/shared': 3.3.4
       vue: 3.3.4
-    dev: true
 
   /@vue/shared@3.3.4:
     resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
-    dev: true
 
   /@vueuse/core@10.3.0(vue@3.3.4):
     resolution: {integrity: sha512-BEM5yxcFKb5btFjTSAFjTu5jmwoW66fyV9uJIP4wUXXU8aR5Hl44gndaaXp7dC5HSObmgbnR2RN+Un1p68Mf5Q==}
@@ -1013,7 +1055,19 @@ packages:
       - vue
     dev: true
 
-  /@vueuse/integrations@10.3.0(focus-trap@7.5.2)(vue@3.3.4):
+  /@vueuse/core@9.13.0(vue@3.3.4):
+    resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.16
+      '@vueuse/metadata': 9.13.0
+      '@vueuse/shared': 9.13.0(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
+  /@vueuse/integrations@10.3.0(axios@1.4.0)(focus-trap@7.5.2)(vue@3.3.4):
     resolution: {integrity: sha512-Jgiv7oFyIgC6BxmDtiyG/fxyGysIds00YaY7sefwbhCZ2/tjEx1W/1WcsISSJPNI30in28+HC2J4uuU8184ekg==}
     peerDependencies:
       async-validator: '*'
@@ -1056,6 +1110,7 @@ packages:
     dependencies:
       '@vueuse/core': 10.3.0(vue@3.3.4)
       '@vueuse/shared': 10.3.0(vue@3.3.4)
+      axios: 1.4.0
       focus-trap: 7.5.2
       vue-demi: 0.14.5(vue@3.3.4)
     transitivePeerDependencies:
@@ -1067,6 +1122,10 @@ packages:
     resolution: {integrity: sha512-Ema3YhNOa4swDsV0V7CEY5JXvK19JI/o1szFO1iWxdFg3vhdFtCtSTP26PCvbUpnUtNHBY2wx5y3WDXND5Pvnw==}
     dev: true
 
+  /@vueuse/metadata@9.13.0:
+    resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
+    dev: false
+
   /@vueuse/shared@10.3.0(vue@3.3.4):
     resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
     dependencies:
@@ -1076,6 +1135,15 @@ packages:
       - vue
     dev: true
 
+  /@vueuse/shared@9.13.0(vue@3.3.4):
+    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
+    dependencies:
+      vue-demi: 0.14.5(vue@3.3.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /acorn-jsx@5.3.2(acorn@8.10.0):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -1261,6 +1329,13 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /async-validator@4.2.5:
+    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
+    dev: false
+
+  /asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
   /atob@2.1.2:
     resolution: {integrity: sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==}
     engines: {node: '>= 4.5.0'}
@@ -1272,6 +1347,15 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+  /axios@1.4.0:
+    resolution: {integrity: sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==}
+    dependencies:
+      follow-redirects: 1.15.2
+      form-data: 4.0.0
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
@@ -1420,6 +1504,12 @@ packages:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
     dev: true
 
+  /combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      delayed-stream: 1.0.0
+
   /commander@10.0.1:
     resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
     engines: {node: '>=14'}
@@ -1482,7 +1572,10 @@ packages:
 
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
-    dev: true
+
+  /dayjs@1.11.9:
+    resolution: {integrity: sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA==}
+    dev: false
 
   /debug@3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
@@ -1547,6 +1640,10 @@ packages:
       object-keys: 1.1.1
     dev: true
 
+  /delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
   /dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -1599,6 +1696,31 @@ packages:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
     dev: true
 
+  /element-plus@2.3.9(vue@3.3.4):
+    resolution: {integrity: sha512-TIOLnPl4cnoCPXqK3QYh+jpkthUBQnAM21O7o3Lhbse8v9pfrRXRTaBJtoEKnYNa8GZ4lZptUfH0PeZgDCNLUg==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      '@ctrl/tinycolor': 3.6.0
+      '@element-plus/icons-vue': 2.1.0(vue@3.3.4)
+      '@floating-ui/dom': 1.5.1
+      '@popperjs/core': /@sxzz/popperjs-es@2.11.7
+      '@types/lodash': 4.14.197
+      '@types/lodash-es': 4.17.8
+      '@vueuse/core': 9.13.0(vue@3.3.4)
+      async-validator: 4.2.5
+      dayjs: 1.11.9
+      escape-html: 1.0.3
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+      lodash-unified: 1.0.3(@types/lodash-es@4.17.8)(lodash-es@4.17.21)(lodash@4.17.21)
+      memoize-one: 6.0.0
+      normalize-wheel-es: 1.2.0
+      vue: 3.3.4
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+    dev: false
+
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
     dev: true
@@ -1726,6 +1848,10 @@ packages:
       '@esbuild/win32-x64': 0.18.20
     dev: true
 
+  /escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+    dev: false
+
   /escape-string-regexp@1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
@@ -1970,7 +2096,6 @@ packages:
 
   /estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
-    dev: true
 
   /esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
@@ -2077,6 +2202,15 @@ packages:
       tabbable: 6.2.0
     dev: true
 
+  /follow-redirects@1.15.2:
+    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
   /for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
     dependencies:
@@ -2091,6 +2225,14 @@ packages:
       signal-exit: 4.1.0
     dev: true
 
+  /form-data@4.0.0:
+    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
+    engines: {node: '>= 6'}
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+
   /fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
     dev: true
@@ -2668,6 +2810,26 @@ packages:
       p-locate: 5.0.0
     dev: true
 
+  /lodash-es@4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
+
+  /lodash-unified@1.0.3(@types/lodash-es@4.17.8)(lodash-es@4.17.21)(lodash@4.17.21):
+    resolution: {integrity: sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==}
+    peerDependencies:
+      '@types/lodash-es': '*'
+      lodash: '*'
+      lodash-es: '*'
+    dependencies:
+      '@types/lodash-es': 4.17.8
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+    dev: false
+
+  /lodash.groupby@4.6.0:
+    resolution: {integrity: sha512-5dcWxm23+VAoz+awKmBaiBvzox8+RqMgFhi7UvX9DHZr2HdxHXM/Wrf8cfKpsW37RNrvtPn6hSwNqurSILbmJw==}
+    dev: false
+
   /lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
     dev: true
@@ -2682,7 +2844,6 @@ packages:
 
   /lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
-    dev: true
 
   /log-update@4.0.0:
     resolution: {integrity: sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==}
@@ -2711,7 +2872,6 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
   /map-obj@1.0.1:
     resolution: {integrity: sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==}
@@ -2807,6 +2967,10 @@ packages:
     resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
     dev: true
 
+  /memoize-one@6.0.0:
+    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
+    dev: false
+
   /meow@10.1.5:
     resolution: {integrity: sha512-/d+PQ4GKmGvM9Bee/DPa8z3mXs/pkvJE2KEThngVNOqtmljC6K7NMPxtc2JeZYTmpWb9k/TmxjeL18ez3h7vCw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -2842,6 +3006,16 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  /mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-db: 1.52.0
+
   /mimic-fn@2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
@@ -2904,7 +3078,6 @@ packages:
     resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
-    dev: true
 
   /natural-compare-lite@1.4.0:
     resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
@@ -2929,6 +3102,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /normalize-wheel-es@1.2.0:
+    resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
+    dev: false
+
   /npm-run-path@5.1.0:
     resolution: {integrity: sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -3097,7 +3274,6 @@ packages:
 
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
-    dev: true
 
   /picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
@@ -3169,7 +3345,6 @@ packages:
       nanoid: 3.3.6
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: true
 
   /preact@10.16.0:
     resolution: {integrity: sha512-XTSj3dJ4roKIC93pald6rWuB2qQJO9gO2iLLyTe87MrjQN+HklueLsmskbywEWqCHlclgz3/M4YLL2iBr9UmMA==}
@@ -3186,6 +3361,9 @@ packages:
     hasBin: true
     dev: true
 
+  /proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
   /punycode@2.3.0:
     resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
     engines: {node: '>=6'}
@@ -3444,7 +3622,6 @@ packages:
   /source-map-js@1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /source-map-resolve@0.6.0:
     resolution: {integrity: sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==}
@@ -3747,7 +3924,6 @@ packages:
   /to-fast-properties@2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
-    dev: true
 
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
@@ -3938,7 +4114,7 @@ packages:
     engines: {node: ^14.13.1 || ^16.7.0 || >=18}
     dev: false
 
-  /vitepress@1.0.0-rc.4(@algolia/client-search@4.19.1)(search-insights@2.7.0)(stylus@0.59.0):
+  /vitepress@1.0.0-rc.4(@algolia/client-search@4.19.1)(axios@1.4.0)(search-insights@2.7.0)(stylus@0.59.0):
     resolution: {integrity: sha512-JCQ89Bm6ECUTnyzyas3JENo00UDJeK8q1SUQyJYou+4Yz5BKEc/F3O21cu++DnUT2zXc0kvQ2Aj4BZCc/nioXQ==}
     hasBin: true
     dependencies:
@@ -3947,7 +4123,7 @@ packages:
       '@vitejs/plugin-vue': 4.2.3(vite@4.4.9)(vue@3.3.4)
       '@vue/devtools-api': 6.5.0
       '@vueuse/core': 10.3.0(vue@3.3.4)
-      '@vueuse/integrations': 10.3.0(focus-trap@7.5.2)(vue@3.3.4)
+      '@vueuse/integrations': 10.3.0(axios@1.4.0)(focus-trap@7.5.2)(vue@3.3.4)
       body-scroll-lock: 4.0.0-beta.0
       focus-trap: 7.5.2
       mark.js: 8.11.1
@@ -4003,7 +4179,6 @@ packages:
         optional: true
     dependencies:
       vue: 3.3.4
-    dev: true
 
   /vue-eslint-parser@9.3.1(eslint@8.46.0):
     resolution: {integrity: sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==}
@@ -4031,7 +4206,6 @@ packages:
       '@vue/runtime-dom': 3.3.4
       '@vue/server-renderer': 3.3.4(vue@3.3.4)
       '@vue/shared': 3.3.4
-    dev: true
 
   /which-boxed-primitive@1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
diff --git a/website/src/.vitepress/config/constants.ts b/website/src/.vitepress/config/constants.ts
new file mode 100644
index 00000000..3f6bb349
--- /dev/null
+++ b/website/src/.vitepress/config/constants.ts
@@ -0,0 +1,6 @@
+export const GITHUB_EXTENSION_JSON =
+	"https://raw.githubusercontent.com/tachiyomiorg/tachiyomi-extensions/repo/index.json";
+export const GITHUB_STABLE_API = "https://api.github.com/repos/tachiyomiorg/tachiyomi/releases/latest";
+export const GITHUB_STABLE_RELEASE = "https://github.com/tachiyomiorg/tachiyomi/releases/latest";
+export const GITHUB_PREVIEW_API = "https://api.github.com/repos/tachiyomiorg/android-app-preview/releases/latest";
+export const GITHUB_PREVIEW_RELEASE = "https://github.com/tachiyomiorg/android-app-preview/releases/latest";
diff --git a/website/src/.vitepress/config/scripts/languages.ts b/website/src/.vitepress/config/scripts/languages.ts
new file mode 100644
index 00000000..dd3fdc6f
--- /dev/null
+++ b/website/src/.vitepress/config/scripts/languages.ts
@@ -0,0 +1,16 @@
+export function simpleLangName(code) {
+	if (code === "all") {
+		return "All";
+	}
+	const namesInEnglish = new Intl.DisplayNames(["en"], { type: "language" });
+	return namesInEnglish.of(code);
+}
+
+export function langName(code) {
+	if (code === "all") {
+		return "All";
+	}
+	const namesInEnglish = new Intl.DisplayNames(["en"], { type: "language" });
+	const namesInNative = new Intl.DisplayNames([code], { type: "language" });
+	return `${namesInEnglish.of(code)} - ${namesInNative.of(code)}`;
+}
diff --git a/website/src/.vitepress/theme/components/ExtensionFilters.vue b/website/src/.vitepress/theme/components/ExtensionFilters.vue
new file mode 100644
index 00000000..59d310ce
--- /dev/null
+++ b/website/src/.vitepress/theme/components/ExtensionFilters.vue
@@ -0,0 +1,69 @@
+<script>
+import { langName, simpleLangName } from "../../config/scripts/languages";
+
+export default {
+	props: ["extensions"],
+	emits: ["filters"],
+	data() {
+		return {
+			filters: {
+				search: "",
+				lang: [],
+				nsfw: "Show all",
+				sort: "Ascending",
+			},
+		};
+	},
+	watch: {
+		filters: {
+			handler(value) {
+				this.$emit("filters", this.filters);
+			},
+			deep: true,
+		},
+	},
+	methods: {
+		simpleLangName,
+		langName,
+	},
+};
+</script>
+<template>
+	<span class="filters-list">
+		<el-input v-model="filters.search" placeholder="Search extensions by name or ID..." clearable />
+
+		<el-select v-model="filters.lang" placeholder="Show specific languages..." multiple clearable>
+			<el-option
+				v-for="[group] in extensions"
+				:key="group.lang"
+				:label="group.lang === 'en' ? simpleLangName(group.lang) : langName(group.lang)"
+				:value="group.lang"
+			/>
+		</el-select>
+
+		<div>
+			Sort by<br>
+			<el-radio-group v-model="filters.sort">
+				<el-radio label="Ascending"></el-radio>
+				<el-radio label="Descending"></el-radio>
+			</el-radio-group>
+		</div>
+
+		<div>
+			Display mode<br>
+			<el-radio-group v-model="filters.nsfw">
+				<el-radio label="NSFW"></el-radio>
+				<el-radio label="SFW"></el-radio>
+				<el-radio label="Show all"></el-radio>
+			</el-radio-group>
+		</div>
+	</span>
+</template>
+
+<style lang="stylus">
+.filters-list {
+	display: flex
+	flex-direction: column
+	row-gap: 1rem
+}
+</style>
diff --git a/website/src/.vitepress/theme/components/ExtensionGroup.vue b/website/src/.vitepress/theme/components/ExtensionGroup.vue
new file mode 100644
index 00000000..dfc7f16f
--- /dev/null
+++ b/website/src/.vitepress/theme/components/ExtensionGroup.vue
@@ -0,0 +1,52 @@
+<script>
+import { langName, simpleLangName } from "../../config/scripts/languages";
+import ExtensionItem from "./ExtensionItem.vue";
+
+export default {
+	components: { ExtensionItem },
+	props: ["list", "totalCount"],
+	computed: {
+		groupName: function () {
+			const firstItem = this.list[0];
+			return firstItem.lang === "en" ? simpleLangName(firstItem.lang) : langName(firstItem.lang);
+		},
+	},
+	methods: {
+		simpleLangName,
+		langName,
+	},
+};
+</script>
+
+<template>
+	<div class="extension-group">
+		<h2>
+			{{ groupName }}
+
+			<span class="extensions-total">
+				Total:
+				<span class="extensions-total-sum">
+					{{ totalCount }}
+				</span>
+			</span>
+		</h2>
+		<div
+			v-for="extension in list"
+			:id="extension.pkg.replace('eu.kanade.tachiyomi.extension.', '')"
+			:key="extension.apk"
+			class="extension"
+		>
+			<ExtensionItem :item="extension" />
+		</div>
+	</div>
+</template>
+
+<style lang="stylus">
+.extensions-total {
+	float: right
+
+	&-sum {
+		color: var(--vp-c-brand)
+	}
+}
+</style>
diff --git a/website/src/.vitepress/theme/components/ExtensionItem.vue b/website/src/.vitepress/theme/components/ExtensionItem.vue
new file mode 100644
index 00000000..7cf73118
--- /dev/null
+++ b/website/src/.vitepress/theme/components/ExtensionItem.vue
@@ -0,0 +1,139 @@
+<script>
+export default {
+	props: ["item"],
+	computed: {
+		pkgId: function () {
+			return this.item.pkg.replace("eu.kanade.tachiyomi.extension.", "");
+		},
+		pkgName: function () {
+			return this.item.name.split(": ")[1];
+		},
+		pkgVersion: function () {
+			return "v" + this.item.version;
+		},
+		iconUrl: function () {
+			return `https://raw.githubusercontent.com/tachiyomiorg/tachiyomi-extensions/repo/icon/${this.item.pkg}.png`;
+		},
+		apkUrl: function () {
+			return `https://raw.githubusercontent.com/tachiyomiorg/tachiyomi-extensions/repo/apk/${this.item.apk}`;
+		},
+	},
+};
+</script>
+
+<template v-if="item">
+	<a :href="`#${pkgId}`" class="anchor" aria-hidden="true" @click.stop>#</a>
+	<img class="extension-icon" :src="iconUrl" loading="lazy" width="42" height="42" />
+	<div class="extension-text">
+		<div class="upper">
+			{{ pkgName }}
+			<Badge :text="pkgVersion" />
+		</div>
+		<div class="lower">
+			{{ pkgId }}
+		</div>
+	</div>
+	<a :href="apkUrl" class="extension-download" title="Download APK" download>
+		<span>↓ Download</span>
+	</a>
+</template>
+
+<style lang="stylus">
+.extension {
+	align-items: center
+	display: flex
+	padding: 0.5em 1.5em
+	border-radius: 8px
+
+	&:hover {
+		background-color: var(--vp-c-bg-soft-mute)
+	}
+
+	.anchor {
+		margin-left: 0.2em
+		margin-right: 0.2em
+		font-size: 1.4em
+		opacity: 0
+	}
+
+	&:hover .anchor {
+		opacity: 1
+	}
+
+	.extension-icon {
+		margin-right: 0.5em
+	}
+
+	.extension-text {
+		flex: 1
+
+		.upper {
+			font-weight: 600
+
+			.badge {
+				font-weight: 400
+				margin-left: 8px
+			}
+		}
+
+		.lower {
+			color: #6c757d
+			font-family: monospace
+			font-size: 0.9rem
+		}
+	}
+
+	.extension-download {
+		margin-right: 0.5em
+		padding-left: 1rem
+		padding-right: 1rem
+		padding-top: 0.5rem
+		padding-bottom: 0.5rem
+		font-weight: 700
+		border-radius: 4px
+		color: var(--vp-c-brand)
+		background-color: transparent
+		border: 1px solid var(--vp-c-brand-darker)
+
+		.material-icons {
+			color: white
+			max-width: 18px
+		}
+
+		&:hover {
+			background-color: var(--vp-c-brand-darker)
+			text-decoration: none
+
+			.material-icons {
+				color: var(--vp-c-brand)
+			}
+		}
+	}
+
+	@media (max-width 767px) {
+		padding: 0.4em 0em
+
+		.extension-text .lower,
+		.extension-download span {
+			display: none
+		}
+	}
+}
+
+@media (max-width 767px) {
+	.extension {
+		border: 1px solid var(--vp-c-gutter)
+		border-radius: 8px
+
+		.extension-download {
+			background-color: var(--vp-c-brand)
+		}
+	}
+}
+
+&:target {
+	background-color: var(--vp-c-bg-soft-mute)
+	border-radius: 8px
+	transition: 500ms background-color
+}
+</style>
diff --git a/website/src/.vitepress/theme/components/ExtensionList.vue b/website/src/.vitepress/theme/components/ExtensionList.vue
new file mode 100644
index 00000000..0eea8323
--- /dev/null
+++ b/website/src/.vitepress/theme/components/ExtensionList.vue
@@ -0,0 +1,29 @@
+<script>
+import ExtensionGroup from "./ExtensionGroup.vue";
+
+export default {
+	components: { ExtensionGroup },
+	props: ["extensions"],
+	computed: {
+		totalCount() {
+			return this.extensions.reduce((sum, item) => sum + item.length, 0);
+		},
+	},
+};
+</script>
+<template>
+	<div class="extension-list">
+		<ExtensionGroup v-for="group in extensions" :key="group[0].lang" :list="group" :class="group[0].lang" :total-count="totalCount" />
+	</div>
+</template>
+<style lang="stylus">
+.extension-list {
+	> div {
+		&:not(:first-of-type) {
+			.extensions-total {
+				display: none
+			}
+		}
+	}
+}
+</style>
diff --git a/website/src/.vitepress/theme/components/ExtensionsWrapper.vue b/website/src/.vitepress/theme/components/ExtensionsWrapper.vue
new file mode 100644
index 00000000..d000a252
--- /dev/null
+++ b/website/src/.vitepress/theme/components/ExtensionsWrapper.vue
@@ -0,0 +1,104 @@
+<script>
+import axios from "axios";
+import groupBy from "lodash.groupby";
+import { GITHUB_EXTENSION_JSON } from "../../config/constants";
+import { simpleLangName } from "../../config/scripts/languages";
+import ExtensionFilters from "./ExtensionFilters.vue";
+import ExtensionList from "./ExtensionList.vue";
+
+export default {
+	components: { ExtensionList, ExtensionFilters },
+	data() {
+		return {
+			extensions: [],
+			filters: {
+				search: "",
+				lang: [],
+				nsfw: "Show all",
+				sort: "Ascending",
+			},
+			loading: true,
+			observer: null,
+		};
+	},
+	computed: {
+		filteredExtensions() {
+			const { extensions, filters } = this;
+
+			const filtered = [];
+
+			for (const group of extensions) {
+				let filteredGroup = filters.lang.length ? (filters.lang.includes(group[0].lang) ? group : []) : group;
+
+				if (filters.search) {
+					filteredGroup = filteredGroup.filter(
+						(ext) =>
+							ext.name.toLowerCase().includes(filters.search.toLowerCase()) ||
+							ext.sources.some((source) => source.id.includes(filters.search))
+					);
+				}
+				filteredGroup = filteredGroup.filter((ext) =>
+					filters.nsfw === "Show all" ? true : ext.nsfw === (filters.nsfw === "NSFW" ? 1 : 0)
+				);
+
+				if (filters.sort && filters.sort === "Descending") {
+					filteredGroup = filteredGroup.reverse();
+				}
+				if (filteredGroup.length) {
+					filtered.push(filteredGroup);
+				}
+			}
+
+			return filtered;
+		},
+	},
+	async beforeMount() {
+		const { data } = await axios.get(GITHUB_EXTENSION_JSON);
+		const values = Object.values(groupBy(data, "lang"));
+		values.sort(this.sortLanguages);
+		this.$data.extensions = values;
+
+		this.$nextTick(() => {
+			this.loading = false;
+		});
+	},
+	updated() {
+		if (window.location.hash) {
+			window.location.replace(window.location.hash);
+		}
+	},
+	methods: {
+		sortLanguages(a, b) {
+			const langA = simpleLangName(a[0].lang);
+			const langB = simpleLangName(b[0].lang);
+			if (langA === "All" && langB === "English") {
+				return -1;
+			}
+			if (langA === "English" && langB === "All") {
+				return 1;
+			}
+			if (langA === "English") {
+				return -1;
+			}
+			if (langB === "English") {
+				return 1;
+			}
+			if (langA < langB) {
+				return -1;
+			}
+			if (langA > langB) {
+				return 1;
+			}
+			return 0;
+		},
+	},
+};
+</script>
+
+<template>
+	<div v-if="loading" v-loading.lock="loading" style="min-height: 200px"></div>
+	<div v-else>
+		<ExtensionFilters :extensions="extensions" @filters="filters = $event" />
+		<ExtensionList :extensions="filteredExtensions" />
+	</div>
+</template>
diff --git a/website/src/.vitepress/theme/index.ts b/website/src/.vitepress/theme/index.ts
index 03fb4d20..c40f81af 100644
--- a/website/src/.vitepress/theme/index.ts
+++ b/website/src/.vitepress/theme/index.ts
@@ -3,6 +3,10 @@ import { h } from "vue";
 import Theme from "vitepress/theme";
 import "./styles/base.styl";
 
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+import "element-plus/theme-chalk/dark/css-vars.css";
+
 export default {
 	extends: Theme,
 	Layout: () => {
@@ -11,6 +15,6 @@ export default {
 		});
 	},
 	enhanceApp({ app, router, siteData }) {
-		// ...
+		app.use(ElementPlus);
 	},
 };
diff --git a/website/src/extensions/index.md b/website/src/extensions/index.md
index 024e6dbc..f0060585 100644
--- a/website/src/extensions/index.md
+++ b/website/src/extensions/index.md
@@ -6,3 +6,9 @@ description: Web-based extensions page that enables users to browse and install
 # Extensions
 
 Web-based extensions page that enables users to browse and install additional sources that provide access to a wide range of content from various websites.
+
+<ExtensionsWrapper/>
+
+<script setup>
+import ExtensionsWrapper from '../.vitepress/theme/components/ExtensionsWrapper.vue'
+</script>