diff --git a/.cargo/config.toml b/.cargo/config.toml
index ca333857a..a52d5a685 100644
--- a/.cargo/config.toml
+++ b/.cargo/config.toml
@@ -1,3 +1,6 @@
 # Windows has stack overflows when calling from Tauri, so we increase compiler size
 [target.'cfg(windows)']
 rustflags = ["-C", "link-args=/STACK:16777220"]
+
+[build]
+rustflags = ["--cfg", "tokio_unstable"]
\ No newline at end of file
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 000000000..6313b56c5
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1 @@
+* text=auto eol=lf
diff --git a/.github/workflows/labrinth-docker.yml b/.github/workflows/labrinth-docker.yml
index 6f4080254..1ed8e9685 100644
--- a/.github/workflows/labrinth-docker.yml
+++ b/.github/workflows/labrinth-docker.yml
@@ -38,8 +38,10 @@ jobs:
       - name: Build and push
         id: docker_build
         uses: docker/build-push-action@v2
+        env:
+          SQLX_OFFLINE: true
         with:
-          context: ./apps/labrinth
+          file: ./apps/labrinth/Dockerfile
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.docker_meta.outputs.tags }}
           labels: ${{ steps.docker_meta.outputs.labels }}
diff --git a/.github/workflows/theseus-release.yml b/.github/workflows/theseus-release.yml
index 4cc9a98cd..a34f5ae17 100644
--- a/.github/workflows/theseus-release.yml
+++ b/.github/workflows/theseus-release.yml
@@ -6,9 +6,11 @@ on:
     tags:
       - 'v*'
     paths:
-      - .github/workflows/app-release.yml
+      - .github/workflows/theseus-release.yml
       - 'apps/app/**'
       - 'apps/app-frontend/**'
+      - 'apps/labrinth/src/common/**'
+      - 'apps/labrinth/Cargo.toml'
       - 'packages/app-lib/**'
       - 'packages/app-macros/**'
       - 'packages/assets/**'
diff --git a/.idea/code.iml b/.idea/code.iml
index 70105a514..a4489beac 100644
--- a/.idea/code.iml
+++ b/.idea/code.iml
@@ -10,9 +10,11 @@
       <sourceFolder url="file://$MODULE_DIR$/apps/labrinth/src" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/apps/labrinth/tests" isTestSource="true" />
       <sourceFolder url="file://$MODULE_DIR$/packages/app-lib/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/rust-common/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/ariadne/src" isTestSource="false" />
       <excludeFolder url="file://$MODULE_DIR$/target" />
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
   </component>
-</module>
+</module>
\ No newline at end of file
diff --git a/Cargo.lock b/Cargo.lock
index 8dffdfd5a..55f13a32d 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -265,9 +265,9 @@ dependencies = [
 
 [[package]]
 name = "actix-web-prom"
-version = "0.8.0"
+version = "0.9.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "76743e67d4e7efa9fc2ac7123de0dd7b2ca592668e19334f1d81a3b077afc6ac"
+checksum = "56a34f1825c3ae06567a9d632466809bbf34963c86002e8921b64f32d48d289d"
 dependencies = [
  "actix-web",
  "futures-core",
@@ -393,6 +393,55 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "anstream"
+version = "0.6.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8acc5369981196006228e28809f761875c0327210a891e941f4c683b3a99529b"
+dependencies = [
+ "anstyle",
+ "anstyle-parse",
+ "anstyle-query",
+ "anstyle-wincon",
+ "colorchoice",
+ "is_terminal_polyfill",
+ "utf8parse",
+]
+
+[[package]]
+name = "anstyle"
+version = "1.0.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "55cc3b69f167a1ef2e161439aa98aed94e6028e5f9a59be9a6ffb47aef1651f9"
+
+[[package]]
+name = "anstyle-parse"
+version = "0.2.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3b2d16507662817a6a20a9ea92df6652ee4f94f914589377d69f3b21bc5798a9"
+dependencies = [
+ "utf8parse",
+]
+
+[[package]]
+name = "anstyle-query"
+version = "1.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "79947af37f4177cfead1110013d678905c37501914fba0efea834c3fe9a8d60c"
+dependencies = [
+ "windows-sys 0.59.0",
+]
+
+[[package]]
+name = "anstyle-wincon"
+version = "3.0.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2109dbce0e72be3ec00bed26e6a7479ca384ad226efdd66db8fa2e3a38c83125"
+dependencies = [
+ "anstyle",
+ "windows-sys 0.59.0",
+]
+
 [[package]]
 name = "anyhow"
 version = "1.0.89"
@@ -426,6 +475,21 @@ dependencies = [
  "password-hash 0.5.0",
 ]
 
+[[package]]
+name = "ariadne"
+version = "0.1.0"
+dependencies = [
+ "chrono",
+ "either",
+ "rand 0.8.5",
+ "serde",
+ "serde_bytes",
+ "serde_cbor",
+ "serde_json",
+ "thiserror 1.0.64",
+ "uuid 1.12.0",
+]
+
 [[package]]
 name = "arrayvec"
 version = "0.7.6"
@@ -616,6 +680,28 @@ dependencies = [
  "windows-sys 0.59.0",
 ]
 
+[[package]]
+name = "async-stream"
+version = "0.3.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0b5a71a6f37880a80d1d7f19efd781e4b5de42c88f0722cc13bcb6cc2cfe8476"
+dependencies = [
+ "async-stream-impl",
+ "futures-core",
+ "pin-project-lite",
+]
+
+[[package]]
+name = "async-stream-impl"
+version = "0.3.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c7c24de15d275a1ecfd47a380fb4d5ec9bfe0933f309ed5e705b775596a3574d"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.90",
+]
+
 [[package]]
 name = "async-stripe"
 version = "0.39.1"
@@ -778,6 +864,53 @@ dependencies = [
  "thiserror 1.0.64",
 ]
 
+[[package]]
+name = "axum"
+version = "0.7.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "edca88bc138befd0323b20752846e6587272d3b03b0343c8ea28a6f819e6e71f"
+dependencies = [
+ "async-trait",
+ "axum-core",
+ "bytes 1.7.2",
+ "futures-util",
+ "http 1.1.0",
+ "http-body 1.0.1",
+ "http-body-util",
+ "itoa 1.0.11",
+ "matchit",
+ "memchr",
+ "mime",
+ "percent-encoding",
+ "pin-project-lite",
+ "rustversion",
+ "serde",
+ "sync_wrapper 1.0.1",
+ "tower 0.5.2",
+ "tower-layer",
+ "tower-service",
+]
+
+[[package]]
+name = "axum-core"
+version = "0.4.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "09f2bd6146b97ae3359fa0cc6d6b376d9539582c7b4220f041a33ec24c226199"
+dependencies = [
+ "async-trait",
+ "bytes 1.7.2",
+ "futures-util",
+ "http 1.1.0",
+ "http-body 1.0.1",
+ "http-body-util",
+ "mime",
+ "pin-project-lite",
+ "rustversion",
+ "sync_wrapper 1.0.1",
+ "tower-layer",
+ "tower-service",
+]
+
 [[package]]
 name = "backtrace"
 version = "0.3.74"
@@ -1204,7 +1337,7 @@ checksum = "d38f2da7a0a2c4ccf0065be06397cc26a81f4e528be095826eee9d4adbb8c60f"
 dependencies = [
  "byteorder",
  "fnv",
- "uuid 1.10.0",
+ "uuid 1.12.0",
 ]
 
 [[package]]
@@ -1270,6 +1403,46 @@ dependencies = [
  "inout",
 ]
 
+[[package]]
+name = "clap"
+version = "4.5.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "027bb0d98429ae334a8698531da7077bdf906419543a35a55c2cb1b66437d767"
+dependencies = [
+ "clap_builder",
+ "clap_derive",
+]
+
+[[package]]
+name = "clap_builder"
+version = "4.5.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5589e0cba072e0f3d23791efac0fd8627b49c829c196a492e88168e6a669d863"
+dependencies = [
+ "anstream",
+ "anstyle",
+ "clap_lex",
+ "strsim 0.11.1",
+]
+
+[[package]]
+name = "clap_derive"
+version = "4.5.28"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bf4ced95c6f4a675af3da73304b9ac4ed991640c36374e4b46795c49e17cf1ed"
+dependencies = [
+ "heck 0.5.0",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.90",
+]
+
+[[package]]
+name = "clap_lex"
+version = "0.7.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f46ad14479a25103f283c0f10005961cf086d8dc42205bb44c46ac563475dca6"
+
 [[package]]
 name = "clickhouse"
 version = "0.11.6"
@@ -1291,7 +1464,7 @@ dependencies = [
  "time",
  "tokio 1.42.0",
  "url",
- "uuid 1.10.0",
+ "uuid 1.12.0",
 ]
 
 [[package]]
@@ -1399,6 +1572,12 @@ version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3d7b894f5411737b7867f4827955924d7c254fc9f4d91a6aad6b097804b1018b"
 
+[[package]]
+name = "colorchoice"
+version = "1.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5b63caa9aa9397e2d9480a9b13673856c78d8ac123288526c37d7839f2a86990"
+
 [[package]]
 name = "combine"
 version = "4.6.7"
@@ -1435,6 +1614,45 @@ dependencies = [
  "windows-sys 0.52.0",
 ]
 
+[[package]]
+name = "console-api"
+version = "0.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8030735ecb0d128428b64cd379809817e620a40e5001c54465b99ec5feec2857"
+dependencies = [
+ "futures-core",
+ "prost",
+ "prost-types",
+ "tonic",
+ "tracing-core",
+]
+
+[[package]]
+name = "console-subscriber"
+version = "0.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6539aa9c6a4cd31f4b1c040f860a1eac9aa80e7df6b05d506a6e7179936d6a01"
+dependencies = [
+ "console-api",
+ "crossbeam-channel",
+ "crossbeam-utils 0.8.20",
+ "futures-task",
+ "hdrhistogram",
+ "humantime",
+ "hyper-util",
+ "prost",
+ "prost-types",
+ "serde",
+ "serde_json",
+ "thread_local",
+ "tokio 1.42.0",
+ "tokio-stream",
+ "tonic",
+ "tracing",
+ "tracing-core",
+ "tracing-subscriber",
+]
+
 [[package]]
 name = "const-oid"
 version = "0.9.6"
@@ -1995,7 +2213,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bef552e6f588e446098f6ba40d89ac146c8c7b64aade83c051ee00bb5d2bc18d"
 dependencies = [
  "serde",
- "uuid 1.10.0",
+ "uuid 1.12.0",
 ]
 
 [[package]]
@@ -2427,16 +2645,22 @@ dependencies = [
 ]
 
 [[package]]
-name = "env_logger"
-version = "0.10.2"
+name = "env_filter"
+version = "0.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4cd405aab171cb85d6735e5c8d9db038c17d3ca007a4d2c25f337935c3d90580"
+checksum = "186e05a59d4c50738528153b83b0b0194d3a29507dfec16eccd4b342903397d0"
 dependencies = [
- "humantime",
- "is-terminal",
  "log",
- "regex",
- "termcolor",
+]
+
+[[package]]
+name = "env_logger"
+version = "0.11.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dcaee3d8e3cfc3fd92428d477bc97fc29ec8716d180c0d74c643bb26166660e0"
+dependencies = [
+ "env_filter",
+ "log",
 ]
 
 [[package]]
@@ -2511,7 +2735,7 @@ checksum = "887d93f60543e9a9362ef8a21beedd0a833c5d9610e18c67abe15a5963dcb1a4"
 dependencies = [
  "bit_field",
  "flume",
- "half",
+ "half 2.4.1",
  "lebe",
  "miniz_oxide 0.7.4",
  "rayon-core",
@@ -3242,6 +3466,12 @@ dependencies = [
  "tracing",
 ]
 
+[[package]]
+name = "half"
+version = "1.8.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1b43ede17f21864e81be2fa654110bf1e793774238d86ef8555c37e6519c0403"
+
 [[package]]
 name = "half"
 version = "2.4.1"
@@ -3280,6 +3510,19 @@ dependencies = [
  "hashbrown 0.14.5",
 ]
 
+[[package]]
+name = "hdrhistogram"
+version = "7.5.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "765c9198f173dd59ce26ff9f95ef0aafd0a0fe01fb9d72841bc5066a4c06511d"
+dependencies = [
+ "base64 0.21.7",
+ "byteorder",
+ "flate2",
+ "nom",
+ "num-traits",
+]
+
 [[package]]
 name = "heck"
 version = "0.3.3"
@@ -3519,6 +3762,7 @@ dependencies = [
  "http 1.1.0",
  "http-body 1.0.1",
  "httparse",
+ "httpdate",
  "itoa 1.0.11",
  "pin-project-lite",
  "smallvec 1.13.2",
@@ -3561,6 +3805,19 @@ dependencies = [
  "webpki-roots 0.26.6",
 ]
 
+[[package]]
+name = "hyper-timeout"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2b90d566bffbce6a75bd8b09a05aa8c2cb1fabb6cb348f8840c9e4c90a0d83b0"
+dependencies = [
+ "hyper 1.4.1",
+ "hyper-util",
+ "pin-project-lite",
+ "tokio 1.42.0",
+ "tower-service",
+]
+
 [[package]]
 name = "hyper-tls"
 version = "0.5.0"
@@ -3592,9 +3849,9 @@ dependencies = [
 
 [[package]]
 name = "hyper-util"
-version = "0.1.9"
+version = "0.1.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "41296eb09f183ac68eec06e03cdbea2e759633d4067b2f6552fc2e009bcad08b"
+checksum = "df2dcfbe0677734ab2f3ffa7fa7bfd4706bfdc1ef393f2ee30184aed67e631b4"
 dependencies = [
  "bytes 1.7.2",
  "futures-channel",
@@ -3889,6 +4146,28 @@ dependencies = [
  "cfb",
 ]
 
+[[package]]
+name = "inferno"
+version = "0.12.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "692eda1cc790750b9f5a5e3921ef9c117fd5498b97cfacbc910693e5b29002dc"
+dependencies = [
+ "ahash 0.8.11",
+ "clap",
+ "crossbeam-channel",
+ "crossbeam-utils 0.8.20",
+ "dashmap 6.1.0",
+ "env_logger",
+ "indexmap 2.5.0",
+ "itoa 1.0.11",
+ "log",
+ "num-format",
+ "once_cell",
+ "quick-xml 0.37.2",
+ "rgb",
+ "str_stack",
+]
+
 [[package]]
 name = "inotify"
 version = "0.9.6"
@@ -3981,6 +4260,12 @@ dependencies = [
  "once_cell",
 ]
 
+[[package]]
+name = "is_terminal_polyfill"
+version = "1.70.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7943c866cc5cd64cbc25b2e01621d07fa8eb2a1a23160ee81ce38704e97b8ecf"
+
 [[package]]
 name = "iso8601"
 version = "0.6.1"
@@ -4062,23 +4347,20 @@ dependencies = [
 ]
 
 [[package]]
-name = "jemalloc-sys"
-version = "0.5.4+5.3.0-patched"
+name = "jemalloc_pprof"
+version = "0.7.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ac6c1946e1cea1788cbfde01c993b52a10e2da07f4bac608228d1bed20bfebf2"
+checksum = "5622af6d21ff86ed7797ef98e11b8f302da25ec69a7db9f6cde8e2e1c8df9992"
 dependencies = [
- "cc",
- "libc",
-]
-
-[[package]]
-name = "jemallocator"
-version = "0.5.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a0de374a9f8e63150e6f5e8a60cc14c668226d7a347d8aee1a45766e3c4dd3bc"
-dependencies = [
- "jemalloc-sys",
+ "anyhow",
  "libc",
+ "mappings",
+ "once_cell",
+ "pprof_util",
+ "tempfile",
+ "tikv-jemalloc-ctl",
+ "tokio 1.42.0",
+ "tracing",
 ]
 
 [[package]]
@@ -4232,6 +4514,7 @@ dependencies = [
  "actix-web-prom",
  "actix-ws",
  "argon2",
+ "ariadne",
  "async-stripe",
  "async-trait",
  "base64 0.21.7",
@@ -4241,11 +4524,12 @@ dependencies = [
  "chrono",
  "clickhouse",
  "color-thief",
+ "console-subscriber",
  "dashmap 5.5.3",
  "deadpool-redis",
  "derive-new",
  "dotenvy",
- "env_logger",
+ "either",
  "flate2",
  "futures 0.3.30",
  "futures-timer",
@@ -4257,14 +4541,14 @@ dependencies = [
  "hyper-tls 0.5.0",
  "image 0.24.9",
  "itertools 0.12.1",
- "jemallocator",
+ "jemalloc_pprof",
  "json-patch",
  "lazy_static",
  "lettre",
- "log",
  "maxminddb",
  "meilisearch-sdk",
  "murmur2",
+ "prometheus",
  "rand 0.8.5",
  "rand_chacha 0.3.1",
  "redis",
@@ -4277,6 +4561,8 @@ dependencies = [
  "sentry",
  "sentry-actix",
  "serde",
+ "serde_bytes",
+ "serde_cbor",
  "serde_json",
  "serde_with",
  "sha1 0.6.1",
@@ -4285,12 +4571,17 @@ dependencies = [
  "sqlx",
  "tar",
  "thiserror 1.0.64",
+ "tikv-jemalloc-ctl",
+ "tikv-jemallocator",
  "tokio 1.42.0",
  "tokio-stream",
  "totp-rs",
+ "tracing",
+ "tracing-actix-web",
+ "tracing-subscriber",
  "url",
  "urlencoding",
- "uuid 1.10.0",
+ "uuid 1.12.0",
  "validator",
  "webp",
  "woothee",
@@ -4549,6 +4840,19 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "mappings"
+version = "0.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e434981a332777c2b3062652d16a55f8e74fa78e6b1882633f0d77399c84fc2a"
+dependencies = [
+ "anyhow",
+ "libc",
+ "once_cell",
+ "pprof_util",
+ "tracing",
+]
+
 [[package]]
 name = "markup5ever"
 version = "0.11.0"
@@ -4578,6 +4882,12 @@ version = "0.1.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2532096657941c2fea9c289d370a250971c689d4f143798ff67113ec042024a5"
 
+[[package]]
+name = "matchit"
+version = "0.7.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0e7465ac9959cc2b1404e8e2367b43684a6d13790fe23056cc8c6c5a6b7bcb94"
+
 [[package]]
 name = "maxminddb"
 version = "0.24.0"
@@ -4657,7 +4967,7 @@ dependencies = [
  "serde_json",
  "thiserror 1.0.64",
  "time",
- "uuid 1.10.0",
+ "uuid 1.12.0",
  "wasm-bindgen-futures",
  "web-sys",
  "yaup",
@@ -4836,6 +5146,12 @@ version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "fb585ade2549a017db2e35978b77c319214fa4b37cede841e27954dd6e8f3ca8"
 
+[[package]]
+name = "mutually_exclusive_features"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e94e1e6445d314f972ff7395df2de295fe51b71821694f0b0e1e79c4f12c8577"
+
 [[package]]
 name = "native-dialog"
 version = "0.7.0"
@@ -5021,6 +5337,20 @@ dependencies = [
  "winapi 0.3.9",
 ]
 
+[[package]]
+name = "num"
+version = "0.4.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "35bd024e8b2ff75562e5f34e7f4905839deb4b22955ef5e73d2fea1b9813cb23"
+dependencies = [
+ "num-bigint",
+ "num-complex",
+ "num-integer",
+ "num-iter",
+ "num-rational",
+ "num-traits",
+]
+
 [[package]]
 name = "num-bigint"
 version = "0.4.6"
@@ -5048,12 +5378,31 @@ dependencies = [
  "zeroize",
 ]
 
+[[package]]
+name = "num-complex"
+version = "0.4.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "73f88a1307638156682bada9d7604135552957b7818057dcef22705b4d509495"
+dependencies = [
+ "num-traits",
+]
+
 [[package]]
 name = "num-conv"
 version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "51d515d32fb182ee37cda2ccdcb92950d6a3c2893aa280e540671c2cd0f3b1d9"
 
+[[package]]
+name = "num-format"
+version = "0.4.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a652d9771a63711fd3c3deb670acfbe5c30a4072e664d7a3bf5a9e1056ac72c3"
+dependencies = [
+ "arrayvec",
+ "itoa 1.0.11",
+]
+
 [[package]]
 name = "num-integer"
 version = "0.1.46"
@@ -5074,6 +5423,17 @@ dependencies = [
  "num-traits",
 ]
 
+[[package]]
+name = "num-rational"
+version = "0.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f83d14da390562dca69fc84082e73e548e1ad308d24accdedd2720017cb37824"
+dependencies = [
+ "num-bigint",
+ "num-integer",
+ "num-traits",
+]
+
 [[package]]
 name = "num-traits"
 version = "0.2.19"
@@ -5967,6 +6327,21 @@ version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "439ee305def115ba05938db6eb1644ff94165c5ab5e9420d1c1bcedbba909391"
 
+[[package]]
+name = "pprof_util"
+version = "0.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9fa015c78eed2130951e22c58d2095849391e73817ab2e74f71b0b9f63dd8416"
+dependencies = [
+ "anyhow",
+ "backtrace",
+ "flate2",
+ "inferno",
+ "num",
+ "paste",
+ "prost",
+]
+
 [[package]]
 name = "ppv-lite86"
 version = "0.2.20"
@@ -6108,9 +6483,48 @@ dependencies = [
  "memchr",
  "parking_lot 0.12.3",
  "procfs",
+ "protobuf",
  "thiserror 1.0.64",
 ]
 
+[[package]]
+name = "prost"
+version = "0.13.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2796faa41db3ec313a31f7624d9286acf277b52de526150b7e69f3debf891ee5"
+dependencies = [
+ "bytes 1.7.2",
+ "prost-derive",
+]
+
+[[package]]
+name = "prost-derive"
+version = "0.13.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8a56d757972c98b346a9b766e3f02746cde6dd1cd1d1d563472929fdd74bec4d"
+dependencies = [
+ "anyhow",
+ "itertools 0.13.0",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.90",
+]
+
+[[package]]
+name = "prost-types"
+version = "0.13.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "52c2c1bf36ddb1a1c396b3601a3cec27c2462e45f07c386894ec3ccf5332bd16"
+dependencies = [
+ "prost",
+]
+
+[[package]]
+name = "protobuf"
+version = "2.28.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "106dd99e98437432fed6519dedecfade6a06a73bb7b2a1e019fdd2bee5778d94"
+
 [[package]]
 name = "psm"
 version = "0.1.23"
@@ -6207,6 +6621,15 @@ dependencies = [
  "memchr",
 ]
 
+[[package]]
+name = "quick-xml"
+version = "0.37.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "165859e9e55f79d67b96c5d96f4e88b6f2695a1972849c15a6a3f5c59fc2c003"
+dependencies = [
+ "memchr",
+]
+
 [[package]]
 name = "quinn"
 version = "0.11.5"
@@ -6724,7 +7147,7 @@ dependencies = [
  "rkyv_derive",
  "seahash",
  "tinyvec",
- "uuid 1.10.0",
+ "uuid 1.12.0",
 ]
 
 [[package]]
@@ -7108,7 +7531,7 @@ dependencies = [
  "serde",
  "serde_json",
  "url",
- "uuid 1.10.0",
+ "uuid 1.12.0",
 ]
 
 [[package]]
@@ -7361,7 +7784,7 @@ dependencies = [
  "thiserror 1.0.64",
  "time",
  "url",
- "uuid 1.10.0",
+ "uuid 1.12.0",
 ]
 
 [[package]]
@@ -7396,6 +7819,25 @@ dependencies = [
  "xml-rs",
 ]
 
+[[package]]
+name = "serde_bytes"
+version = "0.11.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "387cc504cb06bb40a96c8e04e951fe01854cf6bc921053c954e4a606d9675c6a"
+dependencies = [
+ "serde",
+]
+
+[[package]]
+name = "serde_cbor"
+version = "0.11.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2bef2ebfde456fb76bbcf9f59315333decc4fda0b2b44b420243c11e0f5ec1f5"
+dependencies = [
+ "half 1.8.3",
+ "serde",
+]
+
 [[package]]
 name = "serde_derive"
 version = "1.0.210"
@@ -8099,6 +8541,12 @@ version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a2eb9349b6444b326872e140eb1cf5e7c522154d69e7a0ffb0fb81c06b37543f"
 
+[[package]]
+name = "str_stack"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9091b6114800a5f2141aee1d1b9d6ca3592ac062dc5decb3764ec5895a47b4eb"
+
 [[package]]
 name = "strfmt"
 version = "0.2.4"
@@ -8536,7 +8984,7 @@ dependencies = [
  "thiserror 2.0.7",
  "time",
  "url",
- "uuid 1.10.0",
+ "uuid 1.12.0",
  "walkdir",
 ]
 
@@ -8629,7 +9077,7 @@ dependencies = [
  "thiserror 2.0.7",
  "toml 0.8.19",
  "url",
- "uuid 1.10.0",
+ "uuid 1.12.0",
 ]
 
 [[package]]
@@ -8810,7 +9258,7 @@ dependencies = [
  "toml 0.8.19",
  "url",
  "urlpattern",
- "uuid 1.10.0",
+ "uuid 1.12.0",
  "walkdir",
 ]
 
@@ -8859,19 +9307,11 @@ dependencies = [
  "winapi 0.3.9",
 ]
 
-[[package]]
-name = "termcolor"
-version = "1.4.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "06794f8f6c5c898b3275aebefa6b8a1cb24cd2c6c79397ab15774837a0bc5755"
-dependencies = [
- "winapi-util",
-]
-
 [[package]]
 name = "theseus"
-version = "0.9.2"
+version = "0.9.3"
 dependencies = [
+ "ariadne",
  "async-recursion",
  "async-tungstenite",
  "async_zip",
@@ -8884,6 +9324,7 @@ dependencies = [
  "dirs 5.0.1",
  "discord-rich-presence",
  "dunce",
+ "either",
  "flate2",
  "futures 0.3.30",
  "indicatif",
@@ -8913,7 +9354,7 @@ dependencies = [
  "tracing-subscriber",
  "url",
  "urlencoding",
- "uuid 1.10.0",
+ "uuid 1.12.0",
  "whoami",
  "winreg 0.52.0",
  "zip 0.6.6",
@@ -8921,7 +9362,7 @@ dependencies = [
 
 [[package]]
 name = "theseus_gui"
-version = "0.9.2"
+version = "0.9.3"
 dependencies = [
  "chrono",
  "cocoa 0.25.0",
@@ -8955,7 +9396,7 @@ dependencies = [
  "tracing",
  "tracing-error",
  "url",
- "uuid 1.10.0",
+ "uuid 1.12.0",
  "window-shadows",
 ]
 
@@ -8974,7 +9415,7 @@ dependencies = [
  "tracing-error",
  "tracing-subscriber",
  "url",
- "uuid 1.10.0",
+ "uuid 1.12.0",
  "webbrowser",
 ]
 
@@ -9045,6 +9486,37 @@ dependencies = [
  "weezl",
 ]
 
+[[package]]
+name = "tikv-jemalloc-ctl"
+version = "0.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f21f216790c8df74ce3ab25b534e0718da5a1916719771d3fec23315c99e468b"
+dependencies = [
+ "libc",
+ "paste",
+ "tikv-jemalloc-sys",
+]
+
+[[package]]
+name = "tikv-jemalloc-sys"
+version = "0.6.0+5.3.0-1-ge13ca993e8ccb9ba9847cc330696e02839f328f7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cd3c60906412afa9c2b5b5a48ca6a5abe5736aec9eb48ad05037a677e52e4e2d"
+dependencies = [
+ "cc",
+ "libc",
+]
+
+[[package]]
+name = "tikv-jemallocator"
+version = "0.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4cec5ff18518d81584f477e9bfdf957f5bb0979b0bac3af4ca30b5b3ae2d2865"
+dependencies = [
+ "libc",
+ "tikv-jemalloc-sys",
+]
+
 [[package]]
 name = "time"
 version = "0.3.36"
@@ -9448,6 +9920,36 @@ dependencies = [
  "winnow 0.6.20",
 ]
 
+[[package]]
+name = "tonic"
+version = "0.12.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "877c5b330756d856ffcc4553ab34a5684481ade925ecc54bcd1bf02b1d0d4d52"
+dependencies = [
+ "async-stream",
+ "async-trait",
+ "axum",
+ "base64 0.22.1",
+ "bytes 1.7.2",
+ "h2 0.4.6",
+ "http 1.1.0",
+ "http-body 1.0.1",
+ "http-body-util",
+ "hyper 1.4.1",
+ "hyper-timeout",
+ "hyper-util",
+ "percent-encoding",
+ "pin-project",
+ "prost",
+ "socket2",
+ "tokio 1.42.0",
+ "tokio-stream",
+ "tower 0.4.13",
+ "tower-layer",
+ "tower-service",
+ "tracing",
+]
+
 [[package]]
 name = "totp-rs"
 version = "5.6.0"
@@ -9462,6 +9964,46 @@ dependencies = [
  "sha2 0.10.8",
 ]
 
+[[package]]
+name = "tower"
+version = "0.4.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b8fa9be0de6cf49e536ce1851f987bd21a43b771b09473c3549a6c853db37c1c"
+dependencies = [
+ "futures-core",
+ "futures-util",
+ "indexmap 1.9.3",
+ "pin-project",
+ "pin-project-lite",
+ "rand 0.8.5",
+ "slab",
+ "tokio 1.42.0",
+ "tokio-util",
+ "tower-layer",
+ "tower-service",
+ "tracing",
+]
+
+[[package]]
+name = "tower"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d039ad9159c98b70ecfd540b2573b97f7f52c3e8d9f8ad57a24b916a536975f9"
+dependencies = [
+ "futures-core",
+ "futures-util",
+ "pin-project-lite",
+ "sync_wrapper 1.0.1",
+ "tower-layer",
+ "tower-service",
+]
+
+[[package]]
+name = "tower-layer"
+version = "0.3.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "121c2a6cda46980bb0fcd1647ffaf6cd3fc79a013de288782836f6df9c48780e"
+
 [[package]]
 name = "tower-service"
 version = "0.3.3"
@@ -9470,9 +10012,9 @@ checksum = "8df9b6e13f2d32c91b9bd719c00d1958837bc7dec474d94952798cc8e69eeec3"
 
 [[package]]
 name = "tracing"
-version = "0.1.40"
+version = "0.1.41"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c3523ab5a71916ccf420eebdf5521fcef02141234bbc0b8a49f2fdc4544364ef"
+checksum = "784e0ac535deb450455cbfa28a6f0df145ea1bb7ae51b821cf5e7927fdcfbdd0"
 dependencies = [
  "log",
  "pin-project-lite",
@@ -9481,10 +10023,23 @@ dependencies = [
 ]
 
 [[package]]
-name = "tracing-attributes"
-version = "0.1.27"
+name = "tracing-actix-web"
+version = "0.7.16"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "34704c8d6ebcbc939824180af020566b01a7c01f80641264eba0999f6c2b6be7"
+checksum = "332bbdf3bd208d1fe6446f8ffb4e8c2ae66e25da0fb38e0b69545e640ecee6a6"
+dependencies = [
+ "actix-web",
+ "mutually_exclusive_features",
+ "pin-project",
+ "tracing",
+ "uuid 1.12.0",
+]
+
+[[package]]
+name = "tracing-attributes"
+version = "0.1.28"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "395ae124c09f9e6918a2310af6038fba074bcf474ac352496d5910dd59a2226d"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -9493,9 +10048,9 @@ dependencies = [
 
 [[package]]
 name = "tracing-core"
-version = "0.1.32"
+version = "0.1.33"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c06d3da6113f116aaee68e4d601191614c9053067f9ab7f6edbcb161237daa54"
+checksum = "e672c95779cf947c5311f83787af4fa8fffd12fb27e4993211a84bdfd9610f9c"
 dependencies = [
  "once_cell",
  "valuable",
@@ -9536,9 +10091,9 @@ dependencies = [
 
 [[package]]
 name = "tracing-subscriber"
-version = "0.3.18"
+version = "0.3.19"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ad0f048c97dbd9faa9b7df56362b8ebcaa52adb06b498c050d2f4e32f90a7a8b"
+checksum = "e8189decb5ac0fa7bc8b96b7cb9b2701d60d48805aca84a238004d665fcc4008"
 dependencies = [
  "chrono",
  "matchers",
@@ -9808,6 +10363,12 @@ version = "1.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b6c140620e7ffbb22c2dee59cafe6084a59b5ffc27a8859a5f0d494b5d52b6be"
 
+[[package]]
+name = "utf8parse"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "06abde3611657adf66d383f00b093d7faecc7fa57071cce2578660c9f1010821"
+
 [[package]]
 name = "uuid"
 version = "0.8.2"
@@ -9819,9 +10380,9 @@ dependencies = [
 
 [[package]]
 name = "uuid"
-version = "1.10.0"
+version = "1.12.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "81dfa00651efa65069b0b6b651f4aaa31ba9e3c3ce0137aaad053604ee7e0314"
+checksum = "744018581f9a3454a9e15beb8a33b017183f1e7c0cd170232a2d1453b23a51c4"
 dependencies = [
  "getrandom 0.2.15",
  "rand 0.8.5",
@@ -10780,7 +11341,7 @@ checksum = "1e9df38ee2d2c3c5948ea468a8406ff0db0b29ae1ffde1bcf20ef305bcc95c51"
 [[package]]
 name = "wry"
 version = "0.47.2"
-source = "git+https://github.com/modrinth/wry?rev=cdbf938#cdbf9384263db4e692e22dcf9bf6085e334a10f3"
+source = "git+https://github.com/modrinth/wry?rev=51907c6#51907c61541f2e389856f07773a32bac04f9a843"
 dependencies = [
  "base64 0.22.1",
  "block2",
diff --git a/Cargo.toml b/Cargo.toml
index 06487ac14..97d69a241 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -7,6 +7,7 @@ members = [
   './apps/labrinth',
     './apps/daedalus_client',
     './packages/daedalus',
+    './packages/ariadne',
 ]
 
 # Optimize for speed and reduce size on release builds
@@ -21,4 +22,4 @@ strip = true # Remove debug symbols
 opt-level = 3
 
 [patch.crates-io]
-wry = { git = "https://github.com/modrinth/wry", rev ="cdbf938" }
\ No newline at end of file
+wry = { git = "https://github.com/modrinth/wry", rev = "51907c6" }
diff --git a/apps/app-frontend/package.json b/apps/app-frontend/package.json
index f39380631..fe9390f97 100644
--- a/apps/app-frontend/package.json
+++ b/apps/app-frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@modrinth/app-frontend",
   "private": true,
-  "version": "0.9.2",
+  "version": "0.9.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/apps/app-frontend/src/components/ui/ErrorModal.vue b/apps/app-frontend/src/components/ui/ErrorModal.vue
index d9a71608d..c3beffa9f 100644
--- a/apps/app-frontend/src/components/ui/ErrorModal.vue
+++ b/apps/app-frontend/src/components/ui/ErrorModal.vue
@@ -1,7 +1,16 @@
 <script setup>
-import { XIcon, HammerIcon, LogInIcon, UpdatedIcon } from '@modrinth/assets'
+import {
+  CheckIcon,
+  DropdownIcon,
+  XIcon,
+  HammerIcon,
+  LogInIcon,
+  UpdatedIcon,
+  CopyIcon,
+} from '@modrinth/assets'
 import { ChatIcon } from '@/assets/icons'
-import { ref } from 'vue'
+import { ButtonStyled, Collapsible } from '@modrinth/ui'
+import { ref, computed } from 'vue'
 import { login as login_flow, set_default_user } from '@/helpers/auth.js'
 import { handleError } from '@/store/notifications.js'
 import { handleSevereError } from '@/store/error.js'
@@ -13,6 +22,7 @@ import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 const errorModal = ref()
 const error = ref()
 const closable = ref(true)
+const errorCollapsed = ref(false)
 
 const title = ref('An error occurred')
 const errorType = ref('unknown')
@@ -118,6 +128,26 @@ async function repairInstance() {
   }
   loadingRepair.value = false
 }
+
+const hasDebugInfo = computed(
+  () =>
+    errorType.value === 'directory_move' ||
+    errorType.value === 'minecraft_auth' ||
+    errorType.value === 'state_init' ||
+    errorType.value === 'no_loader_version',
+)
+
+const debugInfo = computed(() => error.value.message ?? error.value ?? 'No error message.')
+
+const copied = ref(false)
+
+async function copyToClipboard(text) {
+  await navigator.clipboard.writeText(text)
+  copied.value = true
+  setTimeout(() => {
+    copied.value = false
+  }, 3000)
+}
 </script>
 
 <template>
@@ -244,16 +274,9 @@ async function repairInstance() {
           </div>
         </template>
         <template v-else>
-          {{ error.message ?? error }}
+          {{ debugInfo }}
         </template>
-        <template
-          v-if="
-            errorType === 'directory_move' ||
-            errorType === 'minecraft_auth' ||
-            errorType === 'state_init' ||
-            errorType === 'no_loader_version'
-          "
-        >
+        <template v-if="hasDebugInfo">
           <hr />
           <p>
             If nothing is working and you need help, visit
@@ -261,16 +284,39 @@ async function repairInstance() {
             and start a chat using the widget in the bottom right and we will be more than happy to
             assist! Make sure to provide the following debug information to the agent:
           </p>
-          <details>
-            <summary>Debug information</summary>
-            {{ error.message ?? error }}
-          </details>
         </template>
       </div>
-      <div class="input-group push-right">
-        <a :href="supportLink" class="btn" @click="errorModal.hide()"><ChatIcon /> Get support</a>
-        <button v-if="closable" class="btn" @click="errorModal.hide()"><XIcon /> Close</button>
+      <div class="flex items-center gap-2">
+        <ButtonStyled>
+          <a :href="supportLink" @click="errorModal.hide()"><ChatIcon /> Get support</a>
+        </ButtonStyled>
+        <ButtonStyled v-if="closable">
+          <button @click="errorModal.hide()"><XIcon /> Close</button>
+        </ButtonStyled>
+        <ButtonStyled v-if="hasDebugInfo">
+          <button :disabled="copied" @click="copyToClipboard(debugInfo)">
+            <template v-if="copied"> <CheckIcon class="text-green" /> Copied! </template>
+            <template v-else> <CopyIcon /> Copy debug info </template>
+          </button>
+        </ButtonStyled>
       </div>
+      <template v-if="hasDebugInfo">
+        <div class="bg-button-bg rounded-xl mt-2 overflow-clip">
+          <button
+            class="flex items-center justify-between w-full bg-transparent border-0 px-4 py-3 cursor-pointer"
+            @click="errorCollapsed = !errorCollapsed"
+          >
+            <span class="text-contrast font-extrabold m-0">Debug information:</span>
+            <DropdownIcon
+              class="h-5 w-5 text-secondary transition-transform"
+              :class="{ 'rotate-180': !errorCollapsed }"
+            />
+          </button>
+          <Collapsible :collapsed="errorCollapsed">
+            <pre class="m-0 px-4 py-3 bg-bg rounded-none">{{ debugInfo }}</pre>
+          </Collapsible>
+        </div>
+      </template>
     </div>
   </ModalWrapper>
 </template>
diff --git a/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue
index 735d6c083..53820da66 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue
@@ -5,7 +5,7 @@ import { handleError } from '@/store/notifications'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import { get } from '@/helpers/settings'
 import { edit } from '@/helpers/profile'
-import type { InstanceSettingsTabProps, AppSettings } from '../../../helpers/types'
+import type { AppSettings, InstanceSettingsTabProps } from '../../../helpers/types'
 
 const { formatMessage } = useVIntl()
 
@@ -114,7 +114,6 @@ const messages = defineMessages({
       <Toggle
         id="fullscreen"
         :model-value="overrideWindowSettings ? fullscreenSetting : globalSettings.force_fullscreen"
-        :checked="fullscreenSetting"
         :disabled="!overrideWindowSettings"
         @update:model-value="
           (e) => {
diff --git a/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue b/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
index 63d0c5f9d..772473856 100644
--- a/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
+++ b/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
@@ -43,7 +43,7 @@ function onModalHide() {
   if (props.showAdOnClose) {
     show_ads_window()
   }
-  props.onHide()
+  props.onHide?.()
 }
 </script>
 
diff --git a/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue b/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
index 2cbae653c..aee4bdd78 100644
--- a/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { Toggle, ThemeSelector, TeleportDropdownMenu } from '@modrinth/ui'
+import { TeleportDropdownMenu, ThemeSelector, Toggle } from '@modrinth/ui'
 import { useTheming } from '@/store/state'
 import { get, set } from '@/helpers/settings'
-import { watch, ref } from 'vue'
+import { ref, watch } from 'vue'
 import { getOS } from '@/helpers/utils'
 
 const themeStore = useTheming()
@@ -46,7 +46,6 @@ watch(
     <Toggle
       id="advanced-rendering"
       :model-value="themeStore.advancedRendering"
-      :checked="themeStore.advancedRendering"
       @update:model-value="
         (e) => {
           themeStore.advancedRendering = e
@@ -61,16 +60,7 @@ watch(
       <h2 class="m-0 text-lg font-extrabold text-contrast">Native Decorations</h2>
       <p class="m-0 mt-1">Use system window frame (app restart required).</p>
     </div>
-    <Toggle
-      id="native-decorations"
-      :model-value="settings.native_decorations"
-      :checked="settings.native_decorations"
-      @update:model-value="
-        (e) => {
-          settings.native_decorations = e
-        }
-      "
-    />
+    <Toggle id="native-decorations" v-model="settings.native_decorations" />
   </div>
 
   <div class="mt-4 flex items-center justify-between">
@@ -78,16 +68,7 @@ watch(
       <h2 class="m-0 text-lg font-extrabold text-contrast">Minimize launcher</h2>
       <p class="m-0 mt-1">Minimize the launcher when a Minecraft process starts.</p>
     </div>
-    <Toggle
-      id="minimize-launcher"
-      :model-value="settings.hide_on_process_start"
-      :checked="settings.hide_on_process_start"
-      @update:model-value="
-        (e) => {
-          settings.hide_on_process_start = e
-        }
-      "
-    />
+    <Toggle id="minimize-launcher" v-model="settings.hide_on_process_start" />
   </div>
 
   <div class="mt-4 flex items-center justify-between">
@@ -111,7 +92,6 @@ watch(
     <Toggle
       id="toggle-sidebar"
       :model-value="settings.toggle_sidebar"
-      :checked="settings.toggle_sidebar"
       @update:model-value="
         (e) => {
           settings.toggle_sidebar = e
diff --git a/apps/app-frontend/src/components/ui/settings/DefaultInstanceSettings.vue b/apps/app-frontend/src/components/ui/settings/DefaultInstanceSettings.vue
index ecff3f485..a6e2f8be7 100644
--- a/apps/app-frontend/src/components/ui/settings/DefaultInstanceSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/DefaultInstanceSettings.vue
@@ -57,16 +57,7 @@ watch(
         </p>
       </div>
 
-      <Toggle
-        id="fullscreen"
-        :model-value="settings.force_fullscreen"
-        :checked="settings.force_fullscreen"
-        @update:model-value="
-          (e) => {
-            settings.force_fullscreen = e
-          }
-        "
-      />
+      <Toggle id="fullscreen" v-model="settings.force_fullscreen" />
     </div>
 
     <div class="flex items-center justify-between gap-4">
diff --git a/apps/app-frontend/src/components/ui/settings/FeatureFlagSettings.vue b/apps/app-frontend/src/components/ui/settings/FeatureFlagSettings.vue
index fde4a5c1c..24d27feb6 100644
--- a/apps/app-frontend/src/components/ui/settings/FeatureFlagSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/FeatureFlagSettings.vue
@@ -37,7 +37,6 @@ watch(
     <Toggle
       id="advanced-rendering"
       :model-value="getStoreValue(option)"
-      :checked="getStoreValue(option)"
       @update:model-value="() => setStoreValue(option, !themeStore.featureFlags[option])"
     />
   </div>
diff --git a/apps/app-frontend/src/components/ui/settings/PrivacySettings.vue b/apps/app-frontend/src/components/ui/settings/PrivacySettings.vue
index 5bb4deac0..69eea98fd 100644
--- a/apps/app-frontend/src/components/ui/settings/PrivacySettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/PrivacySettings.vue
@@ -30,16 +30,7 @@ watch(
         option, you opt out and ads will no longer be shown based on your interests.
       </p>
     </div>
-    <Toggle
-      id="personalized-ads"
-      :model-value="settings.personalized_ads"
-      :checked="settings.personalized_ads"
-      @update:model-value="
-        (e) => {
-          settings.personalized_ads = e
-        }
-      "
-    />
+    <Toggle id="personalized-ads" v-model="settings.personalized_ads" />
   </div>
 
   <div class="mt-4 flex items-center justify-between gap-4">
@@ -51,16 +42,7 @@ watch(
         longer be collected.
       </p>
     </div>
-    <Toggle
-      id="opt-out-analytics"
-      :model-value="settings.telemetry"
-      :checked="settings.telemetry"
-      @update:model-value="
-        (e) => {
-          settings.telemetry = e
-        }
-      "
-    />
+    <Toggle id="opt-out-analytics" v-model="settings.telemetry" />
   </div>
 
   <div class="mt-4 flex items-center justify-between gap-4">
@@ -75,10 +57,6 @@ watch(
         as those added by mods. (app restart required to take effect)
       </p>
     </div>
-    <Toggle
-      id="disable-discord-rpc"
-      v-model="settings.discord_rpc"
-      :checked="settings.discord_rpc"
-    />
+    <Toggle id="disable-discord-rpc" v-model="settings.discord_rpc" />
   </div>
 </template>
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index a46dbe60e..515e4e71a 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -20,6 +20,9 @@
   "app.settings.tabs.resource-management": {
     "message": "Resource management"
   },
+  "instance.filter.disabled": {
+    "message": "Disabled projects"
+  },
   "instance.filter.updates-available": {
     "message": "Updates available"
   },
diff --git a/apps/app-frontend/src/pages/instance/Mods.vue b/apps/app-frontend/src/pages/instance/Mods.vue
index 45ef23722..e49f2d9c7 100644
--- a/apps/app-frontend/src/pages/instance/Mods.vue
+++ b/apps/app-frontend/src/pages/instance/Mods.vue
@@ -179,7 +179,6 @@
         <Toggle
           class="!mx-2"
           :model-value="!item.data.disabled"
-          :checked="!item.data.disabled"
           @update:model-value="toggleDisableMod(item.data)"
         />
         <ButtonStyled type="transparent" circular>
diff --git a/apps/app-playground/.cargo/config.toml b/apps/app-playground/.cargo/config.toml
new file mode 100644
index 000000000..19f0a3a5a
--- /dev/null
+++ b/apps/app-playground/.cargo/config.toml
@@ -0,0 +1,2 @@
+[env]
+SQLX_OFFLINE = "true"
diff --git a/apps/app-playground/src/main.rs b/apps/app-playground/src/main.rs
index a50002dc7..f8d943938 100644
--- a/apps/app-playground/src/main.rs
+++ b/apps/app-playground/src/main.rs
@@ -3,9 +3,9 @@
     windows_subsystem = "windows"
 )]
 
+use std::time::Duration;
 use theseus::prelude::*;
-
-use theseus::profile::create::profile_create;
+use tokio::signal::ctrl_c;
 
 // A simple Rust implementation of the authentication run
 // 1) call the authenticate_begin_flow() function to get the URL to open (like you would in the frontend)
@@ -41,54 +41,21 @@ async fn main() -> theseus::Result<()> {
     // Initialize state
     State::init().await?;
 
-    if minecraft_auth::users().await?.is_empty() {
-        println!("No users found, authenticating.");
-        authenticate_run().await?; // could take credentials from here direct, but also deposited in state users
-    }
-    //
-    // st.settings
-    //     .write()
-    //     .await
-    //     .java_globals
-    //     .insert(JAVA_8_KEY.to_string(), check_jre(path).await?.unwrap());
-    // Clear profiles
-    println!("Clearing profiles.");
-    {
-        let h = profile::list().await?;
-        for profile in h.into_iter() {
-            profile::remove(&profile.path).await?;
+    loop {
+        if State::get().await?.friends_socket.is_connected().await {
+            break;
         }
+        tokio::time::sleep(Duration::from_millis(500)).await;
     }
 
-    println!("Creating/adding profile.");
+    tracing::info!("Starting host");
 
-    let name = "Example".to_string();
-    let game_version = "1.16.1".to_string();
-    let modloader = ModLoader::Forge;
-    let loader_version = "stable".to_string();
+    let socket = State::get().await?.friends_socket.open_port(25565).await?;
+    tracing::info!("Running host on socket {}", socket.socket_id());
 
-    let profile_path = profile_create(
-        name,
-        game_version,
-        modloader,
-        Some(loader_version),
-        None,
-        None,
-        None,
-    )
-    .await?;
-
-    println!("running");
-    // Run a profile, running minecraft and store the RwLock to the process
-    let process = profile::run(&profile_path).await?;
-
-    println!("Minecraft UUID: {}", process.uuid);
-
-    println!("All running process UUID {:?}", process::get_all().await?);
-
-    // hold the lock to the process until it ends
-    println!("Waiting for process to end...");
-    process::wait_for(process.uuid).await?;
+    ctrl_c().await?;
+    tracing::info!("Stopping host");
+    socket.shutdown().await?;
 
     Ok(())
 }
diff --git a/apps/app/.cargo/config.toml b/apps/app/.cargo/config.toml
new file mode 100644
index 000000000..19f0a3a5a
--- /dev/null
+++ b/apps/app/.cargo/config.toml
@@ -0,0 +1,2 @@
+[env]
+SQLX_OFFLINE = "true"
diff --git a/apps/app/Cargo.toml b/apps/app/Cargo.toml
index d4c4d1e92..0e3bc20b3 100644
--- a/apps/app/Cargo.toml
+++ b/apps/app/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "theseus_gui"
-version = "0.9.2"
+version = "0.9.3"
 description = "The Modrinth App is a desktop application for managing your Minecraft mods"
 license = "GPL-3.0-only"
 repository = "https://github.com/modrinth/code/apps/app/"
diff --git a/apps/app/tauri.conf.json b/apps/app/tauri.conf.json
index 37c5c20e5..24eb3bd41 100644
--- a/apps/app/tauri.conf.json
+++ b/apps/app/tauri.conf.json
@@ -44,7 +44,7 @@
     ]
   },
   "productName": "Modrinth App",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "mainBinaryName": "Modrinth App",
   "identifier": "ModrinthApp",
   "plugins": {
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 5b2266277..8ce3806e6 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -10,12 +10,12 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/check": "^0.9.3",
-    "@astrojs/starlight": "^0.26.3",
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/starlight": "^0.32.2",
     "@modrinth/assets": "workspace:*",
-    "astro": "^4.10.2",
-    "sharp": "^0.32.5",
-    "starlight-openapi": "^0.7.0",
-    "typescript": "^5.5.4"
+    "astro": "^5.4.1",
+    "sharp": "^0.33.5",
+    "starlight-openapi": "^0.14.0",
+    "typescript": "^5.8.2"
   }
-}
+}
\ No newline at end of file
diff --git a/apps/docs/src/content.config.ts b/apps/docs/src/content.config.ts
new file mode 100644
index 000000000..6a7b7a02b
--- /dev/null
+++ b/apps/docs/src/content.config.ts
@@ -0,0 +1,7 @@
+import { defineCollection } from 'astro:content';
+import { docsLoader } from '@astrojs/starlight/loaders';
+import { docsSchema } from '@astrojs/starlight/schema';
+
+export const collections = {
+  docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+};
diff --git a/apps/docs/src/content/config.ts b/apps/docs/src/content/config.ts
deleted file mode 100644
index 90ad769ec..000000000
--- a/apps/docs/src/content/config.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { defineCollection } from 'astro:content'
-import { docsSchema } from '@astrojs/starlight/schema'
-
-export const collections = {
-  docs: defineCollection({ schema: docsSchema() }),
-}
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 52faf1324..64b7a31cf 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -57,6 +57,8 @@
     "pinia": "^2.1.7",
     "qrcode.vue": "^3.4.0",
     "semver": "^7.5.4",
+    "three": "^0.172.0",
+    "@types/three": "^0.172.0",
     "vue-multiselect": "3.0.0-alpha.2",
     "vue-typed-virtual-list": "^1.0.10",
     "vue3-ace-editor": "^2.2.4",
diff --git a/apps/frontend/src/assets/styles/layout.scss b/apps/frontend/src/assets/styles/layout.scss
index d9924ac1f..41be6710e 100644
--- a/apps/frontend/src/assets/styles/layout.scss
+++ b/apps/frontend/src/assets/styles/layout.scss
@@ -133,6 +133,21 @@
     "sidebar"
     / 100%;
 
+  .normal-page__ultimate-sidebar {
+    grid-area: ultimate-sidebar;
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    z-index: 100;
+    max-width: calc(100% - 2rem);
+    max-height: calc(100vh - 2rem);
+    overflow-y: auto;
+
+    > div {
+      box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+    }
+  }
+
   @media screen and (min-width: 1024px) {
     &.sidebar {
       grid-template:
@@ -156,6 +171,45 @@
     }
   }
 
+  @media screen and (min-width: 1400px) {
+    &.ultimate-sidebar {
+      max-width: calc(80rem + 0.75rem + 600px);
+
+      grid-template:
+        "header header ultimate-sidebar" auto
+        "content sidebar ultimate-sidebar" auto
+        "content dummy ultimate-sidebar" 1fr
+        / 1fr 18.75rem auto;
+
+      .normal-page__header {
+        max-width: 80rem;
+      }
+
+      .normal-page__ultimate-sidebar {
+        position: sticky;
+        top: 4.5rem;
+        bottom: unset;
+        right: unset;
+        z-index: unset;
+        align-self: start;
+        display: flex;
+        height: calc(100vh - 4.5rem * 2);
+
+        > div {
+          box-shadow: none;
+        }
+      }
+
+      &.alt-layout {
+        grid-template:
+          "ultimate-sidebar header header" auto
+          "ultimate-sidebar sidebar content" auto
+          "ultimate-sidebar dummy content" 1fr
+          / auto 18.75rem 1fr;
+      }
+    }
+  }
+
   .normal-page__sidebar {
     grid-area: sidebar;
   }
diff --git a/apps/frontend/src/components/ui/CollectionCreateModal.vue b/apps/frontend/src/components/ui/CollectionCreateModal.vue
index e74934fe5..02b075607 100644
--- a/apps/frontend/src/components/ui/CollectionCreateModal.vue
+++ b/apps/frontend/src/components/ui/CollectionCreateModal.vue
@@ -19,10 +19,7 @@
       </div>
       <div class="flex flex-col gap-2">
         <label for="additional-information" class="flex flex-col gap-1">
-          <span class="text-lg font-semibold text-contrast">
-            Summary
-            <span class="text-brand-red">*</span>
-          </span>
+          <span class="text-lg font-semibold text-contrast"> Summary </span>
           <span>A sentence or two that describes your collection.</span>
         </label>
         <div class="textarea-wrapper">
@@ -52,8 +49,8 @@
   </NewModal>
 </template>
 <script setup>
-import { XIcon, PlusIcon } from "@modrinth/assets";
-import { NewModal, ButtonStyled } from "@modrinth/ui";
+import { PlusIcon, XIcon } from "@modrinth/assets";
+import { ButtonStyled, NewModal } from "@modrinth/ui";
 
 const router = useNativeRouter();
 
@@ -78,7 +75,7 @@ async function create() {
       method: "POST",
       body: {
         name: name.value.trim(),
-        description: description.value.trim(),
+        description: description.value.trim() || undefined,
         projects: props.projectIds,
       },
       apiVersion: 3,
diff --git a/apps/frontend/src/components/ui/ModerationChecklist.vue b/apps/frontend/src/components/ui/ModerationChecklist.vue
index 7e844fcd9..9717384de 100644
--- a/apps/frontend/src/components/ui/ModerationChecklist.vue
+++ b/apps/frontend/src/components/ui/ModerationChecklist.vue
@@ -1,329 +1,366 @@
 <template>
-  <div class="card moderation-checklist">
-    <h1>Moderation checklist</h1>
-    <div v-if="done">
-      <p>You are done moderating this project! There are {{ futureProjects.length }} left.</p>
+  <div
+    class="moderation-checklist flex w-[600px] max-w-full flex-col rounded-2xl border-[1px] border-solid border-orange bg-bg-raised p-4 transition-all delay-200 duration-200 ease-in-out"
+    :class="collapsed ? `sm:max-w-[300px]` : 'sm:max-w-[600px]'"
+  >
+    <div class="flex grow-0 items-center gap-2">
+      <h1 class="m-0 mr-auto flex items-center gap-2 text-2xl font-extrabold text-contrast">
+        <ScaleIcon class="text-orange" /> Moderation
+      </h1>
+      <ButtonStyled circular color="red" color-fill="none" hover-color-fill="background">
+        <button v-tooltip="`Exit moderation`" @click="exitModeration">
+          <CrossIcon />
+        </button>
+      </ButtonStyled>
+      <ButtonStyled circular>
+        <button v-tooltip="collapsed ? `Expand` : `Collapse`" @click="emit('toggleCollapsed')">
+          <DropdownIcon class="transition-transform" :class="{ 'rotate-180': collapsed }" />
+        </button>
+      </ButtonStyled>
     </div>
-    <div v-else-if="generatedMessage">
-      <p>
-        Enter your moderation message here. Remember to check the Moderation tab to answer any
-        questions an author might have!
-      </p>
-      <div class="markdown-editor-spacing">
-        <MarkdownEditor v-model="message" :placeholder="'Enter moderation message'" />
+    <Collapsible base-class="grow" class="flex grow flex-col" :collapsed="collapsed">
+      <div class="my-4 h-[1px] w-full bg-divider" />
+      <div v-if="done">
+        <p>You are done moderating this project! There are {{ futureProjects.length }} left.</p>
       </div>
-    </div>
-    <div v-else-if="steps[currentStepIndex].id === 'modpack-permissions'">
-      <h2 v-if="modPackData">
-        Modpack permissions
-        <template v-if="modPackIndex + 1 <= modPackData.length">
-          ({{ modPackIndex + 1 }} / {{ modPackData.length }})
-        </template>
-      </h2>
-      <div v-if="!modPackData">Loading data...</div>
-      <div v-else-if="modPackData.length === 0">
-        <p>All permissions obtained. You may skip this step!</p>
+      <div v-else-if="generatedMessage">
+        <p>
+          Enter your moderation message here. Remember to check the Moderation tab to answer any
+          questions an author might have!
+        </p>
+        <div class="markdown-editor-spacing">
+          <MarkdownEditor v-model="message" :placeholder="'Enter moderation message'" />
+        </div>
       </div>
-      <div v-else-if="!modPackData[modPackIndex]">
-        <p>All permission checks complete!</p>
-        <div class="input-group modpack-buttons">
-          <button class="btn" @click="modPackIndex -= 1">
-            <LeftArrowIcon aria-hidden="true" />
-            Previous
-          </button>
+      <div v-else-if="steps[currentStepIndex].id === 'modpack-permissions'">
+        <h2 v-if="modPackData" class="m-0 mb-2 text-lg font-extrabold">
+          Modpack permissions
+          <template v-if="modPackIndex + 1 <= modPackData.length">
+            ({{ modPackIndex + 1 }} / {{ modPackData.length }})
+          </template>
+        </h2>
+        <div v-if="!modPackData">Loading data...</div>
+        <div v-else-if="modPackData.length === 0">
+          <p>All permissions obtained. You may skip this step!</p>
+        </div>
+        <div v-else-if="!modPackData[modPackIndex]">
+          <p>All permission checks complete!</p>
+          <div class="input-group modpack-buttons">
+            <ButtonStyled>
+              <button @click="modPackIndex -= 1">
+                <LeftArrowIcon aria-hidden="true" />
+                Previous
+              </button>
+            </ButtonStyled>
+          </div>
+        </div>
+        <div v-else>
+          <div v-if="modPackData[modPackIndex].type === 'unknown'">
+            <p>What is the approval type of {{ modPackData[modPackIndex].file_name }}?</p>
+            <div class="input-group">
+              <button
+                v-for="(option, index) in fileApprovalTypes"
+                :key="index"
+                class="btn"
+                :class="{
+                  'option-selected': modPackData[modPackIndex].status === option.id,
+                }"
+                @click="modPackData[modPackIndex].status = option.id"
+              >
+                {{ option.name }}
+              </button>
+            </div>
+            <div
+              v-if="modPackData[modPackIndex].status !== 'unidentified'"
+              class="flex flex-col gap-1"
+            >
+              <label for="proof">
+                <span class="label__title">Proof</span>
+              </label>
+              <input
+                id="proof"
+                v-model="modPackData[modPackIndex].proof"
+                type="text"
+                autocomplete="off"
+                placeholder="Enter proof of status..."
+              />
+              <label for="link">
+                <span class="label__title">Link</span>
+              </label>
+              <input
+                id="link"
+                v-model="modPackData[modPackIndex].url"
+                type="text"
+                autocomplete="off"
+                placeholder="Enter link of project..."
+              />
+              <label for="title">
+                <span class="label__title">Title</span>
+              </label>
+              <input
+                id="title"
+                v-model="modPackData[modPackIndex].title"
+                type="text"
+                autocomplete="off"
+                placeholder="Enter title of project..."
+              />
+            </div>
+          </div>
+          <div v-else-if="modPackData[modPackIndex].type === 'flame'">
+            <p>
+              What is the approval type of {{ modPackData[modPackIndex].title }} (<a
+                :href="modPackData[modPackIndex].url"
+                target="_blank"
+                class="text-link"
+                >{{ modPackData[modPackIndex].url }}</a
+              >?
+            </p>
+            <div class="input-group">
+              <button
+                v-for="(option, index) in fileApprovalTypes"
+                :key="index"
+                class="btn"
+                :class="{
+                  'option-selected': modPackData[modPackIndex].status === option.id,
+                }"
+                @click="modPackData[modPackIndex].status = option.id"
+              >
+                {{ option.name }}
+              </button>
+            </div>
+          </div>
+          <div
+            v-if="
+              ['unidentified', 'no', 'with-attribution'].includes(modPackData[modPackIndex].status)
+            "
+          >
+            <p v-if="modPackData[modPackIndex].status === 'unidentified'">
+              Does this project provide identification and permission for
+              <strong>{{ modPackData[modPackIndex].file_name }}</strong
+              >?
+            </p>
+            <p v-else-if="modPackData[modPackIndex].status === 'with-attribution'">
+              Does this project provide attribution for
+              <strong>{{ modPackData[modPackIndex].file_name }}</strong
+              >?
+            </p>
+            <p v-else>
+              Does this project provide proof of permission for
+              <strong>{{ modPackData[modPackIndex].file_name }}</strong
+              >?
+            </p>
+            <div class="input-group">
+              <button
+                v-for="(option, index) in filePermissionTypes"
+                :key="index"
+                class="btn"
+                :class="{
+                  'option-selected': modPackData[modPackIndex].approved === option.id,
+                }"
+                @click="modPackData[modPackIndex].approved = option.id"
+              >
+                {{ option.name }}
+              </button>
+            </div>
+          </div>
+          <div class="mt-4 flex gap-2">
+            <ButtonStyled>
+              <button :disabled="modPackIndex <= 0" @click="modPackIndex -= 1">
+                <LeftArrowIcon aria-hidden="true" />
+                Previous
+              </button>
+            </ButtonStyled>
+            <ButtonStyled color="blue">
+              <button :disabled="!modPackData[modPackIndex].status" @click="modPackIndex += 1">
+                <RightArrowIcon aria-hidden="true" />
+                Next project
+              </button>
+            </ButtonStyled>
+          </div>
         </div>
       </div>
       <div v-else>
-        <div v-if="modPackData[modPackIndex].type === 'unknown'">
-          <p>What is the approval type of {{ modPackData[modPackIndex].file_name }}?</p>
-          <div class="input-group">
-            <button
-              v-for="(option, index) in fileApprovalTypes"
-              :key="index"
-              class="btn"
-              :class="{
-                'option-selected': modPackData[modPackIndex].status === option.id,
-              }"
-              @click="modPackData[modPackIndex].status = option.id"
-            >
-              {{ option.name }}
-            </button>
-          </div>
-          <template v-if="modPackData[modPackIndex].status !== 'unidentified'">
-            <div class="universal-labels"></div>
-            <label for="proof">
-              <span class="label__title">Proof</span>
-            </label>
-            <input
-              id="proof"
-              v-model="modPackData[modPackIndex].proof"
-              type="text"
-              autocomplete="off"
-              placeholder="Enter proof of status..."
-            />
-            <label for="link">
-              <span class="label__title">Link</span>
-            </label>
-            <input
-              id="link"
-              v-model="modPackData[modPackIndex].url"
-              type="text"
-              autocomplete="off"
-              placeholder="Enter link of project..."
-            />
-            <label for="title">
-              <span class="label__title">Title</span>
-            </label>
-            <input
-              id="title"
-              v-model="modPackData[modPackIndex].title"
-              type="text"
-              autocomplete="off"
-              placeholder="Enter title of project..."
-            />
+        <h2 class="m-0 mb-2 text-lg font-extrabold">{{ steps[currentStepIndex].question }}</h2>
+        <template v-if="steps[currentStepIndex].rules && steps[currentStepIndex].rules.length > 0">
+          <strong>Guidance:</strong>
+          <ul class="mb-3 mt-2 leading-tight">
+            <li v-for="(rule, index) in steps[currentStepIndex].rules" :key="index">
+              {{ rule }}
+            </li>
+          </ul>
+        </template>
+        <template
+          v-if="steps[currentStepIndex].examples && steps[currentStepIndex].examples.length > 0"
+        >
+          <strong>Reject things like:</strong>
+          <ul class="mb-3 mt-2 leading-tight">
+            <li v-for="(example, index) in steps[currentStepIndex].examples" :key="index">
+              {{ example }}
+            </li>
+          </ul>
+        </template>
+        <template
+          v-if="steps[currentStepIndex].exceptions && steps[currentStepIndex].exceptions.length > 0"
+        >
+          <strong>Exceptions:</strong>
+          <ul class="mb-3 mt-2 leading-tight">
+            <li v-for="(exception, index) in steps[currentStepIndex].exceptions" :key="index">
+              {{ exception }}
+            </li>
+          </ul>
+        </template>
+        <p v-if="steps[currentStepIndex].id === 'title'">
+          <strong>Title:</strong> {{ project.title }}
+        </p>
+        <p v-if="steps[currentStepIndex].id === 'slug'">
+          <strong>Slug:</strong> {{ project.slug }}
+        </p>
+        <p v-if="steps[currentStepIndex].id === 'summary'">
+          <strong>Summary:</strong> {{ project.description }}
+        </p>
+        <p v-if="steps[currentStepIndex].id === 'links'">
+          <template v-if="project.issues_url">
+            <strong>Issues: </strong>
+            <a class="text-link" :href="project.issues_url">{{ project.issues_url }}</a> <br />
           </template>
-        </div>
-        <div v-else-if="modPackData[modPackIndex].type === 'flame'">
-          <p>
-            What is the approval type of {{ modPackData[modPackIndex].title }} (<a
-              :href="modPackData[modPackIndex].url"
-              target="_blank"
-              class="text-link"
-              >{{ modPackData[modPackIndex].url }}</a
-            >?
-          </p>
-          <div class="input-group">
-            <button
-              v-for="(option, index) in fileApprovalTypes"
-              :key="index"
-              class="btn"
-              :class="{
-                'option-selected': modPackData[modPackIndex].status === option.id,
-              }"
-              @click="modPackData[modPackIndex].status = option.id"
-            >
-              {{ option.name }}
-            </button>
-          </div>
+          <template v-if="project.source_url">
+            <strong>Source: </strong>
+            <a class="text-link" :href="project.source_url">{{ project.source_url }}</a> <br />
+          </template>
+          <template v-if="project.wiki_url">
+            <strong>Wiki: </strong>
+            <a class="text-link" :href="project.wiki_url">{{ project.wiki_url }}</a> <br />
+          </template>
+          <template v-if="project.discord_url">
+            <strong>Discord: </strong>
+            <a class="text-link" :href="project.discord_url">{{ project.discord_url }}</a>
+            <br />
+          </template>
+          <template v-for="(donation, index) in project.donation_urls" :key="index">
+            <strong>{{ donation.platform }}: </strong>
+            <a class="text-link" :href="donation.url">{{ donation.url }}</a>
+            <br />
+          </template>
+        </p>
+        <p v-if="steps[currentStepIndex].id === 'categories'">
+          <strong>Categories:</strong>
+          <Categories
+            :categories="project.categories.concat(project.additional_categories)"
+            :type="project.actualProjectType"
+            class="categories"
+          />
+        </p>
+        <p v-if="steps[currentStepIndex].id === 'side-types'">
+          <strong>Client side:</strong> {{ project.client_side }} <br />
+          <strong>Server side:</strong> {{ project.server_side }}
+        </p>
+        <div class="options input-group">
+          <button
+            v-for="(option, index) in steps[currentStepIndex].options"
+            :key="index"
+            class="btn"
+            :class="{
+              'option-selected':
+                selectedOptions[steps[currentStepIndex].id] &&
+                selectedOptions[steps[currentStepIndex].id].find((x) => x.name === option.name),
+            }"
+            @click="toggleOption(steps[currentStepIndex].id, option)"
+          >
+            {{ option.name }}
+          </button>
         </div>
         <div
           v-if="
-            ['unidentified', 'no', 'with-attribution'].includes(modPackData[modPackIndex].status)
+            selectedOptions[steps[currentStepIndex].id] &&
+            selectedOptions[steps[currentStepIndex].id].length > 0
           "
+          class="inputs universal-labels"
         >
-          <p v-if="modPackData[modPackIndex].status === 'unidentified'">
-            Does this project provide identification and permission for
-            <strong>{{ modPackData[modPackIndex].file_name }}</strong
-            >?
-          </p>
-          <p v-else-if="modPackData[modPackIndex].status === 'with-attribution'">
-            Does this project provide attribution for
-            <strong>{{ modPackData[modPackIndex].file_name }}</strong
-            >?
-          </p>
-          <p v-else>
-            Does this project provide proof of permission for
-            <strong>{{ modPackData[modPackIndex].file_name }}</strong
-            >?
-          </p>
-          <div class="input-group">
-            <button
-              v-for="(option, index) in filePermissionTypes"
-              :key="index"
-              class="btn"
-              :class="{
-                'option-selected': modPackData[modPackIndex].approved === option.id,
-              }"
-              @click="modPackData[modPackIndex].approved = option.id"
-            >
-              {{ option.name }}
+          <div
+            v-for="(option, index) in selectedOptions[steps[currentStepIndex].id].filter(
+              (x) => x.fillers && x.fillers.length > 0,
+            )"
+            :key="index"
+          >
+            <div v-for="(filler, idx) in option.fillers" :key="idx">
+              <label :for="filler.id">
+                <span class="label__title">
+                  {{ filler.question }}
+                  <span v-if="filler.required" class="required">*</span>
+                </span>
+              </label>
+              <div v-if="filler.large" class="markdown-editor-spacing">
+                <MarkdownEditor v-model="filler.value" :placeholder="'Enter moderation message'" />
+              </div>
+              <input v-else :id="filler.id" v-model="filler.value" type="text" autocomplete="off" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-auto">
+        <div
+          class="mt-4 flex grow justify-between gap-2 border-0 border-t-[1px] border-solid border-divider pt-4"
+        >
+          <div class="flex items-center gap-2">
+            <ButtonStyled v-if="!done">
+              <button aria-label="Skip" @click="goToNextProject">
+                <ExitIcon aria-hidden="true" />
+                <template v-if="futureProjects.length > 0">Skip</template>
+                <template v-else>Exit</template>
+              </button>
+            </ButtonStyled>
+            <ButtonStyled v-if="currentStepIndex > 0">
+              <button @click="previousPage() && !done">
+                <LeftArrowIcon aria-hidden="true" /> Previous
+              </button>
+            </ButtonStyled>
+          </div>
+          <div class="flex items-center gap-2">
+            <ButtonStyled v-if="currentStepIndex < steps.length - 1 && !done" color="brand">
+              <button @click="nextPage()"><RightArrowIcon aria-hidden="true" /> Next</button>
+            </ButtonStyled>
+            <ButtonStyled v-else-if="!generatedMessage" color="brand">
+              <button :disabled="loadingMessage" @click="generateMessage">
+                <UpdatedIcon aria-hidden="true" /> Generate message
+              </button>
+            </ButtonStyled>
+            <template v-if="generatedMessage && !done">
+              <ButtonStyled color="green">
+                <button @click="sendMessage(project.requested_status ?? 'approved')">
+                  <CheckIcon aria-hidden="true" /> Approve
+                </button>
+              </ButtonStyled>
+              <div class="joined-buttons">
+                <ButtonStyled color="red">
+                  <button @click="sendMessage('rejected')">
+                    <CrossIcon aria-hidden="true" /> Reject
+                  </button>
+                </ButtonStyled>
+                <ButtonStyled color="red">
+                  <OverflowMenu
+                    class="btn-dropdown-animation"
+                    :options="[
+                      {
+                        id: 'withhold',
+                        color: 'danger',
+                        action: () => sendMessage('withheld'),
+                        hoverFilled: true,
+                      },
+                    ]"
+                  >
+                    <DropdownIcon style="rotate: 180deg" />
+                    <template #withhold> <EyeOffIcon aria-hidden="true" /> Withhold </template>
+                  </OverflowMenu>
+                </ButtonStyled>
+              </div>
+            </template>
+            <button v-if="done" class="btn btn-primary next-project" @click="goToNextProject">
+              Next project
             </button>
           </div>
         </div>
-        <div class="input-group modpack-buttons">
-          <button class="btn" :disabled="modPackIndex <= 0" @click="modPackIndex -= 1">
-            <LeftArrowIcon aria-hidden="true" />
-            Previous
-          </button>
-          <button
-            class="btn btn-blue"
-            :disabled="!modPackData[modPackIndex].status"
-            @click="modPackIndex += 1"
-          >
-            <RightArrowIcon aria-hidden="true" />
-            Next project
-          </button>
-        </div>
       </div>
-    </div>
-    <div v-else>
-      <h2>{{ steps[currentStepIndex].question }}</h2>
-      <template v-if="steps[currentStepIndex].rules && steps[currentStepIndex].rules.length > 0">
-        <strong>Rules guidance:</strong>
-        <ul>
-          <li v-for="(rule, index) in steps[currentStepIndex].rules" :key="index">
-            {{ rule }}
-          </li>
-        </ul>
-      </template>
-      <template
-        v-if="steps[currentStepIndex].examples && steps[currentStepIndex].examples.length > 0"
-      >
-        <strong>Examples of what to reject:</strong>
-        <ul>
-          <li v-for="(example, index) in steps[currentStepIndex].examples" :key="index">
-            {{ example }}
-          </li>
-        </ul>
-      </template>
-      <template
-        v-if="steps[currentStepIndex].exceptions && steps[currentStepIndex].exceptions.length > 0"
-      >
-        <strong>Exceptions:</strong>
-        <ul>
-          <li v-for="(exception, index) in steps[currentStepIndex].exceptions" :key="index">
-            {{ exception }}
-          </li>
-        </ul>
-      </template>
-      <p v-if="steps[currentStepIndex].id === 'title'">
-        <strong>Title:</strong> {{ project.title }}
-      </p>
-      <p v-if="steps[currentStepIndex].id === 'slug'"><strong>Slug:</strong> {{ project.slug }}</p>
-      <p v-if="steps[currentStepIndex].id === 'summary'">
-        <strong>Summary:</strong> {{ project.description }}
-      </p>
-      <p v-if="steps[currentStepIndex].id === 'links'">
-        <template v-if="project.issues_url">
-          <strong>Issues: </strong>
-          <a class="text-link" :href="project.issues_url">{{ project.issues_url }}</a> <br />
-        </template>
-        <template v-if="project.source_url">
-          <strong>Source: </strong>
-          <a class="text-link" :href="project.source_url">{{ project.source_url }}</a> <br />
-        </template>
-        <template v-if="project.wiki_url">
-          <strong>Wiki: </strong>
-          <a class="text-link" :href="project.wiki_url">{{ project.wiki_url }}</a> <br />
-        </template>
-        <template v-if="project.discord_url">
-          <strong>Discord: </strong>
-          <a class="text-link" :href="project.discord_url">{{ project.discord_url }}</a>
-          <br />
-        </template>
-        <template v-for="(donation, index) in project.donation_urls" :key="index">
-          <strong>{{ donation.platform }}: </strong>
-          <a class="text-link" :href="donation.url">{{ donation.url }}</a>
-          <br />
-        </template>
-      </p>
-      <p v-if="steps[currentStepIndex].id === 'categories'">
-        <strong>Categories:</strong>
-        <Categories
-          :categories="project.categories.concat(project.additional_categories)"
-          :type="project.actualProjectType"
-          class="categories"
-        />
-      </p>
-      <p v-if="steps[currentStepIndex].id === 'side-types'">
-        <strong>Client side:</strong> {{ project.client_side }} <br />
-        <strong>Server side:</strong> {{ project.server_side }}
-      </p>
-      <div class="options input-group">
-        <button
-          v-for="(option, index) in steps[currentStepIndex].options"
-          :key="index"
-          class="btn"
-          :class="{
-            'option-selected':
-              selectedOptions[steps[currentStepIndex].id] &&
-              selectedOptions[steps[currentStepIndex].id].find((x) => x.name === option.name),
-          }"
-          @click="toggleOption(steps[currentStepIndex].id, option)"
-        >
-          {{ option.name }}
-        </button>
-      </div>
-      <div
-        v-if="
-          selectedOptions[steps[currentStepIndex].id] &&
-          selectedOptions[steps[currentStepIndex].id].length > 0
-        "
-        class="inputs universal-labels"
-      >
-        <div
-          v-for="(option, index) in selectedOptions[steps[currentStepIndex].id].filter(
-            (x) => x.fillers && x.fillers.length > 0,
-          )"
-          :key="index"
-        >
-          <div v-for="(filler, idx) in option.fillers" :key="idx">
-            <label :for="filler.id">
-              <span class="label__title">
-                {{ filler.question }}
-                <span v-if="filler.required" class="required">*</span>
-              </span>
-            </label>
-            <div v-if="filler.large" class="markdown-editor-spacing">
-              <MarkdownEditor v-model="filler.value" :placeholder="'Enter moderation message'" />
-            </div>
-            <input v-else :id="filler.id" v-model="filler.value" type="text" autocomplete="off" />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="input-group modpack-buttons">
-      <button v-if="!done" class="btn skip-btn" aria-label="Skip" @click="goToNextProject">
-        <ExitIcon aria-hidden="true" />
-        <template v-if="futureProjects.length > 0">Skip</template>
-        <template v-else>Exit</template>
-      </button>
-      <button v-if="currentStepIndex > 0" class="btn" @click="previousPage() && !done">
-        <LeftArrowIcon aria-hidden="true" /> Previous
-      </button>
-      <button
-        v-if="currentStepIndex < steps.length - 1 && !done"
-        class="btn btn-primary"
-        @click="nextPage()"
-      >
-        <RightArrowIcon aria-hidden="true" /> Next
-      </button>
-      <button
-        v-else-if="!generatedMessage"
-        class="btn btn-primary"
-        :disabled="loadingMessage"
-        @click="generateMessage"
-      >
-        <UpdatedIcon aria-hidden="true" /> Generate message
-      </button>
-      <template v-if="generatedMessage && !done">
-        <button class="btn btn-green" @click="sendMessage(project.requested_status ?? 'approved')">
-          <CheckIcon aria-hidden="true" /> Approve
-        </button>
-        <div class="joined-buttons">
-          <button class="btn btn-danger" @click="sendMessage('rejected')">
-            <CrossIcon aria-hidden="true" /> Reject
-          </button>
-          <OverflowMenu
-            class="btn btn-danger btn-dropdown-animation icon-only"
-            :options="[
-              {
-                id: 'withhold',
-                color: 'danger',
-                action: () => sendMessage('withheld'),
-                hoverFilled: true,
-              },
-            ]"
-          >
-            <DropdownIcon style="rotate: 180deg" />
-            <template #withhold> <EyeOffIcon aria-hidden="true" /> Withhold </template>
-          </OverflowMenu>
-        </div>
-      </template>
-      <button v-if="done" class="btn btn-primary next-project" @click="goToNextProject">
-        Next project
-      </button>
-    </div>
+    </Collapsible>
   </div>
 </template>
 
@@ -337,8 +374,9 @@ import {
   XIcon as CrossIcon,
   EyeOffIcon,
   ExitIcon,
+  ScaleIcon,
 } from "@modrinth/assets";
-import { MarkdownEditor, OverflowMenu } from "@modrinth/ui";
+import { ButtonStyled, MarkdownEditor, OverflowMenu, Collapsible } from "@modrinth/ui";
 import Categories from "~/components/ui/search/Categories.vue";
 
 const props = defineProps({
@@ -355,8 +393,14 @@ const props = defineProps({
     required: true,
     default: () => {},
   },
+  collapsed: {
+    type: Boolean,
+    default: false,
+  },
 });
 
+const emit = defineEmits(["exit", "toggleCollapsed"]);
+
 const steps = computed(() =>
   [
     {
@@ -411,18 +455,21 @@ Per section 5.2 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#m
           name: "Insufficient",
           resultingMessage: `## Insufficient Summary
 Per section 5.3 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#miscellaneous) Your project summary should provide a brief overview of your project that informs and entices users.
+
 This is the first thing most people will see about your mod other than the Logo, so it's important it be accurate, reasonably detailed, and exciting.`,
         },
         {
           name: "Repeat of title",
           resultingMessage: `## Insufficient Summary
 Per section 5.3 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#miscellaneous) your Summary can not be the same as your project's Title. Your project summary should provide a brief overview of your project that informs and entices users.
+
 This is the first thing most people will see about your mod other than the Logo, so it's important it be accurate, reasonably detailed, and exciting.`,
         },
         {
           name: "Formatting",
           resultingMessage: `## Insufficient Summary
 Per section 5.3 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#miscellaneous) your Summary can not include any extra formatting such as lists, or links. Your project summary should provide a brief overview of your project that informs and entices users.
+
 This is the first thing most people will see about your mod other than the Logo, so it's important it be accurate, reasonably detailed, and exciting.`,
         },
       ],
@@ -559,7 +606,9 @@ Per section 5.1 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#m
           name: "Inaccurate (modpack)",
           resultingMessage: `## Incorrect Environment Information
 Per section 5.1 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#miscellaneous), it is important that the metadata of your projects is accurate, including whether the project runs on the client or server side.
+
 For a brief rundown of how this works:
+
 Some modpacks can be client-side, usually aimed at providing utility and optimization while allowing the player to join an unmodded server, for instance, [Fabulously Optimized](https://modrinth.com/modpack/fabulously-optimized).
 Most other modpacks that change how the game is played are going to be required on both the client and server, like the modpack [Dying Light](https://modrinth.com/modpack/dying-light).
 When in doubt, test for yourself or check the requirements of the mods in your pack.`,
@@ -568,10 +617,11 @@ When in doubt, test for yourself or check the requirements of the mods in your p
           name: "Inaccurate (mod)",
           resultingMessage: `## Environment Information
 Per section 5.1 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#miscellaneous), it is important that the metadata of your projects is accurate, including whether the project runs on the client or server side.
+
 For a brief rundown of how this works:
-**Client side** refers to a mod that is only required by the client, like [Sodium](https://modrinth.com/mod/sodium).
-**Server side** mods change the behavior of the server without the client needing the mod, like Datapacks, recipes, or server-side behaviors, like [Falling Tree](https://modrinth.com/mod/fallingtree).
-A mod that adds features, entities, or new blocks and items, generally will be required on **both** the server and the client, for example [Cobblemon](https://modrinth.com/mod/cobblemon).`,
+- **Client side** refers to a mod that is only required by the client, like [Sodium](https://modrinth.com/mod/sodium).
+- **Server side** mods change the behavior of the server without the client needing the mod, like Datapacks, recipes, or server-side behaviors, like [Falling Tree](https://modrinth.com/mod/fallingtree).
+- A mod that adds features, entities, or new blocks and items, generally will be required on **both** the server and the client, for example [Cobblemon](https://modrinth.com/mod/cobblemon).`,
         },
       ],
     },
@@ -602,6 +652,7 @@ Per section 5.5 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#m
           name: "Incorrect additional files",
           resultingMessage: `## Incorrect Use of Additional Files
 It looks like you've uploaded multiple \`mod.jar\` files to one Version as Additional Files. Per section 5.7 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#miscellaneous) each Version of your project must include only one \`mod.jar\` that corresponds to its respective Minecraft and loader versions. This allows users to easily find and download the file they need for the version they're on with ease. The Additional Files feature can be used for things like a \`Sources.jar\`.
+
 Please upload each version of your mod separately, thank you.`,
         },
         {
@@ -629,7 +680,9 @@ It looks like you've selected loaders for your Resource Pack that are causing it
           name: "Re-upload",
           resultingMessage: `## Reuploads are forbidden
 This project appears to contain content from %ORIGINAL_PROJECT% by %ORIGINAL_AUTHOR%.
+
 Per section 4 of [Modrinth's Content Rules](https://modrinth.com/legal/rules) this is strictly forbidden.
+
 If you believe this is an error, or you can verify you are the creator and rightful owner of this content please let us know. Otherwise, we ask that you **do not resubmit this project**.`,
           fillers: [
             {
@@ -847,6 +900,7 @@ async function generateMessage() {
     for (const mod of mods) {
       message.value += `- ${mod}\n`;
     }
+    message.value += "\n";
   }
 
   if (modPackData.value && modPackData.value.length > 0) {
@@ -913,7 +967,7 @@ async function generateMessage() {
       permanentNoMods.length > 0 ||
       unidentifiedMods.length > 0
     ) {
-      message.value += "## Copyrighted Content \n";
+      message.value += "## Copyrighted content \n";
 
       printMods(
         attributeMods,
@@ -998,6 +1052,20 @@ async function sendMessage(status) {
 
 const router = useNativeRouter();
 
+async function exitModeration() {
+  await router.push({
+    name: "type-id",
+    params: {
+      type: "project",
+      id: props.project.id,
+    },
+    state: {
+      showChecklist: false,
+    },
+  });
+  emit("exit");
+}
+
 async function goToNextProject() {
   const project = props.futureProjects[0];
 
@@ -1021,23 +1089,8 @@ async function goToNextProject() {
 
 <style scoped lang="scss">
 .moderation-checklist {
-  position: sticky;
-  bottom: 0;
-  left: 100vw;
-  z-index: 100;
-  border: 1px solid var(--color-bg-inverted);
-  width: 600px;
-
-  .skip-btn {
-    margin-right: auto;
-  }
-
-  .next-project {
-    margin-left: auto;
-  }
-
-  .modpack-buttons {
-    margin-top: 1rem;
+  @media (prefers-reduced-motion) {
+    transition: none !important;
   }
 
   .option-selected {
diff --git a/apps/frontend/src/components/ui/NavTabs.vue b/apps/frontend/src/components/ui/NavTabs.vue
index ab8ef5b7c..629b47f5e 100644
--- a/apps/frontend/src/components/ui/NavTabs.vue
+++ b/apps/frontend/src/components/ui/NavTabs.vue
@@ -76,7 +76,12 @@ function pickLink() {
   subpageSelected.value = false;
   for (let i = filteredLinks.value.length - 1; i >= 0; i--) {
     const link = filteredLinks.value[i];
-    if (decodeURIComponent(route.path) === link.href) {
+    if (props.query) {
+      if (route.query[props.query] === link.href || (!route.query[props.query] && !link.href)) {
+        index = i;
+        break;
+      }
+    } else if (decodeURIComponent(route.path) === link.href) {
       index = i;
       break;
     } else if (
@@ -150,7 +155,7 @@ onMounted(() => {
 });
 
 watch(
-  () => route.path,
+  () => [route.path, route.query],
   () => pickLink(),
 );
 </script>
diff --git a/apps/frontend/src/components/ui/charts/ChartDisplay.vue b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
index f60edd474..a6ca889c1 100644
--- a/apps/frontend/src/components/ui/charts/ChartDisplay.vue
+++ b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
@@ -14,7 +14,7 @@
           <CompactChart
             v-if="analytics.formattedData.value.downloads"
             ref="tinyDownloadChart"
-            :title="`Downloads since ${dayjs(startDate).format('MMM D, YYYY')}`"
+            :title="`Downloads`"
             color="var(--color-brand)"
             :value="formatNumber(analytics.formattedData.value.downloads.sum, false)"
             :data="analytics.formattedData.value.downloads.chart.sumData"
@@ -33,7 +33,7 @@
           <CompactChart
             v-if="analytics.formattedData.value.views"
             ref="tinyViewChart"
-            :title="`Page views since ${dayjs(startDate).format('MMM D, YYYY')}`"
+            :title="`Views`"
             color="var(--color-blue)"
             :value="formatNumber(analytics.formattedData.value.views.sum, false)"
             :data="analytics.formattedData.value.views.chart.sumData"
@@ -50,7 +50,7 @@
           <CompactChart
             v-if="analytics.formattedData.value.revenue"
             ref="tinyRevenueChart"
-            :title="`Revenue since ${dayjs(startDate).format('MMM D, YYYY')}`"
+            :title="`Revenue`"
             color="var(--color-purple)"
             :value="formatMoney(analytics.formattedData.value.revenue.sum, false)"
             :data="analytics.formattedData.value.revenue.chart.sumData"
@@ -71,6 +71,9 @@
               <span class="label__title">
                 {{ formatCategoryHeader(selectedChart) }}
               </span>
+              <span class="label__subtitle">
+                {{ formattedCategorySubtitle }}
+              </span>
             </h2>
             <div class="chart-controls__buttons">
               <Button v-tooltip="'Toggle project colors'" icon-only @click="onToggleColors">
@@ -83,11 +86,12 @@
                 <UpdatedIcon />
               </Button>
               <DropdownSelect
+                class="range-dropdown"
                 v-model="selectedRange"
-                :options="selectableRanges"
+                :options="ranges"
                 name="Time range"
                 :display-name="
-                  (o: (typeof selectableRanges)[number] | undefined) => o?.label || 'Custom'
+                  (o: RangeObject) => o?.getLabel([startDate, endDate]) ?? 'Loading...'
                 "
               />
             </div>
@@ -322,7 +326,7 @@ const props = withDefaults(
      * @deprecated Use `ranges` instead
      */
     resoloutions?: Record<string, number>;
-    ranges?: Record<number, [string, number] | string>;
+    ranges?: RangeObject[];
     personal?: boolean;
   }>(),
   {
@@ -335,12 +339,6 @@ const props = withDefaults(
 
 const projects = ref(props.projects || []);
 
-const selectableRanges = Object.entries(props.ranges).map(([duration, extra]) => ({
-  label: typeof extra === "string" ? extra : extra[0],
-  value: Number(duration),
-  res: typeof extra === "string" ? Number(duration) : extra[1],
-}));
-
 // const selectedChart = ref('downloads')
 const selectedChart = computed({
   get: () => {
@@ -413,33 +411,78 @@ const isUsingProjectColors = computed({
   },
 });
 
+const startDate = ref(dayjs().startOf("day"));
+const endDate = ref(dayjs().endOf("day"));
+const timeResolution = ref(30);
+
+onBeforeMount(() => {
+  // Load cached data and range from localStorage - cache.
+  if (import.meta.client) {
+    const rangeLabel = localStorage.getItem("analyticsSelectedRange");
+    if (rangeLabel) {
+      const range = props.ranges.find((r) => r.getLabel([dayjs(), dayjs()]) === rangeLabel)!;
+
+      if (range !== undefined) {
+        internalRange.value = range;
+        const ranges = range.getDates(dayjs());
+        timeResolution.value = range.timeResolution;
+        startDate.value = ranges.startDate;
+        endDate.value = ranges.endDate;
+      }
+    }
+  }
+});
+
+onMounted(() => {
+  if (internalRange.value === null) {
+    internalRange.value = props.ranges.find(
+      (r) => r.getLabel([dayjs(), dayjs()]) === "Previous 30 days",
+    )!;
+  }
+
+  const ranges = selectedRange.value.getDates(dayjs());
+  startDate.value = ranges.startDate;
+  endDate.value = ranges.endDate;
+  timeResolution.value = selectedRange.value.timeResolution;
+});
+
+const internalRange: Ref<RangeObject> = ref(null as unknown as RangeObject);
+
+const selectedRange = computed({
+  get: () => {
+    return internalRange.value;
+  },
+  set: (newRange) => {
+    const ranges = newRange.getDates(dayjs());
+    startDate.value = ranges.startDate;
+    endDate.value = ranges.endDate;
+    timeResolution.value = newRange.timeResolution;
+
+    internalRange.value = newRange;
+
+    if (import.meta.client) {
+      localStorage.setItem(
+        "analyticsSelectedRange",
+        internalRange.value?.getLabel([dayjs(), dayjs()]) ?? "Previous 30 days",
+      );
+    }
+  },
+});
+
 const analytics = useFetchAllAnalytics(
   resetCharts,
   projects,
   selectedDisplayProjects,
   props.personal,
+  startDate,
+  endDate,
+  timeResolution,
 );
 
-const { startDate, endDate, timeRange, timeResolution } = analytics;
-
-const selectedRange = computed({
-  get: () => {
-    return (
-      selectableRanges.find((option) => option.value === timeRange.value) || {
-        label: "Custom",
-        value: timeRange.value,
-      }
-    );
-  },
-  set: (newRange: { label: string; value: number; res?: number }) => {
-    timeRange.value = newRange.value;
-    startDate.value = Date.now() - timeRange.value * 60 * 1000;
-    endDate.value = Date.now();
-
-    if (newRange?.res) {
-      timeResolution.value = newRange.res;
-    }
-  },
+const formattedCategorySubtitle = computed(() => {
+  return (
+    selectedRange.value?.getLabel([dayjs(startDate.value), dayjs(endDate.value)]) ?? "Loading..."
+  );
 });
 
 const selectedDataSet = computed(() => {
@@ -484,6 +527,9 @@ const onToggleColors = () => {
 </script>
 
 <script lang="ts">
+/**
+ * @deprecated Use `ranges` instead
+ */
 const defaultResoloutions: Record<string, number> = {
   "5 minutes": 5,
   "30 minutes": 30,
@@ -493,17 +539,169 @@ const defaultResoloutions: Record<string, number> = {
   "A week": 10080,
 };
 
-const defaultRanges: Record<number, [string, number] | string> = {
-  30: ["Last 30 minutes", 1],
-  60: ["Last hour", 5],
-  720: ["Last 12 hours", 15],
-  1440: ["Last day", 60],
-  10080: ["Last week", 720],
-  43200: ["Last month", 1440],
-  129600: ["Last quarter", 10080],
-  525600: ["Last year", 20160],
-  1051200: ["Last two years", 40320],
+type DateRange = { startDate: dayjs.Dayjs; endDate: dayjs.Dayjs };
+
+type RangeObject = {
+  getLabel: (dateRange: [dayjs.Dayjs, dayjs.Dayjs]) => string;
+  getDates: (currentDate: dayjs.Dayjs) => DateRange;
+  // A time resolution in minutes.
+  timeResolution: number;
 };
+
+const defaultRanges: RangeObject[] = [
+  {
+    getLabel: () => "Previous 30 minutes",
+    getDates: (currentDate: dayjs.Dayjs) => ({
+      startDate: dayjs(currentDate).subtract(30, "minute"),
+      endDate: currentDate,
+    }),
+    timeResolution: 1,
+  },
+  {
+    getLabel: () => "Previous hour",
+    getDates: (currentDate: dayjs.Dayjs) => ({
+      startDate: dayjs(currentDate).subtract(1, "hour"),
+      endDate: currentDate,
+    }),
+    timeResolution: 5,
+  },
+  {
+    getLabel: () => "Previous 12 hours",
+    getDates: (currentDate: dayjs.Dayjs) => ({
+      startDate: dayjs(currentDate).subtract(12, "hour"),
+      endDate: currentDate,
+    }),
+    timeResolution: 12,
+  },
+  {
+    getLabel: () => "Previous 24 hours",
+    getDates: (currentDate: dayjs.Dayjs) => ({
+      startDate: dayjs(currentDate).subtract(1, "day"),
+      endDate: currentDate,
+    }),
+    timeResolution: 30,
+  },
+  {
+    getLabel: () => "Today",
+    getDates: (currentDate: dayjs.Dayjs) => ({
+      startDate: dayjs(currentDate).startOf("day"),
+      endDate: currentDate,
+    }),
+    timeResolution: 30,
+  },
+  {
+    getLabel: () => "Yesterday",
+    getDates: (currentDate: dayjs.Dayjs) => ({
+      startDate: dayjs(currentDate).subtract(1, "day").startOf("day"),
+      endDate: dayjs(currentDate).startOf("day").subtract(1, "second"),
+    }),
+    timeResolution: 30,
+  },
+  {
+    getLabel: () => "This week",
+    getDates: (currentDate: dayjs.Dayjs) => ({
+      startDate: dayjs(currentDate).startOf("week").add(1, "hour"),
+      endDate: currentDate,
+    }),
+    timeResolution: 360,
+  },
+  {
+    getLabel: () => "Last week",
+    getDates: (currentDate: dayjs.Dayjs) => ({
+      startDate: dayjs(currentDate).subtract(1, "week").startOf("week").add(1, "hour"),
+      endDate: dayjs(currentDate).startOf("week").subtract(1, "second"),
+    }),
+    timeResolution: 1440,
+  },
+  {
+    getLabel: () => "Previous 7 days",
+    getDates: (currentDate: dayjs.Dayjs) => ({
+      startDate: dayjs(currentDate).startOf("day").subtract(7, "day").add(1, "hour"),
+      endDate: currentDate.startOf("day"),
+    }),
+    timeResolution: 720,
+  },
+  {
+    getLabel: () => "This month",
+    getDates: (currentDate: dayjs.Dayjs) => ({
+      startDate: dayjs(currentDate).startOf("month").add(1, "hour"),
+      endDate: currentDate,
+    }),
+    timeResolution: 1440,
+  },
+  {
+    getLabel: () => "Last month",
+    getDates: (currentDate: dayjs.Dayjs) => ({
+      startDate: dayjs(currentDate).subtract(1, "month").startOf("month").add(1, "hour"),
+      endDate: dayjs(currentDate).startOf("month").subtract(1, "second"),
+    }),
+    timeResolution: 1440,
+  },
+  {
+    getLabel: () => "Previous 30 days",
+    getDates: (currentDate: dayjs.Dayjs) => ({
+      startDate: dayjs(currentDate).startOf("day").subtract(30, "day").add(1, "hour"),
+      endDate: currentDate.startOf("day"),
+    }),
+    timeResolution: 1440,
+  },
+  {
+    getLabel: () => "This quarter",
+    getDates: (currentDate: dayjs.Dayjs) => ({
+      startDate: dayjs(currentDate).startOf("quarter").add(1, "hour"),
+      endDate: currentDate,
+    }),
+    timeResolution: 1440,
+  },
+  {
+    getLabel: () => "Last quarter",
+    getDates: (currentDate: dayjs.Dayjs) => ({
+      startDate: dayjs(currentDate).subtract(1, "quarter").startOf("quarter").add(1, "hour"),
+      endDate: dayjs(currentDate).startOf("quarter").subtract(1, "second"),
+    }),
+    timeResolution: 1440,
+  },
+  {
+    getLabel: () => "This year",
+    getDates: (currentDate: dayjs.Dayjs) => ({
+      startDate: dayjs(currentDate).startOf("year"),
+      endDate: currentDate,
+    }),
+    timeResolution: 20160,
+  },
+  {
+    getLabel: () => "Last year",
+    getDates: (currentDate: dayjs.Dayjs) => ({
+      startDate: dayjs(currentDate).subtract(1, "year").startOf("year"),
+      endDate: dayjs(currentDate).startOf("year").subtract(1, "second"),
+    }),
+    timeResolution: 20160,
+  },
+  {
+    getLabel: () => "Previous year",
+    getDates: (currentDate: dayjs.Dayjs) => ({
+      startDate: dayjs(currentDate).subtract(1, "year"),
+      endDate: dayjs(currentDate),
+    }),
+    timeResolution: 40320,
+  },
+  {
+    getLabel: () => "Previous two years",
+    getDates: (currentDate: dayjs.Dayjs) => ({
+      startDate: dayjs(currentDate).subtract(2, "year"),
+      endDate: currentDate,
+    }),
+    timeResolution: 40320,
+  },
+  {
+    getLabel: () => "All Time",
+    getDates: (currentDate: dayjs.Dayjs) => ({
+      startDate: dayjs(0),
+      endDate: currentDate,
+    }),
+    timeResolution: 40320,
+  },
+];
 </script>
 
 <style scoped lang="scss">
@@ -524,6 +722,20 @@ const defaultRanges: Record<number, [string, number] | string> = {
       min-height: auto;
     }
   }
+
+  h2 {
+    display: flex;
+    flex-direction: column;
+
+    .label__subtitle {
+      font-size: var(--font-size-sm);
+      color: var(--color-text-secondary);
+    }
+  }
+}
+
+.range-dropdown {
+  font-size: var(--font-size-sm);
 }
 
 .chart-area {
@@ -688,6 +900,7 @@ const defaultRanges: Record<number, [string, number] | string> = {
     flex-direction: column;
     gap: var(--gap-xs);
   }
+
   .percentage-bar {
     grid-area: bar;
     width: 100%;
@@ -696,6 +909,7 @@ const defaultRanges: Record<number, [string, number] | string> = {
     border: 1px solid var(--color-button-bg);
     border-radius: var(--radius-sm);
     overflow: hidden;
+
     span {
       display: block;
       height: 100%;
diff --git a/apps/frontend/src/components/ui/report/ReportInfo.vue b/apps/frontend/src/components/ui/report/ReportInfo.vue
index b9ec7079f..313b1c12c 100644
--- a/apps/frontend/src/components/ui/report/ReportInfo.vue
+++ b/apps/frontend/src/components/ui/report/ReportInfo.vue
@@ -19,13 +19,21 @@
       </nuxt-link>
     </div>
     <div v-else-if="report.item_type === 'user'" class="item-info">
-      <nuxt-link :to="`/user/${report.user.username}`" class="iconified-stacked-link">
+      <nuxt-link
+        v-if="report.user"
+        :to="`/user/${report.user.username}`"
+        class="iconified-stacked-link"
+      >
         <Avatar :src="report.user.avatar_url" circle size="xs" no-shadow :raised="raised" />
         <div class="stacked">
           <span class="title">{{ report.user.username }}</span>
           <span>User</span>
         </div>
       </nuxt-link>
+      <div v-else class="item-info">
+        <div class="backed-svg" :class="{ raised: raised }"><UnknownIcon /></div>
+        <span>Reported user not found: <CopyCode :text="report.item_id" /> </span>
+      </div>
     </div>
     <div v-else-if="report.item_type === 'version'" class="item-info">
       <nuxt-link
@@ -50,7 +58,7 @@
     </div>
     <div v-else class="item-info">
       <div class="backed-svg" :class="{ raised: raised }"><UnknownIcon /></div>
-      <span>Unknown report type</span>
+      <span>Unknown report type: {{ report.item_type }}</span>
     </div>
     <div class="report-type">
       <Badge v-if="report.closed" type="closed" />
diff --git a/apps/frontend/src/components/ui/report/ReportsList.vue b/apps/frontend/src/components/ui/report/ReportsList.vue
index 06eed819b..f2fe1b5d3 100644
--- a/apps/frontend/src/components/ui/report/ReportsList.vue
+++ b/apps/frontend/src/components/ui/report/ReportsList.vue
@@ -1,5 +1,4 @@
 <template>
-  <Chips v-if="false" v-model="viewMode" :items="['open', 'archived']" />
   <ReportInfo
     v-for="report in reports.filter(
       (x) =>
@@ -17,7 +16,6 @@
   <p v-if="reports.length === 0">You don't have any active reports.</p>
 </template>
 <script setup>
-import Chips from "~/components/ui/Chips.vue";
 import ReportInfo from "~/components/ui/report/ReportInfo.vue";
 import { addReportMessage } from "~/helpers/threads.js";
 
diff --git a/apps/frontend/src/components/ui/servers/BackupSettingsModal.vue b/apps/frontend/src/components/ui/servers/BackupSettingsModal.vue
index 2a6c6267a..a92c8b618 100644
--- a/apps/frontend/src/components/ui/servers/BackupSettingsModal.vue
+++ b/apps/frontend/src/components/ui/servers/BackupSettingsModal.vue
@@ -106,6 +106,7 @@ const fetchSettings = async () => {
     initialSettings.value = settings as { interval: number; enabled: boolean };
     autoBackupEnabled.value = settings?.enabled ?? false;
     autoBackupInterval.value = settings?.interval || 6;
+    return true;
   } catch (error) {
     console.error("Error fetching backup settings:", error);
     addNotification({
@@ -114,6 +115,7 @@ const fetchSettings = async () => {
       text: "Failed to load backup settings",
       type: "error",
     });
+    return false;
   } finally {
     isLoadingSettings.value = false;
   }
@@ -155,8 +157,10 @@ const saveSettings = async () => {
 
 defineExpose({
   show: async () => {
-    await fetchSettings();
-    modal.value?.show();
+    const success = await fetchSettings();
+    if (success) {
+      modal.value?.show();
+    }
   },
 });
 </script>
diff --git a/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue b/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
new file mode 100644
index 000000000..5ea0a9a0f
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
@@ -0,0 +1,530 @@
+<template>
+  <NewModal ref="modModal" :header="`Editing ${type.toLocaleLowerCase()} version`">
+    <template #title>
+      <div class="flex min-w-full items-center gap-2 md:w-[calc(420px-5.5rem)]">
+        <UiAvatar :src="modDetails?.icon_url" size="48px" :alt="`${modDetails?.name} Icon`" />
+        <span class="truncate text-xl font-extrabold text-contrast">{{ modDetails?.name }}</span>
+      </div>
+    </template>
+    <div class="flex flex-col gap-2 md:w-[420px]">
+      <div class="flex flex-col gap-2">
+        <template v-if="versionsLoading">
+          <div class="flex items-center gap-2">
+            <div class="w-fit animate-pulse select-none rounded-md bg-button-bg font-semibold">
+              <span class="opacity-0" aria-hidden="true">{{ type }} version</span>
+            </div>
+            <div class="min-h-[22px] min-w-[140px] animate-pulse rounded-full bg-button-bg" />
+          </div>
+          <div class="min-h-9 w-full animate-pulse rounded-xl bg-button-bg" />
+          <div class="w-fit animate-pulse select-none rounded-md bg-button-bg">
+            <span class="ml-6 opacity-0" aria-hidden="true">
+              Show any beta and alpha releases
+            </span>
+          </div>
+        </template>
+
+        <template v-else>
+          <div class="flex justify-between">
+            <div class="flex items-center gap-2">
+              <div class="font-semibold text-contrast">{{ type }} version</div>
+              <NuxtLink
+                class="flex cursor-pointer items-center gap-1 bg-transparent p-0"
+                @click="
+                  versionFilter &&
+                    (unlockFilterAccordion.isOpen
+                      ? unlockFilterAccordion.close()
+                      : unlockFilterAccordion.open())
+                "
+              >
+                <TagItem
+                  v-if="formattedVersions.game_versions.length > 0"
+                  v-tooltip="formattedVersions.game_versions.join(', ')"
+                  :style="`--_color: var(--color-green)`"
+                >
+                  {{ formattedVersions.game_versions[0] }}
+                </TagItem>
+                <TagItem
+                  v-if="formattedVersions.loaders.length > 0"
+                  v-tooltip="formattedVersions.loaders.join(', ')"
+                  :style="`--_color: var(--color-platform-${formattedVersions.loaders[0].toLowerCase()})`"
+                >
+                  {{ formattedVersions.loaders[0] }}
+                </TagItem>
+                <DropdownIcon
+                  :class="[
+                    'transition-all duration-200 ease-in-out',
+                    { 'rotate-180': unlockFilterAccordion.isOpen },
+                    { 'opacity-0': !versionFilter },
+                  ]"
+                />
+              </NuxtLink>
+            </div>
+          </div>
+          <UiServersTeleportDropdownMenu
+            v-model="selectedVersion"
+            name="Project"
+            :options="filteredVersions"
+            placeholder="No valid versions found"
+            class="!min-w-full"
+            :disabled="filteredVersions.length === 0"
+            :display-name="
+              (version) => (typeof version === 'object' ? version?.version_number : version)
+            "
+          />
+          <Checkbox v-model="showBetaAlphaReleases"> Show any beta and alpha releases </Checkbox>
+        </template>
+      </div>
+
+      <Accordion
+        ref="unlockFilterAccordion"
+        :open-by-default="!versionFilter"
+        :class="[
+          versionFilter ? '' : '!border-solid border-orange bg-bg-orange !text-contrast',
+          'flex flex-col gap-2 rounded-2xl border-2 border-dashed border-divider p-3 transition-all',
+        ]"
+      >
+        <p class="m-0 items-center font-bold">
+          <span>
+            {{
+              noCompatibleVersions
+                ? `No compatible versions of this ${type.toLowerCase()} were found`
+                : versionFilter
+                  ? "Game version and platform is provided by the server"
+                  : "Incompatible game version and platform versions are unlocked"
+            }}
+          </span>
+        </p>
+        <p class="m-0 text-sm">
+          {{
+            noCompatibleVersions
+              ? `No versions compatible with your server were found. You can still select any available version.`
+              : versionFilter
+                ? `Unlocking this filter may allow you to change this ${type.toLowerCase()}
+            to an incompatible version.`
+                : "You might see versions listed that aren't compatible with your server configuration."
+          }}
+        </p>
+        <ContentVersionFilter
+          v-if="currentVersions"
+          ref="filtersRef"
+          :versions="currentVersions"
+          :game-versions="tags.gameVersions"
+          :select-classes="'w-full'"
+          :type="type"
+          :disabled="versionFilter"
+          :platform-tags="tags.loaders"
+          :listed-game-versions="gameVersions"
+          :listed-platforms="platforms"
+          @update:query="updateFiltersFromUi($event)"
+          @vue:mounted="updateFiltersToUi"
+        >
+          <template #platform>
+            <LoaderIcon
+              v-if="filtersRef?.selectedPlatforms.length === 0"
+              :loader="'Vanilla'"
+              class="size-5 flex-none"
+            />
+            <svg
+              v-else
+              class="size-5 flex-none"
+              v-html="tags.loaders.find((x) => x.name === filtersRef?.selectedPlatforms[0])?.icon"
+            ></svg>
+
+            <div class="w-full truncate text-left">
+              {{
+                filtersRef?.selectedPlatforms.length === 0
+                  ? "All platforms"
+                  : filtersRef?.selectedPlatforms.map((x) => formatCategory(x)).join(", ")
+              }}
+            </div>
+          </template>
+          <template #game-versions>
+            <GameIcon class="size-5 flex-none" />
+            <div class="w-full truncate text-left">
+              {{
+                filtersRef?.selectedGameVersions.length === 0
+                  ? "All game versions"
+                  : filtersRef?.selectedGameVersions.join(", ")
+              }}
+            </div>
+          </template>
+        </ContentVersionFilter>
+
+        <ButtonStyled v-if="!noCompatibleVersions" color-fill="text">
+          <button
+            class="w-full"
+            :disabled="gameVersions.length < 2 && platforms.length < 2"
+            @click="
+              versionFilter = !versionFilter;
+              setInitialFilters();
+              updateFiltersToUi();
+            "
+          >
+            <LockOpenIcon />
+            {{
+              gameVersions.length < 2 && platforms.length < 2
+                ? "No other platforms or versions available"
+                : versionFilter
+                  ? "Unlock"
+                  : "Return to compatibility"
+            }}
+          </button>
+        </ButtonStyled>
+      </Accordion>
+
+      <Admonition
+        v-if="versionsError"
+        type="critical"
+        header="Failed to load versions"
+        class="mb-2"
+      >
+        <div>
+          <span>
+            Something went wrong trying to load versions for this {{ type.toLocaleLowerCase() }}.
+            Please try again later or contact support if the issue persists.
+          </span>
+          <LazyUiCopyCode class="!mt-2 !break-all" :text="versionsError" />
+        </div>
+      </Admonition>
+
+      <Admonition
+        v-else-if="props.modPack"
+        type="warning"
+        header="Changing version may cause issues"
+        class="mb-2"
+      >
+        Your server was created using a modpack. It's recommended to use the modpack's version of
+        the mod.
+        <NuxtLink
+          class="mt-2 flex items-center gap-1"
+          :to="`/servers/manage/${props.serverId}/options/loader`"
+          target="_blank"
+        >
+          <ExternalIcon class="size-5 flex-none"></ExternalIcon> Modify modpack version
+        </NuxtLink>
+      </Admonition>
+
+      <div class="flex flex-row items-center gap-4">
+        <ButtonStyled color="brand">
+          <button
+            :disabled="versionsLoading || selectedVersion.id === modDetails?.version_id"
+            @click="emitChangeModVersion"
+          >
+            <CheckIcon />
+            Install
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button @click="modModal.hide()">
+            <XIcon />
+            Cancel
+          </button>
+        </ButtonStyled>
+      </div>
+    </div>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import {
+  DropdownIcon,
+  XIcon,
+  CheckIcon,
+  LockOpenIcon,
+  GameIcon,
+  ExternalIcon,
+} from "@modrinth/assets";
+import { Admonition, ButtonStyled, NewModal } from "@modrinth/ui";
+import TagItem from "@modrinth/ui/src/components/base/TagItem.vue";
+import { ref, computed } from "vue";
+import { formatCategory, formatVersionsForDisplay, type Version } from "@modrinth/utils";
+import Accordion from "~/components/ui/Accordion.vue";
+import Checkbox from "~/components/ui/Checkbox.vue";
+import ContentVersionFilter, {
+  type ListedGameVersion,
+  type ListedPlatform,
+} from "~/components/ui/servers/ContentVersionFilter.vue";
+import LoaderIcon from "~/components/ui/servers/icons/LoaderIcon.vue";
+
+const props = defineProps<{
+  type: "Mod" | "Plugin";
+  loader: string;
+  gameVersion: string;
+  modPack: boolean;
+  serverId: string;
+}>();
+
+interface ContentItem extends Mod {
+  changing?: boolean;
+}
+
+interface EditVersion extends Version {
+  installed: boolean;
+  upgrade?: boolean;
+}
+
+const modModal = ref();
+const modDetails = ref<ContentItem>();
+const currentVersions = ref<EditVersion[] | null>(null);
+const versionsLoading = ref(false);
+const versionsError = ref("");
+const showBetaAlphaReleases = ref(false);
+const unlockFilterAccordion = ref();
+const versionFilter = ref(true);
+const tags = useTags();
+const noCompatibleVersions = ref(false);
+
+const { pluginLoaders, modLoaders } = tags.value.loaders.reduce(
+  (acc, tag) => {
+    if (tag.supported_project_types.includes("plugin")) {
+      acc.pluginLoaders.push(tag.name);
+    }
+    if (tag.supported_project_types.includes("mod")) {
+      acc.modLoaders.push(tag.name);
+    }
+    return acc;
+  },
+  { pluginLoaders: [] as string[], modLoaders: [] as string[] },
+);
+
+const selectedVersion = ref();
+const filtersRef: Ref<InstanceType<typeof ContentVersionFilter> | null> = ref(null);
+interface SelectedContentFilters {
+  selectedGameVersions: string[];
+  selectedPlatforms: string[];
+}
+const selectedFilters = ref<SelectedContentFilters>({
+  selectedGameVersions: [],
+  selectedPlatforms: [],
+});
+
+const backwardCompatPlatformMap = {
+  purpur: ["purpur", "paper", "spigot", "bukkit"],
+  paper: ["paper", "spigot", "bukkit"],
+  spigot: ["spigot", "bukkit"],
+};
+
+const platforms = ref<ListedPlatform[]>([]);
+const gameVersions = ref<ListedGameVersion[]>([]);
+const initPlatform = ref<string>("");
+
+const setInitialFilters = () => {
+  selectedFilters.value = {
+    selectedGameVersions: [
+      gameVersions.value.find((version) => version.name === props.gameVersion)?.name ??
+        gameVersions.value.find((version) => version.release)?.name ??
+        gameVersions.value[0]?.name,
+    ],
+    selectedPlatforms: [initPlatform.value],
+  };
+};
+
+const updateFiltersToUi = () => {
+  if (!filtersRef.value) return;
+  filtersRef.value.selectedGameVersions = selectedFilters.value.selectedGameVersions;
+  filtersRef.value.selectedPlatforms = selectedFilters.value.selectedPlatforms;
+
+  selectedVersion.value = filteredVersions.value[0];
+};
+
+const updateFiltersFromUi = (event: { g: string[]; l: string[] }) => {
+  selectedFilters.value = {
+    selectedGameVersions: event.g,
+    selectedPlatforms: event.l,
+  };
+};
+
+const filteredVersions = computed(() => {
+  if (!currentVersions.value) return [];
+
+  const versionsWithoutReleaseFilter = currentVersions.value.filter((version: EditVersion) => {
+    if (version.installed) return true;
+    return (
+      filtersRef.value?.selectedPlatforms.every((platform) =>
+        (
+          backwardCompatPlatformMap[platform as keyof typeof backwardCompatPlatformMap] || [
+            platform,
+          ]
+        ).some((loader) => version.loaders.includes(loader)),
+      ) &&
+      filtersRef.value?.selectedGameVersions.every((gameVersion) =>
+        version.game_versions.includes(gameVersion),
+      )
+    );
+  });
+
+  const versionTypes = new Set(
+    versionsWithoutReleaseFilter.map((v: EditVersion) => v.version_type),
+  );
+  const releaseVersions = versionTypes.has("release");
+  const betaVersions = versionTypes.has("beta");
+  const alphaVersions = versionTypes.has("alpha");
+
+  const versions = versionsWithoutReleaseFilter.filter((version: EditVersion) => {
+    if (showBetaAlphaReleases.value || version.installed) return true;
+    return releaseVersions
+      ? version.version_type === "release"
+      : betaVersions
+        ? version.version_type === "beta"
+        : alphaVersions
+          ? version.version_type === "alpha"
+          : false;
+  });
+
+  return versions.map((version: EditVersion) => {
+    let suffix = "";
+
+    if (version.version_type === "alpha" && releaseVersions && betaVersions) {
+      suffix += " (alpha)";
+    } else if (version.version_type === "beta" && releaseVersions) {
+      suffix += " (beta)";
+    }
+
+    return {
+      ...version,
+      version_number: version.version_number + suffix,
+    };
+  });
+});
+
+const formattedVersions = computed(() => {
+  return {
+    game_versions: formatVersionsForDisplay(
+      selectedVersion.value?.game_versions || [],
+      tags.value.gameVersions,
+    ),
+    loaders: (selectedVersion.value?.loaders || [])
+      .sort((firstLoader: string, secondLoader: string) => {
+        const loaderList = backwardCompatPlatformMap[
+          props.loader as keyof typeof backwardCompatPlatformMap
+        ] || [props.loader];
+
+        const firstLoaderPosition = loaderList.indexOf(firstLoader.toLowerCase());
+        const secondLoaderPosition = loaderList.indexOf(secondLoader.toLowerCase());
+
+        if (firstLoaderPosition === -1 && secondLoaderPosition === -1) return 0;
+        if (firstLoaderPosition === -1) return 1;
+        if (secondLoaderPosition === -1) return -1;
+        return firstLoaderPosition - secondLoaderPosition;
+      })
+      .map((loader: string) => formatCategory(loader)),
+  };
+});
+
+async function show(mod: ContentItem) {
+  versionFilter.value = true;
+  modModal.value.show();
+  versionsLoading.value = true;
+  modDetails.value = mod;
+  versionsError.value = "";
+  currentVersions.value = null;
+
+  try {
+    const result = await useBaseFetch(`project/${mod.project_id}/version`, {}, false);
+    if (
+      Array.isArray(result) &&
+      result.every(
+        (item) =>
+          "id" in item &&
+          "version_number" in item &&
+          "version_type" in item &&
+          "loaders" in item &&
+          "game_versions" in item,
+      )
+    ) {
+      currentVersions.value = result as EditVersion[];
+    } else {
+      throw new Error("Invalid version data received.");
+    }
+
+    // find the installed version and move it to the top of the list
+    const currentModIndex = currentVersions.value.findIndex(
+      (item: { id: string }) => item.id === mod.version_id,
+    );
+    if (currentModIndex === -1) {
+      currentVersions.value[currentModIndex] = {
+        ...currentVersions.value[currentModIndex],
+        installed: true,
+        version_number: `${mod.version_number} (current) (external)`,
+      };
+    } else {
+      currentVersions.value[currentModIndex].version_number = `${mod.version_number} (current)`;
+      currentVersions.value[currentModIndex].installed = true;
+    }
+
+    // initially filter the platform and game versions for the server config
+    const platformSet = new Set<string>();
+    const gameVersionSet = new Set<string>();
+    for (const version of currentVersions.value) {
+      for (const loader of version.loaders) {
+        platformSet.add(loader);
+      }
+      for (const gameVersion of version.game_versions) {
+        gameVersionSet.add(gameVersion);
+      }
+    }
+    if (gameVersionSet.size > 0) {
+      const filteredGameVersions = tags.value.gameVersions.filter((x) =>
+        gameVersionSet.has(x.version),
+      );
+
+      gameVersions.value = filteredGameVersions.map((x) => ({
+        name: x.version,
+        release: x.version_type === "release",
+      }));
+    }
+    if (platformSet.size > 0) {
+      const tempPlatforms = Array.from(platformSet).map((platform) => ({
+        name: platform,
+        isType:
+          props.type === "Plugin"
+            ? pluginLoaders.includes(platform)
+            : props.type === "Mod"
+              ? modLoaders.includes(platform)
+              : false,
+      }));
+      platforms.value = tempPlatforms;
+    }
+
+    // set default platform
+    const defaultPlatform = Array.from(platformSet)[0];
+    initPlatform.value = platformSet.has(props.loader)
+      ? props.loader
+      : props.loader in backwardCompatPlatformMap
+        ? backwardCompatPlatformMap[props.loader as keyof typeof backwardCompatPlatformMap].find(
+            (p) => platformSet.has(p),
+          ) || defaultPlatform
+        : defaultPlatform;
+
+    // check if there's nothing compatible with the server config
+    noCompatibleVersions.value =
+      !platforms.value.some((p) => p.isType) ||
+      !gameVersions.value.some((v) => v.name === props.gameVersion);
+
+    if (noCompatibleVersions.value) {
+      unlockFilterAccordion.value.open();
+      versionFilter.value = false;
+    }
+
+    setInitialFilters();
+    versionsLoading.value = false;
+  } catch (error) {
+    console.error("Error loading versions:", error);
+    versionsError.value = error instanceof Error ? error.message : "Unknown";
+  }
+}
+
+const emit = defineEmits<{
+  changeVersion: [string];
+}>();
+
+function emitChangeModVersion() {
+  if (!selectedVersion.value) return;
+  emit("changeVersion", selectedVersion.value.id.toString());
+}
+
+defineExpose({
+  show,
+  hide: () => modModal.value.hide(),
+});
+</script>
diff --git a/apps/frontend/src/components/ui/servers/ContentVersionFilter.vue b/apps/frontend/src/components/ui/servers/ContentVersionFilter.vue
new file mode 100644
index 000000000..9ce8bf851
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/ContentVersionFilter.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="experimental-styles-within flex w-full flex-col items-center gap-2">
+    <ManySelect
+      v-model="selectedPlatforms"
+      :tooltip="
+        filterOptions.platform.length < 2 && !disabled ? 'No other platforms available' : undefined
+      "
+      :options="filterOptions.platform"
+      :dropdown-id="`${baseId}-platform`"
+      search
+      show-always
+      class="w-full"
+      :disabled="disabled || filterOptions.platform.length < 2"
+      :dropdown-class="'w-full'"
+      @change="updateFilters"
+    >
+      <slot name="platform">
+        <FilterIcon class="h-5 w-5 text-secondary" />
+        Platform
+      </slot>
+      <template #option="{ option }">
+        {{ formatCategory(option) }}
+      </template>
+      <template v-if="hasAnyUnsupportedPlatforms" #footer>
+        <Checkbox
+          v-model="showSupportedPlatformsOnly"
+          class="mx-1"
+          :label="`Show ${type?.toLowerCase()} platforms only`"
+        />
+      </template>
+    </ManySelect>
+    <ManySelect
+      v-model="selectedGameVersions"
+      :tooltip="
+        filterOptions.gameVersion.length < 2 && !disabled
+          ? 'No other game versions available'
+          : undefined
+      "
+      :options="filterOptions.gameVersion"
+      :dropdown-id="`${baseId}-game-version`"
+      search
+      show-always
+      class="w-full"
+      :disabled="disabled || filterOptions.gameVersion.length < 2"
+      :dropdown-class="'w-full'"
+      @change="updateFilters"
+    >
+      <slot name="game-versions">
+        <FilterIcon class="h-5 w-5 text-secondary" />
+        Game versions
+      </slot>
+      <template v-if="hasAnySnapshots" #footer>
+        <Checkbox v-model="showSnapshots" class="mx-1" :label="`Show all versions`" />
+      </template>
+    </ManySelect>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FilterIcon } from "@modrinth/assets";
+import { type Version, formatCategory, type GameVersionTag } from "@modrinth/utils";
+import { ref, computed } from "vue";
+import { useRoute } from "vue-router";
+import ManySelect from "@modrinth/ui/src/components/base/ManySelect.vue";
+import Checkbox from "@modrinth/ui/src/components/base/Checkbox.vue";
+
+export type ListedGameVersion = {
+  name: string;
+  release: boolean;
+};
+
+export type ListedPlatform = {
+  name: string;
+  isType: boolean;
+};
+
+const props = defineProps<{
+  versions: Version[];
+  gameVersions: GameVersionTag[];
+  listedGameVersions: ListedGameVersion[];
+  listedPlatforms: ListedPlatform[];
+  baseId?: string;
+  type: "Mod" | "Plugin";
+  platformTags: {
+    name: string;
+    supported_project_types: string[];
+  }[];
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits(["update:query"]);
+const route = useRoute();
+
+const showSnapshots = ref(false);
+const hasAnySnapshots = computed(() => {
+  return props.versions.some((x) =>
+    props.gameVersions.some(
+      (y) => y.version_type !== "release" && x.game_versions.includes(y.version),
+    ),
+  );
+});
+
+const hasOnlySnapshots = computed(() => {
+  return props.versions.every((version) => {
+    return version.game_versions.every((gv) => {
+      const matched = props.gameVersions.find((tag) => tag.version === gv);
+      return matched && matched.version_type !== "release";
+    });
+  });
+});
+
+const hasAnyUnsupportedPlatforms = computed(() => {
+  return props.listedPlatforms.some((x) => !x.isType);
+});
+
+const hasOnlyUnsupportedPlatforms = computed(() => {
+  return props.listedPlatforms.every((x) => !x.isType);
+});
+
+const showSupportedPlatformsOnly = ref(true);
+
+const filterOptions = computed(() => {
+  const filters: Record<"gameVersion" | "platform", string[]> = {
+    gameVersion: [],
+    platform: [],
+  };
+
+  filters.gameVersion = props.listedGameVersions
+    .filter((x) => {
+      return showSnapshots.value || hasOnlySnapshots.value ? true : x.release;
+    })
+    .map((x) => x.name);
+
+  filters.platform = props.listedPlatforms
+    .filter((x) => {
+      return !showSupportedPlatformsOnly.value || hasOnlyUnsupportedPlatforms.value
+        ? true
+        : x.isType;
+    })
+    .map((x) => x.name);
+
+  return filters;
+});
+
+const selectedGameVersions = ref<string[]>([]);
+const selectedPlatforms = ref<string[]>([]);
+
+selectedGameVersions.value = route.query.g ? getArrayOrString(route.query.g) : [];
+selectedPlatforms.value = route.query.l ? getArrayOrString(route.query.l) : [];
+
+function updateFilters() {
+  emit("update:query", {
+    g: selectedGameVersions.value,
+    l: selectedPlatforms.value,
+  });
+}
+
+defineExpose({
+  selectedGameVersions,
+  selectedPlatforms,
+});
+
+function getArrayOrString(x: string | (string | null)[]): string[] {
+  if (typeof x === "string") {
+    return [x];
+  } else {
+    return x.filter((item): item is string => item !== null);
+  }
+}
+</script>
+
+<style></style>
diff --git a/apps/frontend/src/components/ui/servers/FileItem.vue b/apps/frontend/src/components/ui/servers/FileItem.vue
index 06db4103e..6d269d8f7 100644
--- a/apps/frontend/src/components/ui/servers/FileItem.vue
+++ b/apps/frontend/src/components/ui/servers/FileItem.vue
@@ -75,7 +75,7 @@ import {
   RightArrowIcon,
 } from "@modrinth/assets";
 import { computed, shallowRef, ref } from "vue";
-import { renderToString } from "@vue/server-renderer";
+import { renderToString } from "vue/server-renderer";
 import { useRouter, useRoute } from "vue-router";
 import {
   UiServersIconsCogFolderIcon,
diff --git a/apps/frontend/src/components/ui/servers/FilesBrowseNavbar.vue b/apps/frontend/src/components/ui/servers/FilesBrowseNavbar.vue
index 5cf62b213..c2e5e70a4 100644
--- a/apps/frontend/src/components/ui/servers/FilesBrowseNavbar.vue
+++ b/apps/frontend/src/components/ui/servers/FilesBrowseNavbar.vue
@@ -2,7 +2,7 @@
   <div ref="pyroFilesSentinel" class="sentinel" data-pyro-files-sentinel />
   <header
     :class="[
-      'duration-20 h-26 top-0 flex select-none flex-col justify-between gap-2 bg-table-alternateRow p-3 transition-[border-radius] sm:h-12 sm:flex-row',
+      'duration-20 top-0 flex select-none flex-col justify-between gap-2 bg-table-alternateRow p-3 transition-[border-radius] sm:h-12 sm:flex-row',
       !isStuck ? 'rounded-t-2xl' : 'sticky top-0 z-20',
     ]"
     data-pyro-files-state="browsing"
@@ -76,25 +76,23 @@
           <UiServersTeleportOverflowMenu
             position="bottom"
             direction="left"
-            aria-label="Sort files"
+            aria-label="Filter view"
             :options="[
-              { id: 'normal', action: () => $emit('sort', 'default') },
-              { id: 'modified', action: () => $emit('sort', 'modified') },
-              { id: 'created', action: () => $emit('sort', 'created') },
-              { id: 'filesOnly', action: () => $emit('sort', 'filesOnly') },
-              { id: 'foldersOnly', action: () => $emit('sort', 'foldersOnly') },
+              { id: 'all', action: () => $emit('filter', 'all') },
+              { id: 'filesOnly', action: () => $emit('filter', 'filesOnly') },
+              { id: 'foldersOnly', action: () => $emit('filter', 'foldersOnly') },
             ]"
           >
-            <span class="hidden whitespace-pre text-sm font-medium sm:block">
-              {{ sortMethodLabel }}
-            </span>
-            <SortAscendingIcon aria-hidden="true" />
+            <div class="flex items-center gap-1">
+              <FilterIcon aria-hidden="true" class="h-5 w-5" />
+              <span class="hidden text-sm font-medium sm:block">
+                {{ filterLabel }}
+              </span>
+            </div>
             <DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
-            <template #normal> Alphabetical </template>
-            <template #modified> Date modified </template>
-            <template #created> Date created </template>
-            <template #filesOnly> Files only </template>
-            <template #foldersOnly> Folders only </template>
+            <template #all>Show all</template>
+            <template #filesOnly>Files only</template>
+            <template #foldersOnly>Folders only</template>
           </UiServersTeleportOverflowMenu>
         </ButtonStyled>
         <div class="mx-1 w-full text-sm sm:w-48">
@@ -148,9 +146,9 @@ import {
   DropdownIcon,
   FolderOpenIcon,
   SearchIcon,
-  SortAscendingIcon,
   HomeIcon,
   ChevronRightIcon,
+  FilterIcon,
 } from "@modrinth/assets";
 import { ButtonStyled } from "@modrinth/ui";
 import { ref, computed } from "vue";
@@ -159,15 +157,15 @@ import { useIntersectionObserver } from "@vueuse/core";
 const props = defineProps<{
   breadcrumbSegments: string[];
   searchQuery: string;
-  sortMethod: string;
+  currentFilter: string;
 }>();
 
 defineEmits<{
   (e: "navigate", index: number): void;
-  (e: "sort", method: string): void;
   (e: "create", type: "file" | "directory"): void;
   (e: "upload"): void;
   (e: "update:searchQuery", value: string): void;
+  (e: "filter", type: string): void;
 }>();
 
 const pyroFilesSentinel = ref<HTMLElement | null>(null);
@@ -181,18 +179,14 @@ useIntersectionObserver(
   { threshold: [0, 1] },
 );
 
-const sortMethodLabel = computed(() => {
-  switch (props.sortMethod) {
-    case "modified":
-      return "Date modified";
-    case "created":
-      return "Date created";
+const filterLabel = computed(() => {
+  switch (props.currentFilter) {
     case "filesOnly":
       return "Files only";
     case "foldersOnly":
       return "Folders only";
     default:
-      return "Alphabetical";
+      return "Show all";
   }
 });
 </script>
diff --git a/apps/frontend/src/components/ui/servers/FilesImageViewer.vue b/apps/frontend/src/components/ui/servers/FilesImageViewer.vue
index c494af585..9eb752d57 100644
--- a/apps/frontend/src/components/ui/servers/FilesImageViewer.vue
+++ b/apps/frontend/src/components/ui/servers/FilesImageViewer.vue
@@ -9,7 +9,7 @@
       @mouseleave="stopPan"
       @wheel.prevent="handleWheel"
     >
-      <UiServersPyroLoading v-if="state.isLoading" />
+      <div v-if="state.isLoading" />
       <div
         v-if="state.hasError"
         class="flex h-full w-full flex-col items-center justify-center gap-8"
diff --git a/apps/frontend/src/components/ui/servers/FilesLabelBar.vue b/apps/frontend/src/components/ui/servers/FilesLabelBar.vue
index 866f862c2..efbfcc00d 100644
--- a/apps/frontend/src/components/ui/servers/FilesLabelBar.vue
+++ b/apps/frontend/src/components/ui/servers/FilesLabelBar.vue
@@ -1,14 +1,65 @@
 <template>
   <div
     aria-hidden="true"
-    class="flex w-full select-none flex-row items-center border-0 border-b border-solid border-bg-raised px-3 py-2 text-xs font-bold uppercase"
+    class="sticky top-12 z-20 flex h-8 w-full select-none flex-row items-center border-0 border-b border-solid border-bg-raised bg-bg px-3 text-xs font-bold uppercase"
   >
     <div class="min-w-[48px]"></div>
-    <span class="flex w-full">Name</span>
+    <button
+      class="flex h-full w-full appearance-none items-center gap-1 bg-transparent text-left hover:text-brand"
+      @click="$emit('sort', 'name')"
+    >
+      <span>Name</span>
+      <ChevronUpIcon v-if="sortField === 'name' && !sortDesc" class="h-3 w-3" aria-hidden="true" />
+      <ChevronDownIcon v-if="sortField === 'name' && sortDesc" class="h-3 w-3" aria-hidden="true" />
+    </button>
     <div class="flex shrink-0 gap-4 text-right md:gap-12">
-      <span class="hidden min-w-[160px] md:block">Created</span>
-      <span class="mr-4 min-w-[160px]">Modified</span>
-      <div class="min-w-[36px]"></div>
+      <button
+        class="hidden min-w-[160px] appearance-none items-center justify-start gap-1 bg-transparent hover:text-brand md:flex"
+        @click="$emit('sort', 'created')"
+      >
+        <span>Created</span>
+        <ChevronUpIcon
+          v-if="sortField === 'created' && !sortDesc"
+          class="h-3 w-3"
+          aria-hidden="true"
+        />
+        <ChevronDownIcon
+          v-if="sortField === 'created' && sortDesc"
+          class="h-3 w-3"
+          aria-hidden="true"
+        />
+      </button>
+      <button
+        class="mr-4 hidden min-w-[160px] appearance-none items-center justify-start gap-1 bg-transparent hover:text-brand md:flex"
+        @click="$emit('sort', 'modified')"
+      >
+        <span>Modified</span>
+        <ChevronUpIcon
+          v-if="sortField === 'modified' && !sortDesc"
+          class="h-3 w-3"
+          aria-hidden="true"
+        />
+        <ChevronDownIcon
+          v-if="sortField === 'modified' && sortDesc"
+          class="h-3 w-3"
+          aria-hidden="true"
+        />
+      </button>
+      <div class="min-w-[24px]"></div>
     </div>
   </div>
 </template>
+
+<script setup lang="ts">
+import ChevronDownIcon from "./icons/ChevronDownIcon.vue";
+import ChevronUpIcon from "./icons/ChevronUpIcon.vue";
+
+defineProps<{
+  sortField: string;
+  sortDesc: boolean;
+}>();
+
+defineEmits<{
+  (e: "sort", field: string): void;
+}>();
+</script>
diff --git a/apps/frontend/src/components/ui/servers/Globe.vue b/apps/frontend/src/components/ui/servers/Globe.vue
new file mode 100644
index 000000000..56c9b826d
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/Globe.vue
@@ -0,0 +1,309 @@
+<template>
+  <div ref="container" class="relative h-[400px] w-full cursor-move lg:h-[600px]">
+    <div
+      v-for="location in locations"
+      :key="location.name"
+      :class="{
+        'opacity-0': !showLabels,
+        hidden: !isLocationVisible(location),
+        'z-40': location.clicked,
+      }"
+      :style="{
+        position: 'absolute',
+        left: `${location.screenPosition?.x || 0}px`,
+        top: `${location.screenPosition?.y || 0}px`,
+      }"
+      class="location-button center-on-top-left flex transform cursor-pointer items-center rounded-full bg-bg px-3 outline-1 outline-red transition-opacity duration-200 hover:z-50"
+      @click="toggleLocationClicked(location)"
+    >
+      <div
+        :class="{
+          'animate-pulse': location.active,
+          'border-gray-400': !location.active,
+          'border-purple bg-purple': location.active,
+          'border-dashed': !location.active,
+          'opacity-40': !location.active,
+        }"
+        class="my-3 size-2.5 shrink-0 rounded-full border-2"
+      ></div>
+      <div
+        class="expanding-item"
+        :class="{
+          expanded: location.clicked,
+        }"
+      >
+        <div class="whitespace-nowrap text-sm">
+          <span class="ml-2"> {{ location.name }} </span>
+          <span v-if="!location.active" class="ml-1 text-xs text-secondary">(Coming Soon)</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import { ref, onMounted, onUnmounted } from "vue";
+
+const container = ref(null);
+const showLabels = ref(false);
+
+const locations = ref([
+  // Active locations
+  { name: "New York", lat: 40.7128, lng: -74.006, active: true, clicked: false },
+  { name: "Los Angeles", lat: 34.0522, lng: -118.2437, active: true, clicked: false },
+  { name: "Miami", lat: 25.7617, lng: -80.1918, active: true, clicked: false },
+  { name: "Spokane", lat: 47.667309, lng: -117.411922, active: true, clicked: false },
+  { name: "Dallas", lat: 32.78372, lng: -96.7947, active: true, clicked: false },
+  // Future Locations
+  // { name: "London", lat: 51.5074, lng: -0.1278, active: false, clicked: false },
+  // { name: "Frankfurt", lat: 50.1109, lng: 8.6821, active: false, clicked: false },
+  // { name: "Amsterdam", lat: 52.3676, lng: 4.9041, active: false, clicked: false },
+  // { name: "Paris", lat: 48.8566, lng: 2.3522, active: false, clicked: false },
+  // { name: "Singapore", lat: 1.3521, lng: 103.8198, active: false, clicked: false },
+  // { name: "Tokyo", lat: 35.6762, lng: 139.6503, active: false, clicked: false },
+  // { name: "Sydney", lat: -33.8688, lng: 151.2093, active: false, clicked: false },
+  // { name: "São Paulo", lat: -23.5505, lng: -46.6333, active: false, clicked: false },
+  // { name: "Toronto", lat: 43.6532, lng: -79.3832, active: false, clicked: false },
+]);
+
+const isLocationVisible = (location) => {
+  if (!location.screenPosition || !globe) return false;
+
+  const vector = latLngToVector3(location.lat, location.lng).clone();
+  vector.applyMatrix4(globe.matrixWorld);
+
+  const cameraVector = new THREE.Vector3();
+  camera.getWorldPosition(cameraVector);
+
+  const viewVector = vector.clone().sub(cameraVector).normalize();
+
+  const normal = vector.clone().normalize();
+
+  const dotProduct = normal.dot(viewVector);
+
+  return dotProduct < -0.15;
+};
+
+const toggleLocationClicked = (location) => {
+  console.log("clicked", location.name);
+  locations.value.find((loc) => loc.name === location.name).clicked = !location.clicked;
+};
+
+let scene, camera, renderer, globe, controls;
+let animationFrame;
+
+const init = () => {
+  scene = new THREE.Scene();
+  camera = new THREE.PerspectiveCamera(
+    45,
+    container.value.clientWidth / container.value.clientHeight,
+    0.1,
+    1000,
+  );
+  renderer = new THREE.WebGLRenderer({
+    antialias: true,
+    alpha: true,
+    powerPreference: "low-power",
+  });
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(container.value.clientWidth, container.value.clientHeight);
+  container.value.appendChild(renderer.domElement);
+
+  const geometry = new THREE.SphereGeometry(5, 64, 64);
+  const outlineTexture = new THREE.TextureLoader().load("/earth-outline.png");
+  outlineTexture.minFilter = THREE.LinearFilter;
+  outlineTexture.magFilter = THREE.LinearFilter;
+
+  const material = new THREE.ShaderMaterial({
+    uniforms: {
+      outlineTexture: { value: outlineTexture },
+      globeColor: { value: new THREE.Color("#60fbb5") },
+    },
+    vertexShader: `
+      varying vec2 vUv;
+      void main() {
+        vUv = uv;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }
+    `,
+    fragmentShader: `
+      uniform sampler2D outlineTexture;
+      uniform vec3 globeColor;
+      varying vec2 vUv;
+      void main() {
+        vec4 texColor = texture2D(outlineTexture, vUv);
+
+        float brightness = max(max(texColor.r, texColor.g), texColor.b);
+        gl_FragColor = vec4(globeColor, brightness * 0.8);
+      }
+    `,
+    transparent: true,
+    side: THREE.FrontSide,
+  });
+
+  globe = new THREE.Mesh(geometry, material);
+  scene.add(globe);
+
+  const atmosphereGeometry = new THREE.SphereGeometry(5.2, 64, 64);
+  const atmosphereMaterial = new THREE.ShaderMaterial({
+    transparent: true,
+    side: THREE.BackSide,
+    uniforms: {
+      color: { value: new THREE.Color("#56f690") },
+      viewVector: { value: camera.position },
+    },
+    vertexShader: `
+      uniform vec3 viewVector;
+      varying float intensity;
+      void main() {
+        vec3 vNormal = normalize(normalMatrix * normal);
+        vec3 vNormel = normalize(normalMatrix * viewVector);
+        intensity = pow(0.7 - dot(vNormal, vNormel), 2.0);
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }
+    `,
+    fragmentShader: `
+      uniform vec3 color;
+      varying float intensity;
+      void main() {
+        gl_FragColor = vec4(color, intensity * 0.4);
+      }
+    `,
+  });
+
+  const atmosphere = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);
+  scene.add(atmosphere);
+
+  const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
+  scene.add(ambientLight);
+
+  camera.position.z = 15;
+
+  controls = new OrbitControls(camera, renderer.domElement);
+  controls.enableDamping = true;
+  controls.dampingFactor = 0.05;
+  controls.rotateSpeed = 0.3;
+  controls.enableZoom = false;
+  controls.enablePan = false;
+  controls.autoRotate = true;
+  controls.autoRotateSpeed = 0.05;
+  controls.minPolarAngle = Math.PI * 0.3;
+  controls.maxPolarAngle = Math.PI * 0.7;
+
+  globe.rotation.y = Math.PI * 1.9;
+  globe.rotation.x = Math.PI * 0.15;
+};
+
+const animate = () => {
+  animationFrame = requestAnimationFrame(animate);
+  controls.update();
+
+  locations.value.forEach((location) => {
+    const position = latLngToVector3(location.lat, location.lng);
+    const vector = position.clone();
+    vector.applyMatrix4(globe.matrixWorld);
+
+    const coords = vector.project(camera);
+    const screenPosition = {
+      x: (coords.x * 0.5 + 0.5) * container.value.clientWidth,
+      y: (-coords.y * 0.5 + 0.5) * container.value.clientHeight,
+    };
+    location.screenPosition = screenPosition;
+  });
+
+  renderer.render(scene, camera);
+};
+
+const latLngToVector3 = (lat, lng) => {
+  const phi = (90 - lat) * (Math.PI / 180);
+  const theta = (lng + 180) * (Math.PI / 180);
+  const radius = 5;
+
+  return new THREE.Vector3(
+    -radius * Math.sin(phi) * Math.cos(theta),
+    radius * Math.cos(phi),
+    radius * Math.sin(phi) * Math.sin(theta),
+  );
+};
+
+const handleResize = () => {
+  if (!container.value) return;
+  camera.aspect = container.value.clientWidth / container.value.clientHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(container.value.clientWidth, container.value.clientHeight);
+};
+
+onMounted(() => {
+  init();
+  animate();
+  window.addEventListener("resize", handleResize);
+
+  setTimeout(() => {
+    showLabels.value = true;
+  }, 1000);
+});
+
+onUnmounted(() => {
+  if (animationFrame) {
+    cancelAnimationFrame(animationFrame);
+  }
+  window.removeEventListener("resize", handleResize);
+  if (renderer) {
+    renderer.dispose();
+  }
+  if (container.value) {
+    container.value.innerHTML = "";
+  }
+});
+</script>
+
+<style scoped>
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(27, 217, 106, 0.3);
+  }
+  70% {
+    box-shadow: 0 0 0 4px rgba(27, 217, 106, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(27, 217, 106, 0);
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.center-on-top-left {
+  transform: translate(-50%, -50%);
+}
+
+.expanding-item.expanded {
+  grid-template-columns: 1fr;
+}
+
+@media (hover: hover) {
+  .location-button:hover .expanding-item {
+    grid-template-columns: 1fr;
+  }
+}
+
+.expanding-item {
+  display: grid;
+  grid-template-columns: 0fr;
+  transition: grid-template-columns 0.15s ease-in-out;
+  overflow: hidden;
+
+  > div {
+    overflow: hidden;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .expanding-item {
+    transition: none !important;
+  }
+}
+</style>
diff --git a/apps/frontend/src/components/ui/servers/InstallingTicker.vue b/apps/frontend/src/components/ui/servers/InstallingTicker.vue
new file mode 100644
index 000000000..d248d2e1a
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/InstallingTicker.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="ticker-container">
+    <div class="ticker-content">
+      <div
+        v-for="(message, index) in msgs"
+        :key="message"
+        class="ticker-item text-xs"
+        :class="{ active: index === currentIndex % msgs.length }"
+      >
+        {{ message }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+
+const msgs = [
+  "Organizing files...",
+  "Downloading mods...",
+  "Configuring server...",
+  "Setting up environment...",
+  "Adding Java...",
+];
+
+const currentIndex = ref(0);
+
+let intervalId: NodeJS.Timeout | null = null;
+
+onMounted(() => {
+  intervalId = setInterval(() => {
+    currentIndex.value = (currentIndex.value + 1) % msgs.length;
+  }, 3000);
+});
+
+onUnmounted(() => {
+  if (intervalId) {
+    clearInterval(intervalId);
+  }
+});
+</script>
+
+<style scoped>
+.ticker-container {
+  height: 20px;
+  width: 100%;
+  position: relative;
+}
+
+.ticker-content {
+  position: relative;
+  width: 100%;
+}
+
+.ticker-item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  color: var(--color-secondary-text);
+  opacity: 0;
+  transform: scale(0.9);
+  filter: blur(4px);
+  transition: all 0.3s ease-in-out;
+}
+
+.ticker-item.active {
+  opacity: 1;
+  transform: scale(1);
+  filter: blur(0);
+}
+</style>
diff --git a/apps/frontend/src/components/ui/servers/LoaderSelector.vue b/apps/frontend/src/components/ui/servers/LoaderSelector.vue
index f1e1a14ff..ec37299a3 100644
--- a/apps/frontend/src/components/ui/servers/LoaderSelector.vue
+++ b/apps/frontend/src/components/ui/servers/LoaderSelector.vue
@@ -10,6 +10,7 @@
         :is-current="isCurrentLoader(loader.name)"
         :loader-version="data.loader_version"
         :current-loader="data.loader"
+        :is-installing="isInstalling"
         @select="selectLoader"
       />
     </div>
@@ -28,6 +29,7 @@
           :is-current="isCurrentLoader(loader.name)"
           :loader-version="data.loader_version"
           :current-loader="data.loader"
+          :is-installing="isInstalling"
           @select="selectLoader"
         />
       </div>
@@ -47,6 +49,7 @@
           :is-current="isCurrentLoader(loader.name)"
           :loader-version="data.loader_version"
           :current-loader="data.loader"
+          :is-installing="isInstalling"
           @select="selectLoader"
         />
       </div>
@@ -60,6 +63,7 @@ const props = defineProps<{
     loader: string | null;
     loader_version: string | null;
   };
+  isInstalling?: boolean;
 }>();
 
 const emit = defineEmits<{
diff --git a/apps/frontend/src/components/ui/servers/LoaderSelectorCard.vue b/apps/frontend/src/components/ui/servers/LoaderSelectorCard.vue
index ef07967e3..c9e8a8aa5 100644
--- a/apps/frontend/src/components/ui/servers/LoaderSelectorCard.vue
+++ b/apps/frontend/src/components/ui/servers/LoaderSelectorCard.vue
@@ -31,7 +31,7 @@
     </div>
 
     <ButtonStyled>
-      <button @click="onSelect">
+      <button :disabled="isInstalling" @click="onSelect">
         <DownloadIcon class="h-5 w-5" />
         {{ isCurrentLoader ? "Reinstall" : "Install" }}
       </button>
@@ -52,6 +52,7 @@ interface Props {
   loader: LoaderInfo;
   currentLoader: string | null;
   loaderVersion: string | null;
+  isInstalling?: boolean;
 }
 
 const props = defineProps<Props>();
diff --git a/apps/frontend/src/components/ui/servers/LogLine.vue b/apps/frontend/src/components/ui/servers/LogLine.vue
new file mode 100644
index 000000000..1e8f4e02b
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/LogLine.vue
@@ -0,0 +1,91 @@
+<template>
+  <div
+    class="parsed-log relative flex h-8 w-full items-center overflow-hidden rounded-lg px-6"
+    @mouseenter="checkOverflow"
+    @touchstart="checkOverflow"
+  >
+    <div ref="logContent" class="log-content flex-1 truncate whitespace-pre">
+      <span v-html="sanitizedLog"></span>
+    </div>
+    <button
+      v-if="isOverflowing"
+      class="ml-2 flex h-6 items-center rounded-md bg-bg px-2 text-xs text-contrast opacity-50 transition-opacity hover:opacity-100"
+      type="button"
+      @click.stop="$emit('show-full-log', props.log)"
+    >
+      ...
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import Convert from "ansi-to-html";
+import DOMPurify from "dompurify";
+
+const props = defineProps<{
+  log: string;
+}>();
+
+defineEmits<{
+  "show-full-log": [log: string];
+}>();
+
+const logContent = ref<HTMLElement | null>(null);
+const isOverflowing = ref(false);
+
+const checkOverflow = () => {
+  if (logContent.value && !isOverflowing.value) {
+    isOverflowing.value = logContent.value.scrollWidth > logContent.value.clientWidth;
+  }
+};
+
+const convert = new Convert({
+  fg: "#FFF",
+  bg: "#000",
+  newline: false,
+  escapeXML: true,
+  stream: false,
+});
+
+const sanitizedLog = computed(() =>
+  DOMPurify.sanitize(convert.toHtml(props.log), {
+    ALLOWED_TAGS: ["span"],
+    ALLOWED_ATTR: ["style"],
+    USE_PROFILES: { html: true },
+  }),
+);
+
+const preventSelection = (e: MouseEvent) => {
+  e.preventDefault();
+};
+
+onMounted(() => {
+  logContent.value?.addEventListener("mousedown", preventSelection);
+});
+
+onUnmounted(() => {
+  logContent.value?.removeEventListener("mousedown", preventSelection);
+});
+</script>
+
+<style scoped>
+.parsed-log {
+  background: transparent;
+  transition: background-color 0.1s;
+}
+
+.parsed-log:hover {
+  background: rgba(128, 128, 128, 0.25);
+  transition: 0s;
+}
+
+.log-content > span {
+  user-select: none;
+  white-space: pre;
+}
+
+.log-content {
+  white-space: pre;
+}
+</style>
diff --git a/apps/frontend/src/components/ui/servers/LogParser.vue b/apps/frontend/src/components/ui/servers/LogParser.vue
deleted file mode 100644
index efea31712..000000000
--- a/apps/frontend/src/components/ui/servers/LogParser.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <div class="parsed-log group relative w-full overflow-hidden px-6 py-1">
-    <div
-      ref="logContent"
-      class="log-content selectable whitespace-pre-wrap selection:bg-black selection:text-white dark:selection:bg-white dark:selection:text-black"
-      v-html="sanitizedLog"
-    ></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from "vue";
-import Convert from "ansi-to-html";
-import DOMPurify from "dompurify";
-
-const props = defineProps<{
-  log: string;
-  index: number;
-}>();
-
-const logContent = ref<HTMLElement | null>(null);
-
-const colors = {
-  30: "#101010",
-  31: "#EFA6A2",
-  32: "#80C990",
-  33: "#A69460",
-  34: "#A3B8EF",
-  35: "#E6A3DC",
-  36: "#50CACD",
-  37: "#808080",
-  90: "#454545",
-  91: "#E0AF85",
-  92: "#5ACCAF",
-  93: "#C8C874",
-  94: "#CCACED",
-  95: "#F2A1C2",
-  96: "#74C3E4",
-  97: "#C0C0C0",
-};
-
-const convert = new Convert({
-  fg: "#FFF",
-  bg: "#000",
-  newline: false,
-  escapeXML: true,
-  stream: false,
-  colors,
-});
-
-const urlRegex = /https?:\/\/[^\s]+/g;
-const usernameRegex = /&lt;([^&]+)&gt;/g;
-
-const sanitizedLog = computed(() => {
-  let html = convert.toHtml(props.log);
-  html = html.replace(
-    urlRegex,
-    (url) =>
-      `<a style="color:var(--color-link);text-decoration:underline;" href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`,
-  );
-  html = html.replace(
-    usernameRegex,
-    (_, username) => `<span class="minecraft-username">&lt;${username}&gt;</span>`,
-  );
-  return DOMPurify.sanitize(html, {
-    ALLOWED_TAGS: ["span", "a"],
-    ALLOWED_ATTR: ["style", "href", "target", "rel", "class"],
-    ADD_ATTR: ["target"],
-    RETURN_TRUSTED_TYPE: true,
-    USE_PROFILES: { html: true },
-  });
-});
-</script>
-
-<style scoped>
-.parsed-log:hover:not(.selected) {
-  border-radius: 0.5rem;
-}
-
-html.light-mode .parsed-log:hover:not(.selected) {
-  background-color: #ccc;
-}
-
-html.dark-mode .parsed-log:hover:not(.selected) {
-  background-color: #222;
-}
-
-html.oled-mode .parsed-log:hover:not(.selected) {
-  background-color: #222;
-}
-
-.minecraft-username {
-  font-weight: bold;
-}
-
-::v-deep(.log-content) {
-  user-select: none;
-}
-
-::v-deep(.log-content.selectable) {
-  user-select: text;
-}
-
-::v-deep(.log-content *) {
-  user-select: text;
-}
-</style>
diff --git a/apps/frontend/src/components/ui/servers/PanelOverviewLoading.vue b/apps/frontend/src/components/ui/servers/OverviewLoading.vue
similarity index 85%
rename from apps/frontend/src/components/ui/servers/PanelOverviewLoading.vue
rename to apps/frontend/src/components/ui/servers/OverviewLoading.vue
index 7fbe45a37..a3d5135f1 100644
--- a/apps/frontend/src/components/ui/servers/PanelOverviewLoading.vue
+++ b/apps/frontend/src/components/ui/servers/OverviewLoading.vue
@@ -34,8 +34,7 @@
           class="relative isolate min-h-[156px] w-full overflow-hidden rounded-2xl bg-bg-raised p-8 transition-transform duration-100 hover:scale-105 active:scale-100"
         >
           <div class="flex flex-row items-center gap-2">
-            <h2 class="m-0 -ml-0.5 text-3xl font-extrabold text-contrast">0 Bytes</h2>
-            <h3 class="relative z-10 text-sm font-normal text-secondary">/ 0 Bytes</h3>
+            <h2 class="m-0 -ml-0.5 mt-1 text-3xl font-extrabold text-contrast">0 B</h2>
           </div>
           <h3 class="relative z-10 text-base font-normal text-secondary">Storage usage</h3>
           <FolderOpenIcon class="absolute right-10 top-10 size-8" />
@@ -50,8 +49,12 @@
             <h2 class="m-0 text-3xl font-extrabold text-contrast">Console</h2>
           </div>
         </div>
+        <div class="relative w-full">
+          <input type="text" placeholder="Search logs" class="h-12 !w-full !pl-10 !pr-48" />
+          <SearchIcon class="absolute left-4 top-1/2 -translate-y-1/2" />
+        </div>
         <div
-          class="console relative h-full min-h-[488px] w-full overflow-hidden rounded-xl bg-bg text-sm"
+          class="console relative h-full min-h-[516px] w-full overflow-hidden rounded-xl bg-bg text-sm"
         ></div>
       </div>
     </div>
@@ -59,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import { CPUIcon, DBIcon, FolderOpenIcon } from "@modrinth/assets";
+import { CPUIcon, DBIcon, FolderOpenIcon, SearchIcon } from "@modrinth/assets";
 </script>
 
 <style scoped>
diff --git a/apps/frontend/src/components/ui/servers/PanelCopyIP.vue b/apps/frontend/src/components/ui/servers/PanelCopyIP.vue
deleted file mode 100644
index 6bc45920d..000000000
--- a/apps/frontend/src/components/ui/servers/PanelCopyIP.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <ButtonStyled type="standard">
-    <button aria-label="Copy server IP" @click="copyText">
-      <CopyIcon />
-      Copy IP
-    </button>
-  </ButtonStyled>
-</template>
-
-<script setup lang="ts">
-import { CopyIcon } from "@modrinth/assets";
-import { ButtonStyled } from "@modrinth/ui";
-
-const props = defineProps<{
-  ip: string;
-  port: number;
-  subdomain?: string | null;
-}>();
-
-const copyText = () => {
-  const text = props.subdomain ? `${props.subdomain}.modrinth.gg` : `${props.ip}:${props.port}`;
-  navigator.clipboard.writeText(text);
-
-  addNotification({
-    group: "server",
-    title: `Copied IP`,
-    text: `Your server's IP has been copied to your clipboard`,
-    type: "success",
-  });
-};
-</script>
diff --git a/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue b/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue
index ebb5cf0b7..073909fd3 100644
--- a/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue
+++ b/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue
@@ -1,23 +1,25 @@
 <template>
   <div class="contents">
-    <NewModal ref="confirmActionModal" header="Confirming power action" @close="closePowerModal">
+    <NewModal ref="confirmActionModal" header="Confirming power action" @close="resetPowerAction">
       <div class="flex flex-col gap-4 md:w-[400px]">
-        <p class="m-0">Are you sure you want to {{ currentPendingAction }} the server?</p>
-
+        <p class="m-0">
+          Are you sure you want to <span class="lowercase">{{ confirmActionText }}</span> the
+          server?
+        </p>
         <UiCheckbox
-          v-model="powerDontAskAgainCheckbox"
+          v-model="dontAskAgain"
           label="Don't ask me again"
           class="text-sm"
-          :disabled="!currentPendingAction"
+          :disabled="!powerAction"
         />
         <div class="flex flex-row gap-4">
-          <ButtonStyled type="standard" color="brand" @click="confirmAction">
+          <ButtonStyled type="standard" color="brand" @click="executePowerAction">
             <button>
               <CheckIcon class="h-5 w-5" />
-              {{ currentPendingActionFriendly }} server
+              {{ confirmActionText }} server
             </button>
           </ButtonStyled>
-          <ButtonStyled @click="closePowerModal">
+          <ButtonStyled @click="resetPowerAction">
             <button>
               <XIcon class="h-5 w-5" />
               Cancel
@@ -29,7 +31,7 @@
 
     <NewModal
       ref="detailsModal"
-      :header="`All of ${props.serverName ? props.serverName : 'Server'} info`"
+      :header="`All of ${serverName || 'Server'} info`"
       @close="closeDetailsModal"
     >
       <UiServersServerInfoLabels
@@ -51,75 +53,74 @@
           <UiServersPanelSpinner class="size-5" /> Installing...
         </button>
       </ButtonStyled>
-      <div v-else class="contents">
+
+      <template v-else>
         <ButtonStyled v-if="showStopButton" type="transparent">
-          <button :disabled="!canTakeAction || disabled || isStopping" @click="stopServer">
+          <button :disabled="!canTakeAction" @click="initiateAction('stop')">
             <div class="flex gap-1">
               <StopCircleIcon class="h-5 w-5" />
-              <span>{{ stopButtonText }}</span>
+              <span>{{ isStoppingState ? "Stopping..." : "Stop" }}</span>
             </div>
           </button>
         </ButtonStyled>
+
         <ButtonStyled type="standard" color="brand">
-          <button :disabled="!canTakeAction || disabled || isStopping" @click="handleAction">
-            <div v-if="isStartingOrRestarting" class="grid place-content-center">
+          <button :disabled="!canTakeAction" @click="handlePrimaryAction">
+            <div v-if="isTransitionState" class="grid place-content-center">
               <UiServersIconsLoadingIcon />
             </div>
-            <div v-else class="contents">
-              <component :is="showRestartIcon ? UpdatedIcon : PlayIcon" />
-            </div>
-            <span>
-              {{ actionButtonText }}
-            </span>
+            <component :is="isRunning ? UpdatedIcon : PlayIcon" v-else />
+            <span>{{ primaryActionText }}</span>
           </button>
         </ButtonStyled>
-      </div>
 
-      <!-- Dropdown options -->
-      <ButtonStyled circular type="transparent">
-        <UiServersTeleportOverflowMenu
-          :options="[
-            ...(props.isInstalling ? [] : [{ id: 'kill', action: () => killServer() }]),
-            { id: 'allServers', action: () => router.push('/servers/manage') },
-            { id: 'details', action: () => showDetailsModal() },
-          ]"
-        >
-          <MoreVerticalIcon aria-hidden="true" />
-          <template #kill>
-            <SlashIcon class="h-5 w-5" />
-            <span>Kill server</span>
-          </template>
-          <template #allServers>
-            <ServerIcon class="h-5 w-5" />
-            <span>All servers</span>
-          </template>
-          <template #details>
-            <InfoIcon class="h-5 w-5" />
-            <span>Details</span>
-          </template>
-        </UiServersTeleportOverflowMenu>
-      </ButtonStyled>
+        <ButtonStyled circular type="transparent">
+          <UiServersTeleportOverflowMenu :options="[...menuOptions]">
+            <MoreVerticalIcon aria-hidden="true" />
+            <template #kill>
+              <SlashIcon class="h-5 w-5" />
+              <span>Kill server</span>
+            </template>
+            <template #allServers>
+              <ServerIcon class="h-5 w-5" />
+              <span>All servers</span>
+            </template>
+            <template #details>
+              <InfoIcon class="h-5 w-5" />
+              <span>Details</span>
+            </template>
+          </UiServersTeleportOverflowMenu>
+        </ButtonStyled>
+      </template>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
+import { ref, computed } from "vue";
 import {
   PlayIcon,
   UpdatedIcon,
   StopCircleIcon,
   SlashIcon,
-  MoreVerticalIcon,
   XIcon,
   CheckIcon,
   ServerIcon,
   InfoIcon,
+  MoreVerticalIcon,
 } from "@modrinth/assets";
 import { ButtonStyled, NewModal } from "@modrinth/ui";
 import { useRouter } from "vue-router";
 import { useStorage } from "@vueuse/core";
 
+type ServerAction = "start" | "stop" | "restart" | "kill";
+type ServerState = "stopped" | "starting" | "running" | "stopping" | "restarting";
+
+interface PowerAction {
+  action: ServerAction;
+  nextState: ServerState;
+}
+
 const props = defineProps<{
   isOnline: boolean;
   isActioning: boolean;
@@ -130,183 +131,142 @@ const props = defineProps<{
   uptimeSeconds: number;
 }>();
 
+const emit = defineEmits<{
+  (e: "action", action: ServerAction): void;
+}>();
+
 const router = useRouter();
 const serverId = router.currentRoute.value.params.id;
+const confirmActionModal = ref<InstanceType<typeof NewModal> | null>(null);
+const detailsModal = ref<InstanceType<typeof NewModal> | null>(null);
 
 const userPreferences = useStorage(`pyro-server-${serverId}-preferences`, {
   powerDontAskAgain: false,
 });
 
-const emit = defineEmits<{
-  (e: "action", action: "start" | "restart" | "stop" | "kill"): void;
-}>();
+const serverState = ref<ServerState>(props.isOnline ? "running" : "stopped");
+const powerAction = ref<PowerAction | null>(null);
+const dontAskAgain = ref(false);
+const startingDelay = ref(false);
 
-const confirmActionModal = ref<InstanceType<typeof NewModal> | null>(null);
-const detailsModal = ref<InstanceType<typeof NewModal> | null>(null);
-
-const ServerState = {
-  Stopped: "Stopped",
-  Starting: "Starting",
-  Running: "Running",
-  Stopping: "Stopping",
-  Restarting: "Restarting",
-} as const;
-
-type ServerStateType = (typeof ServerState)[keyof typeof ServerState];
-
-const currentPendingAction = ref<string | null>(null);
-const currentPendingState = ref<ServerStateType | null>(null);
-const powerDontAskAgainCheckbox = ref(false);
-
-const currentState = ref<ServerStateType>(
-  props.isOnline ? ServerState.Running : ServerState.Stopped,
-);
-
-const isStartingDelay = ref(false);
-const showStopButton = computed(
-  () => currentState.value === ServerState.Running || currentState.value === ServerState.Stopping,
-);
-const showRestartIcon = computed(() => currentState.value === ServerState.Running);
 const canTakeAction = computed(
-  () =>
-    !props.isActioning &&
-    !isStartingDelay.value &&
-    currentState.value !== ServerState.Starting &&
-    currentState.value !== ServerState.Stopping,
+  () => !props.isActioning && !startingDelay.value && !isTransitionState.value,
 );
-
-const isStartingOrRestarting = computed(
-  () =>
-    currentState.value === ServerState.Starting || currentState.value === ServerState.Restarting,
+const isRunning = computed(() => serverState.value === "running");
+const isTransitionState = computed(() =>
+  ["starting", "stopping", "restarting"].includes(serverState.value),
 );
+const isStoppingState = computed(() => serverState.value === "stopping");
+const showStopButton = computed(() => isRunning.value || isStoppingState.value);
 
-const isStopping = computed(() => currentState.value === ServerState.Stopping);
-
-const actionButtonText = computed(() => {
-  switch (currentState.value) {
-    case ServerState.Starting:
-      return "Starting...";
-    case ServerState.Restarting:
-      return "Restarting...";
-    case ServerState.Running:
-      return "Restart";
-    case ServerState.Stopping:
-      return "Stopping...";
-    default:
-      return "Start";
-  }
+const primaryActionText = computed(() => {
+  const states: Record<ServerState, string> = {
+    starting: "Starting...",
+    restarting: "Restarting...",
+    running: "Restart",
+    stopping: "Stopping...",
+    stopped: "Start",
+  };
+  return states[serverState.value];
 });
 
-const currentPendingActionFriendly = computed(() => {
-  switch (currentPendingAction.value) {
-    case "start":
-      return "Start";
-    case "restart":
-      return "Restart";
-    case "stop":
-      return "Stop";
-    case "kill":
-      return "Kill";
-    default:
-      return null;
-  }
+const confirmActionText = computed(() => {
+  if (!powerAction.value) return "";
+  return powerAction.value.action.charAt(0).toUpperCase() + powerAction.value.action.slice(1);
 });
 
-const stopButtonText = computed(() =>
-  currentState.value === ServerState.Stopping ? "Stopping..." : "Stop",
-);
+const menuOptions = computed(() => [
+  ...(props.isInstalling
+    ? []
+    : [
+        {
+          id: "kill",
+          label: "Kill server",
+          icon: SlashIcon,
+          action: () => initiateAction("kill"),
+        },
+      ]),
+  {
+    id: "allServers",
+    label: "All servers",
+    icon: ServerIcon,
+    action: () => router.push("/servers/manage"),
+  },
+  {
+    id: "details",
+    label: "Details",
+    icon: InfoIcon,
+    action: () => detailsModal.value?.show(),
+  },
+]);
 
-const createPendingAction = () => {
+function initiateAction(action: ServerAction) {
   if (!canTakeAction.value) return;
-  if (currentState.value === ServerState.Running) {
-    currentPendingAction.value = "restart";
-    currentPendingState.value = ServerState.Restarting;
-    showPowerModal();
-  } else {
-    runAction("start", ServerState.Starting);
+
+  const stateMap: Record<ServerAction, ServerState> = {
+    start: "starting",
+    stop: "stopping",
+    restart: "restarting",
+    kill: "stopping",
+  };
+
+  if (action === "start") {
+    emit("action", action);
+    serverState.value = stateMap[action];
+    startingDelay.value = true;
+    setTimeout(() => (startingDelay.value = false), 5000);
+    return;
   }
-};
 
-const handleAction = () => {
-  createPendingAction();
-};
+  powerAction.value = { action, nextState: stateMap[action] };
 
-const showPowerModal = () => {
   if (userPreferences.value.powerDontAskAgain) {
-    runAction(
-      currentPendingAction.value as "start" | "restart" | "stop" | "kill",
-      currentPendingState.value!,
-    );
+    executePowerAction();
   } else {
     confirmActionModal.value?.show();
   }
-};
+}
 
-const confirmAction = () => {
-  if (powerDontAskAgainCheckbox.value) {
+function handlePrimaryAction() {
+  initiateAction(isRunning.value ? "restart" : "start");
+}
+
+function executePowerAction() {
+  if (!powerAction.value) return;
+
+  const { action, nextState } = powerAction.value;
+  emit("action", action);
+  serverState.value = nextState;
+
+  if (dontAskAgain.value) {
     userPreferences.value.powerDontAskAgain = true;
   }
-  runAction(
-    currentPendingAction.value as "start" | "restart" | "stop" | "kill",
-    currentPendingState.value!,
-  );
-  closePowerModal();
-};
-
-const runAction = (action: "start" | "restart" | "stop" | "kill", serverState: ServerStateType) => {
-  emit("action", action);
-  currentState.value = serverState;
 
   if (action === "start") {
-    isStartingDelay.value = true;
-    setTimeout(() => {
-      isStartingDelay.value = false;
-    }, 5000);
+    startingDelay.value = true;
+    setTimeout(() => (startingDelay.value = false), 5000);
   }
-};
 
-const stopServer = () => {
-  if (!canTakeAction.value) return;
-  currentPendingAction.value = "stop";
-  currentPendingState.value = ServerState.Stopping;
-  showPowerModal();
-};
+  resetPowerAction();
+}
 
-const killServer = () => {
-  currentPendingAction.value = "kill";
-  currentPendingState.value = ServerState.Stopping;
-  showPowerModal();
-};
-
-const closePowerModal = () => {
+function resetPowerAction() {
   confirmActionModal.value?.hide();
-  currentPendingAction.value = null;
-  powerDontAskAgainCheckbox.value = false;
-};
+  powerAction.value = null;
+  dontAskAgain.value = false;
+}
 
-const closeDetailsModal = () => {
+function closeDetailsModal() {
   detailsModal.value?.hide();
-};
-
-const showDetailsModal = () => {
-  detailsModal.value?.show();
-};
+}
 
 watch(
   () => props.isOnline,
-  (newValue) => {
-    if (newValue) {
-      currentState.value = ServerState.Running;
-    } else {
-      currentState.value = ServerState.Stopped;
-    }
-  },
+  (online) => (serverState.value = online ? "running" : "stopped"),
 );
 
 watch(
   () => router.currentRoute.value.fullPath,
-  () => {
-    closeDetailsModal();
-  },
+  () => closeDetailsModal(),
 );
 </script>
diff --git a/apps/frontend/src/components/ui/servers/PanelServerStatus.vue b/apps/frontend/src/components/ui/servers/PanelServerStatus.vue
index 81e6ebc6f..9f6674b0b 100644
--- a/apps/frontend/src/components/ui/servers/PanelServerStatus.vue
+++ b/apps/frontend/src/components/ui/servers/PanelServerStatus.vue
@@ -1,66 +1,72 @@
 <template>
   <div
-    :aria-label="`Server is ${getStatusText}`"
+    :aria-label="`Server is ${getStatusText(state)}`"
     class="relative inline-flex select-none items-center"
     @mouseenter="isExpanded = true"
     @mouseleave="isExpanded = false"
   >
     <div
-      :class="`h-4 w-4 rounded-full transition-all duration-300 ease-in-out ${getStatusClass.main}`"
+      :class="[
+        'h-4 w-4 rounded-full transition-all duration-300 ease-in-out',
+        getStatusClass(state).main,
+      ]"
     >
       <div
-        :class="`absolute inline-flex h-4 w-4 animate-ping rounded-full ${getStatusClass.bg}`"
+        :class="[
+          'absolute inline-flex h-4 w-4 animate-ping rounded-full',
+          getStatusClass(state).bg,
+        ]"
       ></div>
     </div>
     <div
-      :class="`absolute -left-4 flex w-auto items-center gap-2 rounded-full px-2 py-1 transition-all duration-150 ease-in-out ${getStatusClass.bg} ${
-        isExpanded ? 'translate-x-2 scale-100 opacity-100' : 'translate-x-0 scale-90 opacity-0'
-      }`"
+      :class="[
+        'absolute -left-4 flex w-auto items-center gap-2 rounded-full px-2 py-1 transition-all duration-150 ease-in-out',
+        getStatusClass(state).bg,
+        isExpanded ? 'translate-x-2 scale-100 opacity-100' : 'translate-x-0 scale-90 opacity-0',
+      ]"
     >
       <div class="h-3 w-3 rounded-full"></div>
       <span
-        class="origin-left whitespace-nowrap text-sm font-semibold text-contrast transition-all duration-[200ms] ease-in-out"
-        :class="`${isExpanded ? 'translate-x-0 scale-100' : '-translate-x-1 scale-x-75'}`"
+        :class="[
+          'origin-left whitespace-nowrap text-sm font-semibold text-contrast transition-all duration-[200ms] ease-in-out',
+          isExpanded ? 'translate-x-0 scale-100' : '-translate-x-1 scale-x-75',
+        ]"
       >
-        {{ getStatusText }}
+        {{ getStatusText(state) }}
       </span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { ref } from "vue";
 import type { ServerState } from "~/types/servers";
 
-const props = defineProps<{
+const STATUS_CLASSES = {
+  running: { main: "bg-brand", bg: "bg-bg-green" },
+  stopped: { main: "", bg: "" },
+  crashed: { main: "bg-brand-red", bg: "bg-bg-red" },
+  unknown: { main: "", bg: "" },
+} as const;
+
+const STATUS_TEXTS = {
+  running: "Running",
+  stopped: "",
+  crashed: "Crashed",
+  unknown: "Unknown",
+} as const;
+
+defineProps<{
   state: ServerState;
 }>();
 
 const isExpanded = ref(false);
 
-const getStatusClass = computed(() => {
-  switch (props.state) {
-    case "running":
-      return { main: "bg-brand", bg: "bg-bg-green" };
-    case "stopped":
-      return { main: "", bg: "" };
-    case "crashed":
-      return { main: "bg-brand-red", bg: "bg-bg-red" };
-    default:
-      return { main: "", bg: "" };
-  }
-});
+function getStatusClass(state: ServerState) {
+  return STATUS_CLASSES[state] ?? STATUS_CLASSES.unknown;
+}
 
-const getStatusText = computed(() => {
-  switch (props.state) {
-    case "running":
-      return "Running";
-    case "stopped":
-      return "";
-    case "crashed":
-      return "Crashed";
-    default:
-      return "Unknown";
-  }
-});
+function getStatusText(state: ServerState) {
+  return STATUS_TEXTS[state] ?? STATUS_TEXTS.unknown;
+}
 </script>
diff --git a/apps/frontend/src/components/ui/servers/PanelTerminal.vue b/apps/frontend/src/components/ui/servers/PanelTerminal.vue
index 29dfb8c0c..02d7edb90 100644
--- a/apps/frontend/src/components/ui/servers/PanelTerminal.vue
+++ b/apps/frontend/src/components/ui/servers/PanelTerminal.vue
@@ -1,141 +1,296 @@
 <template>
-  <div
-    data-pyro-terminal
-    :class="[
-      'terminal-font console relative z-[1] flex h-full w-full flex-col items-center justify-between overflow-hidden rounded-t-xl px-1 text-sm transition-transform duration-300',
-      { 'scale-fullscreen screen-fixed inset-0 z-50 !rounded-none': isFullScreen },
-    ]"
-    tabindex="-1"
-  >
-    <div
-      v-if="cosmetics.advancedRendering"
-      class="progressive-gradient pointer-events-none absolute -bottom-6 left-0 z-[2] h-[10rem] w-full overflow-hidden rounded-xl"
-      :style="`--transparency: ${Math.max(0, lerp(100, 0, bottomThreshold * 8))}%`"
-      aria-hidden="true"
-    >
-      <div
-        v-for="i in progressiveBlurIterations"
-        :key="i"
-        aria-hidden="true"
-        class="absolute left-0 top-0 h-full w-full"
-        :style="getBlurStyle(i)"
-      />
+  <div class="contents">
+    <div class="flex items-center gap-4">
+      <div class="relative w-full">
+        <input
+          v-model="searchInput"
+          type="text"
+          placeholder="Search logs"
+          class="h-12 !w-full !pl-10 !pr-48"
+          @keydown.escape="clearSearch"
+        />
+        <SearchIcon class="absolute left-4 top-1/2 -translate-y-1/2" />
+        <ButtonStyled v-if="searchInput" @click="clearSearch">
+          <button class="absolute right-2 top-1/2 -translate-y-1/2">
+            <XIcon class="h-5 w-5" />
+          </button>
+        </ButtonStyled>
+        <span
+          v-if="pyroConsole.filteredOutput.value.length && searchInput"
+          class="pointer-events-none absolute right-12 top-1/2 -translate-y-1/2 select-none whitespace-pre text-sm"
+        >
+          {{ pyroConsole.filteredOutput.value.length }}
+          {{ pyroConsole.filteredOutput.value.length === 1 ? "result" : "results" }}
+        </span>
+      </div>
     </div>
     <div
-      v-else
-      class="pointer-events-none absolute bottom-0 left-0 right-0 z-[2] h-[196px] w-full"
-      :style="
-        bottomThreshold > 0
-          ? { background: 'linear-gradient(transparent 30%, var(--console-bg) 70%)' }
-          : {}
-      "
-    ></div>
-    <div
-      aria-hidden="true"
-      class="pointer-events-none absolute left-0 top-0 z-[60] h-full w-full"
-      :style="{
-        visibility: isFullScreen ? 'hidden' : 'visible',
-      }"
+      data-pyro-terminal
+      :class="[
+        'terminal-font console relative z-[1] flex h-full w-full flex-col items-center justify-between overflow-hidden rounded-t-xl px-1 text-sm transition-transform duration-300',
+        { 'scale-fullscreen screen-fixed inset-0 z-50 !rounded-none': isFullScreen },
+      ]"
+      tabindex="-1"
     >
       <div
+        v-if="cosmetics.advancedRendering"
+        class="progressive-gradient pointer-events-none absolute -bottom-6 left-0 z-[2] h-[10rem] w-full overflow-hidden rounded-xl"
+        :style="`--transparency: ${Math.max(0, lerp(100, 0, bottomThreshold * 8))}%`"
         aria-hidden="true"
-        class="absolute -bottom-2 -right-2 h-7 w-7"
-        :style="{
-          background: `radial-gradient(circle at 0% 0%, transparent 50%, var(--color-raised-bg) 52%)`,
-        }"
-      ></div>
-      <div
-        aria-hidden="true"
-        class="absolute -bottom-2 -left-2 h-7 w-7"
-        :style="{
-          background: `radial-gradient(circle at 100% 0%, transparent 50%, var(--color-raised-bg) 52%)`,
-        }"
-      ></div>
-    </div>
-    <div data-pyro-terminal-scroll-root class="relative h-full w-full">
-      <div
-        ref="scrollbarTrack"
-        data-pyro-terminal-scrollbar-track
-        class="absolute -right-1 bottom-16 top-4 z-[4] w-4"
-        @mousedown="handleTrackClick"
       >
         <div
-          data-pyro-terminal-scrollbar
-          class="flex h-full justify-center rounded-full transition-all"
-          :style="{ opacity: bottomThreshold > 0 ? '1' : '0.5' }"
-        >
-          <div
-            ref="scrollbarThumb"
-            data-pyro-terminal-scrollbar-thumb
-            class="absolute w-1.5 cursor-default rounded-full bg-button-bg"
-            :style="{
-              height: `${getThumbHeight()}px`,
-              transform: `translateY(${getThumbPosition()}px)`,
-            }"
-            @mousedown="startDragging"
-          ></div>
-        </div>
+          v-for="i in progressiveBlurIterations"
+          :key="i"
+          aria-hidden="true"
+          class="absolute left-0 top-0 h-full w-full"
+          :style="getBlurStyle(i)"
+        />
       </div>
       <div
-        ref="scrollContainer"
-        data-pyro-terminal-root
-        class="scrollbar-none absolute left-0 top-0 h-full w-full select-text overflow-x-auto overflow-y-auto py-6 pb-[72px]"
-        @scroll="handleScrollEvent"
+        v-else
+        class="pointer-events-none absolute bottom-0 left-0 right-0 z-[2] h-[196px] w-full"
+        :style="
+          bottomThreshold > 0
+            ? { background: 'linear-gradient(transparent 30%, var(--console-bg) 70%)' }
+            : {}
+        "
+      ></div>
+      <div
+        aria-hidden="true"
+        class="pointer-events-none absolute left-0 top-0 z-[60] h-full w-full"
+        :style="{
+          visibility: isFullScreen ? 'hidden' : 'visible',
+        }"
       >
-        <div data-pyro-terminal-virtual-height-watcher :style="{ height: `${totalHeight}px` }">
-          <ul
-            class="m-0 list-none p-0"
-            data-pyro-terminal-virtual-list
-            :style="virtualListStyle"
-            aria-live="polite"
-            role="listbox"
+        <div
+          aria-hidden="true"
+          class="absolute -bottom-2 -right-2 h-7 w-7"
+          :style="{
+            background: `radial-gradient(circle at 0% 0%, transparent 50%, var(--color-raised-bg) 52%)`,
+          }"
+        ></div>
+        <div
+          aria-hidden="true"
+          class="absolute -bottom-2 -left-2 h-7 w-7"
+          :style="{
+            background: `radial-gradient(circle at 100% 0%, transparent 50%, var(--color-raised-bg) 52%)`,
+          }"
+        ></div>
+      </div>
+      <div data-pyro-terminal-scroll-root class="relative h-full w-full">
+        <div
+          ref="scrollbarTrack"
+          data-pyro-terminal-scrollbar-track
+          class="absolute -right-1 bottom-16 top-4 z-[4] w-4 overflow-hidden"
+          @mousedown="handleTrackClick"
+        >
+          <div
+            v-if="hasSelection"
+            class="absolute h-full w-full opacity-20"
+            :style="{
+              background: `linear-gradient(to bottom,
+                transparent ${getSelectionPosition().start}%,
+                var(--color-blue) ${getSelectionPosition().start}%,
+                var(--color-blue) ${getSelectionPosition().end}%,
+                transparent ${getSelectionPosition().end}%)`,
+            }"
+          />
+          <div
+            data-pyro-terminal-scrollbar
+            class="relative flex h-full justify-center rounded-full transition-all"
+            :style="{ opacity: bottomThreshold > 0 ? '0.7' : '0.3' }"
           >
-            <template v-for="(item, index) in visibleItems" :key="index">
-              <li>
-                <UiServersLogParser :log="item" :index="visibleStartIndex + index" />
-              </li>
-            </template>
+            <div
+              ref="scrollbarThumb"
+              data-pyro-terminal-scrollbar-thumb
+              class="absolute w-1.5 cursor-default rounded-full bg-button-bg"
+              :style="{
+                height: `${getThumbHeight()}px`,
+                transform: `translateY(${getThumbPosition()}px)`,
+              }"
+              @mousedown="startDragging"
+            ></div>
+          </div>
+        </div>
+        <div
+          ref="scrollContainer"
+          data-pyro-terminal-root
+          class="scrollbar-none absolute left-0 top-0 h-full w-full select-text overflow-x-auto overflow-y-auto py-6 pb-[72px]"
+          @scroll.passive="() => handleListScroll()"
+        >
+          <div data-pyro-terminal-virtual-height-watcher :style="{ height: `${totalHeight}px` }">
+            <ul
+              class="m-0 list-none p-0"
+              data-pyro-terminal-virtual-list
+              :class="{ 'scrolling-active': isScrolling && !isSelecting }"
+              :style="virtualListStyle"
+              aria-live="polite"
+              role="listbox"
+              @mousedown.prevent="handleMouseDown"
+              @mousemove="updateLineSelection"
+              @mouseup="endLineSelection"
+            >
+              <template
+                v-for="(item, index) in visibleItems"
+                :key="`${visibleStartIndex + index}-${item}`"
+              >
+                <li
+                  data-pyro-terminal-line
+                  :class="{ 'selected-line': isLineSelected(visibleStartIndex + index) }"
+                  class="group"
+                >
+                  <div class="flex items-center gap-2">
+                    <UiServersLogLine :log="item" @show-full-log="showFullLogMessage" />
+                    <div @mousedown.stop @click.stop>
+                      <button
+                        v-if="searchInput"
+                        class="jump-button mr-4 flex items-center gap-1 rounded-md bg-bg-blue px-2 py-1 text-xs text-blue transition-all hover:scale-105 active:scale-95"
+                        @mousedown.stop
+                        @click.stop="() => jumpToLine(item)"
+                      >
+                        <RightArrowIcon class="h-3 w-3" />
+                        Jump
+                      </button>
+                    </div>
+                  </div>
+                </li>
+                <li
+                  v-if="
+                    searchInput &&
+                    shouldShowSeparator(visibleStartIndex + index, visibleStartIndex + index + 1)
+                  "
+                  data-pyro-terminal-separator
+                  class="flex h-8 select-none items-center justify-center opacity-50"
+                  aria-hidden="true"
+                >
+                  <div class="h-[1px] w-full bg-contrast opacity-50"></div>
+                  <div class="mx-4 flex flex-row items-center gap-4">
+                    <div class="flex flex-row items-center gap-1">
+                      <div class="size-1 rounded-full bg-contrast opacity-70"></div>
+                      <div class="size-1 rounded-full bg-contrast opacity-70"></div>
+                      <div class="size-1 rounded-full bg-contrast opacity-70"></div>
+                    </div>
+                    <span class="select-none whitespace-pre text-xs text-contrast">
+                      {{
+                        shouldShowSeparator(
+                          visibleStartIndex + index,
+                          visibleStartIndex + index + 1,
+                        )
+                      }}
+                      line{{
+                        shouldShowSeparator(
+                          visibleStartIndex + index,
+                          visibleStartIndex + index + 1,
+                        ) === 1
+                          ? ""
+                          : "s"
+                      }}
+                      between
+                    </span>
+                  </div>
+                  <div class="h-[1px] w-full bg-contrast opacity-50"></div>
+                </li>
+              </template>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="absolute bottom-4 z-[3] w-full"
+        :style="{
+          filter: `drop-shadow(0 8px 12px rgba(0, 0, 0, ${lerp(0.1, 0.5, bottomThreshold)}))`,
+        }"
+      >
+        <slot />
+      </div>
+      <button
+        data-pyro-fullscreen
+        :label="isFullScreen ? 'Exit full screen' : 'Enter full screen'"
+        class="experimental-styles-within absolute right-4 top-4 z-[3] grid h-12 w-12 place-content-center rounded-full border-[1px] border-solid border-button-border bg-bg-raised text-contrast transition-all duration-200 hover:scale-110 active:scale-95"
+        :class="{ hidden: searchInput || hasSelection || isSingleLineSelected }"
+        @click="toggleFullscreen"
+      >
+        <LazyUiServersIconsMinimizeIconVue v-if="isFullScreen" />
+        <LazyUiServersIconsFullscreenIcon v-else />
+      </button>
+
+      <Transition name="fade">
+        <div
+          v-if="hasSelection || isSingleLineSelected"
+          class="absolute right-20 top-4 z-[3] flex flex-row items-center"
+          :class="{ '!right-4': searchInput || hasSelection || isSingleLineSelected }"
+        >
+          <button
+            data-pyro-copy
+            label="Copy selected lines"
+            class="experimental-styles-within flex h-12 flex-row items-center justify-center gap-2 rounded-full border-[1px] border-solid border-button-border bg-bg-raised px-4 text-contrast transition-all duration-200 hover:scale-110 active:scale-95"
+            @click="copySelectedLines"
+          >
+            <CopyIcon class="h-5 w-5" />
+            <span class="">Copy</span>
+          </button>
+          <Transition name="view-button">
+            <button
+              v-if="hasSelection"
+              data-pyro-view
+              label="View selected lines"
+              class="experimental-styles-within ml-2 flex h-12 w-[100px] flex-row items-center justify-center gap-2 rounded-full border-[1px] border-solid border-button-border bg-bg-raised px-4 text-contrast transition-all duration-200 hover:scale-110 active:scale-95"
+              @click="showSelectedLines"
+            >
+              <EyeIcon class="h-5 w-5" />
+              <span class="">View</span>
+            </button>
+          </Transition>
+        </div>
+      </Transition>
+
+      <Transition name="scroll-to-bottom">
+        <button
+          v-if="bottomThreshold > 0 && !isScrolledToBottom"
+          data-pyro-scrolltobottom
+          label="Scroll to bottom"
+          class="scroll-to-bottom-btn experimental-styles-within absolute bottom-[4.5rem] right-4 z-[3] grid h-12 w-12 place-content-center rounded-full border-[1px] border-solid border-button-border bg-bg-raised text-contrast transition-all duration-200 hover:scale-110 active:scale-95"
+          @click="scrollToBottom"
+        >
+          <RightArrowIcon class="rotate-90" />
+          <span class="sr-only">Scroll to bottom</span>
+        </button>
+      </Transition>
+    </div>
+    <NewModal ref="viewLogModal" class="z-[9999]" header="Viewing selected logs">
+      <div class="text-contrast">
+        <pre
+          class="select-text overflow-x-auto whitespace-pre rounded-lg bg-bg font-mono"
+          v-html="processedLogWithLinks"
+        ></pre>
+        <div v-if="detectedLinks.length" class="border-contrast/20 mt-4 border-t pt-4">
+          <h2>Detected Links</h2>
+          <ul class="flex flex-col gap-2">
+            <li v-for="(link, index) in detectedLinks" :key="index">
+              <a
+                :href="link"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="text-sm text-blue hover:underline"
+              >
+                {{ link }}
+              </a>
+            </li>
           </ul>
         </div>
       </div>
-    </div>
-
-    <div
-      class="absolute bottom-4 z-[3] w-full"
-      :style="{
-        filter: `drop-shadow(0 8px 12px rgba(0, 0, 0, ${lerp(0.1, 0.5, bottomThreshold)}))`,
-      }"
-    >
-      <slot />
-    </div>
-    <button
-      data-pyro-fullscreen
-      :label="isFullScreen ? 'Exit full screen' : 'Enter full screen'"
-      class="experimental-styles-within absolute right-4 top-4 z-[3] grid h-12 w-12 place-content-center rounded-lg border-[1px] border-solid border-button-border bg-bg-raised text-contrast transition-all duration-200 hover:scale-110 active:scale-95"
-      @click="toggleFullscreen"
-    >
-      <UiServersPanelTerminalMinimize v-if="isFullScreen" />
-      <UiServersPanelTerminalFullscreen v-else />
-    </button>
-
-    <Transition name="scroll-to-bottom">
-      <button
-        v-if="bottomThreshold > 0 && !isScrolledToBottom"
-        data-pyro-scrolltobottom
-        label="Scroll to bottom"
-        class="scroll-to-bottom-btn experimental-styles-within absolute bottom-[4.5rem] right-4 z-[3] grid h-12 w-12 place-content-center rounded-lg border-[1px] border-solid border-button-border bg-bg-raised text-contrast transition-all duration-200 hover:scale-110 active:scale-95"
-        @click="scrollToBottom"
-      >
-        <RightArrowIcon class="rotate-90" />
-        <span class="sr-only">Scroll to bottom</span>
-      </button>
-    </Transition>
+    </NewModal>
   </div>
 </template>
 
 <script setup lang="ts">
-import { RightArrowIcon } from "@modrinth/assets";
+import { RightArrowIcon, CopyIcon, XIcon, SearchIcon, EyeIcon } from "@modrinth/assets";
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from "vue";
+import { useDebounceFn } from "@vueuse/core";
+import { NewModal } from "@modrinth/ui";
+import ButtonStyled from "@modrinth/ui/src/components/base/ButtonStyled.vue";
+import DOMPurify from "dompurify";
 import { usePyroConsole } from "~/store/console.ts";
 
 const { $cosmetics } = useNuxtApp();
@@ -145,45 +300,49 @@ const props = defineProps<{
   fullScreen: boolean;
 }>();
 
+const BUFFER_SIZE = 5;
+const BATCH_SIZE = 50;
+const LINE_HEIGHT = 32;
+const SEPARATOR_HEIGHT = 32;
+const SCROLL_END_DELAY = 150;
+const progressiveBlurIterations = ref(8);
+
 const pyroConsole = usePyroConsole();
 const consoleOutput = pyroConsole.output;
 
 const scrollContainer = ref<HTMLElement | null>(null);
-const itemHeights = ref<number[]>([]);
-const averageItemHeight = ref(36);
-const bottomThreshold = ref(0);
-const bufferSize = 5;
-const cachedHeights = ref<Map<string, number>>(new Map());
-const isAutoScrolling = ref(false);
 
-const progressiveBlurIterations = ref(8);
-
-const scrollTop = ref(0);
-const clientHeight = ref(0);
 const isFullScreen = ref(props.fullScreen);
 
-const initial = ref(false);
+const initialBatch = ref(false);
+const isInitialLoad = ref(true);
+
+const startY = ref(0);
+const scrollTop = ref(0);
+const clientHeight = ref(0);
+const startScrollTop = ref(0);
+const bottomThreshold = ref(0);
+const isAutoScrolling = ref(false);
 const userHasScrolled = ref(false);
 const isScrolledToBottom = ref(true);
+const scrollEndTimeout = ref<NodeJS.Timeout | null>(null);
+const isScrolling = ref(false);
 
-const handleScrollEvent = () => {
-  handleListScroll();
-};
+const scrollbarTrack = ref<HTMLElement | null>(null);
+const scrollbarThumb = ref<HTMLElement | null>(null);
+const isDragging = ref(false);
 
-const totalHeight = computed(
-  () =>
-    itemHeights.value.reduce((sum, height) => sum + height, 0) ||
-    consoleOutput.value.length * averageItemHeight.value,
-);
+const searchInput = ref("");
 
-watch(totalHeight, () => {
-  if (isScrolledToBottom.value) {
-    scrollToBottom();
-  }
-  if (!initial.value) {
-    initial.value = true;
-  }
-});
+const viewLogModal = ref<InstanceType<typeof NewModal>>();
+const selectedLog = ref("");
+const selectionStart = ref<number | null>(null);
+const selectionEnd = ref<number | null>(null);
+const isSelecting = ref(false);
+const autoScrollSpeed = ref(0);
+const autoScrollInterval = ref<NodeJS.Timeout | null>(null);
+const lastClickIndex = ref<number | null>(null);
+const lastMouseEvent = ref<MouseEvent | null>(null);
 
 const lerp = (start: number, end: number, t: number) => start * (1 - t) + end * t;
 
@@ -218,41 +377,128 @@ const getBlurStyle = (i: number) => {
   };
 };
 
-const getItemOffset = (index: number) => {
-  return itemHeights.value.slice(0, index).reduce((sum, height) => sum + height, 0);
+const updateSearch = useDebounceFn((value: string) => {
+  pyroConsole.setSearchQuery(value);
+
+  selectionStart.value = null;
+  selectionEnd.value = null;
+  lastClickIndex.value = null;
+
+  nextTick(() => {
+    if (!scrollContainer.value) return;
+
+    if (!value) {
+      handleListScroll();
+      return;
+    }
+
+    if (pyroConsole.filteredOutput.value.length > 0) {
+      scrollContainer.value.scrollTop = 0;
+      handleListScroll();
+    }
+  });
+}, 300);
+
+const clearSearch = () => {
+  searchInput.value = "";
+  pyroConsole.setSearchQuery("");
+};
+
+const activeOutput = computed(() => {
+  return searchInput.value ? pyroConsole.filteredOutput.value : consoleOutput.value;
+});
+
+const shouldShowSeparator = (currentIndex: number, nextIndex: number) => {
+  if (!searchInput.value || nextIndex >= activeOutput.value.length) return 0;
+
+  const currentLine = activeOutput.value[currentIndex];
+  const nextLine = activeOutput.value[nextIndex];
+
+  const currentOriginalIndex = consoleOutput.value.indexOf(currentLine);
+  const nextOriginalIndex = consoleOutput.value.indexOf(nextLine);
+
+  const linesBetween = nextOriginalIndex - currentOriginalIndex - 1;
+  return linesBetween > 0 ? linesBetween : 0;
+};
+
+const totalHeight = computed(() => {
+  const baseHeight = activeOutput.value.length * LINE_HEIGHT;
+  if (!searchInput.value) return baseHeight;
+
+  let separatorCount = 0;
+  for (let i = 0; i < activeOutput.value.length - 1; i++) {
+    if (shouldShowSeparator(i, i + 1)) {
+      separatorCount++;
+    }
+  }
+
+  return baseHeight + separatorCount * SEPARATOR_HEIGHT;
+});
+
+const getLineIndexForPosition = (position: number) => {
+  if (!searchInput.value) {
+    return Math.floor(position / LINE_HEIGHT);
+  }
+
+  let accHeight = 0;
+  let index = 0;
+
+  while (index < activeOutput.value.length) {
+    if (accHeight >= position) {
+      break;
+    }
+    accHeight += LINE_HEIGHT;
+    if (shouldShowSeparator(index, index + 1)) {
+      accHeight += SEPARATOR_HEIGHT;
+    }
+    index++;
+  }
+
+  return index;
+};
+
+const getPositionForLineIndex = (index: number) => {
+  if (!searchInput.value) {
+    return index * LINE_HEIGHT;
+  }
+
+  let position = 0;
+  for (let i = 0; i < index; i++) {
+    position += LINE_HEIGHT;
+    if (shouldShowSeparator(i, i + 1)) {
+      position += SEPARATOR_HEIGHT;
+    }
+  }
+
+  return position;
 };
 
 const visibleStartIndex = computed(() => {
-  let index = 0;
-  let offset = 0;
-  while (
-    index < consoleOutput.value.length &&
-    offset < scrollTop.value - bufferSize * averageItemHeight.value
-  ) {
-    offset += itemHeights.value[index] || averageItemHeight.value;
-    index++;
-  }
-  return Math.max(0, index - 1);
+  const rawPosition = Math.max(0, scrollTop.value - LINE_HEIGHT * BUFFER_SIZE);
+  return getLineIndexForPosition(rawPosition);
 });
 
 const visibleEndIndex = computed(() => {
-  let index = visibleStartIndex.value;
-  let offset = getItemOffset(index);
-  while (
-    index < consoleOutput.value.length &&
-    offset < scrollTop.value + clientHeight.value + bufferSize * averageItemHeight.value
-  ) {
-    offset += itemHeights.value[index] || averageItemHeight.value;
-    index++;
-  }
-  return Math.min(consoleOutput.value.length - 1, index);
+  const rawPosition = scrollTop.value + clientHeight.value + LINE_HEIGHT * BUFFER_SIZE;
+  return Math.min(activeOutput.value.length - 1, getLineIndexForPosition(rawPosition));
 });
 
-const visibleItems = computed(() =>
-  consoleOutput.value.slice(visibleStartIndex.value, visibleEndIndex.value + 1),
-);
+const offsetY = computed(() => {
+  return getPositionForLineIndex(visibleStartIndex.value);
+});
 
-const offsetY = computed(() => getItemOffset(visibleStartIndex.value));
+const visibleItems = computed(() => {
+  const start = visibleStartIndex.value;
+  const end = visibleEndIndex.value;
+  const items = [];
+
+  for (let i = start; i <= end; i += BATCH_SIZE) {
+    const chunk = activeOutput.value.slice(i, Math.min(i + BATCH_SIZE, end + 1));
+    items.push(...chunk);
+  }
+
+  return items;
+});
 
 const handleListScroll = () => {
   if (!scrollContainer.value) return;
@@ -264,6 +510,21 @@ const handleListScroll = () => {
   const scrollHeight = container.scrollHeight;
   const threshold = 32;
 
+  isScrolling.value = true;
+
+  if (scrollEndTimeout.value) {
+    clearTimeout(scrollEndTimeout.value);
+  }
+
+  scrollEndTimeout.value = setTimeout(() => {
+    if (!isSelecting.value) {
+      isScrolling.value = false;
+    }
+    const finalPosition = scrollHeight - container.scrollTop - clientHeight.value;
+    isScrolledToBottom.value = finalPosition <= threshold;
+    bottomThreshold.value = Math.min(1, finalPosition / 256);
+  }, SCROLL_END_DELAY);
+
   isScrolledToBottom.value = scrollHeight - scrollTop.value - clientHeight.value <= threshold;
 
   if (!isScrolledToBottom.value && !isAutoScrolling.value) {
@@ -271,23 +532,15 @@ const handleListScroll = () => {
   }
 
   bottomThreshold.value = Math.min(1, (scrollHeight - scrollTop.value - clientHeight.value) / 256);
-};
 
-const updateItemHeights = async () => {
-  if (!scrollContainer.value) return;
-
-  await nextTick();
-  const items =
-    scrollContainer.value?.querySelectorAll("[data-pyro-terminal-virtual-list] li") || [];
-  items.forEach((el, idx) => {
-    const index = visibleStartIndex.value + idx;
-    const height = el.getBoundingClientRect().height;
-    itemHeights.value[index] = height;
-    const content = consoleOutput.value[index];
-    if (content) {
-      cachedHeights.value.set(content, height);
-    }
-  });
+  if (searchInput.value) {
+    nextTick(() => {
+      container.style.transform = "translateZ(0)";
+      requestAnimationFrame(() => {
+        container.style.transform = "";
+      });
+    });
+  }
 };
 
 const updateClientHeight = () => {
@@ -318,12 +571,6 @@ const scrollToBottom = () => {
   });
 };
 
-const scrollbarTrack = ref<HTMLElement | null>(null);
-const scrollbarThumb = ref<HTMLElement | null>(null);
-const isDragging = ref(false);
-const startY = ref(0);
-const startScrollTop = ref(0);
-
 const getThumbHeight = () => {
   if (!scrollContainer.value || !scrollbarTrack.value) return 30;
 
@@ -404,40 +651,40 @@ const handleTrackClick = (event: MouseEvent) => {
     return;
 
   const trackRect = scrollbarTrack.value.getBoundingClientRect();
-  const thumbHeight = getThumbHeight();
+  const trackHeight = trackRect.height;
+  const clickRatio = (event.clientY - trackRect.top) / trackHeight;
 
-  const clickOffset = event.clientY - trackRect.top;
+  const maxScroll = scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight;
+  const newScrollTop = clickRatio * maxScroll;
 
-  const currentThumbPosition = getThumbPosition();
-  const thumbCenterPosition = currentThumbPosition + thumbHeight / 2;
-  const scrollAmount = clientHeight.value * (clickOffset < thumbCenterPosition ? -1 : 1);
+  scrollContainer.value.scrollTop = Math.max(0, Math.min(newScrollTop, maxScroll));
+};
 
-  const newScrollTop = Math.max(
-    0,
-    Math.min(
-      scrollContainer.value.scrollTop + scrollAmount,
-      scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight,
-    ),
-  );
-
-  scrollContainer.value.scrollTop = newScrollTop;
+const setBodyScroll = (enabled: boolean) => {
+  if (enabled) {
+    document.body.style.overflow = "";
+    document.body.style.position = "";
+    document.body.style.width = "";
+  } else {
+    document.body.style.overflow = "hidden";
+    document.body.style.position = "fixed";
+    document.body.style.width = "100%";
+  }
 };
 
 const enterFullScreen = () => {
   isFullScreen.value = true;
-  document.body.style.overflow = "hidden";
+  setBodyScroll(false);
   nextTick(() => {
     updateClientHeight();
-    updateItemHeights();
   });
 };
 
 const exitFullScreen = () => {
   isFullScreen.value = false;
-  document.body.style.overflow = "";
+  setBodyScroll(true);
   nextTick(() => {
     updateClientHeight();
-    updateItemHeights();
   });
 };
 
@@ -450,80 +697,388 @@ const toggleFullscreen = () => {
 };
 
 const handleKeydown = (event: KeyboardEvent) => {
-  if (event.key === "Escape" && isFullScreen.value) {
-    exitFullScreen();
+  if (event.key === "Escape") {
+    if (selectionStart.value !== null || selectionEnd.value !== null) {
+      selectionStart.value = null;
+      selectionEnd.value = null;
+      lastClickIndex.value = null;
+      return;
+    }
+
+    if (searchInput.value) {
+      clearSearch();
+      return;
+    }
+
+    if (isFullScreen.value) {
+      exitFullScreen();
+    }
   }
 };
 
-const initializeTerminal = async () => {
+const handleGlobalMouseUp = () => {
+  if (isSelecting.value) {
+    endLineSelection();
+  }
+};
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (!event.target || !(event.target instanceof Node)) return;
+  const terminalElement = document.querySelector("[data-pyro-terminal]");
+  if (!terminalElement || !terminalElement.contains(event.target)) {
+    selectionStart.value = null;
+    selectionEnd.value = null;
+    lastClickIndex.value = null;
+  }
+};
+
+const initializeTerminal = () => {
   if (!scrollContainer.value) return;
 
   updateClientHeight();
 
-  const initialHeights = consoleOutput.value.map(
-    (content) => cachedHeights.value.get(content) || averageItemHeight.value,
-  );
-  itemHeights.value = initialHeights;
-
-  await nextTick();
-  await updateItemHeights();
-  await nextTick();
-
-  const container = scrollContainer.value;
-  container.scrollTop = container.scrollHeight;
-
-  handleListScroll();
-  initial.value = true;
+  nextTick(() => {
+    nextTick(() => {
+      const container = scrollContainer.value;
+      if (container) {
+        container.scrollTop = container.scrollHeight;
+        handleListScroll();
+        initialBatch.value = true;
+      }
+    });
+  });
 };
 
-onMounted(async () => {
-  await initializeTerminal();
+const showFullLogMessage = (log: string) => {
+  selectedLog.value = log;
+  viewLogModal.value?.show();
+};
 
-  window.addEventListener("resize", updateClientHeight);
-  window.addEventListener("keydown", handleKeydown);
-});
+const showSelectedLines = () => {
+  if (!hasSelection.value) return;
 
-onUnmounted(() => {
-  window.removeEventListener("resize", updateClientHeight);
-  window.removeEventListener("keydown", handleKeydown);
-  stopDragging();
-});
+  const start = Math.min(selectionStart.value!, selectionEnd.value!);
+  const end = Math.max(selectionStart.value!, selectionEnd.value!);
+  const selectedLines = activeOutput.value.slice(start, end + 1);
 
-watch(
-  () => consoleOutput.value,
-  async (newOutput) => {
-    const newItemsCount = newOutput.length - itemHeights.value.length;
+  selectedLog.value = selectedLines.join("\n");
+  viewLogModal.value?.show();
+};
 
-    if (newItemsCount > 0) {
-      const shouldScroll = isScrolledToBottom.value || !userHasScrolled.value;
-
-      const newHeights = Array(newItemsCount)
-        .fill(0)
-        .map((_, i) => {
-          const index = itemHeights.value.length + i;
-          const content = newOutput[index];
-          return cachedHeights.value.get(content) || averageItemHeight.value;
-        });
-
-      itemHeights.value.push(...newHeights);
-
-      if (shouldScroll) {
-        await nextTick();
-        scrollToBottom();
-
-        await nextTick();
-        await updateItemHeights();
-        scrollToBottom();
-      }
-    }
-  },
-  { deep: true },
-);
 const virtualListStyle = computed(() => ({
   transform: `translateY(${offsetY.value}px)`,
 }));
 
-watch([visibleStartIndex, visibleEndIndex], updateItemHeights);
+const isLineSelected = (index: number) => {
+  if (selectionStart.value === null || selectionEnd.value === null) return false;
+  const start = Math.min(selectionStart.value, selectionEnd.value);
+  const end = Math.max(selectionStart.value, selectionEnd.value);
+  return index >= start && index <= end;
+};
+
+const handleContextMenu = () => {
+  if (isSelecting.value) {
+    endLineSelection();
+  }
+};
+
+const handleMouseDown = (event: MouseEvent) => {
+  if (event.button === 2) {
+    if (isSelecting.value) {
+      endLineSelection();
+    }
+    return;
+  }
+
+  const lineIndex = getLineIndexFromEvent(event);
+  if (lineIndex === null) return;
+
+  if (event.shiftKey && lastClickIndex.value !== null) {
+    selectionStart.value = lastClickIndex.value;
+    selectionEnd.value = lineIndex;
+    isSelecting.value = false;
+  } else {
+    isSelecting.value = true;
+    selectionStart.value = lineIndex;
+    selectionEnd.value = lineIndex;
+    lastClickIndex.value = lineIndex;
+    startAutoScroll();
+  }
+};
+
+const updateLineSelection = (event: MouseEvent) => {
+  if (!isSelecting.value) return;
+
+  const lineIndex = getLineIndexFromEvent(event);
+  if (lineIndex === null) return;
+
+  selectionEnd.value = lineIndex;
+  lastMouseEvent.value = event;
+
+  const rect = scrollContainer.value?.getBoundingClientRect();
+  if (!rect) return;
+
+  const threshold = 80;
+  const y = event.clientY;
+
+  const distanceFromTop = Math.max(0, threshold - (y - rect.top));
+  const distanceFromBottom = Math.max(0, threshold - (rect.bottom - y));
+
+  if (distanceFromTop > 0) {
+    autoScrollSpeed.value = -Math.min(20, distanceFromTop / 2);
+  } else if (distanceFromBottom > 0) {
+    autoScrollSpeed.value = Math.min(20, distanceFromBottom / 2);
+  } else {
+    autoScrollSpeed.value = 0;
+  }
+};
+
+const endLineSelection = () => {
+  if (!isSelecting.value) return;
+  isSelecting.value = false;
+  stopAutoScroll();
+};
+
+const getLineIndexFromEvent = (event: MouseEvent): number | null => {
+  if (!scrollContainer.value) return null;
+
+  const rect = scrollContainer.value.getBoundingClientRect();
+  const rawY = event.clientY - rect.top + scrollContainer.value.scrollTop;
+
+  if (searchInput.value) {
+    const adjustedY = Math.max(0, rawY - 48);
+    return Math.max(0, Math.min(getLineIndexForPosition(adjustedY), activeOutput.value.length - 1));
+  }
+
+  const adjustedY = Math.max(0, rawY - 24);
+  return Math.floor(adjustedY / LINE_HEIGHT);
+};
+
+const startAutoScroll = () => {
+  if (autoScrollInterval.value) return;
+  autoScrollInterval.value = setInterval(() => {
+    if (!scrollContainer.value || autoScrollSpeed.value === 0) return;
+    scrollContainer.value.scrollTop += autoScrollSpeed.value;
+    if (lastMouseEvent.value) {
+      updateLineSelection(lastMouseEvent.value);
+    }
+  }, 16);
+};
+
+const stopAutoScroll = () => {
+  if (autoScrollInterval.value) {
+    clearInterval(autoScrollInterval.value);
+    autoScrollInterval.value = null;
+  }
+  autoScrollSpeed.value = 0;
+};
+
+const handleCopy = (event: KeyboardEvent) => {
+  if (!event.metaKey && !event.ctrlKey) return;
+  if (event.key !== "c") return;
+  if (selectionStart.value === null || selectionEnd.value === null) return;
+
+  event.preventDefault();
+
+  const start = Math.min(selectionStart.value, selectionEnd.value);
+  const end = Math.max(selectionStart.value, selectionEnd.value);
+  const selectedLines = activeOutput.value.slice(start, end + 1);
+
+  navigator.clipboard.writeText(selectedLines.join("\n"));
+
+  selectionStart.value = null;
+  selectionEnd.value = null;
+  lastClickIndex.value = null;
+};
+
+const hasSelection = computed(
+  () =>
+    selectionStart.value !== null &&
+    selectionEnd.value !== null &&
+    selectionStart.value !== selectionEnd.value,
+);
+
+const isSingleLineSelected = computed(
+  () =>
+    selectionStart.value !== null &&
+    selectionEnd.value !== null &&
+    selectionStart.value === selectionEnd.value,
+);
+
+const copySelectedLines = () => {
+  if (!hasSelection.value && !isSingleLineSelected.value) return;
+
+  let selectedLines;
+  if (isSingleLineSelected.value) {
+    const index = selectionStart.value!;
+    selectedLines = [activeOutput.value[index]];
+  } else {
+    const start = Math.min(selectionStart.value!, selectionEnd.value!);
+    const end = Math.max(selectionStart.value!, selectionEnd.value!);
+    selectedLines = activeOutput.value.slice(start, end + 1);
+  }
+
+  navigator.clipboard.writeText(selectedLines.join("\n"));
+
+  selectionStart.value = null;
+  selectionEnd.value = null;
+  lastClickIndex.value = null;
+};
+
+const getSelectionPosition = () => {
+  if (!hasSelection.value || !scrollContainer.value) return { start: 0, end: 0 };
+
+  const start = Math.min(selectionStart.value!, selectionEnd.value!);
+  const end = Math.max(selectionStart.value!, selectionEnd.value!);
+
+  const totalLines = activeOutput.value.length;
+
+  return {
+    start: (start / totalLines) * 100,
+    end: ((end + 1) / totalLines) * 100,
+  };
+};
+
+const jumpToLine = (line: string, event?: MouseEvent) => {
+  event?.preventDefault();
+  event?.stopPropagation();
+
+  const index = pyroConsole.findLineIndex(line);
+  if (index === -1) return;
+
+  const filteredLineIndex = pyroConsole.filteredOutput.value.indexOf(line);
+  if (filteredLineIndex === -1) return;
+
+  let filteredTargetPosition = 0;
+  for (let i = 0; i < filteredLineIndex; i++) {
+    filteredTargetPosition += LINE_HEIGHT;
+    if (shouldShowSeparator(i, i + 1)) {
+      filteredTargetPosition += SEPARATOR_HEIGHT;
+    }
+  }
+
+  const viewportHeight = scrollContainer.value?.clientHeight ?? 0;
+  const currentScrollPosition = scrollContainer.value?.scrollTop ?? 0;
+  const relativePosition = (filteredTargetPosition - currentScrollPosition) / viewportHeight;
+
+  const targetLineRelativeOffset = relativePosition;
+  const targetLine = line;
+
+  clearSearch();
+
+  nextTick(() => {
+    if (!scrollContainer.value) return;
+
+    const targetPosition = index * LINE_HEIGHT;
+    const containerHeight = scrollContainer.value.clientHeight;
+    const targetScrollTop = Math.max(
+      0,
+      targetPosition - containerHeight * targetLineRelativeOffset,
+    );
+
+    scrollContainer.value.scrollTop = targetScrollTop;
+
+    requestAnimationFrame(() => {
+      handleListScroll();
+
+      const elements = scrollContainer.value?.getElementsByTagName("li");
+      if (!elements) return;
+
+      const targetElement = Array.from(elements).find(
+        (el) =>
+          el.textContent?.includes(targetLine) && !el.hasAttribute("data-pyro-terminal-separator"),
+      );
+
+      if (targetElement) {
+        targetElement.classList.add("jumped-line");
+        requestAnimationFrame(() => {
+          targetElement.classList.add("jumped-line-active");
+          setTimeout(() => {
+            targetElement.classList.remove("jumped-line-active");
+            targetElement.classList.remove("jumped-line");
+          }, 4000);
+        });
+      }
+    });
+  });
+};
+
+const sanitizeUrl = (url: string): string => {
+  try {
+    const parsed = new URL(url);
+    if (!["http:", "https:"].includes(parsed.protocol)) {
+      return "#";
+    }
+    return parsed.toString();
+  } catch {
+    return "#";
+  }
+};
+
+const detectedLinks = computed(() => {
+  const urlRegex = /(https?:\/\/[^\s,<]+(?=[,\s<]|$))/g;
+  const matches = [...selectedLog.value.matchAll(urlRegex)].map((match) => match[0]);
+  return matches.filter((url) => sanitizeUrl(url) !== "#");
+});
+
+const processedLogWithLinks = computed(() => {
+  const urlRegex = /(https?:\/\/[^\s,<]+(?=[,\s<]|$))/g;
+  const sanitizedLog = DOMPurify.sanitize(selectedLog.value, {
+    ALLOWED_TAGS: [],
+    ALLOWED_ATTR: [],
+  });
+
+  return sanitizedLog.replace(urlRegex, (url) => {
+    const safeUrl = sanitizeUrl(url);
+    if (safeUrl === "#") return url;
+    return `<a href="${safeUrl}" target="_blank" rel="noopener noreferrer nofollow" class="text-blue hover:underline">${url}</a>`;
+  });
+});
+
+watch(
+  () => pyroConsole.filteredOutput.value,
+  () => {
+    nextTick(() => {
+      handleListScroll();
+    });
+  },
+);
+
+watch(searchInput, (value) => {
+  updateSearch(value);
+});
+
+watch(
+  () => consoleOutput.value,
+  (newOutput, oldOutput) => {
+    if (!oldOutput || newOutput.length <= oldOutput.length) return;
+
+    const shouldScroll = isScrolledToBottom.value || !userHasScrolled.value || isInitialLoad.value;
+
+    if (shouldScroll) {
+      if (isInitialLoad.value) {
+        setTimeout(() => {
+          scrollToBottom();
+          isInitialLoad.value = false;
+        }, 100);
+      } else {
+        nextTick(scrollToBottom);
+      }
+    }
+  },
+  { flush: "post" },
+);
+
+watch(
+  () => pyroConsole.filteredOutput.value,
+  () => {
+    if (searchInput.value && scrollContainer.value) {
+      nextTick(() => {
+        handleListScroll();
+      });
+    }
+  },
+);
 
 watch(
   () => props.fullScreen,
@@ -531,7 +1086,6 @@ watch(
     isFullScreen.value = newValue;
     nextTick(() => {
       updateClientHeight();
-      updateItemHeights();
     });
   },
 );
@@ -539,18 +1093,40 @@ watch(
 watch(isFullScreen, () => {
   nextTick(() => {
     updateClientHeight();
-    updateItemHeights();
   });
 });
 
-watch(
-  itemHeights,
-  () => {
-    const totalHeight = itemHeights.value.reduce((sum, height) => sum + height, 0);
-    averageItemHeight.value = totalHeight / itemHeights.value.length || averageItemHeight.value;
-  },
-  { deep: true },
-);
+onMounted(() => {
+  initializeTerminal();
+
+  window.addEventListener("resize", updateClientHeight);
+  window.addEventListener("keydown", handleKeydown);
+  window.addEventListener("mouseup", handleGlobalMouseUp);
+  window.addEventListener("contextmenu", handleContextMenu);
+  window.addEventListener("click", handleClickOutside);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", updateClientHeight);
+  window.removeEventListener("keydown", handleKeydown);
+  window.removeEventListener("mouseup", handleGlobalMouseUp);
+  window.removeEventListener("contextmenu", handleContextMenu);
+  window.removeEventListener("click", handleClickOutside);
+  stopDragging();
+  setBodyScroll(true);
+  if (scrollEndTimeout.value) {
+    clearTimeout(scrollEndTimeout.value);
+  }
+});
+
+onMounted(() => {
+  window.addEventListener("keydown", handleCopy);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("keydown", handleCopy);
+  stopAutoScroll();
+});
 </script>
 
 <style scoped>
@@ -684,4 +1260,139 @@ html.dark-mode .progressive-gradient {
 .selection-in-progress {
   pointer-events: none;
 }
+
+[data-pyro-terminal-virtual-list] {
+  will-change: transform;
+  transform: translateZ(0);
+}
+
+[data-pyro-terminal-scrollbar-thumb] {
+  will-change: transform;
+  transform: translateZ(0);
+}
+
+[data-pyro-terminal-virtual-list] li {
+  height: 32px;
+  transition: background-color 0.1s ease;
+}
+
+.selected-line {
+  background: color-mix(in srgb, var(--color-blue) 20%, transparent) !important;
+  position: relative;
+}
+
+.selected-line::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: -2px;
+  bottom: -2px;
+  width: 3px;
+  border-radius: 0.5rem;
+  background: var(--color-blue);
+}
+
+.selected-line:hover {
+  background: color-mix(in srgb, var(--color-blue) 24%, transparent) !important;
+}
+
+[data-pyro-terminal-virtual-list] li {
+  height: 32px;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 200ms ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.scrolling-active {
+  pointer-events: none;
+}
+
+.scrolling-active li {
+  pointer-events: none;
+}
+
+[data-pyro-terminal-scrollbar-track] {
+  border-radius: 24px;
+}
+
+[data-pyro-terminal-scrollbar-thumb] {
+  background: color-mix(in srgb, var(--color-contrast) 40%, transparent);
+}
+
+.view-button-enter-active {
+  transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  width: 100px;
+  margin-left: 0.5rem;
+  overflow: hidden;
+}
+
+.view-button-leave-active {
+  transition: all 200ms cubic-bezier(0.4, 0, 1, 1);
+  overflow: hidden;
+}
+
+.view-button-enter-from,
+.view-button-leave-to {
+  opacity: 0;
+  width: 0;
+  margin-left: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.view-button-enter-active,
+.view-button-leave-active {
+  transition: all 200ms ease;
+  width: 100px;
+  margin-left: 0.5rem;
+}
+
+.view-button-enter-from,
+.view-button-leave-to {
+  opacity: 0;
+  width: 0;
+  margin-left: 0;
+}
+
+.jumped-line {
+  position: relative;
+  z-index: 1;
+}
+
+.jumped-line-active {
+  animation: highlight-jump 2s ease;
+}
+
+@keyframes highlight-jump {
+  0% {
+    background: transparent;
+  }
+  15%,
+  85% {
+    background: color-mix(in srgb, var(--color-blue) 15%, transparent);
+  }
+  100% {
+    background: transparent;
+  }
+}
+
+.jump-button {
+  opacity: 0.4;
+  transition: all 0.2s ease;
+}
+
+.group:hover .jump-button {
+  opacity: 0.8;
+}
+
+.group:hover .jump-button:hover {
+  opacity: 1;
+}
 </style>
diff --git a/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue b/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
new file mode 100644
index 000000000..ed15a3b5c
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
@@ -0,0 +1,164 @@
+<template>
+  <NewModal
+    ref="modal"
+    :header="'Changing ' + props.project?.title + ' version'"
+    @hide="onHide"
+    @show="onShow"
+  >
+    <div class="flex flex-col gap-4 md:w-[600px]">
+      <div class="flex flex-col gap-2">
+        <p class="m-0">
+          Select the version of {{ props.project?.title || "the modpack" }} you want to install on
+          your server.
+        </p>
+        <p v-if="props.currentVersion" class="m-0 text-sm text-secondary">
+          Currently installed: {{ props.currentVersion.version_number }}
+        </p>
+      </div>
+
+      <div class="flex w-full flex-col gap-4">
+        <UiServersTeleportDropdownMenu
+          v-if="props.versions?.length"
+          v-model="selectedVersion"
+          :options="versionOptions"
+          placeholder="Select version..."
+          name="version"
+          class="w-full max-w-full"
+        />
+
+        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
+          <div class="flex w-full flex-row items-center justify-between">
+            <label class="w-full text-lg font-bold text-contrast" for="modpack-hard-reset">
+              Erase all data
+            </label>
+            <input
+              id="modpack-hard-reset"
+              v-model="hardReset"
+              class="switch stylized-toggle shrink-0"
+              type="checkbox"
+            />
+          </div>
+          <div>
+            If enabled, existing mods, worlds, and configurations, will be deleted before installing
+            the new modpack version.
+          </div>
+        </div>
+
+        <div class="mt-4 flex justify-start gap-4">
+          <ButtonStyled :color="hardReset ? 'red' : 'brand'">
+            <button
+              :disabled="isLoading || !selectedVersion || props.serverStatus === 'installing'"
+              @click="handleReinstall"
+            >
+              <DownloadIcon class="size-4" />
+              {{ isLoading ? "Installing..." : hardReset ? "Erase and install" : "Install" }}
+            </button>
+          </ButtonStyled>
+          <ButtonStyled>
+            <button :disabled="isLoading" @click="hide">
+              <XIcon />
+              Cancel
+            </button>
+          </ButtonStyled>
+        </div>
+      </div>
+    </div>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { DownloadIcon, XIcon } from "@modrinth/assets";
+import type { Server } from "~/composables/pyroServers";
+
+const props = defineProps<{
+  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  project: any;
+  versions: any[];
+  currentVersion?: any;
+  currentVersionId?: string;
+  serverStatus?: string;
+}>();
+
+const emit = defineEmits<{
+  reinstall: [any?];
+}>();
+
+const modal = ref();
+const hardReset = ref(false);
+const isLoading = ref(false);
+const selectedVersion = ref("");
+
+const versionOptions = computed(() => props.versions?.map((v) => v.version_number) || []);
+
+const handleReinstall = async () => {
+  if (!selectedVersion.value || !props.project?.id) return;
+
+  isLoading.value = true;
+  try {
+    const versionId = props.versions.find((v) => v.version_number === selectedVersion.value)?.id;
+
+    await props.server.general?.reinstall(
+      props.server.serverId,
+      false,
+      props.project.id,
+      versionId,
+      undefined,
+      hardReset.value,
+    );
+
+    emit("reinstall");
+    hide();
+  } catch (error) {
+    if (error instanceof PyroFetchError && error.statusCode === 429) {
+      addNotification({
+        group: "server",
+        title: "Cannot reinstall server",
+        text: "You are being rate limited. Please try again later.",
+        type: "error",
+      });
+    } else {
+      addNotification({
+        group: "server",
+        title: "Reinstall Failed",
+        text: "An unexpected error occurred while reinstalling. Please try again later.",
+        type: "error",
+      });
+    }
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+watch(
+  () => props.serverStatus,
+  (newStatus) => {
+    if (newStatus === "installing") {
+      hide();
+    }
+  },
+);
+
+const onShow = () => {
+  hardReset.value = false;
+  selectedVersion.value =
+    props.currentVersion?.version_number ?? props.versions?.[0]?.version_number ?? "";
+};
+
+const onHide = () => {
+  hardReset.value = false;
+  selectedVersion.value = "";
+  isLoading.value = false;
+};
+
+const show = () => modal.value?.show();
+const hide = () => modal.value?.hide();
+
+defineExpose({ show, hide });
+</script>
+
+<style scoped>
+.stylized-toggle:checked::after {
+  background: var(--color-accent-contrast) !important;
+}
+</style>
diff --git a/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue b/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue
new file mode 100644
index 000000000..df5bdb964
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue
@@ -0,0 +1,281 @@
+<template>
+  <NewModal ref="mrpackModal" header="Uploading mrpack" @hide="onHide" @show="onShow">
+    <div class="flex flex-col gap-4 md:w-[600px]">
+      <p
+        v-if="isMrpackModalSecondPhase"
+        :style="{
+          lineHeight: isMrpackModalSecondPhase ? '1.5' : undefined,
+          marginBottom: isMrpackModalSecondPhase ? '-12px' : '0',
+          marginTop: isMrpackModalSecondPhase ? '-4px' : '-2px',
+        }"
+      >
+        This will reinstall your server and erase all data. You may want to back up your server
+        before proceeding. Are you sure you want to continue?
+      </p>
+      <div v-if="!isMrpackModalSecondPhase" class="flex flex-col gap-4">
+        <div class="mx-auto flex flex-row items-center gap-4">
+          <div
+            class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-button-bg shadow-sm"
+          >
+            <UploadIcon class="size-10" />
+          </div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="size-10"
+          >
+            <path d="M5 9v6" />
+            <path d="M9 9h3V5l7 7-7 7v-4H9V9z" />
+          </svg>
+          <div
+            class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-table-alternateRow shadow-sm"
+          >
+            <ServerIcon class="size-10" />
+          </div>
+        </div>
+        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
+          <div class="text-sm font-bold text-contrast">Upload mrpack</div>
+          <input
+            type="file"
+            accept=".mrpack"
+            class=""
+            :disabled="isLoading"
+            @change="uploadMrpack"
+          />
+        </div>
+
+        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
+          <div class="flex w-full flex-row items-center justify-between">
+            <label class="w-full text-lg font-bold text-contrast" for="hard-reset">
+              Erase all data
+            </label>
+            <input
+              id="hard-reset"
+              v-model="hardReset"
+              class="switch stylized-toggle shrink-0"
+              type="checkbox"
+            />
+          </div>
+          <div>
+            Removes all data on your server, including your worlds, mods, and configuration files,
+            then reinstalls it with the selected version.
+          </div>
+        </div>
+
+        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
+          <div class="flex w-full flex-row items-center justify-between">
+            <label class="w-full text-lg font-bold text-contrast" for="backup-server-mrpack">
+              Backup server
+            </label>
+            <input
+              id="backup-server-mrpack"
+              v-model="backupServer"
+              class="switch stylized-toggle shrink-0"
+              type="checkbox"
+            />
+          </div>
+          <div>Creates a backup of your server before proceeding.</div>
+        </div>
+      </div>
+      <div class="mt-4 flex justify-start gap-4">
+        <ButtonStyled :color="isDangerous ? 'red' : 'brand'">
+          <button :disabled="canInstall" @click="handleReinstall">
+            <RightArrowIcon />
+            {{
+              isBackingUp
+                ? "Backing up..."
+                : isMrpackModalSecondPhase
+                  ? "Erase and install"
+                  : loadingServerCheck
+                    ? "Loading..."
+                    : isDangerous
+                      ? "Erase and install"
+                      : "Install"
+            }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button
+            :disabled="isLoading"
+            @click="
+              if (isMrpackModalSecondPhase) {
+                isMrpackModalSecondPhase = false;
+              } else {
+                hide();
+              }
+            "
+          >
+            <XIcon />
+            {{ isMrpackModalSecondPhase ? "Go back" : "Cancel" }}
+          </button>
+        </ButtonStyled>
+      </div>
+    </div>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { UploadIcon, RightArrowIcon, XIcon, ServerIcon } from "@modrinth/assets";
+import type { Server } from "~/composables/pyroServers";
+
+const props = defineProps<{
+  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+}>();
+
+const emit = defineEmits<{
+  reinstall: [any?];
+}>();
+
+const mrpackModal = ref();
+const isMrpackModalSecondPhase = ref(false);
+const hardReset = ref(false);
+const backupServer = ref(false);
+const isLoading = ref(false);
+const isBackingUp = ref(false);
+const loadingServerCheck = ref(false);
+const mrpackFile = ref<File | null>(null);
+
+const isDangerous = computed(() => hardReset.value);
+const canInstall = computed(() => !mrpackFile.value || isLoading.value || loadingServerCheck.value);
+
+const uploadMrpack = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  if (!target.files || target.files.length === 0) {
+    return;
+  }
+  mrpackFile.value = target.files[0];
+};
+
+const performBackup = async (): Promise<boolean> => {
+  try {
+    const date = new Date();
+    const format = date.toLocaleString(navigator.language || "en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      second: "numeric",
+      timeZoneName: "short",
+    });
+    const backupName = `Reinstallation - ${format}`;
+    isLoading.value = true;
+    const backupId = await props.server.backups?.create(backupName);
+    isBackingUp.value = true;
+    let attempts = 0;
+    while (true) {
+      attempts++;
+      if (attempts > 100) {
+        addNotification({
+          group: "server",
+          title: "Backup Failed",
+          text: "An unexpected error occurred while backing up. Please try again later.",
+        });
+        return false;
+      }
+      await props.server.refresh(["backups"]);
+      const backups = await props.server.backups?.data;
+      const backup = backupId ? backups?.find((x) => x.id === backupId) : undefined;
+      if (backup && !backup.ongoing) {
+        isBackingUp.value = false;
+        break;
+      }
+      await new Promise((resolve) => setTimeout(resolve, 5000));
+    }
+    return true;
+  } catch {
+    addNotification({
+      group: "server",
+      title: "Backup Failed",
+      text: "An unexpected error occurred while backing up. Please try again later.",
+    });
+    return false;
+  }
+};
+
+const handleReinstall = async () => {
+  if (hardReset.value && !backupServer.value && !isMrpackModalSecondPhase.value) {
+    isMrpackModalSecondPhase.value = true;
+    return;
+  }
+
+  if (backupServer.value && !(await performBackup())) {
+    isLoading.value = false;
+    return;
+  }
+
+  isLoading.value = true;
+
+  try {
+    if (!mrpackFile.value) {
+      throw new Error("No mrpack file selected");
+    }
+
+    const mrpack = new File([mrpackFile.value], mrpackFile.value.name, {
+      type: mrpackFile.value.type,
+    });
+
+    await props.server.general?.reinstallFromMrpack(mrpack, hardReset.value);
+
+    emit("reinstall", {
+      loader: "mrpack",
+      lVersion: "",
+      mVersion: "",
+    });
+
+    await nextTick();
+    window.scrollTo(0, 0);
+    hide();
+  } catch (error) {
+    if (error instanceof PyroFetchError && error.statusCode === 429) {
+      addNotification({
+        group: "server",
+        title: "Cannot reinstall server",
+        text: "You are being rate limited. Please try again later.",
+        type: "error",
+      });
+    } else {
+      addNotification({
+        group: "server",
+        title: "Reinstall Failed",
+        text: "An unexpected error occurred while reinstalling. Please try again later.",
+        type: "error",
+      });
+    }
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const onShow = () => {
+  hardReset.value = false;
+  backupServer.value = false;
+  isMrpackModalSecondPhase.value = false;
+  loadingServerCheck.value = false;
+  isLoading.value = false;
+  mrpackFile.value = null;
+};
+
+const onHide = () => {
+  onShow();
+};
+
+const show = () => mrpackModal.value?.show();
+const hide = () => mrpackModal.value?.hide();
+
+defineExpose({ show, hide });
+</script>
+
+<style scoped>
+.stylized-toggle:checked::after {
+  background: var(--color-accent-contrast) !important;
+}
+</style>
diff --git a/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue b/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
new file mode 100644
index 000000000..a7dc1083a
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
@@ -0,0 +1,551 @@
+<template>
+  <NewModal
+    ref="versionSelectModal"
+    :header="
+      isSecondPhase
+        ? 'Confirming reinstallation'
+        : `${props.currentLoader === selectedLoader ? 'Reinstalling' : 'Installing'}
+      ${selectedLoader.toLowerCase() === 'vanilla' ? 'Vanilla Minecraft' : selectedLoader}`
+    "
+    @hide="onHide"
+    @show="onShow"
+  >
+    <div class="flex flex-col gap-4 md:w-[600px]">
+      <p
+        v-if="isSecondPhase"
+        :style="{
+          lineHeight: isSecondPhase ? '1.5' : undefined,
+          marginBottom: isSecondPhase ? '-12px' : '0',
+          marginTop: isSecondPhase ? '-4px' : '-2px',
+        }"
+      >
+        {{
+          backupServer
+            ? "A backup will be created before proceeding with the reinstallation, then all data will be erased from your server. Are you sure you want to continue?"
+            : "This will reinstall your server and erase all data. Are you sure you want to continue?"
+        }}
+      </p>
+      <div v-if="!isSecondPhase" class="flex flex-col gap-4">
+        <div class="mx-auto flex flex-row items-center gap-4">
+          <div
+            class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-button-bg shadow-sm"
+          >
+            <UiServersIconsLoaderIcon class="size-10" :loader="selectedLoader" />
+          </div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="size-10"
+          >
+            <path d="M5 9v6" />
+            <path d="M9 9h3V5l7 7-7 7v-4H9V9z" />
+          </svg>
+          <div
+            class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-table-alternateRow shadow-sm"
+          >
+            <ServerIcon class="size-10" />
+          </div>
+        </div>
+
+        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
+          <div class="text-sm font-bold text-contrast">Minecraft version</div>
+          <UiServersTeleportDropdownMenu
+            v-model="selectedMCVersion"
+            name="mcVersion"
+            :options="mcVersions"
+            class="w-full max-w-[100%]"
+            placeholder="Select Minecraft version..."
+          />
+        </div>
+
+        <div
+          v-if="selectedLoader.toLowerCase() !== 'vanilla'"
+          class="flex w-full flex-col gap-2 rounded-2xl p-4"
+          :class="{
+            'bg-table-alternateRow':
+              !selectedMCVersion || isLoading || selectedLoaderVersions.length > 0,
+            'bg-highlight-red':
+              selectedMCVersion && !isLoading && selectedLoaderVersions.length === 0,
+          }"
+        >
+          <div class="flex flex-col gap-2">
+            <div class="text-sm font-bold text-contrast">{{ selectedLoader }} version</div>
+
+            <template v-if="!selectedMCVersion">
+              <div
+                class="relative flex h-9 w-full select-none items-center rounded-xl bg-button-bg px-4 opacity-50"
+              >
+                Select a Minecraft version to see available versions
+                <DropdownIcon class="absolute right-4" />
+              </div>
+            </template>
+            <template v-else-if="isLoading">
+              <div
+                class="relative flex h-9 w-full items-center rounded-xl bg-button-bg px-4 opacity-50"
+              >
+                <UiServersIconsLoadingIcon class="mr-2 animate-spin" />
+                Loading versions...
+                <DropdownIcon class="absolute right-4" />
+              </div>
+            </template>
+            <template v-else-if="selectedLoaderVersions.length > 0">
+              <UiServersTeleportDropdownMenu
+                v-model="selectedLoaderVersion"
+                name="loaderVersion"
+                :options="selectedLoaderVersions"
+                class="w-full max-w-[100%]"
+                :placeholder="
+                  selectedLoader.toLowerCase() === 'paper' ||
+                  selectedLoader.toLowerCase() === 'purpur'
+                    ? `Select build number...`
+                    : `Select loader version...`
+                "
+              />
+            </template>
+            <template v-else>
+              <div>No versions available for Minecraft {{ selectedMCVersion }}.</div>
+            </template>
+          </div>
+        </div>
+
+        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
+          <div class="flex w-full flex-row items-center justify-between">
+            <label class="w-full text-lg font-bold text-contrast" for="hard-reset">
+              Erase all data
+            </label>
+            <input
+              id="hard-reset"
+              v-model="hardReset"
+              class="switch stylized-toggle shrink-0"
+              type="checkbox"
+            />
+          </div>
+          <div>
+            Removes all data on your server, including your worlds, mods, and configuration files,
+            then reinstalls it with the selected version.
+          </div>
+        </div>
+
+        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
+          <div class="flex w-full flex-row items-center justify-between">
+            <label class="w-full text-lg font-bold text-contrast" for="backup-server">
+              Backup server
+            </label>
+            <input
+              id="backup-server"
+              v-model="backupServer"
+              class="switch stylized-toggle shrink-0"
+              type="checkbox"
+            />
+          </div>
+          <div>
+            Creates a backup of your server before proceeding with the installation or
+            reinstallation.
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-4 flex justify-start gap-4">
+        <ButtonStyled :color="isDangerous ? 'red' : 'brand'">
+          <button :disabled="canInstall" @click="handleReinstall">
+            <RightArrowIcon />
+            {{
+              isBackingUp
+                ? "Backing up..."
+                : isLoading
+                  ? "Installing..."
+                  : isSecondPhase
+                    ? "Erase and install"
+                    : hardReset
+                      ? "Continue"
+                      : "Install"
+            }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button
+            :disabled="isLoading"
+            @click="
+              if (isSecondPhase) {
+                isSecondPhase = false;
+              } else {
+                hide();
+              }
+            "
+          >
+            <XIcon />
+            {{ isSecondPhase ? "Go back" : "Cancel" }}
+          </button>
+        </ButtonStyled>
+      </div>
+    </div>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { RightArrowIcon, XIcon, ServerIcon, DropdownIcon } from "@modrinth/assets";
+import type { Server } from "~/composables/pyroServers";
+import type { Loaders } from "~/types/servers";
+
+interface LoaderVersion {
+  id: string;
+  stable: boolean;
+  loaders: {
+    id: string;
+    url: string;
+    stable: boolean;
+  }[];
+}
+
+type VersionMap = Record<string, LoaderVersion[]>;
+type VersionCache = Record<string, any>;
+
+const props = defineProps<{
+  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  currentLoader: Loaders | undefined;
+}>();
+
+const emit = defineEmits<{
+  reinstall: [any?];
+}>();
+
+const versionSelectModal = ref();
+const isSecondPhase = ref(false);
+const hardReset = ref(false);
+const backupServer = ref(false);
+const isLoading = ref(false);
+const isBackingUp = ref(false);
+const loadingServerCheck = ref(false);
+const serverCheckError = ref("");
+
+const selectedLoader = ref<Loaders>("Vanilla");
+const selectedMCVersion = ref("");
+const selectedLoaderVersion = ref("");
+
+const paperVersions = ref<Record<string, number[]>>({});
+const purpurVersions = ref<Record<string, string[]>>({});
+const loaderVersions = ref<VersionMap>({});
+const cachedVersions = ref<VersionCache>({});
+
+const versionStrings = ["forge", "fabric", "quilt", "neo"] as const;
+
+const fetchLoaderVersions = async () => {
+  const versions = await Promise.all(
+    versionStrings.map(async (loader) => {
+      const runFetch = async (iterations: number) => {
+        if (iterations > 5) {
+          throw new Error("Failed to fetch loader versions");
+        }
+        try {
+          const res = await $fetch(`/loader-versions?loader=${loader}`);
+          return { [loader]: (res as any).gameVersions };
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        } catch (_) {
+          return await runFetch(iterations + 1);
+        }
+      };
+      try {
+        return await runFetch(0);
+      } catch (e) {
+        console.error(e);
+        return { [loader]: [] };
+      }
+    }),
+  );
+
+  loaderVersions.value = versions.reduce((acc, val) => ({ ...acc, ...val }), {});
+};
+
+const fetchPaperVersions = async (mcVersion: string) => {
+  try {
+    const res = await $fetch(`https://api.papermc.io/v2/projects/paper/versions/${mcVersion}`);
+    paperVersions.value[mcVersion] = (res as any).builds.sort((a: number, b: number) => b - a);
+    return res;
+  } catch (e) {
+    console.error(e);
+    return null;
+  }
+};
+
+const fetchPurpurVersions = async (mcVersion: string) => {
+  try {
+    const res = await $fetch(`https://api.purpurmc.org/v2/purpur/${mcVersion}`);
+    purpurVersions.value[mcVersion] = (res as any).builds.all.sort(
+      (a: string, b: string) => parseInt(b) - parseInt(a),
+    );
+    return res;
+  } catch (e) {
+    console.error(e);
+    return null;
+  }
+};
+
+const selectedLoaderVersions = computed(() => {
+  const loader = selectedLoader.value.toLowerCase();
+
+  if (loader === "paper") {
+    return paperVersions.value[selectedMCVersion.value] || [];
+  }
+
+  if (loader === "purpur") {
+    return purpurVersions.value[selectedMCVersion.value] || [];
+  }
+
+  if (loader === "vanilla") {
+    return [];
+  }
+
+  let apiLoader = loader;
+  if (loader === "neoforge") {
+    apiLoader = "neo";
+  }
+
+  const backwardsCompatibleVersion = loaderVersions.value[apiLoader]?.find(
+    // eslint-disable-next-line no-template-curly-in-string
+    (x) => x.id === "${modrinth.gameVersion}",
+  );
+
+  if (backwardsCompatibleVersion) {
+    return backwardsCompatibleVersion.loaders.map((x) => x.id);
+  }
+
+  return (
+    loaderVersions.value[apiLoader]
+      ?.find((x) => x.id === selectedMCVersion.value)
+      ?.loaders.map((x) => x.id) || []
+  );
+});
+
+watch(selectedLoader, async () => {
+  if (selectedMCVersion.value) {
+    selectedLoaderVersion.value = "";
+    serverCheckError.value = "";
+
+    await checkVersionAvailability(selectedMCVersion.value);
+  }
+});
+
+watch(
+  selectedLoaderVersions,
+  (newVersions) => {
+    if (newVersions.length > 0 && !selectedLoaderVersion.value) {
+      selectedLoaderVersion.value = String(newVersions[0]);
+    }
+  },
+  { immediate: true },
+);
+
+const checkVersionAvailability = async (version: string) => {
+  if (!version || version.trim().length < 3) return;
+
+  isLoading.value = true;
+  loadingServerCheck.value = true;
+
+  try {
+    const mcRes =
+      cachedVersions.value[version] ||
+      (await $fetch(`/loader-versions?loader=minecraft&version=${version}`));
+
+    cachedVersions.value[version] = mcRes;
+
+    if (!mcRes.downloads?.server) {
+      serverCheckError.value = "We couldn't find a server.jar for this version.";
+      return;
+    }
+
+    const loader = selectedLoader.value.toLowerCase();
+    if (loader === "paper" || loader === "purpur") {
+      const fetchFn = loader === "paper" ? fetchPaperVersions : fetchPurpurVersions;
+      const result = await fetchFn(version);
+      if (!result) {
+        serverCheckError.value = `This Minecraft version is not supported by ${loader}.`;
+        return;
+      }
+    }
+
+    serverCheckError.value = "";
+  } catch (error) {
+    console.error(error);
+    serverCheckError.value = "Failed to fetch versions.";
+  } finally {
+    loadingServerCheck.value = false;
+    isLoading.value = false;
+  }
+};
+
+watch(selectedMCVersion, checkVersionAvailability);
+
+onMounted(() => {
+  fetchLoaderVersions();
+});
+
+const tags = useTags();
+const mcVersions = tags.value.gameVersions
+  .filter((x) => x.version_type === "release")
+  .map((x) => x.version)
+  .filter((x) => {
+    const segment = parseInt(x.split(".")[1], 10);
+    return !isNaN(segment) && segment > 2;
+  });
+
+const isDangerous = computed(() => hardReset.value);
+const canInstall = computed(() => {
+  const conds =
+    !selectedMCVersion.value ||
+    isLoading.value ||
+    loadingServerCheck.value ||
+    serverCheckError.value.trim().length > 0;
+
+  if (selectedLoader.value.toLowerCase() === "vanilla") {
+    return conds;
+  }
+
+  return conds || !selectedLoaderVersion.value;
+});
+
+const performBackup = async (): Promise<boolean> => {
+  try {
+    const date = new Date();
+    const format = date.toLocaleString(navigator.language || "en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      second: "numeric",
+      timeZoneName: "short",
+    });
+    const backupName = `Reinstallation - ${format}`;
+    isLoading.value = true;
+    const backupId = await props.server.backups?.create(backupName);
+    isBackingUp.value = true;
+    let attempts = 0;
+    while (true) {
+      attempts++;
+      if (attempts > 100) {
+        addNotification({
+          group: "server",
+          title: "Backup Failed",
+          text: "An unexpected error occurred while backing up. Please try again later.",
+        });
+        return false;
+      }
+      await props.server.refresh(["backups"]);
+      const backups = await props.server.backups?.data;
+      const backup = backupId ? backups?.find((x) => x.id === backupId) : undefined;
+      if (backup && !backup.ongoing) {
+        isBackingUp.value = false;
+        break;
+      }
+      await new Promise((resolve) => setTimeout(resolve, 5000));
+    }
+    return true;
+  } catch {
+    addNotification({
+      group: "server",
+      title: "Backup Failed",
+      text: "An unexpected error occurred while backing up. Please try again later.",
+    });
+    return false;
+  }
+};
+
+const handleReinstall = async () => {
+  if (hardReset.value && !isSecondPhase.value) {
+    isSecondPhase.value = true;
+    return;
+  }
+
+  if (backupServer.value) {
+    isBackingUp.value = true;
+    if (!(await performBackup())) {
+      isBackingUp.value = false;
+      isLoading.value = false;
+      return;
+    }
+    isBackingUp.value = false;
+  }
+
+  isLoading.value = true;
+
+  try {
+    await props.server.general?.reinstall(
+      props.server.serverId,
+      true,
+      selectedLoader.value,
+      selectedMCVersion.value,
+      selectedLoader.value === "Vanilla" ? "" : selectedLoaderVersion.value,
+      hardReset.value,
+    );
+
+    emit("reinstall", {
+      loader: selectedLoader.value,
+      lVersion: selectedLoaderVersion.value,
+      mVersion: selectedMCVersion.value,
+    });
+
+    hide();
+  } catch (error) {
+    if (error instanceof PyroFetchError && error.statusCode === 429) {
+      addNotification({
+        group: "server",
+        title: "Cannot reinstall server",
+        text: "You are being rate limited. Please try again later.",
+        type: "error",
+      });
+    } else {
+      addNotification({
+        group: "server",
+        title: "Reinstall Failed",
+        text: "An unexpected error occurred while reinstalling. Please try again later.",
+        type: "error",
+      });
+    }
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const onShow = () => {
+  selectedMCVersion.value = props.server.general?.mc_version || "";
+};
+
+const onHide = () => {
+  hardReset.value = false;
+  backupServer.value = false;
+  isSecondPhase.value = false;
+  serverCheckError.value = "";
+  loadingServerCheck.value = false;
+  isLoading.value = false;
+  selectedMCVersion.value = "";
+  serverCheckError.value = "";
+  paperVersions.value = {};
+  purpurVersions.value = {};
+};
+
+const show = (loader: Loaders) => {
+  if (selectedLoader.value !== loader) {
+    selectedLoaderVersion.value = "";
+  }
+  selectedLoader.value = loader;
+  selectedMCVersion.value = props.server.general?.mc_version || "";
+  versionSelectModal.value?.show();
+};
+const hide = () => versionSelectModal.value?.hide();
+
+defineExpose({ show, hide });
+</script>
+
+<style scoped>
+.stylized-toggle:checked::after {
+  background: var(--color-accent-contrast) !important;
+}
+</style>
diff --git a/apps/frontend/src/components/ui/servers/ProjectSelect.vue b/apps/frontend/src/components/ui/servers/ProjectSelect.vue
deleted file mode 100644
index bdc2e2ebd..000000000
--- a/apps/frontend/src/components/ui/servers/ProjectSelect.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<template>
-  <div class="flex h-[400px] w-full max-w-xl flex-col overflow-hidden">
-    <div class="iconified-input mb-4 w-full">
-      <label class="hidden" for="search">Search</label>
-      <SearchIcon aria-hidden="true" />
-      <input
-        id="search"
-        v-model="queryFilter"
-        name="search"
-        type="search"
-        :placeholder="`Search ${props.type}s...`"
-        autocomplete="off"
-        @keyup.enter="resetList"
-      />
-    </div>
-    <div class="flex h-full w-full flex-col">
-      <div
-        v-if="mods && mods.hits.length > 0"
-        ref="scrollContainer"
-        class="flex h-full w-full flex-col gap-2 overflow-y-scroll"
-      >
-        <div v-for="mod in mods.hits" :key="mod.title" class="rounded-lg px-2 py-2 hover:bg-bg">
-          <div class="flex cursor-pointer gap-2" @click="toggleMod(mod.project_id)">
-            <UiAvatar :src="mod.icon_url" class="!h-12 !min-h-12 !w-12 !min-w-12" />
-            <div class="flex flex-col gap-1">
-              <h1 class="m-0 text-2xl font-bold leading-none text-contrast">
-                {{ mod.title }}
-              </h1>
-              <span class="text-sm text-secondary">
-                {{ mod.description.substring(0, 100) }}
-                {{ mod.description.length > 100 ? "..." : "" }}
-              </span>
-            </div>
-          </div>
-          <div v-if="expandedMods[mod.project_id]" class="mt-2 flex items-center gap-2">
-            <DropdownSelect
-              id="version-select"
-              v-model="selectedVersions[mod.project_id]"
-              name="version-select"
-              :options="expandedMods[mod.project_id].versions"
-              placeholder="Select version..."
-            />
-            <Button icon-only @click="emits('select', mod, selectedVersions[mod.project_id])">
-              <ChevronRightIcon />
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ChevronRightIcon, SearchIcon } from "@modrinth/assets";
-import { Button, DropdownSelect } from "@modrinth/ui";
-import { useInfiniteScroll } from "@vueuse/core";
-
-const emits = defineEmits(["select"]);
-
-const props = defineProps<{
-  type: "mod" | "modpack" | "plugin" | "datapack";
-  isserver?: boolean;
-}>();
-
-const route = useNativeRoute();
-const serverId = route.params.id as string;
-const server = serverId ? await usePyroServer(serverId, ["general"]) : null;
-
-const data = computed(() => (serverId ? server?.general : null));
-
-const scrollContainer = ref<HTMLElement | null>(null);
-const pages = ref(1);
-const page = ref(0);
-
-const queryFilter = ref("");
-const facets = ref<any>([]);
-
-if (props.isserver === false && props.type !== "modpack") {
-  facets.value.push(`["categories:${data.value?.loader?.toLocaleLowerCase()}"]`);
-  facets.value.push(`["versions:${data.value?.mc_version}"]`);
-}
-
-facets.value.push(`["project_type:${props.type}"]`);
-
-const buildFacetString = (facets: string[]) => {
-  return "[" + facets.map((facet) => `${facet}`).join(",") + "]";
-};
-
-const mods = ref<any>({ hits: [] });
-const modsStatus = ref("idle");
-
-const loadMods = async () => {
-  modsStatus.value = "loading";
-
-  const newMods = (await useBaseFetch(
-    `search?query=${queryFilter.value}&facets=${buildFacetString(facets.value)}&index=relevance&limit=25&offset=${page.value * 25}`,
-    {},
-    false,
-  )) as any;
-  pages.value = newMods.total_hits;
-  mods.value.hits.push(...newMods.hits);
-  modsStatus.value = "success";
-};
-
-const versions = reactive<{ [key: string]: any[] }>({});
-
-const getVersions = async (projectId: string) => {
-  if (!versions[projectId]) {
-    const allVersions = (await useBaseFetch(`project/${projectId}/version`, {}, false)) as any;
-
-    if (props.isserver === false && props.type !== "modpack") {
-      versions[projectId] = allVersions
-        .filter((x: any) => x.loaders.includes(data.value?.loader?.toLocaleLowerCase()))
-        .filter((x: any) => x.game_versions.includes(data.value?.mc_version))
-        .map((x: any) => x.version_number);
-    } else {
-      versions[projectId] = allVersions.map((x: any) => x.version_number);
-    }
-  }
-  return versions[projectId];
-};
-
-const selectedVersions = reactive<{ [key: string]: string }>({});
-
-const expandedMods = reactive<{ [key: string]: { expanded: boolean; versions: any[] } }>({});
-
-const toggleMod = async (modId: string) => {
-  if (!expandedMods[modId]) {
-    expandedMods[modId] = { expanded: false, versions: [] };
-  }
-  expandedMods[modId].expanded = !expandedMods[modId].expanded;
-  if (expandedMods[modId].expanded && expandedMods[modId].versions.length === 0) {
-    expandedMods[modId].versions = await getVersions(modId);
-    // Select the first version by default
-    if (expandedMods[modId].versions.length > 0) {
-      selectedVersions[modId] = expandedMods[modId].versions[0];
-    }
-  }
-};
-
-const loadMore = async () => {
-  page.value++;
-  await loadMods();
-};
-
-const { reset } = useInfiniteScroll(scrollContainer, async () => {
-  if (page.value <= pages.value) {
-    await loadMore();
-    console.log("loading more");
-    console.log(page.value);
-    console.log(pages.value);
-  }
-});
-
-const resetList = () => {
-  mods.value.hits = [];
-  Object.keys(expandedMods).forEach((key) => delete expandedMods[key]);
-  Object.keys(selectedVersions).forEach((key) => delete selectedVersions[key]);
-  page.value = 0;
-  loadMods();
-  reset();
-};
-
-onMounted(async () => {
-  await loadMods();
-});
-</script>
diff --git a/apps/frontend/src/components/ui/servers/PyroLoading.vue b/apps/frontend/src/components/ui/servers/PyroLoading.vue
deleted file mode 100644
index 3c72d239b..000000000
--- a/apps/frontend/src/components/ui/servers/PyroLoading.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <div class="flex h-[70vh] w-full flex-col items-center justify-center">
-    <PyroIcon class="pyro-logo-animation size-32 opacity-10" />
-    <p
-      class="text-sm transition"
-      :class="{ 'opacity-0': !showLoading, 'animate-pulse opacity-100': showLoading }"
-    >
-      Loading...
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { PyroIcon } from "@modrinth/assets";
-
-const showLoading = ref(false);
-
-onMounted(() => {
-  setTimeout(() => {
-    showLoading.value = true;
-  }, 5000);
-});
-</script>
-
-<style>
-.page-enter-active,
-.page-leave-active {
-  transition: all 0.1s;
-}
-
-.page-enter-from,
-.page-leave-to {
-  opacity: 0;
-}
-
-@keyframes zoom-in {
-  0% {
-    transform: scale(0.5);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
-.pyro-logo-animation {
-  animation: zoom-in 0.8s
-    linear(
-      0 0%,
-      0.01 0.8%,
-      0.04 1.6%,
-      0.161 3.3%,
-      0.816 9.4%,
-      1.046 11.9%,
-      1.189 14.4%,
-      1.231 15.7%,
-      1.254 17%,
-      1.259 17.8%,
-      1.257 18.6%,
-      1.236 20.45%,
-      1.194 22.3%,
-      1.057 27%,
-      0.999 29.4%,
-      0.955 32.1%,
-      0.942 33.5%,
-      0.935 34.9%,
-      0.933 36.65%,
-      0.939 38.4%,
-      1 47.3%,
-      1.011 49.95%,
-      1.017 52.6%,
-      1.016 56.4%,
-      1 65.2%,
-      0.996 70.2%,
-      1.001 87.2%,
-      1 100%
-    );
-}
-
-@keyframes fade-bg-in {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 0.6;
-  }
-}
-
-.bg-loading-animation {
-  animation: fade-bg-in 0.12s linear forwards;
-}
-</style>
diff --git a/apps/frontend/src/components/ui/servers/PyroModal.vue b/apps/frontend/src/components/ui/servers/PyroModal.vue
deleted file mode 100644
index 67ea4f17d..000000000
--- a/apps/frontend/src/components/ui/servers/PyroModal.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <div
-    class="flex h-full flex-col gap-4 py-6"
-    :class="
-      'flex h-full flex-col gap-4 py-6' +
-      (danger
-        ? ' rounded-2xl border-2 border-solid border-[#cb2245] bg-[#fff5f6] dark:border-[#FF496E] dark:bg-[#270B11]'
-        : '')
-    "
-  >
-    <div class="mb-2 flex items-center justify-between gap-4 px-6">
-      <div class="flex w-full items-center gap-4">
-        <UiServersServerIcon v-if="data" :image="data.image" class="h-12 w-12 rounded-lg" />
-        <div class="text-2xl font-extrabold text-contrast">{{ props.header }}</div>
-      </div>
-      <button
-        :class="
-          'h-8 w-8 rounded-full bg-button-bg p-2 text-contrast hover:bg-button-bgActive' +
-          (danger ? 'hover:bg-[#ffffff20] [&&]:bg-[#ffffff10]' : '')
-        "
-        @click="$emit('modal')"
-      >
-        <XIcon class="h-4 w-4" />
-      </button>
-    </div>
-    <div
-      class="border-0 border-b border-solid"
-      :class="danger ? 'border-[#cb2245] dark:border-[#612d38]' : 'border-divider'"
-    ></div>
-    <div class="mt-2 h-full w-full overflow-auto px-6">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { XIcon } from "@modrinth/assets";
-
-const emit = defineEmits(["modal"]);
-
-const props = defineProps<{
-  header?: string;
-  data?: any;
-  danger?: boolean;
-}>();
-
-const onEscKeyRelease = (event: KeyboardEvent) => {
-  if (event.key === "Escape") {
-    emit("modal");
-  }
-};
-
-onMounted(() => {
-  document.body.addEventListener("keyup", onEscKeyRelease);
-});
-
-onBeforeUnmount(() => {
-  document.removeEventListener("keyup", onEscKeyRelease);
-});
-</script>
diff --git a/apps/frontend/src/components/ui/servers/SaveBanner.vue b/apps/frontend/src/components/ui/servers/SaveBanner.vue
index be754f733..65508267e 100644
--- a/apps/frontend/src/components/ui/servers/SaveBanner.vue
+++ b/apps/frontend/src/components/ui/servers/SaveBanner.vue
@@ -39,7 +39,7 @@ const props = defineProps<{
   save: () => void;
   reset: () => void;
   isVisible: boolean;
-  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
 }>();
 
 const saveAndRestart = async () => {
diff --git a/apps/frontend/src/components/ui/servers/ServerGameLabel.vue b/apps/frontend/src/components/ui/servers/ServerGameLabel.vue
index bef037812..6c7fd043d 100644
--- a/apps/frontend/src/components/ui/servers/ServerGameLabel.vue
+++ b/apps/frontend/src/components/ui/servers/ServerGameLabel.vue
@@ -8,13 +8,19 @@
     <NuxtLink
       v-if="isLink"
       :to="serverId ? `/servers/manage/${serverId}/options/loader` : ''"
-      class="min-w-0 truncate text-sm font-semibold"
+      class="flex min-w-0 items-center truncate text-sm font-semibold"
       :class="serverId ? 'hover:underline' : ''"
     >
-      {{ game[0].toUpperCase() + game.slice(1) }} {{ mcVersion }}
+      <div class="flex flex-row items-center gap-1">
+        {{ game[0].toUpperCase() + game.slice(1) }}
+        <span v-if="mcVersion">{{ mcVersion }}</span>
+        <span v-else class="inline-block h-3 w-12 animate-pulse rounded bg-button-border"></span>
+      </div>
     </NuxtLink>
-    <div v-else class="min-w-0 truncate text-sm font-semibold">
-      {{ game[0].toUpperCase() + game.slice(1) }} {{ mcVersion }}
+    <div v-else class="flex min-w-0 flex-row items-center gap-1 truncate text-sm font-semibold">
+      {{ game[0].toUpperCase() + game.slice(1) }}
+      <span v-if="mcVersion">{{ mcVersion }}</span>
+      <span v-else class="inline-block h-3 w-16 animate-pulse rounded bg-button-border"></span>
     </div>
   </div>
 </template>
diff --git a/apps/frontend/src/components/ui/servers/ServerInfoLabels.vue b/apps/frontend/src/components/ui/servers/ServerInfoLabels.vue
index a23430e78..56f257d32 100644
--- a/apps/frontend/src/components/ui/servers/ServerInfoLabels.vue
+++ b/apps/frontend/src/components/ui/servers/ServerInfoLabels.vue
@@ -2,19 +2,18 @@
   <div>
     <UiServersServerGameLabel
       v-if="showGameLabel"
-      :game="serverData.game!"
+      :game="serverData.game"
       :mc-version="serverData.mc_version ?? ''"
       :is-link="linked"
     />
     <UiServersServerLoaderLabel
-      v-if="showLoaderLabel"
-      :loader="serverData.loader!"
+      :loader="serverData.loader"
       :loader-version="serverData.loader_version ?? ''"
       :no-separator="column"
       :is-link="linked"
     />
     <UiServersServerSubdomainLabel
-      v-if="serverData.net.domain"
+      v-if="serverData.net?.domain"
       :subdomain="serverData.net.domain"
       :no-separator="column"
       :is-link="linked"
diff --git a/apps/frontend/src/components/ui/servers/ServerListing.vue b/apps/frontend/src/components/ui/servers/ServerListing.vue
index 4e9567ae3..a8bfeece4 100644
--- a/apps/frontend/src/components/ui/servers/ServerListing.vue
+++ b/apps/frontend/src/components/ui/servers/ServerListing.vue
@@ -47,7 +47,6 @@
           :server-data="{ game, mc_version, loader, loader_version, net }"
           :show-game-label="showGameLabel"
           :show-loader-label="showLoaderLabel"
-          :show-subdomain-label="showSubdomainLabel"
           :linked="false"
           class="pointer-events-none flex w-full flex-row flex-wrap items-center gap-4 text-secondary *:hidden sm:flex-row sm:*:flex"
         />
@@ -70,11 +69,13 @@
     </div>
     <div
       v-else-if="status === 'suspended' && suspension_reason !== 'upgrading'"
-      class="relative -mt-4 flex w-full flex-row items-center gap-2 rounded-b-3xl bg-bg-red p-4 text-sm font-bold text-contrast"
+      class="relative -mt-4 flex w-full flex-col gap-2 rounded-b-3xl bg-bg-red p-4 text-sm font-bold text-contrast"
     >
-      <UiServersIconsPanelErrorIcon class="!size-5" />
-      Your server has been suspended due to a billing issue. Please visit your billing settings or
-      contact Modrinth Support for more information.
+      <div class="flex flex-row gap-2">
+        <UiServersIconsPanelErrorIcon class="!size-5" /> Your server has been suspended. Please
+        update your billing information or contact Modrinth Support for more information.
+      </div>
+      <UiCopyCode :text="`${props.server_id}`" class="ml-auto" />
     </div>
   </NuxtLink>
 </template>
@@ -85,9 +86,12 @@ import type { Project, Server } from "~/types/servers";
 
 const props = defineProps<Partial<Server>>();
 
+if (props.server_id) {
+  await usePyroServer(props.server_id, ["general"]);
+}
+
 const showGameLabel = computed(() => !!props.game);
 const showLoaderLabel = computed(() => !!props.loader);
-const showSubdomainLabel = computed(() => !!props.net?.domain);
 
 let projectData: Ref<Project | null>;
 if (props.upstream) {
@@ -103,39 +107,11 @@ if (props.upstream) {
   projectData = ref(null);
 }
 
-const image = ref<string | undefined>();
+const image = useState<string | undefined>(`server-icon-${props.server_id}`, () => undefined);
 
-onMounted(async () => {
-  const auth = (await usePyroFetch(`servers/${props.server_id}/fs`)) as any;
-  try {
-    const fileData = await usePyroFetch(`/download?path=/server-icon-original.png`, {
-      override: auth,
-    });
-
-    if (fileData instanceof Blob) {
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      const img = new Image();
-      img.src = URL.createObjectURL(fileData);
-      await new Promise<void>((resolve) => {
-        img.onload = () => {
-          canvas.width = 512;
-          canvas.height = 512;
-          ctx?.drawImage(img, 0, 0, 512, 512);
-          const dataURL = canvas.toDataURL("image/png");
-          image.value = dataURL;
-          resolve();
-        };
-      });
-    }
-  } catch (error) {
-    if (error instanceof PyroFetchError && error.statusCode === 404) {
-      image.value = undefined;
-    } else {
-      console.error(error);
-    }
-  }
-});
+if (import.meta.server && projectData.value?.icon_url) {
+  await usePyroServer(props.server_id!, ["general"]);
+}
 
 const iconUrl = computed(() => projectData.value?.icon_url || undefined);
 </script>
diff --git a/apps/frontend/src/components/ui/servers/ServerLoaderLabel.vue b/apps/frontend/src/components/ui/servers/ServerLoaderLabel.vue
index 13e8694f8..c9920099e 100644
--- a/apps/frontend/src/components/ui/servers/ServerLoaderLabel.vue
+++ b/apps/frontend/src/components/ui/servers/ServerLoaderLabel.vue
@@ -1,22 +1,33 @@
 <template>
-  <div
-    v-if="loader"
-    v-tooltip="'Change server loader'"
-    class="flex min-w-0 flex-row items-center gap-4 truncate"
-  >
+  <div v-tooltip="'Change server loader'" class="flex min-w-0 flex-row items-center gap-4 truncate">
     <div v-if="!noSeparator" class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
     <div class="flex flex-row items-center gap-2">
-      <UiServersIconsLoaderIcon :loader="loader" class="flex shrink-0 [&&]:size-5" />
+      <UiServersIconsLoaderIcon v-if="loader" :loader="loader" class="flex shrink-0 [&&]:size-5" />
+      <div v-else class="size-5 shrink-0 animate-pulse rounded-full bg-button-border"></div>
       <NuxtLink
         v-if="isLink"
         :to="serverId ? `/servers/manage/${serverId}/options/loader` : ''"
-        class="min-w-0 text-sm font-semibold"
+        class="flex min-w-0 items-center text-sm font-semibold"
         :class="serverId ? 'hover:underline' : ''"
       >
-        {{ loader }} <span v-if="loaderVersion">{{ loaderVersion }}</span>
+        <span v-if="loader">
+          {{ loader }}
+          <span v-if="loaderVersion">{{ loaderVersion }}</span>
+        </span>
+        <span v-else class="flex gap-2">
+          <span class="inline-block h-4 w-12 animate-pulse rounded bg-button-border"></span>
+          <span class="inline-block h-4 w-12 animate-pulse rounded bg-button-border"></span>
+        </span>
       </NuxtLink>
       <div v-else class="min-w-0 text-sm font-semibold">
-        {{ loader }} <span v-if="loaderVersion">{{ loaderVersion }}</span>
+        <span v-if="loader">
+          {{ loader }}
+          <span v-if="loaderVersion">{{ loaderVersion }}</span>
+        </span>
+        <span v-else class="flex gap-2">
+          <span class="inline-block h-4 w-12 animate-pulse rounded bg-button-border"></span>
+          <span class="inline-block h-4 w-12 animate-pulse rounded bg-button-border"></span>
+        </span>
       </div>
     </div>
   </div>
@@ -25,8 +36,8 @@
 <script setup lang="ts">
 defineProps<{
   noSeparator?: boolean;
-  loader: "Fabric" | "Quilt" | "Forge" | "NeoForge" | "Paper" | "Spigot" | "Bukkit" | "Vanilla";
-  loaderVersion: string;
+  loader?: "Fabric" | "Quilt" | "Forge" | "NeoForge" | "Paper" | "Spigot" | "Bukkit" | "Vanilla";
+  loaderVersion?: string;
   isLink?: boolean;
 }>();
 
diff --git a/apps/frontend/src/components/ui/servers/ServerSidebar.vue b/apps/frontend/src/components/ui/servers/ServerSidebar.vue
index 0c44c9767..8c52c6c02 100644
--- a/apps/frontend/src/components/ui/servers/ServerSidebar.vue
+++ b/apps/frontend/src/components/ui/servers/ServerSidebar.vue
@@ -36,7 +36,7 @@ const emit = defineEmits(["reinstall"]);
 const props = defineProps<{
   navLinks: { label: string; href: string; icon: Component; external?: boolean }[];
   route: RouteLocationNormalized;
-  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
 }>();
 
 const onReinstall = (...args: any[]) => {
diff --git a/apps/frontend/src/components/ui/servers/ServerSkeleton.vue b/apps/frontend/src/components/ui/servers/ServerSkeleton.vue
deleted file mode 100644
index 7429de93b..000000000
--- a/apps/frontend/src/components/ui/servers/ServerSkeleton.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="flex flex-col gap-4">
-    <div
-      v-for="n in count"
-      :key="n"
-      class="relative h-[128px] w-full animate-pulse rounded-3xl bg-bg-raised p-4"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  count: {
-    type: Number,
-    default: 3,
-  },
-});
-</script>
diff --git a/apps/frontend/src/components/ui/servers/ServerStats.vue b/apps/frontend/src/components/ui/servers/ServerStats.vue
index 85547442a..f92a177ca 100644
--- a/apps/frontend/src/components/ui/servers/ServerStats.vue
+++ b/apps/frontend/src/components/ui/servers/ServerStats.vue
@@ -9,44 +9,34 @@
       :key="index"
       class="relative isolate min-h-[156px] w-full overflow-hidden rounded-2xl bg-bg-raised p-8"
     >
-      <div
-        class="relative z-10 -ml-3 w-fit rounded-xl px-3 py-1"
-        :style="{
-          backdropFilter: 'blur(6px)',
-        }"
-      >
-        <div class="-mb-0.5 mt-0.5 flex flex-row items-center gap-2">
-          <h2 class="m-0 -ml-0.5 text-3xl font-extrabold text-contrast">
-            {{ metric.value }}
-          </h2>
-          <h3 class="relative z-10 text-sm font-normal text-secondary">/ {{ metric.max }}</h3>
+      <div class="relative z-10 -ml-3 w-fit rounded-xl px-3 py-1">
+        <div class="relative z-10">
+          <div class="-mb-0.5 mt-0.5 flex flex-row items-center gap-2">
+            <h2 class="m-0 -ml-0.5 text-3xl font-extrabold text-contrast">{{ metric.value }}</h2>
+            <h3 class="text-sm font-normal text-secondary">/ {{ metric.max }}</h3>
+          </div>
+          <h3 class="flex items-center gap-2 text-base font-normal text-secondary">
+            {{ metric.title }}
+            <WarningIcon
+              v-if="metric.warning"
+              v-tooltip="metric.warning"
+              class="size-5"
+              :style="{ color: 'var(--color-orange)' }"
+            />
+          </h3>
         </div>
-        <h3 class="relative z-10 flex items-center gap-2 text-base font-normal text-secondary">
-          {{ metric.title }}
-          <WarningIcon
-            v-tooltip="getPotentialWarning(metric)"
-            :style="{
-              color: 'var(--color-orange)',
-              width: '1.25rem',
-              height: '1.25rem',
-              display: getPotentialWarning(metric) ? 'block' : 'none',
-            }"
-          />
-        </h3>
+        <div class="absolute -left-8 -top-4 h-28 w-56 rounded-full bg-bg-raised blur-lg" />
       </div>
 
       <component :is="metric.icon" class="absolute right-10 top-10 z-10" />
       <ClientOnly>
         <VueApexCharts
-          v-if="
-            metric.data.length && !(metric.title === 'Memory usage' && userPreferences.ramAsNumber)
-          "
-          ref="chart"
+          v-if="metric.showGraph"
           type="area"
           height="142"
-          :options="generateOptions(metric)"
-          :series="[{ name: 'Chart', data: metric.data }]"
-          class="chart chart-animation absolute bottom-0 left-0 right-0 w-full"
+          :options="getChartOptions(metric.warning)"
+          :series="[{ name: metric.title, data: metric.data }]"
+          class="chart absolute bottom-0 left-0 right-0 w-full opacity-0"
         />
       </ClientOnly>
     </div>
@@ -57,21 +47,17 @@
     >
       <div class="flex flex-row items-center gap-2">
         <h2 class="m-0 -ml-0.5 mt-1 text-3xl font-extrabold text-contrast">
-          {{ formatBytes(animatedStorageUsage) }}
+          {{ formatBytes(stats.storage_usage_bytes) }}
         </h2>
-        <!-- <h3 class="relative z-10 text-sm font-normal text-secondary">
-          / {{ formatBytes(props.data.current.storage_total_bytes) }}
-        </h3> -->
       </div>
-      <h3 class="relative z-10 text-base font-normal text-secondary">Storage usage</h3>
-
+      <h3 class="text-base font-normal text-secondary">Storage usage</h3>
       <FolderOpenIcon class="absolute right-10 top-10 size-8" />
     </NuxtLink>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, computed, shallowRef } from "vue";
 import { FolderOpenIcon, CPUIcon, DBIcon } from "@modrinth/assets";
 import { useStorage } from "@vueuse/core";
 import type { Stats } from "~/types/servers";
@@ -79,252 +65,132 @@ import WarningIcon from "~/assets/images/utils/issues.svg?component";
 
 const route = useNativeRoute();
 const serverId = route.params.id;
+const VueApexCharts = defineAsyncComponent(() => import("vue3-apexcharts"));
 
 const userPreferences = useStorage(`pyro-server-${serverId}-preferences`, {
   ramAsNumber: false,
-  autoRestart: false,
-  backupWhileRunning: false,
 });
 
-const VueApexCharts = defineAsyncComponent(() => import("vue3-apexcharts"));
+const props = defineProps<{ data: Stats }>();
 
-const props = defineProps({
-  data: {
-    type: Object as PropType<Stats>,
-    required: true,
-  },
-});
+const stats = shallowRef(props.data.current);
 
-const lerp = (a: number, b: number) => {
-  return a + (b - a) * 0.5;
-};
-
-// I told you it would go into prod
 const formatBytes = (bytes: number) => {
-  const units = ["Bytes", "KB", "MB", "GB", "TB"];
+  const units = ["B", "KB", "MB", "GB"];
   let value = bytes;
-  let unitIndex = 0;
-
-  while (value >= 1024 && unitIndex < units.length - 2) {
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
     value /= 1024;
-    unitIndex++;
+    unit++;
   }
-
-  return `${Math.round(value * 100) / 100} ${units[unitIndex]}`;
+  return `${Math.round(value * 10) / 10} ${units[unit]}`;
 };
 
-const animatedStorageUsage = ref(0);
+const cpuData = ref<number[]>(Array(20).fill(0));
+const ramData = ref<number[]>(Array(20).fill(0));
 
-const animateValue = (start: number, end: number, duration: number): void => {
-  let startTimestamp: number | null = null;
-  const step = (timestamp: number) => {
-    if (!startTimestamp) startTimestamp = timestamp;
-    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
-    animatedStorageUsage.value = Math.floor(progress * (end - start) + start);
-    if (progress < 1) {
-      requestAnimationFrame(step);
-    }
-  };
-  requestAnimationFrame(step);
+const updateGraphData = (arr: number[], newValue: number) => {
+  arr.push(newValue);
+  arr.shift();
 };
 
-onMounted(() => {
-  animateValue(0, props.data.current.storage_usage_bytes, 250);
+const metrics = computed(() => {
+  const ramPercent = Math.min(
+    (stats.value.ram_usage_bytes / stats.value.ram_total_bytes) * 100,
+    100,
+  );
+  const cpuPercent = Math.min(stats.value.cpu_percent, 100);
+
+  updateGraphData(cpuData.value, cpuPercent);
+  updateGraphData(ramData.value, ramPercent);
+
+  return [
+    {
+      title: "CPU usage",
+      value: `${cpuPercent.toFixed(2)}%`,
+      max: "100%",
+      icon: CPUIcon,
+      data: cpuData.value,
+      showGraph: true,
+      warning: cpuPercent >= 90 ? "CPU usage is very high" : null,
+    },
+    {
+      title: "Memory usage",
+      value: userPreferences.value.ramAsNumber
+        ? formatBytes(stats.value.ram_usage_bytes)
+        : `${ramPercent.toFixed(2)}%`,
+      max: userPreferences.value.ramAsNumber ? formatBytes(stats.value.ram_total_bytes) : "100%",
+      icon: DBIcon,
+      data: ramData.value,
+      showGraph: true,
+      warning: ramPercent >= 90 ? "Memory usage is very high" : null,
+    },
+  ];
+});
+
+const getChartOptions = (hasWarning: string | null) => ({
+  chart: {
+    type: "area",
+    animations: { enabled: false },
+    sparkline: { enabled: true },
+    toolbar: { show: false },
+    padding: {
+      left: -10,
+      right: -10,
+      top: 0,
+      bottom: 0,
+    },
+  },
+  stroke: { curve: "smooth", width: 3 },
+  fill: {
+    type: "gradient",
+    gradient: {
+      shadeIntensity: 1,
+      opacityFrom: 0.25,
+      opacityTo: 0.05,
+      stops: [0, 100],
+    },
+  },
+  tooltip: { enabled: false },
+  grid: { show: false },
+  xaxis: {
+    labels: { show: false },
+    axisBorder: { show: false },
+    type: "numeric",
+    tickAmount: 20,
+    range: 20,
+  },
+  yaxis: {
+    show: false,
+    min: 0,
+    max: 100,
+    forceNiceScale: false,
+  },
+  colors: [hasWarning ? "var(--color-orange)" : "var(--color-brand)"],
+  dataLabels: {
+    enabled: false,
+  },
 });
 
 watch(
-  () => props.data.current.storage_usage_bytes,
-  (newValue, oldValue) => {
-    animateValue(oldValue, newValue, 250);
+  () => props.data.current,
+  (newStats) => {
+    stats.value = newStats;
   },
 );
-
-const metrics = ref([
-  {
-    title: "CPU usage",
-    value: "0%",
-    max: "100%",
-    icon: markRaw(CPUIcon),
-    data: [] as number[],
-  },
-  {
-    title: "Memory usage",
-    value: "0%",
-    max: userPreferences.value.ramAsNumber
-      ? formatBytes(props.data.current.ram_total_bytes)
-      : "100%",
-    icon: markRaw(DBIcon),
-    data: [] as number[],
-  },
-]);
-
-const updateMetrics = () => {
-  console.log(props.data.current.ram_usage_bytes);
-  metrics.value = metrics.value.map((metric, index) => {
-    if (userPreferences.value.ramAsNumber && index === 1) {
-      return {
-        ...metric,
-        value: formatBytes(props.data.current.ram_usage_bytes),
-        data: [...metric.data.slice(-10), props.data.current.ram_usage_bytes],
-        max: formatBytes(props.data.current.ram_total_bytes),
-      };
-    } else {
-      const currentValue =
-        index === 0
-          ? props.data.current.cpu_percent
-          : Math.min(
-              (props.data.current.ram_usage_bytes / props.data.current.ram_total_bytes) * 100,
-              100,
-            );
-      const pastValue =
-        index === 0
-          ? props.data.past.cpu_percent
-          : Math.min(
-              (props.data.past.ram_usage_bytes / props.data.past.ram_total_bytes) * 100,
-              100,
-            );
-
-      const newValue = lerp(currentValue, pastValue);
-      return {
-        ...metric,
-        value: `${newValue.toFixed(2)}%`,
-        data: [...metric.data.slice(-10), newValue],
-        // data: [36, 36],
-      };
-    }
-  });
-};
-
-// aww, you gotta give em that rinth tuah, mod on that thang
-const getPotentialWarning = (metric: (typeof metrics.value)[0]) => {
-  // make all words in the string lowercase, unless the word is in all caps
-  const split = metric.title.split(" ");
-  const title = split
-    .map((word) => {
-      if (word === word.toUpperCase()) {
-        return word;
-      }
-      return word.toLowerCase();
-    })
-    .join(" ");
-  let data = metric.data.at(-1) || 0;
-  if (userPreferences.value.ramAsNumber) {
-    data = (props.data.current.ram_usage_bytes / props.data.current.ram_total_bytes) * 100;
-  }
-  switch (true) {
-    case data >= 90:
-      return `Your server's ${title} is very high.`;
-    default:
-      return "";
-  }
-};
-
-const generateOptions = (metric: (typeof metrics.value)[0]) => {
-  let color = "var(--color-brand)";
-  let data = metric.data.at(-1) || 0;
-  if (userPreferences.value.ramAsNumber) {
-    data = (props.data.current.ram_usage_bytes / props.data.current.ram_total_bytes) * 100;
-  }
-  switch (true) {
-    case data >= 90:
-      color = "var(--color-red)";
-      break;
-    case data >= 80:
-      color = "var(--color-orange)";
-      break;
-  }
-  return {
-    chart: {
-      id: "stats",
-      fontFamily:
-        "Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif",
-      foreColor: "var(--color-base)",
-      toolbar: { show: false },
-      zoom: { enabled: false },
-      sparkline: { enabled: true },
-      animations: {
-        enabled: true,
-        easing: "linear",
-        dynamicAnimation: { speed: 1000 },
-      },
-    },
-    stroke: { curve: "smooth" },
-    fill: {
-      colors: [color],
-      type: "gradient",
-      opacity: 1,
-      gradient: {
-        shade: "light",
-        type: "vertical",
-        shadeIntensity: 0,
-        gradientToColors: [color],
-        inverseColors: true,
-        opacityFrom: 0.5,
-        opacityTo: 0,
-        stops: [0, 100],
-        colorStops: [],
-      },
-    },
-    grid: { show: false },
-    legend: { show: false },
-    colors: [color],
-    dataLabels: { enabled: false },
-    xaxis: {
-      type: "numeric",
-      lines: { show: false },
-      axisBorder: { show: false },
-      labels: { show: false },
-    },
-    yaxis: {
-      min: 0,
-      max: 100,
-      tickAmount: 5,
-      labels: { show: false },
-      axisBorder: { show: false },
-      axisTicks: { show: false },
-    },
-    tooltip: { enabled: false },
-  };
-};
-
-// watch(
-//   metrics,
-//   () => {
-//     console.log(metrics.value[0].data.at(-1));
-//   },
-//   {
-//     deep: true,
-//     immediate: true,
-//   },
-// );
-
-let interval: number;
-
-onMounted(() => {
-  updateMetrics();
-  interval = window.setInterval(updateMetrics, 1000);
-});
-
-onUnmounted(() => {
-  if (interval) {
-    clearInterval(interval);
-  }
-});
 </script>
 
 <style scoped>
-@keyframes chart-enter-animation {
-  0% {
-    opacity: 0;
-  }
-  100% {
+.chart {
+  animation: fadeIn 0.2s ease-out 0.2s forwards;
+  margin-left: -24px;
+  margin-right: -24px;
+  width: calc(100% + 48px) !important;
+}
+
+@keyframes fadeIn {
+  to {
     opacity: 1;
   }
 }
-
-.chart-animation {
-  opacity: 0;
-  animation: chart-enter-animation 0.5s ease-out forwards;
-  animation-delay: 1s;
-}
 </style>
diff --git a/apps/frontend/src/components/ui/servers/ServerSubdomainLabel.vue b/apps/frontend/src/components/ui/servers/ServerSubdomainLabel.vue
index 8f88d1938..d27d44b9f 100644
--- a/apps/frontend/src/components/ui/servers/ServerSubdomainLabel.vue
+++ b/apps/frontend/src/components/ui/servers/ServerSubdomainLabel.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="subdomain"
+    v-if="subdomain && !isHidden"
     v-tooltip="'Copy custom URL'"
     class="flex min-w-0 flex-row items-center gap-4 truncate hover:cursor-pointer"
   >
@@ -20,6 +20,8 @@
 
 <script setup lang="ts">
 import { LinkIcon } from "@modrinth/assets";
+import { useStorage } from "@vueuse/core";
+
 const props = defineProps<{
   subdomain: string;
   noSeparator?: boolean;
@@ -29,12 +31,18 @@ const copySubdomain = () => {
   navigator.clipboard.writeText(props.subdomain + ".modrinth.gg");
   addNotification({
     group: "servers",
-    title: "Subdomain copied",
-    text: "Your subdomain has been copied to your clipboard.",
+    title: "Custom URL copied",
+    text: "Your server's URL has been copied to your clipboard.",
     type: "success",
   });
 };
 
 const route = useNativeRoute();
 const serverId = computed(() => route.params.id as string);
+
+const userPreferences = useStorage(`pyro-server-${serverId.value}-preferences`, {
+  hideSubdomainLabel: false,
+});
+
+const isHidden = computed(() => userPreferences.value.hideSubdomainLabel);
 </script>
diff --git a/apps/frontend/src/components/ui/servers/ServerUptimeLabel.vue b/apps/frontend/src/components/ui/servers/ServerUptimeLabel.vue
index e57075315..f90be6640 100644
--- a/apps/frontend/src/components/ui/servers/ServerUptimeLabel.vue
+++ b/apps/frontend/src/components/ui/servers/ServerUptimeLabel.vue
@@ -2,13 +2,13 @@
   <div
     v-if="uptimeSeconds || uptimeSeconds !== 0"
     v-tooltip="`Online for ${verboseUptime}`"
-    class="flex min-w-0 flex-row items-center gap-4"
+    class="server-action-buttons-anim flex min-w-0 flex-row items-center gap-4"
     data-pyro-uptime
   >
     <div v-if="!noSeparator" class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
 
     <div class="flex gap-2">
-      <UiServersTimer class="flex size-5 shrink-0" />
+      <UiServersIconsTimer class="flex size-5 shrink-0" />
       <time class="truncate text-sm font-semibold" :aria-label="verboseUptime">
         {{ formattedUptime }}
       </time>
diff --git a/apps/frontend/src/components/ui/servers/TeleportDropdownMenu.vue b/apps/frontend/src/components/ui/servers/TeleportDropdownMenu.vue
index 4c799454a..1eecea3a7 100644
--- a/apps/frontend/src/components/ui/servers/TeleportDropdownMenu.vue
+++ b/apps/frontend/src/components/ui/servers/TeleportDropdownMenu.vue
@@ -1,28 +1,23 @@
 <template>
-  <div
-    ref="dropdown"
-    data-pyro-dropdown
-    tabindex="0"
-    role="combobox"
-    :aria-expanded="dropdownVisible"
-    class="relative inline-block h-9 w-full max-w-80"
-    @focus="onFocus"
-    @blur="onBlur"
-    @mousedown.prevent
-    @keydown="handleKeyDown"
-  >
-    <div
-      data-pyro-dropdown-trigger
-      class="duration-50 flex h-full w-full cursor-pointer select-none items-center justify-between gap-4 rounded-xl bg-button-bg px-4 py-2 shadow-sm transition-all ease-in-out"
+  <div class="relative inline-block h-9 w-full max-w-80">
+    <button
+      ref="triggerRef"
+      type="button"
+      aria-haspopup="listbox"
+      :aria-expanded="dropdownVisible"
+      :aria-controls="listboxId"
+      :aria-labelledby="listboxId"
+      class="duration-50 flex h-full w-full cursor-pointer select-none appearance-none items-center justify-between gap-4 rounded-xl border-none bg-button-bg px-4 py-2 shadow-sm !outline-none transition-all ease-in-out"
       :class="triggerClasses"
       @click="toggleDropdown"
+      @keydown="handleTriggerKeyDown"
     >
       <span>{{ selectedOption }}</span>
       <DropdownIcon
         class="transition-transform duration-200 ease-in-out"
         :class="{ 'rotate-180': dropdownVisible }"
       />
-    </div>
+    </button>
 
     <Teleport to="#teleports">
       <transition
@@ -35,27 +30,28 @@
       >
         <div
           v-if="dropdownVisible"
+          :id="listboxId"
           ref="optionsContainer"
-          data-pyro-dropdown-options
-          class="experimental-styles-within fixed z-50 bg-button-bg shadow-lg"
+          role="listbox"
+          tabindex="-1"
+          :aria-activedescendant="activeDescendant"
+          class="experimental-styles-within fixed z-50 bg-button-bg shadow-lg outline-none"
           :class="{
             'rounded-b-xl': !isRenderingUp,
             'rounded-t-xl': isRenderingUp,
           }"
           :style="positionStyle"
-          @keydown.stop="handleDropdownKeyDown"
+          @keydown="handleListboxKeyDown"
         >
           <div
             class="overflow-y-auto"
             :style="{ height: `${virtualListHeight}px` }"
-            data-pyro-dropdown-options-virtual-scroller
             @scroll="handleScroll"
           >
             <div :style="{ height: `${totalHeight}px`, position: 'relative' }">
               <div
                 v-for="item in visibleOptions"
                 :key="item.index"
-                data-pyro-dropdown-option
                 :style="{
                   position: 'absolute',
                   top: 0,
@@ -65,32 +61,20 @@
                 }"
               >
                 <div
-                  :ref="(el) => handleOptionRef(el as HTMLElement, item.index)"
+                  :id="`${listboxId}-option-${item.index}`"
                   role="option"
-                  :tabindex="focusedOptionIndex === item.index ? 0 : -1"
-                  class="hover:brightness-85 flex h-full cursor-pointer select-none items-center px-4 transition-colors duration-150 ease-in-out focus:border-none focus:outline-none"
+                  :aria-selected="selectedValue === item.option"
+                  class="hover:brightness-85 flex h-full cursor-pointer select-none items-center px-4 transition-colors duration-150 ease-in-out"
                   :class="{
                     'bg-brand font-bold text-brand-inverted': selectedValue === item.option,
                     'bg-bg-raised': focusedOptionIndex === item.index,
                     'rounded-b-xl': item.index === props.options.length - 1 && !isRenderingUp,
                     'rounded-t-xl': item.index === 0 && isRenderingUp,
                   }"
-                  :aria-selected="selectedValue === item.option"
                   @click="selectOption(item.option, item.index)"
-                  @mouseover="focusedOptionIndex = item.index"
-                  @focus="focusedOptionIndex = item.index"
+                  @mousemove="focusedOptionIndex = item.index"
                 >
-                  <input
-                    :id="`${name}-${item.index}`"
-                    v-model="radioValue"
-                    type="radio"
-                    :value="item.option"
-                    :name="name"
-                    class="hidden"
-                  />
-                  <label :for="`${name}-${item.index}`" class="w-full cursor-pointer">
-                    {{ displayName(item.option) }}
-                  </label>
+                  {{ displayName(item.option) }}
                 </div>
               </div>
             </div>
@@ -140,13 +124,14 @@ const emit = defineEmits<{
 const dropdownVisible = ref(false);
 const selectedValue = ref<OptionValue | null>(props.modelValue || props.defaultValue);
 const focusedOptionIndex = ref<number | null>(null);
-const focusedOptionRef = ref<HTMLElement | null>(null);
-const dropdown = ref<HTMLElement | null>(null);
 const optionsContainer = ref<HTMLElement | null>(null);
 const scrollTop = ref(0);
 const isRenderingUp = ref(false);
 const virtualListHeight = ref(300);
-const lastFocusedElement = ref<HTMLElement | null>(null);
+const isOpen = ref(false);
+const openDropdownCount = ref(0);
+const listboxId = `pyro-listbox-${Math.random().toString(36).substring(2, 11)}`;
+const triggerRef = ref<HTMLButtonElement | null>(null);
 
 const positionStyle = ref<CSSProperties>({
   position: "fixed",
@@ -156,41 +141,6 @@ const positionStyle = ref<CSSProperties>({
   zIndex: 999,
 });
 
-const handleOptionRef = (el: HTMLElement | null, index: number) => {
-  if (focusedOptionIndex.value === index) {
-    focusedOptionRef.value = el;
-  }
-};
-
-const onFocus = async () => {
-  if (!props.disabled) {
-    focusedOptionIndex.value = props.options.findIndex((option) => option === selectedValue.value);
-    lastFocusedElement.value = document.activeElement as HTMLElement;
-    dropdownVisible.value = true;
-    await updatePosition();
-    nextTick(() => {
-      dropdown.value?.focus();
-    });
-  }
-};
-
-const onBlur = (event: FocusEvent) => {
-  if (!isChildOfDropdown(event.relatedTarget as HTMLElement | null)) {
-    closeDropdown();
-  }
-};
-
-const isChildOfDropdown = (element: HTMLElement | null): boolean => {
-  let currentNode: HTMLElement | null = element;
-  while (currentNode) {
-    if (currentNode === dropdown.value || currentNode === optionsContainer.value) {
-      return true;
-    }
-    currentNode = currentNode.parentElement;
-  }
-  return false;
-};
-
 const totalHeight = computed(() => props.options.length * ITEM_HEIGHT);
 
 const visibleOptions = computed(() => {
@@ -227,16 +177,16 @@ const radioValue = computed<OptionValue>({
 });
 
 const triggerClasses = computed(() => ({
-  "cursor-not-allowed opacity-50 grayscale": props.disabled,
+  "!cursor-not-allowed opacity-50 grayscale": props.disabled,
   "rounded-b-none": dropdownVisible.value && !isRenderingUp.value && !props.disabled,
   "rounded-t-none": dropdownVisible.value && isRenderingUp.value && !props.disabled,
 }));
 
 const updatePosition = async () => {
-  if (!dropdown.value) return;
+  if (!triggerRef.value) return;
 
   await nextTick();
-  const triggerRect = dropdown.value.getBoundingClientRect();
+  const triggerRect = triggerRef.value.getBoundingClientRect();
   const viewportHeight = window.innerHeight;
   const margin = 8;
 
@@ -263,20 +213,6 @@ const updatePosition = async () => {
   };
 };
 
-const openDropdown = async () => {
-  if (!props.disabled) {
-    closeAllDropdowns();
-    dropdownVisible.value = true;
-    focusedOptionIndex.value = props.options.findIndex((option) => option === selectedValue.value);
-    lastFocusedElement.value = document.activeElement as HTMLElement;
-    await updatePosition();
-
-    requestAnimationFrame(() => {
-      updatePosition();
-    });
-  }
-};
-
 const toggleDropdown = () => {
   if (!props.disabled) {
     if (dropdownVisible.value) {
@@ -300,61 +236,6 @@ const handleScroll = (event: Event) => {
   scrollTop.value = target.scrollTop;
 };
 
-const handleKeyDown = (event: KeyboardEvent) => {
-  if (!dropdownVisible.value) {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      lastFocusedElement.value = document.activeElement as HTMLElement;
-      toggleDropdown();
-    }
-  } else {
-    handleDropdownKeyDown(event);
-  }
-};
-
-const handleDropdownKeyDown = (event: KeyboardEvent) => {
-  event.stopPropagation();
-
-  switch (event.key) {
-    case "ArrowDown":
-      event.preventDefault();
-      focusNextOption();
-      break;
-    case "ArrowUp":
-      event.preventDefault();
-      focusPreviousOption();
-      break;
-    case "Enter":
-      event.preventDefault();
-      if (focusedOptionIndex.value !== null) {
-        selectOption(props.options[focusedOptionIndex.value], focusedOptionIndex.value);
-      }
-      break;
-    case "Escape":
-      event.preventDefault();
-      event.stopPropagation();
-      closeDropdown();
-      break;
-    case "Tab":
-      event.preventDefault();
-      if (event.shiftKey) {
-        focusPreviousOption();
-      } else {
-        focusNextOption();
-      }
-      break;
-  }
-};
-
-const closeDropdown = () => {
-  dropdownVisible.value = false;
-  focusedOptionIndex.value = null;
-  if (lastFocusedElement.value) {
-    lastFocusedElement.value.focus();
-    lastFocusedElement.value = null;
-  }
-};
-
 const closeAllDropdowns = () => {
   const event = new CustomEvent("close-all-dropdowns");
   window.dispatchEvent(event);
@@ -373,9 +254,6 @@ const focusNextOption = () => {
     focusedOptionIndex.value = (focusedOptionIndex.value + 1) % props.options.length;
   }
   scrollToFocused();
-  nextTick(() => {
-    focusedOptionRef.value?.focus();
-  });
 };
 
 const focusPreviousOption = () => {
@@ -386,9 +264,6 @@ const focusPreviousOption = () => {
       (focusedOptionIndex.value - 1 + props.options.length) % props.options.length;
   }
   scrollToFocused();
-  nextTick(() => {
-    focusedOptionRef.value?.focus();
-  });
 };
 
 const scrollToFocused = () => {
@@ -407,6 +282,119 @@ const scrollToFocused = () => {
   }
 };
 
+const openDropdown = async () => {
+  if (!props.disabled) {
+    closeAllDropdowns();
+    dropdownVisible.value = true;
+    isOpen.value = true;
+    openDropdownCount.value++;
+    document.body.style.overflow = "hidden";
+    await updatePosition();
+
+    nextTick(() => {
+      optionsContainer.value?.focus();
+    });
+  }
+};
+
+const closeDropdown = () => {
+  if (isOpen.value) {
+    dropdownVisible.value = false;
+    isOpen.value = false;
+    openDropdownCount.value--;
+    if (openDropdownCount.value === 0) {
+      document.body.style.overflow = "";
+    }
+    focusedOptionIndex.value = null;
+    triggerRef.value?.focus();
+  }
+};
+
+const handleTriggerKeyDown = (event: KeyboardEvent) => {
+  switch (event.key) {
+    case "ArrowDown":
+    case "ArrowUp":
+      event.preventDefault();
+      if (!dropdownVisible.value) {
+        openDropdown();
+        focusedOptionIndex.value = event.key === "ArrowUp" ? props.options.length - 1 : 0;
+      } else if (event.key === "ArrowDown") {
+        focusNextOption();
+      } else {
+        focusPreviousOption();
+      }
+      break;
+    case "Enter":
+    case " ":
+      event.preventDefault();
+      if (!dropdownVisible.value) {
+        openDropdown();
+        focusedOptionIndex.value = 0;
+      } else if (focusedOptionIndex.value !== null) {
+        selectOption(props.options[focusedOptionIndex.value], focusedOptionIndex.value);
+      }
+      break;
+    case "Escape":
+      event.preventDefault();
+      closeDropdown();
+      break;
+    case "Tab":
+      if (dropdownVisible.value) {
+        event.preventDefault();
+      }
+      break;
+  }
+};
+
+const handleListboxKeyDown = (event: KeyboardEvent) => {
+  switch (event.key) {
+    case "Enter":
+    case " ":
+      event.preventDefault();
+      if (focusedOptionIndex.value !== null) {
+        selectOption(props.options[focusedOptionIndex.value], focusedOptionIndex.value);
+      }
+      break;
+    case "ArrowDown":
+      event.preventDefault();
+      focusNextOption();
+      break;
+    case "ArrowUp":
+      event.preventDefault();
+      focusPreviousOption();
+      break;
+    case "Escape":
+      event.preventDefault();
+      closeDropdown();
+      break;
+    case "Tab":
+      event.preventDefault();
+      break;
+    case "Home":
+      event.preventDefault();
+      focusedOptionIndex.value = 0;
+      scrollToFocused();
+      break;
+    case "End":
+      event.preventDefault();
+      focusedOptionIndex.value = props.options.length - 1;
+      scrollToFocused();
+      break;
+    default:
+      if (event.key.length === 1) {
+        const char = event.key.toLowerCase();
+        const index = props.options.findIndex((option) =>
+          props.displayName(option).toLowerCase().startsWith(char),
+        );
+        if (index !== -1) {
+          focusedOptionIndex.value = index;
+          scrollToFocused();
+        }
+      }
+      break;
+  }
+};
+
 onMounted(() => {
   window.addEventListener("resize", handleResize);
   window.addEventListener("scroll", handleResize, true);
@@ -416,6 +404,10 @@ onMounted(() => {
     }
   });
   window.addEventListener("close-all-dropdowns", closeDropdown);
+
+  if (selectedValue.value) {
+    focusedOptionIndex.value = props.options.findIndex((option) => option === selectedValue.value);
+  }
 });
 
 onUnmounted(() => {
@@ -427,7 +419,13 @@ onUnmounted(() => {
     }
   });
   window.removeEventListener("close-all-dropdowns", closeDropdown);
-  lastFocusedElement.value = null;
+
+  if (isOpen.value) {
+    openDropdownCount.value--;
+    if (openDropdownCount.value === 0) {
+      document.body.style.overflow = "";
+    }
+  }
 });
 
 watch(
@@ -443,4 +441,19 @@ watch(dropdownVisible, async (newValue) => {
     scrollTop.value = 0;
   }
 });
+
+const activeDescendant = computed(() =>
+  focusedOptionIndex.value !== null ? `${listboxId}-option-${focusedOptionIndex.value}` : undefined,
+);
+
+const isChildOfDropdown = (element: HTMLElement | null): boolean => {
+  let currentNode: HTMLElement | null = element;
+  while (currentNode) {
+    if (currentNode === triggerRef.value || currentNode === optionsContainer.value) {
+      return true;
+    }
+    currentNode = currentNode.parentElement;
+  }
+  return false;
+};
 </script>
diff --git a/apps/frontend/src/components/ui/servers/icons/ChevronDownIcon.vue b/apps/frontend/src/components/ui/servers/icons/ChevronDownIcon.vue
new file mode 100644
index 000000000..214e30629
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/icons/ChevronDownIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-chevron-down"
+  >
+    <path d="m6 9 6 6 6-6" />
+  </svg>
+</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/ChevronUpIcon.vue b/apps/frontend/src/components/ui/servers/icons/ChevronUpIcon.vue
new file mode 100644
index 000000000..1aeb315c4
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/icons/ChevronUpIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-chevron-up"
+  >
+    <path d="m18 15-6-6-6 6" />
+  </svg>
+</template>
diff --git a/apps/frontend/src/components/ui/servers/PanelTerminalFullscreen.vue b/apps/frontend/src/components/ui/servers/icons/FullscreenIcon.vue
similarity index 100%
rename from apps/frontend/src/components/ui/servers/PanelTerminalFullscreen.vue
rename to apps/frontend/src/components/ui/servers/icons/FullscreenIcon.vue
diff --git a/apps/frontend/src/components/ui/servers/PanelTerminalMinimize.vue b/apps/frontend/src/components/ui/servers/icons/MinimizeIcon.vue.vue
similarity index 100%
rename from apps/frontend/src/components/ui/servers/PanelTerminalMinimize.vue
rename to apps/frontend/src/components/ui/servers/icons/MinimizeIcon.vue.vue
diff --git a/apps/frontend/src/components/ui/servers/Timer.vue b/apps/frontend/src/components/ui/servers/icons/Timer.vue
similarity index 100%
rename from apps/frontend/src/components/ui/servers/Timer.vue
rename to apps/frontend/src/components/ui/servers/icons/Timer.vue
diff --git a/apps/frontend/src/composables/auth.js b/apps/frontend/src/composables/auth.js
index ea2505090..978a4d844 100644
--- a/apps/frontend/src/composables/auth.js
+++ b/apps/frontend/src/composables/auth.js
@@ -104,22 +104,15 @@ export const initAuth = async (oldToken = null) => {
   return auth;
 };
 
-export const getAuthUrl = (provider, redirect = "") => {
+export const getAuthUrl = (provider, redirect = "/dashboard") => {
   const config = useRuntimeConfig();
   const route = useNativeRoute();
 
-  if (redirect === "") {
-    redirect = route.path;
-  }
+  const fullURL = route.query.launcher
+    ? "https://launcher-files.modrinth.com"
+    : `${config.public.siteUrl}/auth/sign-in?redirect=${redirect}`;
 
-  let fullURL;
-  if (route.query.launcher) {
-    fullURL = `https://launcher-files.modrinth.com`;
-  } else {
-    fullURL = `${config.public.siteUrl}${redirect}`;
-  }
-
-  return `${config.public.apiBaseUrl}auth/init?provider=${provider}&url=${fullURL}`;
+  return `${config.public.apiBaseUrl}auth/init?provider=${provider}&url=${encodeURIComponent(fullURL)}`;
 };
 
 export const removeAuthProvider = async (provider) => {
diff --git a/apps/frontend/src/composables/featureFlags.ts b/apps/frontend/src/composables/featureFlags.ts
index a259071f6..e6a932590 100644
--- a/apps/frontend/src/composables/featureFlags.ts
+++ b/apps/frontend/src/composables/featureFlags.ts
@@ -21,6 +21,7 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
   developerMode: false,
   showVersionFilesInTable: false,
   showAdsWithPlus: false,
+  alwaysShowChecklistAsPopup: true,
 
   // Feature toggles
   projectTypesPrimaryNav: false,
diff --git a/apps/frontend/src/composables/pyroServers.ts b/apps/frontend/src/composables/pyroServers.ts
index 74f76e3a5..206063a25 100644
--- a/apps/frontend/src/composables/pyroServers.ts
+++ b/apps/frontend/src/composables/pyroServers.ts
@@ -10,19 +10,111 @@ interface PyroFetchOptions {
     url?: string;
     token?: string;
   };
-  retry?: boolean;
+  retry?: number | boolean;
 }
 
-async function PyroFetch<T>(path: string, options: PyroFetchOptions = {}): Promise<T> {
+class PyroServerError extends Error {
+  public readonly errors: Map<string, Error> = new Map();
+  public readonly timestamp: number = Date.now();
+
+  constructor(message?: string) {
+    super(message || "Multiple errors occurred");
+    this.name = "PyroServerError";
+  }
+
+  addError(module: string, error: Error) {
+    this.errors.set(module, error);
+    this.message = this.buildErrorMessage();
+  }
+
+  hasErrors() {
+    return this.errors.size > 0;
+  }
+
+  private buildErrorMessage(): string {
+    return Array.from(this.errors.entries())
+      .map(([_module, error]) => error.message)
+      .join("\n");
+  }
+}
+
+export class PyroServersFetchError extends Error {
+  constructor(
+    message: string,
+    public readonly statusCode?: number,
+    public readonly originalError?: Error,
+    public readonly module?: string,
+  ) {
+    let errorMessage = message;
+    let method = "GET";
+    let path = "";
+
+    if (originalError instanceof FetchError) {
+      const matches = message.match(/\[([A-Z]+)\]\s+"([^"]+)":/);
+      if (matches) {
+        method = matches[1];
+        path = matches[2].replace(/https?:\/\/[^/]+\/[^/]+\/v\d+\//, "");
+      }
+
+      const statusMessage = (() => {
+        if (!statusCode) return "Unknown Error";
+        switch (statusCode) {
+          case 400:
+            return "Bad Request";
+          case 401:
+            return "Unauthorized";
+          case 403:
+            return "Forbidden";
+          case 404:
+            return "Not Found";
+          case 408:
+            return "Request Timeout";
+          case 429:
+            return "Too Many Requests";
+          case 500:
+            return "Internal Server Error";
+          case 502:
+            return "Bad Gateway";
+          case 503:
+            return "Service Unavailable";
+          case 504:
+            return "Gateway Timeout";
+          default:
+            return `HTTP ${statusCode}`;
+        }
+      })();
+
+      errorMessage = `[${method}] ${statusMessage} (${statusCode}) while fetching ${path}${module ? ` in ${module}` : ""}`;
+    } else {
+      errorMessage = `${message}${statusCode ? ` (${statusCode})` : ""}${module ? ` in ${module}` : ""}`;
+    }
+
+    super(errorMessage);
+    this.name = "PyroServersFetchError";
+  }
+}
+
+async function PyroFetch<T>(
+  path: string,
+  options: PyroFetchOptions = {},
+  module?: string,
+): Promise<T> {
   const config = useRuntimeConfig();
   const auth = await useAuth();
   const authToken = auth.value?.token;
 
   if (!authToken) {
-    throw new PyroFetchError("Cannot pyrofetch without auth", 10000);
+    throw new PyroServersFetchError("Missing auth token", 401, undefined, module);
   }
 
-  const { method = "GET", contentType = "application/json", body, version = 0, override } = options;
+  const {
+    method = "GET",
+    contentType = "application/json",
+    body,
+    version = 0,
+    override,
+    retry = method === "GET" ? 3 : 0,
+  } = options;
 
   const base = (import.meta.server ? config.pyroBaseUrl : config.public.pyroBaseUrl)?.replace(
     /\/$/,
@@ -30,9 +122,11 @@ async function PyroFetch<T>(path: string, options: PyroFetchOptions = {}): Promi
   );
 
   if (!base) {
-    throw new PyroFetchError(
-      "Cannot pyrofetch without base url. Make sure to set a PYRO_BASE_URL in environment variables",
-      10001,
+    throw new PyroServersFetchError(
+      "Configuration error: Missing PYRO_BASE_URL",
+      500,
+      undefined,
+      module,
     );
   }
 
@@ -40,9 +134,7 @@ async function PyroFetch<T>(path: string, options: PyroFetchOptions = {}): Promi
     ? `https://${override.url}/${path.replace(/^\//, "")}`
     : `${base}/modrinth/v${version}/${path.replace(/^\//, "")}`;
 
-  type HeadersRecord = Record<string, string>;
-
-  const headers: HeadersRecord = {
+  const headers: Record<string, string> = {
     Authorization: `Bearer ${override?.token ?? authToken}`,
     "Access-Control-Allow-Headers": "Authorization",
     "User-Agent": "Pyro/1.0 (https://pyro.host)",
@@ -57,43 +149,47 @@ async function PyroFetch<T>(path: string, options: PyroFetchOptions = {}): Promi
     headers.Origin = window.location.origin;
   }
 
-  try {
-    const response = await $fetch<T>(fullUrl, {
-      method,
-      headers,
-      body: body && contentType === "application/json" ? JSON.stringify(body) : body ?? undefined,
-      timeout: 10000,
-      retry: options.retry !== false ? (method === "GET" ? 3 : 0) : 0,
-    });
-    return response;
-  } catch (error) {
-    console.error("[PyroServers/PyroFetch]:", error);
-    if (error instanceof FetchError) {
-      const statusCode = error.response?.status;
-      const statusText = error.response?.statusText || "[no status text available]";
-      const errorMessages: { [key: number]: string } = {
-        400: "Bad Request",
-        401: "Unauthorized",
-        403: "Forbidden",
-        404: "Not Found",
-        405: "Method Not Allowed",
-        429: "Too Many Requests",
-        500: "Internal Server Error",
-        502: "Bad Gateway",
-        503: "Service Unavailable",
-      };
-      const message =
-        statusCode && statusCode in errorMessages
-          ? errorMessages[statusCode]
-          : `HTTP Error: ${statusCode || "[unhandled status code]"} ${statusText}`;
-      throw new PyroFetchError(`[PyroServers/PyroFetch] ${message}`, statusCode, error);
+  let attempts = 0;
+  const maxAttempts = (typeof retry === "boolean" ? (retry ? 1 : 0) : retry) + 1;
+  let lastError: Error | null = null;
+
+  while (attempts < maxAttempts) {
+    try {
+      const response = await $fetch<T>(fullUrl, {
+        method,
+        headers,
+        body: body && contentType === "application/json" ? JSON.stringify(body) : body ?? undefined,
+        timeout: 10000,
+      });
+
+      return response;
+    } catch (error) {
+      lastError = error as Error;
+      attempts++;
+
+      if (error instanceof FetchError) {
+        const statusCode = error.response?.status;
+        const isRetryable = statusCode ? [408, 429, 500, 502, 503, 504].includes(statusCode) : true;
+
+        if (!isRetryable || attempts >= maxAttempts) {
+          throw new PyroServersFetchError(error.message, statusCode, error, module);
+        }
+
+        const delay = Math.min(1000 * Math.pow(2, attempts - 1) + Math.random() * 1000, 10000);
+        await new Promise((resolve) => setTimeout(resolve, delay));
+        continue;
+      }
+
+      throw new PyroServersFetchError(
+        "Unexpected error during fetch operation",
+        undefined,
+        error as Error,
+        module,
+      );
     }
-    throw new PyroFetchError(
-      "[PyroServers/PyroFetch] An unexpected error occurred during the fetch operation.",
-      undefined,
-      error as Error,
-    );
   }
+
+  throw lastError || new Error("Maximum retry attempts reached");
 }
 
 const internalServerRefrence = ref<any>(null);
@@ -252,7 +348,7 @@ export interface DirectoryResponse {
   current?: number;
 }
 
-type ContentType = "Mod" | "Plugin";
+type ContentType = "mod" | "plugin";
 
 const constructServerProperties = (properties: any): string => {
   let fileContent = `#Minecraft server properties\n#${new Date().toUTCString()}\n`;
@@ -271,95 +367,96 @@ const constructServerProperties = (properties: any): string => {
 };
 
 const processImage = async (iconUrl: string | undefined) => {
-  const image = ref<string | null>(null);
-  const auth = await PyroFetch<JWTAuth>(`servers/${internalServerRefrence.value.serverId}/fs`);
-  try {
-    const fileData = await PyroFetch(`/download?path=/server-icon-original.png`, {
-      override: auth,
-      retry: false,
-    });
+  const sharedImage = useState<string | undefined>(
+    `server-icon-${internalServerRefrence.value.serverId}`,
+  );
 
-    if (fileData instanceof Blob) {
-      if (import.meta.client) {
-        const canvas = document.createElement("canvas");
-        const ctx = canvas.getContext("2d");
-        const img = new Image();
-        img.src = URL.createObjectURL(fileData);
-        await new Promise<void>((resolve) => {
-          img.onload = () => {
-            canvas.width = 512;
-            canvas.height = 512;
-            ctx?.drawImage(img, 0, 0, 512, 512);
-            const dataURL = canvas.toDataURL("image/png");
-            internalServerRefrence.value.general.image = dataURL;
-            image.value = dataURL;
-            resolve();
-          };
-        });
-      }
-    }
-  } catch (error) {
-    if (error instanceof PyroFetchError && error.statusCode === 404) {
-      console.log("[PYROSERVERS] No server icon found");
-    } else {
-      console.error(error);
-    }
+  if (sharedImage.value) {
+    return sharedImage.value;
   }
 
-  if (image.value === null && iconUrl) {
-    console.log("iconUrl", iconUrl);
+  try {
+    const auth = await PyroFetch<JWTAuth>(`servers/${internalServerRefrence.value.serverId}/fs`);
     try {
-      const response = await fetch(iconUrl);
-      const file = await response.blob();
-      const originalfile = new File([file], "server-icon-original.png", {
-        type: "image/png",
+      const fileData = await PyroFetch(`/download?path=/server-icon-original.png`, {
+        override: auth,
+        retry: false,
       });
-      if (import.meta.client) {
-        const scaledFile = await new Promise<File>((resolve, reject) => {
-          const canvas = document.createElement("canvas");
-          const ctx = canvas.getContext("2d");
-          const img = new Image();
-          img.src = URL.createObjectURL(file);
-          img.onload = () => {
-            canvas.width = 64;
-            canvas.height = 64;
-            ctx?.drawImage(img, 0, 0, 64, 64);
-            canvas.toBlob((blob) => {
-              if (blob) {
-                const data = new File([blob], "server-icon.png", { type: "image/png" });
-                resolve(data);
-              } else {
-                reject(new Error("Canvas toBlob failed"));
-              }
-            }, "image/png");
-          };
-          img.onerror = reject;
-        });
-        if (scaledFile) {
-          await PyroFetch(`/create?path=/server-icon.png&type=file`, {
-            method: "POST",
-            contentType: "application/octet-stream",
-            body: scaledFile,
-            override: auth,
-          });
 
-          await PyroFetch(`/create?path=/server-icon-original.png&type=file`, {
-            method: "POST",
-            contentType: "application/octet-stream",
-            body: originalfile,
-            override: auth,
+      if (fileData instanceof Blob) {
+        if (import.meta.client) {
+          const dataURL = await new Promise<string>((resolve) => {
+            const canvas = document.createElement("canvas");
+            const ctx = canvas.getContext("2d");
+            const img = new Image();
+            img.onload = () => {
+              canvas.width = 512;
+              canvas.height = 512;
+              ctx?.drawImage(img, 0, 0, 512, 512);
+              const dataURL = canvas.toDataURL("image/png");
+              sharedImage.value = dataURL;
+              resolve(dataURL);
+              URL.revokeObjectURL(img.src);
+            };
+            img.src = URL.createObjectURL(fileData);
           });
+          return dataURL;
         }
       }
     } catch (error) {
-      if (error instanceof PyroFetchError && error.statusCode === 404) {
-        console.log("[PYROSERVERS] No server icon found");
-      } else {
-        console.error(error);
+      if (error instanceof PyroServersFetchError && error.statusCode === 404 && iconUrl) {
+        try {
+          const response = await fetch(iconUrl);
+          if (!response.ok) throw new Error("Failed to fetch icon");
+          const file = await response.blob();
+          const originalFile = new File([file], "server-icon-original.png", { type: "image/png" });
+
+          if (import.meta.client) {
+            const dataURL = await new Promise<string>((resolve) => {
+              const canvas = document.createElement("canvas");
+              const ctx = canvas.getContext("2d");
+              const img = new Image();
+              img.onload = () => {
+                canvas.width = 64;
+                canvas.height = 64;
+                ctx?.drawImage(img, 0, 0, 64, 64);
+                canvas.toBlob(async (blob) => {
+                  if (blob) {
+                    const scaledFile = new File([blob], "server-icon.png", { type: "image/png" });
+                    await PyroFetch(`/create?path=/server-icon.png&type=file`, {
+                      method: "POST",
+                      contentType: "application/octet-stream",
+                      body: scaledFile,
+                      override: auth,
+                    });
+                    await PyroFetch(`/create?path=/server-icon-original.png&type=file`, {
+                      method: "POST",
+                      contentType: "application/octet-stream",
+                      body: originalFile,
+                      override: auth,
+                    });
+                  }
+                }, "image/png");
+                const dataURL = canvas.toDataURL("image/png");
+                sharedImage.value = dataURL;
+                resolve(dataURL);
+                URL.revokeObjectURL(img.src);
+              };
+              img.src = URL.createObjectURL(file);
+            });
+            return dataURL;
+          }
+        } catch (error) {
+          console.error("Failed to process external icon:", error);
+        }
       }
     }
+  } catch (error) {
+    console.error("Failed to process server icon:", error);
   }
-  return image.value;
+
+  sharedImage.value = undefined;
+  return undefined;
 };
 
 // ------------------ GENERAL ------------------ //
@@ -519,8 +616,8 @@ const installContent = async (contentType: ContentType, projectId: string, versi
     await PyroFetch(`servers/${internalServerRefrence.value.serverId}/mods`, {
       method: "POST",
       body: {
-        install_as: contentType,
         rinth_ids: { project_id: projectId, version_id: versionId },
+        install_as: contentType,
       },
     });
   } catch (error) {
@@ -529,13 +626,12 @@ const installContent = async (contentType: ContentType, projectId: string, versi
   }
 };
 
-const removeContent = async (contentType: ContentType, contentId: string) => {
+const removeContent = async (path: string) => {
   try {
     await PyroFetch(`servers/${internalServerRefrence.value.serverId}/deleteMod`, {
       method: "POST",
       body: {
-        install_as: contentType,
-        path: contentId,
+        path,
       },
     });
   } catch (error) {
@@ -544,15 +640,11 @@ const removeContent = async (contentType: ContentType, contentId: string) => {
   }
 };
 
-const reinstallContent = async (
-  contentType: ContentType,
-  contentId: string,
-  newContentId: string,
-) => {
+const reinstallContent = async (replace: string, projectId: string, versionId: string) => {
   try {
-    await PyroFetch(`servers/${internalServerRefrence.value.serverId}/mods/${contentId}`, {
-      method: "PUT",
-      body: { install_as: contentType, version_id: newContentId },
+    await PyroFetch(`servers/${internalServerRefrence.value.serverId}/mods/update`, {
+      method: "POST",
+      body: { replace, project_id: projectId, version_id: versionId },
     });
   } catch (error) {
     console.error("Error reinstalling mod:", error);
@@ -564,10 +656,14 @@ const reinstallContent = async (
 
 const createBackup = async (backupName: string) => {
   try {
-    const response = (await PyroFetch(`servers/${internalServerRefrence.value.serverId}/backups`, {
-      method: "POST",
-      body: { name: backupName },
-    })) as { id: string };
+    const response = await PyroFetch<{ id: string }>(
+      `servers/${internalServerRefrence.value.serverId}/backups`,
+      {
+        method: "POST",
+        body: { name: backupName },
+      },
+    );
+    await internalServerRefrence.value.refresh(["backups"]);
     return response.id;
   } catch (error) {
     console.error("Error creating backup:", error);
@@ -581,6 +677,7 @@ const renameBackup = async (backupId: string, newName: string) => {
       method: "POST",
       body: { name: newName },
     });
+    await internalServerRefrence.value.refresh(["backups"]);
   } catch (error) {
     console.error("Error renaming backup:", error);
     throw error;
@@ -592,6 +689,7 @@ const deleteBackup = async (backupId: string) => {
     await PyroFetch(`servers/${internalServerRefrence.value.serverId}/backups/${backupId}`, {
       method: "DELETE",
     });
+    await internalServerRefrence.value.refresh(["backups"]);
   } catch (error) {
     console.error("Error deleting backup:", error);
     throw error;
@@ -606,6 +704,7 @@ const restoreBackup = async (backupId: string) => {
         method: "POST",
       },
     );
+    await internalServerRefrence.value.refresh(["backups"]);
   } catch (error) {
     console.error("Error restoring backup:", error);
     throw error;
@@ -644,12 +743,10 @@ const getAutoBackup = async () => {
 
 const lockBackup = async (backupId: string) => {
   try {
-    return await PyroFetch(
-      `servers/${internalServerRefrence.value.serverId}/backups/${backupId}/lock`,
-      {
-        method: "POST",
-      },
-    );
+    await PyroFetch(`servers/${internalServerRefrence.value.serverId}/backups/${backupId}/lock`, {
+      method: "POST",
+    });
+    await internalServerRefrence.value.refresh(["backups"]);
   } catch (error) {
     console.error("Error locking backup:", error);
     throw error;
@@ -658,14 +755,12 @@ const lockBackup = async (backupId: string) => {
 
 const unlockBackup = async (backupId: string) => {
   try {
-    return await PyroFetch(
-      `servers/${internalServerRefrence.value.serverId}/backups/${backupId}/unlock`,
-      {
-        method: "POST",
-      },
-    );
+    await PyroFetch(`servers/${internalServerRefrence.value.serverId}/backups/${backupId}/unlock`, {
+      method: "POST",
+    });
+    await internalServerRefrence.value.refresh(["backups"]);
   } catch (error) {
-    console.error("Error locking backup:", error);
+    console.error("Error unlocking backup:", error);
     throw error;
   }
 };
@@ -760,7 +855,7 @@ const retryWithAuth = async (requestFn: () => Promise<any>) => {
   try {
     return await requestFn();
   } catch (error) {
-    if (error instanceof PyroFetchError && error.statusCode === 401) {
+    if (error instanceof PyroServersFetchError && error.statusCode === 401) {
       await internalServerRefrence.value.refresh(["fs"]);
       return await requestFn();
     }
@@ -947,17 +1042,18 @@ const modules: any = {
   general: {
     get: async (serverId: string) => {
       try {
-        const data = await PyroFetch<General>(`servers/${serverId}`);
-        // TODO: temp hack to fix hydration error
+        const data = await PyroFetch<General>(`servers/${serverId}`, {}, "general");
         if (data.upstream?.project_id) {
           const res = await $fetch(
             `https://api.modrinth.com/v2/project/${data.upstream.project_id}`,
           );
           data.project = res as Project;
         }
+
         if (import.meta.client) {
           data.image = (await processImage(data.project?.icon_url)) ?? undefined;
         }
+
         const motd = await getMotd();
         if (motd === "A Minecraft Server") {
           await setMotd(
@@ -967,8 +1063,19 @@ const modules: any = {
         data.motd = motd;
         return data;
       } catch (error) {
-        internalServerRefrence.value.setError(error);
-        return undefined;
+        const fetchError =
+          error instanceof PyroServersFetchError
+            ? error
+            : new PyroServersFetchError("Unknown error occurred", undefined, error as Error);
+
+        return {
+          status: "error",
+          server_id: serverId,
+          error: {
+            error: fetchError,
+            timestamp: Date.now(),
+          },
+        };
       }
     },
     updateName,
@@ -978,21 +1085,27 @@ const modules: any = {
     suspend: suspendServer,
     getMotd,
     setMotd,
-    fetchConfigFile,
   },
   content: {
     get: async (serverId: string) => {
       try {
-        const mods = await PyroFetch<Mod[]>(`servers/${serverId}/mods`);
+        const mods = await PyroFetch<Mod[]>(`servers/${serverId}/mods`, {}, "content");
         return {
-          data:
-            internalServerRefrence.value.error === undefined
-              ? mods.sort((a, b) => (a?.name ?? "").localeCompare(b?.name ?? ""))
-              : [],
+          data: mods.sort((a, b) => (a?.name ?? "").localeCompare(b?.name ?? "")),
         };
       } catch (error) {
-        internalServerRefrence.value.setError(error);
-        return undefined;
+        const fetchError =
+          error instanceof PyroServersFetchError
+            ? error
+            : new PyroServersFetchError("Unknown error occurred", undefined, error as Error);
+
+        return {
+          data: [],
+          error: {
+            error: fetchError,
+            timestamp: Date.now(),
+          },
+        };
       }
     },
     install: installContent,
@@ -1002,10 +1115,22 @@ const modules: any = {
   backups: {
     get: async (serverId: string) => {
       try {
-        return { data: await PyroFetch<Backup[]>(`servers/${serverId}/backups`) };
+        return {
+          data: await PyroFetch<Backup[]>(`servers/${serverId}/backups`, {}, "backups"),
+        };
       } catch (error) {
-        internalServerRefrence.value.setError(error);
-        return undefined;
+        const fetchError =
+          error instanceof PyroServersFetchError
+            ? error
+            : new PyroServersFetchError("Unknown error occurred", undefined, error as Error);
+
+        return {
+          data: [],
+          error: {
+            error: fetchError,
+            timestamp: Date.now(),
+          },
+        };
       }
     },
     create: createBackup,
@@ -1021,10 +1146,26 @@ const modules: any = {
   network: {
     get: async (serverId: string) => {
       try {
-        return { allocations: await PyroFetch<Allocation[]>(`servers/${serverId}/allocations`) };
+        return {
+          allocations: await PyroFetch<Allocation[]>(
+            `servers/${serverId}/allocations`,
+            {},
+            "network",
+          ),
+        };
       } catch (error) {
-        internalServerRefrence.value.setError(error);
-        return undefined;
+        const fetchError =
+          error instanceof PyroServersFetchError
+            ? error
+            : new PyroServersFetchError("Unknown error occurred", undefined, error as Error);
+
+        return {
+          allocations: [],
+          error: {
+            error: fetchError,
+            timestamp: Date.now(),
+          },
+        };
       }
     },
     reserveAllocation,
@@ -1036,10 +1177,19 @@ const modules: any = {
   startup: {
     get: async (serverId: string) => {
       try {
-        return await PyroFetch<Startup>(`servers/${serverId}/startup`);
+        return await PyroFetch<Startup>(`servers/${serverId}/startup`, {}, "startup");
       } catch (error) {
-        internalServerRefrence.value.setError(error);
-        return undefined;
+        const fetchError =
+          error instanceof PyroServersFetchError
+            ? error
+            : new PyroServersFetchError("Unknown error occurred", undefined, error as Error);
+
+        return {
+          error: {
+            error: fetchError,
+            timestamp: Date.now(),
+          },
+        };
       }
     },
     update: updateStartupSettings,
@@ -1047,20 +1197,39 @@ const modules: any = {
   ws: {
     get: async (serverId: string) => {
       try {
-        return await PyroFetch<JWTAuth>(`servers/${serverId}/ws`);
+        return await PyroFetch<JWTAuth>(`servers/${serverId}/ws`, {}, "ws");
       } catch (error) {
-        internalServerRefrence.value.setError(error);
-        return undefined;
+        const fetchError =
+          error instanceof PyroServersFetchError
+            ? error
+            : new PyroServersFetchError("Unknown error occurred", undefined, error as Error);
+
+        return {
+          error: {
+            error: fetchError,
+            timestamp: Date.now(),
+          },
+        };
       }
     },
   },
   fs: {
     get: async (serverId: string) => {
       try {
-        return { auth: await PyroFetch<JWTAuth>(`servers/${serverId}/fs`) };
+        return { auth: await PyroFetch<JWTAuth>(`servers/${serverId}/fs`, {}, "fs") };
       } catch (error) {
-        internalServerRefrence.value.setError(error);
-        return undefined;
+        const fetchError =
+          error instanceof PyroServersFetchError
+            ? error
+            : new PyroServersFetchError("Unknown error occurred", undefined, error as Error);
+
+        return {
+          auth: undefined,
+          error: {
+            error: fetchError,
+            timestamp: Date.now(),
+          },
+        };
       }
     },
     listDirContents,
@@ -1136,8 +1305,7 @@ type GeneralFunctions = {
   setMotd: (motd: string) => Promise<void>;
 
   /**
-   * INTERNAL: Gets the config file of a server.
-   * @param fileName - The name of the file.
+   * @deprecated Use fs.downloadFile instead
    */
   fetchConfigFile: (fileName: string) => Promise<any>;
 };
@@ -1160,18 +1328,17 @@ type ContentFunctions = {
 
   /**
    * Removes a mod from a server.
-   * @param contentType - The type of content to remove.
-   * @param contentId - The ID of the content.
+   * @param path - The path of the mod file.
    */
-  remove: (contentType: ContentType, contentId: string) => Promise<void>;
+  remove: (path: string) => Promise<void>;
 
   /**
    * Reinstalls a mod to a server.
-   * @param contentType - The type of content to reinstall.
-   * @param contentId - The ID of the content.
-   * @param newContentId - The ID of the new version.
+   * @param replace - The path of the mod to replace.
+   * @param projectId - The ID of the content.
+   * @param versionId - The ID of the new version.
    */
-  reinstall: (contentType: ContentType, contentId: string, newContentId: string) => Promise<void>;
+  reinstall: (replace: string, projectId: string, versionId: string) => Promise<void>;
 };
 
 type BackupFunctions = {
@@ -1370,12 +1537,44 @@ type FSFunctions = {
   downloadFile: (path: string, raw?: boolean) => Promise<any>;
 };
 
-type GeneralModule = General & GeneralFunctions;
-type ContentModule = { data: Mod[] } & ContentFunctions;
-type BackupsModule = { data: Backup[] } & BackupFunctions;
-type NetworkModule = { allocations: Allocation[] } & NetworkFunctions;
-type StartupModule = Startup & StartupFunctions;
-export type FSModule = { auth: JWTAuth } & FSFunctions;
+type ModuleError = {
+  error: PyroServersFetchError;
+  timestamp: number;
+};
+
+type GeneralModule = General &
+  GeneralFunctions & {
+    error?: ModuleError;
+  };
+
+type ContentModule = {
+  data: Mod[];
+  error?: ModuleError;
+} & ContentFunctions;
+
+type BackupsModule = {
+  data: Backup[];
+  error?: ModuleError;
+} & BackupFunctions;
+
+type NetworkModule = {
+  allocations: Allocation[];
+  error?: ModuleError;
+} & NetworkFunctions;
+
+type StartupModule = Startup &
+  StartupFunctions & {
+    error?: ModuleError;
+  };
+
+type WSModule = JWTAuth & {
+  error?: ModuleError;
+};
+
+type FSModule = {
+  auth: JWTAuth;
+  error?: ModuleError;
+} & FSFunctions;
 
 type ModulesMap = {
   general: GeneralModule;
@@ -1383,7 +1582,7 @@ type ModulesMap = {
   backups: BackupsModule;
   network: NetworkModule;
   startup: StartupModule;
-  ws: JWTAuth;
+  ws: WSModule;
   fs: FSModule;
 };
 
@@ -1395,8 +1594,16 @@ export type Server<T extends avaliableModules> = {
   /**
    * Refreshes the included modules of the server
    * @param refreshModules - The modules to refresh.
+   * @param options - The options to use when refreshing the modules.
    */
-  refresh: (refreshModules?: avaliableModules) => Promise<void>;
+  refresh: (
+    refreshModules?: avaliableModules,
+    options?: {
+      preserveConnection?: boolean;
+      preserveInstallState?: boolean;
+    },
+  ) => Promise<void>;
+  loadModules: (modulesToLoad: avaliableModules) => Promise<void>;
   setError: (error: Error) => void;
   error?: Error;
   serverId: string;
@@ -1404,49 +1611,103 @@ export type Server<T extends avaliableModules> = {
 
 export const usePyroServer = async (serverId: string, includedModules: avaliableModules) => {
   const server: Server<typeof includedModules> = reactive({
-    refresh: async (refreshModules?: avaliableModules) => {
-      const promises: Promise<void>[] = [];
-      if (refreshModules) {
-        for (const module of refreshModules) {
-          promises.push(
-            (async () => {
-              const mods = modules[module];
-              if (mods.get) {
-                const data = await mods.get(serverId);
-                server[module] = { ...server[module], ...data };
-              }
-            })(),
-          );
+    refresh: async (
+      refreshModules?: avaliableModules,
+      options?: {
+        preserveConnection?: boolean;
+        preserveInstallState?: boolean;
+      },
+    ) => {
+      if (server.general?.status === "installing" && !refreshModules) {
+        return;
+      }
+
+      const modulesToRefresh = [...new Set(refreshModules || includedModules)];
+      const serverError = new PyroServerError();
+
+      const modulePromises = modulesToRefresh.map(async (module) => {
+        try {
+          const mods = modules[module];
+          if (!mods?.get) return;
+
+          const data = await mods.get(serverId);
+          if (!data) return;
+
+          if (module === "general" && options?.preserveConnection) {
+            server[module] = {
+              ...server[module],
+              ...data,
+              image: server[module]?.image || data.image,
+              motd: server[module]?.motd || data.motd,
+              status:
+                options.preserveInstallState && server[module]?.status === "installing"
+                  ? "installing"
+                  : data.status,
+            };
+          } else {
+            server[module] = { ...server[module], ...data };
+          }
+        } catch (error) {
+          console.error(`Failed to refresh module ${module}:`, error);
+          if (error instanceof Error) {
+            serverError.addError(module, error);
+          }
         }
-      } else {
-        for (const module of includedModules) {
-          promises.push(
-            (async () => {
-              const mods = modules[module];
-              if (mods.get) {
-                const data = await mods.get(serverId);
-                server[module] = { ...server[module], ...data };
-              }
-            })(),
-          );
+      });
+
+      await Promise.allSettled(modulePromises);
+
+      if (serverError.hasErrors()) {
+        if (server.error && server.error instanceof PyroServerError) {
+          serverError.errors.forEach((error, module) => {
+            (server.error as PyroServerError).addError(module, error);
+          });
+        } else {
+          server.setError(serverError);
         }
       }
-      await Promise.all(promises);
+    },
+    loadModules: async (modulesToLoad: avaliableModules) => {
+      const newModules = modulesToLoad.filter((module) => !server[module]);
+      if (newModules.length === 0) return;
+
+      newModules.forEach((module) => {
+        server[module] = modules[module];
+      });
+
+      await server.refresh(newModules);
     },
     setError: (error: Error) => {
-      server.error = error;
+      if (!server.error) {
+        server.error = error;
+      } else if (error instanceof PyroServerError) {
+        if (!(server.error instanceof PyroServerError)) {
+          const newError = new PyroServerError();
+          newError.addError("previous", server.error);
+          server.error = newError;
+        }
+        error.errors.forEach((err, module) => {
+          (server.error as PyroServerError).addError(module, err);
+        });
+      }
     },
+
     serverId,
   });
 
-  for (const module of includedModules) {
-    const mods = modules[module];
-    server[module] = mods;
-  }
+  const initialModules = includedModules.filter((module) => ["general", "ws"].includes(module));
+  const deferredModules = includedModules.filter((module) => !["general", "ws"].includes(module));
+
+  initialModules.forEach((module) => {
+    server[module] = modules[module];
+  });
 
   internalServerRefrence.value = server;
+  await server.refresh(initialModules);
 
-  await server.refresh();
+  if (deferredModules.length > 0) {
+    await server.loadModules(deferredModules);
+  }
 
   return server as Server<typeof includedModules>;
 };
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 25c977363..1e2297b69 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -5,6 +5,27 @@
   <div class="pointer-events-none absolute inset-0 z-[-1]">
     <div id="absolute-background-teleport" class="relative"></div>
   </div>
+  <div class="pointer-events-none absolute inset-0 z-50">
+    <div
+      class="over-the-top-random-animation"
+      :style="{ '--_r-count': rCount }"
+      :class="{ threshold: rCount > 20, 'rings-expand': rCount >= 40 }"
+    >
+      <div>
+        <div
+          class="animation-ring-3 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight opacity-40"
+        ></div>
+        <div
+          class="animation-ring-2 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight opacity-60"
+        ></div>
+        <div
+          class="animation-ring-1 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight text-9xl font-extrabold text-contrast"
+        >
+          ?
+        </div>
+      </div>
+    </div>
+  </div>
   <div ref="main_page" class="layout" :class="{ 'expanded-mobile-nav': isBrowseMenuOpen }">
     <div
       v-if="auth.user && !auth.user.email_verified && route.path !== '/auth/verify-email'"
@@ -206,7 +227,6 @@
               <template #modpacks> <PackageOpenIcon aria-hidden="true" /> Modpacks </template>
             </TeleportOverflowMenu>
           </ButtonStyled>
-
           <ButtonStyled
             type="transparent"
             :highlighted="
@@ -231,14 +251,52 @@
           </ButtonStyled>
         </template>
       </div>
-      <div class="flex items-center gap-2">
+      <div class="flex items-center gap-1">
+        <ButtonStyled type="transparent">
+          <OverflowMenu
+            v-if="auth.user && isStaff(auth.user)"
+            class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
+            position="bottom"
+            direction="left"
+            :dropdown-id="`${basePopoutId}-staff`"
+            aria-label="Create new..."
+            :options="[
+              {
+                id: 'review-projects',
+                color: 'orange',
+                link: '/moderation/review',
+              },
+              {
+                id: 'review-reports',
+                color: 'orange',
+                link: '/moderation/reports',
+              },
+              {
+                divider: true,
+                shown: isAdmin(auth.user),
+              },
+              {
+                id: 'user-lookup',
+                color: 'primary',
+                link: '/admin/user_email',
+                shown: isAdmin(auth.user),
+              },
+            ]"
+          >
+            <ModrinthIcon aria-hidden="true" />
+            <DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
+            <template #review-projects> <ScaleIcon aria-hidden="true" /> Review projects </template>
+            <template #review-reports> <ReportIcon aria-hidden="true" /> Reports </template>
+            <template #user-lookup> <UserIcon aria-hidden="true" /> Lookup by email </template>
+          </OverflowMenu>
+        </ButtonStyled>
         <ButtonStyled type="transparent">
           <OverflowMenu
             v-if="auth.user"
             class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
             position="bottom"
             direction="left"
-            :dropdown-id="createPopoutId"
+            :dropdown-id="`${basePopoutId}-create`"
             aria-label="Create new..."
             :options="[
               {
@@ -270,7 +328,7 @@
         </ButtonStyled>
         <OverflowMenu
           v-if="auth.user"
-          :dropdown-id="userPopoutId"
+          :dropdown-id="`${basePopoutId}-user`"
           class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
           :options="userMenuOptions"
         >
@@ -291,15 +349,22 @@
           </template>
           <template #revenue> <CurrencyIcon aria-hidden="true" /> Revenue </template>
           <template #analytics> <ChartIcon aria-hidden="true" /> Analytics </template>
-          <template #moderation> <ModerationIcon aria-hidden="true" /> Moderation </template>
+          <template #moderation> <ScaleIcon aria-hidden="true" /> Moderation </template>
           <template #sign-out> <LogOutIcon aria-hidden="true" /> Sign out </template>
         </OverflowMenu>
-        <ButtonStyled v-else color="brand">
-          <nuxt-link to="/auth/sign-in">
-            <LogInIcon aria-hidden="true" />
-            Sign in
-          </nuxt-link>
-        </ButtonStyled>
+        <template v-else>
+          <ButtonStyled color="brand">
+            <nuxt-link to="/auth/sign-in">
+              <LogInIcon aria-hidden="true" />
+              Sign in
+            </nuxt-link>
+          </ButtonStyled>
+          <ButtonStyled circular>
+            <nuxt-link v-tooltip="'Settings'" to="/settings">
+              <SettingsIcon aria-label="Settings" />
+            </nuxt-link>
+          </ButtonStyled>
+        </template>
       </div>
     </header>
     <header class="mobile-navigation mobile-only">
@@ -371,7 +436,7 @@
               class="iconified-button"
               to="/moderation"
             >
-              <ModerationIcon aria-hidden="true" />
+              <ScaleIcon aria-hidden="true" />
               {{ formatMessage(commonMessages.moderationLabel) }}
             </NuxtLink>
             <NuxtLink v-if="flags.developerMode" class="iconified-button" to="/flags">
@@ -432,7 +497,7 @@
               }
             "
           >
-            <NotificationIcon aria-hidden="true" />
+            <BellIcon aria-hidden="true" />
           </NuxtLink>
           <NuxtLink
             to="/dashboard"
@@ -451,7 +516,7 @@
         >
           <template v-if="!auth.user">
             <HamburgerIcon v-if="!isMobileMenuOpen" aria-hidden="true" />
-            <CrossIcon v-else aria-hidden="true" />
+            <XIcon v-else aria-hidden="true" />
           </template>
           <template v-else>
             <Avatar
@@ -466,108 +531,102 @@
         </button>
       </div>
     </header>
-    <main>
+    <main class="min-h-[calc(100vh-4.5rem-310.59px)]">
       <ModalCreation v-if="auth.user" ref="modal_creation" />
       <CollectionCreateModal ref="modal_collection_creation" />
       <OrganizationCreateModal ref="modal_organization_creation" />
       <slot id="main" />
     </main>
-    <footer>
-      <div class="logo-info" role="region" aria-label="Modrinth information">
-        <BrandTextLogo
-          aria-hidden="true"
-          class="text-logo button-base mx-auto mb-4 lg:mx-0"
-          @click="developerModeIncrement()"
-        />
-        <p class="mb-4">
-          <IntlFormatted :message-id="footerMessages.openSource">
-            <template #github-link="{ children }">
-              <a
-                :target="$external()"
-                href="https://github.com/modrinth"
-                class="text-link"
-                rel="noopener"
-              >
-                <component :is="() => children" />
-              </a>
-            </template>
-          </IntlFormatted>
-        </p>
-        <p class="mb-4">
-          {{ config.public.branch }}@<a
-            :target="$external()"
-            :href="
-              'https://github.com/' +
-              config.public.owner +
-              '/' +
-              config.public.slug +
-              '/tree/' +
-              config.public.hash
-            "
-            class="text-link"
-            rel="noopener"
-            >{{ config.public.hash.substring(0, 7) }}</a
+    <footer
+      class="footer-brand-background experimental-styles-within mt-6 border-0 border-t-[1px] border-solid"
+    >
+      <div class="mx-auto flex max-w-screen-xl flex-col gap-6 p-6 pb-20 sm:px-12 md:py-12">
+        <div
+          class="grid grid-cols-1 gap-4 text-primary md:grid-cols-[1fr_2fr] lg:grid-cols-[auto_auto_auto_auto_auto]"
+        >
+          <div
+            class="flex flex-col items-center gap-3 md:items-start"
+            role="region"
+            aria-label="Modrinth information"
           >
-        </p>
-        <p>© Rinth, Inc.</p>
-      </div>
-      <div class="links links-1" role="region" aria-label="Legal">
-        <h4 aria-hidden="true">{{ formatMessage(footerMessages.companyTitle) }}</h4>
-        <nuxt-link to="/legal/terms"> {{ formatMessage(footerMessages.terms) }}</nuxt-link>
-        <nuxt-link to="/legal/privacy"> {{ formatMessage(footerMessages.privacy) }}</nuxt-link>
-        <nuxt-link to="/legal/rules"> {{ formatMessage(footerMessages.rules) }}</nuxt-link>
-        <a :target="$external()" href="https://careers.modrinth.com">
-          {{ formatMessage(footerMessages.careers) }}
-          <span v-if="false" class="count-bubble">0</span>
-        </a>
-      </div>
-      <div class="links links-2" role="region" aria-label="Resources">
-        <h4 aria-hidden="true">{{ formatMessage(footerMessages.resourcesTitle) }}</h4>
-        <a :target="$external()" href="https://support.modrinth.com">
-          {{ formatMessage(footerMessages.support) }}
-        </a>
-        <a :target="$external()" href="https://blog.modrinth.com">
-          {{ formatMessage(footerMessages.blog) }}
-        </a>
-        <a :target="$external()" href="https://docs.modrinth.com">
-          {{ formatMessage(footerMessages.docs) }}
-        </a>
-        <a :target="$external()" href="https://status.modrinth.com">
-          {{ formatMessage(footerMessages.status) }}
-        </a>
-      </div>
-      <div class="links links-3" role="region" aria-label="Interact">
-        <h4 aria-hidden="true">{{ formatMessage(footerMessages.interactTitle) }}</h4>
-        <a rel="noopener" :target="$external()" href="https://discord.modrinth.com"> Discord </a>
-        <a rel="noopener" :target="$external()" href="https://x.com/modrinth"> X (Twitter) </a>
-        <a rel="noopener" :target="$external()" href="https://floss.social/@modrinth"> Mastodon </a>
-        <a rel="noopener" :target="$external()" href="https://crowdin.com/project/modrinth">
-          Crowdin
-        </a>
-      </div>
-      <div class="buttons">
-        <nuxt-link class="btn btn-outline btn-primary" to="/app">
-          <DownloadIcon aria-hidden="true" />
-          {{ formatMessage(messages.getModrinthApp) }}
-        </nuxt-link>
-        <button class="iconified-button raised-button" @click="changeTheme">
-          <MoonIcon v-if="$theme.active === 'light'" aria-hidden="true" />
-          <SunIcon v-else aria-hidden="true" />
-          {{ formatMessage(messages.changeTheme) }}
-        </button>
-        <nuxt-link class="iconified-button raised-button" to="/settings">
-          <SettingsIcon aria-hidden="true" />
-          {{ formatMessage(commonMessages.settingsLabel) }}
-        </nuxt-link>
-      </div>
-      <div class="not-affiliated-notice">
-        {{ formatMessage(footerMessages.legalDisclaimer) }}
+            <BrandTextLogo
+              aria-hidden="true"
+              class="text-logo button-base h-6 w-auto text-contrast lg:h-8"
+              @click="developerModeIncrement()"
+            />
+            <div class="flex flex-wrap justify-center gap-px sm:-mx-2">
+              <ButtonStyled
+                v-for="(social, index) in socialLinks"
+                :key="`footer-social-${index}`"
+                circular
+                type="transparent"
+              >
+                <a
+                  v-tooltip="social.label"
+                  :href="social.href"
+                  target="_blank"
+                  :rel="`noopener${social.rel ? ` ${social.rel}` : ''}`"
+                >
+                  <component :is="social.icon" class="h-5 w-5" />
+                </a>
+              </ButtonStyled>
+            </div>
+            <div class="mt-auto flex flex-wrap justify-center gap-3 md:flex-col">
+              <p class="m-0">
+                <IntlFormatted :message-id="footerMessages.openSource">
+                  <template #github-link="{ children }">
+                    <a
+                      href="https://github.com/modrinth/code"
+                      class="text-brand hover:underline"
+                      target="_blank"
+                      rel="noopener"
+                    >
+                      <component :is="() => children" />
+                    </a>
+                  </template>
+                </IntlFormatted>
+              </p>
+              <p class="m-0">© 2025 Rinth, Inc.</p>
+            </div>
+          </div>
+          <div class="mt-4 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:contents">
+            <div
+              v-for="group in footerLinks"
+              :key="group.label"
+              class="flex flex-col items-center gap-3 sm:items-start"
+            >
+              <h3 class="m-0 text-base text-contrast">{{ group.label }}</h3>
+              <template v-for="item in group.links" :key="item.label">
+                <nuxt-link
+                  v-if="item.href.startsWith('/')"
+                  :to="item.href"
+                  class="w-fit hover:underline"
+                >
+                  {{ item.label }}
+                </nuxt-link>
+                <a
+                  v-else
+                  :href="item.href"
+                  class="w-fit hover:underline"
+                  target="_blank"
+                  rel="noopener"
+                >
+                  {{ item.label }}
+                </a>
+              </template>
+            </div>
+          </div>
+        </div>
+        <div class="flex justify-center text-center text-xs font-medium text-secondary opacity-50">
+          {{ formatMessage(footerMessages.legalDisclaimer) }}
+        </div>
       </div>
     </footer>
   </div>
 </template>
 <script setup>
 import {
+  ModrinthIcon,
   ArrowBigUpDashIcon,
   BookmarkIcon,
   ServerIcon,
@@ -599,12 +658,17 @@ import {
   GlassesIcon,
   PaintBrushIcon,
   PackageOpenIcon,
-  XIcon as CrossIcon,
-  ScaleIcon as ModerationIcon,
-  BellIcon as NotificationIcon,
+  DiscordIcon,
+  BlueskyIcon,
+  TumblrIcon,
+  TwitterIcon,
+  MastodonIcon,
+  GitHubIcon,
+  ScaleIcon,
 } from "@modrinth/assets";
 import { Button, ButtonStyled, OverflowMenu, Avatar, commonMessages } from "@modrinth/ui";
 
+import { isAdmin, isStaff } from "@modrinth/utils";
 import ModalCreation from "~/components/ui/ModalCreation.vue";
 import { getProjectTypeMessage } from "~/utils/i18n-project-type.ts";
 import CollectionCreateModal from "~/components/ui/CollectionCreateModal.vue";
@@ -622,10 +686,10 @@ const flags = useFeatureFlags();
 
 const config = useRuntimeConfig();
 const route = useNativeRoute();
+const router = useNativeRouter();
 const link = config.public.siteUrl + route.path.replace(/\/+$/, "");
 
-const createPopoutId = useId();
-const userPopoutId = useId();
+const basePopoutId = useId();
 
 const verifyEmailBannerMessages = defineMessages({
   title: {
@@ -708,50 +772,6 @@ const footerMessages = defineMessages({
     id: "layout.footer.open-source",
     defaultMessage: "Modrinth is <github-link>open source</github-link>.",
   },
-  companyTitle: {
-    id: "layout.footer.company.title",
-    defaultMessage: "Company",
-  },
-  terms: {
-    id: "layout.footer.company.terms",
-    defaultMessage: "Terms",
-  },
-  privacy: {
-    id: "layout.footer.company.privacy",
-    defaultMessage: "Privacy",
-  },
-  rules: {
-    id: "layout.footer.company.rules",
-    defaultMessage: "Rules",
-  },
-  careers: {
-    id: "layout.footer.company.careers",
-    defaultMessage: "Careers",
-  },
-  resourcesTitle: {
-    id: "layout.footer.resources.title",
-    defaultMessage: "Resources",
-  },
-  support: {
-    id: "layout.footer.resources.support",
-    defaultMessage: "Support",
-  },
-  blog: {
-    id: "layout.footer.resources.blog",
-    defaultMessage: "Blog",
-  },
-  docs: {
-    id: "layout.footer.resources.docs",
-    defaultMessage: "Docs",
-  },
-  status: {
-    id: "layout.footer.resources.status",
-    defaultMessage: "Status",
-  },
-  interactTitle: {
-    id: "layout.footer.interact.title",
-    defaultMessage: "Interact",
-  },
   legalDisclaimer: {
     id: "layout.footer.legal-disclaimer",
     defaultMessage:
@@ -928,12 +948,57 @@ const isDiscoveringSubpage = computed(
   () => route.name && route.name.startsWith("type-id") && !route.query.sid,
 );
 
+const rCount = ref(0);
+
+const randomProjects = ref([]);
+const disableRandomProjects = ref(false);
+
+const disableRandomProjectsForRoute = computed(
+  () =>
+    route.name.startsWith("servers") ||
+    route.name.includes("settings") ||
+    route.name.includes("admin"),
+);
+
+async function onKeyDown(event) {
+  if (disableRandomProjects.value || disableRandomProjectsForRoute.value) {
+    return;
+  }
+
+  if (event.key === "r") {
+    rCount.value++;
+
+    if (randomProjects.value.length < 3) {
+      randomProjects.value = await useBaseFetch("projects_random?count=50").catch((err) => {
+        console.error(err);
+        return [];
+      });
+    }
+  }
+
+  if (rCount.value >= 40) {
+    rCount.value = 0;
+    const randomProject = randomProjects.value[0];
+    await router.push(`/project/${randomProject.slug}`);
+    randomProjects.value.splice(0, 1);
+  }
+}
+
+function onKeyUp(event) {
+  if (event.key === "r") {
+    rCount.value = 0;
+  }
+}
+
 onMounted(() => {
   if (window && import.meta.client) {
     window.history.scrollRestoration = "auto";
   }
 
   runAnalytics();
+
+  window.addEventListener("keydown", onKeyDown);
+  window.addEventListener("keyup", onKeyUp);
 });
 
 watch(
@@ -1023,6 +1088,194 @@ const { cycle: changeTheme } = useTheme();
 function hideStagingBanner() {
   cosmetics.value.hideStagingBanner = true;
 }
+
+const socialLinks = [
+  {
+    label: formatMessage(
+      defineMessage({ id: "layout.footer.social.discord", defaultMessage: "Discord" }),
+    ),
+    href: "https://discord.modrinth.com",
+    icon: DiscordIcon,
+  },
+  {
+    label: formatMessage(
+      defineMessage({ id: "layout.footer.social.bluesky", defaultMessage: "Bluesky" }),
+    ),
+    href: "https://bsky.app/profile/modrinth.com",
+    icon: BlueskyIcon,
+  },
+  {
+    label: formatMessage(
+      defineMessage({ id: "layout.footer.social.mastodon", defaultMessage: "Mastodon" }),
+    ),
+    href: "https://floss.social/@modrinth",
+    icon: MastodonIcon,
+    rel: "me",
+  },
+  {
+    label: formatMessage(
+      defineMessage({ id: "layout.footer.social.tumblr", defaultMessage: "Tumblr" }),
+    ),
+    href: "https://tumblr.com/modrinth",
+    icon: TumblrIcon,
+  },
+  {
+    label: formatMessage(defineMessage({ id: "layout.footer.social.x", defaultMessage: "X" })),
+    href: "https://x.com/modrinth",
+    icon: TwitterIcon,
+  },
+  {
+    label: formatMessage(
+      defineMessage({ id: "layout.footer.social.github", defaultMessage: "GitHub" }),
+    ),
+    href: "https://github.com/modrinth",
+    icon: GitHubIcon,
+  },
+];
+
+const footerLinks = [
+  {
+    label: formatMessage(defineMessage({ id: "layout.footer.about", defaultMessage: "About" })),
+    links: [
+      {
+        href: "https://blog.modrinth.com",
+        label: formatMessage(
+          defineMessage({ id: "layout.footer.about.blog", defaultMessage: "Blog" }),
+        ),
+      },
+      {
+        href: "/news/changelog",
+        label: formatMessage(
+          defineMessage({ id: "layout.footer.about.changelog", defaultMessage: "Changelog" }),
+        ),
+      },
+      {
+        href: "https://status.modrinth.com",
+        label: formatMessage(
+          defineMessage({ id: "layout.footer.about.status", defaultMessage: "Status" }),
+        ),
+      },
+      {
+        href: "https://careers.modrinth.com",
+        label: formatMessage(
+          defineMessage({ id: "layout.footer.about.careers", defaultMessage: "Careers" }),
+        ),
+      },
+      {
+        href: "/legal/cmp-info",
+        label: formatMessage(
+          defineMessage({
+            id: "layout.footer.about.rewards-program",
+            defaultMessage: "Rewards Program",
+          }),
+        ),
+      },
+    ],
+  },
+  {
+    label: formatMessage(
+      defineMessage({ id: "layout.footer.products", defaultMessage: "Products" }),
+    ),
+    links: [
+      {
+        href: "/plus",
+        label: formatMessage(
+          defineMessage({ id: "layout.footer.products.plus", defaultMessage: "Modrinth+" }),
+        ),
+      },
+      {
+        href: "/app",
+        label: formatMessage(
+          defineMessage({ id: "layout.footer.products.app", defaultMessage: "Modrinth App" }),
+        ),
+      },
+      {
+        href: "/servers",
+        label: formatMessage(
+          defineMessage({
+            id: "layout.footer.products.servers",
+            defaultMessage: "Modrinth Servers",
+          }),
+        ),
+      },
+    ],
+  },
+  {
+    label: formatMessage(
+      defineMessage({ id: "layout.footer.resources", defaultMessage: "Resources" }),
+    ),
+    links: [
+      {
+        href: "https://support.modrinth.com",
+        label: formatMessage(
+          defineMessage({
+            id: "layout.footer.resources.help-center",
+            defaultMessage: "Help Center",
+          }),
+        ),
+      },
+      {
+        href: "https://crowdin.com/project/modrinth",
+        label: formatMessage(
+          defineMessage({ id: "layout.footer.resources.translate", defaultMessage: "Translate" }),
+        ),
+      },
+      {
+        href: "https://github.com/modrinth/code/issues",
+        label: formatMessage(
+          defineMessage({
+            id: "layout.footer.resources.report-issues",
+            defaultMessage: "Report issues",
+          }),
+        ),
+      },
+      {
+        href: "https://docs.modrinth.com/api/",
+        label: formatMessage(
+          defineMessage({
+            id: "layout.footer.resources.api-docs",
+            defaultMessage: "API documentation",
+          }),
+        ),
+      },
+    ],
+  },
+  {
+    label: formatMessage(defineMessage({ id: "layout.footer.legal", defaultMessage: "Legal" })),
+    links: [
+      {
+        href: "/legal/rules",
+        label: formatMessage(
+          defineMessage({ id: "layout.footer.legal.rules", defaultMessage: "Content Rules" }),
+        ),
+      },
+      {
+        href: "/legal/terms",
+        label: formatMessage(
+          defineMessage({ id: "layout.footer.legal.terms-of-use", defaultMessage: "Terms of Use" }),
+        ),
+      },
+      {
+        href: "/legal/privacy",
+        label: formatMessage(
+          defineMessage({
+            id: "layout.footer.legal.privacy-policy",
+            defaultMessage: "Privacy Policy",
+          }),
+        ),
+      },
+      {
+        href: "/legal/security",
+        label: formatMessage(
+          defineMessage({
+            id: "layout.footer.legal.security-notice",
+            defaultMessage: "Security Notice",
+          }),
+        ),
+      },
+    ],
+  },
+];
 </script>
 
 <style lang="scss">
@@ -1037,127 +1290,9 @@ function hideStagingBanner() {
     min-height: calc(100vh - var(--spacing-card-bg));
   }
 
-  @media screen and (max-width: 750px) {
-    margin-bottom: calc(var(--size-mobile-navbar-height) + 2rem);
-  }
-
   main {
     grid-area: main;
   }
-
-  footer {
-    margin: 6rem 0 2rem 0;
-    text-align: center;
-    display: grid;
-    grid-template:
-      "logo-info  logo-info  logo-info" auto
-      "links-1    links-2    links-3" auto
-      "buttons    buttons    buttons" auto
-      "notice     notice     notice" auto
-      / 1fr 1fr 1fr;
-    max-width: 1280px;
-
-    .logo-info {
-      margin-left: auto;
-      margin-right: auto;
-      max-width: 15rem;
-      margin-bottom: 1rem;
-      grid-area: logo-info;
-
-      .text-logo {
-        width: 10rem;
-        height: auto;
-      }
-    }
-
-    .links {
-      display: flex;
-      flex-direction: column;
-      margin-bottom: 1rem;
-
-      h4 {
-        color: var(--color-text-dark);
-        margin: 0 0 1rem 0;
-      }
-
-      a {
-        margin: 0 0 1rem 0;
-      }
-
-      &.links-1 {
-        grid-area: links-1;
-      }
-
-      &.links-2 {
-        grid-area: links-2;
-      }
-
-      &.links-3 {
-        grid-area: links-3;
-      }
-
-      .count-bubble {
-        font-size: 1rem;
-        border-radius: 5rem;
-        background: var(--color-brand);
-        color: var(--color-text-inverted);
-        padding: 0 0.35rem;
-        margin-left: 0.25rem;
-      }
-    }
-
-    .buttons {
-      margin-left: auto;
-      margin-right: auto;
-      grid-area: buttons;
-
-      button,
-      a {
-        margin-bottom: 0.5rem;
-        margin-left: auto;
-        margin-right: auto;
-      }
-    }
-
-    .not-affiliated-notice {
-      grid-area: notice;
-      font-size: var(--font-size-xs);
-      text-align: center;
-      font-weight: 500;
-      margin-top: var(--spacing-card-md);
-    }
-
-    @media screen and (min-width: 1024px) {
-      display: grid;
-      margin-inline: auto;
-      grid-template:
-        "logo-info  links-1 links-2 links-3 buttons" auto
-        "notice     notice  notice  notice  notice" auto;
-      text-align: unset;
-
-      .logo-info {
-        margin-right: 4rem;
-      }
-
-      .links {
-        margin-right: 4rem;
-      }
-
-      .buttons {
-        width: unset;
-        margin-left: 0;
-
-        button,
-        a {
-          margin-right: unset;
-        }
-      }
-
-      .not-affiliated-notice {
-        margin-top: 0;
-      }
-    }
-  }
 }
 
 @media (min-width: 1024px) {
@@ -1444,9 +1579,120 @@ function hideStagingBanner() {
   .mobile-navigation {
     display: flex;
   }
+}
 
-  main {
-    padding-top: 1.5rem;
+.footer-brand-background {
+  background: var(--brand-gradient-strong-bg);
+  border-color: var(--brand-gradient-border);
+}
+
+.over-the-top-random-animation {
+  position: fixed;
+  z-index: 100;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+  scale: 0.5;
+  transition: all 0.5s ease-out;
+  opacity: 0;
+  animation:
+    tilt-shaking calc(0.2s / (max((var(--_r-count) - 20), 1) / 20)) linear infinite,
+    translate-x-shaking calc(0.3s / (max((var(--_r-count) - 20), 1) / 20)) linear infinite,
+    translate-y-shaking calc(0.25s / (max((var(--_r-count) - 20), 1) / 20)) linear infinite;
+
+  &.threshold {
+    opacity: 1;
+  }
+
+  &.rings-expand {
+    scale: 0.8;
+    opacity: 0;
+
+    .animation-ring-1 {
+      width: 25rem;
+      height: 25rem;
+    }
+    .animation-ring-2 {
+      width: 50rem;
+      height: 50rem;
+    }
+    .animation-ring-3 {
+      width: 100rem;
+      height: 100rem;
+    }
+  }
+
+  > div {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: fit-content;
+    height: fit-content;
+
+    > * {
+      position: absolute;
+      scale: calc(1 + max((var(--_r-count) - 20), 0) * 0.1);
+      transition: all 0.2s ease-out;
+      width: 20rem;
+      height: 20rem;
+    }
+  }
+}
+
+@keyframes tilt-shaking {
+  0% {
+    rotate: 0deg;
+  }
+  25% {
+    rotate: calc(1deg * (var(--_r-count) - 20));
+  }
+  50% {
+    rotate: 0deg;
+  }
+  75% {
+    rotate: calc(-1deg * (var(--_r-count) - 20));
+  }
+  100% {
+    rotate: 0deg;
+  }
+}
+
+@keyframes translate-x-shaking {
+  0% {
+    translate: 0;
+  }
+  25% {
+    translate: calc(2px * (var(--_r-count) - 20));
+  }
+  50% {
+    translate: 0;
+  }
+  75% {
+    translate: calc(-2px * (var(--_r-count) - 20));
+  }
+  100% {
+    translate: 0;
+  }
+}
+
+@keyframes translate-y-shaking {
+  0% {
+    transform: translateY(0);
+  }
+  25% {
+    transform: translateY(calc(2px * (var(--_r-count) - 20)));
+  }
+  50% {
+    transform: translateY(0);
+  }
+  75% {
+    transform: translateY(calc(-2px * (var(--_r-count) - 20)));
+  }
+  100% {
+    transform: translateY(0);
   }
 }
 </style>
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 48bea2ec5..478b01b88 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -1,4 +1,7 @@
 {
+  "admin.billing.error.not-found": {
+    "message": "User not found"
+  },
   "auth.authorize.action.authorize": {
     "message": "Authorize"
   },
@@ -284,45 +287,90 @@
   "layout.banner.verify-email.title": {
     "message": "For security purposes, please verify your email address on Modrinth."
   },
-  "layout.footer.company.careers": {
+  "layout.footer.about": {
+    "message": "About"
+  },
+  "layout.footer.about.blog": {
+    "message": "Blog"
+  },
+  "layout.footer.about.careers": {
     "message": "Careers"
   },
-  "layout.footer.company.privacy": {
-    "message": "Privacy"
+  "layout.footer.about.changelog": {
+    "message": "Changelog"
   },
-  "layout.footer.company.rules": {
-    "message": "Rules"
+  "layout.footer.about.rewards-program": {
+    "message": "Rewards Program"
   },
-  "layout.footer.company.terms": {
-    "message": "Terms"
+  "layout.footer.about.status": {
+    "message": "Status"
   },
-  "layout.footer.company.title": {
-    "message": "Company"
-  },
-  "layout.footer.interact.title": {
-    "message": "Interact"
+  "layout.footer.legal": {
+    "message": "Legal"
   },
   "layout.footer.legal-disclaimer": {
     "message": "NOT AN OFFICIAL MINECRAFT SERVICE. NOT APPROVED BY OR ASSOCIATED WITH MOJANG OR MICROSOFT."
   },
+  "layout.footer.legal.privacy-policy": {
+    "message": "Privacy Policy"
+  },
+  "layout.footer.legal.rules": {
+    "message": "Content Rules"
+  },
+  "layout.footer.legal.security-notice": {
+    "message": "Security Notice"
+  },
+  "layout.footer.legal.terms-of-use": {
+    "message": "Terms of Use"
+  },
   "layout.footer.open-source": {
     "message": "Modrinth is <github-link>open source</github-link>."
   },
-  "layout.footer.resources.blog": {
-    "message": "Blog"
+  "layout.footer.products": {
+    "message": "Products"
   },
-  "layout.footer.resources.docs": {
-    "message": "Docs"
+  "layout.footer.products.app": {
+    "message": "Modrinth App"
   },
-  "layout.footer.resources.status": {
-    "message": "Status"
+  "layout.footer.products.plus": {
+    "message": "Modrinth+"
   },
-  "layout.footer.resources.support": {
-    "message": "Support"
+  "layout.footer.products.servers": {
+    "message": "Modrinth Servers"
   },
-  "layout.footer.resources.title": {
+  "layout.footer.resources": {
     "message": "Resources"
   },
+  "layout.footer.resources.api-docs": {
+    "message": "API documentation"
+  },
+  "layout.footer.resources.help-center": {
+    "message": "Help Center"
+  },
+  "layout.footer.resources.report-issues": {
+    "message": "Report issues"
+  },
+  "layout.footer.resources.translate": {
+    "message": "Translate"
+  },
+  "layout.footer.social.bluesky": {
+    "message": "Bluesky"
+  },
+  "layout.footer.social.discord": {
+    "message": "Discord"
+  },
+  "layout.footer.social.github": {
+    "message": "GitHub"
+  },
+  "layout.footer.social.mastodon": {
+    "message": "Mastodon"
+  },
+  "layout.footer.social.tumblr": {
+    "message": "Tumblr"
+  },
+  "layout.footer.social.x": {
+    "message": "X"
+  },
   "layout.menu-toggle.action": {
     "message": "Toggle menu"
   },
@@ -338,6 +386,12 @@
   "layout.nav.search": {
     "message": "Search"
   },
+  "profile.button.billing": {
+    "message": "Manage user billing"
+  },
+  "profile.button.info": {
+    "message": "View user details"
+  },
   "profile.button.manage-projects": {
     "message": "Manage projects"
   },
@@ -476,6 +530,84 @@
   "project.versions.title": {
     "message": "Versions"
   },
+  "report.already-reported": {
+    "message": "You've already reported {title}"
+  },
+  "report.already-reported-description": {
+    "message": "You have an open report for this {item} already. You can add more details to your report if you have more information to add."
+  },
+  "report.back-to-item": {
+    "message": "Back to {item}"
+  },
+  "report.body.description": {
+    "message": "Include links and images if possible and relevant. Empty or insufficient reports will be closed and ignored."
+  },
+  "report.body.title": {
+    "message": "Please provide additional context about your report"
+  },
+  "report.checking": {
+    "message": "Checking {item}..."
+  },
+  "report.could-not-find": {
+    "message": "Could not find {item}"
+  },
+  "report.for.violation": {
+    "message": "Violation of Modrinth <rules-link>Rules</rules-link> or <terms-link>Terms of Use</terms-link>"
+  },
+  "report.for.violation.description": {
+    "message": "Examples include malicious, spam, offensive, deceptive, misleading, and illegal content."
+  },
+  "report.form-not-for": {
+    "message": "This form is not for:"
+  },
+  "report.go-to-report": {
+    "message": "Go to report"
+  },
+  "report.not-for.bug-reports": {
+    "message": "Bug reports"
+  },
+  "report.not-for.bug-reports.description": {
+    "message": "You can report bugs to their <issues-link>issue tracker</issues-link>."
+  },
+  "report.not-for.dmca": {
+    "message": "DMCA takedowns"
+  },
+  "report.not-for.dmca.description": {
+    "message": "See our <policy-link>Copyright Policy</policy-link>."
+  },
+  "report.note.copyright.1": {
+    "message": "Please note that you are *not* submitting a DMCA takedown request, but rather a report of reuploaded content."
+  },
+  "report.note.copyright.2": {
+    "message": "If you meant to file a DMCA takedown request (which is a legal action) instead, please see our <copyright-policy-link>Copyright Policy</copyright-policy-link>."
+  },
+  "report.note.malicious.1": {
+    "message": "Reports for malicious or deceptive content must include substantial evidence of the behavior, such as code samples."
+  },
+  "report.note.malicious.2": {
+    "message": "Summaries from Microsoft Defender, VirusTotal, or AI malware detection are not sufficient forms of evidence and will not be accepted."
+  },
+  "report.please-report": {
+    "message": "Please report:"
+  },
+  "report.question.content-id": {
+    "message": "What is the ID of the {item}?"
+  },
+  "report.question.content-type": {
+    "message": "What type of content are you reporting?"
+  },
+  "report.question.report-reason": {
+    "message": "Which of Modrinth's rules is this {item} violating?"
+  },
+  "report.report-content": {
+    "message": "Report content to moderators"
+  },
+  "report.report-item": {
+    "message": "Report {title} to moderators"
+  },
+  "report.submit": {
+    "message": "Submit report"
+  },
   "revenue.transfers.total": {
     "message": "You have withdrawn {amount} in total."
   },
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index e36ffc875..4781ab633 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -460,6 +460,10 @@
       class="new-page sidebar"
       :class="{
         'alt-layout': cosmetics.leftContentLayout,
+        'ultimate-sidebar':
+          showModerationChecklist &&
+          !collapsedModerationChecklist &&
+          !flags.alwaysShowChecklistAsPopup,
       }"
     >
       <div class="normal-page__header relative my-4">
@@ -631,7 +635,7 @@
                       auth.user ? reportProject(project.id) : navigateTo('/auth/sign-in'),
                     color: 'red',
                     hoverOnly: true,
-                    shown: !currentMember,
+                    shown: !isMember,
                   },
                   { id: 'copy-id', action: () => copyId() },
                 ]"
@@ -674,7 +678,7 @@
           :auth="auth"
           :tags="tags"
         />
-        <MessageBanner v-if="project.status === 'archived'" message-type="warning" class="mb-4">
+        <MessageBanner v-if="project.status === 'archived'" message-type="warning" class="my-4">
           {{ project.title }} has been archived. {{ project.title }} will not receive any further
           updates unless the author decides to unarchive the project.
         </MessageBanner>
@@ -802,15 +806,21 @@
           :reset-members="resetMembers"
           :route="route"
           @on-download="triggerDownloadAnimation"
+          @delete-version="deleteVersion"
+        />
+      </div>
+      <div class="normal-page__ultimate-sidebar">
+        <ModerationChecklist
+          v-if="auth.user && tags.staffRoles.includes(auth.user.role) && showModerationChecklist"
+          :project="project"
+          :future-projects="futureProjects"
+          :reset-project="resetProject"
+          :collapsed="collapsedModerationChecklist"
+          @exit="showModerationChecklist = false"
+          @toggle-collapsed="collapsedModerationChecklist = !collapsedModerationChecklist"
         />
       </div>
     </div>
-    <ModerationChecklist
-      v-if="auth.user && tags.staffRoles.includes(auth.user.role) && showModerationChecklist"
-      :project="project"
-      :future-projects="futureProjects"
-      :reset-project="resetProject"
-    />
   </div>
 </template>
 <script setup>
@@ -1203,6 +1213,10 @@ const members = computed(() => {
   return owner ? [owner, ...rest] : rest;
 });
 
+const isMember = computed(
+  () => auth.value.user && allMembers.value.some((x) => x.user.id === auth.value.user.id),
+);
+
 const currentMember = computed(() => {
   let val = auth.value.user ? allMembers.value.find((x) => x.user.id === auth.value.user.id) : null;
 
@@ -1426,6 +1440,7 @@ async function copyId() {
 const collapsedChecklist = ref(false);
 
 const showModerationChecklist = ref(false);
+const collapsedModerationChecklist = ref(false);
 const futureProjects = ref([]);
 if (import.meta.client && history && history.state && history.state.showChecklist) {
   showModerationChecklist.value = true;
@@ -1451,6 +1466,20 @@ function onDownload(event) {
   }, 400);
 }
 
+async function deleteVersion(id) {
+  if (!id) return;
+
+  startLoading();
+
+  await useBaseFetch(`version/${id}`, {
+    method: "DELETE",
+  });
+
+  versions.value = versions.value.filter((x) => x.id !== id);
+
+  stopLoading();
+}
+
 const navLinks = computed(() => {
   const projectUrl = `/${project.value.project_type}/${project.value.slug ? project.value.slug : project.value.id}`;
 
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/description.vue b/apps/frontend/src/pages/[type]/[id]/settings/description.vue
index d7b6f7c3d..174d4bc9c 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/description.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/description.vue
@@ -8,21 +8,25 @@
           <span class="label__subdescription">
             The description must clearly and honestly describe the purpose and function of the
             project. See section 2.1 of the
-            <nuxt-link to="/legal/rules" class="text-link" target="_blank">Content Rules</nuxt-link>
+            <nuxt-link class="text-link" target="_blank" to="/legal/rules">Content Rules</nuxt-link>
             for the full requirements.
           </span>
         </span>
       </div>
       <MarkdownEditor
         v-model="description"
+        :disabled="
+          !currentMember ||
+          (currentMember.permissions & TeamMemberPermission.EDIT_BODY) !==
+            TeamMemberPermission.EDIT_BODY
+        "
         :on-image-upload="onUploadHandler"
-        :disabled="(currentMember.permissions & EDIT_BODY) !== EDIT_BODY"
       />
       <div class="input-group markdown-disclaimer">
         <button
-          type="button"
-          class="iconified-button brand-button"
           :disabled="!hasChanges"
+          class="iconified-button brand-button"
+          type="button"
           @click="saveChanges()"
         >
           <SaveIcon />
@@ -33,91 +37,50 @@
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
+import { SaveIcon } from "@modrinth/assets";
 import { MarkdownEditor } from "@modrinth/ui";
-import Chips from "~/components/ui/Chips.vue";
-import SaveIcon from "~/assets/images/utils/save.svg?component";
-import { renderHighlightedString } from "~/helpers/highlight.js";
+import { type Project, type TeamMember, TeamMemberPermission } from "@modrinth/utils";
+import { computed, ref } from "vue";
 import { useImageUpload } from "~/composables/image-upload.ts";
 
-export default defineNuxtComponent({
-  components: {
-    Chips,
-    SaveIcon,
-    MarkdownEditor,
-  },
-  props: {
-    project: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-    allMembers: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    currentMember: {
-      type: Object,
-      default() {
-        return null;
-      },
-    },
-    patchProject: {
-      type: Function,
-      default() {
-        return () => {
-          this.$notify({
-            group: "main",
-            title: "An error occurred",
-            text: "Patch project function not found",
-            type: "error",
-          });
-        };
-      },
-    },
-  },
-  data() {
-    return {
-      description: this.project.body,
-      bodyViewMode: "source",
-    };
-  },
-  computed: {
-    patchData() {
-      const data = {};
+const props = defineProps<{
+  project: Project;
+  allMembers: TeamMember[];
+  currentMember: TeamMember | undefined;
+  patchProject: (payload: object, quiet?: boolean) => object;
+}>();
 
-      if (this.description !== this.project.body) {
-        data.body = this.description;
-      }
+const description = ref(props.project.body);
 
-      return data;
-    },
-    hasChanges() {
-      return Object.keys(this.patchData).length > 0;
-    },
-  },
-  created() {
-    this.EDIT_BODY = 1 << 3;
-  },
-  methods: {
-    renderHighlightedString,
-    saveChanges() {
-      if (this.hasChanges) {
-        this.patchProject(this.patchData);
-      }
-    },
-    async onUploadHandler(file) {
-      const response = await useImageUpload(file, {
-        context: "project",
-        projectID: this.project.id,
-      });
-      return response.url;
-    },
-  },
+const patchRequestPayload = computed(() => {
+  const payload: {
+    body?: string;
+  } = {};
+
+  if (description.value !== props.project.body) {
+    payload.body = description.value;
+  }
+
+  return payload;
 });
+
+const hasChanges = computed(() => {
+  return Object.keys(patchRequestPayload.value).length > 0;
+});
+
+function saveChanges() {
+  props.patchProject(patchRequestPayload.value);
+}
+
+async function onUploadHandler(file: File) {
+  const response = await useImageUpload(file, {
+    context: "project",
+    projectID: props.project.id,
+  });
+
+  return response.url;
+}
 </script>
 
 <style scoped>
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/license.vue b/apps/frontend/src/pages/[type]/[id]/settings/license.vue
index aa5e86a48..cd946ad1d 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/license.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/license.vue
@@ -1,61 +1,128 @@
 <template>
   <div>
     <section class="universal-card">
+      <h2 class="label__title size-card-header">License</h2>
+      <p class="label__description">
+        It is important to choose a proper license for your
+        {{ formatProjectType(project.project_type).toLowerCase() }}. You may choose one from our
+        list or provide a custom license. You may also provide a custom URL to your chosen license;
+        otherwise, the license text will be displayed. See our
+        <a
+          href="https://blog.modrinth.com/licensing-guide/"
+          target="_blank"
+          rel="noopener"
+          class="text-link"
+        >
+          licensing guide
+        </a>
+        for more information.
+      </p>
+
       <div class="adjacent-input">
         <label for="license-multiselect">
-          <span class="label__title size-card-header">License</span>
+          <span class="label__title">Select a license</span>
           <span class="label__description">
-            It is very important to choose a proper license for your
-            {{ $formatProjectType(project.project_type).toLowerCase() }}. You may choose one from
-            our list or provide a custom license. You may also provide a custom URL to your chosen
-            license; otherwise, the license text will be displayed.
-            <span v-if="license && license.friendly === 'Custom'" class="label__subdescription">
-              Enter a valid
-              <a href="https://spdx.org/licenses/" target="_blank" rel="noopener" class="text-link">
-                SPDX license identifier</a
-              >
-              in the marked area. If your license does not have a SPDX identifier (for example, if
-              you created the license yourself or if the license is Minecraft-specific), simply
-              check the box and enter the name of the license instead.
-            </span>
-            <span class="label__subdescription">
-              Confused? See our
-              <a
-                href="https://blog.modrinth.com/licensing-guide/"
-                target="_blank"
-                rel="noopener"
-                class="text-link"
-              >
-                licensing guide</a
-              >
-              for more information.
-            </span>
+            How users are and aren't allowed to use your project.
           </span>
         </label>
-        <div class="input-stack">
-          <Multiselect
-            id="license-multiselect"
+
+        <div class="w-1/2">
+          <DropdownSelect
             v-model="license"
+            name="License selector"
+            :options="builtinLicenses"
+            :display-name="(chosen: BuiltinLicense) => chosen.friendly"
             placeholder="Select license..."
-            track-by="short"
-            label="friendly"
-            :options="defaultLicenses"
-            :searchable="true"
-            :close-on-select="true"
-            :show-labels="false"
-            :class="{
-              'known-error': license?.short === '' && showKnownErrors,
-            }"
+          />
+        </div>
+      </div>
+
+      <div class="adjacent-input" v-if="license.requiresOnlyOrLater">
+        <label for="or-later-checkbox">
+          <span class="label__title">Later editions</span>
+          <span class="label__description">
+            The license you selected has an "or later" clause. If you check this box, users may use
+            your project under later editions of the license.
+          </span>
+        </label>
+
+        <Checkbox
+          id="or-later-checkbox"
+          v-model="allowOrLater"
+          :disabled="!hasPermission"
+          description="Allow later editions"
+          class="w-1/2"
+        >
+          Allow later editions
+        </Checkbox>
+      </div>
+
+      <div class="adjacent-input">
+        <label for="license-url">
+          <span class="label__title">License URL</span>
+          <span class="label__description" v-if="license?.friendly !== 'Custom'">
+            The web location of the full license text. If you don't provide a link, the license text
+            will be displayed instead.
+          </span>
+          <span class="label__description" v-else>
+            The web location of the full license text. You have to provide a link since this is a
+            custom license.
+          </span>
+        </label>
+
+        <div class="w-1/2">
+          <input
+            id="license-url"
+            v-model="licenseUrl"
+            type="url"
+            maxlength="2048"
+            :placeholder="license?.friendly !== 'Custom' ? `License URL (optional)` : `License URL`"
+            :disabled="!hasPermission || licenseId === 'LicenseRef-Unknown'"
+            class="w-full"
+          />
+        </div>
+      </div>
+
+      <div class="adjacent-input" v-if="license?.friendly === 'Custom'">
+        <label for="license-spdx" v-if="!nonSpdxLicense">
+          <span class="label__title">SPDX identifier</span>
+          <span class="label__description">
+            If your license does not have an offical
+            <a href="https://spdx.org/licenses/" target="_blank" rel="noopener" class="text-link">
+              SPDX license identifier</a
+            >, check the box and enter the name of the license instead.
+          </span>
+        </label>
+        <label for="license-name" v-else>
+          <span class="label__title">License name</span>
+          <span class="label__description"
+            >The full name of the license. If the license has a SPDX identifier, please uncheck the
+            checkbox and use the identifier instead.</span
+          >
+        </label>
+
+        <div class="input-stack w-1/2">
+          <input
+            v-if="!nonSpdxLicense"
+            v-model="license.short"
+            id="license-spdx"
+            class="w-full"
+            type="text"
+            maxlength="128"
+            placeholder="SPDX identifier"
             :disabled="!hasPermission"
           />
-          <Checkbox
-            v-if="license?.requiresOnlyOrLater"
-            v-model="allowOrLater"
+          <input
+            v-else
+            v-model="license.short"
+            id="license-name"
+            class="w-full"
+            type="text"
+            maxlength="128"
+            placeholder="License name"
             :disabled="!hasPermission"
-            description="Allow later editions of this license"
-          >
-            Allow later editions of this license
-          </Checkbox>
+          />
+
           <Checkbox
             v-if="license?.friendly === 'Custom'"
             v-model="nonSpdxLicense"
@@ -64,31 +131,18 @@
           >
             License does not have a SPDX identifier
           </Checkbox>
-          <input
-            v-if="license?.friendly === 'Custom'"
-            v-model="license.short"
-            type="text"
-            maxlength="2048"
-            :placeholder="nonSpdxLicense ? 'License name' : 'SPDX identifier'"
-            :class="{
-              'known-error': license.short === '' && showKnownErrors,
-            }"
-            :disabled="!hasPermission"
-          />
-          <input
-            v-model="licenseUrl"
-            type="url"
-            maxlength="2048"
-            placeholder="License URL (optional)"
-            :disabled="!hasPermission || licenseId === 'LicenseRef-Unknown'"
-          />
         </div>
       </div>
+
       <div class="input-stack">
         <button
           type="button"
           class="iconified-button brand-button"
-          :disabled="!hasChanges || license === null"
+          :disabled="
+            !hasChanges ||
+            !hasPermission ||
+            (license.friendly === 'Custom' && (license.short === '' || licenseUrl === ''))
+          "
           @click="saveChanges()"
         >
           <SaveIcon />
@@ -99,199 +153,109 @@
   </div>
 </template>
 
-<script>
-import Multiselect from "vue-multiselect";
-import Checkbox from "~/components/ui/Checkbox";
+<script setup lang="ts">
+import { Checkbox, DropdownSelect } from "@modrinth/ui";
+import {
+  TeamMemberPermission,
+  builtinLicenses,
+  formatProjectType,
+  type BuiltinLicense,
+  type Project,
+  type TeamMember,
+} from "@modrinth/utils";
+import { computed, ref, type Ref } from "vue";
 import SaveIcon from "~/assets/images/utils/save.svg?component";
 
-export default defineNuxtComponent({
-  components: {
-    Multiselect,
-    Checkbox,
-    SaveIcon,
-  },
-  props: {
-    project: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-    currentMember: {
-      type: Object,
-      default() {
-        return null;
-      },
-    },
-    patchProject: {
-      type: Function,
-      default() {
-        return () => {
-          this.$notify({
-            group: "main",
-            title: "An error occurred",
-            text: "Patch project function not found",
-            type: "error",
-          });
-        };
-      },
-    },
-  },
-  data() {
-    return {
-      licenseUrl: "",
-      license: { friendly: "", short: "", requiresOnlyOrLater: false },
-      allowOrLater: this.project.license.id.includes("-or-later"),
-      nonSpdxLicense: this.project.license.id.includes("LicenseRef-"),
-      showKnownErrors: false,
-    };
-  },
-  async setup(props) {
-    const defaultLicenses = shallowRef([
-      { friendly: "Custom", short: "" },
-      {
-        friendly: "All Rights Reserved/No License",
-        short: "All-Rights-Reserved",
-      },
-      { friendly: "Apache License 2.0", short: "Apache-2.0" },
-      {
-        friendly: 'BSD 2-Clause "Simplified" License',
-        short: "BSD-2-Clause",
-      },
-      {
-        friendly: 'BSD 3-Clause "New" or "Revised" License',
-        short: "BSD-3-Clause",
-      },
-      {
-        friendly: "CC Zero (Public Domain equivalent)",
-        short: "CC0-1.0",
-      },
-      { friendly: "CC-BY 4.0", short: "CC-BY-4.0" },
-      {
-        friendly: "CC-BY-SA 4.0",
-        short: "CC-BY-SA-4.0",
-      },
-      {
-        friendly: "CC-BY-NC 4.0",
-        short: "CC-BY-NC-4.0",
-      },
-      {
-        friendly: "CC-BY-NC-SA 4.0",
-        short: "CC-BY-NC-SA-4.0",
-      },
-      {
-        friendly: "CC-BY-ND 4.0",
-        short: "CC-BY-ND-4.0",
-      },
-      {
-        friendly: "CC-BY-NC-ND 4.0",
-        short: "CC-BY-NC-ND-4.0",
-      },
-      {
-        friendly: "GNU Affero General Public License v3",
-        short: "AGPL-3.0",
-        requiresOnlyOrLater: true,
-      },
-      {
-        friendly: "GNU Lesser General Public License v2.1",
-        short: "LGPL-2.1",
-        requiresOnlyOrLater: true,
-      },
-      {
-        friendly: "GNU Lesser General Public License v3",
-        short: "LGPL-3.0",
-        requiresOnlyOrLater: true,
-      },
-      {
-        friendly: "GNU General Public License v2",
-        short: "GPL-2.0",
-        requiresOnlyOrLater: true,
-      },
-      {
-        friendly: "GNU General Public License v3",
-        short: "GPL-3.0",
-        requiresOnlyOrLater: true,
-      },
-      { friendly: "ISC License", short: "ISC" },
-      { friendly: "MIT License", short: "MIT" },
-      { friendly: "Mozilla Public License 2.0", short: "MPL-2.0" },
-      { friendly: "zlib License", short: "Zlib" },
-    ]);
+const props = defineProps<{
+  project: Project;
+  currentMember: TeamMember | undefined;
+  patchProject: (payload: Object, quiet?: boolean) => Object;
+}>();
 
-    const licenseUrl = ref(props.project.license.url);
-
-    const licenseId = props.project.license.id;
-    const trimmedLicenseId = licenseId
-      .replaceAll("-only", "")
-      .replaceAll("-or-later", "")
-      .replaceAll("LicenseRef-", "");
-
-    const license = ref(
-      defaultLicenses.value.find((x) => x.short === trimmedLicenseId) ?? {
-        friendly: "Custom",
-        short: licenseId.replaceAll("LicenseRef-", ""),
-      },
-    );
-
-    if (licenseId === "LicenseRef-Unknown") {
-      license.value = {
-        friendly: "Unknown",
-        short: licenseId.replaceAll("LicenseRef-", ""),
-      };
-    }
-
-    return {
-      defaultLicenses,
-      licenseUrl,
-      license,
-    };
-  },
-  computed: {
-    hasPermission() {
-      const EDIT_DETAILS = 1 << 2;
-      return (this.currentMember.permissions & EDIT_DETAILS) === EDIT_DETAILS;
-    },
-    licenseId() {
-      let id = "";
-      if (this.license === null) return id;
-      if (
-        (this.nonSpdxLicense && this.license.friendly === "Custom") ||
-        this.license.short === "All-Rights-Reserved" ||
-        this.license.short === "Unknown"
-      ) {
-        id += "LicenseRef-";
-      }
-      id += this.license.short;
-      if (this.license.requiresOnlyOrLater) {
-        id += this.allowOrLater ? "-or-later" : "-only";
-      }
-      if (this.nonSpdxLicense && this.license.friendly === "Custom") {
-        id = id.replaceAll(" ", "-");
-      }
-      return id;
-    },
-    patchData() {
-      const data = {};
-
-      if (this.licenseId !== this.project.license.id) {
-        data.license_id = this.licenseId;
-        data.license_url = this.licenseUrl ? this.licenseUrl : null;
-      } else if (this.licenseUrl !== this.project.license.url) {
-        data.license_url = this.licenseUrl ? this.licenseUrl : null;
-      }
-
-      return data;
-    },
-    hasChanges() {
-      return Object.keys(this.patchData).length > 0;
-    },
-  },
-  methods: {
-    saveChanges() {
-      if (this.hasChanges) {
-        this.patchProject(this.patchData);
-      }
-    },
-  },
+const licenseUrl = ref(props.project.license.url);
+const license: Ref<{
+  friendly: string;
+  short: string;
+  requiresOnlyOrLater?: boolean;
+}> = ref({
+  friendly: "",
+  short: "",
+  requiresOnlyOrLater: false,
 });
+
+const allowOrLater = ref(props.project.license.id.includes("-or-later"));
+const nonSpdxLicense = ref(props.project.license.id.includes("LicenseRef-"));
+
+const oldLicenseId = props.project.license.id;
+const trimmedLicenseId = oldLicenseId
+  .replaceAll("-only", "")
+  .replaceAll("-or-later", "")
+  .replaceAll("LicenseRef-", "");
+
+license.value = builtinLicenses.find((x) => x.short === trimmedLicenseId) ?? {
+  friendly: "Custom",
+  short: oldLicenseId.replaceAll("LicenseRef-", ""),
+  requiresOnlyOrLater: oldLicenseId.includes("-or-later"),
+};
+
+if (oldLicenseId === "LicenseRef-Unknown") {
+  // Mark it as not having a license, forcing the user to select one
+  license.value = {
+    friendly: "",
+    short: oldLicenseId.replaceAll("LicenseRef-", ""),
+    requiresOnlyOrLater: false,
+  };
+}
+
+const hasPermission = computed(() => {
+  return (props.currentMember?.permissions ?? 0) & TeamMemberPermission.EDIT_DETAILS;
+});
+
+const licenseId = computed(() => {
+  let id = "";
+
+  if (
+    (nonSpdxLicense && license.value.friendly === "Custom") ||
+    license.value.short === "All-Rights-Reserved" ||
+    license.value.short === "Unknown"
+  ) {
+    id += "LicenseRef-";
+  }
+
+  id += license.value.short;
+  if (license.value.requiresOnlyOrLater) {
+    id += allowOrLater.value ? "-or-later" : "-only";
+  }
+
+  if (nonSpdxLicense && license.value.friendly === "Custom") {
+    id = id.replaceAll(" ", "-");
+  }
+
+  return id;
+});
+
+const patchRequestPayload = computed(() => {
+  const payload: {
+    license_id?: string;
+    license_url?: string | null; // null = remove url
+  } = {};
+
+  if (licenseId.value !== props.project.license.id) {
+    payload.license_id = licenseId.value;
+  }
+
+  if (licenseUrl.value !== props.project.license.url) {
+    payload.license_url = licenseUrl.value ? licenseUrl.value : null;
+  }
+
+  return payload;
+});
+
+const hasChanges = computed(() => {
+  return Object.keys(patchRequestPayload.value).length > 0;
+});
+
+function saveChanges() {
+  props.patchProject(patchRequestPayload.value);
+}
 </script>
diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version].vue b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
index de17bcde5..8fd5689cd 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -381,6 +381,7 @@
         />
         <ButtonStyled v-if="isEditing">
           <button
+            class="raised-button"
             :disabled="primaryFile.hashes.sha1 === file.hashes.sha1"
             @click="
               () => {
@@ -639,7 +640,6 @@ import Badge from "~/components/ui/Badge.vue";
 import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
 import CopyCode from "~/components/ui/CopyCode.vue";
 import Categories from "~/components/ui/search/Categories.vue";
-import Chips from "~/components/ui/Chips.vue";
 import Checkbox from "~/components/ui/Checkbox.vue";
 import FileInput from "~/components/ui/FileInput.vue";
 
@@ -662,6 +662,7 @@ import Modal from "~/components/ui/Modal.vue";
 import ChevronRightIcon from "~/assets/images/utils/chevron-right.svg?component";
 
 import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
+
 export default defineNuxtComponent({
   components: {
     MarkdownEditor,
@@ -669,7 +670,6 @@ export default defineNuxtComponent({
     FileInput,
     Checkbox,
     ChevronRightIcon,
-    Chips,
     Categories,
     DownloadIcon,
     EditIcon,
diff --git a/apps/frontend/src/pages/[type]/[id]/versions.vue b/apps/frontend/src/pages/[type]/[id]/versions.vue
index bd3762e48..1c4596bbd 100644
--- a/apps/frontend/src/pages/[type]/[id]/versions.vue
+++ b/apps/frontend/src/pages/[type]/[id]/versions.vue
@@ -1,4 +1,13 @@
 <template>
+  <ConfirmModal
+    v-if="currentMember"
+    ref="deleteVersionModal"
+    title="Are you sure you want to delete this version?"
+    description="This will remove this version forever (like really forever)."
+    :has-to-type="false"
+    proceed-label="Delete"
+    @proceed="deleteVersion()"
+  />
   <section class="experimental-styles-within overflow-visible">
     <div
       v-if="currentMember && isPermission(currentMember?.permissions, 1 << 0)"
@@ -41,7 +50,7 @@
             :href="getPrimaryFile(version).url"
             class="group-hover:!bg-brand group-hover:[&>svg]:!text-brand-inverted"
             aria-label="Download"
-            @click="emits('onDownload')"
+            @click="emit('onDownload')"
           >
             <DownloadIcon aria-hidden="true" />
           </a>
@@ -57,7 +66,7 @@
                 hoverFilled: true,
                 link: getPrimaryFile(version).url,
                 action: () => {
-                  emits('onDownload');
+                  emit('onDownload');
                 },
               },
               {
@@ -89,6 +98,14 @@
                 action: () => (auth.user ? reportVersion(version.id) : navigateTo('/auth/sign-in')),
                 shown: !currentMember,
               },
+              { divider: true, shown: currentMember || flags.developerMode },
+              {
+                id: 'copy-id',
+                action: () => {
+                  copyToClipboard(version.id);
+                },
+                shown: currentMember || flags.developerMode,
+              },
               { divider: true, shown: currentMember },
               {
                 id: 'edit',
@@ -101,8 +118,11 @@
                 id: 'delete',
                 color: 'red',
                 hoverFilled: true,
-                action: () => {},
-                shown: currentMember && false,
+                action: () => {
+                  selectedVersion = version.id;
+                  deleteVersionModal.show();
+                },
+                shown: currentMember,
               },
             ]"
             aria-label="More options"
@@ -136,6 +156,10 @@
               <TrashIcon aria-hidden="true" />
               Delete
             </template>
+            <template #copy-id>
+              <ClipboardCopyIcon aria-hidden="true" />
+              Copy ID
+            </template>
           </OverflowMenu>
         </ButtonStyled>
       </template>
@@ -144,7 +168,13 @@
 </template>
 
 <script setup>
-import { ButtonStyled, OverflowMenu, FileInput, ProjectPageVersions } from "@modrinth/ui";
+import {
+  ButtonStyled,
+  OverflowMenu,
+  FileInput,
+  ProjectPageVersions,
+  ConfirmModal,
+} from "@modrinth/ui";
 import {
   DownloadIcon,
   MoreVerticalIcon,
@@ -156,6 +186,7 @@ import {
   ReportIcon,
   UploadIcon,
   InfoIcon,
+  ClipboardCopyIcon,
 } from "@modrinth/assets";
 import DropArea from "~/components/ui/DropArea.vue";
 import { acceptFileFromProjectType } from "~/helpers/fileUtils.js";
@@ -185,7 +216,10 @@ const tags = useTags();
 const flags = useFeatureFlags();
 const auth = await useAuth();
 
-const emits = defineEmits(["onDownload"]);
+const deleteVersionModal = ref();
+const selectedVersion = ref(null);
+
+const emit = defineEmits(["onDownload", "deleteVersion"]);
 
 const router = useNativeRouter();
 
@@ -212,4 +246,9 @@ async function handleFiles(files) {
 async function copyToClipboard(text) {
   await navigator.clipboard.writeText(text);
 }
+
+function deleteVersion() {
+  emit("deleteVersion", selectedVersion.value);
+  selectedVersion.value = null;
+}
 </script>
diff --git a/apps/frontend/src/pages/admin/billing/[id].vue b/apps/frontend/src/pages/admin/billing/[id].vue
new file mode 100644
index 000000000..235c9a53f
--- /dev/null
+++ b/apps/frontend/src/pages/admin/billing/[id].vue
@@ -0,0 +1,342 @@
+<template>
+  <NewModal ref="refundModal">
+    <template #title>
+      <span class="text-lg font-extrabold text-contrast">Refund charge</span>
+    </template>
+    <div class="flex flex-col gap-3">
+      <div class="flex flex-col gap-2">
+        <label for="visibility" class="flex flex-col gap-1">
+          <span class="text-lg font-semibold text-contrast">
+            Refund type
+            <span class="text-brand-red">*</span>
+          </span>
+          <span> The type of refund to issue. </span>
+        </label>
+        <DropdownSelect
+          id="refund-type"
+          v-model="refundType"
+          :options="refundTypes"
+          name="Refund type"
+        />
+      </div>
+      <div v-if="refundType === 'partial'" class="flex flex-col gap-2">
+        <label for="amount" class="flex flex-col gap-1">
+          <span class="text-lg font-semibold text-contrast">
+            Amount
+            <span class="text-brand-red">*</span>
+          </span>
+          <span>
+            Enter the amount in cents of USD. For example for $2, enter 200. (net
+            {{ selectedCharge.net }})
+          </span>
+        </label>
+        <input id="amount" v-model="refundAmount" type="number" autocomplete="off" />
+      </div>
+      <div class="flex flex-col gap-2">
+        <label for="unprovision" class="flex flex-col gap-1">
+          <span class="text-lg font-semibold text-contrast">
+            Unprovision
+            <span class="text-brand-red">*</span>
+          </span>
+          <span> Whether or not the subscription should be unprovisioned on refund. </span>
+        </label>
+        <Toggle id="unprovision" v-model="unprovision" />
+      </div>
+      <div class="flex gap-2">
+        <ButtonStyled color="brand">
+          <button :disabled="refunding" @click="refundCharge">
+            <CheckIcon aria-hidden="true" />
+            Refund charge
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button @click="refundModal.hide()">
+            <XIcon aria-hidden="true" />
+            Cancel
+          </button>
+        </ButtonStyled>
+      </div>
+    </div>
+  </NewModal>
+  <div class="page experimental-styles-within">
+    <div
+      class="mb-4 flex items-center justify-between border-0 border-b border-solid border-divider pb-4"
+    >
+      <div class="flex items-center gap-2">
+        <Avatar :src="user.avatar_url" :alt="user.username" size="32px" circle />
+        <h1 class="m-0 text-2xl font-extrabold">{{ user.username }}'s subscriptions</h1>
+      </div>
+      <div class="flex items-center gap-2">
+        <ButtonStyled>
+          <nuxt-link :to="`/user/${user.id}`">
+            <UserIcon aria-hidden="true" />
+            User profile
+            <ExternalIcon class="h-4 w-4" />
+          </nuxt-link>
+        </ButtonStyled>
+      </div>
+    </div>
+    <div>
+      <div v-for="subscription in subscriptionCharges" :key="subscription.id" class="card">
+        <div class="mb-4 grid grid-cols-[1fr_auto]">
+          <div>
+            <span class="flex items-center gap-2 font-semibold text-contrast">
+              <template v-if="subscription.product.metadata.type === 'midas'">
+                <ModrinthPlusIcon class="h-7 w-min" />
+              </template>
+              <template v-else-if="subscription.product.metadata.type === 'pyro'">
+                <ModrinthServersIcon class="h-7 w-min" />
+              </template>
+              <template v-else> Unknown product </template>
+            </span>
+            <div class="mb-4 mt-2 flex w-full items-center gap-1 text-sm text-secondary">
+              {{ formatCategory(subscription.interval) }} ⋅ {{ subscription.status }} ⋅
+              {{ dayjs(subscription.created).format("MMMM D, YYYY [at] h:mma") }} ({{
+                dayjs(subscription.created).fromNow()
+              }})
+            </div>
+          </div>
+          <div v-if="subscription.metadata?.id" class="flex flex-col items-end gap-2">
+            <ButtonStyled v-if="subscription.product.metadata.type === 'pyro'">
+              <nuxt-link
+                :to="`/servers/manage/${subscription.metadata.id}`"
+                target="_blank"
+                class="w-fit"
+              >
+                <ServerIcon /> Server panel <ExternalIcon class="h-4 w-4" />
+              </nuxt-link>
+            </ButtonStyled>
+            <CopyCode :text="subscription.metadata.id" />
+          </div>
+        </div>
+        <div class="flex flex-col gap-2">
+          <div
+            v-for="(charge, index) in subscription.charges"
+            :key="charge.id"
+            class="relative overflow-clip rounded-xl bg-bg px-4 py-3"
+          >
+            <div
+              class="absolute bottom-0 left-0 top-0 w-1"
+              :class="charge.type === 'refund' ? 'bg-purple' : chargeStatuses[charge.status].color"
+            />
+            <div class="grid w-full grid-cols-[1fr_auto] items-center gap-4">
+              <div class="flex flex-col gap-2">
+                <span>
+                  <span class="font-bold text-contrast">
+                    <template v-if="charge.status === 'succeeded'"> Succeeded </template>
+                    <template v-else-if="charge.status === 'failed'"> Failed </template>
+                    <template v-else-if="charge.status === 'cancelled'"> Cancelled </template>
+                    <template v-else-if="charge.status === 'processing'"> Processing </template>
+                    <template v-else-if="charge.status === 'open'"> Upcoming </template>
+                    <template v-else> {{ charge.status }} </template>
+                  </span>
+                  ⋅
+                  <span>
+                    <template v-if="charge.type === 'refund'"> Refund </template>
+                    <template v-else-if="charge.type === 'subscription'">
+                      <template v-if="charge.status === 'cancelled'"> Subscription </template>
+                      <template v-else-if="index === subscription.charges.length - 1">
+                        Started subscription
+                      </template>
+                      <template v-else> Subscription renewal </template>
+                    </template>
+                    <template v-else-if="charge.type === 'one-time'"> One-time charge </template>
+                    <template v-else-if="charge.type === 'proration'"> Proration charge </template>
+                    <template v-else> {{ charge.status }} </template>
+                  </span>
+                  <template v-if="charge.status !== 'cancelled'">
+                    ⋅
+                    {{ formatPrice(vintl.locale, charge.amount, charge.currency_code) }}
+                  </template>
+                </span>
+                <span class="text-sm text-secondary">
+                  {{ dayjs(charge.due).format("MMMM D, YYYY [at] h:mma") }}
+                  <span class="text-secondary">({{ dayjs(charge.due).fromNow() }}) </span>
+                </span>
+                <div
+                  v-if="flags.developerMode"
+                  class="flex w-full items-center gap-1 text-xs text-secondary"
+                >
+                  {{ charge.status }}
+                  ⋅
+                  {{ charge.type }}
+                  ⋅
+                  {{ formatPrice(vintl.locale, charge.amount, charge.currency_code) }}
+                  ⋅
+                  {{ dayjs(charge.due).format("YYYY-MM-DD h:mma") }}
+                  <template v-if="charge.subscription_interval">
+                    ⋅ {{ charge.subscription_interval }}
+                  </template>
+                </div>
+              </div>
+              <div class="flex gap-2">
+                <ButtonStyled
+                  v-if="
+                    charges.some((x) => x.type === 'refund' && x.parent_charge_id === charge.id)
+                  "
+                >
+                  <div class="button-like disabled"><CheckIcon /> Charge refunded</div>
+                </ButtonStyled>
+                <ButtonStyled
+                  v-else-if="charge.status === 'succeeded' && charge.type !== 'refund'"
+                  color="red"
+                  color-fill="text"
+                >
+                  <button @click="showRefundModal(charge)">
+                    <CurrencyIcon />
+                    Refund options
+                  </button>
+                </ButtonStyled>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { Avatar, ButtonStyled, CopyCode, DropdownSelect, NewModal, Toggle } from "@modrinth/ui";
+import { formatCategory, formatPrice } from "@modrinth/utils";
+import {
+  CheckIcon,
+  XIcon,
+  UserIcon,
+  ModrinthPlusIcon,
+  ServerIcon,
+  ExternalIcon,
+  CurrencyIcon,
+} from "@modrinth/assets";
+import dayjs from "dayjs";
+import { products } from "~/generated/state.json";
+import ModrinthServersIcon from "~/components/ui/servers/ModrinthServersIcon.vue";
+
+const flags = useFeatureFlags();
+const route = useRoute();
+const data = useNuxtApp();
+const vintl = useVIntl();
+const { formatMessage } = vintl;
+
+const messages = defineMessages({
+  userNotFoundError: {
+    id: "admin.billing.error.not-found",
+    defaultMessage: "User not found",
+  },
+});
+
+const { data: user } = await useAsyncData(`user/${route.params.id}`, () =>
+  useBaseFetch(`user/${route.params.id}`),
+);
+
+if (!user.value) {
+  throw createError({
+    fatal: true,
+    statusCode: 404,
+    message: formatMessage(messages.userNotFoundError),
+  });
+}
+
+let subscriptions, charges, refreshCharges;
+try {
+  [{ data: subscriptions }, { data: charges, refresh: refreshCharges }] = await Promise.all([
+    useAsyncData(`billing/subscriptions?user_id=${route.params.id}`, () =>
+      useBaseFetch(`billing/subscriptions?user_id=${user.value.id}`, {
+        internal: true,
+      }),
+    ),
+    useAsyncData(`billing/payments?user_id=${route.params.id}`, () =>
+      useBaseFetch(`billing/payments?user_id=${user.value.id}`, {
+        internal: true,
+      }),
+    ),
+  ]);
+} catch {
+  throw createError({
+    fatal: true,
+    statusCode: 404,
+    message: formatMessage(messages.userNotFoundError),
+  });
+}
+
+const subscriptionCharges = computed(() => {
+  return subscriptions.value.map((subscription) => {
+    return {
+      ...subscription,
+      charges: charges.value
+        .filter((charge) => charge.subscription_id === subscription.id)
+        .slice()
+        .sort((a, b) => dayjs(b.due).diff(dayjs(a.due))),
+      product: products.find((product) =>
+        product.prices.some((price) => price.id === subscription.price_id),
+      ),
+    };
+  });
+});
+
+const refunding = ref(false);
+const refundModal = ref();
+const selectedCharge = ref(null);
+const refundType = ref("full");
+const refundTypes = ref(["full", "partial"]);
+const refundAmount = ref(0);
+const unprovision = ref(false);
+
+function showRefundModal(charge) {
+  selectedCharge.value = charge;
+  refundType.value = "full";
+  refundAmount.value = 0;
+  unprovision.value = false;
+  refundModal.value.show();
+}
+
+async function refundCharge() {
+  refunding.value = true;
+  try {
+    await useBaseFetch(`billing/charge/${selectedCharge.value.id}/refund`, {
+      method: "POST",
+      body: JSON.stringify({
+        type: refundType.value,
+        amount: refundAmount.value,
+        unprovision: unprovision.value,
+      }),
+      internal: true,
+    });
+    await refreshCharges();
+    refundModal.value.hide();
+  } catch (err) {
+    data.$notify({
+      group: "main",
+      title: "Error refunding",
+      text: err.data?.description ?? err,
+      type: "error",
+    });
+  }
+  refunding.value = false;
+}
+
+const chargeStatuses = {
+  open: {
+    color: "bg-blue",
+  },
+  processing: {
+    color: "bg-orange",
+  },
+  succeeded: {
+    color: "bg-green",
+  },
+  failed: {
+    color: "bg-red",
+  },
+  cancelled: {
+    color: "bg-red",
+  },
+};
+</script>
+<style scoped>
+.page {
+  padding: 1rem;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 56rem;
+}
+</style>
diff --git a/apps/frontend/src/pages/admin/user_email.vue b/apps/frontend/src/pages/admin/user_email.vue
new file mode 100644
index 000000000..40b5e1886
--- /dev/null
+++ b/apps/frontend/src/pages/admin/user_email.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="normal-page no-sidebar">
+    <h1>User account request</h1>
+    <div class="normal-page__content">
+      <div class="card flex flex-col gap-3">
+        <div class="flex flex-col gap-2">
+          <label for="name">
+            <span class="text-lg font-semibold text-contrast">
+              User email
+              <span class="text-brand-red">*</span>
+            </span>
+          </label>
+          <input
+            id="name"
+            v-model="userEmail"
+            type="email"
+            maxlength="64"
+            :placeholder="`Enter user email...`"
+            autocomplete="off"
+          />
+        </div>
+        <div class="flex gap-2">
+          <ButtonStyled color="brand">
+            <button @click="getUserFromEmail">
+              <MailIcon aria-hidden="true" />
+              Get user account
+            </button>
+          </ButtonStyled>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ButtonStyled } from "@modrinth/ui";
+import { MailIcon } from "@modrinth/assets";
+
+const userEmail = ref("");
+
+async function getUserFromEmail() {
+  startLoading();
+
+  try {
+    const result = await useBaseFetch(`user_email?email=${encodeURIComponent(userEmail.value)}`, {
+      method: "GET",
+      apiVersion: 3,
+    });
+
+    await navigateTo(`/user/${result.username}`);
+  } catch (err) {
+    console.error(err);
+    addNotification({
+      group: "main",
+      title: "An error occurred",
+      text: err.data.description,
+      type: "error",
+    });
+  }
+  stopLoading();
+}
+</script>
diff --git a/apps/frontend/src/pages/collection/[id].vue b/apps/frontend/src/pages/collection/[id].vue
index d40a4d47d..6db09cb9c 100644
--- a/apps/frontend/src/pages/collection/[id].vue
+++ b/apps/frontend/src/pages/collection/[id].vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <ModalConfirm
-      v-if="auth.user && auth.user.id === creator.id"
+    <ConfirmModal
+      v-if="canEdit"
       ref="deleteModal"
       :title="formatMessage(messages.deleteModalTitle)"
       :description="formatMessage(messages.deleteModalDescription)"
@@ -365,34 +365,35 @@
 
 <script setup>
 import {
+  BoxIcon,
   CalendarIcon,
   EditIcon,
-  XIcon,
-  SaveIcon,
-  UploadIcon,
-  TrashIcon,
-  LinkIcon,
-  LockIcon,
   GridIcon,
   ImageIcon,
-  ListIcon,
-  UpdatedIcon,
   LibraryIcon,
-  BoxIcon,
+  LinkIcon,
+  ListIcon,
+  LockIcon,
+  SaveIcon,
+  TrashIcon,
+  UpdatedIcon,
+  UploadIcon,
+  XIcon,
 } from "@modrinth/assets";
 import {
-  PopoutMenu,
-  FileInput,
-  DropdownSelect,
   Avatar,
   Button,
   commonMessages,
+  ConfirmModal,
+  DropdownSelect,
+  FileInput,
+  PopoutMenu,
 } from "@modrinth/ui";
 
+import { isAdmin } from "@modrinth/utils";
 import WorldIcon from "assets/images/utils/world.svg";
 import UpToDate from "assets/images/illustrations/up_to_date.svg";
 import { addNotification } from "~/composables/notifs.js";
-import ModalConfirm from "~/components/ui/ModalConfirm.vue";
 import NavRow from "~/components/ui/NavRow.vue";
 import ProjectCard from "~/components/ui/ProjectCard.vue";
 import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
@@ -596,7 +597,7 @@ useSeoMeta({
 const canEdit = computed(
   () =>
     auth.value.user &&
-    auth.value.user.id === collection.value.user &&
+    (auth.value.user.id === collection.value.user || isAdmin(auth.value.user)) &&
     collection.value.id !== "following",
 );
 
@@ -650,7 +651,7 @@ async function saveChanges() {
       method: "PATCH",
       body: {
         name: name.value,
-        description: summary.value,
+        description: summary.value || null,
         status: visibility.value,
         new_projects: newProjectIds,
       },
@@ -685,7 +686,11 @@ async function deleteCollection() {
       method: "DELETE",
       apiVersion: 3,
     });
-    await navigateTo("/dashboard/collections");
+    if (auth.value.user.id === collection.value.user) {
+      await navigateTo("/dashboard/collections");
+    } else {
+      await navigateTo(`/user/${collection.value.user}/collections`);
+    }
   } catch (err) {
     addNotification({
       group: "main",
diff --git a/apps/frontend/src/pages/dashboard/collections.vue b/apps/frontend/src/pages/dashboard/collections.vue
index a231062b9..11c86c38e 100644
--- a/apps/frontend/src/pages/dashboard/collections.vue
+++ b/apps/frontend/src/pages/dashboard/collections.vue
@@ -49,7 +49,9 @@
         </div>
       </nuxt-link>
       <nuxt-link
-        v-for="collection in orderedCollections"
+        v-for="collection in orderedCollections.sort(
+          (a, b) => new Date(b.created) - new Date(a.created),
+        )"
         :key="collection.id"
         :to="`/collection/${collection.id}`"
         class="universal-card recessed collection"
diff --git a/apps/frontend/src/pages/dashboard/notifications.vue b/apps/frontend/src/pages/dashboard/notifications.vue
index 2c4f839d2..8d6a75973 100644
--- a/apps/frontend/src/pages/dashboard/notifications.vue
+++ b/apps/frontend/src/pages/dashboard/notifications.vue
@@ -50,7 +50,7 @@
   </div>
 </template>
 <script setup>
-import { Button } from "@modrinth/ui";
+import { Button, Chips } from "@modrinth/ui";
 import { HistoryIcon } from "@modrinth/assets";
 import {
   fetchExtraNotificationData,
@@ -58,7 +58,6 @@ import {
   markAsRead,
 } from "~/helpers/notifications.js";
 import NotificationItem from "~/components/ui/NotificationItem.vue";
-import Chips from "~/components/ui/Chips.vue";
 import CheckCheckIcon from "~/assets/images/utils/check-check.svg?component";
 import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
 import Pagination from "~/components/ui/Pagination.vue";
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 25e5d9825..91f56cf1e 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -1,39 +1,95 @@
 <template>
-  <div>
+  <div class="experimental-styles-within">
     <section class="universal-card">
       <h2 class="text-2xl">Revenue</h2>
-      <div v-if="userBalance.available >= minWithdraw">
-        <p>
-          You have
-          <strong>{{ $formatMoney(userBalance.available) }}</strong>
-          available to withdraw. <strong>{{ $formatMoney(userBalance.pending) }}</strong> of your
-          balance is <nuxt-link class="text-link" to="/legal/cmp-info#pending">pending</nuxt-link>.
-        </p>
+      <div class="grid-display">
+        <div class="grid-display__item">
+          <div class="label">Available now</div>
+          <div class="value">
+            {{ $formatMoney(userBalance.available) }}
+          </div>
+        </div>
+        <div class="grid-display__item">
+          <div class="label">
+            Total pending
+            <nuxt-link
+              v-tooltip="`Click to read about how Modrinth handles your revenue.`"
+              class="align-middle text-link"
+              to="/legal/cmp-info#pending"
+            >
+              <UnknownIcon />
+            </nuxt-link>
+          </div>
+          <div class="value">
+            {{ $formatMoney(userBalance.pending) }}
+          </div>
+        </div>
+        <div class="grid-display__item">
+          <h3 class="label m-0">
+            Available soon
+            <nuxt-link
+              v-tooltip="`Click to read about how Modrinth handles your revenue.`"
+              class="align-middle text-link"
+              to="/legal/cmp-info#pending"
+            >
+              <UnknownIcon />
+            </nuxt-link>
+          </h3>
+          <ul class="m-0 list-none p-0">
+            <li
+              v-for="date in availableSoonDateKeys"
+              :key="date"
+              class="flex items-center justify-between border-0 border-solid border-b-divider p-0 [&:not(:last-child)]:mb-1 [&:not(:last-child)]:border-b-[1px] [&:not(:last-child)]:pb-1"
+            >
+              <span
+                v-tooltip="
+                  availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1
+                    ? `Revenue period is ongoing. \nThis amount is not yet finalized.`
+                    : null
+                "
+                :class="{
+                  'cursor-help':
+                    availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1,
+                }"
+                class="inline-flex items-center gap-1 font-bold"
+              >
+                {{ $formatMoney(availableSoonDates[date]) }}
+                <template
+                  v-if="availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1"
+                >
+                  <InProgressIcon />
+                </template>
+              </span>
+              <span class="text-sm text-secondary">
+                {{ formatDate(dayjs(date)) }}
+              </span>
+            </li>
+          </ul>
+        </div>
       </div>
-      <p v-else>
-        You have made
-        <strong>{{ $formatMoney(userBalance.available) }}</strong
-        >, which is under the minimum of ${{ minWithdraw }} to withdraw.
-        <strong>{{ $formatMoney(userBalance.pending) }}</strong> of your balance is
-        <nuxt-link class="text-link" to="/legal/cmp-info#pending">pending</nuxt-link>.
-      </p>
       <div class="input-group mt-4">
-        <nuxt-link
-          v-if="userBalance.available >= minWithdraw"
-          class="iconified-button brand-button"
-          to="/dashboard/revenue/withdraw"
-        >
-          <TransferIcon /> Withdraw
-        </nuxt-link>
+        <span :class="{ 'disabled-cursor-wrapper': userBalance.available < minWithdraw }">
+          <nuxt-link
+            :aria-disabled="userBalance.available < minWithdraw ? 'true' : 'false'"
+            :class="{ 'disabled-link': userBalance.available < minWithdraw }"
+            :disabled="userBalance.available < minWithdraw ? 'true' : 'false'"
+            :tabindex="userBalance.available < minWithdraw ? -1 : undefined"
+            class="iconified-button brand-button"
+            to="/dashboard/revenue/withdraw"
+          >
+            <TransferIcon /> Withdraw
+          </nuxt-link>
+        </span>
         <NuxtLink class="iconified-button" to="/dashboard/revenue/transfers">
-          <HistoryIcon /> View transfer history
+          <HistoryIcon />
+          View transfer history
         </NuxtLink>
       </div>
-      <p>
+      <p class="text-sm text-secondary">
         By uploading projects to Modrinth and withdrawing money from your account, you agree to the
-        <nuxt-link to="/legal/cmp" class="text-link">Rewards Program Terms</nuxt-link>. For more
+        <nuxt-link class="text-link" to="/legal/cmp">Rewards Program Terms</nuxt-link>. For more
         information on how the rewards system works, see our information page
-        <nuxt-link to="/legal/cmp-info" class="text-link">here</nuxt-link>.
+        <nuxt-link class="text-link" to="/legal/cmp-info">here</nuxt-link>.
       </p>
     </section>
     <section class="universal-card">
@@ -46,12 +102,13 @@
           {{ auth.user.payout_data.paypal_address }}
         </p>
         <button class="btn mt-4" @click="removeAuthProvider('paypal')">
-          <XIcon /> Disconnect account
+          <XIcon />
+          Disconnect account
         </button>
       </template>
       <template v-else>
         <p>Connect your PayPal account to enable withdrawing to your PayPal balance.</p>
-        <a class="btn mt-4" :href="`${getAuthUrl('paypal')}&token=${auth.token}`">
+        <a :href="`${getAuthUrl('paypal')}&token=${auth.token}`" class="btn mt-4">
           <PayPalIcon />
           Sign in with PayPal
         </a>
@@ -60,7 +117,8 @@
       <p>
         Tremendous payments are sent to your Modrinth email. To change/set your Modrinth email,
         visit
-        <nuxt-link to="/settings/account" class="text-link">here</nuxt-link>.
+        <nuxt-link class="text-link" to="/settings/account">here</nuxt-link>
+        .
       </p>
       <h3>Venmo</h3>
       <p>Enter your Venmo username below to enable withdrawing to your Venmo balance.</p>
@@ -68,18 +126,32 @@
       <input
         id="venmo"
         v-model="auth.user.payout_data.venmo_handle"
+        autocomplete="off"
         class="mt-4"
-        type="search"
         name="search"
         placeholder="@example"
-        autocomplete="off"
+        type="search"
       />
-      <button class="btn btn-secondary" @click="updateVenmo"><SaveIcon /> Save information</button>
+      <button class="btn btn-secondary" @click="updateVenmo">
+        <SaveIcon />
+        Save information
+      </button>
     </section>
   </div>
 </template>
 <script setup>
-import { TransferIcon, HistoryIcon, PayPalIcon, SaveIcon, XIcon } from "@modrinth/assets";
+import {
+  HistoryIcon,
+  InProgressIcon,
+  PayPalIcon,
+  SaveIcon,
+  TransferIcon,
+  UnknownIcon,
+  XIcon,
+} from "@modrinth/assets";
+import { formatDate } from "@modrinth/utils";
+import dayjs from "dayjs";
+import { computed } from "vue";
 
 const auth = await useAuth();
 const minWithdraw = ref(0.01);
@@ -88,6 +160,33 @@ const { data: userBalance } = await useAsyncData(`payout/balance`, () =>
   useBaseFetch(`payout/balance`, { apiVersion: 3 }),
 );
 
+const deadlineEnding = computed(() => {
+  let deadline = dayjs().subtract(2, "month").endOf("month").add(60, "days");
+  if (deadline.isBefore(dayjs().startOf("day"))) {
+    deadline = dayjs().subtract(1, "month").endOf("month").add(60, "days");
+  }
+  return deadline;
+});
+
+const availableSoonDates = computed(() => {
+  // Get the next 3 dates from userBalance.dates that are from now to the deadline + 4 months to make sure we get all the pending ones.
+  const dates = Object.keys(userBalance.value.dates)
+    .filter((date) => {
+      const dateObj = dayjs(date);
+      return (
+        dateObj.isAfter(dayjs()) && dateObj.isBefore(dayjs(deadlineEnding.value).add(4, "month"))
+      );
+    })
+    .sort((a, b) => dayjs(a).diff(dayjs(b)));
+
+  return dates.reduce((acc, date) => {
+    acc[date] = userBalance.value.dates[date];
+    return acc;
+  }, {});
+});
+
+const availableSoonDateKeys = computed(() => Object.keys(availableSoonDates.value));
+
 async function updateVenmo() {
   startLoading();
   try {
@@ -118,4 +217,16 @@ strong {
   color: var(--color-text-dark);
   font-weight: 500;
 }
+
+.disabled-cursor-wrapper {
+  cursor: not-allowed;
+}
+
+.disabled-link {
+  pointer-events: none;
+}
+
+.grid-display {
+  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+}
 </style>
diff --git a/apps/frontend/src/pages/index.vue b/apps/frontend/src/pages/index.vue
index b6bce53af..980d3d13b 100644
--- a/apps/frontend/src/pages/index.vue
+++ b/apps/frontend/src/pages/index.vue
@@ -65,7 +65,7 @@
       <div class="users-section">
         <div class="section-header">
           <div class="section-label green">For Players</div>
-          <h2 class="section-tagline">Discover over 10,000 creations</h2>
+          <h2 class="section-tagline">Discover over 50,000 creations</h2>
           <p class="section-description">
             From magical biomes to cursed dungeons, you can be sure to find content to bring your
             gameplay to the next level.
diff --git a/apps/frontend/src/pages/legal/ccpa.vue b/apps/frontend/src/pages/legal/ccpa.vue
index d1487ec3d..885f67d1c 100644
--- a/apps/frontend/src/pages/legal/ccpa.vue
+++ b/apps/frontend/src/pages/legal/ccpa.vue
@@ -2,7 +2,7 @@
   <div class="markdown-body">
     <h1>Privacy Notice for California Residents</h1>
     <p><strong>Effective Date: </strong><em>August 5th, 2023</em></p>
-    <p><strong>Last reviewed on: </strong><em>August 5th, 2023</em></p>
+    <p><strong>Last reviewed on: </strong><em>March 11th, 2025</em></p>
     <p>
       This Privacy Notice for California Residents supplements the information contained in the
       <nuxt-link to="/legal/privacy">Privacy Policy</nuxt-link> of Rinth, Inc. (the "Company," "we,"
@@ -49,7 +49,7 @@
             information, medical information, or health insurance information. <br /><br />
             Some personal information included in this category may overlap with other categories.
           </td>
-          <td>NO</td>
+          <td>YES</td>
         </tr>
         <tr>
           <td>C. Protected classification characteristics.</td>
@@ -68,7 +68,7 @@
             Records of personal property, products or services purchased, obtained, or considered,
             or other purchasing or consuming histories or tendencies.
           </td>
-          <td>NO</td>
+          <td>YES</td>
         </tr>
         <tr>
           <td>E. Biometric information.</td>
diff --git a/apps/frontend/src/pages/legal/cmp-info.vue b/apps/frontend/src/pages/legal/cmp-info.vue
index 54a23a9b3..d08bec903 100644
--- a/apps/frontend/src/pages/legal/cmp-info.vue
+++ b/apps/frontend/src/pages/legal/cmp-info.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="markdown-body">
     <h1>Rewards Program Information</h1>
-    <p><em>Last modified: Sep 12, 2024</em></p>
+    <p><em>Last modified: Feb 20, 2025</em></p>
     <p>
       This page was created for transparency for how the rewards program works on Modrinth. Feel
       free to join our Discord or email
@@ -82,57 +82,90 @@
     <p>
       Modrinth receives ad revenue from our ad providers on a NET 60 day basis. Due to this, not all
       revenue is immediately available to withdraw. We pay creators as soon as we receive the money
-      from our ad providers, which is 60 days after the last day of each month. This table outlines
-      some example dates of how NET 60 payments are made:
+      from our ad providers, which is 60 days after the last day of each month.
     </p>
+
+    <p>
+      To understand when revenue becomes available, you can use this calculator to estimate when
+      revenue earned on a specific date will be available for withdrawal. Please be advised that all
+      dates within this calculator are represented at 00:00 UTC.
+    </p>
+
     <table>
       <thead>
         <tr>
+          <th>Timeline</th>
           <th>Date</th>
-          <th>Payment available date</th>
         </tr>
       </thead>
       <tbody>
         <tr>
-          <td>January 1st</td>
-          <td>March 31st</td>
+          <td>Revenue earned on</td>
+          <td>
+            <input id="revenue-date-picker" v-model="rawSelectedDate" type="date" />
+            <noscript
+              >(JavaScript must be enabled for the date picker to function, example date:
+              2024-07-15)
+            </noscript>
+          </td>
         </tr>
         <tr>
-          <td>January 15th</td>
-          <td>March 31st</td>
+          <td>End of the month</td>
+          <td>{{ formatDate(endOfMonthDate) }}</td>
         </tr>
         <tr>
-          <td>March 3rd</td>
-          <td>May 30th</td>
+          <td>NET 60 policy applied</td>
+          <td>+ 60 days</td>
         </tr>
-        <tr>
-          <td>June 30th</td>
-          <td>August 29th</td>
-        </tr>
-        <tr>
-          <td>July 14th</td>
-          <td>September 29th</td>
-        </tr>
-        <tr>
-          <td>October 12th</td>
-          <td>December 30th</td>
+        <tr class="final-result">
+          <td>Available for withdrawal</td>
+          <td>{{ formatDate(withdrawalDate) }}</td>
         </tr>
       </tbody>
     </table>
+
     <h3>How do I know Modrinth is being transparent about revenue?</h3>
     <p>
       We aim to be as transparent as possible with creator revenue. All of our code is open source,
       including our
       <a href="https://github.com/modrinth/code/blob/main/apps/labrinth/src/queue/payouts.rs#L598">
-        revenue distribution system </a
+        revenue distribution system</a
       >. We also have an
-      <a href="https://api.modrinth.com/v3/payout/platform_revenue">API route</a> that allows users
-      to query exact daily revenue for the site.
+      <a href="https://api.modrinth.com/v3/payout/platform_revenue">API route</a>
+      to query the exact daily advertising revenue for the site - so far, creators on Modrinth have
+      earned a total of <strong>{{ formatMoney(platformRevenue) }}</strong> in ad revenue.
     </p>
+    <table>
+      <thead>
+        <tr>
+          <th>Date</th>
+          <th>Revenue</th>
+          <th>Creator Revenue (75%)</th>
+          <th>Modrinth's Cut (25%)</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="item in platformRevenueData" :key="item.time">
+          <td>{{ formatDate(dayjs.unix(item.time)) }}</td>
+          <td>{{ formatMoney(item.revenue) }}</td>
+          <td>{{ formatMoney(item.creator_revenue) }}</td>
+          <td>{{ formatMoney(item.revenue - item.creator_revenue) }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <small
+      >Modrinth's total ad revenue in the previous 5 days, for the entire dataset, use the
+      aforementioned
+      <a href="https://api.modrinth.com/v3/payout/platform_revenue">API route</a>.</small
+    >
   </div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
+import dayjs from "dayjs";
+import { computed, ref } from "vue";
+import { formatDate, formatMoney } from "@modrinth/utils";
+
 const description =
   "Information about the Rewards Program of Modrinth, an open source modding platform focused on Minecraft.";
 
@@ -142,4 +175,18 @@ useSeoMeta({
   ogTitle: "Rewards Program Information",
   ogDescription: description,
 });
+
+const rawSelectedDate = ref(dayjs().format("YYYY-MM-DD"));
+const selectedDate = computed(() => dayjs(rawSelectedDate.value));
+const endOfMonthDate = computed(() => selectedDate.value.endOf("month"));
+const withdrawalDate = computed(() => endOfMonthDate.value.add(60, "days"));
+
+const { data: transparencyInformation } = await useAsyncData("payout/platform_revenue", () =>
+  useBaseFetch("payout/platform_revenue", {
+    apiVersion: 3,
+  }),
+);
+
+const platformRevenue = transparencyInformation.value.all_time;
+const platformRevenueData = transparencyInformation.value.data.slice(0, 5);
 </script>
diff --git a/apps/frontend/src/pages/moderation/review.vue b/apps/frontend/src/pages/moderation/review.vue
index 0b94fbe62..7d2372cff 100644
--- a/apps/frontend/src/pages/moderation/review.vue
+++ b/apps/frontend/src/pages/moderation/review.vue
@@ -101,7 +101,7 @@
   </section>
 </template>
 <script setup>
-import Chips from "~/components/ui/Chips.vue";
+import { Chips } from "@modrinth/ui";
 import Avatar from "~/components/ui/Avatar.vue";
 import UnknownIcon from "~/assets/images/utils/unknown.svg?component";
 import EyeIcon from "~/assets/images/utils/eye.svg?component";
@@ -164,17 +164,45 @@ const projectTypes = computed(() => {
   return [...set];
 });
 
+function segmentData(data, segmentSize = 800) {
+  return data.reduce((acc, curr, index) => {
+    const segment = Math.floor(index / segmentSize);
+
+    if (!acc[segment]) {
+      acc[segment] = [];
+    }
+    acc[segment].push(curr);
+    return acc;
+  }, []);
+}
+
+function fetchSegmented(data, createUrl, options = {}) {
+  return Promise.all(segmentData(data).map((ids) => useBaseFetch(createUrl(ids), options))).then(
+    (results) => results.flat(),
+  );
+}
+
+function asEncodedJsonArray(data) {
+  return encodeURIComponent(JSON.stringify(data));
+}
+
 if (projects.value) {
   const teamIds = projects.value.map((x) => x.team_id);
-  const organizationIds = projects.value.filter((x) => x.organization).map((x) => x.organization);
+  const orgIds = projects.value.filter((x) => x.organization).map((x) => x.organization);
 
-  const url = `teams?ids=${encodeURIComponent(JSON.stringify(teamIds))}`;
-  const orgUrl = `organizations?ids=${encodeURIComponent(JSON.stringify(organizationIds))}`;
-  const { data: result } = await useAsyncData(url, () => useBaseFetch(url));
-  const { data: orgs } = await useAsyncData(orgUrl, () => useBaseFetch(orgUrl, { apiVersion: 3 }));
+  const [{ data: teams }, { data: orgs }] = await Promise.all([
+    useAsyncData(`teams?ids=${asEncodedJsonArray(teamIds)}`, () =>
+      fetchSegmented(teamIds, (ids) => `teams?ids=${asEncodedJsonArray(ids)}`),
+    ),
+    useAsyncData(`organizations?ids=${asEncodedJsonArray(orgIds)}`, () =>
+      fetchSegmented(orgIds, (ids) => `organizations?ids=${asEncodedJsonArray(ids)}`, {
+        apiVersion: 3,
+      }),
+    ),
+  ]);
 
-  if (result.value) {
-    members.value = result.value;
+  if (teams.value) {
+    members.value = teams.value;
 
     projects.value = projects.value.map((project) => {
       project.owner = members.value
diff --git a/apps/frontend/src/pages/news/changelog.vue b/apps/frontend/src/pages/news/changelog.vue
new file mode 100644
index 000000000..9cfb0802b
--- /dev/null
+++ b/apps/frontend/src/pages/news/changelog.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="page experimental-styles-within">
+    <h1 class="m-0 text-3xl font-extrabold">Changelog</h1>
+    <p class="my-3">Keep up-to-date on what's new with Modrinth.</p>
+    <NuxtPage />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.page {
+  padding: 1rem;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 56rem;
+}
+</style>
diff --git a/apps/frontend/src/pages/news/changelog/[product]/[date].vue b/apps/frontend/src/pages/news/changelog/[product]/[date].vue
new file mode 100644
index 000000000..39482b97c
--- /dev/null
+++ b/apps/frontend/src/pages/news/changelog/[product]/[date].vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { getChangelog } from "@modrinth/utils";
+import { ChangelogEntry, Timeline } from "@modrinth/ui";
+import { ChevronLeftIcon } from "@modrinth/assets";
+
+const route = useRoute();
+
+const changelogEntry = computed(() =>
+  route.params.date
+    ? getChangelog().find((x) => {
+        if (x.product === route.params.product) {
+          console.log("Found matching product!");
+
+          if (x.version && x.version === route.params.date) {
+            console.log("Found matching version!");
+            return x;
+          } else if (x.date.unix() === Number(route.params.date as string)) {
+            console.log("Found matching date!");
+            return x;
+          }
+        }
+        return undefined;
+      })
+    : undefined,
+);
+
+const isFirst = computed(() => changelogEntry.value?.date === getChangelog()[0].date);
+
+if (!changelogEntry.value) {
+  createError({ statusCode: 404, statusMessage: "Version not found" });
+}
+</script>
+
+<template>
+  <div v-if="changelogEntry">
+    <nuxt-link
+      :to="`/news/changelog?filter=${changelogEntry.product}`"
+      class="mb-4 mt-4 flex w-fit items-center gap-2 text-link"
+    >
+      <ChevronLeftIcon /> View full changelog
+    </nuxt-link>
+    <Timeline fade-out-end :fade-out-start="!isFirst" :class="{ '-mt-8': !isFirst }">
+      <ChangelogEntry
+        :entry="changelogEntry"
+        :first="isFirst"
+        show-type
+        :class="{ 'mt-8': !isFirst }"
+      />
+    </Timeline>
+  </div>
+</template>
diff --git a/apps/frontend/src/pages/news/changelog/index.vue b/apps/frontend/src/pages/news/changelog/index.vue
new file mode 100644
index 000000000..c89bfc5a4
--- /dev/null
+++ b/apps/frontend/src/pages/news/changelog/index.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { type Product, getChangelog } from "@modrinth/utils";
+import { ChangelogEntry } from "@modrinth/ui";
+import Timeline from "@modrinth/ui/src/components/base/Timeline.vue";
+import NavTabs from "~/components/ui/NavTabs.vue";
+
+const route = useRoute();
+
+const filter = ref<Product | undefined>(undefined);
+const allChangelogEntries = ref(getChangelog());
+
+function updateFilter() {
+  if (route.query.filter) {
+    filter.value = route.query.filter as Product;
+  } else {
+    filter.value = undefined;
+  }
+}
+
+updateFilter();
+
+watch(
+  () => route.query,
+  () => updateFilter(),
+);
+
+const changelogEntries = computed(() =>
+  allChangelogEntries.value.filter((x) => !filter.value || x.product === filter.value),
+);
+</script>
+
+<template>
+  <NavTabs
+    :links="[
+      {
+        label: 'All',
+        href: '',
+      },
+      {
+        label: 'Website',
+        href: 'web',
+      },
+      {
+        label: 'Servers',
+        href: 'servers',
+      },
+      {
+        label: 'App',
+        href: 'app',
+      },
+    ]"
+    query="filter"
+    class="mb-4"
+  />
+  <Timeline fade-out-end>
+    <ChangelogEntry
+      v-for="(entry, index) in changelogEntries"
+      :key="entry.date"
+      :entry="entry"
+      :first="index === 0"
+      :show-type="filter === undefined"
+      has-link
+    />
+  </Timeline>
+</template>
diff --git a/apps/frontend/src/pages/report.vue b/apps/frontend/src/pages/report.vue
index 8c54c9d3d..7ce690a24 100644
--- a/apps/frontend/src/pages/report.vue
+++ b/apps/frontend/src/pages/report.vue
@@ -1,99 +1,270 @@
 <template>
   <div class="page">
-    <Card>
-      <div class="content">
-        <div>
-          <h1 class="card-title-adjustments">Submit a Report</h1>
-          <div>
-            <p>
-              Modding should be safe for everyone, so we take abuse and malicious intent seriously
-              at Modrinth. If you encounter content that violates our
-              <nuxt-link class="text-link" to="/legal/terms">Terms of Service</nuxt-link> or our
-              <nuxt-link class="text-link" to="/legal/rules">Rules</nuxt-link>, please report it to
-              us here.
-            </p>
-            <p>
-              This form is intended exclusively for reporting abuse or harmful content to Modrinth
-              staff. For bugs related to specific projects, please use the project's designated
-              Issues link or Discord channel.
-            </p>
-            <p>
-              Your privacy is important to us; rest assured that your identifying information will
-              be kept confidential.
-            </p>
-          </div>
-        </div>
-        <div class="report-info-section">
-          <div class="report-info-item">
-            <label for="report-item">Item type to report</label>
-            <DropdownSelect
-              id="report-item"
-              v-model="reportItem"
-              name="report-item"
-              :options="reportItems"
-              :display-name="capitalizeString"
-              :multiple="false"
-              :searchable="false"
-              :show-no-results="false"
-              :show-labels="false"
-              placeholder="Choose report item"
-            />
-          </div>
-          <div class="report-info-item">
-            <label for="report-item-id">Item ID</label>
-            <input
-              id="report-item-id"
-              v-model="reportItemID"
-              type="text"
-              placeholder="ex. project ID"
-              autocomplete="off"
-              :disabled="reportItem === ''"
-            />
-          </div>
-          <div class="report-info-item">
-            <label for="report-type">Reason for report</label>
-            <DropdownSelect
-              id="report-type"
-              v-model="reportType"
-              name="report-type"
-              :options="reportTypes"
-              :multiple="false"
-              :searchable="false"
-              :show-no-results="false"
-              :show-labels="false"
-              :display-name="capitalizeString"
-              placeholder="Choose report type"
-            />
-          </div>
-        </div>
-        <div class="report-submission-section">
-          <div>
-            <p>
-              Please provide additional context about your report. Include links and images if
-              possible. <strong>Empty reports will be closed.</strong>
-            </p>
-          </div>
-          <MarkdownEditor v-model="reportBody" placeholder="" :on-image-upload="onImageUpload" />
-        </div>
-        <div class="submit-button">
-          <Button
-            id="submit-button"
-            color="primary"
-            :disabled="submitLoading || !canSubmit"
-            @click="submitReport"
-          >
-            <SaveIcon aria-hidden="true" />
-            Submit
-          </Button>
+    <div class="experimental-styles-within flex flex-col gap-2">
+      <RadialHeader class="top-box mb-2 text-center" color="orange">
+        <ScaleIcon class="h-12 w-12 text-brand-orange" />
+        <h1 class="m-3 gap-2 text-3xl font-extrabold">
+          {{
+            prefilled && itemName
+              ? existingReport
+                ? formatMessage(messages.alreadyReportedItem, { title: itemName })
+                : formatMessage(messages.reportItem, { title: itemName })
+              : formatMessage(messages.reportContent)
+          }}
+        </h1>
+      </RadialHeader>
+      <div
+        v-if="prefilled && itemName && existingReport"
+        class="mx-auto flex max-w-[35rem] flex-col items-center gap-4 text-center"
+      >
+        {{ formatMessage(messages.alreadyReportedDescription, { item: reportItem || "content" }) }}
+        <div class="flex gap-2">
+          <ButtonStyled v-if="itemLink">
+            <nuxt-link :to="itemLink">
+              <LeftArrowIcon />
+              {{ formatMessage(messages.backToItem, { item: reportItem || "content" }) }}
+            </nuxt-link>
+          </ButtonStyled>
+          <ButtonStyled color="brand">
+            <nuxt-link :to="`/dashboard/report/${existingReport.id}`">
+              {{ formatMessage(messages.goToReport) }} <RightArrowIcon />
+            </nuxt-link>
+          </ButtonStyled>
         </div>
       </div>
-    </Card>
+      <template v-else>
+        <div class="mb-3 grid grid-cols-1 gap-4 px-6 md:grid-cols-2">
+          <div class="flex flex-col gap-2">
+            <h2 class="m-0 text-lg font-extrabold">{{ formatMessage(messages.pleaseReport) }}</h2>
+            <div class="text-md flex items-center gap-2 font-semibold text-contrast">
+              <CheckCircleIcon class="h-8 w-8 shrink-0 text-brand-green" />
+              <div class="flex flex-col">
+                <span>
+                  <IntlFormatted :message-id="messages.violation">
+                    <template #rules-link="{ children }">
+                      <nuxt-link class="text-link" :to="`/legal/rules`">
+                        <component :is="() => children" />
+                      </nuxt-link>
+                    </template>
+                    <template #terms-link="{ children }">
+                      <nuxt-link class="text-link" :to="`/legal/terms`">
+                        <component :is="() => children" />
+                      </nuxt-link>
+                    </template>
+                  </IntlFormatted>
+                </span>
+                <span class="text-sm font-medium text-secondary">
+                  {{ formatMessage(messages.violationDescription) }}
+                </span>
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-col gap-2">
+            <h2 class="m-0 text-lg font-extrabold">{{ formatMessage(messages.formNotFor) }}</h2>
+            <div class="text-md flex items-center gap-2 font-semibold text-contrast">
+              <XCircleIcon class="h-8 w-8 shrink-0 text-brand-red" />
+
+              <div class="flex flex-col">
+                <span>{{ formatMessage(messages.bugReports) }}</span>
+                <span v-if="itemIssueTracker" class="text-sm font-medium text-secondary">
+                  <IntlFormatted :message-id="messages.bugReportsDescription">
+                    <template #issues-link="{ children }">
+                      <a class="text-link" :href="itemIssueTracker" target="_blank">
+                        <component :is="() => children" />
+                        <ExternalIcon aria-hidden="true" class="mb-1 ml-1 h-2.5 w-2.5" />
+                      </a>
+                    </template>
+                  </IntlFormatted>
+                </span>
+              </div>
+            </div>
+            <div class="text-md flex items-center gap-2 font-semibold text-contrast">
+              <XCircleIcon class="h-8 w-8 shrink-0 text-brand-red" />
+              <div class="flex flex-col">
+                <span>{{ formatMessage(messages.dmcaTakedown) }}</span>
+                <span class="text-sm font-medium text-secondary">
+                  <IntlFormatted :message-id="messages.dmcaTakedownDescription">
+                    <template #policy-link="{ children }">
+                      <nuxt-link class="text-link" :to="`/legal/copyright`">
+                        <component :is="() => children" />
+                      </nuxt-link>
+                    </template>
+                  </IntlFormatted>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="flex flex-col gap-4 rounded-xl bg-bg-raised p-6">
+          <template v-if="!prefilled || !currentItemValid">
+            <div class="flex flex-col gap-2">
+              <span class="text-lg font-bold text-contrast">
+                {{ formatMessage(messages.whatContentType) }}
+              </span>
+              <RadioButtons
+                v-slot="{ item }"
+                v-model="reportItem"
+                :items="reportItems"
+                @update:model-value="
+                  () => {
+                    prefilled = false;
+                    fetchItem();
+                  }
+                "
+              >
+                {{ capitalizeString(item) }}
+              </RadioButtons>
+            </div>
+            <div class="flex flex-col gap-2" :class="{ hidden: !reportItem }">
+              <span class="text-lg font-bold text-contrast">
+                {{ formatMessage(messages.whatContentId, { item: reportItem || "content" }) }}
+              </span>
+              <div class="flex gap-4">
+                <input
+                  id="report-item-id"
+                  v-model="reportItemID"
+                  type="text"
+                  placeholder="ex: Dc7EYhxG"
+                  autocomplete="off"
+                  :disabled="reportItem === ''"
+                  class="w-40"
+                  @blur="
+                    () => {
+                      prefilled = false;
+                      reportItemID = reportItemID.trim();
+                      fetchItem();
+                    }
+                  "
+                />
+                <div v-if="checkingId || checkedId" class="flex items-center gap-1">
+                  <template v-if="checkingId">
+                    <SpinnerIcon class="animate-spin" />
+                    {{ formatMessage(messages.checking, { item: reportItem }) }}...
+                  </template>
+                  <template v-else-if="checkedId && itemName">
+                    <AutoLink
+                      :to="itemLink"
+                      target="_blank"
+                      class="flex items-center gap-1 font-bold text-contrast hover:underline"
+                    >
+                      <Avatar
+                        v-if="typeof itemIcon === 'string'"
+                        :src="itemIcon"
+                        :alt="itemName"
+                        size="24px"
+                        :circle="reportItem === 'user'"
+                      />
+                      <component :is="itemIcon" v-else-if="itemIcon" />
+                      <span>{{ itemName }}</span>
+                    </AutoLink>
+                    <CheckIcon class="text-brand-green" />
+                  </template>
+                  <span v-else-if="checkedId" class="contents text-brand-red">
+                    <IssuesIcon />
+                    {{ formatMessage(messages.couldNotFind, { item: reportItem }) }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </template>
+          <template v-if="existingReport">
+            {{
+              formatMessage(messages.alreadyReportedDescription, { item: reportItem || "content" })
+            }}
+            <ButtonStyled color="brand">
+              <nuxt-link :to="`/dashboard/report/${existingReport.id}`" class="w-fit">
+                {{ formatMessage(messages.goToReport) }} <RightArrowIcon />
+              </nuxt-link>
+            </ButtonStyled>
+          </template>
+          <template v-else>
+            <div class="flex flex-col gap-2" :class="{ hidden: !reportItemID }">
+              <span class="text-lg font-bold text-contrast">
+                {{ formatMessage(messages.whatReportReason, { item: reportItem || "content" }) }}
+              </span>
+              <RadioButtons v-slot="{ item }" v-model="reportType" :items="reportTypes">
+                {{ item === "copyright" ? "Reuploaded work" : capitalizeString(item) }}
+              </RadioButtons>
+            </div>
+            <div
+              v-if="warnings[reportType]"
+              class="flex gap-2 rounded-xl border-2 border-solid border-brand-orange bg-highlight-orange p-4 text-contrast"
+            >
+              <IssuesIcon class="h-5 w-5 shrink-0 text-orange" />
+              <div class="flex flex-col gap-2">
+                <p
+                  v-for="(warning, index) in warnings[reportType]"
+                  :key="`warning-${reportType}-${index}`"
+                  class="m-0 leading-tight"
+                >
+                  <IntlFormatted :message-id="warning">
+                    <template #copyright-policy-link="{ children }">
+                      <nuxt-link class="text-link" :to="`/legal/copyright`">
+                        <component :is="() => children" />
+                      </nuxt-link>
+                    </template>
+                  </IntlFormatted>
+                </p>
+              </div>
+            </div>
+            <div :class="{ hidden: !reportType }">
+              <span class="text-lg font-bold text-contrast">
+                {{ formatMessage(messages.reportBodyTitle) }}
+              </span>
+              <p class="m-0 leading-tight text-secondary">
+                {{ formatMessage(messages.reportBodyDescription) }}
+              </p>
+            </div>
+            <div :class="{ hidden: !reportType }">
+              <MarkdownEditor
+                v-model="reportBody"
+                placeholder=""
+                :on-image-upload="onImageUpload"
+              />
+            </div>
+            <div :class="{ hidden: !reportType }">
+              <ButtonStyled color="brand">
+                <button
+                  id="submit-button"
+                  :disabled="submitLoading || !canSubmit"
+                  @click="submitReport"
+                >
+                  <SendIcon aria-hidden="true" />
+                  {{ formatMessage(messages.submitReport) }}
+                </button>
+              </ButtonStyled>
+            </div>
+          </template>
+        </div>
+      </template>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Card, Button, MarkdownEditor, DropdownSelect } from "@modrinth/ui";
-import { SaveIcon } from "@modrinth/assets";
+import {
+  MarkdownEditor,
+  RadialHeader,
+  RadioButtons,
+  ButtonStyled,
+  Avatar,
+  AutoLink,
+} from "@modrinth/ui";
+import {
+  ExternalIcon,
+  LeftArrowIcon,
+  RightArrowIcon,
+  CheckIcon,
+  SpinnerIcon,
+  SendIcon,
+  IssuesIcon,
+  CheckCircleIcon,
+  XCircleIcon,
+  ScaleIcon,
+  VersionIcon,
+} from "@modrinth/assets";
+import type { User, Version, Report } from "@modrinth/utils";
+import { useVIntl, defineMessages, type MessageDescriptor } from "@vintl/vintl";
 import { useImageUpload } from "~/composables/image-upload.ts";
 
 const tags = useTags();
@@ -101,6 +272,7 @@ const route = useNativeRoute();
 const router = useRouter();
 
 const auth = await useAuth();
+const { formatMessage } = useVIntl();
 
 if (!auth.value.user) {
   router.push("/auth/sign-in?redirect=" + encodeURIComponent(route.fullPath));
@@ -119,6 +291,83 @@ const reportItem = ref<string>(accessQuery("item"));
 const reportItemID = ref<string>(accessQuery("itemID"));
 const reportType = ref<string>("");
 
+const prefilled = ref<boolean>(!!reportItem.value && !!reportItemID.value);
+const checkedId = ref<boolean>(false);
+const checkingId = ref<boolean>(false);
+
+const currentProject = ref<Project | null>(null);
+const currentVersion = ref<Version | null>(null);
+const currentUser = ref<User | null>(null);
+
+const itemIcon = ref<string | Component | undefined>();
+const itemName = ref<string | undefined>();
+const itemLink = ref<string | undefined>();
+const itemId = ref<string | undefined>();
+const itemIssueTracker = ref<string | undefined>();
+
+const reports = ref<Report[]>([]);
+const existingReport = computed(() =>
+  reports.value.find(
+    (x) =>
+      (x.item_id === reportItemID.value || x.item_id === itemId.value) &&
+      x.item_type === reportItem.value,
+  ),
+);
+
+await fetchItem();
+await fetchExistingReports();
+
+const currentItemValid = computed(
+  () => !!currentProject.value || !!currentVersion.value || !!currentUser.value,
+);
+
+async function fetchExistingReports() {
+  reports.value = ((await useBaseFetch("report?count=1000")) as Report[]).filter(
+    (x) => x.reporter === auth.value.user?.id,
+  );
+}
+
+async function fetchItem() {
+  if (reportItem.value && reportItemID.value) {
+    checkingId.value = true;
+    itemIcon.value = undefined;
+    itemName.value = undefined;
+    itemLink.value = undefined;
+    itemId.value = undefined;
+    itemIssueTracker.value = undefined;
+    try {
+      if (reportItem.value === "project") {
+        const project = (await useBaseFetch(`project/${reportItemID.value}`)) as Project;
+        currentProject.value = project;
+
+        itemIcon.value = project.icon_url;
+        itemName.value = project.title;
+        itemLink.value = `/project/${project.id}`;
+        itemId.value = project.id;
+        itemIssueTracker.value = project.issues_url;
+      } else if (reportItem.value === "version") {
+        const version = (await useBaseFetch(`version/${reportItemID.value}`)) as Version;
+        currentVersion.value = version;
+
+        itemIcon.value = VersionIcon;
+        itemName.value = version.version_number;
+        itemLink.value = `project/${version.project_id}/version/${version.id}`;
+        itemId.value = version.id;
+      } else if (reportItem.value === "user") {
+        const user = (await useBaseFetch(`user/${reportItemID.value}`)) as User;
+        currentUser.value = user;
+
+        itemIcon.value = user.avatar_url;
+        itemName.value = user.username;
+        itemLink.value = `/user/${user.username}`;
+        itemId.value = user.id;
+      }
+    } catch {}
+    checkedId.value = true;
+    checkingId.value = false;
+  }
+}
+
 const reportItems = ["project", "version", "user"];
 const reportTypes = computed(() => tags.value.reportTypes);
 
@@ -232,70 +481,135 @@ const onImageUpload = async (file: File) => {
   uploadedImageIDs.value.push(item.id);
   return item.url;
 };
+
+const warnings: Record<string, MessageDescriptor[]> = {
+  copyright: [
+    defineMessage({
+      id: "report.note.copyright.1",
+      defaultMessage:
+        "Please note that you are *not* submitting a DMCA takedown request, but rather a report of reuploaded content.",
+    }),
+    defineMessage({
+      id: "report.note.copyright.2",
+      defaultMessage:
+        "If you meant to file a DMCA takedown request (which is a legal action) instead, please see our <copyright-policy-link>Copyright Policy</copyright-policy-link>.",
+    }),
+  ],
+  malicious: [
+    defineMessage({
+      id: "report.note.malicious.1",
+      defaultMessage:
+        "Reports for malicious or deceptive content must include substantial evidence of the behavior, such as code samples.",
+    }),
+    defineMessage({
+      id: "report.note.malicious.2",
+      defaultMessage:
+        "Summaries from Microsoft Defender, VirusTotal, or AI malware detection are not sufficient forms of evidence and will not be accepted.",
+    }),
+  ],
+};
+
+const messages = defineMessages({
+  reportContent: {
+    id: "report.report-content",
+    defaultMessage: "Report content to moderators",
+  },
+  reportItem: {
+    id: "report.report-item",
+    defaultMessage: "Report {title} to moderators",
+  },
+  alreadyReportedItem: {
+    id: "report.already-reported",
+    defaultMessage: "You've already reported {title}",
+  },
+  alreadyReportedDescription: {
+    id: "report.already-reported-description",
+    defaultMessage:
+      "You have an open report for this {item} already. You can add more details to your report if you have more information to add.",
+  },
+  backToItem: {
+    id: "report.back-to-item",
+    defaultMessage: "Back to {item}",
+  },
+  goToReport: {
+    id: "report.go-to-report",
+    defaultMessage: "Go to report",
+  },
+  pleaseReport: {
+    id: "report.please-report",
+    defaultMessage: "Please report:",
+  },
+  formNotFor: {
+    id: "report.form-not-for",
+    defaultMessage: "This form is not for:",
+  },
+  violation: {
+    id: "report.for.violation",
+    defaultMessage:
+      "Violation of Modrinth <rules-link>Rules</rules-link> or <terms-link>Terms of Use</terms-link>",
+  },
+  violationDescription: {
+    id: "report.for.violation.description",
+    defaultMessage:
+      "Examples include malicious, spam, offensive, deceptive, misleading, and illegal content.",
+  },
+  bugReports: {
+    id: "report.not-for.bug-reports",
+    defaultMessage: "Bug reports",
+  },
+  bugReportsDescription: {
+    id: "report.not-for.bug-reports.description",
+    defaultMessage: "You can report bugs to their <issues-link>issue tracker</issues-link>.",
+  },
+  dmcaTakedown: {
+    id: "report.not-for.dmca",
+    defaultMessage: "DMCA takedowns",
+  },
+  dmcaTakedownDescription: {
+    id: "report.not-for.dmca.description",
+    defaultMessage: "See our <policy-link>Copyright Policy</policy-link>.",
+  },
+  whatContentType: {
+    id: "report.question.content-type",
+    defaultMessage: "What type of content are you reporting?",
+  },
+  whatContentId: {
+    id: "report.question.content-id",
+    defaultMessage: "What is the ID of the {item}?",
+  },
+  whatReportReason: {
+    id: "report.question.report-reason",
+    defaultMessage: "Which of Modrinth's rules is this {item} violating?",
+  },
+  checking: {
+    id: "report.checking",
+    defaultMessage: "Checking {item}...",
+  },
+  couldNotFind: {
+    id: "report.could-not-find",
+    defaultMessage: "Could not find {item}",
+  },
+  reportBodyTitle: {
+    id: "report.body.title",
+    defaultMessage: "Please provide additional context about your report",
+  },
+  reportBodyDescription: {
+    id: "report.body.description",
+    defaultMessage:
+      "Include links and images if possible and relevant. Empty or insufficient reports will be closed and ignored.",
+  },
+  submitReport: {
+    id: "report.submit",
+    defaultMessage: "Submit report",
+  },
+});
 </script>
 
 <style scoped lang="scss">
-.submit-button {
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-
-  margin-top: var(--spacing-card-md);
-}
-
-.card-title-adjustments {
-  margin-block: var(--spacing-card-md) var(--spacing-card-sm);
-}
-
 .page {
-  padding: 0.5rem;
+  padding: 1rem;
   margin-left: auto;
   margin-right: auto;
   max-width: 56rem;
 }
-
-.content {
-  // TODO: Get rid of this hack when removing global styles from the website.
-  // Overflow decides the behavior of md editor but also clips the border.
-  // In the future, we should use ring instead of block-shadow for the
-  // green ring around the md editor
-  padding-inline: var(--gap-md);
-  padding-bottom: var(--gap-md);
-  margin-inline: calc(var(--gap-md) * -1);
-
-  display: grid;
-
-  // Disable horizontal stretch
-  grid-template-columns: minmax(0, 1fr);
-  overflow: hidden;
-}
-
-.report-info-section {
-  display: block;
-
-  width: 100%;
-  gap: var(--gap-md);
-
-  :global(.animated-dropdown) {
-    & > .selected {
-      height: 40px;
-    }
-  }
-
-  .report-info-item {
-    display: block;
-
-    width: 100%;
-    max-width: 100%;
-
-    label {
-      display: block;
-      margin-bottom: var(--gap-sm);
-      color: var(--color-text-dark);
-      font-size: var(--font-size-md);
-      font-weight: var(--font-weight-bold);
-      margin-block: var(--spacing-card-md) var(--spacing-card-sm);
-    }
-  }
-}
 </style>
diff --git a/apps/frontend/src/pages/search/[searchProjectType].vue b/apps/frontend/src/pages/search/[searchProjectType].vue
index 02f750f20..5cb3b3282 100644
--- a/apps/frontend/src/pages/search/[searchProjectType].vue
+++ b/apps/frontend/src/pages/search/[searchProjectType].vue
@@ -168,7 +168,7 @@
             name="Sort by"
             :options="sortTypes"
             :display-name="(option) => option?.display"
-            @change="updateSearchResults(1)"
+            @change="updateSearchResults()"
           >
             <span class="font-semibold text-primary">Sort by: </span>
             <span class="font-semibold text-secondary">{{ selected }}</span>
@@ -181,7 +181,7 @@
             :default-value="maxResults"
             :model-value="maxResults"
             class="!w-auto flex-grow md:flex-grow-0"
-            @change="updateSearchResults(1)"
+            @change="updateSearchResults()"
           >
             <span class="font-semibold text-primary">View: </span>
             <span class="font-semibold text-secondary">{{ selected }}</span>
@@ -206,7 +206,7 @@
             :page="currentPage"
             :count="pageCount"
             class="mx-auto sm:ml-auto sm:mr-0"
-            @switch-page="setPage"
+            @switch-page="updateSearchResults"
           />
         </div>
         <SearchFilterControl
@@ -258,7 +258,8 @@
                   <button
                     v-if="
                       result.installed ||
-                      server.content.data.find((x) => x.project_id === result.project_id) ||
+                      (server?.content?.data &&
+                        server.content.data.find((x) => x.project_id === result.project_id)) ||
                       server.general?.project?.id === result.project_id
                     "
                     disabled
@@ -296,7 +297,7 @@
             :page="currentPage"
             :count="pageCount"
             class="justify-end"
-            @switch-page="setPage"
+            @switch-page="updateSearchResults"
           />
         </div>
       </div>
@@ -376,7 +377,9 @@ async function updateServerContext() {
     if (!auth.value.user) {
       router.push("/auth/sign-in?redirect=" + encodeURIComponent(route.fullPath));
     } else if (route.query.sid !== null) {
-      server.value = await usePyroServer(route.query.sid, ["general", "content"]);
+      server.value = await usePyroServer(route.query.sid, ["general", "content"], {
+        waitForModules: true,
+      });
     }
   }
 
@@ -495,8 +498,8 @@ async function serverInstall(project) {
       ) ?? versions[0];
 
     if (projectType.value.id === "modpack") {
-      await server.value.general?.reinstall(
-        route.query.sid,
+      await server.value.general.reinstall(
+        server.value.serverId,
         false,
         project.project_id,
         version.id,
@@ -504,7 +507,7 @@ async function serverInstall(project) {
         eraseDataOnInstall.value,
       );
       project.installed = true;
-      navigateTo(`/servers/manage/${route.query.sid}/options/loader`);
+      navigateTo(`/servers/manage/${server.value.serverId}/options/loader`);
     } else if (projectType.value.id === "mod") {
       await server.value.content.install("mod", version.project_id, version.id);
       await server.value.refresh(["content"]);
@@ -545,19 +548,13 @@ const pageCount = computed(() =>
   results.value ? Math.ceil(results.value.total_hits / results.value.limit) : 1,
 );
 
-function setPage(newPageNumber) {
-  currentPage.value = newPageNumber;
-
-  window.scrollTo({ top: 0, behavior: "smooth" });
-
-  updateSearchResults();
-}
-
 function scrollToTop(behavior = "smooth") {
   window.scrollTo({ top: 0, behavior });
 }
 
-function updateSearchResults() {
+function updateSearchResults(pageNumber) {
+  currentPage.value = pageNumber || 1;
+  scrollToTop();
   noLoad.value = true;
 
   if (query.value === null) {
@@ -590,8 +587,8 @@ function updateSearchResults() {
   }
 }
 
-watch([currentFilters, requestParams], () => {
-  updateSearchResults();
+watch([currentFilters], () => {
+  updateSearchResults(1);
 });
 
 function cycleSearchDisplayMode() {
diff --git a/apps/frontend/src/pages/servers/index.vue b/apps/frontend/src/pages/servers/index.vue
index 0e652e9fd..e310e7000 100644
--- a/apps/frontend/src/pages/servers/index.vue
+++ b/apps/frontend/src/pages/servers/index.vue
@@ -456,9 +456,10 @@
                 Where are Modrinth Servers located? Can I choose a region?
               </summary>
               <p class="m-0 !leading-[190%]">
-                Currently, Modrinth Servers are located in New York, Los Angeles, and Miami. More
-                regions are coming soon! Your server's location is currently chosen algorithmically,
-                but you will be able to choose a region in the future.
+                Currently, Modrinth Servers are located throughout the United States in New York,
+                Los Angelas, Dallas, Miami, and Spokane. More regions are coming soon! Your server's
+                location is currently chosen algorithmically, but you will be able to choose a
+                region in the future.
               </p>
             </details>
 
@@ -494,6 +495,97 @@
       </div>
     </section>
 
+    <section
+      class="relative mt-24 flex flex-col bg-[radial-gradient(65%_50%_at_50%_-10%,var(--color-brand-highlight)_0%,var(--color-accent-contrast)_100%)] px-3 pt-24 md:mt-48 md:pt-48"
+    >
+      <div class="faded-brand-line absolute left-0 top-0 h-[1px] w-full"></div>
+      <div class="mx-auto flex w-full max-w-7xl flex-col gap-8">
+        <div class="grid grid-cols-1 items-center gap-12 lg:grid-cols-2">
+          <div class="flex flex-col gap-8">
+            <div class="flex flex-col gap-4">
+              <div
+                class="relative w-fit rounded-full bg-highlight-green px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
+              >
+                Server Locations
+              </div>
+              <h1 class="relative m-0 max-w-2xl text-4xl leading-[120%] md:text-7xl">
+                Coast-to-Coast Coverage
+              </h1>
+            </div>
+
+            <div class="flex flex-col gap-8">
+              <div class="flex flex-col gap-4">
+                <div class="flex items-center gap-3">
+                  <div class="grid size-8 place-content-center rounded-full bg-highlight-green">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="text-brand"
+                    >
+                      <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
+                      <circle cx="12" cy="10" r="3" />
+                    </svg>
+                  </div>
+                  <h2 class="relative m-0 text-xl font-medium leading-[155%] md:text-2xl">
+                    US Coverage
+                  </h2>
+                </div>
+                <p
+                  class="relative m-0 max-w-xl text-base font-normal leading-[155%] text-secondary md:text-[18px]"
+                >
+                  With strategically placed servers in New York, California, Texas, Florida, and
+                  Washington, we ensure low latency connections for players across North America.
+                  Each location is equipped with high-performance hardware and DDoS protection.
+                </p>
+              </div>
+
+              <div class="flex flex-col gap-4">
+                <div class="flex items-center gap-3">
+                  <div class="grid size-8 place-content-center rounded-full bg-highlight-blue">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="text-blue"
+                    >
+                      <path d="M12 2a10 10 0 1 0 10 10" />
+                      <path d="M18 13a6 6 0 0 0-6-6" />
+                      <path d="M13 2.05a10 10 0 0 1 2 2" />
+                      <path d="M19.5 8.5a10 10 0 0 1 2 2" />
+                    </svg>
+                  </div>
+                  <h2 class="relative m-0 text-xl font-medium leading-[155%] md:text-2xl">
+                    Global Expansion
+                  </h2>
+                </div>
+                <p
+                  class="relative m-0 max-w-xl text-base font-normal leading-[155%] text-secondary md:text-[18px]"
+                >
+                  We're expanding to Europe and Asia-Pacific regions soon, bringing Modrinth's
+                  seamless hosting experience worldwide. Join our Discord to stay updated on new
+                  region launches.
+                </p>
+              </div>
+            </div>
+          </div>
+          <Globe />
+        </div>
+      </div>
+    </section>
+
     <section
       id="plan"
       class="relative mt-24 flex flex-col bg-[radial-gradient(65%_50%_at_50%_-10%,var(--color-brand-highlight)_0%,var(--color-accent-contrast)_100%)] px-3 pt-24 md:mt-48 md:pt-48"
@@ -511,156 +603,189 @@
               ? "We are currently at capacity. Please try again later."
               : "There's a plan for everyone! Choose the one that fits your needs."
           }}
-          <span class="font-bold">
-            Servers are currently US only, in New York, Los Angeles, and Miami. More regions coming
-            soon!</span
-          >
         </h2>
 
-        <ul class="m-0 flex w-full flex-col gap-8 p-0 lg:flex-row">
-          <li class="flex w-full flex-col gap-4 rounded-2xl bg-bg p-8 text-left lg:w-1/3">
-            <div class="flex flex-row items-center justify-between">
-              <h1 class="m-0">Small</h1>
-              <div
-                class="grid size-8 place-content-center rounded-full bg-highlight-blue text-xs font-bold text-blue"
-              >
-                S
+        <ul class="m-0 mt-8 flex w-full flex-col gap-8 p-0 lg:flex-row">
+          <li class="relative flex w-full flex-col justify-between pt-12 lg:w-1/3">
+            <div
+              v-if="isSmallLowStock"
+              class="absolute left-0 right-0 top-[-2px] rounded-t-2xl bg-yellow-500/20 p-4 text-center font-bold"
+            >
+              Only {{ capacityStatuses?.small?.available }} left in stock!
+            </div>
+            <div
+              class="flex w-full flex-col justify-between gap-4 rounded-2xl bg-bg p-8 text-left"
+              :class="{ '!rounded-t-none': isSmallLowStock }"
+            >
+              <div class="flex flex-col gap-4">
+                <div class="flex flex-row items-center justify-between">
+                  <h1 class="m-0">Small</h1>
+                  <div
+                    class="grid size-8 place-content-center rounded-full bg-highlight-blue text-xs font-bold text-blue"
+                  >
+                    S
+                  </div>
+                </div>
+                <p class="m-0">
+                  Perfect for vanilla multiplayer, small friend groups, SMPs, and light modding.
+                </p>
+                <div class="flex flex-row flex-wrap items-center gap-3 text-nowrap">
+                  <p class="m-0">4 GB RAM</p>
+                  <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
+                  <p class="m-0">4 vCPUs</p>
+                  <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
+                  <p class="m-0">32 GB Storage</p>
+                </div>
+                <h2 class="m-0 text-3xl text-contrast">
+                  $12<span class="text-sm font-normal text-secondary">/month</span>
+                </h2>
               </div>
+              <ButtonStyled color="blue" size="large">
+                <a
+                  v-if="!loggedOut && isSmallAtCapacity"
+                  :href="outOfStockUrl"
+                  target="_blank"
+                  class="flex items-center gap-2 !bg-highlight-blue !font-medium !text-blue"
+                >
+                  Out of Stock
+                  <ExternalIcon class="!min-h-4 !min-w-4 !text-blue" />
+                </a>
+                <button
+                  v-else
+                  class="!bg-highlight-blue !font-medium !text-blue"
+                  @click="selectProduct('small')"
+                >
+                  Get Started
+                  <RightArrowIcon class="!min-h-4 !min-w-4 !text-blue" />
+                </button>
+              </ButtonStyled>
             </div>
-            <p class="m-0">
-              Perfect for vanilla multiplayer, small friend groups, SMPs, and light modding.
-            </p>
-            <div class="flex flex-row flex-wrap items-center gap-3 text-nowrap">
-              <p class="m-0">4 GB RAM</p>
-              <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
-              <p class="m-0">32 GB Storage</p>
-              <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
-              <p class="m-0">2 vCPUs</p>
-            </div>
-            <h2 class="m-0 text-3xl text-contrast">
-              $12<span class="text-sm font-normal text-secondary">/month</span>
-            </h2>
-            <ButtonStyled color="blue" size="large">
-              <NuxtLink
-                v-if="!loggedOut && isSmallAtCapacity"
-                :to="outOfStockUrl"
-                target="_blank"
-                class="!bg-highlight-blue !font-medium !text-blue"
-              >
-                Out of Stock
-                <ExternalIcon class="!min-h-4 !min-w-4 !text-blue" />
-              </NuxtLink>
-              <button
-                v-else
-                class="!bg-highlight-blue !font-medium !text-blue"
-                @click="selectProduct('small')"
-              >
-                Get Started
-                <RightArrowIcon class="!min-h-4 !min-w-4 !text-blue" />
-              </button>
-            </ButtonStyled>
           </li>
 
-          <li
-            style="
-              background: radial-gradient(
-                86.12% 101.64% at 95.97% 94.07%,
-                rgba(27, 217, 106, 0.23) 0%,
-                rgba(14, 115, 56, 0.2) 100%
-              );
-              border: 1px solid rgba(12, 107, 52, 0.55);
-              box-shadow: 0px 12px 38.1px rgba(27, 217, 106, 0.13);
-            "
-            class="flex w-full flex-col gap-4 rounded-2xl bg-bg p-8 text-left lg:w-1/3"
-          >
-            <div class="flex flex-row items-center justify-between">
-              <h1 class="m-0">Medium</h1>
-              <div
-                class="grid size-8 place-content-center rounded-full bg-highlight-green text-xs font-bold text-brand"
-              >
-                M
+          <li class="relative flex w-full flex-col justify-between pt-12 lg:w-1/3">
+            <div
+              v-if="isMediumLowStock"
+              class="absolute left-0 right-0 top-[-2px] rounded-t-2xl bg-yellow-500/20 p-4 text-center font-bold"
+            >
+              Only {{ capacityStatuses?.medium?.available }} left in stock!
+            </div>
+            <div
+              style="
+                background: radial-gradient(
+                  86.12% 101.64% at 95.97% 94.07%,
+                  rgba(27, 217, 106, 0.23) 0%,
+                  rgba(14, 115, 56, 0.2) 100%
+                );
+                border: 1px solid rgba(12, 107, 52, 0.55);
+                box-shadow: 0px 12px 38.1px rgba(27, 217, 106, 0.13);
+              "
+              class="flex w-full flex-col justify-between gap-4 rounded-2xl p-8 text-left"
+              :class="{ '!rounded-t-none': isMediumLowStock }"
+            >
+              <div class="flex flex-col gap-4">
+                <div class="flex flex-row items-center justify-between">
+                  <h1 class="m-0">Medium</h1>
+                  <div
+                    class="grid size-8 place-content-center rounded-full bg-highlight-green text-xs font-bold text-brand"
+                  >
+                    M
+                  </div>
+                </div>
+                <p class="m-0">Great for modded multiplayer and small communities.</p>
+                <div class="flex flex-row flex-wrap items-center gap-3 text-nowrap">
+                  <p class="m-0">6 GB RAM</p>
+                  <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
+                  <p class="m-0">6 vCPUs</p>
+                  <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
+                  <p class="m-0">48 GB Storage</p>
+                </div>
+                <h2 class="m-0 text-3xl text-contrast">
+                  $18<span class="text-sm font-normal text-secondary">/month</span>
+                </h2>
               </div>
+              <ButtonStyled color="brand" size="large">
+                <a
+                  v-if="!loggedOut && isMediumAtCapacity"
+                  :href="outOfStockUrl"
+                  target="_blank"
+                  class="flex items-center gap-2 !bg-highlight-green !font-medium !text-green"
+                >
+                  Out of Stock
+                  <ExternalIcon class="!min-h-4 !min-w-4 !text-green" />
+                </a>
+                <button
+                  v-else
+                  class="!bg-highlight-green !font-medium !text-green"
+                  @click="selectProduct('medium')"
+                >
+                  Get Started
+                  <RightArrowIcon class="!min-h-4 !min-w-4 !text-green" />
+                </button>
+              </ButtonStyled>
             </div>
-            <p class="m-0">Great for modded multiplayer and small communities.</p>
-            <div class="flex flex-row flex-wrap items-center gap-3 text-nowrap">
-              <p class="m-0">6 GB RAM</p>
-              <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
-              <p class="m-0">48 GB Storage</p>
-              <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
-              <p class="m-0">3 vCPUs</p>
-            </div>
-            <h2 class="m-0 text-3xl text-contrast">
-              $18<span class="text-sm font-normal text-secondary">/month</span>
-            </h2>
-            <ButtonStyled color="brand" size="large">
-              <NuxtLink
-                v-if="!loggedOut && isMediumAtCapacity"
-                :to="outOfStockUrl"
-                target="_blank"
-                class="!bg-highlight-green !font-medium !text-green"
-              >
-                Out of Stock
-                <ExternalIcon class="!min-h-4 !min-w-4 !text-green" />
-              </NuxtLink>
-              <button
-                v-else
-                class="!bg-highlight-green !font-medium !text-green"
-                @click="selectProduct('medium')"
-              >
-                Get Started
-                <RightArrowIcon class="!min-h-4 !min-w-4 !text-green" />
-              </button>
-            </ButtonStyled>
           </li>
 
-          <li class="flex w-full flex-col gap-4 rounded-2xl bg-bg p-8 text-left lg:w-1/3">
-            <div class="flex flex-row items-center justify-between">
-              <h1 class="m-0">Large</h1>
-              <div
-                class="grid size-8 place-content-center rounded-full bg-highlight-purple text-xs font-bold text-purple"
-              >
-                L
+          <li class="relative flex w-full flex-col justify-between pt-12 lg:w-1/3">
+            <div
+              v-if="isLargeLowStock"
+              class="absolute left-0 right-0 top-[-2px] rounded-t-2xl bg-yellow-500/20 p-4 text-center font-bold"
+            >
+              Only {{ capacityStatuses?.large?.available }} left in stock!
+            </div>
+            <div
+              class="flex w-full flex-col justify-between gap-4 rounded-2xl bg-bg p-8 text-left"
+              :class="{ '!rounded-t-none': isLargeLowStock }"
+            >
+              <div class="flex flex-col gap-4">
+                <div class="flex flex-row items-center justify-between">
+                  <h1 class="m-0">Large</h1>
+                  <div
+                    class="grid size-8 place-content-center rounded-full bg-highlight-purple text-xs font-bold text-purple"
+                  >
+                    L
+                  </div>
+                </div>
+                <p class="m-0">Ideal for larger communities, modpacks, and heavy modding.</p>
+                <div class="flex flex-row flex-wrap items-center gap-3 text-nowrap">
+                  <p class="m-0">8 GB RAM</p>
+                  <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
+                  <p class="m-0">8 vCPUs</p>
+                  <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
+                  <p class="m-0">64 GB Storage</p>
+                </div>
+                <h2 class="m-0 text-3xl text-contrast">
+                  $24<span class="text-sm font-normal text-secondary">/month</span>
+                </h2>
               </div>
+              <ButtonStyled color="brand" size="large">
+                <a
+                  v-if="!loggedOut && isLargeAtCapacity"
+                  :href="outOfStockUrl"
+                  target="_blank"
+                  class="flex items-center gap-2 !bg-highlight-purple !font-medium !text-purple"
+                >
+                  Out of Stock
+                  <ExternalIcon class="!min-h-4 !min-w-4 !text-purple" />
+                </a>
+                <button
+                  v-else
+                  class="!bg-highlight-purple !font-medium !text-purple"
+                  @click="selectProduct('large')"
+                >
+                  Get Started
+                  <RightArrowIcon class="!min-h-4 !min-w-4 !text-purple" />
+                </button>
+              </ButtonStyled>
             </div>
-            <p class="m-0">Ideal for larger communities, modpacks, and heavy modding.</p>
-            <div class="flex flex-row flex-wrap items-center gap-3 text-nowrap">
-              <p class="m-0">8 GB RAM</p>
-              <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
-              <p class="m-0">64 GB Storage</p>
-              <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
-              <p class="m-0">4 vCPUs</p>
-            </div>
-            <h2 class="m-0 text-3xl text-contrast">
-              $24<span class="text-sm font-normal text-secondary">/month</span>
-            </h2>
-            <ButtonStyled color="brand" size="large">
-              <NuxtLink
-                v-if="!loggedOut && isLargeAtCapacity"
-                :to="outOfStockUrl"
-                target="_blank"
-                class="!bg-highlight-purple !font-medium !text-purple"
-              >
-                Out of Stock
-                <ExternalIcon class="!min-h-4 !min-w-4 !text-purple" />
-              </NuxtLink>
-              <button
-                v-else
-                class="!bg-highlight-purple !font-medium !text-purple"
-                @click="selectProduct('large')"
-              >
-                Get Started
-                <RightArrowIcon class="!min-h-4 !min-w-4 !text-purple" />
-              </button>
-            </ButtonStyled>
           </li>
         </ul>
 
         <div
-          class="flex w-full flex-col items-start justify-between gap-4 rounded-2xl bg-bg p-8 text-left md:flex-row md:gap-0"
+          class="flex w-full flex-col items-start justify-between gap-4 rounded-2xl bg-bg p-8 text-left lg:flex-row lg:gap-0"
         >
           <div class="flex flex-col gap-4">
             <h1 class="m-0">Build your own</h1>
-            <h2 class="m-0 text-base font-normal">
+            <h2 class="m-0 text-base font-normal text-primary">
               If you're a more technical server administrator, you can pick your own RAM and storage
               options.
             </h2>
@@ -697,6 +822,7 @@ import {
 } from "@modrinth/assets";
 import { products } from "~/generated/state.json";
 import LoaderIcon from "~/components/ui/servers/icons/LoaderIcon.vue";
+import Globe from "~/components/ui/servers/Globe.vue";
 
 const pyroProducts = products.filter((p) => p.metadata.type === "pyro");
 const pyroPlanProducts = pyroProducts.filter(
@@ -746,7 +872,7 @@ const deletingSpeed = 25;
 const pauseTime = 2000;
 
 const loggedOut = computed(() => !auth.value.user);
-const outOfStockUrl = "https://support.modrinth.com";
+const outOfStockUrl = "https://discord.modrinth.com";
 
 const { data: hasServers } = await useAsyncData("ServerListCountCheck", async () => {
   try {
@@ -760,9 +886,16 @@ const { data: hasServers } = await useAsyncData("ServerListCountCheck", async ()
 
 async function fetchCapacityStatuses(customProduct = null) {
   try {
-    const productsToCheck = customProduct?.metadata ? [customProduct] : pyroPlanProducts;
+    const productsToCheck = customProduct?.metadata
+      ? [customProduct]
+      : [
+          ...pyroPlanProducts,
+          pyroProducts.reduce((min, product) =>
+            product.metadata.ram < min.metadata.ram ? product : min,
+          ),
+        ];
     const capacityChecks = productsToCheck.map((product) =>
-      usePyroFetch("capacity", {
+      usePyroFetch("stock", {
         method: "POST",
         body: {
           cpu: product.metadata.cpu,
@@ -774,6 +907,7 @@ async function fetchCapacityStatuses(customProduct = null) {
     );
 
     const results = await Promise.all(capacityChecks);
+
     if (customProduct?.metadata) {
       return {
         custom: results[0],
@@ -783,6 +917,7 @@ async function fetchCapacityStatuses(customProduct = null) {
         small: results[0],
         medium: results[1],
         large: results[2],
+        custom: results[3],
       };
     }
   } catch (error) {
@@ -804,6 +939,22 @@ const { data: capacityStatuses, refresh: refreshCapacity } = await useAsyncData(
 const isSmallAtCapacity = computed(() => capacityStatuses.value?.small?.available === 0);
 const isMediumAtCapacity = computed(() => capacityStatuses.value?.medium?.available === 0);
 const isLargeAtCapacity = computed(() => capacityStatuses.value?.large?.available === 0);
+const isCustomAtCapacity = computed(() => capacityStatuses.value?.custom?.available === 0);
+
+const isSmallLowStock = computed(() => {
+  const available = capacityStatuses.value?.small?.available;
+  return available !== undefined && available > 0 && available < 8;
+});
+
+const isMediumLowStock = computed(() => {
+  const available = capacityStatuses.value?.medium?.available;
+  return available !== undefined && available > 0 && available < 8;
+});
+
+const isLargeLowStock = computed(() => {
+  const available = capacityStatuses.value?.large?.available;
+  return available !== undefined && available > 0 && available < 8;
+});
 
 const startTyping = () => {
   const currentWord = words[currentWordIndex.value];
@@ -907,7 +1058,9 @@ const selectProduct = async (product) => {
   }
 
   await refreshCapacity();
-  if (isAtCapacity.value) {
+  console.log(capacityStatuses.value);
+
+  if ((product === "custom" && isCustomAtCapacity.value) || isAtCapacity.value) {
     addNotification({
       group: "main",
       title: "Server Capacity Full",
diff --git a/apps/frontend/src/pages/servers/manage/[id].vue b/apps/frontend/src/pages/servers/manage/[id].vue
index 9cac71a2c..f7a3af7ea 100644
--- a/apps/frontend/src/pages/servers/manage/[id].vue
+++ b/apps/frontend/src/pages/servers/manage/[id].vue
@@ -10,10 +10,10 @@
             <div class="grid place-content-center rounded-full bg-bg-blue p-4">
               <TransferIcon class="size-12 text-blue" />
             </div>
-            <h1 class="m-0 mb-2 w-fit text-4xl font-bold">Server Upgrading</h1>
+            <h1 class="m-0 mb-2 w-fit text-4xl font-bold">Server upgrading</h1>
           </div>
           <p class="text-lg text-secondary">
-            Your server's hardware is currently being upgraded and will be back online shortly.
+            Your server's hardware is currently being upgraded and will be back online shortly!
           </p>
         </div>
       </div>
@@ -47,17 +47,18 @@
             <div class="grid place-content-center rounded-full bg-bg-orange p-4">
               <LockIcon class="size-12 text-orange" />
             </div>
-            <h1 class="m-0 mb-2 w-fit text-4xl font-bold">Server Suspended</h1>
+            <h1 class="m-0 mb-2 w-fit text-4xl font-bold">Server suspended</h1>
           </div>
           <p class="text-lg text-secondary">
             {{
-              serverData.suspension_reason
-                ? `Your server has been suspended: ${serverData.suspension_reason}`
-                : "Your server has been suspended."
+              serverData.suspension_reason === "cancelled"
+                ? "Your subscription has been cancelled."
+                : serverData.suspension_reason
+                  ? `Your server has been suspended: ${serverData.suspension_reason}`
+                  : "Your server has been suspended."
             }}
             <br />
-            This is most likely due to a billing issue. Please check your billing information and
-            contact Modrinth support if you believe this is an error.
+            Contact Modrinth support if you believe this is an error.
           </p>
         </div>
         <ButtonStyled size="large" color="brand" @click="() => router.push('/settings/billing')">
@@ -66,7 +67,10 @@
       </div>
     </div>
     <div
-      v-else-if="server.error && server.error.message.includes('Forbidden')"
+      v-else-if="
+        server.general?.error?.error.statusCode === 403 ||
+        server.general?.error?.error.statusCode === 404
+      "
       class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
     >
       <div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
@@ -82,21 +86,22 @@
             this is an error, please contact Modrinth support.
           </p>
         </div>
-        <UiCopyCode :text="server.error ? String(server.error) : 'Unknown error'" />
+        <UiCopyCode :text="JSON.stringify(server.general?.error)" />
+
         <ButtonStyled size="large" color="brand" @click="() => router.push('/servers/manage')">
           <button class="mt-6 !w-full">Go back to all servers</button>
         </ButtonStyled>
       </div>
     </div>
     <div
-      v-else-if="server.error && server.error.message.includes('Service Unavailable')"
+      v-else-if="server.general?.error?.error.statusCode === 503"
       class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
     >
       <div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
         <div class="flex flex-col items-center text-center">
           <div class="flex flex-col items-center gap-4">
             <div class="grid place-content-center rounded-full bg-bg-red p-4">
-              <PanelErrorIcon class="size-12 text-red" />
+              <UiServersIconsPanelErrorIcon class="size-12 text-red" />
             </div>
             <h1 class="m-0 mb-4 w-fit text-4xl font-bold">Server Node Unavailable</h1>
           </div>
@@ -141,7 +146,7 @@
       </div>
     </div>
     <div
-      v-else-if="server.error"
+      v-else-if="server.general?.error"
       class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
     >
       <div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
@@ -164,7 +169,7 @@
             temporary network issue. You'll be reconnected automatically.
           </p>
         </div>
-        <UiCopyCode :text="server.error ? String(server.error) : 'Unknown error'" />
+        <UiCopyCode :text="JSON.stringify(server.general?.error)" />
         <ButtonStyled
           :disabled="formattedTime !== '00'"
           size="large"
@@ -228,7 +233,7 @@
             :show-loader-label="showLoaderLabel"
             :uptime-seconds="uptimeSeconds"
             :linked="true"
-            class="flex min-w-0 flex-col flex-wrap items-center gap-4 text-secondary *:hidden sm:flex-row sm:*:flex"
+            class="server-action-buttons-anim flex min-w-0 flex-col flex-wrap items-center gap-4 text-secondary *:hidden sm:flex-row sm:*:flex"
           />
         </div>
       </div>
@@ -343,7 +348,7 @@
         <div
           v-if="isReconnecting"
           data-pyro-server-ws-reconnecting
-          class="mb-4 flex w-full flex-row items-center gap-4 rounded-2xl bg-bg-orange p-4 text-contrast"
+          class="mb-4 flex w-full flex-row items-center gap-4 rounded-2xl bg-bg-orange p-4 text-sm text-contrast"
         >
           <UiServersPanelSpinner />
           Hang on, we're reconnecting to your server.
@@ -352,12 +357,17 @@
         <div
           v-if="serverData.status === 'installing'"
           data-pyro-server-installing
-          class="mb-4 flex w-full flex-row items-center gap-4 rounded-2xl bg-bg-orange p-4 text-contrast"
+          class="mb-4 flex w-full flex-row items-center gap-4 rounded-2xl bg-bg-blue p-4 text-sm text-contrast"
         >
-          <UiServersPanelSpinner />
-          We're preparing your server, this may take a few minutes.
-        </div>
+          <UiServersServerIcon :image="serverData.image" class="!h-10 !w-10" />
 
+          <div class="flex flex-col gap-1">
+            <span class="text-lg font-bold"> We're preparing your server! </span>
+            <div class="flex flex-row items-center gap-2">
+              <UiServersPanelSpinner class="!h-3 !w-3" /> <LazyUiServersInstallingTicker />
+            </div>
+          </div>
+        </div>
         <NuxtPage
           :route="route"
           :is-connected="isConnected"
@@ -392,10 +402,9 @@ import {
 import DOMPurify from "dompurify";
 import { ButtonStyled } from "@modrinth/ui";
 import { Intercom, shutdown } from "@intercom/messenger-js-sdk";
-import { reloadNuxtApp } from "#app";
+import { reloadNuxtApp, navigateTo } from "#app";
 import type { ServerState, Stats, WSEvent, WSInstallationResultEvent } from "~/types/servers";
 import { usePyroConsole } from "~/store/console.ts";
-import PanelErrorIcon from "~/components/ui/servers/icons/PanelErrorIcon.vue";
 
 const socket = ref<WebSocket | null>(null);
 const isReconnecting = ref(false);
@@ -420,21 +429,25 @@ const createdAt = ref(
 const route = useNativeRoute();
 const router = useRouter();
 const serverId = route.params.id as string;
-const server = await usePyroServer(serverId, [
-  "general",
-  "content",
-  "backups",
-  "network",
-  "startup",
-  "ws",
-  "fs",
-]);
+
+const server = await usePyroServer(serverId, ["general", "ws"]);
+
+const loadModulesPromise = Promise.resolve().then(() => {
+  if (server.general?.status === "suspended") {
+    return;
+  }
+  return server.loadModules(["content", "backups", "network", "startup", "fs"]);
+});
+
+provide("modulesLoaded", loadModulesPromise);
 
 watch(
-  () => server.error,
-  (newError) => {
+  () => [server.general?.error, server.ws?.error],
+  ([generalError, wsError]) => {
     if (server.general?.status === "suspended") return;
-    if (newError && !newError.message.includes("Forbidden")) {
+
+    const error = generalError?.error || wsError?.error;
+    if (error && error.statusCode !== 403) {
       startPolling();
     }
   },
@@ -445,11 +458,9 @@ const errorMessage = ref("An unexpected error occurred.");
 const errorLog = ref("");
 const errorLogFile = ref("");
 const serverData = computed(() => server.general);
-const error = ref<Error | null>(null);
 const isConnected = ref(false);
 const isWSAuthIncorrect = ref(false);
 const pyroConsole = usePyroConsole();
-console.log("||||||||||||||||||||||| console", pyroConsole.output);
 const cpuData = ref<number[]>([]);
 const ramData = ref<number[]>([]);
 const isActioning = ref(false);
@@ -460,6 +471,7 @@ const powerStateDetails = ref<{ oom_killed?: boolean; exit_code?: number }>();
 const uptimeSeconds = ref(0);
 const firstConnect = ref(true);
 const copied = ref(false);
+const error = ref<Error | null>(null);
 
 const initialConsoleMessage = [
   "   __________________________________________________",
@@ -660,24 +672,71 @@ const newLoader = ref<string | null>(null);
 const newLoaderVersion = ref<string | null>(null);
 const newMCVersion = ref<string | null>(null);
 
+const onReinstall = (potentialArgs: any) => {
+  if (!serverData.value) return;
+
+  serverData.value.status = "installing";
+
+  if (potentialArgs?.loader) {
+    newLoader.value = potentialArgs.loader;
+  }
+  if (potentialArgs?.lVersion) {
+    newLoaderVersion.value = potentialArgs.lVersion;
+  }
+  if (potentialArgs?.mVersion) {
+    newMCVersion.value = potentialArgs.mVersion;
+  }
+
+  error.value = null;
+  errorTitle.value = "Error";
+  errorMessage.value = "An unexpected error occurred.";
+};
+
 const handleInstallationResult = async (data: WSInstallationResultEvent) => {
   switch (data.result) {
-    case "ok":
+    case "ok": {
       if (!serverData.value) break;
-      serverData.value.status = "available";
 
-      if (!isFirstMount.value) {
-        await server.refresh();
-      }
-
-      if (server.general) {
-        if (newLoader.value) server.general.loader = newLoader.value;
-        if (newLoaderVersion.value) server.general.loader_version = newLoaderVersion.value;
-        if (newMCVersion.value) server.general.mc_version = newMCVersion.value;
+      stopPolling();
+
+      try {
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+
+        let attempts = 0;
+        const maxAttempts = 3;
+        let hasValidData = false;
+
+        while (!hasValidData && attempts < maxAttempts) {
+          attempts++;
+
+          await server.refresh(["general"], {
+            preserveConnection: true,
+            preserveInstallState: true,
+          });
+
+          if (serverData.value?.loader && serverData.value?.mc_version) {
+            hasValidData = true;
+            serverData.value.status = "available";
+            await server.refresh(["content", "startup"]);
+            break;
+          }
+
+          await new Promise((resolve) => setTimeout(resolve, 2000));
+        }
+
+        if (!hasValidData) {
+          console.error("Failed to get valid server data after installation");
+        }
+      } catch (err: unknown) {
+        console.error("Error refreshing data after installation:", err);
       }
 
+      newLoader.value = null;
+      newLoaderVersion.value = null;
+      newMCVersion.value = null;
       error.value = null;
       break;
+    }
     case "err": {
       console.log("failed to install");
       console.log(data);
@@ -706,43 +765,6 @@ const handleInstallationResult = async (data: WSInstallationResultEvent) => {
   }
 };
 
-const onReinstall = (potentialArgs: any) => {
-  if (!serverData.value) return;
-  serverData.value.status = "installing";
-  // serverData.value.loader = potentialArgs.loader;
-  // serverData.value.loader_version = potentialArgs.lVersion;
-  // serverData.value.mc_version = potentialArgs.mVersion;
-  // if (potentialArgs?.loader) {
-  //   console.log("setting loadeconsole
-  //   serverData.value.loader = potentialArgs.loader;
-  // }
-  // if (potentialArgs?.lVersion) {
-  //   serverData.value.loader_version = potentialArgs.lVersion;
-  // }
-  // if (potentialArgs?.mVersion) {
-  //   serverData.value.mc_version = potentialArgs.mVersion;
-  // }
-  if (potentialArgs?.loader) {
-    newLoader.value = potentialArgs.loader;
-  }
-  if (potentialArgs?.lVersion) {
-    newLoaderVersion.value = potentialArgs.lVersion;
-  }
-  if (potentialArgs?.mVersion) {
-    newMCVersion.value = potentialArgs.mVersion;
-  }
-
-  if (!isFirstMount.value) {
-    server.refresh();
-  }
-
-  error.value = null;
-  errorTitle.value = "Error";
-  errorMessage.value = "An unexpected error occurred.";
-
-  console.log(serverData.value);
-};
-
 const updateStats = (currentStats: Stats["current"]) => {
   isConnected.value = true;
   stats.value = {
@@ -762,7 +784,6 @@ const updatePowerState = (
   state: ServerState,
   details?: { oom_killed?: boolean; exit_code?: number },
 ) => {
-  console.log("Power state:", state, details);
   serverPowerState.value = state;
 
   if (state === "crashed") {
@@ -910,6 +931,10 @@ const cleanup = () => {
 
 onMounted(() => {
   isMounted.value = true;
+  if (server.general?.status === "suspended") {
+    isLoading.value = false;
+    return;
+  }
   if (server.error) {
     if (!server.error.message.includes("Forbidden")) {
       startPolling();
@@ -959,17 +984,15 @@ onUnmounted(() => {
 
 watch(
   () => serverData.value?.status,
-  (newStatus) => {
+  (newStatus, oldStatus) => {
     if (isFirstMount.value) {
       isFirstMount.value = false;
       return;
     }
 
-    if (newStatus === "installing") {
+    if (newStatus === "installing" && oldStatus !== "installing") {
+      countdown.value = 15;
       startPolling();
-    } else {
-      stopPolling();
-      server.refresh();
     }
   },
 );
@@ -979,7 +1002,7 @@ definePageMeta({
 });
 </script>
 
-<style scoped>
+<style>
 @keyframes server-action-buttons-anim {
   0% {
     opacity: 0;
@@ -996,7 +1019,16 @@ definePageMeta({
 }
 
 .mobile-blurred-servericon::before {
-  @apply absolute left-0 top-0 block h-36 w-full bg-cover bg-center bg-no-repeat blur-2xl sm:hidden;
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: block;
+  height: 9rem;
+  width: 100%;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  filter: blur(1rem);
   content: "";
   background-image: linear-gradient(
       to bottom,
@@ -1005,4 +1037,10 @@ definePageMeta({
     ),
     var(--server-bg-image);
 }
+
+@media screen and (min-width: 640px) {
+  .mobile-blurred-servericon::before {
+    display: none;
+  }
+}
 </style>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/backups.vue b/apps/frontend/src/pages/servers/manage/[id]/backups.vue
index 31656983e..5f31ff002 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/backups.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/backups.vue
@@ -1,6 +1,30 @@
 <template>
   <div class="contents">
-    <div v-if="data" class="contents">
+    <div
+      v-if="server.backups?.error"
+      class="flex w-full flex-col items-center justify-center gap-4 p-4"
+    >
+      <div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
+        <div class="flex flex-col items-center text-center">
+          <div class="flex flex-col items-center gap-4">
+            <div class="grid place-content-center rounded-full bg-bg-orange p-4">
+              <IssuesIcon class="size-12 text-orange" />
+            </div>
+            <h1 class="m-0 mb-2 w-fit text-4xl font-bold">Failed to load backups</h1>
+          </div>
+          <p class="text-lg text-secondary">
+            We couldn't load your server's backups. Here's what went wrong:
+          </p>
+          <p>
+            <span class="break-all font-mono">{{ JSON.stringify(server.backups.error) }}</span>
+          </p>
+          <ButtonStyled size="large" color="brand" @click="() => server.refresh(['backups'])">
+            <button class="mt-6 !w-full">Retry</button>
+          </ButtonStyled>
+        </div>
+      </div>
+    </div>
+    <div v-else-if="data" class="contents">
       <LazyUiServersBackupCreateModal
         ref="createBackupModal"
         :server="server"
@@ -53,7 +77,10 @@
             </div>
             <div class="flex w-full flex-col gap-2 sm:w-fit sm:flex-row">
               <ButtonStyled type="standard">
-                <button @click="showbackupSettingsModal">
+                <button
+                  :disabled="server.general?.status === 'installing'"
+                  @click="showbackupSettingsModal"
+                >
                   <SettingsIcon class="h-5 w-5" />
                   Auto backups
                 </button>
@@ -63,13 +90,16 @@
                   v-tooltip="
                     isServerRunning && !userPreferences.backupWhileRunning
                       ? 'Cannot create backup while server is running. You can disable this from your server Options > Preferences.'
-                      : ''
+                      : server.general?.status === 'installing'
+                        ? 'Cannot create backups while server is being installed'
+                        : ''
                   "
                   class="w-full sm:w-fit"
                   :disabled="
                     (isServerRunning && !userPreferences.backupWhileRunning) ||
                     data.used_backup_quota >= data.backup_quota ||
-                    backups.some((backup) => backup.ongoing)
+                    backups.some((backup) => backup.ongoing) ||
+                    server.general?.status === 'installing'
                   "
                   @click="showCreateModel"
                 >
@@ -90,108 +120,111 @@
           automatically refresh when the backup is complete.
         </div>
 
-        <li
-          v-for="(backup, index) in backups"
-          :key="backup.id"
-          class="relative m-0 w-full list-none rounded-2xl bg-bg-raised p-4 shadow-md"
-        >
-          <div class="flex flex-col gap-4">
-            <div class="flex items-center justify-between">
-              <div class="flex min-w-0 flex-row items-center gap-4">
-                <div
-                  class="grid size-14 shrink-0 place-content-center overflow-hidden rounded-xl border-[1px] border-solid border-button-border shadow-sm"
-                  :class="backup.ongoing ? 'text-green [&&]:bg-bg-green' : 'bg-button-bg'"
-                >
-                  <UiServersIconsLoadingIcon
-                    v-if="backup.ongoing"
-                    v-tooltip="'Backup in progress'"
-                    class="size-6 animate-spin"
-                  />
-                  <LockIcon v-else-if="backup.locked" class="size-8" />
-                  <BoxIcon v-else class="size-8" />
-                </div>
-                <div class="flex min-w-0 flex-col gap-2">
-                  <div class="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center">
-                    <div class="max-w-full truncate text-xl font-bold text-contrast">
-                      {{ backup.name }}
-                    </div>
+        <div class="flex w-full flex-col gap-2">
+          <li
+            v-for="(backup, index) in backups"
+            :key="backup.id"
+            class="relative m-0 w-full list-none rounded-2xl bg-bg-raised p-2 shadow-md"
+          >
+            <div class="flex flex-col gap-4">
+              <div class="flex items-center justify-between">
+                <div class="flex min-w-0 flex-row items-center gap-4">
+                  <div
+                    class="grid size-14 shrink-0 place-content-center overflow-hidden rounded-xl border-[1px] border-solid border-button-border shadow-sm"
+                    :class="backup.ongoing ? 'text-green [&&]:bg-bg-green' : 'bg-button-bg'"
+                  >
+                    <UiServersIconsLoadingIcon
+                      v-if="backup.ongoing"
+                      v-tooltip="'Backup in progress'"
+                      class="size-6 animate-spin"
+                    />
+                    <LockIcon v-else-if="backup.locked" class="size-8" />
+                    <BoxIcon v-else class="size-8" />
+                  </div>
+                  <div class="flex min-w-0 flex-col gap-2">
+                    <div class="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center">
+                      <div class="max-w-full truncate font-bold text-contrast">
+                        {{ backup.name }}
+                      </div>
 
-                    <div
-                      v-if="index == 0"
-                      class="hidden items-center gap-1 rounded-full bg-bg-green p-1 px-1.5 text-xs font-semibold text-brand sm:flex"
-                    >
-                      <CheckIcon class="size-4" /> Latest
+                      <div
+                        v-if="index == 0"
+                        class="hidden items-center gap-1 rounded-full bg-bg-green p-1 px-1.5 text-xs font-semibold text-brand sm:flex"
+                      >
+                        <CheckIcon class="size-4" /> Latest
+                      </div>
+                    </div>
+                    <div class="flex items-center gap-1 text-xs">
+                      <CalendarIcon class="size-4" />
+                      {{
+                        new Date(backup.created_at).toLocaleString("en-US", {
+                          month: "numeric",
+                          day: "numeric",
+                          year: "2-digit",
+                          hour: "numeric",
+                          minute: "numeric",
+                          hour12: true,
+                        })
+                      }}
                     </div>
                   </div>
-                  <div class="flex items-center gap-2 text-sm font-semibold">
-                    <CalendarIcon class="size-4" />
-                    {{
-                      new Date(backup.created_at).toLocaleString("en-US", {
-                        month: "numeric",
-                        day: "numeric",
-                        year: "2-digit",
-                        hour: "numeric",
-                        minute: "numeric",
-                        hour12: true,
-                      })
-                    }}
-                  </div>
                 </div>
+                <ButtonStyled v-if="!backup.ongoing" circular type="transparent">
+                  <UiServersTeleportOverflowMenu
+                    direction="left"
+                    position="bottom"
+                    class="bg-transparent"
+                    :disabled="backups.some((b) => b.ongoing)"
+                    :options="[
+                      {
+                        id: 'rename',
+                        action: () => {
+                          renameBackupName = backup.name;
+                          currentBackup = backup.id;
+                          renameBackupModal?.show();
+                        },
+                      },
+                      {
+                        id: 'restore',
+                        action: () => {
+                          currentBackup = backup.id;
+                          restoreBackupModal?.show();
+                        },
+                      },
+                      { id: 'download', action: () => initiateDownload(backup.id) },
+                      {
+                        id: 'lock',
+                        action: () => {
+                          if (backup.locked) {
+                            unlockBackup(backup.id);
+                          } else {
+                            lockBackup(backup.id);
+                          }
+                        },
+                      },
+                      {
+                        id: 'delete',
+                        action: () => {
+                          currentBackup = backup.id;
+                          deleteBackupModal?.show();
+                        },
+                        color: 'red',
+                      },
+                    ]"
+                  >
+                    <MoreHorizontalIcon class="h-5 w-5 bg-transparent" />
+                    <template #rename> <EditIcon /> Rename </template>
+                    <template #restore> <ClipboardCopyIcon /> Restore </template>
+                    <template v-if="backup.locked" #lock> <LockOpenIcon /> Unlock </template>
+                    <template v-else #lock> <LockIcon /> Lock </template>
+                    <template #download> <DownloadIcon /> Download </template>
+                    <template #delete> <TrashIcon /> Delete </template>
+                  </UiServersTeleportOverflowMenu>
+                </ButtonStyled>
               </div>
-              <ButtonStyled v-if="!backup.ongoing" circular type="transparent">
-                <UiServersTeleportOverflowMenu
-                  direction="left"
-                  position="bottom"
-                  class="bg-transparent"
-                  :options="[
-                    {
-                      id: 'rename',
-                      action: () => {
-                        renameBackupName = backup.name;
-                        currentBackup = backup.id;
-                        renameBackupModal?.show();
-                      },
-                    },
-                    {
-                      id: 'restore',
-                      action: () => {
-                        currentBackup = backup.id;
-                        restoreBackupModal?.show();
-                      },
-                    },
-                    { id: 'download', action: () => initiateDownload(backup.id) },
-                    {
-                      id: 'lock',
-                      action: () => {
-                        if (backup.locked) {
-                          unlockBackup(backup.id);
-                        } else {
-                          lockBackup(backup.id);
-                        }
-                      },
-                    },
-                    {
-                      id: 'delete',
-                      action: () => {
-                        currentBackup = backup.id;
-                        deleteBackupModal?.show();
-                      },
-                      color: 'red',
-                    },
-                  ]"
-                >
-                  <MoreHorizontalIcon class="h-5 w-5 bg-transparent" />
-                  <template #rename> <EditIcon /> Rename </template>
-                  <template #restore> <ClipboardCopyIcon /> Restore </template>
-                  <template v-if="backup.locked" #lock> <LockOpenIcon /> Unlock </template>
-                  <template v-else #lock> <LockIcon /> Lock </template>
-                  <template #download> <DownloadIcon /> Download </template>
-                  <template #delete> <TrashIcon /> Delete </template>
-                </UiServersTeleportOverflowMenu>
-              </ButtonStyled>
             </div>
-          </div>
-        </li>
+          </li>
+        </div>
       </ul>
 
       <div
@@ -232,6 +265,7 @@ import {
   BoxIcon,
   LockIcon,
   LockOpenIcon,
+  IssuesIcon,
 } from "@modrinth/assets";
 import { ref, computed } from "vue";
 import type { Server } from "~/composables/pyroServers";
@@ -288,33 +322,37 @@ const showbackupSettingsModal = () => {
   backupSettingsModal.value?.show();
 };
 
-const handleBackupCreated = (payload: { success: boolean; message: string }) => {
+const handleBackupCreated = async (payload: { success: boolean; message: string }) => {
   if (payload.success) {
     addNotification({ type: "success", text: payload.message });
+    await props.server.refresh(["backups"]);
   } else {
     addNotification({ type: "error", text: payload.message });
   }
 };
 
-const handleBackupRenamed = (payload: { success: boolean; message: string }) => {
+const handleBackupRenamed = async (payload: { success: boolean; message: string }) => {
   if (payload.success) {
     addNotification({ type: "success", text: payload.message });
+    await props.server.refresh(["backups"]);
   } else {
     addNotification({ type: "error", text: payload.message });
   }
 };
 
-const handleBackupRestored = (payload: { success: boolean; message: string }) => {
+const handleBackupRestored = async (payload: { success: boolean; message: string }) => {
   if (payload.success) {
     addNotification({ type: "success", text: payload.message });
+    await props.server.refresh(["backups"]);
   } else {
     addNotification({ type: "error", text: payload.message });
   }
 };
 
-const handleBackupDeleted = (payload: { success: boolean; message: string }) => {
+const handleBackupDeleted = async (payload: { success: boolean; message: string }) => {
   if (payload.success) {
     addNotification({ type: "success", text: payload.message });
+    await props.server.refresh(["backups"]);
   } else {
     addNotification({ type: "error", text: payload.message });
   }
@@ -378,8 +416,8 @@ onMounted(() => {
     }
 
     if (hasOngoingBackups) {
-      refreshInterval.value = setInterval(() => {
-        props.server.refresh(["backups"]);
+      refreshInterval.value = setInterval(async () => {
+        await props.server.refresh(["backups"]);
       }, 10000);
     }
   });
diff --git a/apps/frontend/src/pages/servers/manage/[id]/content/index.vue b/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
index 8161fa97c..7397ff6b9 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
@@ -1,59 +1,39 @@
 <template>
-  <NewModal ref="modModal" header="Editing mod version">
-    <div>
-      <div class="mb-4 flex flex-col gap-4">
-        <div class="inline-flex flex-wrap items-center">
-          You're changing the version of
-          <div class="inline-flex flex-wrap items-center gap-1 text-nowrap pl-2">
-            <UiAvatar
-              :src="currentMod?.icon_url"
-              size="24px"
-              class="inline-block"
-              alt="Server Icon"
-            />
-            <strong>{{ currentMod?.name + "." }}</strong>
+  <UiServersContentVersionEditModal
+    v-if="!invalidModal"
+    ref="versionEditModal"
+    :type="type"
+    :mod-pack="Boolean(props.server.general?.upstream)"
+    :game-version="props.server.general?.mc_version ?? ''"
+    :loader="props.server.general?.loader?.toLowerCase() ?? ''"
+    :server-id="props.server.serverId"
+    @change-version="changeModVersion($event)"
+  />
+
+  <div
+    v-if="server.content?.error"
+    class="flex w-full flex-col items-center justify-center gap-4 p-4"
+  >
+    <div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
+      <div class="flex flex-col items-center text-center">
+        <div class="flex flex-col items-center gap-4">
+          <div class="grid place-content-center rounded-full bg-bg-orange p-4">
+            <IssuesIcon class="size-12 text-orange" />
           </div>
+          <h1 class="m-0 mb-2 w-fit text-4xl font-bold">Failed to load content</h1>
         </div>
-        <div>
-          <div v-if="props.server.general?.upstream" class="flex gap-2">
-            <InfoIcon class="hidden sm:block" />
-            <span class="text-sm text-secondary">
-              Changing the mod version may cause unexpected issues. Because your server was created
-              from a modpack, it is recommended to use the modpack's version of the mod.
-            </span>
-          </div>
-        </div>
-      </div>
-      <div class="flex items-center gap-4">
-        <UiServersTeleportDropdownMenu
-          v-model="currentVersion"
-          name="Project"
-          :options="currentVersions"
-          placeholder="Select project..."
-          class="!w-full"
-          :display-name="
-            (version) => (typeof version === 'object' ? version?.version_number : version)
-          "
-        />
-      </div>
-      <div class="mt-4 flex flex-row items-center gap-4">
-        <ButtonStyled color="brand">
-          <button :disabled="currentMod.changing" @click="changeModVersion">
-            <PlusIcon />
-            Install
-          </button>
-        </ButtonStyled>
-        <ButtonStyled>
-          <button @click="modModal.value.hide()">
-            <XIcon />
-            Cancel
-          </button>
+        <p class="text-lg text-secondary">
+          We couldn't load your server's {{ type.toLowerCase() }}s. Here's what we know:
+          <span class="break-all font-mono">{{ JSON.stringify(server.content.error) }}</span>
+        </p>
+        <ButtonStyled size="large" color="brand" @click="() => server.refresh(['content'])">
+          <button class="mt-6 !w-full">Retry</button>
         </ButtonStyled>
       </div>
     </div>
-  </NewModal>
+  </div>
 
-  <div v-if="server.general && localMods" class="relative isolate flex h-full w-full flex-col">
+  <div v-else-if="server.general && localMods" class="relative isolate flex h-full w-full flex-col">
     <div ref="pyroContentSentinel" class="sentinel" data-pyro-content-sentinel />
     <div class="relative flex h-full w-full flex-col">
       <div class="sticky top-0 z-20 -mt-3 flex items-center justify-between bg-bg py-3">
@@ -123,7 +103,7 @@
         class="rounded-xl bg-bg-raised"
         :margin-bottom="16"
         :file-type="type"
-        :current-path="'/mods'"
+        :current-path="`/${type.toLocaleLowerCase()}s`"
         :fs="props.server.fs"
         :accepted-types="acceptFileFromProjectType(type.toLocaleLowerCase()).split(',')"
         @upload-complete="() => props.server.refresh(['content'])"
@@ -149,7 +129,7 @@
                       :to="
                         mod.project_id
                           ? `/project/${mod.project_id}/version/${mod.version_id}`
-                          : `files?path=mods`
+                          : `files?path=${type.toLocaleLowerCase()}s`
                       "
                       class="flex min-w-0 flex-1 items-center gap-2 rounded-xl p-2"
                       draggable="false"
@@ -162,9 +142,7 @@
                       />
                       <div class="flex min-w-0 flex-col gap-1">
                         <span class="text-md flex min-w-0 items-center gap-2 font-bold">
-                          <span class="truncate text-contrast">{{
-                            mod.name || mod.filename.replace(".disabled", "")
-                          }}</span>
+                          <span class="truncate text-contrast">{{ friendlyModName(mod) }}</span>
                           <span
                             v-if="mod.disabled"
                             class="hidden rounded-full bg-button-bg p-1 px-2 text-xs text-contrast sm:block"
@@ -174,19 +152,21 @@
                         <div class="min-w-0 text-xs text-secondary">
                           <span v-if="mod.owner" class="hidden sm:block"> by {{ mod.owner }} </span>
                           <span class="block font-semibold sm:hidden">
-                            {{ mod.version_number || "External mod" }}
+                            {{ mod.version_number || `External ${type.toLocaleLowerCase()}` }}
                           </span>
                         </div>
                       </div>
                     </NuxtLink>
                     <div class="ml-2 hidden min-w-0 flex-1 flex-col text-sm sm:flex">
                       <div class="truncate font-semibold text-contrast">
-                        <span v-tooltip="'Mod version'">{{
-                          mod.version_number || "External mod"
+                        <span v-tooltip="`${type} version`">{{
+                          mod.version_number || `External ${type.toLocaleLowerCase()}`
                         }}</span>
                       </div>
                       <div class="truncate">
-                        <span v-tooltip="'Mod file name'">{{ mod.filename }}</span>
+                        <span v-tooltip="`${type} file name`">
+                          {{ mod.filename }}
+                        </span>
                       </div>
                     </div>
                     <div
@@ -194,7 +174,7 @@
                     >
                       <ButtonStyled color="red" type="transparent">
                         <button
-                          v-tooltip="'Delete mod'"
+                          v-tooltip="`Delete ${type.toLocaleLowerCase()}`"
                           :disabled="mod.changing"
                           class="!hidden sm:!block"
                           @click="removeMod(mod)"
@@ -205,14 +185,16 @@
                       <ButtonStyled type="transparent">
                         <button
                           v-tooltip="
-                            mod.project_id ? 'Edit mod version' : 'External mods cannot be edited'
+                            mod.project_id
+                              ? `Edit ${type.toLocaleLowerCase()} version`
+                              : `External ${type.toLocaleLowerCase()}s cannot be edited`
                           "
                           :disabled="mod.changing || !mod.project_id"
                           class="!hidden sm:!block"
-                          @click="beginChangeModVersion(mod)"
+                          @click="showVersionModal(mod)"
                         >
                           <template v-if="mod.changing">
-                            <UiServersIconsLoadingIcon />
+                            <UiServersIconsLoadingIcon class="animate-spin" />
                           </template>
                           <template v-else>
                             <EditIcon />
@@ -232,7 +214,7 @@
                             :options="[
                               {
                                 id: 'edit',
-                                action: () => beginChangeModVersion(mod),
+                                action: () => showVersionModal(mod),
                                 shown: !!(mod.project_id && !mod.changing),
                               },
                               {
@@ -357,16 +339,15 @@ import {
   PackageClosedIcon,
   FilterIcon,
   DropdownIcon,
-  InfoIcon,
-  XIcon,
   PlusIcon,
   MoreVerticalIcon,
   CompassIcon,
   WrenchIcon,
   ListIcon,
   FileIcon,
+  IssuesIcon,
 } from "@modrinth/assets";
-import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { ButtonStyled } from "@modrinth/ui";
 import { ref, computed, watch, onMounted, onUnmounted } from "vue";
 import FilesUploadDragAndDrop from "~/components/ui/servers/FilesUploadDragAndDrop.vue";
 import FilesUploadDropdown from "~/components/ui/servers/FilesUploadDropdown.vue";
@@ -401,6 +382,64 @@ const filterMethod = ref("all");
 
 const uploadDropdownRef = ref();
 
+const versionEditModal = ref();
+const currentEditMod = ref<ContentItem | null>(null);
+const invalidModal = computed(
+  () => !props.server.general?.mc_version || !props.server.general?.loader,
+);
+async function changeModVersion(event: string) {
+  const mod = currentEditMod.value;
+
+  if (mod) mod.changing = true;
+
+  try {
+    versionEditModal.value.hide();
+
+    // This will be used instead once backend implementation is done
+    // await props.server.content?.reinstall(
+    //   `/${type.value.toLowerCase()}s/${event.fileName}`,
+    //   currentMod.value.project_id,
+    //   currentVersion.value.id,
+    // );
+
+    await props.server.content?.install(
+      type.value.toLowerCase() as "mod" | "plugin",
+      mod?.project_id || "",
+      event,
+    );
+
+    await props.server.content?.remove(`/${type.value.toLowerCase()}s/${mod?.filename}`);
+
+    await props.server.refresh(["general", "content"]);
+  } catch (error) {
+    const errmsg = `Error changing mod version: ${error}`;
+    console.error(errmsg);
+    addNotification({
+      text: errmsg,
+      type: "error",
+    });
+    return;
+  }
+  if (mod) mod.changing = false;
+}
+
+function showVersionModal(mod: ContentItem) {
+  if (invalidModal.value || !mod?.project_id || !mod?.filename) {
+    const errmsg = invalidModal.value
+      ? "Data required for changing mod version was not found."
+      : `${!mod?.project_id ? "No mod project ID found" : "No mod filename found"} for ${friendlyModName(mod!)}`;
+    console.error(errmsg);
+    addNotification({
+      text: errmsg,
+      type: "error",
+    });
+    return;
+  }
+
+  currentEditMod.value = mod;
+  versionEditModal.value.show(mod);
+}
+
 const handleDroppedFiles = (files: File[]) => {
   files.forEach((file) => {
     uploadDropdownRef.value?.uploadFile(file);
@@ -529,17 +568,30 @@ const debouncedSearch = debounce(() => {
   }
 }, 300);
 
+function friendlyModName(mod: ContentItem) {
+  if (mod.name) return mod.name;
+
+  // remove .disabled if at the end of the filename
+  let cleanName = mod.filename.endsWith(".disabled") ? mod.filename.slice(0, -9) : mod.filename;
+
+  // remove everything after the last dot
+  const lastDotIndex = cleanName.lastIndexOf(".");
+  if (lastDotIndex !== -1) cleanName = cleanName.substring(0, lastDotIndex);
+  return cleanName;
+}
+
 async function toggleMod(mod: ContentItem) {
   mod.changing = true;
 
   const originalFilename = mod.filename;
   try {
     const newFilename = mod.filename.endsWith(".disabled")
-      ? mod.filename.replace(".disabled", "")
+      ? mod.filename.slice(0, -9)
       : `${mod.filename}.disabled`;
 
-    const sourcePath = `/mods/${mod.filename}`;
-    const destinationPath = `/mods/${newFilename}`;
+    const folder = `${type.value.toLocaleLowerCase()}s`;
+    const sourcePath = `/${folder}/${mod.filename}`;
+    const destinationPath = `/${folder}/${newFilename}`;
 
     mod.disabled = newFilename.endsWith(".disabled");
     mod.filename = newFilename;
@@ -553,7 +605,7 @@ async function toggleMod(mod: ContentItem) {
 
     console.error("Error toggling mod:", error);
     addNotification({
-      text: `Something went wrong toggling ${mod.name || mod.filename.replace(".disabled", "")}`,
+      text: `Something went wrong toggling ${friendlyModName(mod)}`,
       type: "error",
     });
   }
@@ -565,10 +617,7 @@ async function removeMod(mod: ContentItem) {
   mod.changing = true;
 
   try {
-    await props.server.content?.remove(
-      type.value as "Mod" | "Plugin",
-      `/${type.value.toLowerCase()}s/${mod.filename}`,
-    );
+    await props.server.content?.remove(`/${type.value.toLowerCase()}s/${mod.filename}`);
     await props.server.refresh(["general", "content"]);
   } catch (error) {
     console.error("Error removing mod:", error);
@@ -582,41 +631,6 @@ async function removeMod(mod: ContentItem) {
   mod.changing = false;
 }
 
-const modModal = ref();
-const currentMod = ref();
-const currentVersions = ref();
-const currentVersion = ref();
-
-async function beginChangeModVersion(mod: Mod) {
-  currentMod.value = mod;
-  currentVersions.value = await useBaseFetch(`project/${mod.project_id}/version`, {}, false);
-
-  currentVersions.value = currentVersions.value.filter((version: any) =>
-    version.loaders.includes(props.server.general?.loader?.toLowerCase()),
-  );
-
-  currentVersion.value = currentVersions.value.find(
-    (version: any) => version.id === mod.version_id,
-  );
-  modModal.value.show();
-}
-
-async function changeModVersion() {
-  currentMod.value.changing = true;
-  try {
-    modModal.value.hide();
-    await props.server.content?.reinstall(
-      type.value,
-      currentMod.value.version_id,
-      currentVersion.value.id,
-    );
-    await props.server.refresh(["general", "content"]);
-  } catch (error) {
-    console.error("Error changing mod version:", error);
-  }
-  currentMod.value.changing = false;
-}
-
 const hasMods = computed(() => {
   return localMods.value?.length > 0;
 });
@@ -646,9 +660,7 @@ const filteredMods = computed(() => {
   })();
 
   return statusFilteredMods.sort((a, b) => {
-    const aName = a.name || a.filename.replace(".disabled", "");
-    const bName = b.name || b.filename.replace(".disabled", "");
-    return aName.localeCompare(bName);
+    return friendlyModName(a).localeCompare(friendlyModName(b));
   });
 });
 </script>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/files.vue b/apps/frontend/src/pages/servers/manage/[id]/files.vue
index e61e2d6ac..fa537bc74 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/files.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/files.vue
@@ -34,13 +34,18 @@
           <UiServersFilesBrowseNavbar
             :breadcrumb-segments="breadcrumbSegments"
             :search-query="searchQuery"
-            :sort-method="sortMethod"
+            :current-filter="viewFilter"
             @navigate="navigateToSegment"
-            @sort="sortFiles"
             @create="showCreateModal"
             @upload="initiateFileUpload"
+            @filter="handleFilter"
             @update:search-query="searchQuery = $event"
           />
+          <UiServersFilesLabelBar
+            :sort-field="sortMethod"
+            :sort-desc="sortDesc"
+            @sort="handleSort"
+          />
           <FilesUploadDropdown
             v-if="props.server.fs"
             ref="uploadDropdownRef"
@@ -94,7 +99,6 @@
         </div>
 
         <div v-else-if="items.length > 0" class="h-full w-full overflow-hidden rounded-b-2xl">
-          <UiServersFilesLabelBar />
           <UiServersFileVirtualList
             :items="filteredItems"
             @delete="showDeleteModal"
@@ -185,6 +189,8 @@ const props = defineProps<{
   server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
 }>();
 
+const modulesLoaded = inject<Promise<void>>("modulesLoaded");
+
 const route = useRoute();
 const router = useRouter();
 
@@ -196,7 +202,8 @@ const operationHistory = ref<Operation[]>([]);
 const redoStack = ref<Operation[]>([]);
 
 const searchQuery = ref("");
-const sortMethod = ref("default");
+const sortMethod = ref("name");
+const sortDesc = ref(false);
 
 const maxResults = 100;
 const currentPage = ref(1);
@@ -227,11 +234,21 @@ const uploadDropdownRef = ref();
 
 const data = computed(() => props.server.general);
 
+const viewFilter = ref("all");
+
+const handleFilter = (type: string) => {
+  viewFilter.value = type;
+  sortMethod.value = "name";
+  sortDesc.value = false;
+};
+
 useHead({
   title: computed(() => `Files - ${data.value?.name ?? "Server"} - Modrinth`),
 });
 
 const fetchDirectoryContents = async (): Promise<DirectoryResponse> => {
+  await modulesLoaded;
+
   const path = Array.isArray(currentPath.value) ? currentPath.value.join("") : currentPath.value;
   try {
     const data = await props.server.fs?.listDirContents(path, currentPage.value, maxResults);
@@ -567,6 +584,51 @@ const applyDefaultSort = (items: DirectoryItem[]) => {
   });
 };
 
+const handleSort = (field: string) => {
+  if (sortMethod.value === field) {
+    sortDesc.value = !sortDesc.value;
+  } else {
+    sortMethod.value = field;
+    sortDesc.value = false;
+  }
+};
+
+const applySort = (items: DirectoryItem[]) => {
+  let result = [...items];
+
+  switch (viewFilter.value) {
+    case "filesOnly":
+      result = result.filter((item) => item.type !== "directory");
+      break;
+    case "foldersOnly":
+      result = result.filter((item) => item.type === "directory");
+      break;
+  }
+
+  const compareItems = (a: DirectoryItem, b: DirectoryItem) => {
+    if (viewFilter.value === "all") {
+      if (a.type === "directory" && b.type !== "directory") return -1;
+      if (a.type !== "directory" && b.type === "directory") return 1;
+    }
+
+    switch (sortMethod.value) {
+      case "modified":
+        return sortDesc.value
+          ? new Date(a.modified).getTime() - new Date(b.modified).getTime()
+          : new Date(b.modified).getTime() - new Date(a.modified).getTime();
+      case "created":
+        return sortDesc.value
+          ? new Date(a.created).getTime() - new Date(b.created).getTime()
+          : new Date(b.created).getTime() - new Date(a.created).getTime();
+      default:
+        return sortDesc.value ? b.name.localeCompare(a.name) : a.name.localeCompare(b.name);
+    }
+  };
+
+  result.sort(compareItems);
+  return result;
+};
+
 const filteredItems = computed(() => {
   let result = [...items.value];
 
@@ -575,24 +637,7 @@ const filteredItems = computed(() => {
     result = result.filter((item) => item.name.toLowerCase().includes(query));
   }
 
-  switch (sortMethod.value) {
-    case "modified":
-      result.sort((a, b) => new Date(b.modified).getTime() - new Date(a.modified).getTime());
-      break;
-    case "created":
-      result.sort((a, b) => new Date(b.created).getTime() - new Date(a.created).getTime());
-      break;
-    case "filesOnly":
-      result = result.filter((item) => item.type !== "directory");
-      break;
-    case "foldersOnly":
-      result = result.filter((item) => item.type === "directory");
-      break;
-    default:
-      result = applyDefaultSort(result);
-  }
-
-  return result;
+  return applySort(result);
 });
 
 const { reset } = useInfiniteScroll(
@@ -656,10 +701,6 @@ const onAnywhereClicked = (e: MouseEvent) => {
   }
 };
 
-const sortFiles = (method: string) => {
-  sortMethod.value = method;
-};
-
 const imageExtensions = ["png", "jpg", "jpeg", "gif", "webp"];
 
 const editFile = async (item: { name: string; type: string; path: string }) => {
@@ -682,7 +723,22 @@ const editFile = async (item: { name: string; type: string; path: string }) => {
   }
 };
 
+const initializeFileEdit = async () => {
+  if (!route.query.editing || !props.server.fs) return;
+
+  const filePath = route.query.editing as string;
+  await editFile({
+    name: filePath.split("/").pop() || "",
+    type: "file",
+    path: filePath,
+  });
+};
+
 onMounted(async () => {
+  await modulesLoaded;
+
+  await initializeFileEdit();
+
   await import("ace-builds");
   await import("ace-builds/src-noconflict/mode-json");
   await import("ace-builds/src-noconflict/mode-yaml");
@@ -717,7 +773,9 @@ watch(
   async (newQuery) => {
     currentPage.value = 1;
     searchQuery.value = "";
-    sortMethod.value = "default";
+    viewFilter.value = "all";
+    sortMethod.value = "name";
+    sortDesc.value = false;
 
     currentPath.value = Array.isArray(newQuery.path)
       ? newQuery.path.join("")
diff --git a/apps/frontend/src/pages/servers/manage/[id]/index.vue b/apps/frontend/src/pages/servers/manage/[id]/index.vue
index 37d687c66..1b2fd2fbe 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/index.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/index.vue
@@ -80,14 +80,19 @@
     <div class="flex flex-col-reverse gap-6 md:flex-col">
       <UiServersServerStats :data="stats" />
       <div
-        class="relative flex h-[600px] w-full flex-col gap-3 overflow-hidden rounded-2xl border border-divider bg-bg-raised p-4 transition-all duration-300 ease-in-out md:p-8"
+        class="relative flex h-[700px] w-full flex-col gap-3 overflow-hidden rounded-2xl border border-divider bg-bg-raised p-4 transition-all duration-300 ease-in-out md:p-8"
       >
         <div class="flex items-center justify-between">
           <div class="flex items-center gap-4">
             <h2 class="m-0 text-3xl font-extrabold text-contrast">Console</h2>
+
             <UiServersPanelServerStatus :state="serverPowerState" />
           </div>
         </div>
+        <!-- <div class="flex flex-row items-center gap-2 text-sm font-medium">
+          <InfoIcon class="hidden sm:block" />
+          Click and drag to select lines, then CMD+C to copy
+        </div> -->
         <UiServersPanelTerminal :full-screen="fullScreen">
           <div class="relative w-full px-4 pt-4">
             <ul
@@ -164,7 +169,7 @@
       </div>
     </div>
   </div>
-  <UiServersPanelOverviewLoading v-else-if="!isConnected && !isWsAuthIncorrect" />
+  <UiServersOverviewLoading v-else-if="!isConnected && !isWsAuthIncorrect" />
   <div v-else-if="isWsAuthIncorrect" class="flex flex-col">
     <h2>Could not connect to the server.</h2>
     <p>
@@ -237,45 +242,43 @@ interface ErrorData {
 }
 
 const inspectingError = ref<ErrorData | null>(null);
-const mcError = ref<any>(null);
 
 const inspectError = async () => {
-  const log = await props.server.fs?.downloadFile("logs/latest.log");
-  const response = (await $fetch("https://api.mclo.gs/1/log", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/x-www-form-urlencoded",
-    },
-    body: new URLSearchParams({
-      content: log,
-    }),
-  })) as any;
+  try {
+    const log = await props.server.fs?.downloadFile("logs/latest.log");
+    if (!log) return;
 
-  mcError.value = response;
+    // @ts-ignore
+    const response = await $fetch(`https://api.mclo.gs/1/analyse`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: new URLSearchParams({
+        content: log,
+      }),
+    });
 
-  // @ts-ignore
-  const analysis = (await $fetch(`https://api.mclo.gs/1/insights/${response.id}`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/x-www-form-urlencoded",
-    },
-    body: new URLSearchParams({
-      content: log,
-    }),
-  })) as ErrorData;
-
-  inspectingError.value = analysis;
+    // @ts-ignore
+    if (response && response.analysis && Array.isArray(response.analysis.problems)) {
+      inspectingError.value = response as ErrorData;
+    } else {
+      inspectingError.value = null;
+    }
+  } catch (error) {
+    console.error("Failed to analyze logs:", error);
+    inspectingError.value = null;
+  }
 };
 
 const clearError = () => {
   inspectingError.value = null;
-  mcError.value = null;
 };
 
 watch(
   () => props.serverPowerState,
   (newVal) => {
-    if (newVal === "crashed") {
+    if (newVal === "crashed" && !props.powerStateDetails?.oom_killed) {
       inspectError();
     } else {
       clearError();
@@ -283,7 +286,7 @@ watch(
   },
 );
 
-if (props.serverPowerState === "crashed") {
+if (props.serverPowerState === "crashed" && !props.powerStateDetails?.oom_killed) {
   inspectError();
 }
 
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/index.vue b/apps/frontend/src/pages/servers/manage/[id]/options/index.vue
index b1a400330..2c2c61af2 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/index.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/index.vue
@@ -5,7 +5,7 @@
         <div class="card flex flex-col gap-4">
           <label for="server-name-field" class="flex flex-col gap-2">
             <span class="text-lg font-bold text-contrast">Server name</span>
-            <span> Change your server's name. This name is only visible on Modrinth.</span>
+            <span> This name is only visible on Modrinth.</span>
           </label>
           <div class="flex flex-col gap-2">
             <input
@@ -64,10 +64,7 @@
         <div class="card flex flex-col gap-4">
           <label for="server-icon-field" class="flex flex-col gap-2">
             <span class="text-lg font-bold text-contrast">Server icon</span>
-            <span>
-              Change your server's icon. Changes will be visible on the Minecraft server list and on
-              Modrinth.
-            </span>
+            <span> This icon will be visible on the Minecraft server list and on Modrinth. </span>
           </label>
           <div class="flex gap-4">
             <div
@@ -91,20 +88,7 @@
               >
                 <EditIcon class="h-8 w-8 text-contrast" />
               </div>
-              <img
-                v-if="icon"
-                no-shadow
-                alt="Server Icon"
-                class="h-[6rem] w-[6rem] rounded-xl"
-                :src="icon"
-              />
-              <img
-                v-else
-                no-shadow
-                alt="Server Icon"
-                class="h-[6rem] w-[6rem] rounded-xl"
-                src="~/assets/images/servers/minecraft_server_icon.png"
-              />
+              <UiServersServerIcon :image="icon" />
             </div>
             <ButtonStyled>
               <button v-tooltip="'Synchronize icon with installed modpack'" @click="resetIcon">
@@ -116,7 +100,7 @@
         </div>
       </div>
     </div>
-    <UiServersPyroLoading v-else />
+    <div v-else />
     <UiServersSaveBanner
       :is-visible="!!hasUnsavedChanges && !!isValidServerName"
       :server="props.server"
@@ -234,67 +218,106 @@ const resetGeneral = () => {
 
 const uploadFile = async (e: Event) => {
   const file = (e.target as HTMLInputElement).files?.[0];
-  // down scale the image to 64x64
+  if (!file) {
+    addNotification({
+      group: "serverOptions",
+      type: "error",
+      title: "No file selected",
+      text: "Please select a file to upload.",
+    });
+    return;
+  }
+
   const scaledFile = await new Promise<File>((resolve, reject) => {
-    if (!file) {
-      addNotification({
-        group: "serverOptions",
-        type: "error",
-        title: "No file selected",
-        text: "Please select a file to upload.",
-      });
-      reject(new Error("No file selected"));
-      return;
-    }
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
     const img = new Image();
-    img.src = URL.createObjectURL(file);
     img.onload = () => {
       canvas.width = 64;
       canvas.height = 64;
       ctx?.drawImage(img, 0, 0, 64, 64);
-      // turn the downscaled image back to a png file
       canvas.toBlob((blob) => {
         if (blob) {
-          const data = new File([blob], "server-icon.png", { type: "image/png" });
-          resolve(data);
+          resolve(new File([blob], "server-icon.png", { type: "image/png" }));
         } else {
           reject(new Error("Canvas toBlob failed"));
         }
       }, "image/png");
+      URL.revokeObjectURL(img.src);
     };
     img.onerror = reject;
+    img.src = URL.createObjectURL(file);
   });
-  if (!file) return;
-  if (data.value?.image) {
-    await props.server.fs?.deleteFileOrFolder("/server-icon.png", false);
-    await props.server.fs?.deleteFileOrFolder("/server-icon-original.png", false);
-  }
-  await props.server.fs?.uploadFile("/server-icon.png", scaledFile);
-  await props.server.fs?.uploadFile("/server-icon-original.png", file);
-  await props.server.refresh();
 
-  addNotification({
-    group: "serverOptions",
-    type: "success",
-    title: "Server icon updated",
-    text: "Your server icon was successfully changed.",
-  });
+  try {
+    if (data.value?.image) {
+      await props.server.fs?.deleteFileOrFolder("/server-icon.png", false);
+      await props.server.fs?.deleteFileOrFolder("/server-icon-original.png", false);
+    }
+
+    await props.server.fs?.uploadFile("/server-icon.png", scaledFile);
+    await props.server.fs?.uploadFile("/server-icon-original.png", file);
+
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    const img = new Image();
+    await new Promise<void>((resolve) => {
+      img.onload = () => {
+        canvas.width = 512;
+        canvas.height = 512;
+        ctx?.drawImage(img, 0, 0, 512, 512);
+        const dataURL = canvas.toDataURL("image/png");
+        useState(`server-icon-${props.server.serverId}`).value = dataURL;
+        if (data.value) data.value.image = dataURL;
+        resolve();
+        URL.revokeObjectURL(img.src);
+      };
+      img.src = URL.createObjectURL(file);
+    });
+
+    addNotification({
+      group: "serverOptions",
+      type: "success",
+      title: "Server icon updated",
+      text: "Your server icon was successfully changed.",
+    });
+  } catch (error) {
+    console.error("Error uploading icon:", error);
+    addNotification({
+      group: "serverOptions",
+      type: "error",
+      title: "Upload failed",
+      text: "Failed to upload server icon.",
+    });
+  }
 };
 
 const resetIcon = async () => {
   if (data.value?.image) {
-    await props.server.fs?.deleteFileOrFolder("/server-icon.png", false);
-    await props.server.fs?.deleteFileOrFolder("/server-icon-original.png", false);
-    await new Promise((resolve) => setTimeout(resolve, 2000));
-    await reloadNuxtApp();
-    addNotification({
-      group: "serverOptions",
-      type: "success",
-      title: "Server icon reset",
-      text: "Your server icon was successfully reset.",
-    });
+    try {
+      await props.server.fs?.deleteFileOrFolder("/server-icon.png", false);
+      await props.server.fs?.deleteFileOrFolder("/server-icon-original.png", false);
+
+      useState(`server-icon-${props.server.serverId}`).value = undefined;
+      if (data.value) data.value.image = undefined;
+
+      await props.server.refresh(["general"]);
+
+      addNotification({
+        group: "serverOptions",
+        type: "success",
+        title: "Server icon reset",
+        text: "Your server icon was successfully reset.",
+      });
+    } catch (error) {
+      console.error("Error resetting icon:", error);
+      addNotification({
+        group: "serverOptions",
+        type: "error",
+        title: "Reset failed",
+        text: "Failed to reset server icon.",
+      });
+    }
   }
 };
 
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/info.vue b/apps/frontend/src/pages/servers/manage/[id]/options/info.vue
index dee9ddcd7..d5d9031a8 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/info.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/info.vue
@@ -27,7 +27,7 @@
               {{ data?.sftp_host }}
             </span>
 
-            <span class="text-xs uppercase text-secondary">server address</span>
+            <span class="text-xs text-secondary">Server Address</span>
           </div>
 
           <ButtonStyled type="transparent">
@@ -41,9 +41,9 @@
         </div>
         <div class="-mt-2 flex flex-col gap-2 sm:mt-0 sm:flex-row">
           <div
-            class="flex w-full flex-col justify-center gap-2 rounded-xl bg-table-alternateRow p-4"
+            class="flex w-full flex-col justify-center gap-2 rounded-xl bg-table-alternateRow px-4 py-2"
           >
-            <div class="flex items-center justify-between">
+            <div class="flex h-8 items-center justify-between">
               <span class="font-bold text-contrast">
                 {{ data?.sftp_username }}
               </span>
@@ -57,12 +57,12 @@
                 </button>
               </ButtonStyled>
             </div>
-            <span class="text-xs uppercase text-secondary">username</span>
+            <span class="text-xs text-secondary">Username</span>
           </div>
           <div
             class="flex w-full flex-col justify-center gap-2 rounded-xl bg-table-alternateRow p-4"
           >
-            <div class="flex items-center justify-between">
+            <div class="flex h-8 items-center justify-between">
               <span class="font-bold text-contrast">
                 {{
                   showPassword ? data?.sftp_password : "*".repeat(data?.sftp_password?.length ?? 0)
@@ -89,7 +89,7 @@
                 </ButtonStyled>
               </div>
             </div>
-            <span class="text-xs uppercase text-secondary">password</span>
+            <span class="text-xs text-secondary">Password</span>
           </div>
         </div>
       </div>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/loader.vue b/apps/frontend/src/pages/servers/manage/[id]/options/loader.vue
index 35a863db3..fb8c240db 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/loader.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/loader.vue
@@ -1,410 +1,95 @@
 <template>
-  <NewModal
+  <LazyUiServersPlatformVersionSelectModal
     ref="versionSelectModal"
-    :header="
-      isSecondPhase
-        ? 'Confirming reinstallation'
-        : `${data?.loader === selectedLoader ? 'Reinstalling' : 'Installing'}
-      ${selectedLoader.toLowerCase() === 'vanilla' ? 'Vanilla Minecraft' : selectedLoader}`
-    "
-    @hide="onHide"
-    @show="onShow"
-  >
-    <div class="flex flex-col gap-4 md:w-[600px]">
-      <p
-        v-if="isSecondPhase"
-        :style="{
-          lineHeight: isSecondPhase ? '1.5' : undefined,
-          marginBottom: isSecondPhase ? '-12px' : '0',
-          marginTop: isSecondPhase ? '-4px' : '-2px',
-        }"
-      >
-        This will reinstall your server and erase all data. You may want to back up your server
-        before proceeding. Are you sure you want to continue?
-      </p>
-      <div v-if="!isSecondPhase" class="flex flex-col gap-4">
-        <div class="mx-auto flex flex-row items-center gap-4">
-          <div
-            class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-button-bg shadow-sm"
-          >
-            <UiServersIconsLoaderIcon class="size-10" :loader="selectedLoader" />
-          </div>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="size-10"
-          >
-            <path d="M5 9v6" />
-            <path d="M9 9h3V5l7 7-7 7v-4H9V9z" />
-          </svg>
-          <div
-            class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-table-alternateRow shadow-sm"
-          >
-            <ServerIcon class="size-10" />
-          </div>
-        </div>
-        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
-          <div class="text-sm font-bold text-contrast">Minecraft version</div>
-          <UiServersTeleportDropdownMenu
-            v-model="selectedMCVersion"
-            name="mcVersion"
-            :options="mcVersions"
-            class="w-full max-w-[100%]"
-            placeholder="Select Minecraft version..."
-          />
-        </div>
+    :server="props.server"
+    :current-loader="data?.loader as Loaders"
+    @reinstall="emit('reinstall', $event)"
+  />
 
-        <div
-          v-if="selectedLoader.toLowerCase() !== 'vanilla'"
-          class="flex w-full flex-col gap-2 rounded-2xl p-4"
-          :class="{
-            'bg-table-alternateRow':
-              !selectedMCVersion || isLoading || selectedLoaderVersions.length > 0,
-            'bg-highlight-red':
-              selectedMCVersion && !isLoading && selectedLoaderVersions.length === 0,
-          }"
-        >
-          <div class="flex flex-col gap-2">
-            <div class="text-sm font-bold text-contrast">{{ selectedLoader }} version</div>
+  <LazyUiServersPlatformMrpackModal
+    ref="mrpackModal"
+    :server="props.server"
+    @reinstall="emit('reinstall', $event)"
+  />
 
-            <template v-if="!selectedMCVersion">
-              <div
-                class="relative flex h-9 w-full select-none items-center rounded-xl bg-button-bg px-4 opacity-50"
-              >
-                Select a Minecraft version to see available versions
-                <DropdownIcon class="absolute right-4" />
-              </div>
-            </template>
-            <template v-else-if="isLoading">
-              <div
-                class="relative flex h-9 w-full items-center rounded-xl bg-button-bg px-4 opacity-50"
-              >
-                <UiServersIconsLoadingIcon class="mr-2 animate-spin" />
-                Loading versions...
-                <DropdownIcon class="absolute right-4" />
-              </div>
-            </template>
-            <template v-else-if="selectedLoaderVersions.length > 0">
-              <UiServersTeleportDropdownMenu
-                v-model="selectedLoaderVersion"
-                name="loaderVersion"
-                :options="selectedLoaderVersions"
-                class="w-full max-w-[100%]"
-                :placeholder="
-                  selectedLoader.toLowerCase() === 'paper' ||
-                  selectedLoader.toLowerCase() === 'purpur'
-                    ? `Select build number...`
-                    : `Select loader version...`
-                "
-              />
-            </template>
-            <template v-else>
-              <div>No versions available for Minecraft {{ selectedMCVersion }}.</div>
-            </template>
-          </div>
-        </div>
-
-        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
-          <div class="flex w-full flex-row items-center justify-between">
-            <label class="w-full text-lg font-bold text-contrast" for="hard-reset">
-              Erase all data
-            </label>
-            <input
-              id="hard-reset"
-              :checked="hardReset"
-              class="switch stylized-toggle shrink-0"
-              type="checkbox"
-              @change="hardReset = ($event.target as HTMLInputElement).checked"
-            />
-          </div>
-          <div>
-            Removes all data on your server, including your worlds, mods, and configuration files,
-            then reinstalls it with the selected version.
-          </div>
-        </div>
-
-        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
-          <div class="flex w-full flex-row items-center justify-between">
-            <label class="w-full text-lg font-bold text-contrast" for="backup-server">
-              Backup server
-            </label>
-            <input
-              id="backup-server"
-              :checked="backupServer"
-              class="switch stylized-toggle shrink-0"
-              type="checkbox"
-              @change="backupServer = ($event.target as HTMLInputElement).checked"
-            />
-          </div>
-          <div>
-            Creates a backup of your server before proceeding with the installation or
-            reinstallation.
-          </div>
-        </div>
-      </div>
-      <div class="mt-4 flex justify-start gap-4">
-        <ButtonStyled :color="isDangerous ? 'red' : 'brand'">
-          <button :disabled="canInstall" @click="handleReinstall">
-            <RightArrowIcon />
-            {{
-              isBackingUp
-                ? "Backing up..."
-                : isSecondPhase
-                  ? "Erase and install"
-                  : loadingServerCheck
-                    ? "Loading..."
-                    : isDangerous
-                      ? "Erase and install"
-                      : "Install"
-            }}
-          </button>
-        </ButtonStyled>
-        <ButtonStyled>
-          <button
-            :disabled="isLoading"
-            @click="
-              if (isSecondPhase) {
-                isSecondPhase = false;
-              } else {
-                versionSelectModal?.hide();
-              }
-            "
-          >
-            <XIcon />
-            {{ isSecondPhase ? "Go back" : "Cancel" }}
-          </button>
-        </ButtonStyled>
-      </div>
-    </div>
-  </NewModal>
-
-  <NewModal ref="mrpackModal" header="Uploading mrpack" @hide="onHide" @show="onShow">
-    <div class="flex flex-col gap-4 md:w-[600px]">
-      <p
-        v-if="isSecondPhase"
-        :style="{
-          lineHeight: isSecondPhase ? '1.5' : undefined,
-          marginBottom: isSecondPhase ? '-12px' : '0',
-          marginTop: isSecondPhase ? '-4px' : '-2px',
-        }"
-      >
-        This will reinstall your server and erase all data. You may want to back up your server
-        before proceeding. Are you sure you want to continue?
-      </p>
-      <div v-if="!isSecondPhase" class="flex flex-col gap-4">
-        <div class="mx-auto flex flex-row items-center gap-4">
-          <div
-            class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-button-bg shadow-sm"
-          >
-            <UploadIcon class="size-10" />
-          </div>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="size-10"
-          >
-            <path d="M5 9v6" />
-            <path d="M9 9h3V5l7 7-7 7v-4H9V9z" />
-          </svg>
-          <div
-            class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-table-alternateRow shadow-sm"
-          >
-            <ServerIcon class="size-10" />
-          </div>
-        </div>
-        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
-          <div class="text-sm font-bold text-contrast">Upload mrpack</div>
-          <input
-            type="file"
-            accept=".mrpack"
-            class=""
-            :disabled="isLoading"
-            @change="uploadMrpack"
-          />
-        </div>
-
-        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
-          <div class="flex w-full flex-row items-center justify-between">
-            <label class="w-full text-lg font-bold text-contrast" for="hard-reset">
-              Erase all data
-            </label>
-            <input
-              id="hard-reset"
-              :checked="hardReset"
-              class="switch stylized-toggle shrink-0"
-              type="checkbox"
-              @change="hardReset = ($event.target as HTMLInputElement).checked"
-            />
-          </div>
-          <div>
-            Removes all data on your server, including your worlds, mods, and configuration files,
-            then reinstalls it with the selected version.
-          </div>
-        </div>
-
-        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
-          <div class="flex w-full flex-row items-center justify-between">
-            <label class="w-full text-lg font-bold text-contrast" for="backup-server-mrpack">
-              Backup server
-            </label>
-            <input
-              id="backup-server-mrpack"
-              :checked="backupServer"
-              class="switch stylized-toggle shrink-0"
-              type="checkbox"
-              @change="backupServer = ($event.target as HTMLInputElement).checked"
-            />
-          </div>
-          <div>Creates a backup of your server before proceeding.</div>
-        </div>
-      </div>
-      <div class="mt-4 flex justify-start gap-4">
-        <ButtonStyled :color="isDangerous ? 'red' : 'brand'">
-          <button :disabled="canInstallUpload" @click="handleReinstallUpload">
-            <RightArrowIcon />
-            {{
-              isBackingUp
-                ? "Backing up..."
-                : isSecondPhase
-                  ? "Erase and install"
-                  : loadingServerCheck
-                    ? "Loading..."
-                    : isDangerous
-                      ? "Erase and install"
-                      : "Install"
-            }}
-          </button>
-        </ButtonStyled>
-        <ButtonStyled>
-          <button
-            :disabled="isLoading"
-            @click="
-              if (isSecondPhase) {
-                isSecondPhase = false;
-              } else {
-                mrpackModal?.hide();
-              }
-            "
-          >
-            <XIcon />
-            {{ isSecondPhase ? "Go back" : "Cancel" }}
-          </button>
-        </ButtonStyled>
-      </div>
-    </div>
-  </NewModal>
+  <LazyUiServersPlatformChangeModpackVersionModal
+    ref="modpackVersionModal"
+    :server="props.server"
+    :project="data?.project"
+    :versions="Array.isArray(versions) ? versions : []"
+    :current-version="currentVersion"
+    :current-version-id="data?.upstream?.version_id"
+    :server-status="data?.status"
+    @reinstall="emit('reinstall')"
+  />
 
   <div class="flex h-full w-full flex-col">
     <div v-if="data && versions" class="flex w-full flex-col">
       <div class="card flex flex-col gap-4">
-        <div class="flex flex-row items-center justify-between gap-2">
-          <h2 class="m-0 text-lg font-bold text-contrast">Modpack</h2>
+        <div class="flex select-none flex-col items-center justify-between gap-2 lg:flex-row">
+          <div class="flex flex-row items-center gap-2">
+            <h2 class="m-0 text-lg font-bold text-contrast">Modpack</h2>
+            <div
+              v-if="updateAvailable"
+              class="rounded-full bg-bg-orange px-2 py-1 text-xs font-medium text-orange"
+            >
+              <span>Update available</span>
+            </div>
+          </div>
           <div v-if="data.upstream" class="flex gap-4">
             <ButtonStyled>
-              <nuxt-link
-                :class="{
-                  'looks-disabled': props.server.general?.status === 'installing' && isError,
-                }"
-                :to="`/modpacks?sid=${props.server.serverId}`"
+              <button
+                class="!w-full sm:!w-auto"
+                :disabled="isInstalling"
+                @click="mrpackModal.show()"
               >
-                <TransferIcon class="size-4" />
-                Change modpack
-              </nuxt-link>
+                <UploadIcon class="size-4" /> Import .mrpack
+              </button>
             </ButtonStyled>
+            <!-- dumb hack to make a button link not a link -->
             <ButtonStyled>
-              <button class="!w-full sm:!w-auto" @click="mrpackModal.show()">
-                <UploadIcon class="size-4" /> Upload .mrpack file
-              </button>
-            </ButtonStyled>
-            <ButtonStyled v-if="hasNewerVersion" color="brand">
-              <button class="!w-full sm:!w-auto" @click="handleUpdateToLatest">
-                <UploadIcon class="size-4" /> Update modpack
-              </button>
+              <template v-if="isInstalling">
+                <button :disabled="isInstalling">
+                  <TransferIcon class="size-4" />
+                  Switch modpack
+                </button>
+              </template>
+              <nuxt-link v-else :to="`/modpacks?sid=${props.server.serverId}`">
+                <TransferIcon class="size-4" />
+                Switch modpack
+              </nuxt-link>
             </ButtonStyled>
           </div>
         </div>
-        <div v-if="data.upstream" class="contents">
-          <div class="flex w-full justify-between gap-2 rounded-3xl bg-table-alternateRow p-4">
-            <div class="flex flex-col gap-4 sm:flex-row">
-              <UiAvatar :src="data.project?.icon_url" size="120px" />
-              <div class="flex flex-col justify-between">
-                <div class="flex flex-col gap-2">
-                  <h1 class="m-0 flex gap-2 text-2xl font-extrabold leading-none text-contrast">
-                    {{ data.project?.title }}
-                  </h1>
-                  <span class="text-md text-secondary">
-                    {{
-                      data.project?.description && data.project.description.length > 150
-                        ? data.project.description.substring(0, 150) + "..."
-                        : data.project?.description || ""
-                    }}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="mt-4 flex flex-col gap-2">
-            <h2 class="m-0 text-lg font-bold text-contrast">Change modpack version</h2>
-            <p class="m-0">
-              Select the version of {{ data.project?.title || "the modpack" }} you want to install
-              on your server.
+        <div v-if="data.upstream" class="flex flex-col gap-2">
+          <div
+            v-if="versionsError || currentVersionError"
+            class="rounded-2xl border border-solid border-red p-4 text-contrast"
+          >
+            <p class="m-0 font-bold">Something went wrong while loading your modpack.</p>
+            <p class="m-0 mb-2 mt-1 text-sm">
+              {{ versionsError || currentVersionError }}
             </p>
-
-            <div class="flex w-full flex-col items-center gap-2">
-              <UiServersTeleportDropdownMenu
-                v-if="versions && Array.isArray(versions) && versions.length > 0"
-                v-model="version"
-                :options="options"
-                placeholder="Change version"
-                name="version"
-                class="w-full max-w-full"
-              />
-              <div class="flex w-full flex-col rounded-2xl bg-table-alternateRow p-4">
-                <div class="flex w-full flex-row items-center justify-between">
-                  <label class="w-full text-lg font-bold text-contrast" for="modpack-hard-reset">
-                    Erase all data
-                  </label>
-                  <input
-                    id="modpack-hard-reset"
-                    :checked="hardReset"
-                    class="switch stylized-toggle shrink-0"
-                    type="checkbox"
-                    @change="hardReset = ($event.target as HTMLInputElement).checked"
-                  />
-                </div>
-                <p>
-                  If enabled, existing mods, worlds, and configurations, will be deleted before
-                  installing the new modpack version.
-                </p>
-                <ButtonStyled :color="isDangerous ? 'red' : 'brand'">
-                  <button
-                    :disabled="
-                      isLoading || (props.server.general?.status === 'installing' && isError)
-                    "
-                    class="ml-auto"
-                    @click="reinstallCurrent"
-                  >
-                    <DownloadIcon class="size-4" />
-                    {{ isDangerous ? "Erase and install" : "Install" }}
-                  </button>
-                </ButtonStyled>
-              </div>
-            </div>
+            <ButtonStyled>
+              <button :disabled="isInstalling" @click="refreshData">Retry</button>
+            </ButtonStyled>
           </div>
+
+          <NewProjectCard
+            v-if="!versionsError && !currentVersionError"
+            class="!cursor-default !bg-bg !filter-none"
+            :project="projectCardData"
+            :categories="data.project?.categories || []"
+          >
+            <template #actions>
+              <ButtonStyled color="brand">
+                <button :disabled="isInstalling" @click="modpackVersionModal.show()">
+                  <SettingsIcon class="size-4" />
+                  Change version
+                </button>
+              </ButtonStyled>
+            </template>
+          </NewProjectCard>
         </div>
         <div v-else class="flex w-full flex-col items-center gap-2 sm:w-fit sm:flex-row">
           <ButtonStyled>
@@ -424,15 +109,11 @@
       <div class="card flex flex-col gap-4">
         <div class="flex flex-col gap-2">
           <h2 class="m-0 text-lg font-bold text-contrast">Platform</h2>
-          <p class="m-0">
-            Your server's platform is the software that runs your server. Different platforms
-            support different mods and plugins.
-          </p>
+          <p class="m-0">Your server's platform is the software that runs mods and plugins.</p>
           <div v-if="data.upstream" class="mt-2 flex items-center gap-2">
             <InfoIcon class="hidden sm:block" />
             <span class="text-sm text-secondary">
-              Your server was installed from a modpack, which automatically chooses the appropriate
-              platform.
+              The current platform was automatically selected based on your modpack.
             </span>
           </div>
         </div>
@@ -440,11 +121,15 @@
           class="flex w-full flex-col gap-1 rounded-2xl"
           :class="{
             'pointer-events-none cursor-not-allowed select-none opacity-50':
-              props.server.general?.status === 'installing' && isError,
+              props.server.general?.status === 'installing',
           }"
           :tabindex="props.server.general?.status === 'installing' ? -1 : 0"
         >
-          <UiServersLoaderSelector :data="data" @select-loader="selectLoader" />
+          <UiServersLoaderSelector
+            :data="data"
+            :is-installing="isInstalling"
+            @select-loader="selectLoader"
+          />
         </div>
       </div>
     </div>
@@ -454,24 +139,11 @@
 </template>
 
 <script setup lang="ts">
-import { ButtonStyled, NewModal } from "@modrinth/ui";
-import {
-  TransferIcon,
-  DownloadIcon,
-  UploadIcon,
-  InfoIcon,
-  RightArrowIcon,
-  XIcon,
-  CompassIcon,
-  DropdownIcon,
-  ServerIcon,
-} from "@modrinth/assets";
+import { ButtonStyled, NewProjectCard } from "@modrinth/ui";
+import { TransferIcon, UploadIcon, InfoIcon, CompassIcon, SettingsIcon } from "@modrinth/assets";
 import type { Server } from "~/composables/pyroServers";
 import type { Loaders } from "~/types/servers";
 
-const route = useNativeRoute();
-const serverId = route.params.id as string;
-
 const props = defineProps<{
   server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
 }>();
@@ -480,526 +152,103 @@ const emit = defineEmits<{
   reinstall: [any?];
 }>();
 
-const tags = useTags();
-
-const isLoading = ref(false);
-
-const hardReset = ref(false);
-const backupServer = ref(false);
-
-const isError = computed(() => props.server.general?.status === "error");
-const isDangerous = computed(() => hardReset.value);
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const isBackupLimited = computed(() => (props.server.backups?.data?.length || 0) >= 15);
-const isBackingUp = ref(false);
-
-const versionStrings = ["forge", "fabric", "quilt", "neo"] as const;
-
-const loaderVersions = (await Promise.all(
-  versionStrings.map(async (loader) => {
-    const runFetch = async (iterations: number) => {
-      if (iterations > 5) {
-        throw new Error("Failed to fetch loader versions");
-      }
-      try {
-        // get our info
-        const res = await $fetch(`/loader-versions?loader=${loader}`);
-        return { [loader]: (res as any).gameVersions };
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      } catch (_) {
-        return await runFetch(iterations + 1);
-      }
-    };
-    try {
-      return await runFetch(0);
-    } catch (e) {
-      console.error(e);
-    }
-  }),
-).then((res) => res.reduce((acc, val) => ({ ...acc, ...val }), {}))) as Record<
-  string,
-  {
-    // eslint-disable-next-line no-template-curly-in-string
-    id: "${modrinth.gameVersion}" | (string & {});
-    stable: boolean;
-    loaders: {
-      id: string;
-      url: string;
-      stable: boolean;
-    }[];
-  }[]
->;
+const isInstalling = computed(() => props.server.general?.status === "installing");
 
 const versionSelectModal = ref();
 const mrpackModal = ref();
-
-const canInstall = computed(() => {
-  const conds =
-    !selectedMCVersion.value ||
-    isLoading.value ||
-    loadingServerCheck.value ||
-    serverCheckError.value.trim().length > 0;
-
-  if (selectedLoader.value.toLowerCase() === "vanilla") {
-    return conds;
-  }
-
-  return conds || !selectedLoaderVersion.value;
-});
-
-const canInstallUpload = computed(() => {
-  const conds =
-    !mrpackFile.value ||
-    isLoading.value ||
-    loadingServerCheck.value ||
-    serverCheckError.value.trim().length > 0;
-
-  return conds;
-});
-
-const mcVersions = tags.value.gameVersions
-  .filter((x) => x.version_type === "release")
-  .map((x) => x.version)
-  .filter((x) => {
-    // const num = parseInt(x.replace(/\./g, ""), 10);
-    // Versions 1.2.4 and below don't have server jars from Mojang
-    // return isNaN(num) || num >= 125;
-    // above code broke singular versions up until 1.24 (ie 1.25 showed)
-    const segment = parseInt(x.split(".")[1], 10);
-    return !isNaN(segment) && segment > 2;
-  });
-
-const selectedLoaderVersions = computed(() => {
-  const loader = selectedLoader.value.toLowerCase();
-
-  if (loader === "paper") {
-    return paperVersions.value[selectedMCVersion.value] || [];
-  }
-
-  if (loader === "purpur") {
-    return purpurVersions.value[selectedMCVersion.value] || [];
-  }
-
-  if (loader === "vanilla") {
-    return [];
-  }
-
-  let apiLoader = loader;
-  if (loader === "neoforge") {
-    apiLoader = "neo";
-  }
-
-  const backwardsCompatibleVersion = loaderVersions[apiLoader]?.find(
-    // eslint-disable-next-line no-template-curly-in-string
-    (x) => x.id === "${modrinth.gameVersion}",
-  );
-
-  if (backwardsCompatibleVersion) {
-    return backwardsCompatibleVersion.loaders.map((x) => x.id);
-  }
-
-  return (
-    loaderVersions[apiLoader]
-      ?.find((x) => x.id === selectedMCVersion.value)
-      ?.loaders.map((x) => x.id) || []
-  );
-});
+const modpackVersionModal = ref();
 
 const data = computed(() => props.server.general);
-watch(
-  () => data.value?.loader,
-  () => {
-    console.log("Loader:", data.value?.loader);
+
+const {
+  data: versions,
+  error: versionsError,
+  refresh: refreshVersions,
+} = await useAsyncData(
+  `content-loader-versions-${data.value?.upstream?.project_id}`,
+  async () => {
+    if (!data.value?.upstream?.project_id) return [];
+    try {
+      const result = await useBaseFetch(`project/${data.value.upstream.project_id}/version`);
+      return result || [];
+    } catch (e) {
+      console.error("couldnt fetch all versions:", e);
+      throw new Error("Failed to load modpack versions.");
+    }
   },
-  {
-    deep: true,
-    immediate: true,
+  { default: () => [] },
+);
+
+const {
+  data: currentVersion,
+  error: currentVersionError,
+  refresh: refreshCurrentVersion,
+} = await useAsyncData(
+  `content-loader-version-${data.value?.upstream?.version_id}`,
+  async () => {
+    if (!data.value?.upstream?.version_id) return null;
+    try {
+      const result = await useBaseFetch(`version/${data.value.upstream.version_id}`);
+      return result || null;
+    } catch (e) {
+      console.error("couldnt fetch version:", e);
+      throw new Error("Failed to load modpack version.");
+    }
   },
+  { default: () => null },
 );
-const { data: versions } = data?.value?.upstream
-  ? await useLazyAsyncData(
-      `content-loader-versions`,
-      () => useBaseFetch(`project/${data?.value?.upstream?.project_id}/version`) as any,
-    )
-  : { data: { value: [] } };
 
-const options = computed(() => (versions?.value as any[]).map((x) => x.version_number));
-const versionIds = computed(() =>
-  (versions?.value as any[]).map((x) => {
-    return { [x.version_number]: x.id };
-  }),
-);
-const version = ref();
-const currentVersion = ref();
-
-const selectedLoader = ref<Loaders>("Vanilla");
-const selectedMCVersion = ref("");
-const selectedLoaderVersion = ref("");
-const isSecondPhase = ref(false);
-
-const updateData = async () => {
-  if (!data.value?.upstream?.version_id) {
-    return;
-  }
-  currentVersion.value = await useBaseFetch(`version/${data?.value?.upstream?.version_id}`);
-  version.value = currentVersion.value.version_number;
-};
-updateData();
-
-const latestVersion = computed(() => {
-  if (!Array.isArray(versions?.value) || versions.value.length === 0) return null;
-  return versions.value.reduce((latest: any, current: any) => {
-    if (!latest) return current;
-    return latest.version_number > current.version_number ? latest : current;
-  }, null);
-});
-
-const hasNewerVersion = computed(() => {
-  if (!currentVersion.value?.version_number || !latestVersion.value?.version_number) return false;
-  return latestVersion.value.version_number > currentVersion.value.version_number;
-});
-
-const handleUpdateToLatest = async () => {
-  if (!latestVersion.value) return;
-
-  version.value = latestVersion.value.version_number;
-  hardReset.value = false;
-  await reinstallCurrent();
-};
-
-const paperVersions = ref<Record<string, number[]>>({});
-const purpurVersions = ref<Record<string, string[]>>({});
-
-const fetchPaperVersions = async (mcVersion: string) => {
-  try {
-    const res = await $fetch(`https://api.papermc.io/v2/projects/paper/versions/${mcVersion}`);
-    paperVersions.value[mcVersion] = (res as any).builds.sort((a: number, b: number) => b - a);
-    return res;
-  } catch (e) {
-    console.error(e);
-    return null;
-  }
-};
-
-const fetchPurpurVersions = async (mcVersion: string) => {
-  try {
-    const res = await $fetch(`https://api.purpurmc.org/v2/purpur/${mcVersion}`);
-    purpurVersions.value[mcVersion] = (res as any).builds.all.sort(
-      (a: string, b: string) => parseInt(b) - parseInt(a),
-    );
-    return res;
-  } catch (e) {
-    console.error(e);
-    return null;
-  }
-};
+const projectCardData = computed(() => ({
+  icon_url: data.value?.project?.icon_url,
+  title: data.value?.project?.title,
+  description: data.value?.project?.description,
+  downloads: data.value?.project?.downloads,
+  follows: data.value?.project?.followers,
+  // @ts-ignore
+  date_modified: currentVersion.value?.date_published || data.value?.project?.updated,
+}));
 
 const selectLoader = (loader: string) => {
-  selectedLoader.value = loader as Loaders;
-  versionSelectModal.value.show();
+  versionSelectModal.value?.show(loader as Loaders);
 };
 
-const loadingServerCheck = ref(false);
-const serverCheckError = ref("");
+const refreshData = async () => {
+  await Promise.all([refreshVersions(), refreshCurrentVersion()]);
+};
 
-const cachedVersions: Record<string, any> = {};
-
-watch(selectedMCVersion, async () => {
-  if (selectedMCVersion.value.trim().length < 3) return;
-
-  isLoading.value = true;
-  loadingServerCheck.value = true;
-
-  try {
-    // Check if Minecraft version exists
-    const mcRes =
-      cachedVersions[selectedMCVersion.value] ||
-      (await $fetch(`/loader-versions?loader=minecraft&version=${selectedMCVersion.value}`));
-
-    cachedVersions[selectedMCVersion.value] = mcRes;
-
-    if (!mcRes.downloads?.server) {
-      serverCheckError.value =
-        "We couldn't find a server.jar for this version. Please pick another one.";
-      return;
-    }
-
-    // Fetch Paper/Purpur versions if needed
-    if (selectedLoader.value.toLowerCase() === "paper") {
-      const paperRes = await fetchPaperVersions(selectedMCVersion.value);
-      if (!paperRes) {
-        serverCheckError.value = "This Minecraft version is not supported by Paper.";
-        return;
-      }
-    }
-
-    if (selectedLoader.value.toLowerCase() === "purpur") {
-      const purpurRes = await fetchPurpurVersions(selectedMCVersion.value);
-      if (!purpurRes) {
-        serverCheckError.value = "This Minecraft version is not supported by Purpur.";
-        return;
-      }
-    }
-
-    serverCheckError.value = "";
-  } catch (error) {
-    console.error(error);
-    serverCheckError.value = "Failed to fetch versions. Please try again.";
-  } finally {
-    loadingServerCheck.value = false;
-    isLoading.value = false;
+const updateAvailable = computed(() => {
+  // so sorry
+  // @ts-ignore
+  if (!data.value?.upstream || !versions.value?.length || !currentVersion.value) {
+    return false;
   }
+
+  // @ts-ignore
+  const latestVersion = versions.value[0];
+  // @ts-ignore
+  return latestVersion.id !== currentVersion.value.id;
 });
 
-const onShow = () => {
-  selectedMCVersion.value = props.server.general?.mc_version || "";
-  selectedLoaderVersion.value = "";
-  hardReset.value = false;
-};
-
-const onHide = () => {
-  hardReset.value = false;
-  backupServer.value = false;
-  isSecondPhase.value = false;
-  serverCheckError.value = "";
-  loadingServerCheck.value = false;
-  isLoading.value = false;
-  mrpackFile.value = null;
-};
-
-const handleReinstallError = (error: any) => {
-  if (error instanceof PyroFetchError && error.statusCode === 429) {
-    addNotification({
-      group: "server",
-      title: "Cannot reinstall server",
-      text: "You are being rate limited. Please try again later.",
-      type: "error",
-    });
-  } else {
-    addNotification({
-      group: "server",
-      title: "Reinstall Failed",
-      text: "An unexpected error occurred while reinstalling. Please try again later.",
-      type: "error",
-    });
-  }
-};
-
-const reinstallCurrent = async () => {
-  const projectId = data.value?.upstream?.project_id;
-  if (!projectId) {
-    throw new Error("Project ID not found");
-  }
-  const resolvedVersionIds = versionIds.value;
-  const versionId = resolvedVersionIds.find((entry: any) => entry[version.value])?.[version.value];
-  try {
-    await props.server.general?.reinstall(
-      serverId,
-      false,
-      projectId,
-      versionId,
-      undefined,
-      hardReset.value,
-    );
-    emit("reinstall");
-  } catch (error) {
-    handleReinstallError(error);
-  }
-};
-
-const handleReinstall = async () => {
-  if (hardReset.value && !backupServer.value && !isSecondPhase.value) {
-    isSecondPhase.value = true;
-    return;
-  }
-
-  if (backupServer.value) {
-    try {
-      const date = new Date();
-      const format = date.toLocaleString(navigator.language || "en-US", {
-        month: "short",
-        day: "numeric",
-        year: "numeric",
-        hour: "numeric",
-        minute: "numeric",
-        second: "numeric",
-        timeZoneName: "short",
-      });
-      const backupName = `Reinstallation - ${format}`;
-      isLoading.value = true;
-      const backupId = (await props.server.backups?.create(backupName)) as unknown as string;
-
-      isBackingUp.value = true;
-
-      let attempts = 0;
-
-      while (true) {
-        attempts += 1;
-
-        if (attempts > 100) {
-          addNotification({
-            group: "server",
-            title: "Backup Failed",
-            text: "An unexpected error occurred while backing up. Please try again later.",
-            type: "error",
-          });
-          isLoading.value = false;
-          return;
-        }
-
-        await props.server.refresh(["backups"]);
-        const backups = await props.server.backups?.data;
-        const backup = backupId ? backups?.find((x) => x.id === backupId) : undefined;
-        if (backup && !backup.ongoing) {
-          console.log("Backup Finished");
-          isBackingUp.value = false;
-          break;
-        }
-        await new Promise((resolve) => setTimeout(resolve, 3000));
-      }
-    } catch {
-      addNotification({
-        group: "server",
-        title: "Backup Failed",
-        text: "An unexpected error occurred while backing up. Please try again later.",
-        type: "error",
-      });
-      isLoading.value = false;
-      return;
+watch(
+  () => props.server.general?.status,
+  async (newStatus, oldStatus) => {
+    if (oldStatus === "installing" && newStatus === "available") {
+      await Promise.all([
+        refreshVersions(),
+        refreshCurrentVersion(),
+        props.server.refresh(["general"]),
+      ]);
     }
-  }
-
-  isLoading.value = true;
-
-  try {
-    await props.server.general?.reinstall(
-      serverId,
-      true,
-      selectedLoader.value,
-      selectedMCVersion.value,
-      selectedLoader.value === "Vanilla" ? "" : selectedLoaderVersion.value,
-      hardReset.value,
-    );
-
-    emit("reinstall", {
-      loader: selectedLoader.value,
-      lVersion: selectedLoaderVersion.value,
-      mVersion: selectedMCVersion.value,
-    });
-
-    await nextTick();
-    window.scrollTo(0, 0);
-  } catch (error) {
-    handleReinstallError(error);
-  } finally {
-    isLoading.value = false;
-    versionSelectModal.value.hide();
-  }
-};
-
-const mrpackFile = ref<File | null>(null);
-
-const uploadMrpack = (event: Event) => {
-  const target = event.target as HTMLInputElement;
-  if (!target.files || target.files.length === 0) {
-    return;
-  }
-  mrpackFile.value = target.files[0];
-};
-
-const handleReinstallUpload = async () => {
-  if (hardReset.value && !backupServer.value && !isSecondPhase.value) {
-    isSecondPhase.value = true;
-    return;
-  }
-
-  if (backupServer.value) {
-    try {
-      const date = new Date();
-      const format = date.toLocaleString(navigator.language || "en-US", {
-        month: "short",
-        day: "numeric",
-        year: "numeric",
-        hour: "numeric",
-        minute: "numeric",
-        second: "numeric",
-        timeZoneName: "short",
-      });
-      const backupName = `Reinstallation - ${format}`;
-      isLoading.value = true;
-      const backupId = (await props.server.backups?.create(backupName)) as unknown as string;
-
-      isBackingUp.value = true;
-
-      let attempts = 0;
-
-      while (true) {
-        attempts += 1;
-
-        if (attempts > 100) {
-          addNotification({
-            group: "server",
-            title: "Backup Failed",
-            text: "An unexpected error occurred while backing up. Please try again later.",
-            type: "error",
-          });
-          isLoading.value = false;
-          return;
-        }
-
-        await props.server.refresh(["backups"]);
-        const backups = await props.server.backups?.data;
-        const backup = backupId ? backups?.find((x) => x.id === backupId) : undefined;
-        if (backup && !backup.ongoing) {
-          console.log("Backup Finished");
-          isBackingUp.value = false;
-          break;
-        }
-        await new Promise((resolve) => setTimeout(resolve, 3000));
-      }
-    } catch {
-      addNotification({
-        group: "server",
-        title: "Backup Failed",
-        text: "An unexpected error occurred while backing up. Please try again later.",
-        type: "error",
-      });
-      isLoading.value = false;
-      return;
-    }
-  }
-
-  isLoading.value = true;
-
-  try {
-    if (!mrpackFile.value) {
-      throw new Error("No mrpack file selected");
-    }
-    const mrpack = new File([mrpackFile.value], mrpackFile.value.name, {
-      type: mrpackFile.value.type,
-    });
-
-    await props.server.general?.reinstallFromMrpack(mrpack, hardReset.value);
-
-    emit("reinstall", {
-      loader: "mrpack",
-      lVersion: "",
-      mVersion: "",
-    });
-
-    await nextTick();
-    window.scrollTo(0, 0);
-  } catch (error) {
-    handleReinstallError(error);
-  } finally {
-    isLoading.value = false;
-    mrpackModal.value.hide();
-  }
-};
+  },
+);
 </script>
 
 <style scoped>
 .stylized-toggle:checked::after {
   background: var(--color-accent-contrast) !important;
 }
+
+.button-base:active {
+  scale: none !important;
+}
 </style>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/network.vue b/apps/frontend/src/pages/servers/manage/[id]/options/network.vue
index 7743fb5ca..c364b1f34 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/network.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/network.vue
@@ -25,7 +25,7 @@
       </form>
     </NewModal>
 
-    <NewModal ref="editAllocationModal" header="Edit Allocation">
+    <NewModal ref="editAllocationModal" header="Edit allocation">
       <form class="flex flex-col gap-2 md:w-[600px]" @submit.prevent="editAllocation">
         <label for="edit-allocation-name" class="font-semibold text-contrast"> Name </label>
         <input
@@ -40,7 +40,7 @@
         <div class="mb-1 mt-4 flex justify-start gap-4">
           <ButtonStyled color="brand">
             <button :disabled="!newAllocationName" type="submit">
-              <SaveIcon /> Update Allocation
+              <SaveIcon /> Update allocation
             </button>
           </ButtonStyled>
           <ButtonStyled>
@@ -59,7 +59,29 @@
     />
 
     <div class="relative h-full w-full overflow-y-auto">
-      <div v-if="data" class="flex h-full w-full flex-col justify-between gap-4">
+      <div
+        v-if="server.network?.error"
+        class="flex w-full flex-col items-center justify-center gap-4 p-4"
+      >
+        <div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
+          <div class="flex flex-col items-center text-center">
+            <div class="flex flex-col items-center gap-4">
+              <div class="grid place-content-center rounded-full bg-bg-orange p-4">
+                <IssuesIcon class="size-12 text-orange" />
+              </div>
+              <h1 class="m-0 mb-2 w-fit text-4xl font-bold">Failed to load network settings</h1>
+            </div>
+            <p class="text-lg text-secondary">
+              We couldn't load your server's network settings. Here's what we know:
+              <span class="break-all font-mono">{{ JSON.stringify(server.network.error) }}</span>
+            </p>
+            <ButtonStyled size="large" color="brand" @click="() => server.refresh(['network'])">
+              <button class="mt-6 !w-full">Retry</button>
+            </ButtonStyled>
+          </div>
+        </div>
+      </div>
+      <div v-else-if="data" class="flex h-full w-full flex-col justify-between gap-4">
         <div class="flex h-full flex-col">
           <!-- Subdomain section -->
           <div class="card flex flex-col gap-4">
@@ -94,7 +116,7 @@
             />
 
             <div
-              class="flex max-w-full flex-none overflow-auto rounded-xl bg-table-alternateRow p-4"
+              class="flex max-w-full flex-none overflow-auto rounded-xl bg-table-alternateRow px-4 py-2"
             >
               <table
                 class="w-full flex-none border-collapse truncate rounded-lg border-2 border-gray-300"
@@ -108,7 +130,7 @@
                         >
                           {{ record.type }}
                         </span>
-                        <span class="text-xs uppercase text-secondary">type</span>
+                        <span class="text-xs text-secondary">Type</span>
                       </div>
                     </td>
                     <td class="w-2/6 py-3 md:w-1/3">
@@ -118,7 +140,7 @@
                         >
                           {{ record.name }}
                         </span>
-                        <span class="text-xs uppercase text-secondary">name</span>
+                        <span class="text-xs text-secondary">Name</span>
                       </div>
                     </td>
                     <td class="w-3/6 py-3 pl-4 md:w-5/12 lg:w-5/12">
@@ -128,7 +150,7 @@
                         >
                           {{ record.content }}
                         </span>
-                        <span class="text-xs uppercase text-secondary">content</span>
+                        <span class="text-xs text-secondary">Content</span>
                       </div>
                     </td>
                   </tr>
@@ -155,7 +177,7 @@
                 </span>
               </div>
 
-              <ButtonStyled type="standard" color="brand" @click="showNewAllocationModal">
+              <ButtonStyled type="standard" @click="showNewAllocationModal">
                 <button class="!w-full sm:!w-auto">
                   <PlusIcon />
                   <span>New allocation</span>
@@ -190,7 +212,7 @@
                       <span class="text-md font-bold tracking-wide text-contrast">
                         {{ allocation.name }}
                       </span>
-                      <span class="hidden text-xs uppercase text-secondary sm:block">name</span>
+                      <span class="hidden text-xs text-secondary sm:block">Name</span>
                     </div>
                     <div class="flex flex-col gap-1">
                       <span
@@ -198,7 +220,7 @@
                       >
                         {{ allocation.port }}
                       </span>
-                      <span class="hidden text-xs uppercase text-secondary sm:block">port</span>
+                      <span class="hidden text-xs text-secondary sm:block">Port</span>
                     </div>
                   </div>
                 </div>
@@ -247,6 +269,7 @@ import {
   SaveIcon,
   InfoIcon,
   UploadIcon,
+  IssuesIcon,
 } from "@modrinth/assets";
 import { ButtonStyled, NewModal, ConfirmModal } from "@modrinth/ui";
 import { ref, computed, nextTick } from "vue";
@@ -286,12 +309,11 @@ const addNewAllocation = async () => {
 
   try {
     await props.server.network?.reserveAllocation(newAllocationName.value);
+    await props.server.refresh(["network"]);
 
     newAllocationModal.value?.hide();
     newAllocationName.value = "";
 
-    await props.server.refresh();
-
     addNotification({
       group: "serverOptions",
       type: "success",
@@ -332,8 +354,8 @@ const confirmDeleteAllocation = async () => {
   if (allocationToDelete.value === null) return;
 
   await props.server.network?.deleteAllocation(allocationToDelete.value);
+  await props.server.refresh(["network"]);
 
-  await props.server.refresh();
   addNotification({
     group: "serverOptions",
     type: "success",
@@ -349,12 +371,11 @@ const editAllocation = async () => {
 
   try {
     await props.server.network?.updateAllocation(newAllocationPort.value, newAllocationName.value);
+    await props.server.refresh(["network"]);
 
     editAllocationModal.value?.hide();
     newAllocationName.value = "";
 
-    await props.server.refresh();
-
     addNotification({
       group: "serverOptions",
       type: "success",
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/preferences.vue b/apps/frontend/src/pages/servers/manage/[id]/options/preferences.vue
index fe1a26f10..83dec554d 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/preferences.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/preferences.vue
@@ -59,6 +59,11 @@ const preferences = {
       "When enabled, RAM will be displayed as bytes instead of a percentage in your server's Overview.",
     implemented: true,
   },
+  hideSubdomainLabel: {
+    displayName: "Hide subdomain label",
+    description: "When enabled, the subdomain label will be hidden from the server header.",
+    implemented: true,
+  },
   autoRestart: {
     displayName: "Auto restart",
     description: "When enabled, your server will automatically restart if it crashes.",
@@ -84,6 +89,7 @@ type UserPreferences = {
 
 const defaultPreferences: UserPreferences = {
   ramAsNumber: false,
+  hideSubdomainLabel: false,
   autoRestart: false,
   powerDontAskAgain: false,
   backupWhileRunning: false,
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/properties.vue b/apps/frontend/src/pages/servers/manage/[id]/options/properties.vue
index 9d8b4d768..e207f493a 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/properties.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/properties.vue
@@ -1,7 +1,27 @@
 <template>
   <div class="relative h-full w-full select-none overflow-y-auto">
+    <div v-if="server.fs?.error" class="flex w-full flex-col items-center justify-center gap-4 p-4">
+      <div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
+        <div class="flex flex-col items-center text-center">
+          <div class="flex flex-col items-center gap-4">
+            <div class="grid place-content-center rounded-full bg-bg-orange p-4">
+              <IssuesIcon class="size-12 text-orange" />
+            </div>
+            <h1 class="m-0 mb-2 w-fit text-4xl font-bold">Failed to load properties</h1>
+          </div>
+          <p class="text-lg text-secondary">
+            We couldn't access your server's properties. Here's what we know:
+            <span class="break-all font-mono">{{ JSON.stringify(server.fs.error) }}</span>
+          </p>
+          <ButtonStyled size="large" color="brand" @click="() => server.refresh(['fs'])">
+            <button class="mt-6 !w-full">Retry</button>
+          </ButtonStyled>
+        </div>
+      </div>
+    </div>
+
     <div
-      v-if="propsData && status === 'success'"
+      v-else-if="propsData && status === 'success'"
       class="flex h-full w-full flex-col justify-between gap-6 overflow-y-auto"
     >
       <div class="card flex flex-col gap-4">
@@ -17,7 +37,7 @@
             >
               Minecraft Wiki
             </NuxtLink>
-            has more detailed information about each property.
+            has more detailed information.
           </div>
         </div>
         <div class="flex flex-col gap-4 rounded-2xl bg-table-alternateRow p-4">
@@ -118,8 +138,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed } from "vue";
-import { EyeIcon, SearchIcon } from "@modrinth/assets";
+import { ref, watch, computed, inject } from "vue";
+import { EyeIcon, SearchIcon, IssuesIcon } from "@modrinth/assets";
 import Fuse from "fuse.js";
 import type { Server } from "~/composables/pyroServers";
 
@@ -134,10 +154,31 @@ const isUpdating = ref(false);
 const searchInput = ref("");
 
 const data = computed(() => props.server.general);
-const { data: propsData, status } = await useAsyncData(
-  "ServerProperties",
-  async () => await props.server.general?.fetchConfigFile("ServerProperties"),
-);
+const modulesLoaded = inject<Promise<void>>("modulesLoaded");
+const { data: propsData, status } = await useAsyncData("ServerProperties", async () => {
+  await modulesLoaded;
+  const rawProps = await props.server.fs?.downloadFile("server.properties");
+  if (!rawProps) return null;
+
+  const properties: Record<string, any> = {};
+  const lines = rawProps.split("\n");
+
+  for (const line of lines) {
+    if (line.startsWith("#") || !line.includes("=")) continue;
+    const [key, ...valueParts] = line.split("=");
+    let value = valueParts.join("=");
+
+    if (value.toLowerCase() === "true" || value.toLowerCase() === "false") {
+      value = value.toLowerCase() === "true";
+    } else if (!isNaN(value as any) && value !== "") {
+      value = Number(value);
+    }
+
+    properties[key.trim()] = value;
+  }
+
+  return properties;
+});
 
 const liveProperties = ref<Record<string, any>>({});
 const originalProperties = ref<Record<string, any>>({});
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue b/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue
index fe2a130fe..99fc09ca5 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue
@@ -1,7 +1,33 @@
 <template>
   <div class="relative h-full w-full">
-    <div v-if="data" class="flex h-full w-full flex-col gap-4">
-      <div class="rounded-2xl border-solid border-orange bg-bg-orange p-4 text-contrast">
+    <div
+      v-if="server.startup?.error"
+      class="flex w-full flex-col items-center justify-center gap-4 p-4"
+    >
+      <div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
+        <div class="flex flex-col items-center text-center">
+          <div class="flex flex-col items-center gap-4">
+            <div class="grid place-content-center rounded-full bg-bg-orange p-4">
+              <IssuesIcon class="size-12 text-orange" />
+            </div>
+            <h1 class="m-0 mb-2 w-fit text-4xl font-bold">Failed to load startup settings</h1>
+          </div>
+          <p class="text-lg text-secondary">
+            We couldn't load your server's startup settings. Here's what we know:
+          </p>
+          <p>
+            <span class="break-all font-mono">{{ JSON.stringify(server.startup.error) }}</span>
+          </p>
+          <ButtonStyled size="large" color="brand" @click="() => server.refresh(['startup'])">
+            <button class="mt-6 !w-full">Retry</button>
+          </ButtonStyled>
+        </div>
+      </div>
+    </div>
+    <div v-else-if="data" class="flex h-full w-full flex-col gap-4">
+      <div
+        class="rounded-2xl border-[1px] border-solid border-orange bg-bg-orange p-4 text-contrast"
+      >
         These settings are for advanced users. Changing them can break your server.
       </div>
 
@@ -35,10 +61,9 @@
             <div class="flex flex-col gap-2">
               <span class="text-lg font-bold text-contrast">Java version</span>
               <span>
-                The version of Java that your server will run on. Your server is running Minecraft
-                {{ data.mc_version }}. By default, only the Java versions compatible with this
-                version of Minecraft are shown. Some mods or modpacks may require a specific Java
-                version.
+                The version of Java that your server will run on. By default, only the Java versions
+                compatible with this version of Minecraft are shown. Some mods may require a
+                different Java version to work properly.
               </span>
             </div>
             <div class="flex items-center gap-2">
@@ -85,7 +110,7 @@
 </template>
 
 <script setup lang="ts">
-import { UpdatedIcon } from "@modrinth/assets";
+import { UpdatedIcon, IssuesIcon } from "@modrinth/assets";
 import { ButtonStyled } from "@modrinth/ui";
 import type { Server } from "~/composables/pyroServers";
 
@@ -110,13 +135,41 @@ const jdkBuildMap = [
   { value: "graal", label: "GraalVM" },
 ];
 
-const invocation = ref(startupSettings.value?.invocation);
-const jdkVersion = ref(
-  jdkVersionMap.find((v) => v.value === startupSettings.value?.jdk_version)?.label || "",
+const invocation = ref("");
+const jdkVersion = ref("");
+const jdkBuild = ref("");
+
+const originalInvocation = ref("");
+const originalJdkVersion = ref("");
+const originalJdkBuild = ref("");
+
+watch(
+  startupSettings,
+  (newSettings) => {
+    if (newSettings) {
+      invocation.value = newSettings.invocation;
+      originalInvocation.value = newSettings.invocation;
+
+      const jdkVersionLabel =
+        jdkVersionMap.find((v) => v.value === newSettings.jdk_version)?.label || "";
+      jdkVersion.value = jdkVersionLabel;
+      originalJdkVersion.value = jdkVersionLabel;
+
+      const jdkBuildLabel = jdkBuildMap.find((v) => v.value === newSettings.jdk_build)?.label || "";
+      jdkBuild.value = jdkBuildLabel;
+      originalJdkBuild.value = jdkBuildLabel;
+    }
+  },
+  { immediate: true },
 );
-const jdkBuild = ref(
-  jdkBuildMap.find((v) => v.value === startupSettings.value?.jdk_build)?.label || "",
+
+const hasUnsavedChanges = computed(
+  () =>
+    invocation.value !== originalInvocation.value ||
+    jdkVersion.value !== originalJdkVersion.value ||
+    jdkBuild.value !== originalJdkBuild.value,
 );
+
 const isUpdating = ref(false);
 
 const compatibleJavaVersions = computed(() => {
@@ -140,15 +193,6 @@ const displayedJavaVersions = computed(() => {
   return showAllVersions.value ? jdkVersionMap.map((v) => v.label) : compatibleJavaVersions.value;
 });
 
-const hasUnsavedChanges = computed(
-  () =>
-    invocation.value !== startupSettings.value?.invocation ||
-    jdkVersion.value !==
-      (jdkVersionMap.find((v) => v.value === startupSettings.value?.jdk_version)?.label || "") ||
-    jdkBuild.value !==
-      jdkBuildMap.find((v) => v.value === startupSettings.value?.jdk_build || "")?.label,
-);
-
 const saveStartup = async () => {
   try {
     isUpdating.value = true;
@@ -156,14 +200,25 @@ const saveStartup = async () => {
     const jdkVersionKey = jdkVersionMap.find((v) => v.label === jdkVersion.value)?.value;
     const jdkBuildKey = jdkBuildMap.find((v) => v.label === jdkBuild.value)?.value;
     await props.server.startup?.update(invocationValue, jdkVersionKey as any, jdkBuildKey as any);
-    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    await new Promise((resolve) => setTimeout(resolve, 10));
+
+    await props.server.refresh(["startup"]);
+
+    if (props.server.startup) {
+      invocation.value = props.server.startup.invocation;
+      jdkVersion.value =
+        jdkVersionMap.find((v) => v.value === props.server.startup?.jdk_version)?.label || "";
+      jdkBuild.value =
+        jdkBuildMap.find((v) => v.value === props.server.startup?.jdk_build)?.label || "";
+    }
+
     addNotification({
       group: "serverOptions",
       type: "success",
       title: "Server settings updated",
       text: "Your server settings were successfully changed.",
     });
-    await props.server.refresh();
   } catch (error) {
     console.error(error);
     addNotification({
@@ -178,15 +233,13 @@ const saveStartup = async () => {
 };
 
 const resetStartup = () => {
-  invocation.value = startupSettings.value?.invocation;
-  jdkVersion.value =
-    jdkVersionMap.find((v) => v.value === startupSettings.value?.jdk_version)?.label || "";
-  jdkBuild.value =
-    jdkBuildMap.find((v) => v.value === startupSettings.value?.jdk_build)?.label || "";
+  invocation.value = originalInvocation.value;
+  jdkVersion.value = originalJdkVersion.value;
+  jdkBuild.value = originalJdkBuild.value;
 };
 
 const resetToDefault = () => {
-  invocation.value = startupSettings.value?.original_invocation;
+  invocation.value = startupSettings.value?.original_invocation ?? "";
 };
 </script>
 
diff --git a/apps/frontend/src/pages/servers/manage/index.vue b/apps/frontend/src/pages/servers/manage/index.vue
index 8281d9188..c3f0cf9db 100644
--- a/apps/frontend/src/pages/servers/manage/index.vue
+++ b/apps/frontend/src/pages/servers/manage/index.vue
@@ -4,44 +4,91 @@
     class="experimental-styles-within relative mx-auto flex min-h-screen w-full max-w-[1280px] flex-col px-6"
   >
     <div
-      v-if="serverList.length > 0 || isPollingForNewServers"
-      class="relative flex h-fit w-full flex-col items-center justify-between md:flex-row"
+      v-if="hasError || fetchError"
+      class="mx-auto flex h-full min-h-[calc(100vh-4rem)] flex-col items-center justify-center gap-4 text-left"
     >
-      <h1 class="w-full text-4xl font-bold text-contrast">Servers</h1>
-      <div class="mb-4 flex w-full flex-row items-center justify-end gap-2 md:mb-0 md:gap-4">
-        <div class="relative w-full text-sm md:w-72">
-          <label class="sr-only" for="search">Search</label>
-          <SearchIcon
-            class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2"
-            aria-hidden="true"
-          />
-          <input
-            id="search"
-            v-model="searchInput"
-            class="w-full border-[1px] border-solid border-button-border pl-9"
-            type="search"
-            name="search"
-            autocomplete="off"
-            placeholder="Search servers..."
-          />
+      <div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
+        <div class="flex flex-col items-center text-center">
+          <div class="flex flex-col items-center gap-4">
+            <div class="grid place-content-center rounded-full bg-bg-blue p-4">
+              <HammerIcon class="size-12 text-blue" />
+            </div>
+            <h1 class="m-0 w-fit text-3xl font-bold">Servers could not be loaded</h1>
+          </div>
+          <p class="text-lg text-secondary">We may have temporary issues with our servers.</p>
+          <ul class="m-0 list-disc space-y-4 p-0 pl-4 text-left text-sm leading-[170%]">
+            <li>
+              Our systems automatically alert our team when there's an issue. We are already working
+              on getting them back online.
+            </li>
+            <li>
+              If you recently purchased your Modrinth Server, it is currently in a queue and will
+              appear here as soon as it's ready. <br />
+              <span class="font-medium text-contrast"
+                >Do not attempt to purchase a new server.</span
+              >
+            </li>
+            <li>
+              If you require personalized support regarding the status of your server, please
+              contact Modrinth Support.
+            </li>
+
+            <li v-if="fetchError" class="text-red">
+              <p>Error details:</p>
+              <UiCopyCode
+                :text="(fetchError as PyroFetchError).message || 'Unknown error'"
+                :copyable="false"
+                :selectable="false"
+                :language="'json'"
+              />
+            </li>
+          </ul>
         </div>
-        <ButtonStyled type="standard">
-          <NuxtLink
-            class="!h-10 whitespace-pre !border-[1px] !border-solid !border-button-border text-sm !font-medium"
-            :to="{ path: '/servers', hash: '#plan' }"
-          >
-            <PlusIcon class="size-4" />
-            New server
-          </NuxtLink>
+        <ButtonStyled size="large" type="standard" color="brand">
+          <a class="mt-6 !w-full" href="https://support.modrinth.com">Contact Modrinth Support</a>
+        </ButtonStyled>
+        <ButtonStyled size="large" @click="() => reloadNuxtApp()">
+          <button class="mt-3 !w-full">Reload</button>
         </ButtonStyled>
       </div>
     </div>
 
     <LazyUiServersServerManageEmptyState
-      v-if="serverList.length === 0 && !isPollingForNewServers"
+      v-else-if="serverList.length === 0 && !isPollingForNewServers && !hasError"
     />
 
     <template v-else>
+      <div class="relative flex h-fit w-full flex-col items-center justify-between md:flex-row">
+        <h1 class="w-full text-4xl font-bold text-contrast">Servers</h1>
+        <div class="mb-4 flex w-full flex-row items-center justify-end gap-2 md:mb-0 md:gap-4">
+          <div class="relative w-full text-sm md:w-72">
+            <label class="sr-only" for="search">Search</label>
+            <SearchIcon
+              class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2"
+              aria-hidden="true"
+            />
+            <input
+              id="search"
+              v-model="searchInput"
+              class="w-full border-[1px] border-solid border-button-border pl-9"
+              type="search"
+              name="search"
+              autocomplete="off"
+              placeholder="Search servers..."
+            />
+          </div>
+          <ButtonStyled type="standard">
+            <NuxtLink
+              class="!h-10 whitespace-pre !border-[1px] !border-solid !border-button-border text-sm !font-medium"
+              :to="{ path: '/servers', hash: '#plan' }"
+            >
+              <PlusIcon class="size-4" />
+              New server
+            </NuxtLink>
+          </ButtonStyled>
+        </div>
+      </div>
+
       <ul v-if="filteredData.length > 0" class="m-0 flex flex-col gap-4 p-0">
         <UiServersServerListing
           v-for="server in filteredData"
@@ -68,10 +115,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from "vue";
+import { ref, computed, onMounted, onUnmounted, watch } from "vue";
 import Fuse from "fuse.js";
-import { PlusIcon, SearchIcon } from "@modrinth/assets";
+import { HammerIcon, PlusIcon, SearchIcon } from "@modrinth/assets";
 import { ButtonStyled } from "@modrinth/ui";
+import { reloadNuxtApp } from "#app";
+import type { PyroFetchError } from "~/composables/pyroFetch";
 import type { Server } from "~/types/servers";
 
 definePageMeta({
@@ -87,21 +136,23 @@ interface ServerResponse {
 }
 
 const route = useRoute();
+const hasError = ref(false);
 const isPollingForNewServers = ref(false);
 
-const { data: serverResponse, refresh } = await useAsyncData<ServerResponse>(
-  "ServerList",
-  async () => {
-    try {
-      const response = await usePyroFetch<{ servers: Server[] }>("servers");
-      return response;
-    } catch {
-      throw new PyroFetchError("Unable to load servers");
-    }
-  },
-);
+const {
+  data: serverResponse,
+  error: fetchError,
+  refresh,
+} = await useAsyncData<ServerResponse>("ServerList", () => usePyroFetch<ServerResponse>("servers"));
 
-const serverList = computed(() => serverResponse.value?.servers || []);
+watch([fetchError, serverResponse], ([error, response]) => {
+  hasError.value = !!error || !response;
+});
+
+const serverList = computed(() => {
+  if (!serverResponse.value) return [];
+  return serverResponse.value.servers;
+});
 
 const searchInput = ref("");
 
diff --git a/apps/frontend/src/pages/settings/billing/charges.vue b/apps/frontend/src/pages/settings/billing/charges.vue
index c1195d2a4..a4c8eddc1 100644
--- a/apps/frontend/src/pages/settings/billing/charges.vue
+++ b/apps/frontend/src/pages/settings/billing/charges.vue
@@ -25,7 +25,7 @@
               </template>
             </span>
             ⋅
-            <span>{{ formatPrice(charge.amount, charge.currency_code) }}</span>
+            <span>{{ formatPrice(vintl.locale, charge.amount, charge.currency_code) }}</span>
           </div>
           <div class="flex items-center gap-1">
             <Badge :color="charge.status === 'succeeded' ? 'green' : 'red'" :type="charge.status" />
@@ -39,6 +39,7 @@
 </template>
 <script setup>
 import { Breadcrumbs, Badge } from "@modrinth/ui";
+import { formatPrice } from "@modrinth/utils";
 import { products } from "~/generated/state.json";
 
 definePageMeta({
@@ -66,19 +67,4 @@ const { data: charges } = await useAsyncData(
     },
   },
 );
-
-// TODO move to omorphia utils , duplicated from index
-function formatPrice(price, currency) {
-  const formatter = new Intl.NumberFormat(vintl.locale, {
-    style: "currency",
-    currency,
-  });
-
-  const maxDigits = formatter.resolvedOptions().maximumFractionDigits;
-
-  const convertedPrice = price / Math.pow(10, maxDigits);
-
-  return formatter.format(convertedPrice);
-}
-console.log(charges);
 </script>
diff --git a/apps/frontend/src/pages/settings/billing/index.vue b/apps/frontend/src/pages/settings/billing/index.vue
index bfba19d51..29e93f7c3 100644
--- a/apps/frontend/src/pages/settings/billing/index.vue
+++ b/apps/frontend/src/pages/settings/billing/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="universal-card">
+  <section class="universal-card experimental-styles-within">
     <h2>{{ formatMessage(messages.subscriptionTitle) }}</h2>
     <p>{{ formatMessage(messages.subscriptionDescription) }}</p>
     <div class="universal-card recessed">
@@ -88,67 +88,69 @@
             v-if="midasCharge && midasCharge.status === 'failed'"
             class="ml-auto flex flex-row-reverse items-center gap-2"
           >
+            <ButtonStyled v-if="midasCharge && midasCharge.status === 'failed'">
+              <button
+                @click="
+                  () => {
+                    $refs.midasPurchaseModal.show();
+                  }
+                "
+              >
+                <UpdatedIcon />
+                Update method
+              </button>
+            </ButtonStyled>
+            <ButtonStyled type="transparent" circular>
+              <OverflowMenu
+                :dropdown-id="`${baseId}-cancel-midas`"
+                :options="[
+                  {
+                    id: 'cancel',
+                    action: () => {
+                      cancelSubscriptionId = midasSubscription.id;
+                      $refs.modalCancel.show();
+                    },
+                  },
+                ]"
+              >
+                <MoreVerticalIcon />
+                <template #cancel><XIcon /> Cancel</template>
+              </OverflowMenu>
+            </ButtonStyled>
+          </div>
+          <ButtonStyled v-else-if="midasCharge && midasCharge.status !== 'cancelled'">
             <button
-              v-if="midasCharge && midasCharge.status === 'failed'"
-              class="iconified-button raised-button"
+              class="ml-auto"
               @click="
                 () => {
-                  purchaseModalStep = 0;
-                  $refs.purchaseModal.show();
+                  cancelSubscriptionId = midasSubscription.id;
+                  $refs.modalCancel.show();
                 }
               "
             >
-              <UpdatedIcon />
-              Update method
+              <XIcon /> Cancel
             </button>
-            <OverflowMenu
-              class="btn icon-only transparent"
-              :options="[
-                {
-                  id: 'cancel',
-                  action: () => {
-                    cancelSubscriptionId = midasSubscription.id;
-                    $refs.modalCancel.show();
-                  },
-                },
-              ]"
-            >
-              <MoreVerticalIcon />
-              <template #cancel><XIcon /> Cancel</template>
-            </OverflowMenu>
-          </div>
-          <button
-            v-else-if="midasCharge && midasCharge.status !== 'cancelled'"
-            class="iconified-button raised-button !ml-auto"
-            @click="
-              () => {
-                cancelSubscriptionId = midasSubscription.id;
-                $refs.modalCancel.show();
-              }
-            "
-          >
-            <XIcon /> Cancel
-          </button>
-          <button
+          </ButtonStyled>
+          <ButtonStyled
             v-else-if="midasCharge && midasCharge.status === 'cancelled'"
-            class="btn btn-purple btn-large ml-auto"
-            @click="cancelSubscription(midasSubscription.id, false)"
+            color="purple"
           >
-            <RightArrowIcon /> Resubscribe
-          </button>
-          <button
-            v-else
-            class="btn btn-purple btn-large ml-auto"
-            @click="
-              () => {
-                purchaseModalStep = 0;
-                $refs.purchaseModal.show();
-              }
-            "
-          >
-            <RightArrowIcon />
-            Subscribe
-          </button>
+            <button class="ml-auto" @click="cancelSubscription(midasSubscription.id, false)">
+              Resubscribe <RightArrowIcon />
+            </button>
+          </ButtonStyled>
+          <ButtonStyled v-else color="purple" size="large">
+            <button
+              class="ml-auto"
+              @click="
+                () => {
+                  $refs.midasPurchaseModal.show();
+                }
+              "
+            >
+              Subscribe <RightArrowIcon />
+            </button>
+          </ButtonStyled>
         </div>
       </div>
     </div>
@@ -282,25 +284,37 @@
                         getPyroCharge(subscription).status !== 'cancelled' &&
                         getPyroCharge(subscription).status !== 'failed'
                       "
-                      type="standard"
-                      @click="showPyroCancelModal(subscription.id)"
                     >
-                      <button class="text-contrast">
+                      <button @click="showPyroCancelModal(subscription.id)">
                         <XIcon />
                         Cancel
                       </button>
                     </ButtonStyled>
+                    <ButtonStyled
+                      v-if="
+                        getPyroCharge(subscription) &&
+                        getPyroCharge(subscription).status !== 'cancelled' &&
+                        getPyroCharge(subscription).status !== 'failed'
+                      "
+                      color="green"
+                      color-fill="text"
+                    >
+                      <button @click="showPyroUpgradeModal(subscription)">
+                        <ArrowBigUpDashIcon />
+                        Upgrade
+                      </button>
+                    </ButtonStyled>
                     <ButtonStyled
                       v-else-if="
                         getPyroCharge(subscription) &&
                         (getPyroCharge(subscription).status === 'cancelled' ||
                           getPyroCharge(subscription).status === 'failed')
                       "
-                      type="standard"
                       color="green"
-                      @click="resubscribePyro(subscription.id)"
                     >
-                      <button class="text-contrast">Resubscribe</button>
+                      <button @click="resubscribePyro(subscription.id)">
+                        Resubscribe <RightArrowIcon />
+                      </button>
                     </ButtonStyled>
                   </div>
                 </div>
@@ -312,7 +326,7 @@
     </div>
   </section>
 
-  <section class="universal-card">
+  <section class="universal-card experimental-styles-within">
     <ConfirmModal
       ref="modal_confirm"
       :title="formatMessage(deleteModalMessages.title)"
@@ -321,7 +335,7 @@
       @proceed="removePaymentMethod(removePaymentMethodIndex)"
     />
     <PurchaseModal
-      ref="purchaseModal"
+      ref="midasPurchaseModal"
       :product="midasProduct"
       :country="country"
       :publishable-key="config.public.stripePublishableKey"
@@ -342,6 +356,38 @@
       :payment-methods="paymentMethods"
       :return-url="`${config.public.siteUrl}/settings/billing`"
     />
+    <PurchaseModal
+      ref="pyroPurchaseModal"
+      :product="upgradeProducts"
+      :country="country"
+      custom-server
+      :existing-subscription="currentSubscription"
+      :existing-plan="currentProduct"
+      :publishable-key="config.public.stripePublishableKey"
+      :send-billing-request="
+        async (body) =>
+          await useBaseFetch(`billing/subscription/${currentSubscription.id}`, {
+            internal: true,
+            method: `PATCH`,
+            body: body,
+          })
+      "
+      :renewal-date="currentSubRenewalDate"
+      :on-error="
+        (err) =>
+          data.$notify({
+            group: 'main',
+            title: 'An error occurred',
+            type: 'error',
+            text: err.message ?? (err.data ? err.data.description : err),
+          })
+      "
+      :fetch-capacity-statuses="fetchCapacityStatuses"
+      :customer="customer"
+      :payment-methods="paymentMethods"
+      :return-url="`${config.public.siteUrl}/servers/manage`"
+      :server-name="`${auth?.user?.username}'s server`"
+    />
     <NewModal ref="addPaymentMethodModal">
       <template #title>
         <span class="text-lg font-extrabold text-contrast">
@@ -359,15 +405,19 @@
           <div id="address-element"></div>
           <div id="payment-element" class="mt-4"></div>
         </div>
-        <div v-show="loadingPaymentMethodModal === 2" class="input-group push-right mt-auto pt-4">
-          <button class="btn" @click="$refs.addPaymentMethodModal.hide()">
-            <XIcon />
-            {{ formatMessage(commonMessages.cancelButton) }}
-          </button>
-          <button class="btn btn-primary" :disabled="loadingAddMethod" @click="submit">
-            <PlusIcon />
-            {{ formatMessage(messages.paymentMethodAdd) }}
-          </button>
+        <div v-show="loadingPaymentMethodModal === 2" class="input-group mt-auto pt-4">
+          <ButtonStyled color="brand">
+            <button :disabled="loadingAddMethod" @click="submit">
+              <PlusIcon />
+              {{ formatMessage(messages.paymentMethodAdd) }}
+            </button>
+          </ButtonStyled>
+          <ButtonStyled>
+            <button @click="$refs.addPaymentMethodModal.hide()">
+              <XIcon />
+              {{ formatMessage(commonMessages.cancelButton) }}
+            </button>
+          </ButtonStyled>
         </div>
       </div>
     </NewModal>
@@ -442,6 +492,7 @@
           </div>
         </div>
         <OverflowMenu
+          :dropdown-id="`${baseId}-payment-method-overflow-${index}`"
           class="btn icon-only transparent"
           :options="
             [
@@ -493,6 +544,7 @@ import {
 } from "@modrinth/ui";
 import {
   PlusIcon,
+  ArrowBigUpDashIcon,
   XIcon,
   CardIcon,
   MoreVerticalIcon,
@@ -515,6 +567,10 @@ definePageMeta({
   middleware: "auth",
 });
 
+const app = useNuxtApp();
+const auth = await useAuth();
+const baseId = useId();
+
 useHead({
   script: [
     {
@@ -704,7 +760,7 @@ const pyroSubscriptions = computed(() => {
   });
 });
 
-const purchaseModal = ref();
+const midasPurchaseModal = ref();
 const country = useUserCountry();
 const price = computed(() =>
   midasProduct.value?.prices?.find((x) => x.currency_code === getCurrency(country.value)),
@@ -896,6 +952,78 @@ const showPyroCancelModal = (subscriptionId) => {
   }
 };
 
+const pyroPurchaseModal = ref();
+const currentSubscription = ref(null);
+const currentProduct = ref(null);
+const upgradeProducts = ref([]);
+upgradeProducts.value.metadata = { type: "pyro" };
+
+const currentSubRenewalDate = ref();
+
+const showPyroUpgradeModal = async (subscription) => {
+  currentSubscription.value = subscription;
+  currentSubRenewalDate.value = getPyroCharge(subscription).due;
+  currentProduct.value = getPyroProduct(subscription);
+  upgradeProducts.value = products.filter(
+    (p) =>
+      p.metadata.type === "pyro" &&
+      (!currentProduct.value || p.metadata.ram > currentProduct.value.metadata.ram),
+  );
+  upgradeProducts.value.metadata = { type: "pyro" };
+
+  await nextTick();
+
+  if (!currentProduct.value) {
+    console.error("Could not find product for current subscription");
+    data.$notify({
+      group: "main",
+      title: "An error occurred",
+      text: "Could not find product for current subscription",
+      type: "error",
+    });
+    return;
+  }
+
+  if (!pyroPurchaseModal.value) {
+    console.error("pyroPurchaseModal ref is undefined");
+    return;
+  }
+
+  pyroPurchaseModal.value.show();
+};
+
+async function fetchCapacityStatuses(serverId, product) {
+  if (product) {
+    try {
+      return {
+        custom: await usePyroFetch(`servers/${serverId}/upgrade-stock`, {
+          method: "POST",
+          body: {
+            cpu: product.metadata.cpu,
+            memory_mb: product.metadata.ram,
+            swap_mb: product.metadata.swap,
+            storage_mb: product.metadata.storage,
+          },
+        }),
+      };
+    } catch (error) {
+      console.error("Error checking server capacities:", error);
+      app.$notify({
+        group: "main",
+        title: "Error checking server capacities",
+        text: error,
+        type: "error",
+      });
+      return {
+        custom: { available: 0 },
+        small: { available: 0 },
+        medium: { available: 0 },
+        large: { available: 0 },
+      };
+    }
+  }
+}
+
 const resubscribePyro = async (subscriptionId) => {
   try {
     await useBaseFetch(`billing/subscription/${subscriptionId}`, {
diff --git a/apps/frontend/src/pages/user/[id].vue b/apps/frontend/src/pages/user/[id].vue
index fe48a8485..01a3f2cbd 100644
--- a/apps/frontend/src/pages/user/[id].vue
+++ b/apps/frontend/src/pages/user/[id].vue
@@ -2,6 +2,57 @@
   <div v-if="user" class="experimental-styles-within">
     <ModalCreation ref="modal_creation" />
     <CollectionCreateModal ref="modal_collection_creation" />
+    <NewModal v-if="auth.user && isStaff(auth.user)" ref="userDetailsModal" header="User details">
+      <div class="flex flex-col gap-3">
+        <div class="flex flex-col gap-1">
+          <span class="text-lg font-bold text-primary">Email</span>
+          <div>
+            <span
+              v-tooltip="user.email_verified ? 'Email verified' : 'Email not verified'"
+              class="flex w-fit items-center gap-1"
+            >
+              <span>{{ user.email }}</span>
+              <CheckIcon v-if="user.email_verified" class="h-4 w-4 text-brand" />
+              <XIcon v-else class="h-4 w-4 text-red" />
+            </span>
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <span class="text-lg font-bold text-primary"> Auth providers </span>
+          <span>{{ user.auth_providers.join(", ") }}</span>
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <span class="text-lg font-bold text-primary"> Payment methods</span>
+          <span>
+            <template v-if="user.payout_data?.paypal_address">
+              Paypal ({{ user.payout_data.paypal_address }} - {{ user.payout_data.paypal_country }})
+            </template>
+            <template v-if="user.payout_data?.paypal_address && user.payout_data?.venmo_address">
+              ,
+            </template>
+            <template v-if="user.payout_data?.venmo_address">
+              Venmo ({{ user.payout_data.venmo_address }})
+            </template>
+          </span>
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <span class="text-lg font-bold text-primary"> Has password </span>
+          <span>
+            {{ user.has_password ? "Yes" : "No" }}
+          </span>
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <span class="text-lg font-bold text-primary"> Has TOTP </span>
+          <span>
+            {{ user.has_totp ? "Yes" : "No" }}
+          </span>
+        </div>
+      </div>
+    </NewModal>
     <div class="new-page sidebar" :class="{ 'alt-layout': cosmetics.leftContentLayout }">
       <div class="normal-page__header py-4">
         <ContentPageHeader>
@@ -74,6 +125,16 @@
                     shown: auth.user?.id !== user.id,
                   },
                   { id: 'copy-id', action: () => copyId() },
+                  {
+                    id: 'open-billing',
+                    action: () => navigateTo(`/admin/billing/${user.id}`),
+                    shown: auth.user && isStaff(auth.user),
+                  },
+                  {
+                    id: 'open-info',
+                    action: () => $refs.userDetailsModal.show(),
+                    shown: auth.user && isStaff(auth.user),
+                  },
                 ]"
                 aria-label="More options"
               >
@@ -90,6 +151,14 @@
                   <ClipboardCopyIcon aria-hidden="true" />
                   {{ formatMessage(commonMessages.copyIdButton) }}
                 </template>
+                <template #open-billing>
+                  <CurrencyIcon aria-hidden="true" />
+                  {{ formatMessage(messages.billingButton) }}
+                </template>
+                <template #open-info>
+                  <InfoIcon aria-hidden="true" />
+                  {{ formatMessage(messages.infoButton) }}
+                </template>
               </OverflowMenu>
             </ButtonStyled>
           </template>
@@ -154,7 +223,9 @@
         </div>
         <div v-if="['collections'].includes(route.params.projectType)" class="collections-grid">
           <nuxt-link
-            v-for="collection in collections"
+            v-for="collection in collections.sort(
+              (a, b) => new Date(b.created) - new Date(a.created),
+            )"
             :key="collection.id"
             :to="`/collection/${collection.id}`"
             class="card collection-item"
@@ -173,7 +244,12 @@
               {{ collection.description }}
             </div>
             <div class="stat-bar">
-              <div class="stats"><BoxIcon /> {{ collection.projects?.length || 0 }} projects</div>
+              <div class="stats">
+                <BoxIcon />
+                {{
+                  `${$formatNumber(collection.projects?.length || 0, false)} project${(collection.projects?.length || 0) !== 1 ? "s" : ""}`
+                }}
+              </div>
               <div class="stats">
                 <template v-if="collection.status === 'listed'">
                   <WorldIcon />
@@ -264,8 +340,18 @@ import {
   DownloadIcon,
   ClipboardCopyIcon,
   MoreVerticalIcon,
+  CurrencyIcon,
+  InfoIcon,
+  CheckIcon,
 } from "@modrinth/assets";
-import { OverflowMenu, ButtonStyled, ContentPageHeader, commonMessages } from "@modrinth/ui";
+import {
+  OverflowMenu,
+  ButtonStyled,
+  ContentPageHeader,
+  commonMessages,
+  NewModal,
+} from "@modrinth/ui";
+import { isStaff } from "~/helpers/users.js";
 import NavTabs from "~/components/ui/NavTabs.vue";
 import ProjectCard from "~/components/ui/ProjectCard.vue";
 import { reportUser } from "~/utils/report-helpers.ts";
@@ -367,6 +453,14 @@ const messages = defineMessages({
     defaultMessage:
       "You don't have any collections.\nWould you like to <create-link>create one</create-link>?",
   },
+  billingButton: {
+    id: "profile.button.billing",
+    defaultMessage: "Manage user billing",
+  },
+  infoButton: {
+    id: "profile.button.info",
+    defaultMessage: "View user details",
+  },
   userNotFoundError: {
     id: "profile.error.not-found",
     defaultMessage: "User not found",
@@ -551,12 +645,13 @@ export default defineNuxtComponent({
     grid-template-columns: repeat(1, 1fr);
   }
 
-  gap: var(--gap-lg);
+  gap: var(--gap-md);
 
   .collection-item {
     display: flex;
     flex-direction: column;
     gap: var(--gap-md);
+    margin-bottom: 0px;
   }
 
   .description {
@@ -605,7 +700,7 @@ export default defineNuxtComponent({
 
       .title {
         color: var(--color-contrast);
-        font-weight: 600;
+        font-weight: 700;
         font-size: var(--font-size-lg);
         margin: 0;
       }
diff --git a/apps/frontend/src/plugins/dayjs.js b/apps/frontend/src/plugins/dayjs.js
index 415328316..a22b6be23 100644
--- a/apps/frontend/src/plugins/dayjs.js
+++ b/apps/frontend/src/plugins/dayjs.js
@@ -1,4 +1,11 @@
 import dayjs from "dayjs";
+import quarterOfYear from "dayjs/plugin/quarterOfYear";
+import advanced from "dayjs/plugin/advancedFormat";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+dayjs.extend(quarterOfYear);
+dayjs.extend(advanced);
+dayjs.extend(relativeTime);
 
 export default defineNuxtPlugin(() => {
   return {
diff --git a/apps/frontend/src/public/earth-outline.png b/apps/frontend/src/public/earth-outline.png
new file mode 100644
index 000000000..fd9a71287
Binary files /dev/null and b/apps/frontend/src/public/earth-outline.png differ
diff --git a/apps/frontend/src/public/promo-frame.html b/apps/frontend/src/public/promo-frame.html
index 43adfb776..2dc4fc32f 100644
--- a/apps/frontend/src/public/promo-frame.html
+++ b/apps/frontend/src/public/promo-frame.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Modrinth App Ad</title>
     <script src="/inmobi.js"></script>
+    <script src="https://cadmus.script.ac/d14pdm1b7fi5kh/script.js"></script>
     <script src="https://dn0qt3r0xannq.cloudfront.net/modrinth-7JfmkEIXEp/modrinth-longform/prebid-load.js"></script>
     <link rel="preload" href="https://www.googletagservices.com/tag/js/gpt.js" as="script" />
     <style>
diff --git a/apps/frontend/src/store/console.ts b/apps/frontend/src/store/console.ts
index 8b901f323..387fb4c63 100644
--- a/apps/frontend/src/store/console.ts
+++ b/apps/frontend/src/store/console.ts
@@ -1,11 +1,13 @@
 import { createGlobalState } from "@vueuse/core";
-import { type Ref, ref } from "vue";
+import { type Ref, shallowRef } from "vue";
 
 /**
  * Maximum number of console output lines to store
  * @type {number}
  */
-const maxLines = 5000;
+const maxLines = 10000;
+const batchTimeout = 300; // ms
+const initialBatchSize = 256;
 
 /**
  * Provides a global console output state management system
@@ -21,7 +23,56 @@ export const usePyroConsole = createGlobalState(() => {
    * Reactive array storing console output lines
    * @type {Ref<string[]>}
    */
-  const output: Ref<string[]> = ref<string[]>([]);
+  const output: Ref<string[]> = shallowRef<string[]>([]);
+  const searchQuery: Ref<string> = shallowRef("");
+  const filteredOutput: Ref<string[]> = shallowRef([]);
+  let searchRegex: RegExp | null = null;
+
+  let lineBuffer: string[] = [];
+  let batchTimer: NodeJS.Timeout | null = null;
+  let isProcessingInitialBatch = false;
+
+  let refilterTimer: NodeJS.Timeout | null = null;
+  const refilterTimeout = 100; // ms
+
+  const updateFilter = () => {
+    if (!searchQuery.value) {
+      filteredOutput.value = [];
+      return;
+    }
+
+    if (!searchRegex) {
+      searchRegex = new RegExp(searchQuery.value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "i");
+    }
+
+    filteredOutput.value = output.value.filter((line) => searchRegex?.test(line) ?? false);
+  };
+
+  const scheduleRefilter = () => {
+    if (refilterTimer) clearTimeout(refilterTimer);
+    refilterTimer = setTimeout(updateFilter, refilterTimeout);
+  };
+
+  const flushBuffer = () => {
+    if (lineBuffer.length === 0) return;
+
+    const processedLines = lineBuffer.flatMap((line) => line.split("\n").filter(Boolean));
+
+    if (isProcessingInitialBatch && processedLines.length >= initialBatchSize) {
+      isProcessingInitialBatch = false;
+      output.value = processedLines.slice(-maxLines);
+    } else {
+      const newOutput = [...output.value, ...processedLines];
+      output.value = newOutput.slice(-maxLines);
+    }
+
+    lineBuffer = [];
+    batchTimer = null;
+
+    if (searchQuery.value) {
+      scheduleRefilter();
+    }
+  };
 
   /**
    * Adds a new output line to the console output
@@ -30,10 +81,10 @@ export const usePyroConsole = createGlobalState(() => {
    * @param {string} line - The console output line to add
    */
   const addLine = (line: string): void => {
-    output.value.push(line);
+    lineBuffer.push(line);
 
-    if (output.value.length > maxLines) {
-      output.value.shift();
+    if (!batchTimer) {
+      batchTimer = setTimeout(flushBuffer, batchTimeout);
     }
   };
 
@@ -45,11 +96,29 @@ export const usePyroConsole = createGlobalState(() => {
    * @returns {void}
    */
   const addLines = (lines: string[]): void => {
-    output.value.push(...lines);
-
-    if (output.value.length > maxLines) {
-      output.value.splice(0, output.value.length - maxLines);
+    if (output.value.length === 0 && lines.length >= initialBatchSize) {
+      isProcessingInitialBatch = true;
+      lineBuffer = lines;
+      flushBuffer();
+      return;
     }
+
+    lineBuffer.push(...lines);
+
+    if (!batchTimer) {
+      batchTimer = setTimeout(flushBuffer, batchTimeout);
+    }
+  };
+
+  /**
+   * Sets the search query and filters the output based on the query
+   *
+   * @param {string} query - The search query
+   */
+  const setSearchQuery = (query: string): void => {
+    searchQuery.value = query;
+    searchRegex = null;
+    updateFilter();
   };
 
   /**
@@ -57,12 +126,39 @@ export const usePyroConsole = createGlobalState(() => {
    */
   const clear = (): void => {
     output.value = [];
+    filteredOutput.value = [];
+    searchQuery.value = "";
+    lineBuffer = [];
+    isProcessingInitialBatch = false;
+    if (batchTimer) {
+      clearTimeout(batchTimer);
+      batchTimer = null;
+    }
+    if (refilterTimer) {
+      clearTimeout(refilterTimer);
+      refilterTimer = null;
+    }
+    searchRegex = null;
+  };
+
+  /**
+   * Finds the index of a line in the main output
+   *
+   * @param {string} line - The line to find
+   * @returns {number} The index of the line, or -1 if not found
+   */
+  const findLineIndex = (line: string): number => {
+    return output.value.findIndex((l) => l === line);
   };
 
   return {
     output,
+    searchQuery,
+    filteredOutput,
     addLine,
     addLines,
+    setSearchQuery,
     clear,
+    findLineIndex,
   };
 });
diff --git a/apps/frontend/src/utils/analytics.js b/apps/frontend/src/utils/analytics.js
index ba0b5b4a1..7963ffad4 100644
--- a/apps/frontend/src/utils/analytics.js
+++ b/apps/frontend/src/utils/analytics.js
@@ -304,13 +304,10 @@ export const useFetchAllAnalytics = (
   projects,
   selectedProjects,
   personalRevenue = false,
+  startDate = ref(dayjs().subtract(30, "days")),
+  endDate = ref(dayjs()),
+  timeResolution = ref(1440),
 ) => {
-  const timeResolution = ref(1440); // 1 day
-  const timeRange = ref(43200); // 30 days
-
-  const startDate = ref(Date.now() - timeRange.value * 60 * 1000);
-  const endDate = ref(Date.now());
-
   const downloadData = ref(null);
   const viewData = ref(null);
   const revenueData = ref(null);
@@ -394,8 +391,8 @@ export const useFetchAllAnalytics = (
     [() => startDate.value, () => endDate.value, () => timeResolution.value, () => projects.value],
     async () => {
       const q = {
-        start_date: dayjs(startDate.value).toISOString(),
-        end_date: dayjs(endDate.value).toISOString(),
+        start_date: startDate.value.toISOString(),
+        end_date: endDate.value.toISOString(),
         resolution_minutes: timeResolution.value,
       };
 
@@ -442,7 +439,6 @@ export const useFetchAllAnalytics = (
   return {
     // Configuration
     timeResolution,
-    timeRange,
 
     startDate,
     endDate,
diff --git a/apps/labrinth/.env b/apps/labrinth/.env
index 640a8964f..1a3359185 100644
--- a/apps/labrinth/.env
+++ b/apps/labrinth/.env
@@ -95,6 +95,7 @@ SENDY_API_KEY=none
 
 ANALYTICS_ALLOWED_ORIGINS='["http://127.0.0.1:3000", "http://localhost:3000", "https://modrinth.com", "https://www.modrinth.com", "*"]'
 
+CLICKHOUSE_REPLICATED=false
 CLICKHOUSE_URL=http://localhost:8123
 CLICKHOUSE_USER=default
 CLICKHOUSE_PASSWORD=
@@ -115,4 +116,6 @@ BREX_API_URL=https://platform.brexapis.com/v2/
 BREX_API_KEY=none
 
 DELPHI_URL=none
-DELPHI_SLACK_WEBHOOK=none
\ No newline at end of file
+DELPHI_SLACK_WEBHOOK=none
+
+ARCHON_URL=none
\ No newline at end of file
diff --git a/apps/labrinth/.sqlx/query-0379424a41b12db94c7734086fca5b96c8cdfe0a9f9c00e5c67e6b95a33c8c6b.json b/apps/labrinth/.sqlx/query-0379424a41b12db94c7734086fca5b96c8cdfe0a9f9c00e5c67e6b95a33c8c6b.json
deleted file mode 100644
index d3188818e..000000000
--- a/apps/labrinth/.sqlx/query-0379424a41b12db94c7734086fca5b96c8cdfe0a9f9c00e5c67e6b95a33c8c6b.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "db_name": "PostgreSQL",
-  "query": "\n        SELECT SUM(amount)\n        FROM payouts_values\n        WHERE user_id = $1 AND date_available > NOW()\n        ",
-  "describe": {
-    "columns": [
-      {
-        "ordinal": 0,
-        "name": "sum",
-        "type_info": "Numeric"
-      }
-    ],
-    "parameters": {
-      "Left": [
-        "Int8"
-      ]
-    },
-    "nullable": [
-      null
-    ]
-  },
-  "hash": "0379424a41b12db94c7734086fca5b96c8cdfe0a9f9c00e5c67e6b95a33c8c6b"
-}
diff --git a/apps/labrinth/.sqlx/query-0a31f7b04f4b68c556bdbfe373ef7945741f915d4ae657363fe67db46e8bd4cf.json b/apps/labrinth/.sqlx/query-0a31f7b04f4b68c556bdbfe373ef7945741f915d4ae657363fe67db46e8bd4cf.json
deleted file mode 100644
index 07ef85af5..000000000
--- a/apps/labrinth/.sqlx/query-0a31f7b04f4b68c556bdbfe373ef7945741f915d4ae657363fe67db46e8bd4cf.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "db_name": "PostgreSQL",
-  "query": "\n        SELECT SUM(amount)\n        FROM payouts_values\n        WHERE user_id = $1 AND date_available <= NOW()\n        ",
-  "describe": {
-    "columns": [
-      {
-        "ordinal": 0,
-        "name": "sum",
-        "type_info": "Numeric"
-      }
-    ],
-    "parameters": {
-      "Left": [
-        "Int8"
-      ]
-    },
-    "nullable": [
-      null
-    ]
-  },
-  "hash": "0a31f7b04f4b68c556bdbfe373ef7945741f915d4ae657363fe67db46e8bd4cf"
-}
diff --git a/apps/labrinth/.sqlx/query-11344e920ea606504c2fdc3c5a3cb1b1e990def66cf260cb5d648cab72cc34f1.json b/apps/labrinth/.sqlx/query-11344e920ea606504c2fdc3c5a3cb1b1e990def66cf260cb5d648cab72cc34f1.json
new file mode 100644
index 000000000..5948a9568
--- /dev/null
+++ b/apps/labrinth/.sqlx/query-11344e920ea606504c2fdc3c5a3cb1b1e990def66cf260cb5d648cab72cc34f1.json
@@ -0,0 +1,15 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "\n            UPDATE team_members\n            SET\n                is_owner = TRUE,\n                accepted = TRUE,\n                permissions = $2,\n                organization_permissions = NULL,\n                role = 'Inherited Owner'\n            WHERE (id = $1)\n            ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Left": [
+        "Int8",
+        "Int8"
+      ]
+    },
+    "nullable": []
+  },
+  "hash": "11344e920ea606504c2fdc3c5a3cb1b1e990def66cf260cb5d648cab72cc34f1"
+}
diff --git a/apps/labrinth/.sqlx/query-2b097a9a1b24b9648d3558e348c7d8cd467e589504c6e754f1f6836203946590.json b/apps/labrinth/.sqlx/query-2b097a9a1b24b9648d3558e348c7d8cd467e589504c6e754f1f6836203946590.json
deleted file mode 100644
index 1ccb38543..000000000
--- a/apps/labrinth/.sqlx/query-2b097a9a1b24b9648d3558e348c7d8cd467e589504c6e754f1f6836203946590.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "db_name": "PostgreSQL",
-  "query": "\n            SELECT u.id \n            FROM team_members\n            INNER JOIN users u ON u.id = team_members.user_id\n            WHERE team_id = $1 AND is_owner = TRUE\n            ",
-  "describe": {
-    "columns": [
-      {
-        "ordinal": 0,
-        "name": "id",
-        "type_info": "Int8"
-      }
-    ],
-    "parameters": {
-      "Left": [
-        "Int8"
-      ]
-    },
-    "nullable": [
-      false
-    ]
-  },
-  "hash": "2b097a9a1b24b9648d3558e348c7d8cd467e589504c6e754f1f6836203946590"
-}
diff --git a/apps/labrinth/.sqlx/query-527291243eb3684e956d7d49c579857ce857ff462c830dd0cb74574f415d4105.json b/apps/labrinth/.sqlx/query-527291243eb3684e956d7d49c579857ce857ff462c830dd0cb74574f415d4105.json
new file mode 100644
index 000000000..28d1860e5
--- /dev/null
+++ b/apps/labrinth/.sqlx/query-527291243eb3684e956d7d49c579857ce857ff462c830dd0cb74574f415d4105.json
@@ -0,0 +1,15 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "\n                    DELETE FROM version_fields\n                    WHERE version_id = $1\n                    AND field_id = ANY($2)\n                    ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Left": [
+        "Int8",
+        "Int4Array"
+      ]
+    },
+    "nullable": []
+  },
+  "hash": "527291243eb3684e956d7d49c579857ce857ff462c830dd0cb74574f415d4105"
+}
diff --git a/apps/labrinth/.sqlx/query-58fbda9daed27c5c466849a944ab3df193679cef17e8588ac3be79978b60bdab.json b/apps/labrinth/.sqlx/query-58fbda9daed27c5c466849a944ab3df193679cef17e8588ac3be79978b60bdab.json
new file mode 100644
index 000000000..22e0f6006
--- /dev/null
+++ b/apps/labrinth/.sqlx/query-58fbda9daed27c5c466849a944ab3df193679cef17e8588ac3be79978b60bdab.json
@@ -0,0 +1,28 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "\n        SELECT date_available, SUM(amount) sum\n        FROM payouts_values\n        WHERE user_id = $1\n        GROUP BY date_available\n        ORDER BY date_available DESC\n        ",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "date_available",
+        "type_info": "Timestamptz"
+      },
+      {
+        "ordinal": 1,
+        "name": "sum",
+        "type_info": "Numeric"
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "Int8"
+      ]
+    },
+    "nullable": [
+      false,
+      null
+    ]
+  },
+  "hash": "58fbda9daed27c5c466849a944ab3df193679cef17e8588ac3be79978b60bdab"
+}
diff --git a/apps/labrinth/.sqlx/query-68619337ef34b588af21a40e5a60b54ce3a1dad45fb50bbc24a3ea34d2506578.json b/apps/labrinth/.sqlx/query-68619337ef34b588af21a40e5a60b54ce3a1dad45fb50bbc24a3ea34d2506578.json
new file mode 100644
index 000000000..f24e4b06f
--- /dev/null
+++ b/apps/labrinth/.sqlx/query-68619337ef34b588af21a40e5a60b54ce3a1dad45fb50bbc24a3ea34d2506578.json
@@ -0,0 +1,22 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "\n        SELECT id FROM users\n        WHERE LOWER(email) = LOWER($1)\n        ",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "id",
+        "type_info": "Int8"
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "Text"
+      ]
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "68619337ef34b588af21a40e5a60b54ce3a1dad45fb50bbc24a3ea34d2506578"
+}
diff --git a/apps/labrinth/.sqlx/query-933606e1ee3cd9a33e57eaf507ee8b7f966e8d3de5aaafadfe7ae30c12c925d2.json b/apps/labrinth/.sqlx/query-693194307c5c557b4e1e45d6b259057c8fa7b988e29261e29f5e66507dd96e59.json
similarity index 79%
rename from apps/labrinth/.sqlx/query-933606e1ee3cd9a33e57eaf507ee8b7f966e8d3de5aaafadfe7ae30c12c925d2.json
rename to apps/labrinth/.sqlx/query-693194307c5c557b4e1e45d6b259057c8fa7b988e29261e29f5e66507dd96e59.json
index 7a8f24adc..2a0c5bba7 100644
--- a/apps/labrinth/.sqlx/query-933606e1ee3cd9a33e57eaf507ee8b7f966e8d3de5aaafadfe7ae30c12c925d2.json
+++ b/apps/labrinth/.sqlx/query-693194307c5c557b4e1e45d6b259057c8fa7b988e29261e29f5e66507dd96e59.json
@@ -1,6 +1,6 @@
 {
   "db_name": "PostgreSQL",
-  "query": "\n            INSERT INTO charges (id, user_id, price_id, amount, currency_code, charge_type, status, due, last_attempt, subscription_id, subscription_interval, payment_platform, payment_platform_id, parent_charge_id, net)\n            VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15)\n            ON CONFLICT (id)\n            DO UPDATE\n                SET status = EXCLUDED.status,\n                    last_attempt = EXCLUDED.last_attempt,\n                    due = EXCLUDED.due,\n                    subscription_id = EXCLUDED.subscription_id,\n                    subscription_interval = EXCLUDED.subscription_interval,\n                    payment_platform = EXCLUDED.payment_platform,\n                    payment_platform_id = EXCLUDED.payment_platform_id,\n                    parent_charge_id = EXCLUDED.parent_charge_id,\n                    net = EXCLUDED.net\n            ",
+  "query": "\n            INSERT INTO charges (id, user_id, price_id, amount, currency_code, charge_type, status, due, last_attempt, subscription_id, subscription_interval, payment_platform, payment_platform_id, parent_charge_id, net)\n            VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15)\n            ON CONFLICT (id)\n            DO UPDATE\n                SET status = EXCLUDED.status,\n                    last_attempt = EXCLUDED.last_attempt,\n                    due = EXCLUDED.due,\n                    subscription_id = EXCLUDED.subscription_id,\n                    subscription_interval = EXCLUDED.subscription_interval,\n                    payment_platform = EXCLUDED.payment_platform,\n                    payment_platform_id = EXCLUDED.payment_platform_id,\n                    parent_charge_id = EXCLUDED.parent_charge_id,\n                    net = EXCLUDED.net,\n                    price_id = EXCLUDED.price_id,\n                    amount = EXCLUDED.amount,\n                    currency_code = EXCLUDED.currency_code,\n                    charge_type = EXCLUDED.charge_type\n            ",
   "describe": {
     "columns": [],
     "parameters": {
@@ -24,5 +24,5 @@
     },
     "nullable": []
   },
-  "hash": "933606e1ee3cd9a33e57eaf507ee8b7f966e8d3de5aaafadfe7ae30c12c925d2"
+  "hash": "693194307c5c557b4e1e45d6b259057c8fa7b988e29261e29f5e66507dd96e59"
 }
diff --git a/apps/labrinth/.sqlx/query-96ebe21d1430779e88dcaf8872a8c939b3889f91df9a0e404d4c63d466869fe5.json b/apps/labrinth/.sqlx/query-96ebe21d1430779e88dcaf8872a8c939b3889f91df9a0e404d4c63d466869fe5.json
new file mode 100644
index 000000000..ac570f7b7
--- /dev/null
+++ b/apps/labrinth/.sqlx/query-96ebe21d1430779e88dcaf8872a8c939b3889f91df9a0e404d4c63d466869fe5.json
@@ -0,0 +1,22 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "\n            SELECT u.id\n            FROM team_members\n            INNER JOIN users u ON u.id = team_members.user_id\n            WHERE team_id = $1 AND is_owner = TRUE\n            ",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "id",
+        "type_info": "Int8"
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "Int8"
+      ]
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "96ebe21d1430779e88dcaf8872a8c939b3889f91df9a0e404d4c63d466869fe5"
+}
diff --git a/apps/labrinth/.sqlx/query-acd2e72610008d4fe240cdfadc1c70c997443f7319a5c535df967d56d24bd54a.json b/apps/labrinth/.sqlx/query-acd2e72610008d4fe240cdfadc1c70c997443f7319a5c535df967d56d24bd54a.json
deleted file mode 100644
index a80e8a365..000000000
--- a/apps/labrinth/.sqlx/query-acd2e72610008d4fe240cdfadc1c70c997443f7319a5c535df967d56d24bd54a.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "db_name": "PostgreSQL",
-  "query": "\n                    DELETE FROM version_fields \n                    WHERE version_id = $1\n                    AND field_id = ANY($2)\n                    ",
-  "describe": {
-    "columns": [],
-    "parameters": {
-      "Left": [
-        "Int8",
-        "Int4Array"
-      ]
-    },
-    "nullable": []
-  },
-  "hash": "acd2e72610008d4fe240cdfadc1c70c997443f7319a5c535df967d56d24bd54a"
-}
diff --git a/apps/labrinth/.sqlx/query-f899b378fad8fcfa1ebf527146b565b7c4466205e0bfd84f299123329926fe3f.json b/apps/labrinth/.sqlx/query-bcbcac3c0b2b2b0327577d3095fa744ab42f7f1dcd2b7f3c3dace12b899b3f38.json
similarity index 73%
rename from apps/labrinth/.sqlx/query-f899b378fad8fcfa1ebf527146b565b7c4466205e0bfd84f299123329926fe3f.json
rename to apps/labrinth/.sqlx/query-bcbcac3c0b2b2b0327577d3095fa744ab42f7f1dcd2b7f3c3dace12b899b3f38.json
index 3adb97d48..1de75299c 100644
--- a/apps/labrinth/.sqlx/query-f899b378fad8fcfa1ebf527146b565b7c4466205e0bfd84f299123329926fe3f.json
+++ b/apps/labrinth/.sqlx/query-bcbcac3c0b2b2b0327577d3095fa744ab42f7f1dcd2b7f3c3dace12b899b3f38.json
@@ -1,6 +1,6 @@
 {
   "db_name": "PostgreSQL",
-  "query": "\n            INSERT INTO mods (\n                id, team_id, name, summary, description,\n                published, downloads, icon_url, raw_icon_url, status, requested_status,\n                license_url, license,\n                slug, color, monetization_status, organization_id\n            )\n            VALUES (\n                $1, $2, $3, $4, $5, $6, \n                $7, $8, $9, $10, $11,\n                $12, $13,\n                LOWER($14), $15, $16, $17\n            )\n            ",
+  "query": "\n            INSERT INTO mods (\n                id, team_id, name, summary, description,\n                published, downloads, icon_url, raw_icon_url, status, requested_status,\n                license_url, license,\n                slug, color, monetization_status, organization_id\n            )\n            VALUES (\n                $1, $2, $3, $4, $5, $6,\n                $7, $8, $9, $10, $11,\n                $12, $13,\n                LOWER($14), $15, $16, $17\n            )\n            ",
   "describe": {
     "columns": [],
     "parameters": {
@@ -26,5 +26,5 @@
     },
     "nullable": []
   },
-  "hash": "f899b378fad8fcfa1ebf527146b565b7c4466205e0bfd84f299123329926fe3f"
+  "hash": "bcbcac3c0b2b2b0327577d3095fa744ab42f7f1dcd2b7f3c3dace12b899b3f38"
 }
diff --git a/apps/labrinth/.sqlx/query-dc64653d72645b76e42a1834124ce3f9225c5b6b8b941812167b3b7002bfdb2a.json b/apps/labrinth/.sqlx/query-dc64653d72645b76e42a1834124ce3f9225c5b6b8b941812167b3b7002bfdb2a.json
deleted file mode 100644
index e1051cee0..000000000
--- a/apps/labrinth/.sqlx/query-dc64653d72645b76e42a1834124ce3f9225c5b6b8b941812167b3b7002bfdb2a.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "db_name": "PostgreSQL",
-  "query": "\n            UPDATE team_members\n            SET \n                is_owner = TRUE,\n                accepted = TRUE,\n                permissions = $2,\n                organization_permissions = NULL,\n                role = 'Inherited Owner'\n            WHERE (id = $1)\n            ",
-  "describe": {
-    "columns": [],
-    "parameters": {
-      "Left": [
-        "Int8",
-        "Int8"
-      ]
-    },
-    "nullable": []
-  },
-  "hash": "dc64653d72645b76e42a1834124ce3f9225c5b6b8b941812167b3b7002bfdb2a"
-}
diff --git a/apps/labrinth/Cargo.toml b/apps/labrinth/Cargo.toml
index 376045a0a..584b8b935 100644
--- a/apps/labrinth/Cargo.toml
+++ b/apps/labrinth/Cargo.toml
@@ -17,9 +17,15 @@ actix-multipart = "0.6.1"
 actix-cors = "0.7.0"
 actix-ws = "0.3.0"
 actix-files = "0.6.5"
-actix-web-prom = { version = "0.8.0", features = ["process"] }
+prometheus = "0.13.4"
+actix-web-prom = { version = "0.9.0", features = ["process"] }
 governor = "0.6.3"
 
+tracing = "0.1.41"
+tracing-subscriber = "0.3.19"
+tracing-actix-web = "0.7.16"
+console-subscriber = "0.4.1"
+
 tokio = { version = "1.35.1", features = ["sync"] }
 tokio-stream = "0.1.14"
 
@@ -36,8 +42,10 @@ reqwest = { version = "0.11.18", features = ["json", "multipart"] }
 hyper = { version = "0.14", features = ["full"] }
 hyper-tls = "0.5.0"
 
-serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
+serde_bytes = "0.11"
+serde_json = "1.0"
+serde_cbor = "0.11"
 serde_with = "3.0.0"
 chrono = { version = "0.4.26", features = ["serde"] }
 yaserde = "0.12.0"
@@ -71,9 +79,8 @@ censor = "0.3.0"
 spdx = { version = "0.10.3", features = ["text"] }
 
 dotenvy = "0.15.7"
-log = "0.4.20"
-env_logger = "0.10.1"
 thiserror = "1.0.56"
+either = "1.13"
 
 sqlx = { version = "0.8.2", features = [
     "runtime-tokio-rustls",
@@ -118,14 +125,16 @@ lettre = "0.11.3"
 derive-new = "0.6.0"
 rust_iso3166 = "0.1.11"
 
-jemallocator = { version = "0.5.4", optional = true }
-
 async-stripe = { version = "0.39.1", features = ["runtime-tokio-hyper-rustls"] }
 rusty-money = "0.4.1"
 json-patch = "*"
 
+ariadne = { path = "../../packages/ariadne" }
+
+[target.'cfg(not(target_env = "msvc"))'.dependencies]
+tikv-jemallocator = { version = "0.6.0", features = ["profiling", "unprefixed_malloc_on_supported_platforms"] }
+tikv-jemalloc-ctl = { version = "0.6.0", features = ["stats"] }
+jemalloc_pprof = { version = "0.7.0", features = ["flamegraph"] }
+
 [dev-dependencies]
 actix-http = "3.4.0"
-
-[features]
-jemalloc = ["jemallocator"]
diff --git a/apps/labrinth/Dockerfile b/apps/labrinth/Dockerfile
index 851579f78..688b34921 100644
--- a/apps/labrinth/Dockerfile
+++ b/apps/labrinth/Dockerfile
@@ -3,7 +3,9 @@ ENV PKG_CONFIG_ALLOW_CROSS=1
 
 WORKDIR /usr/src/labrinth
 COPY . .
-RUN cargo build --release
+ENV SQLX_OFFLINE=true
+COPY apps/labrinth/.sqlx/ .sqlx/
+RUN cargo build --release --package labrinth
 
 
 FROM debian:bookworm-slim
@@ -13,15 +15,16 @@ LABEL org.opencontainers.image.description="Modrinth API"
 LABEL org.opencontainers.image.licenses=AGPL-3.0
 
 RUN apt-get update \
- && apt-get install -y --no-install-recommends ca-certificates openssl \
- && apt-get clean \
- && rm -rf /var/lib/apt/lists/*
+  && apt-get install -y --no-install-recommends ca-certificates openssl dumb-init \
+  && apt-get clean \
+  && rm -rf /var/lib/apt/lists/*
 
 RUN update-ca-certificates
 
 COPY --from=build /usr/src/labrinth/target/release/labrinth /labrinth/labrinth
-COPY --from=build /usr/src/labrinth/migrations/* /labrinth/migrations/
-COPY --from=build /usr/src/labrinth/assets /labrinth/assets
+COPY --from=build /usr/src/labrinth/apps/labrinth/migrations/* /labrinth/migrations/
+COPY --from=build /usr/src/labrinth/apps/labrinth/assets /labrinth/assets
 WORKDIR /labrinth
 
-CMD /labrinth/labrinth
\ No newline at end of file
+ENTRYPOINT ["dumb-init", "--"]
+CMD ["/labrinth/labrinth"]
diff --git a/apps/labrinth/src/auth/mod.rs b/apps/labrinth/src/auth/mod.rs
index 30eca4d15..9b969caa5 100644
--- a/apps/labrinth/src/auth/mod.rs
+++ b/apps/labrinth/src/auth/mod.rs
@@ -34,7 +34,7 @@ pub enum AuthenticationError {
     #[error("Error uploading user profile picture")]
     FileHosting(#[from] FileHostingError),
     #[error("Error while decoding PAT: {0}")]
-    Decoding(#[from] crate::models::ids::DecodingError),
+    Decoding(#[from] ariadne::ids::DecodingError),
     #[error("{0}")]
     Mail(#[from] email::MailError),
     #[error("Invalid Authentication Credentials")]
diff --git a/apps/labrinth/src/auth/oauth/errors.rs b/apps/labrinth/src/auth/oauth/errors.rs
index dab6ff850..af1d253ee 100644
--- a/apps/labrinth/src/auth/oauth/errors.rs
+++ b/apps/labrinth/src/auth/oauth/errors.rs
@@ -1,9 +1,9 @@
 use super::ValidatedRedirectUri;
 use crate::auth::AuthenticationError;
 use crate::models::error::ApiError;
-use crate::models::ids::DecodingError;
 use actix_web::http::{header::LOCATION, StatusCode};
 use actix_web::HttpResponse;
+use ariadne::ids::DecodingError;
 
 #[derive(thiserror::Error, Debug)]
 #[error("{}", .error_type)]
diff --git a/apps/labrinth/src/clickhouse/mod.rs b/apps/labrinth/src/clickhouse/mod.rs
index f74daa6a0..c896a1266 100644
--- a/apps/labrinth/src/clickhouse/mod.rs
+++ b/apps/labrinth/src/clickhouse/mod.rs
@@ -35,10 +35,24 @@ pub async fn init_client_with_database(
         .execute()
         .await?;
 
+    let clickhouse_replicated =
+        dotenvy::var("CLICKHOUSE_REPLICATED").unwrap() == "true";
+    let cluster_line = if clickhouse_replicated {
+        "ON cluster '{cluster}'"
+    } else {
+        ""
+    };
+
+    let engine = if clickhouse_replicated {
+        "ReplicatedMergeTree('/clickhouse/{installation}/{cluster}/tables/{shard}/{database}/{table}', '{replica}')"
+    } else {
+        "MergeTree()"
+    };
+
     client
         .query(&format!(
             "
-            CREATE TABLE IF NOT EXISTS {database}.views
+            CREATE TABLE IF NOT EXISTS {database}.views {cluster_line}
             (
                 recorded DateTime64(4),
                 domain String,
@@ -53,8 +67,9 @@ pub async fn init_client_with_database(
                 user_agent String,
                 headers Array(Tuple(String, String))
             )
-            ENGINE = MergeTree()
+            ENGINE = {engine}
             PRIMARY KEY (project_id, recorded, ip)
+            SETTINGS index_granularity = 8192
             "
         ))
         .execute()
@@ -63,7 +78,7 @@ pub async fn init_client_with_database(
     client
         .query(&format!(
             "
-            CREATE TABLE IF NOT EXISTS {database}.downloads
+            CREATE TABLE IF NOT EXISTS {database}.downloads {cluster_line}
             (
                 recorded DateTime64(4),
                 domain String,
@@ -78,8 +93,9 @@ pub async fn init_client_with_database(
                 user_agent String,
                 headers Array(Tuple(String, String))
             )
-            ENGINE = MergeTree()
+            ENGINE = {engine}
             PRIMARY KEY (project_id, recorded, ip)
+            SETTINGS index_granularity = 8192
             "
         ))
         .execute()
@@ -88,7 +104,7 @@ pub async fn init_client_with_database(
     client
         .query(&format!(
             "
-            CREATE TABLE IF NOT EXISTS {database}.playtime
+            CREATE TABLE IF NOT EXISTS {database}.playtime {cluster_line}
             (
                 recorded DateTime64(4),
                 seconds UInt64,
@@ -101,8 +117,9 @@ pub async fn init_client_with_database(
                 game_version String,
                 parent UInt64
             )
-            ENGINE = MergeTree()
+            ENGINE = {engine}
             PRIMARY KEY (project_id, recorded, user_id)
+            SETTINGS index_granularity = 8192
             "
         ))
         .execute()
diff --git a/apps/labrinth/src/database/mod.rs b/apps/labrinth/src/database/mod.rs
index 2bba7dca6..a1c51f2a5 100644
--- a/apps/labrinth/src/database/mod.rs
+++ b/apps/labrinth/src/database/mod.rs
@@ -6,3 +6,4 @@ pub use models::Project;
 pub use models::Version;
 pub use postgres_database::check_for_migrations;
 pub use postgres_database::connect;
+pub use postgres_database::register_and_set_metrics;
diff --git a/apps/labrinth/src/database/models/charge_item.rs b/apps/labrinth/src/database/models/charge_item.rs
index 382e8280c..8a9884075 100644
--- a/apps/labrinth/src/database/models/charge_item.rs
+++ b/apps/labrinth/src/database/models/charge_item.rs
@@ -115,7 +115,11 @@ impl ChargeItem {
                     payment_platform = EXCLUDED.payment_platform,
                     payment_platform_id = EXCLUDED.payment_platform_id,
                     parent_charge_id = EXCLUDED.parent_charge_id,
-                    net = EXCLUDED.net
+                    net = EXCLUDED.net,
+                    price_id = EXCLUDED.price_id,
+                    amount = EXCLUDED.amount,
+                    currency_code = EXCLUDED.currency_code,
+                    charge_type = EXCLUDED.charge_type
             "#,
             self.id.0,
             self.user_id.0,
diff --git a/apps/labrinth/src/database/models/ids.rs b/apps/labrinth/src/database/models/ids.rs
index aa1b99895..9c730a719 100644
--- a/apps/labrinth/src/database/models/ids.rs
+++ b/apps/labrinth/src/database/models/ids.rs
@@ -1,6 +1,6 @@
 use super::DatabaseError;
-use crate::models::ids::base62_impl::to_base62;
-use crate::models::ids::{random_base62_rng, random_base62_rng_range};
+use ariadne::ids::base62_impl::to_base62;
+use ariadne::ids::{random_base62_rng, random_base62_rng_range};
 use censor::Censor;
 use rand::SeedableRng;
 use rand_chacha::ChaCha20Rng;
diff --git a/apps/labrinth/src/database/models/loader_fields.rs b/apps/labrinth/src/database/models/loader_fields.rs
index 70c74150e..8d10dacbd 100644
--- a/apps/labrinth/src/database/models/loader_fields.rs
+++ b/apps/labrinth/src/database/models/loader_fields.rs
@@ -757,7 +757,7 @@ impl VersionField {
                     l.field_id.0,
                     l.version_id.0,
                     l.int_value,
-                    l.enum_value.as_ref().map(|e| e.0),
+                    l.enum_value.as_ref().map(|e| e.0).unwrap_or(-1),
                     l.string_value.clone(),
                 )
             })
@@ -772,7 +772,7 @@ impl VersionField {
                 &version_ids[..],
                 &int_values[..] as &[Option<i32>],
                 &string_values[..] as &[Option<String>],
-                &enum_values[..] as &[Option<i32>]
+                &enum_values[..] as &[i32]
             )
             .execute(&mut **transaction)
             .await?;
diff --git a/apps/labrinth/src/database/models/organization_item.rs b/apps/labrinth/src/database/models/organization_item.rs
index b01052776..32c779f56 100644
--- a/apps/labrinth/src/database/models/organization_item.rs
+++ b/apps/labrinth/src/database/models/organization_item.rs
@@ -1,6 +1,5 @@
-use crate::{
-    database::redis::RedisPool, models::ids::base62_impl::parse_base62,
-};
+use crate::database::redis::RedisPool;
+use ariadne::ids::base62_impl::parse_base62;
 use dashmap::DashMap;
 use futures::TryStreamExt;
 use std::fmt::{Debug, Display};
diff --git a/apps/labrinth/src/database/models/pat_item.rs b/apps/labrinth/src/database/models/pat_item.rs
index 205a70e4b..f389cce9d 100644
--- a/apps/labrinth/src/database/models/pat_item.rs
+++ b/apps/labrinth/src/database/models/pat_item.rs
@@ -1,8 +1,8 @@
 use super::ids::*;
 use crate::database::models::DatabaseError;
 use crate::database::redis::RedisPool;
-use crate::models::ids::base62_impl::parse_base62;
 use crate::models::pats::Scopes;
+use ariadne::ids::base62_impl::parse_base62;
 use chrono::{DateTime, Utc};
 use dashmap::DashMap;
 use futures::TryStreamExt;
diff --git a/apps/labrinth/src/database/models/project_item.rs b/apps/labrinth/src/database/models/project_item.rs
index f7f3ab9ca..e2ca25221 100644
--- a/apps/labrinth/src/database/models/project_item.rs
+++ b/apps/labrinth/src/database/models/project_item.rs
@@ -6,8 +6,8 @@ use super::{ids::*, User};
 use crate::database::models;
 use crate::database::models::DatabaseError;
 use crate::database::redis::RedisPool;
-use crate::models::ids::base62_impl::parse_base62;
 use crate::models::projects::{MonetizationStatus, ProjectStatus};
+use ariadne::ids::base62_impl::parse_base62;
 use chrono::{DateTime, Utc};
 use dashmap::{DashMap, DashSet};
 use futures::TryStreamExt;
@@ -300,7 +300,7 @@ impl Project {
                 slug, color, monetization_status, organization_id
             )
             VALUES (
-                $1, $2, $3, $4, $5, $6, 
+                $1, $2, $3, $4, $5, $6,
                 $7, $8, $9, $10, $11,
                 $12, $13,
                 LOWER($14), $15, $16, $17
diff --git a/apps/labrinth/src/database/models/session_item.rs b/apps/labrinth/src/database/models/session_item.rs
index adb1659ea..57fd42cee 100644
--- a/apps/labrinth/src/database/models/session_item.rs
+++ b/apps/labrinth/src/database/models/session_item.rs
@@ -1,7 +1,7 @@
 use super::ids::*;
 use crate::database::models::DatabaseError;
 use crate::database::redis::RedisPool;
-use crate::models::ids::base62_impl::parse_base62;
+use ariadne::ids::base62_impl::parse_base62;
 use chrono::{DateTime, Utc};
 use dashmap::DashMap;
 use serde::{Deserialize, Serialize};
diff --git a/apps/labrinth/src/database/models/user_item.rs b/apps/labrinth/src/database/models/user_item.rs
index b42fc4651..a231c2c63 100644
--- a/apps/labrinth/src/database/models/user_item.rs
+++ b/apps/labrinth/src/database/models/user_item.rs
@@ -3,8 +3,8 @@ use super::{CollectionId, ReportId, ThreadId};
 use crate::database::models;
 use crate::database::models::{DatabaseError, OrganizationId};
 use crate::database::redis::RedisPool;
-use crate::models::ids::base62_impl::{parse_base62, to_base62};
 use crate::models::users::Badges;
+use ariadne::ids::base62_impl::{parse_base62, to_base62};
 use chrono::{DateTime, Utc};
 use dashmap::DashMap;
 use serde::{Deserialize, Serialize};
diff --git a/apps/labrinth/src/database/postgres_database.rs b/apps/labrinth/src/database/postgres_database.rs
index 65601bde9..3ace44dfe 100644
--- a/apps/labrinth/src/database/postgres_database.rs
+++ b/apps/labrinth/src/database/postgres_database.rs
@@ -1,8 +1,9 @@
-use log::info;
+use prometheus::{IntGauge, Registry};
 use sqlx::migrate::MigrateDatabase;
 use sqlx::postgres::{PgPool, PgPoolOptions};
 use sqlx::{Connection, PgConnection, Postgres};
 use std::time::Duration;
+use tracing::info;
 
 pub async fn connect() -> Result<PgPool, sqlx::Error> {
     info!("Initializing database connection");
@@ -45,3 +46,30 @@ pub async fn check_for_migrations() -> Result<(), sqlx::Error> {
 
     Ok(())
 }
+
+pub async fn register_and_set_metrics(
+    pool: &PgPool,
+    registry: &Registry,
+) -> Result<(), prometheus::Error> {
+    let pg_pool_size =
+        IntGauge::new("labrinth_pg_pool_size", "Size of Postgres pool")?;
+    let pg_pool_idle = IntGauge::new(
+        "labrinth_pg_pool_idle",
+        "Number of idle Postgres connections",
+    )?;
+
+    registry.register(Box::new(pg_pool_size.clone()))?;
+    registry.register(Box::new(pg_pool_idle.clone()))?;
+
+    let pool_ref = pool.clone();
+    tokio::spawn(async move {
+        loop {
+            pg_pool_size.set(pool_ref.size() as i64);
+            pg_pool_idle.set(pool_ref.num_idle() as i64);
+
+            tokio::time::sleep(Duration::from_secs(5)).await;
+        }
+    });
+
+    Ok(())
+}
diff --git a/apps/labrinth/src/database/redis.rs b/apps/labrinth/src/database/redis.rs
index cc59ffef7..3fe92a53d 100644
--- a/apps/labrinth/src/database/redis.rs
+++ b/apps/labrinth/src/database/redis.rs
@@ -1,8 +1,9 @@
 use super::models::DatabaseError;
-use crate::models::ids::base62_impl::{parse_base62, to_base62};
+use ariadne::ids::base62_impl::{parse_base62, to_base62};
 use chrono::{TimeZone, Utc};
 use dashmap::DashMap;
 use deadpool_redis::{Config, Runtime};
+use prometheus::{IntGauge, Registry};
 use redis::{cmd, Cmd, ExistenceCheck, SetExpiry, SetOptions};
 use serde::de::DeserializeOwned;
 use serde::{Deserialize, Serialize};
@@ -38,7 +39,7 @@ impl RedisPool {
         .builder()
         .expect("Error building Redis pool")
         .max_size(
-            dotenvy::var("DATABASE_MAX_CONNECTIONS")
+            dotenvy::var("REDIS_MAX_CONNECTIONS")
                 .ok()
                 .and_then(|x| x.parse().ok())
                 .unwrap_or(10000),
@@ -53,6 +54,48 @@ impl RedisPool {
         }
     }
 
+    pub async fn register_and_set_metrics(
+        &self,
+        registry: &Registry,
+    ) -> Result<(), prometheus::Error> {
+        let redis_max_size = IntGauge::new(
+            "labrinth_redis_pool_max_size",
+            "Maximum size of Redis pool",
+        )?;
+        let redis_size = IntGauge::new(
+            "labrinth_redis_pool_size",
+            "Current size of Redis pool",
+        )?;
+        let redis_available = IntGauge::new(
+            "labrinth_redis_pool_available",
+            "Available connections in Redis pool",
+        )?;
+        let redis_waiting = IntGauge::new(
+            "labrinth_redis_pool_waiting",
+            "Number of futures waiting for a Redis connection",
+        )?;
+
+        registry.register(Box::new(redis_max_size.clone()))?;
+        registry.register(Box::new(redis_size.clone()))?;
+        registry.register(Box::new(redis_available.clone()))?;
+        registry.register(Box::new(redis_waiting.clone()))?;
+
+        let redis_pool_ref = self.pool.clone();
+        tokio::spawn(async move {
+            loop {
+                let status = redis_pool_ref.status();
+                redis_max_size.set(status.max_size as i64);
+                redis_size.set(status.size as i64);
+                redis_available.set(status.available as i64);
+                redis_waiting.set(status.waiting as i64);
+
+                tokio::time::sleep(Duration::from_secs(5)).await;
+            }
+        });
+
+        Ok(())
+    }
+
     pub async fn connect(&self) -> Result<RedisConnection, DatabaseError> {
         Ok(RedisConnection {
             connection: self.pool.get().await?,
diff --git a/apps/labrinth/src/lib.rs b/apps/labrinth/src/lib.rs
index db1416a71..bfaf95d81 100644
--- a/apps/labrinth/src/lib.rs
+++ b/apps/labrinth/src/lib.rs
@@ -4,12 +4,12 @@ use std::time::Duration;
 
 use actix_web::web;
 use database::redis::RedisPool;
-use log::{info, warn};
 use queue::{
     analytics::AnalyticsQueue, payouts::PayoutsQueue, session::AuthQueue,
     socket::ActiveSockets,
 };
 use sqlx::Postgres;
+use tracing::{info, warn};
 
 extern crate clickhouse as clickhouse_crate;
 use clickhouse_crate::Client;
@@ -297,7 +297,7 @@ pub fn app_setup(
     }
 
     let ip_salt = Pepper {
-        pepper: models::ids::Base62Id(models::ids::random_base62(11))
+        pepper: ariadne::ids::Base62Id(ariadne::ids::random_base62(11))
             .to_string(),
     };
 
@@ -352,6 +352,13 @@ pub fn app_config(
     .app_data(labrinth_config.active_sockets.clone())
     .app_data(labrinth_config.automated_moderation_queue.clone())
     .app_data(web::Data::new(labrinth_config.stripe_client.clone()))
+    .configure(
+        #[allow(unused_variables)]
+        |cfg| {
+            #[cfg(not(target_env = "msvc"))]
+            routes::debug::config(cfg)
+        },
+    )
     .configure(routes::v2::config)
     .configure(routes::v3::config)
     .configure(routes::internal::config)
@@ -473,6 +480,7 @@ pub fn check_env_vars() -> bool {
         failed |= true;
     }
 
+    failed |= check_var::<bool>("CLICKHOUSE_REPLICATED");
     failed |= check_var::<String>("CLICKHOUSE_URL");
     failed |= check_var::<String>("CLICKHOUSE_USER");
     failed |= check_var::<String>("CLICKHOUSE_PASSWORD");
@@ -494,5 +502,7 @@ pub fn check_env_vars() -> bool {
 
     failed |= check_var::<String>("DELPHI_URL");
 
+    failed |= check_var::<String>("ARCHON_URL");
+
     failed
 }
diff --git a/apps/labrinth/src/main.rs b/apps/labrinth/src/main.rs
index 6be1aebcf..e6058eed6 100644
--- a/apps/labrinth/src/main.rs
+++ b/apps/labrinth/src/main.rs
@@ -1,17 +1,22 @@
 use actix_web::{App, HttpServer};
 use actix_web_prom::PrometheusMetricsBuilder;
-use env_logger::Env;
 use labrinth::database::redis::RedisPool;
 use labrinth::file_hosting::S3Host;
 use labrinth::search;
 use labrinth::util::ratelimit::RateLimit;
 use labrinth::{check_env_vars, clickhouse, database, file_hosting, queue};
-use log::{error, info};
 use std::sync::Arc;
+use tracing::{error, info};
+use tracing_actix_web::TracingLogger;
 
-#[cfg(feature = "jemalloc")]
+#[cfg(not(target_env = "msvc"))]
 #[global_allocator]
-static ALLOC: jemallocator::Jemalloc = jemallocator::Jemalloc;
+static ALLOC: tikv_jemallocator::Jemalloc = tikv_jemallocator::Jemalloc;
+
+#[allow(non_upper_case_globals)]
+#[export_name = "malloc_conf"]
+pub static malloc_conf: &[u8] =
+    b"prof:true,prof_active:true,lg_prof_sample:19\0";
 
 #[derive(Clone)]
 pub struct Pepper {
@@ -21,8 +26,7 @@ pub struct Pepper {
 #[actix_rt::main]
 async fn main() -> std::io::Result<()> {
     dotenvy::dotenv().ok();
-    env_logger::Builder::from_env(Env::default().default_filter_or("info"))
-        .init();
+    console_subscriber::init();
 
     if check_env_vars() {
         error!("Some environment variables are missing!");
@@ -92,10 +96,25 @@ async fn main() -> std::io::Result<()> {
 
     let prometheus = PrometheusMetricsBuilder::new("labrinth")
         .endpoint("/metrics")
+        .exclude_regex(r"^/api/v1/.*$")
+        .exclude_regex(r"^/maven/.*$")
         .exclude("/_internal/launcher_socket")
+        .mask_unmatched_patterns("UNKNOWN")
         .build()
         .expect("Failed to create prometheus metrics middleware");
 
+    database::register_and_set_metrics(&pool, &prometheus.registry)
+        .await
+        .expect("Failed to register database metrics");
+    redis_pool
+        .register_and_set_metrics(&prometheus.registry)
+        .await
+        .expect("Failed to register redis metrics");
+
+    #[cfg(not(target_env = "msvc"))]
+    labrinth::routes::debug::jemalloc_mmeory_stats(&prometheus.registry)
+        .expect("Failed to register jemalloc metrics");
+
     let search_config = search::SearchConfig::new(None);
 
     let labrinth_config = labrinth::app_setup(
@@ -112,6 +131,7 @@ async fn main() -> std::io::Result<()> {
     // Init App
     HttpServer::new(move || {
         App::new()
+            .wrap(TracingLogger::default())
             .wrap(prometheus.clone())
             .wrap(RateLimit(Arc::clone(&labrinth_config.rate_limiter)))
             .wrap(actix_web::middleware::Compress::default())
diff --git a/apps/labrinth/src/models/v3/billing.rs b/apps/labrinth/src/models/v3/billing.rs
index 058c97314..ade642d1e 100644
--- a/apps/labrinth/src/models/v3/billing.rs
+++ b/apps/labrinth/src/models/v3/billing.rs
@@ -161,7 +161,7 @@ pub struct Charge {
     pub id: ChargeId,
     pub user_id: UserId,
     pub price_id: ProductPriceId,
-    pub amount: u64,
+    pub amount: i64,
     pub currency_code: String,
     pub status: ChargeStatus,
     pub due: DateTime<Utc>,
@@ -171,9 +171,12 @@ pub struct Charge {
     pub subscription_id: Option<UserSubscriptionId>,
     pub subscription_interval: Option<PriceDuration>,
     pub platform: PaymentPlatform,
+
+    pub parent_charge_id: Option<ChargeId>,
+    pub net: Option<i64>,
 }
 
-#[derive(Serialize, Deserialize, Debug)]
+#[derive(Serialize, Deserialize, Debug, Copy, Clone, PartialEq, Eq)]
 #[serde(tag = "type", rename_all = "kebab-case")]
 pub enum ChargeType {
     OneTime,
diff --git a/apps/labrinth/src/models/v3/ids.rs b/apps/labrinth/src/models/v3/ids.rs
index d6530af2f..033bfdc03 100644
--- a/apps/labrinth/src/models/v3/ids.rs
+++ b/apps/labrinth/src/models/v3/ids.rs
@@ -12,118 +12,14 @@ pub use super::sessions::SessionId;
 pub use super::teams::TeamId;
 pub use super::threads::ThreadId;
 pub use super::threads::ThreadMessageId;
-pub use super::users::UserId;
 pub use crate::models::billing::{
     ChargeId, ProductId, ProductPriceId, UserSubscriptionId,
 };
-use thiserror::Error;
+use ariadne::ids::base62_id_impl;
+pub use ariadne::ids::Base62Id;
+pub use ariadne::users::UserId;
 
-/// Generates a random 64 bit integer that is exactly `n` characters
-/// long when encoded as base62.
-///
-/// Uses `rand`'s thread rng on every call.
-///
-/// # Panics
-///
-/// This method panics if `n` is 0 or greater than 11, since a `u64`
-/// can only represent up to 11 character base62 strings
-#[inline]
-pub fn random_base62(n: usize) -> u64 {
-    random_base62_rng(&mut rand::thread_rng(), n)
-}
-
-/// Generates a random 64 bit integer that is exactly `n` characters
-/// long when encoded as base62, using the given rng.
-///
-/// # Panics
-///
-/// This method panics if `n` is 0 or greater than 11, since a `u64`
-/// can only represent up to 11 character base62 strings
-pub fn random_base62_rng<R: rand::RngCore>(rng: &mut R, n: usize) -> u64 {
-    random_base62_rng_range(rng, n, n)
-}
-
-pub fn random_base62_rng_range<R: rand::RngCore>(
-    rng: &mut R,
-    n_min: usize,
-    n_max: usize,
-) -> u64 {
-    use rand::Rng;
-    assert!(n_min > 0 && n_max <= 11 && n_min <= n_max);
-    // gen_range is [low, high): max value is `MULTIPLES[n] - 1`,
-    // which is n characters long when encoded
-    rng.gen_range(MULTIPLES[n_min - 1]..MULTIPLES[n_max])
-}
-
-const MULTIPLES: [u64; 12] = [
-    1,
-    62,
-    62 * 62,
-    62 * 62 * 62,
-    62 * 62 * 62 * 62,
-    62 * 62 * 62 * 62 * 62,
-    62 * 62 * 62 * 62 * 62 * 62,
-    62 * 62 * 62 * 62 * 62 * 62 * 62,
-    62 * 62 * 62 * 62 * 62 * 62 * 62 * 62,
-    62 * 62 * 62 * 62 * 62 * 62 * 62 * 62 * 62,
-    62 * 62 * 62 * 62 * 62 * 62 * 62 * 62 * 62 * 62,
-    u64::MAX,
-];
-
-/// An ID encoded as base62 for use in the API.
-///
-/// All ids should be random and encode to 8-10 character base62 strings,
-/// to avoid enumeration and other attacks.
-#[derive(Copy, Clone, PartialEq, Eq)]
-pub struct Base62Id(pub u64);
-
-/// An error decoding a number from base62.
-#[derive(Error, Debug)]
-pub enum DecodingError {
-    /// Encountered a non-base62 character in a base62 string
-    #[error("Invalid character {0:?} in base62 encoding")]
-    InvalidBase62(char),
-    /// Encountered integer overflow when decoding a base62 id.
-    #[error("Base62 decoding overflowed")]
-    Overflow,
-}
-
-macro_rules! from_base62id {
-    ($($struct:ty, $con:expr;)+) => {
-        $(
-            impl From<Base62Id> for $struct {
-                fn from(id: Base62Id) -> $struct {
-                    $con(id.0)
-                }
-            }
-            impl From<$struct> for Base62Id {
-                fn from(id: $struct) -> Base62Id {
-                    Base62Id(id.0)
-                }
-            }
-        )+
-    };
-}
-
-macro_rules! impl_base62_display {
-    ($struct:ty) => {
-        impl std::fmt::Display for $struct {
-            fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-                f.write_str(&base62_impl::to_base62(self.0))
-            }
-        }
-    };
-}
-impl_base62_display!(Base62Id);
-
-macro_rules! base62_id_impl {
-    ($struct:ty, $cons:expr) => {
-        from_base62id!($struct, $cons;);
-        impl_base62_display!($struct);
-    }
-}
 base62_id_impl!(ProjectId, ProjectId);
-base62_id_impl!(UserId, UserId);
 base62_id_impl!(VersionId, VersionId);
 base62_id_impl!(CollectionId, CollectionId);
 base62_id_impl!(TeamId, TeamId);
@@ -143,91 +39,3 @@ base62_id_impl!(ProductId, ProductId);
 base62_id_impl!(ProductPriceId, ProductPriceId);
 base62_id_impl!(UserSubscriptionId, UserSubscriptionId);
 base62_id_impl!(ChargeId, ChargeId);
-
-pub mod base62_impl {
-    use serde::de::{self, Deserializer, Visitor};
-    use serde::ser::Serializer;
-    use serde::{Deserialize, Serialize};
-
-    use super::{Base62Id, DecodingError};
-
-    impl<'de> Deserialize<'de> for Base62Id {
-        fn deserialize<D>(deserializer: D) -> Result<Self, D::Error>
-        where
-            D: Deserializer<'de>,
-        {
-            struct Base62Visitor;
-
-            impl Visitor<'_> for Base62Visitor {
-                type Value = Base62Id;
-
-                fn expecting(
-                    &self,
-                    formatter: &mut std::fmt::Formatter,
-                ) -> std::fmt::Result {
-                    formatter.write_str("a base62 string id")
-                }
-
-                fn visit_str<E>(self, string: &str) -> Result<Base62Id, E>
-                where
-                    E: de::Error,
-                {
-                    parse_base62(string).map(Base62Id).map_err(E::custom)
-                }
-            }
-
-            deserializer.deserialize_str(Base62Visitor)
-        }
-    }
-
-    impl Serialize for Base62Id {
-        fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
-        where
-            S: Serializer,
-        {
-            serializer.serialize_str(&to_base62(self.0))
-        }
-    }
-
-    const BASE62_CHARS: [u8; 62] =
-        *b"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
-
-    pub fn to_base62(mut num: u64) -> String {
-        let length = (num as f64).log(62.0).ceil() as usize;
-        let mut output = String::with_capacity(length);
-
-        while num > 0 {
-            // Could be done more efficiently, but requires byte
-            // manipulation of strings & Vec<u8> -> String conversion
-            output.insert(0, BASE62_CHARS[(num % 62) as usize] as char);
-            num /= 62;
-        }
-        output
-    }
-
-    pub fn parse_base62(string: &str) -> Result<u64, DecodingError> {
-        let mut num: u64 = 0;
-        for c in string.chars() {
-            let next_digit;
-            if c.is_ascii_digit() {
-                next_digit = (c as u8 - b'0') as u64;
-            } else if c.is_ascii_uppercase() {
-                next_digit = 10 + (c as u8 - b'A') as u64;
-            } else if c.is_ascii_lowercase() {
-                next_digit = 36 + (c as u8 - b'a') as u64;
-            } else {
-                return Err(DecodingError::InvalidBase62(c));
-            }
-
-            // We don't want this panicking or wrapping on integer overflow
-            if let Some(n) =
-                num.checked_mul(62).and_then(|n| n.checked_add(next_digit))
-            {
-                num = n;
-            } else {
-                return Err(DecodingError::Overflow);
-            }
-        }
-        Ok(num)
-    }
-}
diff --git a/apps/labrinth/src/models/v3/notifications.rs b/apps/labrinth/src/models/v3/notifications.rs
index 2d0813102..e47375afc 100644
--- a/apps/labrinth/src/models/v3/notifications.rs
+++ b/apps/labrinth/src/models/v3/notifications.rs
@@ -178,7 +178,7 @@ impl From<DBNotification> for Notification {
                     name.clone(),
                     text.clone(),
                     link.clone(),
-                    actions.clone().into_iter().map(Into::into).collect(),
+                    actions.clone().into_iter().collect(),
                 ),
                 NotificationBody::Unknown => {
                     ("".to_string(), "".to_string(), "#".to_string(), vec![])
diff --git a/apps/labrinth/src/models/v3/users.rs b/apps/labrinth/src/models/v3/users.rs
index 9bffd442f..0c44fa09c 100644
--- a/apps/labrinth/src/models/v3/users.rs
+++ b/apps/labrinth/src/models/v3/users.rs
@@ -1,14 +1,9 @@
-use super::ids::Base62Id;
 use crate::{auth::AuthProvider, bitflags_serde_impl};
+pub use ariadne::users::{UserId, UserStatus};
 use chrono::{DateTime, Utc};
 use rust_decimal::Decimal;
 use serde::{Deserialize, Serialize};
 
-#[derive(Copy, Clone, PartialEq, Eq, Serialize, Deserialize, Debug, Hash)]
-#[serde(from = "Base62Id")]
-#[serde(into = "Base62Id")]
-pub struct UserId(pub u64);
-
 pub const DELETED_USER: UserId = UserId(127155982985829);
 
 bitflags::bitflags! {
@@ -211,10 +206,3 @@ impl UserFriend {
         }
     }
 }
-
-#[derive(Serialize, Deserialize, Clone)]
-pub struct UserStatus {
-    pub user_id: UserId,
-    pub profile_name: Option<String>,
-    pub last_update: DateTime<Utc>,
-}
diff --git a/apps/labrinth/src/queue/maxmind.rs b/apps/labrinth/src/queue/maxmind.rs
index e551a8ca4..30a83d1ec 100644
--- a/apps/labrinth/src/queue/maxmind.rs
+++ b/apps/labrinth/src/queue/maxmind.rs
@@ -1,10 +1,10 @@
 use flate2::read::GzDecoder;
-use log::warn;
 use maxminddb::geoip2::Country;
 use std::io::{Cursor, Read};
 use std::net::Ipv6Addr;
 use tar::Archive;
 use tokio::sync::RwLock;
+use tracing::warn;
 
 pub struct MaxMindIndexer {
     pub reader: RwLock<Option<maxminddb::Reader<Vec<u8>>>>,
diff --git a/apps/labrinth/src/queue/socket.rs b/apps/labrinth/src/queue/socket.rs
index c39c16b8c..f11d477ed 100644
--- a/apps/labrinth/src/queue/socket.rs
+++ b/apps/labrinth/src/queue/socket.rs
@@ -1,16 +1,68 @@
 //! "Database" for Hydra
+
 use crate::models::users::{UserId, UserStatus};
 use actix_ws::Session;
-use dashmap::DashMap;
+use dashmap::{DashMap, DashSet};
+use std::sync::atomic::AtomicU32;
+use uuid::Uuid;
+
+pub type SocketId = u32;
 
 pub struct ActiveSockets {
-    pub auth_sockets: DashMap<UserId, (UserStatus, Session)>,
+    pub sockets: DashMap<SocketId, ActiveSocket>,
+    pub sockets_by_user_id: DashMap<UserId, DashSet<SocketId>>,
+    pub next_socket_id: AtomicU32,
+    pub tunnel_sockets: DashMap<Uuid, TunnelSocket>,
 }
 
 impl Default for ActiveSockets {
     fn default() -> Self {
         Self {
-            auth_sockets: DashMap::new(),
+            sockets: DashMap::new(),
+            sockets_by_user_id: DashMap::new(),
+            next_socket_id: AtomicU32::new(0),
+            tunnel_sockets: DashMap::new(),
         }
     }
 }
+
+impl ActiveSockets {
+    pub fn get_status(&self, user: UserId) -> Option<UserStatus> {
+        self.sockets_by_user_id
+            .get(&user)
+            .and_then(|x| x.iter().next().and_then(|x| self.sockets.get(&*x)))
+            .map(|x| x.status.clone())
+    }
+}
+
+pub struct ActiveSocket {
+    pub status: UserStatus,
+    pub socket: Session,
+    pub owned_tunnel_sockets: DashSet<Uuid>,
+}
+
+impl ActiveSocket {
+    pub fn new(status: UserStatus, session: Session) -> Self {
+        Self {
+            status,
+            socket: session,
+            owned_tunnel_sockets: DashSet::new(),
+        }
+    }
+}
+
+pub struct TunnelSocket {
+    pub owner: SocketId,
+    pub socket_type: TunnelSocketType,
+}
+
+impl TunnelSocket {
+    pub fn new(owner: SocketId, socket_type: TunnelSocketType) -> Self {
+        Self { owner, socket_type }
+    }
+}
+
+pub enum TunnelSocketType {
+    Listening,
+    Connected { connected_to: Uuid },
+}
diff --git a/apps/labrinth/src/routes/debug/mod.rs b/apps/labrinth/src/routes/debug/mod.rs
new file mode 100644
index 000000000..163909f05
--- /dev/null
+++ b/apps/labrinth/src/routes/debug/mod.rs
@@ -0,0 +1,87 @@
+use crate::routes::ApiError;
+use crate::util::cors::default_cors;
+use crate::util::guards::admin_key_guard;
+use actix_web::{get, HttpResponse};
+use prometheus::{IntGauge, Registry};
+use std::time::Duration;
+
+pub fn config(cfg: &mut actix_web::web::ServiceConfig) {
+    cfg.service(
+        actix_web::web::scope("/debug")
+            .wrap(default_cors())
+            .service(heap)
+            .service(flame_graph),
+    );
+}
+
+#[get("pprof/heap", guard = "admin_key_guard")]
+pub async fn heap() -> Result<HttpResponse, ApiError> {
+    let mut prof_ctl = jemalloc_pprof::PROF_CTL.as_ref().unwrap().lock().await;
+    require_profiling_activated(&prof_ctl)?;
+    let pprof = prof_ctl
+        .dump_pprof()
+        .map_err(|err| ApiError::InvalidInput(err.to_string()))?;
+
+    Ok(HttpResponse::Ok()
+        .content_type("application/octet-stream")
+        .body(pprof))
+}
+
+#[get("pprof/heap/flamegraph", guard = "admin_key_guard")]
+pub async fn flame_graph() -> Result<HttpResponse, ApiError> {
+    let mut prof_ctl = jemalloc_pprof::PROF_CTL.as_ref().unwrap().lock().await;
+    require_profiling_activated(&prof_ctl)?;
+    let svg = prof_ctl
+        .dump_flamegraph()
+        .map_err(|err| ApiError::InvalidInput(err.to_string()))?;
+
+    Ok(HttpResponse::Ok().content_type("image/svg+xml").body(svg))
+}
+
+fn require_profiling_activated(
+    prof_ctl: &jemalloc_pprof::JemallocProfCtl,
+) -> Result<(), ApiError> {
+    if prof_ctl.activated() {
+        Ok(())
+    } else {
+        Err(ApiError::InvalidInput(
+            "Profiling is not activated".to_string(),
+        ))
+    }
+}
+
+pub fn jemalloc_mmeory_stats(
+    registry: &Registry,
+) -> Result<(), prometheus::Error> {
+    let allocated_mem = IntGauge::new(
+        "labrinth_memory_allocated",
+        "Labrinth allocated memory",
+    )?;
+    let resident_mem =
+        IntGauge::new("labrinth_resident_memory", "Labrinth resident memory")?;
+
+    registry.register(Box::new(allocated_mem.clone()))?;
+    registry.register(Box::new(resident_mem.clone()))?;
+
+    tokio::spawn(async move {
+        let e = tikv_jemalloc_ctl::epoch::mib().unwrap();
+        let allocated = tikv_jemalloc_ctl::stats::allocated::mib().unwrap();
+        let resident = tikv_jemalloc_ctl::stats::resident::mib().unwrap();
+
+        loop {
+            e.advance().unwrap();
+
+            if let Ok(allocated) = allocated.read() {
+                allocated_mem.set(allocated as i64);
+            }
+
+            if let Ok(resident) = resident.read() {
+                resident_mem.set(resident as i64);
+            }
+
+            tokio::time::sleep(Duration::from_secs(5)).await;
+        }
+    });
+
+    Ok(())
+}
diff --git a/apps/labrinth/src/routes/internal/admin.rs b/apps/labrinth/src/routes/internal/admin.rs
index f52667d9a..70c8c88f6 100644
--- a/apps/labrinth/src/routes/internal/admin.rs
+++ b/apps/labrinth/src/routes/internal/admin.rs
@@ -15,12 +15,12 @@ use crate::search::SearchConfig;
 use crate::util::date::get_current_tenths_of_ms;
 use crate::util::guards::admin_key_guard;
 use actix_web::{get, patch, post, web, HttpRequest, HttpResponse};
-use log::info;
 use serde::Deserialize;
 use sqlx::PgPool;
 use std::collections::HashMap;
 use std::net::Ipv4Addr;
 use std::sync::Arc;
+use tracing::info;
 
 pub fn config(cfg: &mut web::ServiceConfig) {
     cfg.service(
@@ -74,11 +74,10 @@ pub async fn count_download(
     let project_id: crate::database::models::ids::ProjectId =
         download_body.project_id.into();
 
-    let id_option = crate::models::ids::base62_impl::parse_base62(
-        &download_body.version_name,
-    )
-    .ok()
-    .map(|x| x as i64);
+    let id_option =
+        ariadne::ids::base62_impl::parse_base62(&download_body.version_name)
+            .ok()
+            .map(|x| x as i64);
 
     let (version_id, project_id) = if let Some(version) = sqlx::query!(
         "
@@ -243,8 +242,14 @@ pub async fn delphi_result_ingest(
 
     for (issue, trace) in &body.issues {
         for path in trace.keys() {
-            thread_header
-                .push_str(&format!("\n issue {issue} found at file {}", path));
+            thread_header.push_str(&format!(
+                "\n\n- issue {issue} found at file {}",
+                path
+            ));
+        }
+
+        if trace.is_empty() {
+            thread_header.push_str(&format!("\n\n- issue {issue} found",));
         }
     }
 
diff --git a/apps/labrinth/src/routes/internal/billing.rs b/apps/labrinth/src/routes/internal/billing.rs
index d6dc71bb4..036c3c3db 100644
--- a/apps/labrinth/src/routes/internal/billing.rs
+++ b/apps/labrinth/src/routes/internal/billing.rs
@@ -10,14 +10,13 @@ use crate::models::billing::{
     Product, ProductMetadata, ProductPrice, SubscriptionMetadata,
     SubscriptionStatus, UserSubscription,
 };
-use crate::models::ids::base62_impl::{parse_base62, to_base62};
 use crate::models::pats::Scopes;
 use crate::models::users::Badges;
 use crate::queue::session::AuthQueue;
 use crate::routes::ApiError;
 use actix_web::{delete, get, patch, post, web, HttpRequest, HttpResponse};
+use ariadne::ids::base62_impl::{parse_base62, to_base62};
 use chrono::Utc;
-use log::{info, warn};
 use rust_decimal::prelude::ToPrimitive;
 use rust_decimal::Decimal;
 use serde::Serialize;
@@ -34,6 +33,7 @@ use stripe::{
     PaymentIntentSetupFutureUsage, PaymentMethodId, SetupIntent,
     UpdateCustomer, Webhook,
 };
+use tracing::{info, warn};
 
 pub fn config(cfg: &mut web::ServiceConfig) {
     cfg.service(
@@ -83,12 +83,18 @@ pub async fn products(
     Ok(HttpResponse::Ok().json(products))
 }
 
+#[derive(Deserialize)]
+struct SubscriptionsQuery {
+    pub user_id: Option<crate::models::ids::UserId>,
+}
+
 #[get("subscriptions")]
 pub async fn subscriptions(
     req: HttpRequest,
     pool: web::Data<PgPool>,
     redis: web::Data<RedisPool>,
     session_queue: web::Data<AuthQueue>,
+    query: web::Query<SubscriptionsQuery>,
 ) -> Result<HttpResponse, ApiError> {
     let user = get_user_from_headers(
         &req,
@@ -102,7 +108,18 @@ pub async fn subscriptions(
 
     let subscriptions =
         user_subscription_item::UserSubscriptionItem::get_all_user(
-            user.id.into(),
+            if let Some(user_id) = query.user_id {
+                if user.role.is_admin() {
+                    user_id.into()
+                } else {
+                    return Err(ApiError::InvalidInput(
+                        "You cannot see the subscriptions of other users!"
+                            .to_string(),
+                    ));
+                }
+            } else {
+                user.id.into()
+            },
             &**pool,
         )
         .await?
@@ -394,11 +411,7 @@ pub async fn edit_subscription(
             }
 
             let interval = open_charge.due - Utc::now();
-            let duration = PriceDuration::iterator()
-                .min_by_key(|x| {
-                    (x.duration().num_seconds() - interval.num_seconds()).abs()
-                })
-                .unwrap_or(PriceDuration::Monthly);
+            let duration = PriceDuration::Monthly;
 
             let current_amount = match &current_price.prices {
                 Price::OneTime { price } => *price,
@@ -444,23 +457,6 @@ pub async fn edit_subscription(
                 }
 
                 let charge_id = generate_charge_id(&mut transaction).await?;
-                let mut charge = ChargeItem {
-                    id: charge_id,
-                    user_id: user.id.into(),
-                    price_id: product_price.id,
-                    amount: proration as i64,
-                    currency_code: current_price.currency_code.clone(),
-                    status: ChargeStatus::Processing,
-                    due: Utc::now(),
-                    last_attempt: None,
-                    type_: ChargeType::Proration,
-                    subscription_id: Some(subscription.id),
-                    subscription_interval: Some(duration),
-                    payment_platform: PaymentPlatform::Stripe,
-                    payment_platform_id: None,
-                    parent_charge_id: None,
-                    net: None,
-                };
 
                 let customer_id = get_or_create_customer(
                     user.id,
@@ -487,6 +483,30 @@ pub async fn edit_subscription(
                     "modrinth_user_id".to_string(),
                     to_base62(user.id.0),
                 );
+                metadata.insert(
+                    "modrinth_charge_id".to_string(),
+                    to_base62(charge_id.0 as u64),
+                );
+                metadata.insert(
+                    "modrinth_subscription_id".to_string(),
+                    to_base62(subscription.id.0 as u64),
+                );
+                metadata.insert(
+                    "modrinth_price_id".to_string(),
+                    to_base62(product_price.id.0 as u64),
+                );
+                metadata.insert(
+                    "modrinth_subscription_interval".to_string(),
+                    open_charge
+                        .subscription_interval
+                        .unwrap_or(PriceDuration::Monthly)
+                        .as_str()
+                        .to_string(),
+                );
+                metadata.insert(
+                    "modrinth_charge_type".to_string(),
+                    ChargeType::Proration.as_str().to_string(),
+                );
 
                 intent.customer = Some(customer_id);
                 intent.metadata = Some(metadata);
@@ -512,9 +532,6 @@ pub async fn edit_subscription(
                     stripe::PaymentIntent::create(&stripe_client, intent)
                         .await?;
 
-                charge.payment_platform_id = Some(intent.id.to_string());
-                charge.upsert(&mut transaction).await?;
-
                 Some((proration, 0, intent))
             }
         } else {
@@ -573,12 +590,18 @@ pub async fn user_customer(
     Ok(HttpResponse::Ok().json(customer))
 }
 
+#[derive(Deserialize)]
+pub struct ChargesQuery {
+    pub user_id: Option<crate::models::ids::UserId>,
+}
+
 #[get("payments")]
 pub async fn charges(
     req: HttpRequest,
     pool: web::Data<PgPool>,
     redis: web::Data<RedisPool>,
     session_queue: web::Data<AuthQueue>,
+    query: web::Query<ChargesQuery>,
 ) -> Result<HttpResponse, ApiError> {
     let user = get_user_from_headers(
         &req,
@@ -592,7 +615,18 @@ pub async fn charges(
 
     let charges =
         crate::database::models::charge_item::ChargeItem::get_from_user(
-            user.id.into(),
+            if let Some(user_id) = query.user_id {
+                if user.role.is_admin() {
+                    user_id.into()
+                } else {
+                    return Err(ApiError::InvalidInput(
+                        "You cannot see the subscriptions of other users!"
+                            .to_string(),
+                    ));
+                }
+            } else {
+                user.id.into()
+            },
             &**pool,
         )
         .await?;
@@ -604,7 +638,7 @@ pub async fn charges(
                 id: x.id.into(),
                 user_id: x.user_id.into(),
                 price_id: x.price_id.into(),
-                amount: x.amount as u64,
+                amount: x.amount,
                 currency_code: x.currency_code,
                 status: x.status,
                 due: x.due,
@@ -613,6 +647,8 @@ pub async fn charges(
                 subscription_id: x.subscription_id.map(|x| x.into()),
                 subscription_interval: x.subscription_interval,
                 platform: x.payment_platform,
+                parent_charge_id: x.parent_charge_id.map(|x| x.into()),
+                net: if user.role.is_admin() { x.net } else { None },
             })
             .collect::<Vec<_>>(),
     ))
@@ -902,6 +938,7 @@ pub async fn active_servers(
     struct ActiveServer {
         pub user_id: crate::models::ids::UserId,
         pub server_id: String,
+        pub price_id: crate::models::ids::ProductPriceId,
         pub interval: PriceDuration,
     }
 
@@ -912,6 +949,7 @@ pub async fn active_servers(
                 SubscriptionMetadata::Pyro { id } => ActiveServer {
                     user_id: x.user_id.into(),
                     server_id: id.clone(),
+                    price_id: x.price_id.into(),
                     interval: x.interval,
                 },
             })
@@ -1103,7 +1141,7 @@ pub async fn initiate_payment(
     let country = user_country.as_deref().unwrap_or("US");
     let recommended_currency_code = infer_currency_code(country);
 
-    let (price, currency_code, interval, price_id, charge_id) =
+    let (price, currency_code, interval, price_id, charge_id, charge_type) =
         match payment_request.charge {
             ChargeRequestType::Existing { id } => {
                 let charge =
@@ -1124,6 +1162,7 @@ pub async fn initiate_payment(
                     charge.subscription_interval,
                     charge.price_id,
                     Some(id),
+                    charge.type_,
                 )
             }
             ChargeRequestType::New {
@@ -1220,6 +1259,11 @@ pub async fn initiate_payment(
                     interval,
                     price_item.id,
                     None,
+                    if let Price::Recurring { .. } = price_item.prices {
+                        ChargeType::Subscription
+                    } else {
+                        ChargeType::OneTime
+                    },
                 )
             }
         };
@@ -1278,6 +1322,11 @@ pub async fn initiate_payment(
             );
         }
 
+        metadata.insert(
+            "modrinth_charge_type".to_string(),
+            charge_type.as_str().to_string(),
+        );
+
         if let Some(charge_id) = charge_id {
             metadata.insert(
                 "modrinth_charge_id".to_string(),
@@ -1363,10 +1412,15 @@ pub async fn stripe_webhook(
             pub user_subscription_item:
                 Option<user_subscription_item::UserSubscriptionItem>,
             pub payment_metadata: Option<PaymentRequestMetadata>,
+            #[allow(dead_code)]
+            pub charge_type: ChargeType,
         }
 
+        #[allow(clippy::too_many_arguments)]
         async fn get_payment_intent_metadata(
             payment_intent_id: PaymentIntentId,
+            amount: i64,
+            currency: String,
             metadata: HashMap<String, String>,
             pool: &PgPool,
             redis: &RedisPool,
@@ -1409,6 +1463,15 @@ pub async fn stripe_webhook(
                     break 'metadata;
                 };
 
+                let charge_type = if let Some(charge_type) = metadata
+                    .get("modrinth_charge_type")
+                    .map(|x| ChargeType::from_string(x))
+                {
+                    charge_type
+                } else {
+                    break 'metadata;
+                };
+
                 let (charge, price, product, subscription) = if let Some(
                     mut charge,
                 ) =
@@ -1513,8 +1576,8 @@ pub async fn stripe_webhook(
                         break 'metadata;
                     };
 
-                    let (amount, subscription) = match &price.prices {
-                        Price::OneTime { price } => (*price, None),
+                    let subscription = match &price.prices {
+                        Price::OneTime { .. } => None,
                         Price::Recurring { intervals } => {
                             let interval = if let Some(interval) = metadata
                                 .get("modrinth_subscription_interval")
@@ -1525,7 +1588,7 @@ pub async fn stripe_webhook(
                                 break 'metadata;
                             };
 
-                            if let Some(price) = intervals.get(&interval) {
+                            if intervals.get(&interval).is_some() {
                                 let subscription_id = if let Some(subscription_id) = metadata
                                     .get("modrinth_subscription_id")
                                     .and_then(|x| parse_base62(x).ok())
@@ -1537,21 +1600,29 @@ pub async fn stripe_webhook(
                                     break 'metadata;
                                 };
 
-                                let subscription = user_subscription_item::UserSubscriptionItem {
-                                    id: subscription_id,
-                                    user_id,
-                                    price_id,
-                                    interval,
-                                    created: Utc::now(),
-                                    status: SubscriptionStatus::Unprovisioned,
-                                    metadata: None,
+                                let subscription = if let Some(mut subscription) = user_subscription_item::UserSubscriptionItem::get(subscription_id, pool).await? {
+                                    subscription.status = SubscriptionStatus::Unprovisioned;
+                                    subscription.price_id = price_id;
+                                    subscription.interval = interval;
+
+                                    subscription
+                                } else {
+                                    user_subscription_item::UserSubscriptionItem {
+                                        id: subscription_id,
+                                        user_id,
+                                        price_id,
+                                        interval,
+                                        created: Utc::now(),
+                                        status: SubscriptionStatus::Unprovisioned,
+                                        metadata: None,
+                                    }
                                 };
 
                                 if charge_status != ChargeStatus::Failed {
                                     subscription.upsert(transaction).await?;
                                 }
 
-                                (*price, Some(subscription))
+                                Some(subscription)
                             } else {
                                 break 'metadata;
                             }
@@ -1562,16 +1633,12 @@ pub async fn stripe_webhook(
                         id: charge_id,
                         user_id,
                         price_id,
-                        amount: amount as i64,
-                        currency_code: price.currency_code.clone(),
+                        amount,
+                        currency_code: currency,
                         status: charge_status,
                         due: Utc::now(),
                         last_attempt: Some(Utc::now()),
-                        type_: if subscription.is_some() {
-                            ChargeType::Subscription
-                        } else {
-                            ChargeType::OneTime
-                        },
+                        type_: charge_type,
                         subscription_id: subscription.as_ref().map(|x| x.id),
                         subscription_interval: subscription
                             .as_ref()
@@ -1598,6 +1665,7 @@ pub async fn stripe_webhook(
                     charge_item: charge,
                     user_subscription_item: subscription,
                     payment_metadata,
+                    charge_type,
                 });
             }
 
@@ -1615,6 +1683,8 @@ pub async fn stripe_webhook(
 
                     let mut metadata = get_payment_intent_metadata(
                         payment_intent.id,
+                        payment_intent.amount,
+                        payment_intent.currency.to_string().to_uppercase(),
                         payment_intent.metadata,
                         &pool,
                         &redis,
@@ -1679,7 +1749,8 @@ pub async fn stripe_webhook(
                                 {
                                     client
                                         .post(format!(
-                                            "https://archon.pyro.host/modrinth/v0/servers/{}/unsuspend",
+                                            "{}/modrinth/v0/servers/{}/unsuspend",
+                                            dotenvy::var("ARCHON_URL")?,
                                             id
                                         ))
                                         .header("X-Master-Key", dotenvy::var("PYRO_API_KEY")?)
@@ -1687,20 +1758,25 @@ pub async fn stripe_webhook(
                                         .await?
                                         .error_for_status()?;
 
-                                    client.post(format!(
-                                        "https://archon.pyro.host/modrinth/v0/servers/{}/reallocate",
+                                    client
+                                        .post(format!(
+                                        "{}/modrinth/v0/servers/{}/reallocate",
+                                        dotenvy::var("ARCHON_URL")?,
                                         id
                                     ))
-                                    .header("X-Master-Key", dotenvy::var("PYRO_API_KEY")?)
-                                    .json(&serde_json::json!({
-                                        "memory_mb": ram,
-                                        "cpu": cpu,
-                                        "swap_mb": swap,
-                                        "storage_mb": storage,
-                                    }))
-                                    .send()
-                                    .await?
-                                    .error_for_status()?;
+                                        .header(
+                                            "X-Master-Key",
+                                            dotenvy::var("PYRO_API_KEY")?,
+                                        )
+                                        .json(&serde_json::json!({
+                                            "memory_mb": ram,
+                                            "cpu": cpu,
+                                            "swap_mb": swap,
+                                            "storage_mb": storage,
+                                        }))
+                                        .send()
+                                        .await?
+                                        .error_for_status()?;
                                 } else {
                                     let (server_name, source) = if let Some(
                                         PaymentRequestMetadata::Pyro {
@@ -1744,7 +1820,10 @@ pub async fn stripe_webhook(
                                     }
 
                                     let res = client
-                                        .post("https://archon.pyro.host/modrinth/v0/servers/create")
+                                        .post(format!(
+                                            "{}/modrinth/v0/servers/create",
+                                            dotenvy::var("ARCHON_URL")?,
+                                        ))
                                         .header("X-Master-Key", dotenvy::var("PYRO_API_KEY")?)
                                         .json(&serde_json::json!({
                                             "user_id": to_base62(metadata.user_item.id.0 as u64),
@@ -1863,6 +1942,8 @@ pub async fn stripe_webhook(
                     let mut transaction = pool.begin().await?;
                     get_payment_intent_metadata(
                         payment_intent.id,
+                        payment_intent.amount,
+                        payment_intent.currency.to_string().to_uppercase(),
                         payment_intent.metadata,
                         &pool,
                         &redis,
@@ -1881,6 +1962,8 @@ pub async fn stripe_webhook(
 
                     let metadata = get_payment_intent_metadata(
                         payment_intent.id,
+                        payment_intent.amount,
+                        payment_intent.currency.to_string().to_uppercase(),
                         payment_intent.metadata,
                         &pool,
                         &redis,
@@ -2127,7 +2210,8 @@ pub async fn subscription_task(pool: PgPool, redis: RedisPool) {
                         {
                             let res = reqwest::Client::new()
                                 .post(format!(
-                                    "https://archon.pyro.host/modrinth/v0/servers/{}/suspend",
+                                    "{}/modrinth/v0/servers/{}/suspend",
+                                    dotenvy::var("ARCHON_URL")?,
                                     id
                                 ))
                                 .header("X-Master-Key", dotenvy::var("PYRO_API_KEY")?)
@@ -2284,6 +2368,10 @@ pub async fn task(
                         "modrinth_charge_id".to_string(),
                         to_base62(charge.id.0 as u64),
                     );
+                    metadata.insert(
+                        "modrinth_charge_type".to_string(),
+                        charge.type_.as_str().to_string(),
+                    );
 
                     intent.metadata = Some(metadata);
                     intent.customer = Some(customer.id);
diff --git a/apps/labrinth/src/routes/internal/flows.rs b/apps/labrinth/src/routes/internal/flows.rs
index d0f830609..31e3c620f 100644
--- a/apps/labrinth/src/routes/internal/flows.rs
+++ b/apps/labrinth/src/routes/internal/flows.rs
@@ -4,8 +4,6 @@ use crate::auth::{get_user_from_headers, AuthProvider, AuthenticationError};
 use crate::database::models::flow_item::Flow;
 use crate::database::redis::RedisPool;
 use crate::file_hosting::FileHost;
-use crate::models::ids::base62_impl::{parse_base62, to_base62};
-use crate::models::ids::random_base62_rng;
 use crate::models::pats::Scopes;
 use crate::models::users::{Badges, Role};
 use crate::queue::session::AuthQueue;
@@ -20,6 +18,8 @@ use actix_web::web::{scope, Data, Query, ServiceConfig};
 use actix_web::{delete, get, patch, post, web, HttpRequest, HttpResponse};
 use argon2::password_hash::SaltString;
 use argon2::{Argon2, PasswordHash, PasswordHasher, PasswordVerifier};
+use ariadne::ids::base62_impl::{parse_base62, to_base62};
+use ariadne::ids::random_base62_rng;
 use base64::Engine;
 use chrono::{Duration, Utc};
 use rand_chacha::rand_core::SeedableRng;
diff --git a/apps/labrinth/src/routes/internal/moderation.rs b/apps/labrinth/src/routes/internal/moderation.rs
index 9f59e738e..066541003 100644
--- a/apps/labrinth/src/routes/internal/moderation.rs
+++ b/apps/labrinth/src/routes/internal/moderation.rs
@@ -1,12 +1,12 @@
 use super::ApiError;
 use crate::database;
 use crate::database::redis::RedisPool;
-use crate::models::ids::random_base62;
 use crate::models::projects::ProjectStatus;
 use crate::queue::moderation::{ApprovalType, IdentifiedFile, MissingMetadata};
 use crate::queue::session::AuthQueue;
 use crate::{auth::check_is_moderator_from_headers, models::pats::Scopes};
 use actix_web::{web, HttpRequest, HttpResponse};
+use ariadne::ids::random_base62;
 use serde::Deserialize;
 use sqlx::PgPool;
 use std::collections::HashMap;
diff --git a/apps/labrinth/src/routes/internal/statuses.rs b/apps/labrinth/src/routes/internal/statuses.rs
index 4b595b1cc..0c5c08ad6 100644
--- a/apps/labrinth/src/routes/internal/statuses.rs
+++ b/apps/labrinth/src/routes/internal/statuses.rs
@@ -2,40 +2,32 @@ use crate::auth::validate::get_user_record_from_bearer_token;
 use crate::auth::AuthenticationError;
 use crate::database::models::friend_item::FriendItem;
 use crate::database::redis::RedisPool;
-use crate::models::ids::UserId;
 use crate::models::pats::Scopes;
-use crate::models::users::{User, UserStatus};
+use crate::models::users::User;
 use crate::queue::session::AuthQueue;
-use crate::queue::socket::ActiveSockets;
+use crate::queue::socket::{
+    ActiveSocket, ActiveSockets, SocketId, TunnelSocketType,
+};
 use crate::routes::ApiError;
 use actix_web::web::{Data, Payload};
 use actix_web::{get, web, HttpRequest, HttpResponse};
 use actix_ws::Message;
+use ariadne::ids::UserId;
+use ariadne::networking::message::{
+    ClientToServerMessage, ServerToClientMessage,
+};
+use ariadne::users::UserStatus;
 use chrono::Utc;
+use either::Either;
 use futures_util::{StreamExt, TryStreamExt};
-use serde::{Deserialize, Serialize};
+use serde::Deserialize;
 use sqlx::PgPool;
+use std::sync::atomic::Ordering;
 
 pub fn config(cfg: &mut web::ServiceConfig) {
     cfg.service(ws_init);
 }
 
-#[derive(Deserialize)]
-#[serde(tag = "type", rename_all = "snake_case")]
-pub enum ClientToServerMessage {
-    StatusUpdate { profile_name: Option<String> },
-}
-
-#[derive(Serialize)]
-#[serde(tag = "type", rename_all = "snake_case")]
-pub enum ServerToClientMessage {
-    StatusUpdate { status: UserStatus },
-    UserOffline { id: UserId },
-    FriendStatuses { statuses: Vec<UserStatus> },
-    FriendRequest { from: UserId },
-    FriendRequestRejected { from: UserId },
-}
-
 #[derive(Deserialize)]
 struct LauncherHeartbeatInit {
     code: String,
@@ -71,10 +63,6 @@ pub async fn ws_init(
 
     let user = User::from_full(db_user);
 
-    if let Some((_, (_, session))) = db.auth_sockets.remove(&user.id) {
-        let _ = session.close(None).await;
-    }
-
     let (res, mut session, msg_stream) = match actix_ws::handle(&req, body) {
         Ok(x) => x,
         Err(e) => return Ok(e.error_response()),
@@ -94,8 +82,8 @@ pub async fn ws_init(
         friends
             .iter()
             .filter_map(|x| {
-                db.auth_sockets.get(
-                    &if x.user_id == user.id.into() {
+                db.get_status(
+                    if x.user_id == user.id.into() {
                         x.friend_id
                     } else {
                         x.user_id
@@ -103,7 +91,6 @@ pub async fn ws_init(
                     .into(),
                 )
             })
-            .map(|x| x.value().0.clone())
             .collect::<Vec<_>>()
     } else {
         Vec::new()
@@ -117,7 +104,17 @@ pub async fn ws_init(
         )?)
         .await;
 
-    db.auth_sockets.insert(user.id, (status.clone(), session));
+    let db = db.clone();
+    let socket_id = db.next_socket_id.fetch_add(1, Ordering::Relaxed);
+    db.sockets
+        .insert(socket_id, ActiveSocket::new(status.clone(), session));
+    db.sockets_by_user_id
+        .entry(user.id)
+        .or_default()
+        .insert(socket_id);
+
+    #[cfg(debug_assertions)]
+    tracing::info!("Connection {socket_id} opened by {}", user.id);
 
     broadcast_friends(
         user.id,
@@ -133,68 +130,185 @@ pub async fn ws_init(
     actix_web::rt::spawn(async move {
         // receive messages from websocket
         while let Some(msg) = stream.next().await {
-            match msg {
+            let message = match msg {
                 Ok(Message::Text(text)) => {
-                    if let Ok(message) =
-                        serde_json::from_str::<ClientToServerMessage>(&text)
-                    {
-                        match message {
-                            ClientToServerMessage::StatusUpdate {
-                                profile_name,
-                            } => {
-                                if let Some(mut pair) =
-                                    db.auth_sockets.get_mut(&user.id)
-                                {
-                                    let (status, _) = pair.value_mut();
+                    ClientToServerMessage::deserialize(Either::Left(&text))
+                }
 
-                                    if status
-                                        .profile_name
-                                        .as_ref()
-                                        .map(|x| x.len() > 64)
-                                        .unwrap_or(false)
-                                    {
-                                        continue;
-                                    }
-
-                                    status.profile_name = profile_name;
-                                    status.last_update = Utc::now();
-
-                                    let user_status = status.clone();
-                                    // We drop the pair to avoid holding the lock for too long
-                                    drop(pair);
-
-                                    let _ = broadcast_friends(
-                                        user.id,
-                                        ServerToClientMessage::StatusUpdate {
-                                            status: user_status,
-                                        },
-                                        &pool,
-                                        &db,
-                                        None,
-                                    )
-                                    .await;
-                                }
-                            }
-                        }
-                    }
+                Ok(Message::Binary(bytes)) => {
+                    ClientToServerMessage::deserialize(Either::Right(&bytes))
                 }
 
                 Ok(Message::Close(_)) => {
-                    let _ = close_socket(user.id, &pool, &db).await;
+                    let _ = close_socket(socket_id, &pool, &db).await;
+                    continue;
                 }
 
                 Ok(Message::Ping(msg)) => {
-                    if let Some(socket) = db.auth_sockets.get(&user.id) {
-                        let (_, socket) = socket.value();
-                        let _ = socket.clone().pong(&msg).await;
+                    if let Some(socket) = db.sockets.get(&socket_id) {
+                        let _ = socket.socket.clone().pong(&msg).await;
+                    }
+                    continue;
+                }
+
+                _ => continue,
+            };
+
+            if message.is_err() {
+                continue;
+            }
+            let message = message.unwrap();
+
+            #[cfg(debug_assertions)]
+            if !message.is_binary() {
+                tracing::info!(
+                    "Received message from {socket_id}: {:?}",
+                    message
+                );
+            }
+
+            match message {
+                ClientToServerMessage::StatusUpdate { profile_name } => {
+                    if let Some(mut pair) = db.sockets.get_mut(&socket_id) {
+                        let ActiveSocket { status, .. } = pair.value_mut();
+
+                        if status
+                            .profile_name
+                            .as_ref()
+                            .map(|x| x.len() > 64)
+                            .unwrap_or(false)
+                        {
+                            return;
+                        }
+
+                        status.profile_name = profile_name;
+                        status.last_update = Utc::now();
+
+                        let user_status = status.clone();
+                        // We drop the pair to avoid holding the lock for too long
+                        drop(pair);
+
+                        let _ = broadcast_friends(
+                            user.id,
+                            ServerToClientMessage::StatusUpdate {
+                                status: user_status,
+                            },
+                            &pool,
+                            &db,
+                            None,
+                        )
+                        .await;
                     }
                 }
 
-                _ => {}
+                ClientToServerMessage::SocketListen { .. } => {
+                    // TODO: Listen to socket
+                    // The code below probably won't need changes, but there's no way to connect to
+                    // a tunnel socket yet, so we shouldn't be storing them
+
+                    // let Some(active_socket) = db.sockets.get(&socket_id) else {
+                    //     return;
+                    // };
+                    // let Vacant(entry) = db.tunnel_sockets.entry(socket) else {
+                    //     continue;
+                    // };
+                    // entry.insert(TunnelSocket::new(
+                    //     socket_id,
+                    //     TunnelSocketType::Listening,
+                    // ));
+                    // active_socket.owned_tunnel_sockets.insert(socket);
+                    // let _ = broadcast_friends(
+                    //     user.id,
+                    //     ServerToClientMessage::FriendSocketListening {
+                    //         user: user.id,
+                    //         socket,
+                    //     },
+                    //     &pool,
+                    //     &db,
+                    //     None,
+                    // )
+                    // .await;
+                }
+                ClientToServerMessage::SocketClose { socket } => {
+                    let Some(active_socket) = db.sockets.get(&socket_id) else {
+                        return;
+                    };
+                    if active_socket
+                        .owned_tunnel_sockets
+                        .remove(&socket)
+                        .is_none()
+                    {
+                        continue;
+                    }
+                    let Some((_, tunnel_socket)) =
+                        db.tunnel_sockets.remove(&socket)
+                    else {
+                        continue;
+                    };
+                    match tunnel_socket.socket_type {
+                        TunnelSocketType::Listening => {
+                            let _ = broadcast_friends(
+                                user.id,
+                                ServerToClientMessage::FriendSocketStoppedListening { user: user.id },
+                                &pool,
+                                &db,
+                                None,
+                            )
+                            .await;
+                        }
+                        TunnelSocketType::Connected { connected_to } => {
+                            let Some((_, other)) =
+                                db.tunnel_sockets.remove(&connected_to)
+                            else {
+                                continue;
+                            };
+                            let Some(other_user) = db.sockets.get(&other.owner)
+                            else {
+                                continue;
+                            };
+                            let _ = send_message(
+                                &other_user,
+                                &ServerToClientMessage::SocketClosed { socket },
+                            )
+                            .await;
+                        }
+                    }
+                }
+                ClientToServerMessage::SocketSend { socket, data } => {
+                    let Some(tunnel_socket) = db.tunnel_sockets.get(&socket)
+                    else {
+                        continue;
+                    };
+                    if tunnel_socket.owner != socket_id {
+                        continue;
+                    }
+                    let TunnelSocketType::Connected { connected_to } =
+                        tunnel_socket.socket_type
+                    else {
+                        continue;
+                    };
+                    let Some(other_tunnel) =
+                        db.tunnel_sockets.get(&connected_to)
+                    else {
+                        continue;
+                    };
+                    let Some(other_user) = db.sockets.get(&other_tunnel.owner)
+                    else {
+                        continue;
+                    };
+                    let _ = send_message(
+                        &other_user,
+                        &ServerToClientMessage::SocketData {
+                            socket: connected_to,
+                            data,
+                        },
+                    )
+                    .await;
+                }
             }
         }
 
-        let _ = close_socket(user.id, &pool, &db).await;
+        let _ = close_socket(socket_id, &pool, &db).await;
     });
 
     Ok(res)
@@ -207,6 +321,7 @@ pub async fn broadcast_friends(
     sockets: &ActiveSockets,
     friends: Option<Vec<FriendItem>>,
 ) -> Result<(), crate::database::models::DatabaseError> {
+    // FIXME Probably shouldn't be using database errors for this. Maybe ApiError?
     let friends = if let Some(friends) = friends {
         friends
     } else {
@@ -221,11 +336,46 @@ pub async fn broadcast_friends(
         };
 
         if friend.accepted {
-            if let Some(socket) = sockets.auth_sockets.get(&friend_id.into()) {
-                let (_, socket) = socket.value();
+            if let Some(socket_ids) =
+                sockets.sockets_by_user_id.get(&friend_id.into())
+            {
+                for socket_id in socket_ids.iter() {
+                    if let Some(socket) = sockets.sockets.get(&socket_id) {
+                        let _ = send_message(socket.value(), &message).await;
+                    }
+                }
+            }
+        }
+    }
 
-                let _ =
-                    socket.clone().text(serde_json::to_string(&message)?).await;
+    Ok(())
+}
+
+pub async fn send_message(
+    socket: &ActiveSocket,
+    message: &ServerToClientMessage,
+) -> Result<(), crate::database::models::DatabaseError> {
+    let mut socket = socket.socket.clone();
+
+    // FIXME Probably shouldn't swallow sending errors
+    let _ = match message.serialize() {
+        Ok(Either::Left(text)) => socket.text(text).await,
+        Ok(Either::Right(bytes)) => socket.binary(bytes).await,
+        Err(_) => Ok(()), // TODO: Maybe should log these? Though it is the backend
+    };
+
+    Ok(())
+}
+
+pub async fn send_message_to_user(
+    db: &ActiveSockets,
+    user: UserId,
+    message: &ServerToClientMessage,
+) -> Result<(), crate::database::models::DatabaseError> {
+    if let Some(socket_ids) = db.sockets_by_user_id.get(&user) {
+        for socket_id in socket_ids.iter() {
+            if let Some(socket) = db.sockets.get(&socket_id) {
+                send_message(&socket, message).await?;
             }
         }
     }
@@ -234,21 +384,66 @@ pub async fn broadcast_friends(
 }
 
 pub async fn close_socket(
-    id: UserId,
+    id: SocketId,
     pool: &PgPool,
-    sockets: &ActiveSockets,
+    db: &ActiveSockets,
 ) -> Result<(), crate::database::models::DatabaseError> {
-    if let Some((_, (_, socket))) = sockets.auth_sockets.remove(&id) {
-        let _ = socket.close(None).await;
+    if let Some((_, socket)) = db.sockets.remove(&id) {
+        let user_id = socket.status.user_id;
+        db.sockets_by_user_id.remove_if(&user_id, |_, sockets| {
+            sockets.remove(&id);
+            sockets.is_empty()
+        });
+
+        let _ = socket.socket.close(None).await;
 
         broadcast_friends(
-            id,
-            ServerToClientMessage::UserOffline { id },
+            user_id,
+            ServerToClientMessage::UserOffline { id: user_id },
             pool,
-            sockets,
+            db,
             None,
         )
         .await?;
+
+        for owned_socket in socket.owned_tunnel_sockets {
+            let Some((_, tunnel_socket)) =
+                db.tunnel_sockets.remove(&owned_socket)
+            else {
+                continue;
+            };
+            match tunnel_socket.socket_type {
+                TunnelSocketType::Listening => {
+                    let _ = broadcast_friends(
+                        user_id,
+                        ServerToClientMessage::SocketClosed {
+                            socket: owned_socket,
+                        },
+                        pool,
+                        db,
+                        None,
+                    )
+                    .await;
+                }
+                TunnelSocketType::Connected { connected_to } => {
+                    let Some((_, other)) =
+                        db.tunnel_sockets.remove(&connected_to)
+                    else {
+                        continue;
+                    };
+                    let Some(other_user) = db.sockets.get(&other.owner) else {
+                        continue;
+                    };
+                    let _ = send_message(
+                        &other_user,
+                        &ServerToClientMessage::SocketClosed {
+                            socket: connected_to,
+                        },
+                    )
+                    .await;
+                }
+            }
+        }
     }
 
     Ok(())
diff --git a/apps/labrinth/src/routes/maven.rs b/apps/labrinth/src/routes/maven.rs
index 193b5b0f9..bf0247848 100644
--- a/apps/labrinth/src/routes/maven.rs
+++ b/apps/labrinth/src/routes/maven.rs
@@ -164,7 +164,7 @@ async fn find_version(
     pool: &PgPool,
     redis: &RedisPool,
 ) -> Result<Option<QueryVersion>, ApiError> {
-    let id_option = crate::models::ids::base62_impl::parse_base62(vcoords)
+    let id_option = ariadne::ids::base62_impl::parse_base62(vcoords)
         .ok()
         .map(|x| x as i64);
 
diff --git a/apps/labrinth/src/routes/mod.rs b/apps/labrinth/src/routes/mod.rs
index 79d2cc4c6..39337d5f3 100644
--- a/apps/labrinth/src/routes/mod.rs
+++ b/apps/labrinth/src/routes/mod.rs
@@ -12,6 +12,9 @@ pub mod internal;
 pub mod v2;
 pub mod v3;
 
+#[cfg(not(target_env = "msvc"))]
+pub mod debug;
+
 pub mod v2_reroute;
 
 mod analytics;
@@ -117,7 +120,7 @@ pub enum ApiError {
     #[error("Captcha Error. Try resubmitting the form.")]
     Turnstile,
     #[error("Error while decoding Base62: {0}")]
-    Decoding(#[from] crate::models::ids::DecodingError),
+    Decoding(#[from] ariadne::ids::DecodingError),
     #[error("Image Parsing Error: {0}")]
     ImageParse(#[from] image::ImageError),
     #[error("Password Hashing Error: {0}")]
diff --git a/apps/labrinth/src/routes/v2/users.rs b/apps/labrinth/src/routes/v2/users.rs
index 573af4300..065a2e14e 100644
--- a/apps/labrinth/src/routes/v2/users.rs
+++ b/apps/labrinth/src/routes/v2/users.rs
@@ -85,11 +85,13 @@ pub async fn users_get(
 
 #[get("{id}")]
 pub async fn user_get(
+    req: HttpRequest,
     info: web::Path<(String,)>,
     pool: web::Data<PgPool>,
     redis: web::Data<RedisPool>,
+    session_queue: web::Data<AuthQueue>,
 ) -> Result<HttpResponse, ApiError> {
-    let response = v3::users::user_get(info, pool, redis)
+    let response = v3::users::user_get(req, info, pool, redis, session_queue)
         .await
         .or_else(v2_reroute::flatten_404_error)?;
 
diff --git a/apps/labrinth/src/routes/v3/analytics_get.rs b/apps/labrinth/src/routes/v3/analytics_get.rs
index a31e753b4..85a3de60c 100644
--- a/apps/labrinth/src/routes/v3/analytics_get.rs
+++ b/apps/labrinth/src/routes/v3/analytics_get.rs
@@ -6,12 +6,13 @@ use crate::{
     auth::get_user_from_headers,
     database::models::user_item,
     models::{
-        ids::{base62_impl::to_base62, ProjectId, VersionId},
+        ids::{ProjectId, VersionId},
         pats::Scopes,
     },
     queue::session::AuthQueue,
 };
 use actix_web::{web, HttpRequest, HttpResponse};
+use ariadne::ids::base62_impl::to_base62;
 use chrono::{DateTime, Duration, Utc};
 use serde::{Deserialize, Serialize};
 use sqlx::postgres::types::PgInterval;
diff --git a/apps/labrinth/src/routes/v3/collections.rs b/apps/labrinth/src/routes/v3/collections.rs
index 6a9f19e39..0d6a0c312 100644
--- a/apps/labrinth/src/routes/v3/collections.rs
+++ b/apps/labrinth/src/routes/v3/collections.rs
@@ -6,7 +6,6 @@ use crate::database::models::{
 use crate::database::redis::RedisPool;
 use crate::file_hosting::FileHost;
 use crate::models::collections::{Collection, CollectionStatus};
-use crate::models::ids::base62_impl::parse_base62;
 use crate::models::ids::{CollectionId, ProjectId};
 use crate::models::pats::Scopes;
 use crate::queue::session::AuthQueue;
@@ -18,6 +17,7 @@ use crate::util::validate::validation_errors_to_string;
 use crate::{database, models};
 use actix_web::web::Data;
 use actix_web::{web, HttpRequest, HttpResponse};
+use ariadne::ids::base62_impl::parse_base62;
 use chrono::Utc;
 use itertools::Itertools;
 use serde::{Deserialize, Serialize};
diff --git a/apps/labrinth/src/routes/v3/friends.rs b/apps/labrinth/src/routes/v3/friends.rs
index 552e75831..1f7453236 100644
--- a/apps/labrinth/src/routes/v3/friends.rs
+++ b/apps/labrinth/src/routes/v3/friends.rs
@@ -5,9 +5,10 @@ use crate::models::pats::Scopes;
 use crate::models::users::UserFriend;
 use crate::queue::session::AuthQueue;
 use crate::queue::socket::ActiveSockets;
-use crate::routes::internal::statuses::{close_socket, ServerToClientMessage};
+use crate::routes::internal::statuses::send_message_to_user;
 use crate::routes::ApiError;
 use actix_web::{delete, get, post, web, HttpRequest, HttpResponse};
+use ariadne::networking::message::ServerToClientMessage;
 use chrono::Utc;
 use sqlx::PgPool;
 
@@ -76,22 +77,16 @@ pub async fn add_friend(
                 friend_id: UserId,
                 sockets: &ActiveSockets,
             ) -> Result<(), ApiError> {
-                if let Some(pair) = sockets.auth_sockets.get(&user_id.into()) {
-                    let (friend_status, _) = pair.value();
-                    if let Some(socket) =
-                        sockets.auth_sockets.get(&friend_id.into())
-                    {
-                        let (_, socket) = socket.value();
-
-                        let _ = socket
-                            .clone()
-                            .text(serde_json::to_string(
-                                &ServerToClientMessage::StatusUpdate {
-                                    status: friend_status.clone(),
-                                },
-                            )?)
-                            .await;
-                    }
+                if let Some(friend_status) = sockets.get_status(user_id.into())
+                {
+                    send_message_to_user(
+                        sockets,
+                        friend_id.into(),
+                        &ServerToClientMessage::StatusUpdate {
+                            status: friend_status.clone(),
+                        },
+                    )
+                    .await?;
                 }
 
                 Ok(())
@@ -121,20 +116,12 @@ pub async fn add_friend(
             .insert(&mut transaction)
             .await?;
 
-            if let Some(socket) = db.auth_sockets.get(&friend.id.into()) {
-                let (_, socket) = socket.value();
-
-                if socket
-                    .clone()
-                    .text(serde_json::to_string(
-                        &ServerToClientMessage::FriendRequest { from: user.id },
-                    )?)
-                    .await
-                    .is_err()
-                {
-                    close_socket(user.id, &pool, &db).await?;
-                }
-            }
+            send_message_to_user(
+                &db,
+                friend.id.into(),
+                &ServerToClientMessage::FriendRequest { from: user.id },
+            )
+            .await?;
         }
 
         transaction.commit().await?;
@@ -178,18 +165,12 @@ pub async fn remove_friend(
         )
         .await?;
 
-        if let Some(socket) = db.auth_sockets.get(&friend.id.into()) {
-            let (_, socket) = socket.value();
-
-            let _ = socket
-                .clone()
-                .text(serde_json::to_string(
-                    &ServerToClientMessage::FriendRequestRejected {
-                        from: user.id,
-                    },
-                )?)
-                .await;
-        }
+        send_message_to_user(
+            &db,
+            friend.id.into(),
+            &ServerToClientMessage::FriendRequestRejected { from: user.id },
+        )
+        .await?;
 
         transaction.commit().await?;
 
diff --git a/apps/labrinth/src/routes/v3/oauth_clients.rs b/apps/labrinth/src/routes/v3/oauth_clients.rs
index 3a9648f9f..b196b5108 100644
--- a/apps/labrinth/src/routes/v3/oauth_clients.rs
+++ b/apps/labrinth/src/routes/v3/oauth_clients.rs
@@ -1,18 +1,5 @@
 use std::{collections::HashSet, fmt::Display, sync::Arc};
 
-use actix_web::{
-    delete, get, patch, post,
-    web::{self, scope},
-    HttpRequest, HttpResponse,
-};
-use chrono::Utc;
-use itertools::Itertools;
-use rand::{distributions::Alphanumeric, Rng, SeedableRng};
-use rand_chacha::ChaCha20Rng;
-use serde::{Deserialize, Serialize};
-use sqlx::PgPool;
-use validator::Validate;
-
 use super::ApiError;
 use crate::{
     auth::{checks::ValidateAuthorized, get_user_from_headers},
@@ -35,13 +22,22 @@ use crate::{
     util::validate::validation_errors_to_string,
 };
 use crate::{
-    file_hosting::FileHost,
-    models::{
-        ids::base62_impl::parse_base62,
-        oauth_clients::DeleteOAuthClientQueryParam,
-    },
+    file_hosting::FileHost, models::oauth_clients::DeleteOAuthClientQueryParam,
     util::routes::read_from_payload,
 };
+use actix_web::{
+    delete, get, patch, post,
+    web::{self, scope},
+    HttpRequest, HttpResponse,
+};
+use ariadne::ids::base62_impl::parse_base62;
+use chrono::Utc;
+use itertools::Itertools;
+use rand::{distributions::Alphanumeric, Rng, SeedableRng};
+use rand_chacha::ChaCha20Rng;
+use serde::{Deserialize, Serialize};
+use sqlx::PgPool;
+use validator::Validate;
 
 use crate::database::models::oauth_client_item::OAuthClient as DBOAuthClient;
 use crate::models::ids::OAuthClientId as ApiOAuthClientId;
diff --git a/apps/labrinth/src/routes/v3/organizations.rs b/apps/labrinth/src/routes/v3/organizations.rs
index 0307341b3..06711e746 100644
--- a/apps/labrinth/src/routes/v3/organizations.rs
+++ b/apps/labrinth/src/routes/v3/organizations.rs
@@ -9,7 +9,6 @@ use crate::database::models::{
 };
 use crate::database::redis::RedisPool;
 use crate::file_hosting::FileHost;
-use crate::models::ids::base62_impl::parse_base62;
 use crate::models::ids::UserId;
 use crate::models::organizations::OrganizationId;
 use crate::models::pats::Scopes;
@@ -21,6 +20,7 @@ use crate::util::routes::read_from_payload;
 use crate::util::validate::validation_errors_to_string;
 use crate::{database, models};
 use actix_web::{web, HttpRequest, HttpResponse};
+use ariadne::ids::base62_impl::parse_base62;
 use futures::TryStreamExt;
 use rust_decimal::Decimal;
 use serde::{Deserialize, Serialize};
@@ -786,7 +786,7 @@ pub async fn organization_projects_add(
 
         let organization_owner_user_id = sqlx::query!(
             "
-            SELECT u.id 
+            SELECT u.id
             FROM team_members
             INNER JOIN users u ON u.id = team_members.user_id
             WHERE team_id = $1 AND is_owner = TRUE
@@ -969,7 +969,7 @@ pub async fn organization_projects_remove(
         sqlx::query!(
             "
             UPDATE team_members
-            SET 
+            SET
                 is_owner = TRUE,
                 accepted = TRUE,
                 permissions = $2,
diff --git a/apps/labrinth/src/routes/v3/payouts.rs b/apps/labrinth/src/routes/v3/payouts.rs
index ad5636de1..1ed74e323 100644
--- a/apps/labrinth/src/routes/v3/payouts.rs
+++ b/apps/labrinth/src/routes/v3/payouts.rs
@@ -9,7 +9,7 @@ use crate::queue::payouts::{make_aditude_request, PayoutsQueue};
 use crate::queue::session::AuthQueue;
 use crate::routes::ApiError;
 use actix_web::{delete, get, post, web, HttpRequest, HttpResponse};
-use chrono::{Datelike, Duration, TimeZone, Utc, Weekday};
+use chrono::{DateTime, Datelike, Duration, TimeZone, Utc, Weekday};
 use hex::ToHex;
 use hmac::{Hmac, Mac, NewMac};
 use reqwest::Method;
@@ -763,6 +763,7 @@ pub async fn payment_methods(
 pub struct UserBalance {
     pub available: Decimal,
     pub pending: Decimal,
+    pub dates: HashMap<DateTime<Utc>, Decimal>,
 }
 
 #[get("balance")]
@@ -791,27 +792,27 @@ async fn get_user_balance(
     user_id: crate::database::models::ids::UserId,
     pool: &PgPool,
 ) -> Result<UserBalance, sqlx::Error> {
-    let available = sqlx::query!(
+    let payouts = sqlx::query!(
         "
-        SELECT SUM(amount)
+        SELECT date_available, SUM(amount) sum
         FROM payouts_values
-        WHERE user_id = $1 AND date_available <= NOW()
+        WHERE user_id = $1
+        GROUP BY date_available
+        ORDER BY date_available DESC
         ",
         user_id.0
     )
-    .fetch_optional(pool)
+    .fetch_all(pool)
     .await?;
 
-    let pending = sqlx::query!(
-        "
-        SELECT SUM(amount)
-        FROM payouts_values
-        WHERE user_id = $1 AND date_available > NOW()
-        ",
-        user_id.0
-    )
-    .fetch_optional(pool)
-    .await?;
+    let available = payouts
+        .iter()
+        .filter(|x| x.date_available <= Utc::now())
+        .fold(Decimal::ZERO, |acc, x| acc + x.sum.unwrap_or(Decimal::ZERO));
+    let pending = payouts
+        .iter()
+        .filter(|x| x.date_available > Utc::now())
+        .fold(Decimal::ZERO, |acc, x| acc + x.sum.unwrap_or(Decimal::ZERO));
 
     let withdrawn = sqlx::query!(
         "
@@ -824,12 +825,6 @@ async fn get_user_balance(
     .fetch_optional(pool)
     .await?;
 
-    let available = available
-        .map(|x| x.sum.unwrap_or(Decimal::ZERO))
-        .unwrap_or(Decimal::ZERO);
-    let pending = pending
-        .map(|x| x.sum.unwrap_or(Decimal::ZERO))
-        .unwrap_or(Decimal::ZERO);
     let (withdrawn, fees) = withdrawn
         .map(|x| {
             (
@@ -844,6 +839,10 @@ async fn get_user_balance(
             - withdrawn.round_dp(16)
             - fees.round_dp(16),
         pending,
+        dates: payouts
+            .iter()
+            .map(|x| (x.date_available, x.sum.unwrap_or(Decimal::ZERO)))
+            .collect(),
     })
 }
 
diff --git a/apps/labrinth/src/routes/v3/project_creation.rs b/apps/labrinth/src/routes/v3/project_creation.rs
index 31d751205..fcd1507e8 100644
--- a/apps/labrinth/src/routes/v3/project_creation.rs
+++ b/apps/labrinth/src/routes/v3/project_creation.rs
@@ -8,7 +8,6 @@ use crate::database::models::{self, image_item, User};
 use crate::database::redis::RedisPool;
 use crate::file_hosting::{FileHost, FileHostingError};
 use crate::models::error::ApiError;
-use crate::models::ids::base62_impl::to_base62;
 use crate::models::ids::{ImageId, OrganizationId};
 use crate::models::images::{Image, ImageContext};
 use crate::models::pats::Scopes;
@@ -28,6 +27,7 @@ use actix_multipart::{Field, Multipart};
 use actix_web::http::StatusCode;
 use actix_web::web::{self, Data};
 use actix_web::{HttpRequest, HttpResponse};
+use ariadne::ids::base62_impl::to_base62;
 use chrono::Utc;
 use futures::stream::StreamExt;
 use image::ImageError;
@@ -86,8 +86,6 @@ pub enum CreateError {
     CustomAuthenticationError(String),
     #[error("Image Parsing Error: {0}")]
     ImageError(#[from] ImageError),
-    #[error("Reroute Error: {0}")]
-    RerouteError(#[from] reqwest::Error),
 }
 
 impl actix_web::ResponseError for CreateError {
@@ -119,7 +117,6 @@ impl actix_web::ResponseError for CreateError {
             CreateError::ValidationError(..) => StatusCode::BAD_REQUEST,
             CreateError::FileValidationError(..) => StatusCode::BAD_REQUEST,
             CreateError::ImageError(..) => StatusCode::BAD_REQUEST,
-            CreateError::RerouteError(..) => StatusCode::INTERNAL_SERVER_ERROR,
         }
     }
 
@@ -146,7 +143,6 @@ impl actix_web::ResponseError for CreateError {
                 CreateError::ValidationError(..) => "invalid_input",
                 CreateError::FileValidationError(..) => "invalid_input",
                 CreateError::ImageError(..) => "invalid_image",
-                CreateError::RerouteError(..) => "reroute_error",
             },
             description: self.to_string(),
         })
diff --git a/apps/labrinth/src/routes/v3/projects.rs b/apps/labrinth/src/routes/v3/projects.rs
index 0a47aea2c..237e3b223 100644
--- a/apps/labrinth/src/routes/v3/projects.rs
+++ b/apps/labrinth/src/routes/v3/projects.rs
@@ -11,7 +11,6 @@ use crate::database::redis::RedisPool;
 use crate::database::{self, models as db_models};
 use crate::file_hosting::FileHost;
 use crate::models;
-use crate::models::ids::base62_impl::parse_base62;
 use crate::models::images::ImageContext;
 use crate::models::notifications::NotificationBody;
 use crate::models::pats::Scopes;
@@ -30,6 +29,7 @@ use crate::util::img::{delete_old_images, upload_image_optimized};
 use crate::util::routes::read_from_payload;
 use crate::util::validate::validation_errors_to_string;
 use actix_web::{web, HttpRequest, HttpResponse};
+use ariadne::ids::base62_impl::parse_base62;
 use chrono::Utc;
 use futures::TryStreamExt;
 use itertools::Itertools;
diff --git a/apps/labrinth/src/routes/v3/reports.rs b/apps/labrinth/src/routes/v3/reports.rs
index 1af674627..710cce740 100644
--- a/apps/labrinth/src/routes/v3/reports.rs
+++ b/apps/labrinth/src/routes/v3/reports.rs
@@ -6,9 +6,7 @@ use crate::database::models::thread_item::{
 };
 use crate::database::redis::RedisPool;
 use crate::models::ids::ImageId;
-use crate::models::ids::{
-    base62_impl::parse_base62, ProjectId, UserId, VersionId,
-};
+use crate::models::ids::{ProjectId, UserId, VersionId};
 use crate::models::images::{Image, ImageContext};
 use crate::models::pats::Scopes;
 use crate::models::reports::{ItemType, Report};
@@ -17,6 +15,7 @@ use crate::queue::session::AuthQueue;
 use crate::routes::ApiError;
 use crate::util::img;
 use actix_web::{web, HttpRequest, HttpResponse};
+use ariadne::ids::base62_impl::parse_base62;
 use chrono::Utc;
 use futures::StreamExt;
 use serde::Deserialize;
diff --git a/apps/labrinth/src/routes/v3/users.rs b/apps/labrinth/src/routes/v3/users.rs
index f0aafe265..a0f4111ac 100644
--- a/apps/labrinth/src/routes/v3/users.rs
+++ b/apps/labrinth/src/routes/v3/users.rs
@@ -28,6 +28,7 @@ use crate::{
 pub fn config(cfg: &mut web::ServiceConfig) {
     cfg.route("user", web::get().to(user_auth_get));
     cfg.route("users", web::get().to(users_get));
+    cfg.route("user_email", web::get().to(admin_user_email));
 
     cfg.service(
         web::scope("user")
@@ -44,6 +45,62 @@ pub fn config(cfg: &mut web::ServiceConfig) {
     );
 }
 
+#[derive(Deserialize)]
+pub struct UserEmailQuery {
+    pub email: String,
+}
+
+pub async fn admin_user_email(
+    req: HttpRequest,
+    pool: web::Data<PgPool>,
+    redis: web::Data<RedisPool>,
+    session_queue: web::Data<AuthQueue>,
+    email: web::Query<UserEmailQuery>,
+) -> Result<HttpResponse, ApiError> {
+    let user = get_user_from_headers(
+        &req,
+        &**pool,
+        &redis,
+        &session_queue,
+        Some(&[Scopes::SESSION_ACCESS]),
+    )
+    .await
+    .map(|x| x.1)?;
+
+    if !user.role.is_admin() {
+        return Err(ApiError::CustomAuthentication(
+            "You do not have permission to get a user from their email!"
+                .to_string(),
+        ));
+    }
+
+    let user_id = sqlx::query!(
+        "
+        SELECT id FROM users
+        WHERE LOWER(email) = LOWER($1)
+        ",
+        email.email
+    )
+    .fetch_optional(&**pool)
+    .await?
+    .map(|x| x.id)
+    .ok_or_else(|| {
+        ApiError::InvalidInput(
+            "The email provided is not associated with a user!".to_string(),
+        )
+    })?;
+
+    let user =
+        User::get_id(crate::database::models::UserId(user_id), &**pool, &redis)
+            .await?;
+
+    if let Some(user) = user {
+        Ok(HttpResponse::Ok().json(user))
+    } else {
+        Err(ApiError::NotFound)
+    }
+}
+
 pub async fn projects_list(
     req: HttpRequest,
     info: web::Path<(String,)>,
@@ -128,14 +185,33 @@ pub async fn users_get(
 }
 
 pub async fn user_get(
+    req: HttpRequest,
     info: web::Path<(String,)>,
     pool: web::Data<PgPool>,
     redis: web::Data<RedisPool>,
+    session_queue: web::Data<AuthQueue>,
 ) -> Result<HttpResponse, ApiError> {
     let user_data = User::get(&info.into_inner().0, &**pool, &redis).await?;
 
     if let Some(data) = user_data {
-        let response: crate::models::users::User = data.into();
+        let auth_user = get_user_from_headers(
+            &req,
+            &**pool,
+            &redis,
+            &session_queue,
+            Some(&[Scopes::SESSION_ACCESS]),
+        )
+        .await
+        .map(|x| x.1)
+        .ok();
+
+        let response: crate::models::users::User =
+            if auth_user.map(|x| x.role.is_admin()).unwrap_or(false) {
+                crate::models::users::User::from_full(data)
+            } else {
+                data.into()
+            };
+
         Ok(HttpResponse::Ok().json(response))
     } else {
         Err(ApiError::NotFound)
diff --git a/apps/labrinth/src/routes/v3/version_creation.rs b/apps/labrinth/src/routes/v3/version_creation.rs
index 5382d1afa..0b91cd0e4 100644
--- a/apps/labrinth/src/routes/v3/version_creation.rs
+++ b/apps/labrinth/src/routes/v3/version_creation.rs
@@ -31,11 +31,11 @@ use actix_web::{web, HttpRequest, HttpResponse};
 use chrono::Utc;
 use futures::stream::StreamExt;
 use itertools::Itertools;
-use log::error;
 use serde::{Deserialize, Serialize};
 use sqlx::postgres::PgPool;
 use std::collections::{HashMap, HashSet};
 use std::sync::Arc;
+use tracing::error;
 use validator::Validate;
 
 fn default_requested_status() -> VersionStatus {
@@ -985,7 +985,7 @@ pub async fn upload_file(
 
     let client = reqwest::Client::new();
     let delphi_url = dotenvy::var("DELPHI_URL")?;
-    let res = client
+    match client
         .post(delphi_url)
         .json(&serde_json::json!({
             "url": url,
@@ -993,10 +993,16 @@ pub async fn upload_file(
             "version_id": version_id,
         }))
         .send()
-        .await?;
-
-    if !res.status().is_success() {
-        error!("Failed to upload file to Delphi: {url}");
+        .await
+    {
+        Ok(res) => {
+            if !res.status().is_success() {
+                error!("Failed to upload file to Delphi: {url}");
+            }
+        }
+        Err(e) => {
+            error!("Failed to upload file to Delphi: {url}: {e}");
+        }
     }
 
     version_files.push(VersionFileBuilder {
diff --git a/apps/labrinth/src/routes/v3/versions.rs b/apps/labrinth/src/routes/v3/versions.rs
index ac27a075c..cd9ff36d4 100644
--- a/apps/labrinth/src/routes/v3/versions.rs
+++ b/apps/labrinth/src/routes/v3/versions.rs
@@ -13,7 +13,6 @@ use crate::database::models::version_item::{DependencyBuilder, LoaderVersion};
 use crate::database::models::{image_item, Organization};
 use crate::database::redis::RedisPool;
 use crate::models;
-use crate::models::ids::base62_impl::parse_base62;
 use crate::models::ids::VersionId;
 use crate::models::images::ImageContext;
 use crate::models::pats::Scopes;
@@ -28,6 +27,7 @@ use crate::search::SearchConfig;
 use crate::util::img;
 use crate::util::validate::validation_errors_to_string;
 use actix_web::{web, HttpRequest, HttpResponse};
+use ariadne::ids::base62_impl::parse_base62;
 use itertools::Itertools;
 use serde::{Deserialize, Serialize};
 use sqlx::PgPool;
@@ -444,7 +444,7 @@ pub async fn version_edit_helper(
                     .collect::<Vec<i32>>();
                 sqlx::query!(
                     "
-                    DELETE FROM version_fields 
+                    DELETE FROM version_fields
                     WHERE version_id = $1
                     AND field_id = ANY($2)
                     ",
diff --git a/apps/labrinth/src/scheduler.rs b/apps/labrinth/src/scheduler.rs
index 7bc5e5195..f94540392 100644
--- a/apps/labrinth/src/scheduler.rs
+++ b/apps/labrinth/src/scheduler.rs
@@ -36,7 +36,7 @@ impl Drop for Scheduler {
     }
 }
 
-use log::{info, warn};
+use tracing::{info, warn};
 
 pub fn schedule_versions(
     scheduler: &mut Scheduler,
diff --git a/apps/labrinth/src/search/indexing/local_import.rs b/apps/labrinth/src/search/indexing/local_import.rs
index 4306888f3..c9b2eeaea 100644
--- a/apps/labrinth/src/search/indexing/local_import.rs
+++ b/apps/labrinth/src/search/indexing/local_import.rs
@@ -2,8 +2,8 @@ use chrono::{DateTime, Utc};
 use dashmap::DashMap;
 use futures::TryStreamExt;
 use itertools::Itertools;
-use log::info;
 use std::collections::HashMap;
+use tracing::info;
 
 use super::IndexingError;
 use crate::database::models::loader_fields::{
diff --git a/apps/labrinth/src/search/indexing/mod.rs b/apps/labrinth/src/search/indexing/mod.rs
index 0c5648530..3f4dcdee9 100644
--- a/apps/labrinth/src/search/indexing/mod.rs
+++ b/apps/labrinth/src/search/indexing/mod.rs
@@ -2,15 +2,15 @@
 pub mod local_import;
 
 use crate::database::redis::RedisPool;
-use crate::models::ids::base62_impl::to_base62;
 use crate::search::{SearchConfig, UploadSearchProject};
+use ariadne::ids::base62_impl::to_base62;
 use local_import::index_local;
-use log::info;
 use meilisearch_sdk::client::{Client, SwapIndexes};
 use meilisearch_sdk::indexes::Index;
 use meilisearch_sdk::settings::{PaginationSetting, Settings};
 use sqlx::postgres::PgPool;
 use thiserror::Error;
+use tracing::info;
 #[derive(Error, Debug)]
 pub enum IndexingError {
     #[error("Error while connecting to the MeiliSearch database")]
diff --git a/apps/labrinth/src/util/cors.rs b/apps/labrinth/src/util/cors.rs
index 5f35b2bc5..15bd1c632 100644
--- a/apps/labrinth/src/util/cors.rs
+++ b/apps/labrinth/src/util/cors.rs
@@ -1,5 +1,6 @@
 use actix_cors::Cors;
 
+// Updating this? Remember to update the ratelimit CORS too!
 pub fn default_cors() -> Cors {
     Cors::default()
         .allow_any_origin()
diff --git a/apps/labrinth/src/util/img.rs b/apps/labrinth/src/util/img.rs
index 4e5cb24fb..f20339a63 100644
--- a/apps/labrinth/src/util/img.rs
+++ b/apps/labrinth/src/util/img.rs
@@ -25,7 +25,7 @@ pub fn get_color_from_img(data: &[u8]) -> Result<Option<u32>, ImageError> {
     )
     .ok()
     .and_then(|x| x.first().copied())
-    .map(|x| (x.r as u32) << 16 | (x.g as u32) << 8 | (x.b as u32));
+    .map(|x| ((x.r as u32) << 16) | ((x.g as u32) << 8) | (x.b as u32));
 
     Ok(color)
 }
diff --git a/apps/labrinth/src/util/ratelimit.rs b/apps/labrinth/src/util/ratelimit.rs
index f20fb51f3..aa3fd81ff 100644
--- a/apps/labrinth/src/util/ratelimit.rs
+++ b/apps/labrinth/src/util/ratelimit.rs
@@ -168,6 +168,15 @@ where
                         wait_time.as_secs().into(),
                     );
 
+                    // TODO: Sentralize CORS in the CORS util.
+                    headers.insert(
+                        actix_web::http::header::HeaderName::from_str(
+                            "Access-Control-Allow-Origin",
+                        )
+                        .unwrap(),
+                        "*".parse().unwrap(),
+                    );
+
                     Box::pin(async {
                         Ok(req.into_response(response.map_into_right_body()))
                     })
diff --git a/apps/labrinth/src/util/webhook.rs b/apps/labrinth/src/util/webhook.rs
index 70ab62dc9..1f6a476b5 100644
--- a/apps/labrinth/src/util/webhook.rs
+++ b/apps/labrinth/src/util/webhook.rs
@@ -1,8 +1,8 @@
 use crate::database::models::legacy_loader_fields::MinecraftGameVersion;
 use crate::database::redis::RedisPool;
-use crate::models::ids::base62_impl::to_base62;
 use crate::models::projects::ProjectId;
 use crate::routes::ApiError;
+use ariadne::ids::base62_impl::to_base62;
 use chrono::{DateTime, Utc};
 use serde::Serialize;
 use sqlx::PgPool;
diff --git a/apps/labrinth/tests/analytics.rs b/apps/labrinth/tests/analytics.rs
index 96e2a440a..5c591c21c 100644
--- a/apps/labrinth/tests/analytics.rs
+++ b/apps/labrinth/tests/analytics.rs
@@ -1,3 +1,4 @@
+use ariadne::ids::base62_impl::parse_base62;
 use chrono::{DateTime, Duration, Utc};
 use common::permissions::PermissionsTest;
 use common::permissions::PermissionsTestContext;
@@ -7,7 +8,6 @@ use common::{
     environment::{with_test_environment, TestEnvironment},
 };
 use itertools::Itertools;
-use labrinth::models::ids::base62_impl::parse_base62;
 use labrinth::models::teams::ProjectPermissions;
 use labrinth::queue::payouts;
 use rust_decimal::{prelude::ToPrimitive, Decimal};
diff --git a/apps/labrinth/tests/project.rs b/apps/labrinth/tests/project.rs
index 11c63abbc..8ee34ca20 100644
--- a/apps/labrinth/tests/project.rs
+++ b/apps/labrinth/tests/project.rs
@@ -4,6 +4,7 @@ use common::api_v3::ApiV3;
 use common::database::*;
 use common::dummy_data::DUMMY_CATEGORIES;
 
+use ariadne::ids::base62_impl::parse_base62;
 use common::environment::{
     with_test_environment, with_test_environment_all, TestEnvironment,
 };
@@ -12,7 +13,6 @@ use futures::StreamExt;
 use labrinth::database::models::project_item::{
     PROJECTS_NAMESPACE, PROJECTS_SLUGS_NAMESPACE,
 };
-use labrinth::models::ids::base62_impl::parse_base62;
 use labrinth::models::projects::ProjectId;
 use labrinth::models::teams::ProjectPermissions;
 use labrinth::util::actix::{MultipartSegment, MultipartSegmentData};
diff --git a/apps/labrinth/tests/scopes.rs b/apps/labrinth/tests/scopes.rs
index 1d19d2b4f..460998bf7 100644
--- a/apps/labrinth/tests/scopes.rs
+++ b/apps/labrinth/tests/scopes.rs
@@ -8,6 +8,7 @@ use crate::common::dummy_data::{
 };
 use actix_http::StatusCode;
 use actix_web::test;
+use ariadne::ids::base62_impl::parse_base62;
 use chrono::{Duration, Utc};
 use common::api_common::models::CommonItemType;
 use common::api_common::Api;
@@ -18,7 +19,6 @@ use common::environment::{
     with_test_environment, with_test_environment_all, TestEnvironment,
 };
 use common::{database::*, scopes::ScopeTest};
-use labrinth::models::ids::base62_impl::parse_base62;
 use labrinth::models::pats::Scopes;
 use labrinth::models::projects::ProjectId;
 use labrinth::models::users::UserId;
diff --git a/apps/labrinth/tests/search.rs b/apps/labrinth/tests/search.rs
index d0c5fb14c..722e41898 100644
--- a/apps/labrinth/tests/search.rs
+++ b/apps/labrinth/tests/search.rs
@@ -4,11 +4,11 @@ use common::database::*;
 
 use common::dummy_data::DUMMY_CATEGORIES;
 
+use ariadne::ids::base62_impl::parse_base62;
 use common::environment::with_test_environment;
 use common::environment::TestEnvironment;
 use common::search::setup_search_projects;
 use futures::stream::StreamExt;
-use labrinth::models::ids::base62_impl::parse_base62;
 use serde_json::json;
 
 use crate::common::api_common::Api;
diff --git a/apps/labrinth/tests/v2/project.rs b/apps/labrinth/tests/v2/project.rs
index 5e9006af7..d81f263e4 100644
--- a/apps/labrinth/tests/v2/project.rs
+++ b/apps/labrinth/tests/v2/project.rs
@@ -16,14 +16,12 @@ use crate::{
 };
 use actix_http::StatusCode;
 use actix_web::test;
+use ariadne::ids::base62_impl::parse_base62;
 use futures::StreamExt;
 use itertools::Itertools;
 use labrinth::{
     database::models::project_item::PROJECTS_SLUGS_NAMESPACE,
-    models::{
-        ids::base62_impl::parse_base62, projects::ProjectId,
-        teams::ProjectPermissions,
-    },
+    models::{projects::ProjectId, teams::ProjectPermissions},
     util::actix::{AppendsMultipart, MultipartSegment, MultipartSegmentData},
 };
 use serde_json::json;
diff --git a/apps/labrinth/tests/v2/scopes.rs b/apps/labrinth/tests/v2/scopes.rs
index be53bc20e..693d4af57 100644
--- a/apps/labrinth/tests/v2/scopes.rs
+++ b/apps/labrinth/tests/v2/scopes.rs
@@ -6,7 +6,7 @@ use crate::common::dummy_data::TestFile;
 use crate::common::environment::with_test_environment;
 use crate::common::environment::TestEnvironment;
 use crate::common::scopes::ScopeTest;
-use labrinth::models::ids::base62_impl::parse_base62;
+use ariadne::ids::base62_impl::parse_base62;
 use labrinth::models::pats::Scopes;
 use labrinth::models::projects::ProjectId;
 
diff --git a/apps/labrinth/tests/v2/search.rs b/apps/labrinth/tests/v2/search.rs
index 622bbcab1..09116697f 100644
--- a/apps/labrinth/tests/v2/search.rs
+++ b/apps/labrinth/tests/v2/search.rs
@@ -10,8 +10,8 @@ use crate::common::dummy_data::DUMMY_CATEGORIES;
 use crate::common::environment::with_test_environment;
 use crate::common::environment::TestEnvironment;
 use actix_http::StatusCode;
+use ariadne::ids::base62_impl::parse_base62;
 use futures::stream::StreamExt;
-use labrinth::models::ids::base62_impl::parse_base62;
 use serde_json::json;
 use std::collections::HashMap;
 use std::sync::Arc;
diff --git a/apps/labrinth/tests/version.rs b/apps/labrinth/tests/version.rs
index b085c435d..24a6a71dd 100644
--- a/apps/labrinth/tests/version.rs
+++ b/apps/labrinth/tests/version.rs
@@ -8,13 +8,13 @@ use crate::common::dummy_data::{
 use crate::common::get_json_val_str;
 use actix_http::StatusCode;
 use actix_web::test;
+use ariadne::ids::base62_impl::parse_base62;
 use common::api_v3::ApiV3;
 use common::asserts::assert_common_version_ids;
 use common::database::USER_USER_PAT;
 use common::environment::{with_test_environment, with_test_environment_all};
 use futures::StreamExt;
 use labrinth::database::models::version_item::VERSIONS_NAMESPACE;
-use labrinth::models::ids::base62_impl::parse_base62;
 use labrinth::models::projects::{
     Dependency, DependencyType, VersionId, VersionStatus, VersionType,
 };
diff --git a/package.json b/package.json
index b2c7ca962..575ac166a 100644
--- a/package.json
+++ b/package.json
@@ -6,10 +6,12 @@
     "ui:intl:extract": "pnpm run --filter=@modrinth/ui intl:extract",
     "web:dev": "turbo run dev --filter=@modrinth/frontend",
     "web:build": "turbo run build --filter=@modrinth/frontend",
+    "web:fix": "turbo run fix --filter=@modrinth/frontend",
     "web:intl:extract": "pnpm run --filter=@modrinth/frontend intl:extract",
     "app:dev": "turbo run dev --filter=@modrinth/app",
     "docs:dev": "turbo run dev --filter=@modrinth/docs",
     "app:build": "turbo run build --filter=@modrinth/app",
+    "app:fix": "turbo run fix --filter=@modrinth/app",
     "app:intl:extract": "pnpm run --filter=@modrinth/app-frontend intl:extract",
     "pages:build": "NITRO_PRESET=cloudflare-pages pnpm --filter frontend run build",
     "build": "turbo run build --continue",
diff --git a/packages/app-lib/.cargo/config.toml b/packages/app-lib/.cargo/config.toml
new file mode 100644
index 000000000..19f0a3a5a
--- /dev/null
+++ b/packages/app-lib/.cargo/config.toml
@@ -0,0 +1,2 @@
+[env]
+SQLX_OFFLINE = "true"
diff --git a/packages/app-lib/Cargo.toml b/packages/app-lib/Cargo.toml
index dcf0b6ae7..eb098779f 100644
--- a/packages/app-lib/Cargo.toml
+++ b/packages/app-lib/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "theseus"
-version = "0.9.2"
+version = "0.9.3"
 authors = ["Jai A <jaiagr+gpg@pm.me>"]
 edition = "2021"
 
@@ -29,6 +29,7 @@ regex = "1.5"
 sys-info = "0.9.0"
 sysinfo = "0.30.8"
 thiserror = "1.0"
+either = "1.13"
 
 tracing = "0.1.37"
 tracing-subscriber = { version = "0.3.18", features = ["chrono", "env-filter"] }
@@ -62,6 +63,8 @@ base64 = "0.22.0"
 
 sqlx = { version = "0.8.2", features = [ "runtime-tokio", "sqlite", "macros" ] }
 
+ariadne = { path = "../ariadne" }
+
 [target.'cfg(windows)'.dependencies]
 winreg = "0.52.0"
 
diff --git a/packages/app-lib/src/api/friends.rs b/packages/app-lib/src/api/friends.rs
index e221cf56b..0fe883e01 100644
--- a/packages/app-lib/src/api/friends.rs
+++ b/packages/app-lib/src/api/friends.rs
@@ -1,4 +1,5 @@
-use crate::state::{FriendsSocket, UserFriend, UserStatus};
+use crate::state::{FriendsSocket, UserFriend};
+use ariadne::users::UserStatus;
 
 #[tracing::instrument]
 pub async fn friends() -> crate::Result<Vec<UserFriend>> {
diff --git a/packages/app-lib/src/api/mod.rs b/packages/app-lib/src/api/mod.rs
index 643798f0f..81e4c5e67 100644
--- a/packages/app-lib/src/api/mod.rs
+++ b/packages/app-lib/src/api/mod.rs
@@ -19,8 +19,9 @@ pub mod data {
         Hooks, JavaVersion, LinkedData, MemorySettings, ModLoader,
         ModrinthCredentials, Organization, ProcessMetadata, ProfileFile,
         Project, ProjectType, SearchResult, SearchResults, Settings,
-        TeamMember, Theme, User, UserFriend, UserStatus, Version, WindowSize,
+        TeamMember, Theme, User, UserFriend, Version, WindowSize,
     };
+    pub use ariadne::users::UserStatus;
 }
 
 pub mod prelude {
diff --git a/packages/app-lib/src/error.rs b/packages/app-lib/src/error.rs
index fc068e305..9eabe33a7 100644
--- a/packages/app-lib/src/error.rs
+++ b/packages/app-lib/src/error.rs
@@ -13,6 +13,11 @@ pub enum ErrorKind {
     #[error("Serialization error (JSON): {0}")]
     JSONError(#[from] serde_json::Error),
 
+    #[error("Serialization error (websocket): {0}")]
+    WebsocketSerializationError(
+        #[from] ariadne::networking::serialization::SerializationError,
+    ),
+
     #[error("Error parsing UUID: {0}")]
     UUIDError(#[from] uuid::Error),
 
diff --git a/packages/app-lib/src/event/mod.rs b/packages/app-lib/src/event/mod.rs
index 3fc6bd075..0c0ac023e 100644
--- a/packages/app-lib/src/event/mod.rs
+++ b/packages/app-lib/src/event/mod.rs
@@ -1,5 +1,5 @@
 //! Theseus state management system
-use crate::state::UserStatus;
+use ariadne::users::{UserId, UserStatus};
 use dashmap::DashMap;
 use serde::{Deserialize, Serialize};
 use std::{path::PathBuf, sync::Arc};
@@ -262,8 +262,8 @@ pub enum EventError {
 #[serde(rename_all = "snake_case")]
 #[serde(tag = "event")]
 pub enum FriendPayload {
-    FriendRequest { from: String },
-    UserOffline { id: String },
+    FriendRequest { from: UserId },
+    UserOffline { id: UserId },
     StatusUpdate { user_status: UserStatus },
     StatusSync,
 }
diff --git a/packages/app-lib/src/state/dirs.rs b/packages/app-lib/src/state/dirs.rs
index 6a7c3ae7b..cf07ba2cf 100644
--- a/packages/app-lib/src/state/dirs.rs
+++ b/packages/app-lib/src/state/dirs.rs
@@ -209,34 +209,6 @@ impl DirectoryInfo {
                 }
             }
 
-            fn is_same_disk(
-                old_dir: &Path,
-                new_dir: &Path,
-            ) -> crate::Result<bool> {
-                #[cfg(unix)]
-                {
-                    use std::os::unix::fs::MetadataExt;
-                    Ok(old_dir.metadata()?.dev() == new_dir.metadata()?.dev())
-                }
-
-                #[cfg(windows)]
-                {
-                    let old_dir = crate::util::io::canonicalize(old_dir)?;
-                    let new_dir = crate::util::io::canonicalize(new_dir)?;
-
-                    let old_component = old_dir.components().next();
-                    let new_component = new_dir.components().next();
-
-                    match (old_component, new_component) {
-                        (
-                            Some(std::path::Component::Prefix(old)),
-                            Some(std::path::Component::Prefix(new)),
-                        ) => Ok(old.as_os_str() == new.as_os_str()),
-                        _ => Ok(false),
-                    }
-                }
-            }
-
             fn get_disk_usage(path: &Path) -> crate::Result<Option<u64>> {
                 let path = crate::util::io::canonicalize(path)?;
 
@@ -335,7 +307,9 @@ impl DirectoryInfo {
 
                 let paths_len = paths.len();
 
-                if is_same_disk(&prev_dir, &move_dir).unwrap_or(false) {
+                if crate::util::io::is_same_disk(&prev_dir, &move_dir)
+                    .unwrap_or(false)
+                {
                     let success_idxs = Arc::new(DashSet::new());
 
                     let loader_bar_id = Arc::new(&loader_bar_id);
@@ -359,7 +333,7 @@ impl DirectoryInfo {
                                     })?;
                                 }
 
-                                crate::util::io::rename(
+                                crate::util::io::rename_or_move(
                                     &x.old,
                                     &x.new,
                                 )
diff --git a/packages/app-lib/src/state/friends.rs b/packages/app-lib/src/state/friends.rs
index 197590ea8..0775b04dc 100644
--- a/packages/app-lib/src/state/friends.rs
+++ b/packages/app-lib/src/state/friends.rs
@@ -2,28 +2,42 @@ use crate::config::{MODRINTH_API_URL_V3, MODRINTH_SOCKET_URL};
 use crate::data::ModrinthCredentials;
 use crate::event::emit::emit_friend;
 use crate::event::FriendPayload;
-use crate::state::{ProcessManager, Profile};
+use crate::state::tunnel::InternalTunnelSocket;
+use crate::state::{ProcessManager, Profile, TunnelSocket};
 use crate::util::fetch::{fetch_advanced, fetch_json, FetchSemaphore};
+use ariadne::networking::message::{
+    ClientToServerMessage, ServerToClientMessage,
+};
+use ariadne::users::{UserId, UserStatus};
 use async_tungstenite::tokio::{connect_async, ConnectStream};
 use async_tungstenite::tungstenite::client::IntoClientRequest;
 use async_tungstenite::tungstenite::Message;
 use async_tungstenite::WebSocketStream;
 use chrono::{DateTime, Utc};
 use dashmap::DashMap;
+use either::Either;
 use futures::stream::SplitSink;
 use futures::{SinkExt, StreamExt};
 use reqwest::header::HeaderValue;
 use reqwest::Method;
 use serde::{Deserialize, Serialize};
+use std::net::SocketAddr;
+use std::ops::Deref;
 use std::sync::Arc;
-use tokio::sync::RwLock;
+use tokio::io::{AsyncReadExt, AsyncWriteExt};
+use tokio::net::tcp::OwnedReadHalf;
+use tokio::net::TcpStream;
+use tokio::sync::{Mutex, RwLock};
+use uuid::Uuid;
 
-type WriteSocket =
+pub(super) type WriteSocket =
     Arc<RwLock<Option<SplitSink<WebSocketStream<ConnectStream>, Message>>>>;
+pub(super) type TunnelSockets = Arc<DashMap<Uuid, Arc<InternalTunnelSocket>>>;
 
 pub struct FriendsSocket {
     write: WriteSocket,
-    user_statuses: Arc<DashMap<String, UserStatus>>,
+    user_statuses: Arc<DashMap<UserId, UserStatus>>,
+    tunnel_sockets: TunnelSockets,
 }
 
 #[derive(Deserialize, Serialize)]
@@ -34,28 +48,6 @@ pub struct UserFriend {
     pub created: DateTime<Utc>,
 }
 
-#[derive(Serialize)]
-#[serde(tag = "type", rename_all = "snake_case")]
-pub enum ClientToServerMessage {
-    StatusUpdate { profile_name: Option<String> },
-}
-
-#[derive(Deserialize, Debug)]
-#[serde(tag = "type", rename_all = "snake_case")]
-pub enum ServerToClientMessage {
-    StatusUpdate { status: UserStatus },
-    UserOffline { id: String },
-    FriendStatuses { statuses: Vec<UserStatus> },
-    FriendRequest { from: String },
-}
-
-#[derive(Serialize, Deserialize, Clone, Debug)]
-pub struct UserStatus {
-    pub user_id: String,
-    pub profile_name: Option<String>,
-    pub last_update: DateTime<Utc>,
-}
-
 impl Default for FriendsSocket {
     fn default() -> Self {
         Self::new()
@@ -67,6 +59,7 @@ impl FriendsSocket {
         Self {
             write: Arc::new(RwLock::new(None)),
             user_statuses: Arc::new(DashMap::new()),
+            tunnel_sockets: Arc::new(DashMap::new()),
         }
     }
 
@@ -120,6 +113,7 @@ impl FriendsSocket {
 
                     let write_handle = self.write.clone();
                     let statuses = self.user_statuses.clone();
+                    let sockets = self.tunnel_sockets.clone();
 
                     tokio::spawn(async move {
                         let mut read_stream = read;
@@ -128,18 +122,14 @@ impl FriendsSocket {
                                 Ok(msg) => {
                                     let server_message = match msg {
                                         Message::Text(text) => {
-                                            serde_json::from_str::<
-                                                ServerToClientMessage,
-                                            >(
-                                                &text
+                                            ServerToClientMessage::deserialize(
+                                                Either::Left(&text),
                                             )
                                             .ok()
                                         }
                                         Message::Binary(bytes) => {
-                                            serde_json::from_slice::<
-                                                ServerToClientMessage,
-                                            >(
-                                                &bytes
+                                            ServerToClientMessage::deserialize(
+                                                Either::Right(&bytes),
                                             )
                                             .ok()
                                         }
@@ -165,7 +155,7 @@ impl FriendsSocket {
                                     {
                                         match server_message {
                                             ServerToClientMessage::StatusUpdate { status } => {
-                                                statuses.insert(status.user_id.clone(), status.clone());
+                                                statuses.insert(status.user_id, status.clone());
                                                 let _ = emit_friend(FriendPayload::StatusUpdate { user_status: status }).await;
                                             },
                                             ServerToClientMessage::UserOffline { id } => {
@@ -175,13 +165,41 @@ impl FriendsSocket {
                                             ServerToClientMessage::FriendStatuses { statuses: new_statuses } => {
                                                 statuses.clear();
                                                 new_statuses.into_iter().for_each(|status| {
-                                                    statuses.insert(status.user_id.clone(), status);
+                                                    statuses.insert(status.user_id, status);
                                                 });
                                                 let _ = emit_friend(FriendPayload::StatusSync).await;
                                             }
                                             ServerToClientMessage::FriendRequest { from } => {
                                                 let _ = emit_friend(FriendPayload::FriendRequest { from }).await;
                                             }
+                                            ServerToClientMessage::FriendRequestRejected { .. } => todo!(),
+
+                                            ServerToClientMessage::FriendSocketListening { .. } => {}, // TODO
+                                            ServerToClientMessage::FriendSocketStoppedListening { .. } => {}, // TODO
+
+                                            ServerToClientMessage::SocketConnected { to_socket, new_socket } => {
+                                                if let Some(connected_to) = sockets.get(&to_socket) {
+                                                    if let InternalTunnelSocket::Listening(local_addr) = *connected_to.value().clone() {
+                                                        if let Ok(new_stream) = TcpStream::connect(local_addr).await {
+                                                            let (read, write) = new_stream.into_split();
+                                                            sockets.insert(new_socket, Arc::new(InternalTunnelSocket::Connected(Mutex::new(write))));
+                                                            Self::socket_read_loop(write_handle.clone(), read, new_socket);
+                                                            continue;
+                                                        }
+                                                    }
+                                                }
+                                                let _ = Self::send_message(&write_handle, ClientToServerMessage::SocketClose { socket: new_socket }).await;
+                                            },
+                                            ServerToClientMessage::SocketClosed { socket } => {
+                                                sockets.remove_if(&socket, |_, x| matches!(*x.clone(), InternalTunnelSocket::Connected(_)));
+                                            },
+                                            ServerToClientMessage::SocketData { socket, data } => {
+                                                if let Some(mut socket) = sockets.get_mut(&socket) {
+                                                    if let InternalTunnelSocket::Connected(ref stream) = *socket.value_mut().clone() {
+                                                        let _ = stream.lock().await.write_all(&data).await;
+                                                    }
+                                                }
+                                            },
                                         }
                                     }
                                 }
@@ -217,10 +235,7 @@ impl FriendsSocket {
             let mut last_ping = Utc::now();
 
             loop {
-                let connected = {
-                    let read = state.friends_socket.write.read().await;
-                    read.is_some()
-                };
+                let connected = state.friends_socket.is_connected().await;
 
                 if !connected
                     && Utc::now().signed_duration_since(last_connection)
@@ -269,16 +284,11 @@ impl FriendsSocket {
         &self,
         profile_name: Option<String>,
     ) -> crate::Result<()> {
-        let mut write_lock = self.write.write().await;
-        if let Some(ref mut write_half) = *write_lock {
-            write_half
-                .send(Message::Text(serde_json::to_string(
-                    &ClientToServerMessage::StatusUpdate { profile_name },
-                )?))
-                .await?;
-        }
-
-        Ok(())
+        Self::send_message(
+            &self.write,
+            ClientToServerMessage::StatusUpdate { profile_name },
+        )
+        .await
     }
 
     #[tracing::instrument(skip_all)]
@@ -346,4 +356,81 @@ impl FriendsSocket {
 
         Ok(())
     }
+
+    #[tracing::instrument(skip(self))]
+    pub async fn open_port(&self, port: u16) -> crate::Result<TunnelSocket> {
+        let socket_id = Uuid::new_v4();
+        let socket = self.tunnel_sockets.entry(socket_id).insert(Arc::new(
+            InternalTunnelSocket::Listening(SocketAddr::new(
+                "127.0.0.1".parse().unwrap(),
+                port,
+            )),
+        ));
+        Self::send_message(
+            &self.write,
+            ClientToServerMessage::SocketListen { socket: socket_id },
+        )
+        .await?;
+        self.create_tunnel_socket(socket_id, socket)
+    }
+
+    pub async fn is_connected(&self) -> bool {
+        self.write.read().await.is_some()
+    }
+
+    fn create_tunnel_socket(
+        &self,
+        socket_id: Uuid,
+        socket: impl Deref<Target = Arc<InternalTunnelSocket>>,
+    ) -> crate::Result<TunnelSocket> {
+        Ok(TunnelSocket {
+            socket_id,
+            write: self.write.clone(),
+            sockets: self.tunnel_sockets.clone(),
+            internal: socket.clone(),
+        })
+    }
+
+    fn socket_read_loop(
+        write: WriteSocket,
+        mut read_half: OwnedReadHalf,
+        socket_id: Uuid,
+    ) {
+        tokio::spawn(async move {
+            let mut read_buffer = [0u8; 8192];
+            loop {
+                match read_half.read(&mut read_buffer).await {
+                    Ok(0) | Err(_) => break,
+                    Ok(n) => {
+                        let _ = Self::send_message(
+                            &write,
+                            ClientToServerMessage::SocketSend {
+                                socket: socket_id,
+                                data: read_buffer[..n].to_vec(),
+                            },
+                        )
+                        .await;
+                    }
+                };
+            }
+        });
+    }
+
+    #[tracing::instrument(skip(write))]
+    pub(super) async fn send_message(
+        write: &WriteSocket,
+        message: ClientToServerMessage,
+    ) -> crate::Result<()> {
+        let serialized = match message.serialize()? {
+            Either::Left(text) => Message::text(text),
+            Either::Right(bytes) => Message::binary(bytes),
+        };
+
+        let mut write_lock = write.write().await;
+        if let Some(ref mut write_half) = *write_lock {
+            write_half.send(serialized).await?;
+        }
+
+        Ok(())
+    }
 }
diff --git a/packages/app-lib/src/state/mod.rs b/packages/app-lib/src/state/mod.rs
index 56bf7e85f..75f73f689 100644
--- a/packages/app-lib/src/state/mod.rs
+++ b/packages/app-lib/src/state/mod.rs
@@ -34,6 +34,9 @@ pub use self::cache::*;
 mod friends;
 pub use self::friends::*;
 
+mod tunnel;
+pub use self::tunnel::*;
+
 pub mod db;
 pub mod fs_watcher;
 mod mr_auth;
diff --git a/packages/app-lib/src/state/profiles.rs b/packages/app-lib/src/state/profiles.rs
index 4cebf4c06..97b92cf8d 100644
--- a/packages/app-lib/src/state/profiles.rs
+++ b/packages/app-lib/src/state/profiles.rs
@@ -928,7 +928,8 @@ impl Profile {
             format!("{project_path}.disabled")
         };
 
-        io::rename(&path.join(project_path), &path.join(&new_path)).await?;
+        io::rename_or_move(&path.join(project_path), &path.join(&new_path))
+            .await?;
 
         Ok(new_path)
     }
diff --git a/packages/app-lib/src/state/tunnel.rs b/packages/app-lib/src/state/tunnel.rs
new file mode 100644
index 000000000..a6ff41ea4
--- /dev/null
+++ b/packages/app-lib/src/state/tunnel.rs
@@ -0,0 +1,61 @@
+use crate::state::friends::{TunnelSockets, WriteSocket};
+use crate::state::FriendsSocket;
+use ariadne::networking::message::ClientToServerMessage;
+use std::net::SocketAddr;
+use std::sync::Arc;
+use tokio::io::AsyncWriteExt;
+use tokio::net::tcp::OwnedWriteHalf;
+use tokio::sync::Mutex;
+use uuid::Uuid;
+
+pub(super) enum InternalTunnelSocket {
+    Listening(SocketAddr),
+    Connected(Mutex<OwnedWriteHalf>),
+}
+
+pub struct TunnelSocket {
+    pub(super) socket_id: Uuid,
+    pub(super) write: WriteSocket,
+    pub(super) sockets: TunnelSockets,
+    pub(super) internal: Arc<InternalTunnelSocket>,
+}
+
+impl TunnelSocket {
+    pub fn socket_id(&self) -> Uuid {
+        self.socket_id
+    }
+
+    pub async fn shutdown(self) -> crate::Result<()> {
+        if self.sockets.remove(&self.socket_id).is_some() {
+            FriendsSocket::send_message(
+                &self.write,
+                ClientToServerMessage::SocketClose {
+                    socket: self.socket_id,
+                },
+            )
+            .await?;
+            if let InternalTunnelSocket::Connected(ref stream) =
+                *self.internal.clone()
+            {
+                stream.lock().await.shutdown().await?
+            }
+        }
+        Ok(())
+    }
+}
+
+impl Drop for TunnelSocket {
+    fn drop(&mut self) {
+        if self.sockets.remove(&self.socket_id).is_some() {
+            let write = self.write.clone();
+            let socket_id = self.socket_id;
+            tokio::spawn(async move {
+                let _ = FriendsSocket::send_message(
+                    &write,
+                    ClientToServerMessage::SocketClose { socket: socket_id },
+                )
+                .await;
+            });
+        }
+    }
+}
diff --git a/packages/app-lib/src/util/fetch.rs b/packages/app-lib/src/util/fetch.rs
index b82b2cc86..83dd02757 100644
--- a/packages/app-lib/src/util/fetch.rs
+++ b/packages/app-lib/src/util/fetch.rs
@@ -1,4 +1,6 @@
 //! Functions for fetching infromation from the Internet
+use super::io::{self, IOError};
+use crate::config::{MODRINTH_API_URL, MODRINTH_API_URL_V3};
 use crate::event::emit::emit_loading;
 use crate::event::LoadingBarId;
 use bytes::Bytes;
@@ -11,8 +13,6 @@ use std::time::{self};
 use tokio::sync::Semaphore;
 use tokio::{fs::File, io::AsyncWriteExt};
 
-use super::io::{self, IOError};
-
 #[derive(Debug)]
 pub struct IoSemaphore(pub Semaphore);
 #[derive(Debug)]
@@ -87,7 +87,8 @@ pub async fn fetch_advanced(
         .map(|x| &*x.0.to_lowercase() == "authorization")
         .unwrap_or(false)
         && (url.starts_with("https://cdn.modrinth.com")
-            || url.starts_with("https://api.modrinth.com"))
+            || url.starts_with(MODRINTH_API_URL)
+            || url.starts_with(MODRINTH_API_URL_V3))
     {
         crate::state::ModrinthCredentials::get_active(exec).await?
     } else {
diff --git a/packages/app-lib/src/util/io.rs b/packages/app-lib/src/util/io.rs
index f66af2cef..539c0003c 100644
--- a/packages/app-lib/src/util/io.rs
+++ b/packages/app-lib/src/util/io.rs
@@ -59,6 +59,19 @@ pub async fn read_dir(
         })
 }
 
+// create_dir
+pub async fn create_dir(
+    path: impl AsRef<std::path::Path>,
+) -> Result<(), IOError> {
+    let path = path.as_ref();
+    tokio::fs::create_dir(path)
+        .await
+        .map_err(|e| IOError::IOPathError {
+            source: e,
+            path: path.to_string_lossy().to_string(),
+        })
+}
+
 // create_dir_all
 pub async fn create_dir_all(
     path: impl AsRef<std::path::Path>,
@@ -150,19 +163,72 @@ fn sync_write(
     tmp_path.persist(path)?;
     std::io::Result::Ok(())
 }
+
+pub fn is_same_disk(old_dir: &Path, new_dir: &Path) -> Result<bool, IOError> {
+    #[cfg(unix)]
+    {
+        use std::os::unix::fs::MetadataExt;
+        Ok(old_dir.metadata()?.dev() == new_dir.metadata()?.dev())
+    }
+
+    #[cfg(windows)]
+    {
+        let old_dir = canonicalize(old_dir)?;
+        let new_dir = canonicalize(new_dir)?;
+
+        let old_component = old_dir.components().next();
+        let new_component = new_dir.components().next();
+
+        match (old_component, new_component) {
+            (
+                Some(std::path::Component::Prefix(old)),
+                Some(std::path::Component::Prefix(new)),
+            ) => Ok(old.as_os_str() == new.as_os_str()),
+            _ => Ok(false),
+        }
+    }
+}
+
 // rename
-pub async fn rename(
+pub async fn rename_or_move(
     from: impl AsRef<std::path::Path>,
     to: impl AsRef<std::path::Path>,
 ) -> Result<(), IOError> {
     let from = from.as_ref();
     let to = to.as_ref();
-    tokio::fs::rename(from, to)
-        .await
-        .map_err(|e| IOError::IOPathError {
-            source: e,
-            path: from.to_string_lossy().to_string(),
-        })
+
+    if to
+        .parent()
+        .map_or(Ok(false), |to_dir| is_same_disk(from, to_dir))?
+    {
+        tokio::fs::rename(from, to)
+            .await
+            .map_err(|e| IOError::IOPathError {
+                source: e,
+                path: from.to_string_lossy().to_string(),
+            })
+    } else {
+        move_recursive(from, to).await
+    }
+}
+
+#[async_recursion::async_recursion]
+async fn move_recursive(from: &Path, to: &Path) -> Result<(), IOError> {
+    if from.is_file() {
+        copy(from, to).await?;
+        remove_file(from).await?;
+        return Ok(());
+    }
+
+    create_dir(to).await?;
+
+    let mut dir = read_dir(from).await?;
+    while let Some(entry) = dir.next_entry().await? {
+        let new_path = to.join(entry.file_name());
+        move_recursive(&entry.path(), &new_path).await?;
+    }
+
+    Ok(())
 }
 
 // copy
diff --git a/packages/ariadne/Cargo.toml b/packages/ariadne/Cargo.toml
new file mode 100644
index 000000000..7410fd31c
--- /dev/null
+++ b/packages/ariadne/Cargo.toml
@@ -0,0 +1,15 @@
+[package]
+name = "ariadne"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+serde = { version = "1.0", features = ["derive"] }
+serde_json = "1.0"
+thiserror = "1.0"
+uuid = { version = "1.2.2", features = ["v4", "fast-rng", "serde"] }
+serde_bytes = "0.11"
+rand = "0.8.5"
+either = "1.13"
+chrono = { version = "0.4.26", features = ["serde"] }
+serde_cbor = "0.11"
diff --git a/packages/ariadne/src/ids.rs b/packages/ariadne/src/ids.rs
new file mode 100644
index 000000000..c7baaa7ef
--- /dev/null
+++ b/packages/ariadne/src/ids.rs
@@ -0,0 +1,216 @@
+pub use super::users::UserId;
+use thiserror::Error;
+
+/// Generates a random 64 bit integer that is exactly `n` characters
+/// long when encoded as base62.
+///
+/// Uses `rand`'s thread rng on every call.
+///
+/// # Panics
+///
+/// This method panics if `n` is 0 or greater than 11, since a `u64`
+/// can only represent up to 11 character base62 strings
+#[inline]
+pub fn random_base62(n: usize) -> u64 {
+    random_base62_rng(&mut rand::thread_rng(), n)
+}
+
+/// Generates a random 64 bit integer that is exactly `n` characters
+/// long when encoded as base62, using the given rng.
+///
+/// # Panics
+///
+/// This method panics if `n` is 0 or greater than 11, since a `u64`
+/// can only represent up to 11 character base62 strings
+pub fn random_base62_rng<R: rand::RngCore>(rng: &mut R, n: usize) -> u64 {
+    random_base62_rng_range(rng, n, n)
+}
+
+pub fn random_base62_rng_range<R: rand::RngCore>(
+    rng: &mut R,
+    n_min: usize,
+    n_max: usize,
+) -> u64 {
+    use rand::Rng;
+    assert!(n_min > 0 && n_max <= 11 && n_min <= n_max);
+    // gen_range is [low, high): max value is `MULTIPLES[n] - 1`,
+    // which is n characters long when encoded
+    rng.gen_range(MULTIPLES[n_min - 1]..MULTIPLES[n_max])
+}
+
+const MULTIPLES: [u64; 12] = [
+    1,
+    62,
+    62 * 62,
+    62 * 62 * 62,
+    62 * 62 * 62 * 62,
+    62 * 62 * 62 * 62 * 62,
+    62 * 62 * 62 * 62 * 62 * 62,
+    62 * 62 * 62 * 62 * 62 * 62 * 62,
+    62 * 62 * 62 * 62 * 62 * 62 * 62 * 62,
+    62 * 62 * 62 * 62 * 62 * 62 * 62 * 62 * 62,
+    62 * 62 * 62 * 62 * 62 * 62 * 62 * 62 * 62 * 62,
+    u64::MAX,
+];
+
+/// An ID encoded as base62 for use in the API.
+///
+/// All ids should be random and encode to 8-10 character base62 strings,
+/// to avoid enumeration and other attacks.
+#[derive(Copy, Clone, PartialEq, Eq)]
+pub struct Base62Id(pub u64);
+
+/// An error decoding a number from base62.
+#[derive(Error, Debug)]
+pub enum DecodingError {
+    /// Encountered a non-base62 character in a base62 string
+    #[error("Invalid character {0:?} in base62 encoding")]
+    InvalidBase62(char),
+    /// Encountered integer overflow when decoding a base62 id.
+    #[error("Base62 decoding overflowed")]
+    Overflow,
+}
+
+#[macro_export]
+macro_rules! from_base62id {
+    ($($struct:ty, $con:expr;)+) => {
+        $(
+            impl From<Base62Id> for $struct {
+                fn from(id: Base62Id) -> $struct {
+                    $con(id.0)
+                }
+            }
+            impl From<$struct> for Base62Id {
+                fn from(id: $struct) -> Base62Id {
+                    Base62Id(id.0)
+                }
+            }
+        )+
+    };
+}
+
+#[macro_export]
+macro_rules! impl_base62_display {
+    ($struct:ty) => {
+        impl std::fmt::Display for $struct {
+            fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+                f.write_str(&$crate::ids::base62_impl::to_base62(self.0))
+            }
+        }
+    };
+}
+impl_base62_display!(Base62Id);
+
+#[macro_export]
+macro_rules! base62_id_impl {
+    ($struct:ty, $cons:expr) => {
+        $crate::ids::from_base62id!($struct, $cons;);
+        $crate::ids::impl_base62_display!($struct);
+    }
+}
+base62_id_impl!(UserId, UserId);
+
+pub use {base62_id_impl, from_base62id, impl_base62_display};
+
+pub mod base62_impl {
+    use serde::de::{self, Deserializer, Visitor};
+    use serde::ser::Serializer;
+    use serde::{Deserialize, Serialize};
+
+    use super::{Base62Id, DecodingError};
+
+    impl<'de> Deserialize<'de> for Base62Id {
+        fn deserialize<D>(deserializer: D) -> Result<Self, D::Error>
+        where
+            D: Deserializer<'de>,
+        {
+            struct Base62Visitor;
+
+            impl Visitor<'_> for Base62Visitor {
+                type Value = Base62Id;
+
+                fn expecting(
+                    &self,
+                    formatter: &mut std::fmt::Formatter,
+                ) -> std::fmt::Result {
+                    formatter.write_str("a base62 string id")
+                }
+
+                fn visit_u64<E>(self, v: u64) -> Result<Self::Value, E>
+                where
+                    E: de::Error,
+                {
+                    Ok(Base62Id(v))
+                }
+
+                fn visit_str<E>(self, string: &str) -> Result<Base62Id, E>
+                where
+                    E: de::Error,
+                {
+                    parse_base62(string).map(Base62Id).map_err(E::custom)
+                }
+            }
+
+            if deserializer.is_human_readable() {
+                deserializer.deserialize_str(Base62Visitor)
+            } else {
+                deserializer.deserialize_u64(Base62Visitor)
+            }
+        }
+    }
+
+    impl Serialize for Base62Id {
+        fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
+        where
+            S: Serializer,
+        {
+            if serializer.is_human_readable() {
+                serializer.serialize_str(&to_base62(self.0))
+            } else {
+                serializer.serialize_u64(self.0)
+            }
+        }
+    }
+
+    const BASE62_CHARS: [u8; 62] =
+        *b"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+
+    pub fn to_base62(mut num: u64) -> String {
+        let length = (num as f64).log(62.0).ceil() as usize;
+        let mut output = String::with_capacity(length);
+
+        while num > 0 {
+            // Could be done more efficiently, but requires byte
+            // manipulation of strings & Vec<u8> -> String conversion
+            output.insert(0, BASE62_CHARS[(num % 62) as usize] as char);
+            num /= 62;
+        }
+        output
+    }
+
+    pub fn parse_base62(string: &str) -> Result<u64, DecodingError> {
+        let mut num: u64 = 0;
+        for c in string.chars() {
+            let next_digit;
+            if c.is_ascii_digit() {
+                next_digit = (c as u8 - b'0') as u64;
+            } else if c.is_ascii_uppercase() {
+                next_digit = 10 + (c as u8 - b'A') as u64;
+            } else if c.is_ascii_lowercase() {
+                next_digit = 36 + (c as u8 - b'a') as u64;
+            } else {
+                return Err(DecodingError::InvalidBase62(c));
+            }
+
+            // We don't want this panicking or wrapping on integer overflow
+            if let Some(n) =
+                num.checked_mul(62).and_then(|n| n.checked_add(next_digit))
+            {
+                num = n;
+            } else {
+                return Err(DecodingError::Overflow);
+            }
+        }
+        Ok(num)
+    }
+}
diff --git a/packages/ariadne/src/lib.rs b/packages/ariadne/src/lib.rs
new file mode 100644
index 000000000..4a4251a3e
--- /dev/null
+++ b/packages/ariadne/src/lib.rs
@@ -0,0 +1,3 @@
+pub mod ids;
+pub mod networking;
+pub mod users;
diff --git a/packages/ariadne/src/mod.rs b/packages/ariadne/src/mod.rs
new file mode 100644
index 000000000..4a4251a3e
--- /dev/null
+++ b/packages/ariadne/src/mod.rs
@@ -0,0 +1,3 @@
+pub mod ids;
+pub mod networking;
+pub mod users;
diff --git a/packages/ariadne/src/networking/message.rs b/packages/ariadne/src/networking/message.rs
new file mode 100644
index 000000000..c7c9e5cba
--- /dev/null
+++ b/packages/ariadne/src/networking/message.rs
@@ -0,0 +1,65 @@
+use crate::ids::UserId;
+use crate::users::UserStatus;
+use serde::{Deserialize, Serialize};
+use uuid::Uuid;
+
+#[derive(Debug, Serialize, Deserialize)]
+#[serde(tag = "type", rename_all = "snake_case")]
+pub enum ClientToServerMessage {
+    StatusUpdate {
+        profile_name: Option<String>,
+    },
+
+    SocketListen {
+        socket: Uuid,
+    },
+    SocketClose {
+        socket: Uuid,
+    },
+    SocketSend {
+        socket: Uuid,
+        #[serde(with = "serde_bytes")]
+        data: Vec<u8>,
+    },
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+#[serde(tag = "type", rename_all = "snake_case")]
+pub enum ServerToClientMessage {
+    StatusUpdate {
+        status: UserStatus,
+    },
+    UserOffline {
+        id: UserId,
+    },
+    FriendStatuses {
+        statuses: Vec<UserStatus>,
+    },
+    FriendRequest {
+        from: UserId,
+    },
+    FriendRequestRejected {
+        from: UserId,
+    },
+
+    FriendSocketListening {
+        user: UserId,
+        socket: Uuid,
+    },
+    FriendSocketStoppedListening {
+        user: UserId,
+    },
+
+    SocketConnected {
+        to_socket: Uuid,
+        new_socket: Uuid,
+    },
+    SocketClosed {
+        socket: Uuid,
+    },
+    SocketData {
+        socket: Uuid,
+        #[serde(with = "serde_bytes")]
+        data: Vec<u8>,
+    },
+}
diff --git a/packages/ariadne/src/networking/mod.rs b/packages/ariadne/src/networking/mod.rs
new file mode 100644
index 000000000..b7855d592
--- /dev/null
+++ b/packages/ariadne/src/networking/mod.rs
@@ -0,0 +1,2 @@
+pub mod message;
+pub mod serialization;
diff --git a/packages/ariadne/src/networking/serialization.rs b/packages/ariadne/src/networking/serialization.rs
new file mode 100644
index 000000000..e39f5d44a
--- /dev/null
+++ b/packages/ariadne/src/networking/serialization.rs
@@ -0,0 +1,56 @@
+use super::message::{ClientToServerMessage, ServerToClientMessage};
+use either::Either;
+use thiserror::Error;
+
+#[derive(Debug, Error)]
+pub enum SerializationError {
+    #[error("Failed to (de)serialize message: {0}")]
+    SerializationFailed(#[from] serde_json::Error),
+
+    #[error("Failed to (de)serialize binary message: {0}")]
+    BinarySerializationFailed(#[from] serde_cbor::Error),
+}
+
+macro_rules! message_serialization {
+    ($message_enum:ty $(,$binary_pattern:pat_param)* $(,)?) => {
+        impl $message_enum {
+            pub fn is_binary(&self) -> bool {
+                match self {
+                    $(
+                        $binary_pattern => true,
+                    )*
+                    _ => false,
+                }
+            }
+
+            pub fn serialize(
+                &self,
+            ) -> Result<Either<String, Vec<u8>>, SerializationError> {
+                Ok(match self {
+                    $(
+                        $binary_pattern => Either::Right(serde_cbor::to_vec(self)?),
+                    )*
+                    _ => Either::Left(serde_json::to_string(self)?),
+                })
+            }
+
+            pub fn deserialize(
+                msg: Either<&str, &[u8]>,
+            ) -> Result<Self, SerializationError> {
+                Ok(match msg {
+                    Either::Left(text) => serde_json::from_str(&text)?,
+                    Either::Right(bytes) => serde_cbor::from_slice(&bytes)?,
+                })
+            }
+        }
+    };
+}
+
+message_serialization!(
+    ClientToServerMessage,
+    ClientToServerMessage::SocketSend { .. },
+);
+message_serialization!(
+    ServerToClientMessage,
+    ServerToClientMessage::SocketData { .. },
+);
diff --git a/packages/ariadne/src/users.rs b/packages/ariadne/src/users.rs
new file mode 100644
index 000000000..2fe087283
--- /dev/null
+++ b/packages/ariadne/src/users.rs
@@ -0,0 +1,15 @@
+use super::ids::Base62Id;
+use chrono::{DateTime, Utc};
+use serde::{Deserialize, Serialize};
+
+#[derive(Copy, Clone, PartialEq, Eq, Serialize, Deserialize, Debug, Hash)]
+#[serde(from = "Base62Id")]
+#[serde(into = "Base62Id")]
+pub struct UserId(pub u64);
+
+#[derive(Debug, Serialize, Deserialize, Clone)]
+pub struct UserStatus {
+    pub user_id: UserId,
+    pub profile_name: Option<String>,
+    pub last_update: DateTime<Utc>,
+}
diff --git a/packages/assets/external/bluesky.svg b/packages/assets/external/bluesky.svg
new file mode 100644
index 000000000..471a4b564
--- /dev/null
+++ b/packages/assets/external/bluesky.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.20232 2.85649C7.95386 4.92218 10.9135 9.11052 12.0001 11.3582C13.0868 9.11069 16.0462 4.92213 18.7978 2.85649C20.7832 1.36598 24 0.2127 24 3.88249C24 4.61539 23.5798 10.0393 23.3333 10.9198C22.4767 13.9812 19.355 14.762 16.5782 14.2894C21.432 15.1155 22.6667 17.8519 20.0001 20.5882C14.9357 25.785 12.7211 19.2843 12.1534 17.6186C12.0494 17.3132 12.0007 17.1703 12 17.2918C11.9993 17.1703 11.9506 17.3132 11.8466 17.6186C11.2791 19.2843 9.06454 25.7851 3.99987 20.5882C1.33323 17.8519 2.56794 15.1154 7.42179 14.2894C4.64492 14.762 1.5232 13.9812 0.666658 10.9198C0.420196 10.0392 0 4.61531 0 3.88249C0 0.2127 3.21689 1.36598 5.20218 2.85649H5.20232Z" fill="currentColor"/>
+</svg>
diff --git a/packages/assets/external/github.svg b/packages/assets/external/github.svg
new file mode 100644
index 000000000..5581249b5
--- /dev/null
+++ b/packages/assets/external/github.svg
@@ -0,0 +1,15 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3972_7229)">
+<g clip-path="url(#clip1_3972_7229)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0358 0C18.6517 0 24 5.5 24 12.3042C24 17.7432 20.5731 22.3472 15.8192 23.9767C15.2248 24.0992 15.0071 23.712 15.0071 23.3862C15.0071 23.101 15.0267 22.1232 15.0267 21.1045C18.3549 21.838 19.0479 19.6378 19.0479 19.6378C19.5828 18.2118 20.3753 17.8452 20.3753 17.8452C21.4646 17.0915 20.2959 17.0915 20.2959 17.0915C19.0876 17.173 18.4536 18.3545 18.4536 18.3545C17.3841 20.2285 15.6607 19.699 14.9674 19.373C14.8685 18.5785 14.5513 18.0285 14.2146 17.723C16.8691 17.4377 19.6619 16.3785 19.6619 11.6523C19.6619 10.3078 19.1868 9.20775 18.434 8.35225C18.5527 8.04675 18.9688 6.7835 18.3149 5.09275C18.3149 5.09275 17.3047 4.76675 15.0269 6.35575C14.0517 6.08642 13.046 5.9494 12.0358 5.94825C11.0256 5.94825 9.99575 6.091 9.04482 6.35575C6.76677 4.76675 5.75657 5.09275 5.75657 5.09275C5.10269 6.7835 5.51902 8.04675 5.6378 8.35225C4.86514 9.20775 4.40963 10.3078 4.40963 11.6523C4.40963 16.3785 7.20245 17.4172 9.87674 17.723C9.44082 18.11 9.06465 18.8432 9.06465 20.0045C9.06465 21.6545 9.08425 22.9787 9.08425 23.386C9.08425 23.712 8.86629 24.0992 8.27216 23.977C3.5182 22.347 0.091347 17.7432 0.091347 12.3042C0.0717551 5.5 5.43967 0 12.0358 0Z" fill="currentColor"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_3972_7229">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+<clipPath id="clip1_3972_7229">
+<rect width="24" height="24" fill="white" transform="matrix(-1 0 0 1 24 0)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/assets/external/mastodon.svg b/packages/assets/external/mastodon.svg
index 9e96c9410..67698f10d 100644
--- a/packages/assets/external/mastodon.svg
+++ b/packages/assets/external/mastodon.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M480,173.59c0-104.13-68.26-134.65-68.26-134.65C377.3,23.15,318.2,16.5,256.8,16h-1.51c-61.4.5-120.46,7.15-154.88,22.94,0,0-68.27,30.52-68.27,134.65,0,23.85-.46,52.35.29,82.59C34.91,358,51.11,458.37,145.32,483.29c43.43,11.49,80.73,13.89,110.76,12.24,54.47-3,85-19.42,85-19.42l-1.79-39.5s-38.93,12.27-82.64,10.77c-43.31-1.48-89-4.67-96-57.81a108.44,108.44,0,0,1-1-14.9,558.91,558.91,0,0,0,96.39,12.85c32.95,1.51,63.84-1.93,95.22-5.67,60.18-7.18,112.58-44.24,119.16-78.09C480.84,250.42,480,173.59,480,173.59ZM399.46,307.75h-50V185.38c0-25.8-10.86-38.89-32.58-38.89-24,0-36.06,15.53-36.06,46.24v67H231.16v-67c0-30.71-12-46.24-36.06-46.24-21.72,0-32.58,13.09-32.58,38.89V307.75h-50V181.67q0-38.65,19.75-61.39c13.6-15.15,31.4-22.92,53.51-22.92,25.58,0,44.95,9.82,57.75,29.48L256,147.69l12.45-20.85c12.81-19.66,32.17-29.48,57.75-29.48,22.11,0,39.91,7.77,53.51,22.92Q399.5,143,399.46,181.67Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M480,173.59c0-104.13-68.26-134.65-68.26-134.65C377.3,23.15,318.2,16.5,256.8,16h-1.51c-61.4.5-120.46,7.15-154.88,22.94,0,0-68.27,30.52-68.27,134.65,0,23.85-.46,52.35.29,82.59C34.91,358,51.11,458.37,145.32,483.29c43.43,11.49,80.73,13.89,110.76,12.24,54.47-3,85-19.42,85-19.42l-1.79-39.5s-38.93,12.27-82.64,10.77c-43.31-1.48-89-4.67-96-57.81a108.44,108.44,0,0,1-1-14.9,558.91,558.91,0,0,0,96.39,12.85c32.95,1.51,63.84-1.93,95.22-5.67,60.18-7.18,112.58-44.24,119.16-78.09C480.84,250.42,480,173.59,480,173.59ZM399.46,307.75h-50V185.38c0-25.8-10.86-38.89-32.58-38.89-24,0-36.06,15.53-36.06,46.24v67H231.16v-67c0-30.71-12-46.24-36.06-46.24-21.72,0-32.58,13.09-32.58,38.89V307.75h-50V181.67q0-38.65,19.75-61.39c13.6-15.15,31.4-22.92,53.51-22.92,25.58,0,44.95,9.82,57.75,29.48L256,147.69l12.45-20.85c12.81-19.66,32.17-29.48,57.75-29.48,22.11,0,39.91,7.77,53.51,22.92Q399.5,143,399.46,181.67Z" fill="currentColor"/></svg>
diff --git a/packages/assets/external/pyro.svg b/packages/assets/external/pyro.svg
index 066ec90c5..16eebd786 100644
--- a/packages/assets/external/pyro.svg
+++ b/packages/assets/external/pyro.svg
@@ -1 +1 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.1355 28.2805C12.1355 27.5892 12.1355 27.2435 12.1946 26.9561C12.437 25.7757 13.3896 24.853 14.6082 24.6182C14.905 24.561 15.2618 24.561 15.9755 24.561C16.6892 24.561 17.0461 24.561 17.3428 24.6182C18.5615 24.853 19.5141 25.7757 19.7565 26.9561C19.8155 27.2435 19.8155 27.5892 19.8155 28.2805V29.5203C19.8155 30.4473 19.8155 30.9109 19.6097 31.2561C19.4749 31.4823 19.281 31.6701 19.0475 31.8007C18.6911 32 18.2126 32 17.2555 32H14.6955C13.7385 32 13.26 32 12.9035 31.8007C12.67 31.6701 12.4761 31.4823 12.3413 31.2561C12.1355 30.9109 12.1355 30.4473 12.1355 29.5203V28.2805Z" fill="currentColor"></path><path d="M6.3827 32H9.01425C9.31219 32 9.46117 32 9.53801 31.9082C9.61485 31.8165 9.58266 31.6686 9.51829 31.3727C6.98423 19.7258 18.7021 22.3442 20.3986 14.286C21.2645 10.1733 18.7998 4.65319 18.9453 0.817638C18.9635 0.33689 18.9727 0.0965167 18.8384 0.0220137C18.7042 -0.0524892 18.5103 0.0670423 18.1226 0.306105C12.6454 3.68306 8.65384 10.1385 10.1126 14.0992C10.3356 14.7047 10.4472 15.0074 10.3061 15.118C10.1651 15.2285 9.92652 15.086 9.44929 14.801C8.67327 14.3375 7.75105 13.5788 7.10995 12.3833C6.92186 12.0326 6.82781 11.8572 6.68983 11.844C6.55184 11.8307 6.43328 11.9737 6.19616 12.2595C-0.695594 20.5682 2.0972 28.8655 6.07761 31.9001C6.14113 31.9485 6.17289 31.9727 6.2136 31.9863C6.2543 32 6.2971 32 6.3827 32Z" fill="currentColor"></path><path d="M23.5502 13.1095C23.903 16.9267 21.5318 19.5377 18.8234 21.3464C18.3506 21.6621 18.1142 21.82 18.1346 21.9704C18.155 22.1208 18.4376 22.2182 19.0027 22.413C22.614 23.6579 22.7781 27.2264 22.4791 31.4665C22.4614 31.7172 22.4526 31.8426 22.5285 31.9213C22.6044 32 22.7334 32 22.9913 32H25.2472C25.3155 32 25.3497 32 25.3828 31.9912C25.4159 31.9825 25.4452 31.9657 25.5039 31.9322C33.5906 27.3121 29.2489 16.2756 24.3156 12.6327C23.9559 12.3671 23.7761 12.2343 23.6299 12.3124C23.4838 12.3906 23.5059 12.6302 23.5502 13.1095Z" fill="currentColor"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" fill="none" width="24" height="24"><path fill="currentColor" d="M9.1 23v-1.1c.3-1 1.1-1.7 2.2-1.9h2.5c1.1.2 2 1 2.2 1.9v2c0 .8 0 1.2-.2 1.5 0 .2-.3.3-.5.4-.3.2-.7.2-1.6.2h-2.3c-.8 0-1.3 0-1.6-.2-.2 0-.4-.2-.5-.4-.2-.3-.2-.7-.2-1.4v-1Z"></path><path fill="currentColor" d="M4 26h2.8v-.5c-1.5-10.4 9-7.2 9.8-13.9C17 7 14 7 15.2.6V0l-.7.2C9.5 3 6 8.2 7.3 11.5c.2.4.3.7.2.8-.2 0-.4 0-.8-.3-.7-.4-1.5-1-2.1-2l-.4-.4-.4.4c-6.2 6.7-3.7 13.5-.1 16H4Z"></path><path fill="currentColor" d="M19.3 10.2c.3 3-2 6.2-4.5 7.6-.4.2-.6.3-.6.5l.8.3c3.4 1 4.4 4.3 3.3 7v.3l.5.1H21c8-4.6 5.2-12.4-1-16.2l-.7-.3c-.2.1-.2.3-.1.7Z"></path></svg>
\ No newline at end of file
diff --git a/packages/assets/external/tumblr.svg b/packages/assets/external/tumblr.svg
new file mode 100644
index 000000000..86b2f2eec
--- /dev/null
+++ b/packages/assets/external/tumblr.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3466_5793)">
+<path d="M18.7939 24H14.7856C11.1765 24 8.48678 22.1429 8.48678 17.7012V10.5855H5.20605V6.73219C8.81512 5.79709 10.3255 2.68972 10.4988 0H14.2471V6.10966H18.6205V10.5882H14.2471V16.7845C14.2471 18.6416 15.1848 19.2825 16.6768 19.2825H18.7939V24.0026V24Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_3466_5793">
+<rect width="13.5878" height="24" fill="white" transform="translate(5.20605)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/assets/external/twitter.svg b/packages/assets/external/twitter.svg
index a43d68d9f..3cf66ecf6 100644
--- a/packages/assets/external/twitter.svg
+++ b/packages/assets/external/twitter.svg
@@ -1 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3564_5601)">
+<path d="M18.9641 1.3335H22.6441L14.5641 10.3864L24.0041 22.6668H16.5961L10.7961 15.2041L4.15609 22.6668H0.476094L9.03609 12.9842L-0.00390625 1.3335H7.58809L12.8281 8.15072L18.9641 1.3335ZM17.6761 20.5414H19.7161L6.51609 3.38024H4.32409L17.6761 20.5414Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_3564_5601">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/assets/icons/in-progress.svg b/packages/assets/icons/in-progress.svg
new file mode 100644
index 000000000..b34c67f4b
--- /dev/null
+++ b/packages/assets/icons/in-progress.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+    <path d="M10 21.8c-1.3-.3-2.4-.7-3.5-1.5M17.6 3.7c1.1.7 2 1.6 2.7 2.7M2.2 10c.3-1.3.7-2.4 1.5-3.5M20.3 17.6c-.7 1.1-1.6 2-2.7 2.7M21.8 10.1c.2 1.3.2 2.5 0 3.8M6.5 3.6c1.1-.7 2.3-1.2 3.5-1.5M3.6 17.5c-.7-1.1-1.2-2.3-1.5-3.5"/>
+    <path d="M13.9 2.2c4.6.9 8.1 5 8.1 9.8s-3.4 8.9-8 9.8"/>
+    <path d="M12 6v6l4 2"/>
+  </g>
+</svg>
diff --git a/packages/assets/index.ts b/packages/assets/index.ts
index bc850a33f..00bd02269 100644
--- a/packages/assets/index.ts
+++ b/packages/assets/index.ts
@@ -13,14 +13,17 @@ import _SSOGoogleIcon from './external/sso/google.svg?component'
 import _SSOMicrosoftIcon from './external/sso/microsoft.svg?component'
 import _SSOSteamIcon from './external/sso/steam.svg?component'
 import _AppleIcon from './external/apple.svg?component'
+import _BlueskyIcon from './external/bluesky.svg?component'
 import _BuyMeACoffeeIcon from './external/bmac.svg?component'
 import _DiscordIcon from './external/discord.svg?component'
+import _GithubIcon from './external/github.svg?component'
 import _KoFiIcon from './external/kofi.svg?component'
 import _MastodonIcon from './external/mastodon.svg?component'
 import _OpenCollectiveIcon from './external/opencollective.svg?component'
 import _PatreonIcon from './external/patreon.svg?component'
 import _PayPalIcon from './external/paypal.svg?component'
 import _RedditIcon from './external/reddit.svg?component'
+import _TumblrIcon from './external/tumblr.svg?component'
 import _TwitterIcon from './external/twitter.svg?component'
 import _WindowsIcon from './external/windows.svg?component'
 import _YouTubeIcon from './external/youtube.svg?component'
@@ -90,6 +93,7 @@ import _HeartHandshakeIcon from './icons/heart-handshake.svg?component'
 import _HistoryIcon from './icons/history.svg?component'
 import _HomeIcon from './icons/home.svg?component'
 import _ImageIcon from './icons/image.svg?component'
+import _InProgressIcon from './icons/in-progress.svg?component'
 import _InfoIcon from './icons/info.svg?component'
 import _IssuesIcon from './icons/issues.svg?component'
 import _KeyIcon from './icons/key.svg?component'
@@ -209,18 +213,21 @@ export const SSOGoogleIcon = _SSOGoogleIcon
 export const SSOMicrosoftIcon = _SSOMicrosoftIcon
 export const SSOSteamIcon = _SSOSteamIcon
 export const AppleIcon = _AppleIcon
+export const BlueskyIcon = _BlueskyIcon
 export const BuyMeACoffeeIcon = _BuyMeACoffeeIcon
+export const GithubIcon = _GithubIcon
 export const DiscordIcon = _DiscordIcon
 export const KoFiIcon = _KoFiIcon
 export const MastodonIcon = _MastodonIcon
 export const OpenCollectiveIcon = _OpenCollectiveIcon
 export const PatreonIcon = _PatreonIcon
 export const PayPalIcon = _PayPalIcon
+export const PyroIcon = _PyroIcon
 export const RedditIcon = _RedditIcon
+export const TumblrIcon = _TumblrIcon
 export const TwitterIcon = _TwitterIcon
 export const WindowsIcon = _WindowsIcon
 export const YouTubeIcon = _YouTubeIcon
-export const PyroIcon = _PyroIcon
 export const AlignLeftIcon = _AlignLeftIcon
 export const ArchiveIcon = _ArchiveIcon
 export const ArrowBigUpDashIcon = _ArrowBigUpDashIcon
@@ -284,6 +291,7 @@ export const HeartHandshakeIcon = _HeartHandshakeIcon
 export const HistoryIcon = _HistoryIcon
 export const HomeIcon = _HomeIcon
 export const ImageIcon = _ImageIcon
+export const InProgressIcon = _InProgressIcon
 export const InfoIcon = _InfoIcon
 export const IssuesIcon = _IssuesIcon
 export const KeyIcon = _KeyIcon
diff --git a/packages/assets/styles/variables.scss b/packages/assets/styles/variables.scss
index f7a1ed7d3..f462c886d 100644
--- a/packages/assets/styles/variables.scss
+++ b/packages/assets/styles/variables.scss
@@ -56,6 +56,11 @@
     rgba(68, 182, 138, 0.175) 0%,
     rgba(58, 250, 112, 0.125) 100%
   );
+  --brand-gradient-strong-bg: linear-gradient(
+    270deg,
+    rgba(68, 182, 138, 0.175) 0%,
+    rgba(36, 225, 91, 0.12) 100%
+  );
   --brand-gradient-button: rgba(255, 255, 255, 0.5);
   --brand-gradient-border: rgba(32, 64, 32, 0.15);
   --brand-gradient-fade-out-color: linear-gradient(to bottom, rgba(213, 235, 224, 0), #d0ece0 70%);
@@ -167,6 +172,7 @@ html {
   --shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
 
   --brand-gradient-bg: linear-gradient(0deg, rgba(14, 35, 19, 0.2) 0%, rgba(55, 137, 73, 0.1) 100%);
+  --brand-gradient-strong-bg: linear-gradient(270deg, #09110d 10%, #131f17 100%);
   --brand-gradient-button: rgba(255, 255, 255, 0.08);
   --brand-gradient-border: rgba(155, 255, 160, 0.08);
   --brand-gradient-fade-out-color: linear-gradient(to bottom, rgba(24, 30, 31, 0), #171d1e 80%);
@@ -205,6 +211,15 @@ html {
     rgba(22, 66, 51, 0.15) 0%,
     rgba(55, 137, 73, 0.1) 100%
   );
+  --brand-gradient-strong-bg: linear-gradient(
+    270deg,
+    rgba(9, 18, 14, 0.6) 10%,
+    rgba(19, 31, 23, 0.5) 100%
+  );
+}
+
+.retro-mode {
+  --brand-gradient-strong-bg: #3a3b38;
 }
 
 .experimental-styles-within {
diff --git a/packages/ui/src/components/base/Admonition.vue b/packages/ui/src/components/base/Admonition.vue
new file mode 100644
index 000000000..fc9f691f6
--- /dev/null
+++ b/packages/ui/src/components/base/Admonition.vue
@@ -0,0 +1,58 @@
+<template>
+  <div
+    :class="[
+      'flex rounded-2xl border-2 border-solid p-4 gap-4 font-semibold text-contrast',
+      typeClasses[type],
+    ]"
+  >
+    <component
+      :is="icons[type]"
+      :class="['hidden h-8 w-8 flex-none sm:block', iconClasses[type]]"
+    />
+    <div class="flex flex-col gap-2">
+      <div class="font-semibold">
+        <slot name="header">{{ header }}</slot>
+      </div>
+      <div class="font-normal">
+        <slot>{{ body }}</slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { InfoIcon, IssuesIcon, XCircleIcon } from '@modrinth/assets'
+
+defineProps({
+  type: {
+    type: String as () => 'info' | 'warning' | 'critical',
+    default: 'info',
+  },
+  header: {
+    type: String,
+    default: '',
+  },
+  body: {
+    type: String,
+    default: '',
+  },
+})
+
+const typeClasses = {
+  info: 'border-blue bg-bg-blue',
+  warning: 'border-orange bg-bg-orange',
+  critical: 'border-brand-red bg-bg-red',
+}
+
+const iconClasses = {
+  info: 'text-blue',
+  warning: 'text-orange',
+  critical: 'text-brand-red',
+}
+
+const icons = {
+  info: InfoIcon,
+  warning: IssuesIcon,
+  critical: XCircleIcon,
+}
+</script>
diff --git a/packages/ui/src/components/base/Avatar.vue b/packages/ui/src/components/base/Avatar.vue
index 091e2d810..00887e1fa 100644
--- a/packages/ui/src/components/base/Avatar.vue
+++ b/packages/ui/src/components/base/Avatar.vue
@@ -8,7 +8,7 @@
       circle: circle,
       'no-shadow': noShadow,
       raised: raised,
-      pixelated: raised,
+      pixelated: pixelated,
     }"
     :src="src"
     :alt="alt"
@@ -96,7 +96,7 @@ const LEGACY_PRESETS = {
 const cssSize = computed(() => LEGACY_PRESETS[props.size] ?? props.size)
 
 function updatePixelated() {
-  if (img.value && img.value.naturalWidth && img.value.naturalWidth <= 96) {
+  if (img.value && img.value.naturalWidth && img.value.naturalWidth < 32) {
     pixelated.value = true
   } else {
     pixelated.value = false
diff --git a/packages/ui/src/components/base/Chips.vue b/packages/ui/src/components/base/Chips.vue
index 1785d95a4..382ce2db9 100644
--- a/packages/ui/src/components/base/Chips.vue
+++ b/packages/ui/src/components/base/Chips.vue
@@ -2,7 +2,7 @@
   <div class="chips">
     <Button
       v-for="item in items"
-      :key="item"
+      :key="formatLabel(item)"
       class="btn"
       :class="{ selected: selected === item, capitalize: capitalize }"
       @click="toggleItem(item)"
@@ -12,62 +12,39 @@
     </Button>
   </div>
 </template>
-<script setup>
+
+<script setup lang="ts" generic="T">
 import { CheckIcon } from '@modrinth/assets'
-</script>
-<script>
-import { defineComponent } from 'vue'
 import Button from './Button.vue'
 
-export default defineComponent({
-  props: {
-    modelValue: {
-      required: true,
-      type: String,
-    },
-    items: {
-      required: true,
-      type: Array,
-    },
-    neverEmpty: {
-      default: true,
-      type: Boolean,
-    },
-    formatLabel: {
-      default: (x) => x,
-      type: Function,
-    },
-    capitalize: {
-      type: Boolean,
-      default: true,
-    },
+const props = withDefaults(
+  defineProps<{
+    items: T[]
+    formatLabel?: (item: T) => string
+    neverEmpty?: boolean
+    capitalize?: boolean
+  }>(),
+  {
+    neverEmpty: true,
+    // Intentional any type, as this default should only be used for primitives (string or number)
+    formatLabel: (item) => item.toString(),
+    capitalize: true,
   },
-  emits: ['update:modelValue'],
-  computed: {
-    selected: {
-      get() {
-        return this.modelValue
-      },
-      set(value) {
-        this.$emit('update:modelValue', value)
-      },
-    },
-  },
-  created() {
-    if (this.items.length > 0 && this.neverEmpty && !this.modelValue) {
-      this.selected = this.items[0]
-    }
-  },
-  methods: {
-    toggleItem(item) {
-      if (this.selected === item && !this.neverEmpty) {
-        this.selected = null
-      } else {
-        this.selected = item
-      }
-    },
-  },
-})
+)
+const selected = defineModel<T | null>()
+
+// If one always has to be selected, default to the first one
+if (props.items.length > 0 && props.neverEmpty && !selected.value) {
+  selected.value = props.items[0]
+}
+
+function toggleItem(item: T) {
+  if (selected.value === item && !props.neverEmpty) {
+    selected.value = null
+  } else {
+    selected.value = item
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/ui/src/components/base/Collapsible.vue b/packages/ui/src/components/base/Collapsible.vue
new file mode 100644
index 000000000..7868d81ea
--- /dev/null
+++ b/packages/ui/src/components/base/Collapsible.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="accordion-content" :class="(baseClass ?? ``) + (collapsed ? `` : ` open`)">
+    <div v-bind="$attrs" :inert="collapsed">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  baseClass?: string
+  collapsed: boolean
+}>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+</script>
+<style scoped>
+.accordion-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.3s ease-in-out;
+}
+
+@media (prefers-reduced-motion) {
+  .accordion-content {
+    transition: none !important;
+  }
+}
+
+.accordion-content.open {
+  grid-template-rows: 1fr;
+}
+
+.accordion-content > div {
+  overflow: hidden;
+}
+</style>
diff --git a/packages/ui/src/components/base/CopyCode.vue b/packages/ui/src/components/base/CopyCode.vue
index 9c1467799..5bbaf30f6 100644
--- a/packages/ui/src/components/base/CopyCode.vue
+++ b/packages/ui/src/components/base/CopyCode.vue
@@ -29,6 +29,7 @@ async function copyText() {
 
 <style lang="scss" scoped>
 .code {
+  color: var(--color-text);
   display: inline-flex;
   grid-gap: 0.5rem;
   font-family: var(--mono-font);
@@ -36,7 +37,7 @@ async function copyText() {
   margin: 0;
   padding: 0.25rem 0.5rem;
   background-color: var(--color-button-bg);
-  width: min-content;
+  width: fit-content;
   border-radius: 10px;
   user-select: text;
   transition:
@@ -49,12 +50,6 @@ async function copyText() {
     transition: none !important;
   }
 
-  span {
-    max-width: 10rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
   svg {
     width: 1em;
     height: 1em;
diff --git a/packages/ui/src/components/base/ManySelect.vue b/packages/ui/src/components/base/ManySelect.vue
index 638e1f3ca..9ae18c367 100644
--- a/packages/ui/src/components/base/ManySelect.vue
+++ b/packages/ui/src/components/base/ManySelect.vue
@@ -1,12 +1,14 @@
 <template>
   <ButtonStyled>
     <PopoutMenu
-      v-if="options.length > 1"
+      v-if="options.length > 1 || showAlways"
       v-bind="$attrs"
       :disabled="disabled"
       :position="position"
       :direction="direction"
       :dropdown-id="dropdownId"
+      :dropdown-class="dropdownClass"
+      :tooltip="tooltip"
       @open="
         () => {
           searchQuery = ''
@@ -87,6 +89,9 @@ const props = withDefaults(
     displayName?: (option: Option) => string
     search?: boolean
     dropdownId?: string
+    dropdownClass?: string
+    showAlways?: boolean
+    tooltip?: string
   }>(),
   {
     disabled: false,
@@ -94,7 +99,10 @@ const props = withDefaults(
     direction: 'auto',
     displayName: (option: Option) => option as string,
     search: false,
-    dropdownId: null,
+    dropdownId: '',
+    dropdownClass: '',
+    showAlways: false,
+    tooltip: '',
   },
 )
 
diff --git a/packages/ui/src/components/base/MarkdownEditor.vue b/packages/ui/src/components/base/MarkdownEditor.vue
index 9c6d57032..932f5870f 100644
--- a/packages/ui/src/components/base/MarkdownEditor.vue
+++ b/packages/ui/src/components/base/MarkdownEditor.vue
@@ -225,7 +225,7 @@
         </template>
       </div>
       <div class="preview">
-        <Toggle id="preview" v-model="previewMode" :checked="previewMode" />
+        <Toggle id="preview" v-model="previewMode" />
         <label class="label" for="preview"> Preview </label>
       </div>
     </div>
@@ -263,31 +263,31 @@
 </template>
 
 <script setup lang="ts">
-import { type Component, computed, ref, onMounted, onBeforeUnmount, toRef, watch } from 'vue'
+import { type Component, computed, onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'
 import { Compartment, EditorState } from '@codemirror/state'
 import { EditorView, keymap, placeholder as cm_placeholder } from '@codemirror/view'
 import { markdown } from '@codemirror/lang-markdown'
-import { indentWithTab, historyKeymap, history } from '@codemirror/commands'
+import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
 import {
+  AlignLeftIcon,
+  BoldIcon,
+  CodeIcon,
   Heading1Icon,
   Heading2Icon,
   Heading3Icon,
-  BoldIcon,
+  ImageIcon,
+  InfoIcon,
   ItalicIcon,
-  ScanEyeIcon,
-  StrikethroughIcon,
-  CodeIcon,
+  LinkIcon,
   ListBulletedIcon,
   ListOrderedIcon,
-  TextQuoteIcon,
-  LinkIcon,
-  ImageIcon,
-  YouTubeIcon,
-  AlignLeftIcon,
   PlusIcon,
-  XIcon,
+  ScanEyeIcon,
+  StrikethroughIcon,
+  TextQuoteIcon,
   UploadIcon,
-  InfoIcon,
+  XIcon,
+  YouTubeIcon,
 } from '@modrinth/assets'
 import { markdownCommands, modrinthMarkdownEditorKeymap } from '@modrinth/utils/codemirror'
 import { renderHighlightedString } from '@modrinth/utils/highlight'
@@ -300,8 +300,8 @@ import Chips from './Chips.vue'
 const props = withDefaults(
   defineProps<{
     modelValue: string
-    disabled: boolean
-    headingButtons: boolean
+    disabled?: boolean
+    headingButtons?: boolean
     /**
      * @param file The file to upload
      * @throws If the file is invalid or the upload fails
@@ -948,4 +948,8 @@ function openVideoModal() {
   pointer-events: none;
   cursor: not-allowed;
 }
+
+:deep(.cm-content) {
+  overflow: auto;
+}
 </style>
diff --git a/packages/ui/src/components/base/PopoutMenu.vue b/packages/ui/src/components/base/PopoutMenu.vue
index a9c13b138..4991db88c 100644
--- a/packages/ui/src/components/base/PopoutMenu.vue
+++ b/packages/ui/src/components/base/PopoutMenu.vue
@@ -4,6 +4,7 @@
     no-auto-focus
     :aria-id="dropdownId || null"
     placement="bottom-end"
+    :class="dropdownClass"
     @apply-hide="focusTrigger"
     @apply-show="focusMenuChild"
   >
@@ -34,6 +35,11 @@ defineProps({
     default: null,
     required: false,
   },
+  dropdownClass: {
+    type: String,
+    default: null,
+    required: false,
+  },
   tooltip: {
     type: String,
     default: null,
diff --git a/packages/ui/src/components/base/RadialHeader.vue b/packages/ui/src/components/base/RadialHeader.vue
new file mode 100644
index 000000000..89e80b67b
--- /dev/null
+++ b/packages/ui/src/components/base/RadialHeader.vue
@@ -0,0 +1,49 @@
+<template>
+  <div :style="colorClasses" class="radial-header relative pb-1" v-bind="$attrs">
+    <slot />
+  </div>
+  <div class="radial-header-divider" />
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    color?: 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple' | 'gray'
+  }>(),
+  {
+    color: 'brand',
+  },
+)
+
+const colorClasses = computed(
+  () =>
+    `--_radial-bg: var(--color-${props.color}-highlight);--_radial-border: var(--color-${props.color});`,
+)
+</script>
+<style scoped lang="scss">
+.radial-header {
+  background-image: radial-gradient(50% 100% at 50% 100%, var(--_radial-bg) 10%, #ffffff00 100%);
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    background-image: linear-gradient(
+      90deg,
+      #ffffff00 0%,
+      var(--_radial-border) 50%,
+      #ffffff00 100%
+    );
+    width: 100%;
+    height: 1px;
+    opacity: 0.8;
+  }
+}
+</style>
diff --git a/packages/ui/src/components/base/RadioButtons.vue b/packages/ui/src/components/base/RadioButtons.vue
new file mode 100644
index 000000000..fd384c4aa
--- /dev/null
+++ b/packages/ui/src/components/base/RadioButtons.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="flex flex-wrap gap-2">
+    <button
+      v-for="(item, index) in items"
+      :key="`radio-button-${index}`"
+      class="p-0 py-2 px-2 border-0 flex gap-2 transition-all items-center cursor-pointer active:scale-95 hover:bg-button-bg rounded-xl"
+      :class="{
+        'text-contrast font-medium bg-button-bg': selected === item,
+        'text-primary bg-transparent': selected !== item,
+      }"
+      @click="selected = item"
+    >
+      <RadioButtonChecked v-if="selected === item" class="text-brand h-5 w-5" />
+      <RadioButtonIcon v-else class="h-5 w-5" />
+      <slot :item="item" />
+    </button>
+  </div>
+</template>
+<script setup lang="ts" generic="T">
+import { RadioButtonIcon, RadioButtonChecked } from '@modrinth/assets'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: T
+    items: T[]
+    forceSelection?: boolean
+  }>(),
+  {
+    forceSelection: false,
+  },
+)
+
+const emit = defineEmits(['update:modelValue'])
+
+const selected = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  },
+})
+
+if (props.items.length > 0 && props.forceSelection && !props.modelValue) {
+  selected.value = props.items[0]
+}
+</script>
diff --git a/packages/ui/src/components/base/Timeline.vue b/packages/ui/src/components/base/Timeline.vue
new file mode 100644
index 000000000..e35b06921
--- /dev/null
+++ b/packages/ui/src/components/base/Timeline.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    fadeOutStart?: boolean
+    fadeOutEnd?: boolean
+  }>(),
+  {
+    fadeOutStart: false,
+    fadeOutEnd: false,
+  },
+)
+</script>
+<template>
+  <div class="relative flex flex-col gap-4 pb-6 isolate">
+    <div class="absolute flex h-full w-4 justify-center">
+      <div
+        class="timeline-indicator"
+        :class="{ 'fade-out-start': fadeOutStart, 'fade-out-end': fadeOutEnd }"
+      />
+    </div>
+    <slot />
+  </div>
+</template>
+<style lang="scss" scoped>
+.timeline-indicator {
+  background-image: linear-gradient(
+    to bottom,
+    var(--timeline-line-color, var(--color-raised-bg)) 66%,
+    rgba(255, 255, 255, 0) 0%
+  );
+  background-size: 100% 30px;
+  background-repeat: repeat-y;
+  margin-top: 1rem;
+
+  height: calc(100% - 1rem);
+  width: 4px;
+  z-index: -1;
+
+  &.fade-out-start {
+    mask-image: linear-gradient(to top, black calc(100% - 15rem), transparent 100%);
+  }
+
+  &.fade-out-end {
+    mask-image: linear-gradient(to bottom, black calc(100% - 15rem), transparent 100%);
+  }
+
+  &.fade-out-start.fade-out-end {
+    mask-image: linear-gradient(
+      to bottom,
+      transparent 0%,
+      black 8rem,
+      black calc(100% - 8rem),
+      transparent 100%
+    );
+  }
+}
+</style>
diff --git a/packages/ui/src/components/base/Toggle.vue b/packages/ui/src/components/base/Toggle.vue
index aeb01433f..81258d206 100644
--- a/packages/ui/src/components/base/Toggle.vue
+++ b/packages/ui/src/components/base/Toggle.vue
@@ -3,33 +3,17 @@
     :id="id"
     type="checkbox"
     class="switch stylized-toggle"
+    :disabled="disabled"
     :checked="checked"
-    @change="toggle"
+    @change="checked = !checked"
   />
 </template>
 
-<script>
-export default {
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    modelValue: {
-      type: Boolean,
-    },
-    checked: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  emits: ['update:modelValue'],
-  methods: {
-    toggle() {
-      if (!this.disabled) {
-        this.$emit('update:modelValue', !this.modelValue)
-      }
-    },
-  },
-}
+<script setup lang="ts">
+defineProps<{
+  id?: string
+  disabled?: boolean
+}>()
+
+const checked = defineModel<boolean>()
 </script>
diff --git a/packages/ui/src/components/billing/PurchaseModal.vue b/packages/ui/src/components/billing/PurchaseModal.vue
index e0788e234..8878d76d7 100644
--- a/packages/ui/src/components/billing/PurchaseModal.vue
+++ b/packages/ui/src/components/billing/PurchaseModal.vue
@@ -2,15 +2,16 @@
   <NewModal ref="purchaseModal">
     <template #title>
       <span class="text-contrast text-xl font-extrabold">
-        <template v-if="product.metadata.type === 'midas'">Subscribe to Modrinth Plus!</template>
-        <template v-else-if="product.metadata.type === 'pyro'"
-          >Subscribe to Modrinth Servers!</template
-        >
+        <template v-if="productType === 'midas'">Subscribe to Modrinth+!</template>
+        <template v-else-if="productType === 'pyro'">
+          <template v-if="existingSubscription"> Upgrade server plan </template>
+          <template v-else> Subscribe to Modrinth Servers! </template>
+        </template>
         <template v-else>Purchase product</template>
       </span>
     </template>
     <div class="flex items-center gap-1 pb-4">
-      <template v-if="product.metadata.type === 'pyro' && !projectId">
+      <template v-if="productType === 'pyro' && !projectId">
         <span
           :class="{
             'text-secondary': purchaseModalStep !== 0,
@@ -24,24 +25,20 @@
       </template>
       <span
         :class="{
-          'text-secondary':
-            purchaseModalStep !== (product.metadata.type === 'pyro' && !projectId ? 1 : 0),
-          'font-bold':
-            purchaseModalStep === (product.metadata.type === 'pyro' && !projectId ? 1 : 0),
+          'text-secondary': purchaseModalStep !== (productType === 'pyro' && !projectId ? 1 : 0),
+          'font-bold': purchaseModalStep === (productType === 'pyro' && !projectId ? 1 : 0),
         }"
       >
-        {{ product.metadata.type === 'pyro' ? 'Billing' : 'Plan' }}
+        {{ productType === 'pyro' ? 'Billing' : 'Plan' }}
         <span class="hidden sm:inline">{{
-          product.metadata.type === 'pyro' ? 'interval' : 'selection'
+          productType === 'pyro' ? 'interval' : 'selection'
         }}</span>
       </span>
       <ChevronRightIcon class="h-5 w-5 text-secondary" />
       <span
         :class="{
-          'text-secondary':
-            purchaseModalStep !== (product.metadata.type === 'pyro' && !projectId ? 2 : 1),
-          'font-bold':
-            purchaseModalStep === (product.metadata.type === 'pyro' && !projectId ? 2 : 1),
+          'text-secondary': purchaseModalStep !== (productType === 'pyro' && !projectId ? 2 : 1),
+          'font-bold': purchaseModalStep === (productType === 'pyro' && !projectId ? 2 : 1),
         }"
       >
         Payment
@@ -49,20 +46,18 @@
       <ChevronRightIcon class="h-5 w-5 text-secondary" />
       <span
         :class="{
-          'text-secondary':
-            purchaseModalStep !== (product.metadata.type === 'pyro' && !projectId ? 3 : 2),
-          'font-bold':
-            purchaseModalStep === (product.metadata.type === 'pyro' && !projectId ? 3 : 2),
+          'text-secondary': purchaseModalStep !== (productType === 'pyro' && !projectId ? 3 : 2),
+          'font-bold': purchaseModalStep === (productType === 'pyro' && !projectId ? 3 : 2),
         }"
       >
         Review
       </span>
     </div>
     <div
-      v-if="product.metadata.type === 'pyro' && !projectId && purchaseModalStep === 0"
+      v-if="productType === 'pyro' && !projectId && purchaseModalStep === 0"
       class="md:w-[600px] flex flex-col gap-4"
     >
-      <div>
+      <div v-if="!existingSubscription">
         <p class="my-2 text-lg font-bold">Configure your server</p>
         <div class="flex flex-col gap-4">
           <input v-model="serverName" placeholder="Server name" class="input" maxlength="48" />
@@ -105,13 +100,20 @@
       </div>
       <div v-if="customServer">
         <div class="flex gap-2 items-center">
-          <p class="my-2 text-lg font-bold">Configure your RAM</p>
+          <p class="my-2 text-lg font-bold">
+            <template v-if="existingSubscription">Upgrade your RAM</template>
+            <template v-else>Configure your RAM</template>
+          </p>
           <IssuesIcon
             v-if="customServerConfig.ramInGb < 4"
             v-tooltip="'This might not be enough resources for your Minecraft server.'"
             class="h-6 w-6 text-orange"
           />
         </div>
+        <p v-if="existingPlan" class="mt-1 mb-2 text-secondary">
+          Your current plan has <strong>{{ existingPlan.metadata.ram / 1024 }} GB RAM</strong> and
+          <strong>{{ existingPlan.metadata.cpu }} vCPUs</strong>.
+        </p>
         <div class="flex flex-col gap-4">
           <div class="flex w-full gap-2 items-center">
             <Slider
@@ -137,32 +139,19 @@
               <input v-model="customServerConfig.storageGbFormatted" disabled class="input" />
             </div>
           </div>
-          <div
-            v-else
-            class="flex justify-between rounded-2xl border-2 border-solid border-blue bg-bg-blue p-4 font-semibold text-contrast"
+          <Admonition
+            v-else-if="customOutOfStock && customMatchingProduct"
+            type="info"
+            header="This plan is currently out of stock"
           >
-            <div class="flex w-full justify-between gap-2">
-              <div class="flex flex-row gap-4">
-                <InfoIcon class="hidden flex-none h-8 w-8 text-blue sm:block" />
-
-                <div v-if="customOutOfStock && customMatchingProduct" class="flex flex-col gap-2">
-                  <div class="font-semibold">This plan is currently out of stock</div>
-                  <div class="font-normal">
-                    We are currently
-                    <a :href="outOfStockUrl" class="underline" target="_blank">out of capacity</a>
-                    for your selected RAM amount. Please try again later, or try a different amount.
-                  </div>
-                </div>
-                <div v-else class="flex flex-col gap-2">
-                  <div class="font-semibold">We can't seem to find your selected plan</div>
-                  <div class="font-normal">
-                    We are currently unable to find a server for your selected RAM amount. Please
-                    try again later, or try a different amount.
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
+            We are currently
+            <a :href="outOfStockUrl" class="underline" target="_blank">out of capacity</a>
+            for your selected RAM amount. Please try again later, or try a different amount.
+          </Admonition>
+          <Admonition v-else type="info" header="We can't seem to find your selected plan">
+            We are currently unable to find a server for your selected RAM amount. Please try again
+            later, or try a different amount.
+          </Admonition>
 
           <div class="flex items-center gap-2">
             <InfoIcon class="hidden sm:block" />
@@ -179,6 +168,16 @@
     >
       <div>
         <p class="my-2 text-lg font-bold">Choose billing interval</p>
+        <div v-if="existingPlan" class="flex flex-col gap-3 mb-4 text-secondary">
+          <p class="m-0">
+            The prices below reflect the new <strong>renewal cost</strong> of your upgraded
+            subscription.
+          </p>
+          <p class="m-0">
+            Today, you will be charged a prorated amount for the remainder of your current billing
+            cycle.
+          </p>
+        </div>
         <div class="flex flex-col gap-4">
           <div
             v-for="([interval, rawPrice], index) in Object.entries(price.prices.intervals)"
@@ -241,7 +240,10 @@
       v-if="purchaseModalStep === (mutatedProduct.metadata.type === 'pyro' && !projectId ? 3 : 2)"
       class="md:w-[650px]"
     >
-      <div v-if="mutatedProduct.metadata.type === 'pyro'" class="r-4 rounded-xl bg-bg p-4 mb-4">
+      <div
+        v-if="mutatedProduct.metadata.type === 'pyro' && !existingSubscription"
+        class="r-4 rounded-xl bg-bg p-4 mb-4"
+      >
         <p class="my-2 text-lg font-bold text-primary">Server details</p>
         <div class="flex items-center gap-4">
           <img
@@ -261,12 +263,19 @@
         <div class="r-4 rounded-xl bg-bg p-4">
           <p class="my-2 text-lg font-bold text-primary">Purchase details</p>
           <div class="mb-2 flex justify-between">
-            <span class="text-secondary"
-              >{{ mutatedProduct.metadata.type === 'midas' ? 'Modrinth+' : 'Modrinth Servers' }}
-              {{ selectedPlan }}</span
-            >
-            <span class="text-secondary text-end">
-              {{ formatPrice(locale, price.prices.intervals[selectedPlan], price.currency_code) }} /
+            <span class="text-secondary">
+              {{ mutatedProduct.metadata.type === 'midas' ? 'Modrinth+' : 'Modrinth Servers' }}
+              {{
+                existingPlan
+                  ? `(${dayjs(renewalDate).diff(dayjs(), 'days')} days prorated)`
+                  : selectedPlan
+              }}
+            </span>
+            <span v-if="existingPlan" class="text-secondary text-end">
+              {{ formatPrice(locale, total - tax, price.currency_code) }}
+            </span>
+            <span v-else class="text-secondary text-end">
+              {{ formatPrice(locale, total - tax, price.currency_code) }} /
               {{ selectedPlan }}
             </span>
           </div>
@@ -279,7 +288,7 @@
           <div class="mt-4 flex justify-between border-0 border-t border-solid border-code-bg pt-4">
             <span class="text-lg font-bold">Today's total</span>
             <span class="text-lg font-extrabold text-primary text-end">
-              {{ formatPrice(locale, price.prices.intervals[selectedPlan], price.currency_code) }}
+              {{ formatPrice(locale, total, price.currency_code) }}
             </span>
           </div>
         </div>
@@ -376,7 +385,8 @@
         <br />
         You'll be charged
         {{ formatPrice(locale, price.prices.intervals[selectedPlan], price.currency_code) }} /
-        {{ selectedPlan }} plus applicable taxes starting today, until you cancel.
+        {{ selectedPlan }} plus applicable taxes starting
+        {{ existingPlan ? dayjs(renewalDate).format('MMMM D, YYYY') : 'today' }}, until you cancel.
         <br />
         You can cancel anytime from your settings page.
       </p>
@@ -402,12 +412,19 @@
           :disabled="
             paymentLoading ||
             (mutatedProduct.metadata.type === 'pyro' && !projectId && !serverName) ||
-            customAllowedToContinue
+            customNotAllowedToContinue ||
+            upgradeNotAllowedToContinue
           "
           @click="nextStep"
         >
-          <RightArrowIcon />
-          {{ mutatedProduct.metadata.type === 'pyro' && !projectId ? 'Next' : 'Select' }}
+          <template v-if="customServer && customLoading">
+            <SpinnerIcon class="animate-spin" />
+            Checking availability...
+          </template>
+          <template v-else>
+            <RightArrowIcon />
+            {{ mutatedProduct.metadata.type === 'pyro' && !projectId ? 'Next' : 'Select' }}
+          </template>
         </button>
       </template>
       <template
@@ -481,6 +498,7 @@
 import { ref, computed, nextTick, reactive, watch } from 'vue'
 import NewModal from '../modal/NewModal.vue'
 import {
+  SpinnerIcon,
   CardIcon,
   CheckCircleIcon,
   ChevronRightIcon,
@@ -500,6 +518,8 @@ import { useVIntl, defineMessages } from '@vintl/vintl'
 import { Multiselect } from 'vue-multiselect'
 import Checkbox from '../base/Checkbox.vue'
 import Slider from '../base/Slider.vue'
+import dayjs from 'dayjs'
+import Admonition from '../base/Admonition.vue'
 
 const { locale, formatMessage } = useVIntl()
 
@@ -574,8 +594,25 @@ const props = defineProps({
     required: false,
     default: '',
   },
+  existingSubscription: {
+    type: Object,
+    required: false,
+    default: null,
+  },
+  existingPlan: {
+    type: Object,
+    required: false,
+    default: null,
+  },
+  renewalDate: {
+    type: String,
+    required: false,
+    default: null,
+  },
 })
 
+const productType = computed(() => (props.customServer ? 'pyro' : props.product.metadata.type))
+
 const messages = defineMessages({
   paymentMethodCardDisplay: {
     id: 'omorphia.component.purchase_modal.payment_method_card_display',
@@ -657,7 +694,7 @@ const total = ref()
 
 const serverName = ref(props.serverName || '')
 const serverLoader = ref('Vanilla')
-const eulaAccepted = ref(false)
+const eulaAccepted = ref(!!props.existingSubscription)
 
 const mutatedProduct = ref({ ...props.product })
 const customMinRam = ref(0)
@@ -665,11 +702,15 @@ const customMaxRam = ref(0)
 const customMatchingProduct = ref()
 const customOutOfStock = ref(false)
 const customLoading = ref(true)
-const customAllowedToContinue = computed(
+const customNotAllowedToContinue = computed(
   () =>
     props.customServer &&
+    !props.existingSubscription &&
     (!customMatchingProduct.value || customLoading.value || customOutOfStock.value),
 )
+const upgradeNotAllowedToContinue = computed(
+  () => props.existingSubscription && (customOutOfStock.value || customLoading.value),
+)
 
 const customServerConfig = reactive({
   ramInGb: 4,
@@ -682,7 +723,9 @@ const updateCustomServerProduct = () => {
     (product) => product.metadata.ram === customServerConfig.ram,
   )
 
-  if (customMatchingProduct.value) mutatedProduct.value = { ...customMatchingProduct.value }
+  if (customMatchingProduct.value) {
+    mutatedProduct.value = { ...customMatchingProduct.value }
+  }
 }
 
 let updateCustomServerStockTimeout = null
@@ -694,25 +737,38 @@ const updateCustomServerStock = async () => {
 
   updateCustomServerStockTimeout = setTimeout(async () => {
     if (props.fetchCapacityStatuses) {
-      const capacityStatus = await props.fetchCapacityStatuses(mutatedProduct.value)
-      if (capacityStatus.custom?.available === 0) {
-        customOutOfStock.value = true
+      if (props.existingSubscription) {
+        if (mutatedProduct.value) {
+          const capacityStatus = await props.fetchCapacityStatuses(
+            props.existingSubscription.metadata.id,
+            mutatedProduct.value,
+          )
+          customOutOfStock.value = capacityStatus.custom?.available === 0
+          console.log(capacityStatus)
+        }
       } else {
-        customOutOfStock.value = false
+        const capacityStatus = await props.fetchCapacityStatuses(mutatedProduct.value)
+        customOutOfStock.value = capacityStatus.custom?.available === 0
       }
-      customLoading.value = false
     } else {
       console.error('No fetchCapacityStatuses function provided.')
       customOutOfStock.value = true
     }
+    customLoading.value = false
   }, 300)
 }
 
-if (props.customServer) {
+function updateRamValues() {
   const ramValues = props.product.map((product) => product.metadata.ram / 1024)
   customMinRam.value = Math.min(...ramValues)
   customMaxRam.value = Math.max(...ramValues)
 
+  customServerConfig.ramInGb = customMinRam.value
+}
+
+if (props.customServer) {
+  updateRamValues()
+
   const updateProductAndStock = () => {
     updateCustomServerProduct()
     updateCustomServerStock()
@@ -892,16 +948,25 @@ async function refreshPayment(confirmationId, paymentMethodId) {
           id: paymentMethodId,
         }
 
-    const result = await props.sendBillingRequest({
-      charge: {
-        type: 'new',
-        product_id: mutatedProduct.value.id,
-        interval: selectedPlan.value,
-      },
-      existing_payment_intent: paymentIntentId.value,
-      metadata: metadata.value,
-      ...base,
-    })
+    const result = await props.sendBillingRequest(
+      props.existingSubscription
+        ? {
+            interval: selectedPlan.value,
+            cancelled: false,
+            product: mutatedProduct.value.id,
+            payment_method: paymentMethodId,
+          }
+        : {
+            charge: {
+              type: 'new',
+              product_id: mutatedProduct.value.id,
+              interval: selectedPlan.value,
+            },
+            existing_payment_intent: paymentIntentId.value,
+            metadata: metadata.value,
+            ...base,
+          },
+    )
 
     if (!paymentIntentId.value) {
       paymentIntentId.value = result.payment_intent_id
@@ -915,10 +980,14 @@ async function refreshPayment(confirmationId, paymentMethodId) {
 
     if (confirmationId) {
       confirmationToken.value = confirmationId
-      inputtedPaymentMethod.value = result.payment_method
+      if (result.payment_method) {
+        inputtedPaymentMethod.value = result.payment_method
+      }
     }
 
-    selectedPaymentMethod.value = result.payment_method
+    if (result.payment_method) {
+      selectedPaymentMethod.value = result.payment_method
+    }
   } catch (err) {
     props.onError(err)
   }
@@ -942,9 +1011,13 @@ async function submitPayment() {
 
 defineExpose({
   show: () => {
+    if (props.customServer) {
+      updateRamValues()
+    }
+
     stripe = Stripe(props.publishableKey)
 
-    selectedPlan.value = 'yearly'
+    selectedPlan.value = props.existingSubscription ? props.existingSubscription.interval : 'yearly'
     serverName.value = props.serverName || ''
     serverLoader.value = 'Vanilla'
 
diff --git a/packages/ui/src/components/changelog/ChangelogEntry.vue b/packages/ui/src/components/changelog/ChangelogEntry.vue
new file mode 100644
index 000000000..2a6c1debb
--- /dev/null
+++ b/packages/ui/src/components/changelog/ChangelogEntry.vue
@@ -0,0 +1,165 @@
+<template>
+  <div>
+    <div class="flex items-center gap-4">
+      <div
+        class="h-4 w-4 rounded-full border-2 border-solid border-button-border"
+        :class="recent || first ? 'bg-brand' : 'bg-button-bg'"
+      />
+      <div class="flex flex-wrap items-center gap-2">
+        <AutoLink
+          :to="
+            hasLink ? `/news/changelog/${entry.product}/${entry.version ?? entry.date.unix()}` : ''
+          "
+          :class="{ 'hover:underline': hasLink }"
+        >
+          <h2 class="flex items-center gap-2 m-0 text-xl font-extrabold text-contrast">
+            <template v-if="showType">
+              {{ formatMessage(messages[entry.product]) }}
+              <div class="w-2 h-2 rounded-full bg-secondary" />
+            </template>
+            <span :class="{ 'text-primary font-bold': showType }">
+              {{ versionName }}
+            </span>
+          </h2>
+        </AutoLink>
+        <div
+          v-if="recent"
+          v-tooltip="dateTooltip"
+          class="hidden sm:flex"
+          :class="{ 'cursor-help': dateTooltip }"
+        >
+          {{ future ? formatMessage(messages.justNow) : relativeDate }}
+        </div>
+        <div v-else-if="entry.version" :class="{ 'cursor-help': dateTooltip }">
+          {{ longDate }}
+        </div>
+      </div>
+    </div>
+    <div class="ml-8 mt-3 rounded-2xl bg-bg-raised px-4 py-3">
+      <div class="changelog-body" v-html="renderHighlightedString(entry.body)" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { VersionEntry } from '@modrinth/utils/changelog'
+import { renderHighlightedString } from '@modrinth/utils'
+import dayjs from 'dayjs'
+import { useVIntl, defineMessages } from '@vintl/vintl'
+import { computed, ref } from 'vue'
+import AutoLink from '../base/AutoLink.vue'
+
+const { formatMessage } = useVIntl()
+
+const props = withDefaults(
+  defineProps<{
+    entry: VersionEntry
+    showType?: boolean
+    first?: boolean
+    hasLink?: boolean
+  }>(),
+  {
+    showType: false,
+    first: false,
+    hasLink: false,
+  },
+)
+
+const currentDate = ref(dayjs())
+const recent = computed(() => props.entry.date.isAfter(currentDate.value.subtract(1, 'week')))
+const future = computed(() => props.entry.date.isAfter(currentDate.value))
+const dateTooltip = computed(() => props.entry.date.format('MMMM D, YYYY [at] h:mm A'))
+
+const relativeDate = computed(() => props.entry.date.fromNow())
+const longDate = computed(() => props.entry.date.format('MMMM D, YYYY'))
+const versionName = computed(() => props.entry.version ?? longDate.value)
+
+const messages = defineMessages({
+  web: {
+    id: 'changelog.product.web',
+    defaultMessage: 'Website',
+  },
+  servers: {
+    id: 'changelog.product.servers',
+    defaultMessage: 'Servers',
+  },
+  app: {
+    id: 'changelog.product.app',
+    defaultMessage: 'App',
+  },
+  api: {
+    id: 'changelog.product.api',
+    defaultMessage: 'API',
+  },
+  justNow: {
+    id: 'changelog.justNow',
+    defaultMessage: 'Just now',
+  },
+})
+</script>
+<style lang="scss" scoped>
+:deep(.changelog-body) {
+  line-height: 1.4;
+  word-break: break-word;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+  }
+
+  ul {
+    padding-left: 1.25rem;
+    margin: 0;
+  }
+
+  a {
+    color: var(--color-link);
+
+    &:hover,
+    &:focus-visible {
+      filter: brightness(1.2);
+      text-decoration: underline;
+    }
+  }
+
+  code {
+    background-color: var(--color-bg);
+    font-size: var(--font-size-sm);
+    padding: 0.125rem 0.25rem;
+    border-radius: 4px;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  * + p {
+    margin-top: 0.5rem;
+  }
+
+  h3 + * {
+    margin-top: 0.5rem;
+  }
+
+  * + h3 {
+    margin-top: 0.75rem;
+  }
+
+  * + li {
+    margin-top: 0.5rem;
+  }
+
+  li ul li {
+    margin-top: 0.25rem;
+  }
+
+  img {
+    max-width: 100%;
+    border-radius: var(--radius-md);
+  }
+}
+</style>
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 8fe546bc9..ab41adef8 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1,5 +1,6 @@
 // Base content
 export { default as Accordion } from './base/Accordion.vue'
+export { default as Admonition } from './base/Admonition.vue'
 export { default as AutoLink } from './base/AutoLink.vue'
 export { default as Avatar } from './base/Avatar.vue'
 export { default as Badge } from './base/Badge.vue'
@@ -8,6 +9,7 @@ export { default as ButtonStyled } from './base/ButtonStyled.vue'
 export { default as Card } from './base/Card.vue'
 export { default as Checkbox } from './base/Checkbox.vue'
 export { default as Chips } from './base/Chips.vue'
+export { default as Collapsible } from './base/Collapsible.vue'
 export { default as ContentPageHeader } from './base/ContentPageHeader.vue'
 export { default as CopyCode } from './base/CopyCode.vue'
 export { default as DoubleIcon } from './base/DoubleIcon.vue'
@@ -25,18 +27,24 @@ export { default as Pagination } from './base/Pagination.vue'
 export { default as PopoutMenu } from './base/PopoutMenu.vue'
 export { default as PreviewSelectButton } from './base/PreviewSelectButton.vue'
 export { default as ProjectCard } from './base/ProjectCard.vue'
+export { default as RadialHeader } from './base/RadialHeader.vue'
+export { default as RadioButtons } from './base/RadioButtons.vue'
 export { default as ScrollablePanel } from './base/ScrollablePanel.vue'
 export { default as SimpleBadge } from './base/SimpleBadge.vue'
 export { default as Slider } from './base/Slider.vue'
 export { default as StatItem } from './base/StatItem.vue'
 export { default as TagItem } from './base/TagItem.vue'
 export { default as TeleportDropdownMenu } from './base/TeleportDropdownMenu.vue'
+export { default as Timeline } from './base/Timeline.vue'
 export { default as Toggle } from './base/Toggle.vue'
 
 // Branding
 export { default as AnimatedLogo } from './brand/AnimatedLogo.vue'
 export { default as TextLogo } from './brand/TextLogo.vue'
 
+// Changelog
+export { default as ChangelogEntry } from './changelog/ChangelogEntry.vue'
+
 // Charts
 export { default as Chart } from './chart/Chart.vue'
 export { default as CompactChart } from './chart/CompactChart.vue'
diff --git a/packages/ui/src/components/modal/ConfirmModal.vue b/packages/ui/src/components/modal/ConfirmModal.vue
index 1d38ec6d5..42115e27b 100644
--- a/packages/ui/src/components/modal/ConfirmModal.vue
+++ b/packages/ui/src/components/modal/ConfirmModal.vue
@@ -10,7 +10,7 @@
       <label v-if="hasToType" for="confirmation" class="confirmation-label">
         <span>
           <strong>To verify, type</strong>
-          <em class="confirmation-text">{{ confirmationText }}</em>
+          <em class="confirmation-text"> {{ confirmationText }} </em>
           <strong>below:</strong>
         </span>
       </label>
diff --git a/packages/ui/src/components/modal/Modal.vue b/packages/ui/src/components/modal/Modal.vue
index 7f034d7ee..eef208ae1 100644
--- a/packages/ui/src/components/modal/Modal.vue
+++ b/packages/ui/src/components/modal/Modal.vue
@@ -67,7 +67,7 @@ function show() {
 }
 
 function hide() {
-  props.onHide()
+  props.onHide?.()
   actuallyShown.value = false
   setTimeout(() => {
     shown.value = false
diff --git a/packages/ui/src/components/modal/NewModal.vue b/packages/ui/src/components/modal/NewModal.vue
index 4dc72836f..38e3429f8 100644
--- a/packages/ui/src/components/modal/NewModal.vue
+++ b/packages/ui/src/components/modal/NewModal.vue
@@ -90,7 +90,7 @@ function addBodyPadding() {
 }
 
 function show(event?: MouseEvent) {
-  props.onShow()
+  props.onShow?.()
   open.value = true
 
   addBodyPadding()
@@ -109,7 +109,7 @@ function show(event?: MouseEvent) {
 }
 
 function hide() {
-  props.onHide()
+  props.onHide?.()
   visible.value = false
   document.body.style.overflow = ''
   document.body.style.paddingRight = ''
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index f6529b8c7..d569d1ecb 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -32,6 +32,21 @@
   "button.upload-image": {
     "defaultMessage": "Upload image"
   },
+  "changelog.justNow": {
+    "defaultMessage": "Just now"
+  },
+  "changelog.product.api": {
+    "defaultMessage": "API"
+  },
+  "changelog.product.app": {
+    "defaultMessage": "App"
+  },
+  "changelog.product.servers": {
+    "defaultMessage": "Servers"
+  },
+  "changelog.product.web": {
+    "defaultMessage": "Website"
+  },
   "collection.label.private": {
     "defaultMessage": "Private"
   },
diff --git a/packages/utils/changelog.ts b/packages/utils/changelog.ts
new file mode 100644
index 000000000..5ab3a42a7
--- /dev/null
+++ b/packages/utils/changelog.ts
@@ -0,0 +1,332 @@
+import dayjs from 'dayjs'
+
+export type Product = 'web' | 'servers' | 'api' | 'app'
+
+export type VersionEntry = {
+  date: dayjs.Dayjs
+  product: Product
+  version?: string
+  body: string
+}
+
+const VERSIONS: VersionEntry[] = [
+  {
+    date: `2025-03-05T17:40:00-08:00`,
+    product: 'web',
+    body: `### Improvements
+- Fixed moderation-end pages failing under edge cases.`,
+  },
+  {
+    date: `2025-03-05T12:40:00-08:00`,
+    product: 'web',
+    body: `### Improvements
+- Fixed various errors with modals for some users.
+- Fixed hold R button not working on some systems.`,
+  },
+  {
+    date: `2025-03-03T22:30:00-08:00`,
+    product: 'web',
+    body: `### Added
+- Hold R for a random project :D
+
+### Improvements
+- Improved admin navigation and admin panels.`,
+  },
+  {
+    date: `2025-03-02T18:45:00-08:00`,
+    product: 'web',
+    body: `### Improvements
+- Added option to copy version IDs from the version list for project members and developer mode.
+- Fixed the staff moderation checklist going off the screen.`,
+  },
+  {
+    date: `2025-02-25T10:20:00-08:00`,
+    product: 'servers',
+    body: `### Improvements
+- Fixed server upgrades being allowed when out of stock, despite warning.`,
+  },
+  {
+    date: `2025-02-25T10:20:00-08:00`,
+    product: 'web',
+    body: `### Improvements
+- Moved Minecraft brand disclaimer to bottom of footer.
+- Improved clarity of the ongoing revenue period footnote on the Revenue page.
+- Fixed collections without a summary being unable to be edited.`,
+  },
+  {
+    date: `2025-02-21T13:30:00-08:00`,
+    product: 'web',
+    body: `### Improvements
+- Collections are now sorted by creation date. (Contributed by [worldwidepixel](https://github.com/modrinth/code/pull/3286))
+- Collections are no longer required to have summaries. (Contributed by [Erb3](https://github.com/modrinth/code/pull/3281))
+- Fixed padding issue on revenue page.
+- Fixed last modified date on Rewards Program Info page. (Contributed by [IMB11](https://github.com/modrinth/code/pull/3287))`,
+  },
+  {
+    date: `2025-02-20T18:15:00-08:00`,
+    product: 'web',
+    body: `### Improvements
+- Revenue page has been updated to more clearly display pending revenue and when it will be available to withdraw. (Contributed by [IMB11](https://github.com/modrinth/code/pull/3250))
+- Footer will now be forced to the bottom of the page on short pages.
+- Styling fixes to moderation checklist proof form.`,
+  },
+  {
+    date: `2025-02-19T22:20:00-08:00`,
+    product: 'web',
+    body: `### Added
+- All-new site footer with more links, better organization, and a new aesthetic.
+
+### Improvements
+- Added Dallas location to Modrinth Servers landing page.
+- Updated staff moderation checklist to be more visually consistent and more dynamic.`,
+  },
+  {
+    date: `2025-02-18T14:30:00-08:00`,
+    product: 'servers',
+    body: `### Added
+- Links will now be detected in console line viewer modal.
+
+### Improvements
+- Initial loading of pages in the server panel are now up to 400% faster.
+- Syncing and uploading new server icons no longer requires a full page refresh.
+- Fix a case where opening the platform modal, closing it, and reopening it would cause the loader version to be unselected.
+- Prevents an issue where, if crash log analysis fails, the Overview page would unrender.
+- Suspended server listings now have a copy ID button.
+- Fixed bugs from Modrinth Servers February Release.`,
+  },
+  {
+    date: `2025-02-16T19:10:00-08:00`,
+    product: 'web',
+    body: `### Improvements
+- Fixed spacing issue on confirmation modals.`,
+  },
+  {
+    date: `2025-02-16T19:10:00-08:00`,
+    product: 'servers',
+    body: `### Improvements
+- Check for availability before allowing a server upgrade.`,
+  },
+  {
+    date: `2025-02-12T19:10:00-08:00`,
+    product: 'web',
+    body: `### Improvements
+- Servers out of stock link now links to Modrinth Discord instead of support page.`,
+  },
+  {
+    date: `2025-02-12T19:10:00-08:00`,
+    product: 'servers',
+    body: `### Added
+- Added server upgrades to switch to a larger plan as an option in billing settings.`,
+  },
+  {
+    date: `2025-02-12T12:10:00-08:00`,
+    product: 'web',
+    body: `### Added
+- Added a 3D globe to visualize node locations to Modrinth Servers marketing page.
+- Added an indicator to show when certain server plans are running low on availability.
+
+### Improvements
+- Improved out-of-stock notifications on Modrinth Servers page to be more accurate.`,
+  },
+  {
+    date: `2025-02-11T13:00:00-08:00`,
+    product: 'web',
+    body: `### Improvements
+- Added project issues link to report page if present.
+- Added relative times for all recent versions to changelog page.
+- Added header to changelog sub-pages.
+- Fixed various padding issues and changelog overlapping navbar on mobile.`,
+  },
+  {
+    date: `2025-02-11T09:00:00-08:00`,
+    product: 'web',
+    body: `### Added
+- Added a changelog page to view recent changes to Modrinth.`,
+  },
+  {
+    date: `2025-02-10T14:00:00-08:00`,
+    product: 'web',
+    body: `### Improvements
+- The license selector in project settings has been updated to make selecting a license a clearer process. (Contributed by [Erb3](https://github.com/modrinth/code/pull/3225))`,
+  },
+  {
+    date: `2025-02-10T08:00:00-08:00`,
+    product: 'servers',
+    version: `February Release`,
+    body: `### Added
+- You can now search and filter through your server's console in the Overview tab, jump to specific results to see the log in context, select them, and copy them.
+- You can now drag and select any number of lines in the console, copy them. and view them formatted.
+- Hide your server's \`.modrinth.gg\` custom URL using the new **Hide subdomain label** toggle in Options > Preferences.
+- The Content page has been updated to make managing your server's mods and plugins easier than ever. Now, only versions that are available for your server's Minecraft version and platform are shown by default, and you can now show beta and alpha versions in the selector.
+### Improvements
+- The Overview page loads faster.
+- The Options > Properties page loads faster.
+- The server hardware graphs in the Overview page have been rewritten to improve power efficiency and fix rendering bugs.
+- The modpack selector in Options > Platform now shows more information about a modpack, like its tags, downloads, and followers.
+- Reinstalling your server no longer requires the browser to refresh the page in order to work properly. We now also lock more options while a server installs to prevent your server from bricking itself.
+- The server console has been rewritten to implement proper batching. All performance issues with the console previously have now been fixed.
+- An error state has been added in the server list if servers are unable to be fetched.
+- Sorting in the Files tab is now accessible by clicking the column headers.
+- Backing up a server and erasing all its data simultaneously in the Platform page now works as expected.
+- Opening a platform modal, then opening another, no longer causes versions of that platform to fail to load.`,
+  },
+  {
+    date: `2025-02-06T10:00:00-08:00`,
+    product: 'app',
+    version: `0.9.3`,
+    body: `### Improvements
+- Prevent ads from being able to open additional windows.
+- Fixed update checking only checking for mod updates.
+- Fixed issue importing newer Prism instances.
+- Fixed issue where instances get stuck "Installing" forever when the app is closed during an install.
+- Minecraft profile is now updated every time the user's token is refreshed.
+- Improved ability for package managers to update Modrinth App by skipping the updater at runtime with an environment variable.`,
+  },
+  {
+    date: `2025-02-02T14:00:00-08:00`,
+    product: 'web',
+    body: `### Improvements
+- The report form has been updated to walk you through the report process better and clarify some things like that the form is for Modrinth rules and terms violations, not for bug reports or DMCA takedowns.
+
+![A screenshot of the new report form on Modrinth, using Iris Shaders as an example. The title says "Report Iris Shaders to moderators". Below that, it says "Please report violations of Modrinth Rules or Terms of Use. Examples include malicious, spam, offensive, deceptive, misleading, and illegal content. This form is not for bug reports or DMCA takedowns (See our Copyright Policy)." Then, there is a form that asks "Which of Modrinth's rules is this project violating?" with many options: Spam, Reuploaded work, Inappropriate, Malicious, Name-squatting, Poor description, Invalid metadata, Other. Reuploaded work is selected. Below that, is a note in an orange box with a warning icon: "Please note that you are *not* submitting a DMCA takedown request, but rather a report of reuploaded content. If you meant to file a DMCA takedown request (which is a legal action) instead, please see our Copyright Policy." Then, it asks you to provide additional context, including links and images, with a text editor and a submit button at the bottom.](https://cdn-raw.modrinth.com/changelog/web/2025-02-02/reports.jpg)`,
+  },
+  {
+    date: `2025-01-28T19:00:00-08:00`,
+    product: 'web',
+    body: `### Improvements
+- The UI for analytics has been updated to make it way more useful. What was previously called "Last month" really meant "Previous 30 days". Now, many more options have been added such as:
+  - "This month" which refers to the current calendar month (Jan 1st - Jan 28th, currently)
+  - "Last month" which refers to the previous calendar month (currently, Dec 1st thru Dec 31st)
+
+Contributed by [IMB11](https://github.com/modrinth/code/pull/1301).`,
+  },
+  {
+    date: `2025-01-10T09:00:00-08:00`,
+    product: 'servers',
+    version: 'January Release',
+    body: `### Added
+- Added drag & drop upload support for mod and plugin files on the content page.
+- Added a button to upload files to the content page.
+- Added extra info (file name, author) to each mod on the content page.
+- Show number of mods in search box.
+- Adds a "No mods/plugins found for your query!" message if nothing is found, with a button to show everything again.
+
+### Improvements
+- The content page layout has been enhanced, now showing the file name and author of each installed item.
+- You can now upload directly from the content page, instead of having to go to the Files page.
+- Auto-backup now lists options in a dropdown instead of number input.
+- Auto-backup 'Save changes' button now disables when no changes are made and backups are off.
+- Servers dropdowns now have rounded corners on the last elements for consistency.
+- Added support for more suspension reasons.
+- Will now show resubscribe button on servers when payment status is "failed" instead of just "cancelled".
+- Tweak button styles for consistency.
+- Only scroll to the top of the mod/plugin list when searching if already scrolled down.
+- Tweak content page mobile UI.`,
+  },
+  {
+    date: `2025-01-10T09:00:00-08:00`,
+    product: 'web',
+    body: `### Improvements
+- Tags on project pages are now clickable to view other projects with that tag (Contributed by [Neddo](https://github.com/modrinth/code/pull/3126))
+- You can now send someone a link to the download interface with a specific version and loader selected, like so: https://modrinth.com/mod/sodium?version=1.21.2&loader=quilt#download (Contributed by [AwakenedRedstone](https://github.com/modrinth/code/pull/3138))`,
+  },
+  {
+    date: `2024-12-26T22:05:00-08:00`,
+    product: 'servers',
+    body: `### Added
+- Added ability for users to clean install modpacks when switching versions.
+
+### Improvements
+- New status bar in ServerListing that shows suspension reasons/upgrade status.
+- Displays a new screen for servers that are being upgraded.`,
+  },
+  {
+    date: `2024-12-25T14:00:00-08:00`,
+    product: 'app',
+    version: `0.9.2`,
+    body: `### Improvements
+- Prevent ads from being able to play audio.`,
+  },
+  {
+    date: `2024-12-24T22:00:00-08:00`,
+    product: 'app',
+    version: `0.9.1`,
+    body: `### Added
+- Added filter to filter projects by disabled.
+- Re-added back/forward navigation buttons.
+### Improvements
+- Fixed environment tags missing from search.
+- Fixed an issue where ads could play audio.
+- Changed content enable/disable buttons to toggle switches.
+- Show "install" button at all time on project cards.
+- Fixed issue where cards would shrink when clicking button inside them causing click not to register.
+- Made sidebar hide instantly.`,
+  },
+  {
+    date: `2024-12-23T22:16:00-08:00`,
+    product: 'app',
+    version: `0.9.0`,
+    body: `### Improvements
+- New, updated design that brings the app in-line with the website.
+  - A dynamic sidebar that adjusts to the most relevant content for each page, and keeps the ad in a consistent place instead of moving all around your screen.
+  - More organized settings interfaces that makes each option clearer and easier to find.
+  - Managing your content is much easier with enhanced filters for content types or checking for updates.
+  - Content discovery has been overhauled and now has fully-featured project pages that match the website.
+  - Instances now show your total play time, and will show the last time you played on the Home screen.
+  - The library page now gives responsive feedback as instances are installing.
+- The beginnings of a Friends system. In the future, you will be able to share the instances you’re playing and invite them to servers.
+- Access your most recent instances with ease with Quick Instances.
+- Fixed “Database is locked” errors on devices with slow disks.
+- Fixed a few edge cases where API downtime could lead to an invalid state.`,
+  },
+  {
+    date: `2024-12-21T16:00:00-08:00`,
+    product: 'servers',
+    body: `### Added
+- Drag and drop anything in the file manager.
+- Added file upload queue status bar.
+- Added support for parallel file uploads to upload multiple files faster.
+- Added ability to cancel in-progress file uploads.
+- Creation dates are now displayed for files.
+- Can now sort by most recently created files
+- YAML and TOML files now support syntax highlighting
+- Find and replace support in files editor
+
+### Improvements
+- Files list renders up to 200% faster.
+- Image viewer performance improvements, improved UI, and better handling of large-to-display images.
+- UI inconsistency fixes.
+- When reinstalling the loader, the current Minecraft version is automatically selected.
+- Allow user to clean install modpacks on the modpack search page.
+- Fixed 'Change platform' button leading to the wrong page on a vanilla server.`,
+  },
+  {
+    date: `2024-12-11T22:18:45-08:00`,
+    product: 'servers',
+    version: `December Release`,
+    body: `### Added
+- Expanded loader support to include **Paper** and **Purpur** servers, offering fully native plugin compatibility.
+- A live chat button has been added to the bottom right of all server pages, making it easier for customers to contact our support team.
+- Automatic backups are now *rolling*. This means older backups will be deleted to make space for new backups when a new one is being created. You can also now **lock** specific backups so that they don't get deleted by the automatic backup process.
+- Users can now easily create backups before reinstalling a server with a different loader.
+
+### Improvements
+- The Platform options page has been completely redesigned to streamline user interactions and improve overall clarity.
+- Suspended servers now display a clear "Suspended" status instead of a confusing "Connection lost" message, allowing users to easily check their billing information.
+- The console has been internally reworked to improve responsiveness and prevent freezing during high-volume spam.
+- Resolved CPU usage readings that previously exceeded 100% during high-load scenarios. CPU usage is now accurately normalized to a 0–100% range across all cores.
+- Corrected CPU limit settings for some servers, potentially improving performance by up to half a core.
+- Fixed an issue preventing server reinstallation when at the maximum backup limit.
+- Resolved installation and runtime problems with older Minecraft versions.
+- Added missing dynamic system libraries to our images, ensuring compatibility with the vast majority of mods.
+- Implemented several additional bug fixes and performance optimizations.
+- Removed Herobrine.
+
+### Known Issues
+- Backups may occasionally take longer than expected or become stuck. If a backup is unresponsive, please submit a support inquiry, and we'll investigate further.`,
+  },
+].map((x) => ({ ...x, date: dayjs(x.date) }) as VersionEntry)
+
+export function getChangelog() {
+  return VERSIONS
+}
diff --git a/packages/utils/index.ts b/packages/utils/index.ts
index 42f6495dd..8cac23953 100644
--- a/packages/utils/index.ts
+++ b/packages/utils/index.ts
@@ -1,8 +1,9 @@
+export * from './billing'
+export * from './changelog'
 export * from './highlight'
+export * from './licenses'
 export * from './parse'
 export * from './projects'
+export * from './types'
 export * from './users'
 export * from './utils'
-export * from './billing'
-
-export * from './types'
diff --git a/packages/utils/licenses.ts b/packages/utils/licenses.ts
new file mode 100644
index 000000000..b8df1e25d
--- /dev/null
+++ b/packages/utils/licenses.ts
@@ -0,0 +1,76 @@
+export interface BuiltinLicense {
+  friendly: string
+  short: string
+  requiresOnlyOrLater?: boolean
+}
+
+export const builtinLicenses: BuiltinLicense[] = [
+  { friendly: 'Custom', short: '' },
+  {
+    friendly: 'All Rights Reserved/No License',
+    short: 'All-Rights-Reserved',
+  },
+  { friendly: 'Apache License 2.0', short: 'Apache-2.0' },
+  {
+    friendly: 'BSD 2-Clause "Simplified" License',
+    short: 'BSD-2-Clause',
+  },
+  {
+    friendly: 'BSD 3-Clause "New" or "Revised" License',
+    short: 'BSD-3-Clause',
+  },
+  {
+    friendly: 'CC Zero (Public Domain equivalent)',
+    short: 'CC0-1.0',
+  },
+  { friendly: 'CC-BY 4.0', short: 'CC-BY-4.0' },
+  {
+    friendly: 'CC-BY-SA 4.0',
+    short: 'CC-BY-SA-4.0',
+  },
+  {
+    friendly: 'CC-BY-NC 4.0',
+    short: 'CC-BY-NC-4.0',
+  },
+  {
+    friendly: 'CC-BY-NC-SA 4.0',
+    short: 'CC-BY-NC-SA-4.0',
+  },
+  {
+    friendly: 'CC-BY-ND 4.0',
+    short: 'CC-BY-ND-4.0',
+  },
+  {
+    friendly: 'CC-BY-NC-ND 4.0',
+    short: 'CC-BY-NC-ND-4.0',
+  },
+  {
+    friendly: 'GNU Affero General Public License v3',
+    short: 'AGPL-3.0',
+    requiresOnlyOrLater: true,
+  },
+  {
+    friendly: 'GNU Lesser General Public License v2.1',
+    short: 'LGPL-2.1',
+    requiresOnlyOrLater: true,
+  },
+  {
+    friendly: 'GNU Lesser General Public License v3',
+    short: 'LGPL-3.0',
+    requiresOnlyOrLater: true,
+  },
+  {
+    friendly: 'GNU General Public License v2',
+    short: 'GPL-2.0',
+    requiresOnlyOrLater: true,
+  },
+  {
+    friendly: 'GNU General Public License v3',
+    short: 'GPL-3.0',
+    requiresOnlyOrLater: true,
+  },
+  { friendly: 'ISC License', short: 'ISC' },
+  { friendly: 'MIT License', short: 'MIT' },
+  { friendly: 'Mozilla Public License 2.0', short: 'MPL-2.0' },
+  { friendly: 'zlib License', short: 'Zlib' },
+] as const
diff --git a/packages/utils/types.ts b/packages/utils/types.ts
index 3fe5dbec1..7f7892d26 100644
--- a/packages/utils/types.ts
+++ b/packages/utils/types.ts
@@ -1,7 +1,7 @@
 export const BASE62_CHARS = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
 export type Base62Char = (typeof BASE62_CHARS)[number]
 
-export type ModrinthId = `${Base62Char}`[]
+export type ModrinthId = string
 
 export type Environment = 'required' | 'optional' | 'unsupported' | 'unknown'
 
@@ -87,8 +87,7 @@ export interface Project {
 
   license: {
     id: string
-    name
-    string
+    name: string
     url?: string
   }
 }
@@ -241,3 +240,15 @@ export interface TeamMember {
   payouts_split: number
   ordering: number
 }
+
+export type Report = {
+  id: ModrinthId
+  item_id: ModrinthId
+  item_type: 'project' | 'version' | 'user'
+  report_type: string
+  reporter: ModrinthId
+  thread_id: ModrinthId
+  closed: boolean
+  created: string
+  body: string
+}
diff --git a/packages/utils/users.ts b/packages/utils/users.ts
index c4c4bfe08..690178711 100644
--- a/packages/utils/users.ts
+++ b/packages/utils/users.ts
@@ -8,4 +8,8 @@ export const isStaff = (user) => {
   return user && STAFF_ROLES.includes(user.role)
 }
 
+export const isAdmin = (user) => {
+  return user && user.role === 'admin'
+}
+
 export const STAFF_ROLES = ['moderator', 'admin']
diff --git a/packages/utils/utils.ts b/packages/utils/utils.ts
index 42b6b1c33..56f34523a 100644
--- a/packages/utils/utils.ts
+++ b/packages/utils/utils.ts
@@ -87,6 +87,17 @@ export const formatNumber = (number, abbreviate = true) => {
   return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 }
 
+export function formatDate(
+  date: dayjs.Dayjs,
+  options: Intl.DateTimeFormatOptions = {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  },
+): string {
+  return date.toDate().toLocaleDateString(undefined, options)
+}
+
 export function formatMoney(number, abbreviate = false) {
   const x = Number(number)
   if (x >= 1000000 && abbreviate) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 708fb7d99..a4286b3ae 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,7 +21,7 @@ importers:
         version: 2.2.3
       vue:
         specifier: ^3.5.13
-        version: 3.5.13(typescript@5.5.4)
+        version: 3.5.13(typescript@5.8.2)
 
   apps/app:
     dependencies:
@@ -165,26 +165,26 @@ importers:
   apps/docs:
     dependencies:
       '@astrojs/check':
-        specifier: ^0.9.3
-        version: 0.9.3(prettier@3.3.2)(typescript@5.5.4)
+        specifier: ^0.9.4
+        version: 0.9.4(prettier@3.3.2)(typescript@5.8.2)
       '@astrojs/starlight':
-        specifier: ^0.26.3
-        version: 0.26.3(astro@4.15.3(@types/node@22.4.1)(rollup@4.28.1)(sass@1.77.6)(terser@5.31.6)(typescript@5.5.4))
+        specifier: ^0.32.2
+        version: 0.32.2(astro@5.4.1(@types/node@22.4.1)(db0@0.2.1)(jiti@2.4.1)(rollup@4.34.9)(sass@1.77.6)(terser@5.31.6)(typescript@5.8.2)(yaml@2.6.1))
       '@modrinth/assets':
         specifier: workspace:*
         version: link:../../packages/assets
       astro:
-        specifier: ^4.10.2
-        version: 4.15.3(@types/node@22.4.1)(rollup@4.28.1)(sass@1.77.6)(terser@5.31.6)(typescript@5.5.4)
+        specifier: ^5.4.1
+        version: 5.4.1(@types/node@22.4.1)(db0@0.2.1)(jiti@2.4.1)(rollup@4.34.9)(sass@1.77.6)(terser@5.31.6)(typescript@5.8.2)(yaml@2.6.1)
       sharp:
-        specifier: ^0.32.5
-        version: 0.32.6
+        specifier: ^0.33.5
+        version: 0.33.5
       starlight-openapi:
-        specifier: ^0.7.0
-        version: 0.7.0(@astrojs/markdown-remark@5.2.0)(@astrojs/starlight@0.26.3(astro@4.15.3(@types/node@22.4.1)(rollup@4.28.1)(sass@1.77.6)(terser@5.31.6)(typescript@5.5.4)))(astro@4.15.3(@types/node@22.4.1)(rollup@4.28.1)(sass@1.77.6)(terser@5.31.6)(typescript@5.5.4))(openapi-types@12.1.3)
+        specifier: ^0.14.0
+        version: 0.14.0(@astrojs/markdown-remark@6.2.0)(@astrojs/starlight@0.32.2(astro@5.4.1(@types/node@22.4.1)(db0@0.2.1)(jiti@2.4.1)(rollup@4.34.9)(sass@1.77.6)(terser@5.31.6)(typescript@5.8.2)(yaml@2.6.1)))(astro@5.4.1(@types/node@22.4.1)(db0@0.2.1)(jiti@2.4.1)(rollup@4.34.9)(sass@1.77.6)(terser@5.31.6)(typescript@5.8.2)(yaml@2.6.1))(openapi-types@12.1.3)
       typescript:
-        specifier: ^5.5.4
-        version: 5.5.4
+        specifier: ^5.8.2
+        version: 5.8.2
 
   apps/frontend:
     dependencies:
@@ -209,6 +209,9 @@ importers:
       '@pinia/nuxt':
         specifier: ^0.5.1
         version: 0.5.1(magicast@0.3.5)(rollup@4.28.1)(typescript@5.5.4)(vue@3.5.13(typescript@5.5.4))
+      '@types/three':
+        specifier: ^0.172.0
+        version: 0.172.0
       '@vintl/vintl':
         specifier: ^4.4.1
         version: 4.4.1(typescript@5.5.4)(vue@3.5.13(typescript@5.5.4))
@@ -260,6 +263,9 @@ importers:
       semver:
         specifier: ^7.5.4
         version: 7.6.3
+      three:
+        specifier: ^0.172.0
+        version: 0.172.0
       vue-multiselect:
         specifier: 3.0.0-alpha.2
         version: 3.0.0-alpha.2
@@ -348,7 +354,7 @@ importers:
         version: link:../tsconfig
       vue:
         specifier: ^3.5.13
-        version: 3.5.13(typescript@5.5.4)
+        version: 3.5.13(typescript@5.8.2)
 
   packages/daedalus: {}
 
@@ -533,8 +539,8 @@ packages:
   '@apidevtools/swagger-methods@3.0.2':
     resolution: {integrity: sha512-QAkD5kK2b1WfjDS/UQn/qQkbwF31uqRjPTrsCs5ZG9BQGAkjwvqGFjjPqAuzac/IYzpPtRzjCP1WrTuAIjMrXg==}
 
-  '@astrojs/check@0.9.3':
-    resolution: {integrity: sha512-I6Dz45bMI5YRbp4yK2LKWsHH3/kkHRGdPGruGkLap6pqxhdcNh7oCgN04Ac+haDfc9ow5BYPGPmEhkwef15GQQ==}
+  '@astrojs/check@0.9.4':
+    resolution: {integrity: sha512-IOheHwCtpUfvogHHsvu0AbeRZEnjJg3MopdLddkJE70mULItS/Vh37BHcI00mcOJcH1vhD3odbpvWokpxam7xA==}
     hasBin: true
     peerDependencies:
       typescript: ^5.0.0
@@ -542,11 +548,14 @@ packages:
   '@astrojs/compiler@2.10.3':
     resolution: {integrity: sha512-bL/O7YBxsFt55YHU021oL+xz+B/9HvGNId3F9xURN16aeqDK9juHGktdkCSXz+U4nqFACq6ZFvWomOzhV+zfPw==}
 
-  '@astrojs/internal-helpers@0.4.1':
-    resolution: {integrity: sha512-bMf9jFihO8YP940uD70SI/RDzIhUHJAolWVcO1v5PUivxGKvfLZTLTVVxEYzGYyPsA3ivdLNqMnL5VgmQySa+g==}
+  '@astrojs/compiler@2.10.4':
+    resolution: {integrity: sha512-86B3QGagP99MvSNwuJGiYSBHnh8nLvm2Q1IFI15wIUJJsPeQTO3eb2uwBmrqRsXykeR/mBzH8XCgz5AAt1BJrQ==}
 
-  '@astrojs/language-server@2.14.1':
-    resolution: {integrity: sha512-mkKtCTPRD4dyKdAqIP0zmmPyO/ZABOqFESnaVca47Dg/sAagJnDSEsDUDzNbHFh1+9Dj1o5y4iwNsxJboGdaNg==}
+  '@astrojs/internal-helpers@0.6.0':
+    resolution: {integrity: sha512-XgHIJDQaGlFnTr0sDp1PiJrtqsWzbHP2qkTU+JpQ8SnBewKP2IKOe/wqCkl0CyfyRXRu3TSWu4t/cpYMVfuBNA==}
+
+  '@astrojs/language-server@2.15.4':
+    resolution: {integrity: sha512-JivzASqTPR2bao9BWsSc/woPHH7OGSGc9aMxXL4U6egVTqBycB3ZHdBJPuOCVtcGLrzdWTosAqVPz1BVoxE0+A==}
     hasBin: true
     peerDependencies:
       prettier: ^3.0.0
@@ -557,33 +566,33 @@ packages:
       prettier-plugin-astro:
         optional: true
 
-  '@astrojs/markdown-remark@5.2.0':
-    resolution: {integrity: sha512-vWGM24KZXz11jR3JO+oqYU3T2qpuOi4uGivJ9SQLCAI01+vEkHC60YJMRvHPc+hwd60F7euNs1PeOEixIIiNQw==}
+  '@astrojs/markdown-remark@6.2.0':
+    resolution: {integrity: sha512-LUDjgd9p1yG0qTFSocaj3GOLmZs8Hsw/pNtvqzvNY58Acebxvb/46vDO/e/wxYgsKgIfWS+p+ZI5SfOjoVrbCg==}
 
-  '@astrojs/mdx@3.1.5':
-    resolution: {integrity: sha512-Fu6oShqcDpi0D1b2/3Pg3ao1I+Q2YqKhFsSsuDzn0YhdGrry5oUyABUyCyGq/OayP2P/34Vwj+GCQ/n9h8FlTQ==}
-    engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0}
+  '@astrojs/mdx@4.1.0':
+    resolution: {integrity: sha512-M7BaYhVTT7Q/iS2EoEaUngQnN+D2jPCWmNS1TIY31bDyz3MOf+dZmuqODJOEUdBBAASkQE+MhzyPds/N2o6csw==}
+    engines: {node: ^18.17.1 || ^20.3.0 || >=22.0.0}
     peerDependencies:
-      astro: ^4.8.0
+      astro: ^5.0.0
 
-  '@astrojs/prism@3.1.0':
-    resolution: {integrity: sha512-Z9IYjuXSArkAUx3N6xj6+Bnvx8OdUSHA8YoOgyepp3+zJmtVYJIl/I18GozdJVW1p5u/CNpl3Km7/gwTJK85cw==}
-    engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0}
+  '@astrojs/prism@3.2.0':
+    resolution: {integrity: sha512-GilTHKGCW6HMq7y3BUv9Ac7GMe/MO9gi9GW62GzKtth0SwukCu/qp2wLiGpEujhY+VVhaG9v7kv/5vFzvf4NYw==}
+    engines: {node: ^18.17.1 || ^20.3.0 || >=22.0.0}
 
-  '@astrojs/sitemap@3.1.6':
-    resolution: {integrity: sha512-1Qp2NvAzVImqA6y+LubKi1DVhve/hXXgFvB0szxiipzh7BvtuKe4oJJ9dXSqaubaTkt4nMa6dv6RCCAYeB6xaQ==}
+  '@astrojs/sitemap@3.2.1':
+    resolution: {integrity: sha512-uxMfO8f7pALq0ADL6Lk68UV6dNYjJ2xGUzyjjVj60JLBs5a6smtlkBYv3tQ0DzoqwS7c9n4FUx5lgv0yPo/fgA==}
 
-  '@astrojs/starlight@0.26.3':
-    resolution: {integrity: sha512-U3rSNwr5cNvJVSPuSncduZ3ioKwNoMAZxYw/riuOfcJeT8DaJua3Uq+Z57vmhI1VxF19BZ1REQ0moUL6nhR8KQ==}
+  '@astrojs/starlight@0.32.2':
+    resolution: {integrity: sha512-FLz8Y8R+GsD0jD/G64bYijwwVsAq99Ugk2bJYRmH2k1reYMh83GRma2IaKGgSI2fLNEu7tdyG4cpkwrwP3W02A==}
     peerDependencies:
-      astro: ^4.8.6
+      astro: ^5.1.5
 
-  '@astrojs/telemetry@3.1.0':
-    resolution: {integrity: sha512-/ca/+D8MIKEC8/A9cSaPUqQNZm+Es/ZinRv0ZAzvu2ios7POQSsVD+VOj7/hypWNsNM3T7RpfgNq7H2TU1KEHA==}
-    engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0}
+  '@astrojs/telemetry@3.2.0':
+    resolution: {integrity: sha512-wxhSKRfKugLwLlr4OFfcqovk+LIFtKwLyGPqMsv+9/ibqqnW3Gv7tBhtKEb0gAyUAC4G9BTVQeQahqnQAhd6IQ==}
+    engines: {node: ^18.17.1 || ^20.3.0 || >=22.0.0}
 
-  '@astrojs/yaml2ts@0.2.1':
-    resolution: {integrity: sha512-CBaNwDQJz20E5WxzQh4thLVfhB3JEEGz72wRA+oJp6fQR37QLAqXZJU0mHC+yqMOQ6oj0GfRPJrz6hjf+zm6zA==}
+  '@astrojs/yaml2ts@0.2.2':
+    resolution: {integrity: sha512-GOfvSr5Nqy2z5XiwqTouBBpy5FyI6DEe+/g/Mk5am9SjILN1S5fOEvYK0GuWHg98yS/dobP4m8qyqw/URW35fQ==}
 
   '@babel/code-frame@7.26.2':
     resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
@@ -703,12 +712,6 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-react-jsx@7.25.2':
-    resolution: {integrity: sha512-KQsqEAVBpU82NM/B/N9j9WOdphom1SZH3R+2V7INrQUH+V9EBFwZsEJl8eBIVeQE62FxJCc70jzEZwqU7RcVqA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
   '@babel/plugin-transform-typescript@7.26.3':
     resolution: {integrity: sha512-6+5hpdr6mETwSKjmJUdYw0EIkATiQhnELWlE3kJFBwSg/BGIVwVaVbX+gOXBCdc7Ln1RXZxyWGecIXhUfnl7oA==}
     engines: {node: '>=6.9.0'}
@@ -823,6 +826,12 @@ packages:
     cpu: [ppc64]
     os: [aix]
 
+  '@esbuild/aix-ppc64@0.25.0':
+    resolution: {integrity: sha512-O7vun9Sf8DFjH2UtqK8Ku3LkquL9SZL8OLY1T5NZkA34+wG3OQF7cl4Ql8vdNzM6fzBbYfLaiRLIOZ+2FOCgBQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
   '@esbuild/android-arm64@0.18.20':
     resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
     engines: {node: '>=12'}
@@ -841,6 +850,12 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  '@esbuild/android-arm64@0.25.0':
+    resolution: {integrity: sha512-grvv8WncGjDSyUBjN9yHXNt+cq0snxXbDxy5pJtzMKGmmpPxeAmAhWxXI+01lU5rwZomDgD3kJwulEnhTRUd6g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
   '@esbuild/android-arm@0.18.20':
     resolution: {integrity: sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==}
     engines: {node: '>=12'}
@@ -859,6 +874,12 @@ packages:
     cpu: [arm]
     os: [android]
 
+  '@esbuild/android-arm@0.25.0':
+    resolution: {integrity: sha512-PTyWCYYiU0+1eJKmw21lWtC+d08JDZPQ5g+kFyxP0V+es6VPPSUhM6zk8iImp2jbV6GwjX4pap0JFbUQN65X1g==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
   '@esbuild/android-x64@0.18.20':
     resolution: {integrity: sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==}
     engines: {node: '>=12'}
@@ -877,6 +898,12 @@ packages:
     cpu: [x64]
     os: [android]
 
+  '@esbuild/android-x64@0.25.0':
+    resolution: {integrity: sha512-m/ix7SfKG5buCnxasr52+LI78SQ+wgdENi9CqyCXwjVR2X4Jkz+BpC3le3AoBPYTC9NHklwngVXvbJ9/Akhrfg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
   '@esbuild/darwin-arm64@0.18.20':
     resolution: {integrity: sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==}
     engines: {node: '>=12'}
@@ -895,6 +922,12 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@esbuild/darwin-arm64@0.25.0':
+    resolution: {integrity: sha512-mVwdUb5SRkPayVadIOI78K7aAnPamoeFR2bT5nszFUZ9P8UpK4ratOdYbZZXYSqPKMHfS1wdHCJk1P1EZpRdvw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@esbuild/darwin-x64@0.18.20':
     resolution: {integrity: sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==}
     engines: {node: '>=12'}
@@ -913,6 +946,12 @@ packages:
     cpu: [x64]
     os: [darwin]
 
+  '@esbuild/darwin-x64@0.25.0':
+    resolution: {integrity: sha512-DgDaYsPWFTS4S3nWpFcMn/33ZZwAAeAFKNHNa1QN0rI4pUjgqf0f7ONmXf6d22tqTY+H9FNdgeaAa+YIFUn2Rg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
   '@esbuild/freebsd-arm64@0.18.20':
     resolution: {integrity: sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==}
     engines: {node: '>=12'}
@@ -931,6 +970,12 @@ packages:
     cpu: [arm64]
     os: [freebsd]
 
+  '@esbuild/freebsd-arm64@0.25.0':
+    resolution: {integrity: sha512-VN4ocxy6dxefN1MepBx/iD1dH5K8qNtNe227I0mnTRjry8tj5MRk4zprLEdG8WPyAPb93/e4pSgi1SoHdgOa4w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
   '@esbuild/freebsd-x64@0.18.20':
     resolution: {integrity: sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==}
     engines: {node: '>=12'}
@@ -949,6 +994,12 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
+  '@esbuild/freebsd-x64@0.25.0':
+    resolution: {integrity: sha512-mrSgt7lCh07FY+hDD1TxiTyIHyttn6vnjesnPoVDNmDfOmggTLXRv8Id5fNZey1gl/V2dyVK1VXXqVsQIiAk+A==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
   '@esbuild/linux-arm64@0.18.20':
     resolution: {integrity: sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==}
     engines: {node: '>=12'}
@@ -967,6 +1018,12 @@ packages:
     cpu: [arm64]
     os: [linux]
 
+  '@esbuild/linux-arm64@0.25.0':
+    resolution: {integrity: sha512-9QAQjTWNDM/Vk2bgBl17yWuZxZNQIF0OUUuPZRKoDtqF2k4EtYbpyiG5/Dk7nqeK6kIJWPYldkOcBqjXjrUlmg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
   '@esbuild/linux-arm@0.18.20':
     resolution: {integrity: sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==}
     engines: {node: '>=12'}
@@ -985,6 +1042,12 @@ packages:
     cpu: [arm]
     os: [linux]
 
+  '@esbuild/linux-arm@0.25.0':
+    resolution: {integrity: sha512-vkB3IYj2IDo3g9xX7HqhPYxVkNQe8qTK55fraQyTzTX/fxaDtXiEnavv9geOsonh2Fd2RMB+i5cbhu2zMNWJwg==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
   '@esbuild/linux-ia32@0.18.20':
     resolution: {integrity: sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==}
     engines: {node: '>=12'}
@@ -1003,6 +1066,12 @@ packages:
     cpu: [ia32]
     os: [linux]
 
+  '@esbuild/linux-ia32@0.25.0':
+    resolution: {integrity: sha512-43ET5bHbphBegyeqLb7I1eYn2P/JYGNmzzdidq/w0T8E2SsYL1U6un2NFROFRg1JZLTzdCoRomg8Rvf9M6W6Gg==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
   '@esbuild/linux-loong64@0.18.20':
     resolution: {integrity: sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==}
     engines: {node: '>=12'}
@@ -1021,6 +1090,12 @@ packages:
     cpu: [loong64]
     os: [linux]
 
+  '@esbuild/linux-loong64@0.25.0':
+    resolution: {integrity: sha512-fC95c/xyNFueMhClxJmeRIj2yrSMdDfmqJnyOY4ZqsALkDrrKJfIg5NTMSzVBr5YW1jf+l7/cndBfP3MSDpoHw==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
   '@esbuild/linux-mips64el@0.18.20':
     resolution: {integrity: sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==}
     engines: {node: '>=12'}
@@ -1039,6 +1114,12 @@ packages:
     cpu: [mips64el]
     os: [linux]
 
+  '@esbuild/linux-mips64el@0.25.0':
+    resolution: {integrity: sha512-nkAMFju7KDW73T1DdH7glcyIptm95a7Le8irTQNO/qtkoyypZAnjchQgooFUDQhNAy4iu08N79W4T4pMBwhPwQ==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
   '@esbuild/linux-ppc64@0.18.20':
     resolution: {integrity: sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==}
     engines: {node: '>=12'}
@@ -1057,6 +1138,12 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
+  '@esbuild/linux-ppc64@0.25.0':
+    resolution: {integrity: sha512-NhyOejdhRGS8Iwv+KKR2zTq2PpysF9XqY+Zk77vQHqNbo/PwZCzB5/h7VGuREZm1fixhs4Q/qWRSi5zmAiO4Fw==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
   '@esbuild/linux-riscv64@0.18.20':
     resolution: {integrity: sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==}
     engines: {node: '>=12'}
@@ -1075,6 +1162,12 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
+  '@esbuild/linux-riscv64@0.25.0':
+    resolution: {integrity: sha512-5S/rbP5OY+GHLC5qXp1y/Mx//e92L1YDqkiBbO9TQOvuFXM+iDqUNG5XopAnXoRH3FjIUDkeGcY1cgNvnXp/kA==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
   '@esbuild/linux-s390x@0.18.20':
     resolution: {integrity: sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==}
     engines: {node: '>=12'}
@@ -1093,6 +1186,12 @@ packages:
     cpu: [s390x]
     os: [linux]
 
+  '@esbuild/linux-s390x@0.25.0':
+    resolution: {integrity: sha512-XM2BFsEBz0Fw37V0zU4CXfcfuACMrppsMFKdYY2WuTS3yi8O1nFOhil/xhKTmE1nPmVyvQJjJivgDT+xh8pXJA==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
   '@esbuild/linux-x64@0.18.20':
     resolution: {integrity: sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==}
     engines: {node: '>=12'}
@@ -1111,6 +1210,18 @@ packages:
     cpu: [x64]
     os: [linux]
 
+  '@esbuild/linux-x64@0.25.0':
+    resolution: {integrity: sha512-9yl91rHw/cpwMCNytUDxwj2XjFpxML0y9HAOH9pNVQDpQrBxHy01Dx+vaMu0N1CKa/RzBD2hB4u//nfc+Sd3Cw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.25.0':
+    resolution: {integrity: sha512-RuG4PSMPFfrkH6UwCAqBzauBWTygTvb1nxWasEJooGSJ/NwRw7b2HOwyRTQIU97Hq37l3npXoZGYMy3b3xYvPw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
   '@esbuild/netbsd-x64@0.18.20':
     resolution: {integrity: sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==}
     engines: {node: '>=12'}
@@ -1129,12 +1240,24 @@ packages:
     cpu: [x64]
     os: [netbsd]
 
+  '@esbuild/netbsd-x64@0.25.0':
+    resolution: {integrity: sha512-jl+qisSB5jk01N5f7sPCsBENCOlPiS/xptD5yxOx2oqQfyourJwIKLRA2yqWdifj3owQZCL2sn6o08dBzZGQzA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
   '@esbuild/openbsd-arm64@0.24.0':
     resolution: {integrity: sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
 
+  '@esbuild/openbsd-arm64@0.25.0':
+    resolution: {integrity: sha512-21sUNbq2r84YE+SJDfaQRvdgznTD8Xc0oc3p3iW/a1EVWeNj/SdUCbm5U0itZPQYRuRTW20fPMWMpcrciH2EJw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
   '@esbuild/openbsd-x64@0.18.20':
     resolution: {integrity: sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==}
     engines: {node: '>=12'}
@@ -1153,6 +1276,12 @@ packages:
     cpu: [x64]
     os: [openbsd]
 
+  '@esbuild/openbsd-x64@0.25.0':
+    resolution: {integrity: sha512-2gwwriSMPcCFRlPlKx3zLQhfN/2WjJ2NSlg5TKLQOJdV0mSxIcYNTMhk3H3ulL/cak+Xj0lY1Ym9ysDV1igceg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
   '@esbuild/sunos-x64@0.18.20':
     resolution: {integrity: sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==}
     engines: {node: '>=12'}
@@ -1171,6 +1300,12 @@ packages:
     cpu: [x64]
     os: [sunos]
 
+  '@esbuild/sunos-x64@0.25.0':
+    resolution: {integrity: sha512-bxI7ThgLzPrPz484/S9jLlvUAHYMzy6I0XiU1ZMeAEOBcS0VePBFxh1JjTQt3Xiat5b6Oh4x7UC7IwKQKIJRIg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
   '@esbuild/win32-arm64@0.18.20':
     resolution: {integrity: sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==}
     engines: {node: '>=12'}
@@ -1189,6 +1324,12 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  '@esbuild/win32-arm64@0.25.0':
+    resolution: {integrity: sha512-ZUAc2YK6JW89xTbXvftxdnYy3m4iHIkDtK3CLce8wg8M2L+YZhIvO1DKpxrd0Yr59AeNNkTiic9YLf6FTtXWMw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
   '@esbuild/win32-ia32@0.18.20':
     resolution: {integrity: sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==}
     engines: {node: '>=12'}
@@ -1207,6 +1348,12 @@ packages:
     cpu: [ia32]
     os: [win32]
 
+  '@esbuild/win32-ia32@0.25.0':
+    resolution: {integrity: sha512-eSNxISBu8XweVEWG31/JzjkIGbGIJN/TrRoiSVZwZ6pkC6VX4Im/WV2cz559/TXLcYbcrDN8JtKgd9DJVIo8GA==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
   '@esbuild/win32-x64@0.18.20':
     resolution: {integrity: sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==}
     engines: {node: '>=12'}
@@ -1225,6 +1372,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@esbuild/win32-x64@0.25.0':
+    resolution: {integrity: sha512-ZENoHJBxA20C2zFzh6AI4fT6RraMzjYw4xKWemRTRmRVtN9c5DcH9r/f2ihEkMjOW5eGgrwCslG/+Y/3bL+DHQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
   '@eslint-community/eslint-utils@4.4.0':
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1276,17 +1429,17 @@ packages:
     resolution: {integrity: sha512-HFZ4Mp26nbWk9d/BpvP0YNL6W4UoZF0VFcTw/aPPA8RpOxeFQgK+ClABGgAUXs9Y/RGX/l1vOmrqz1MQt9MNuw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@expressive-code/core@0.35.6':
-    resolution: {integrity: sha512-xGqCkmfkgT7lr/rvmfnYdDSeTdCSp1otAHgoFS6wNEeO7wGDPpxdosVqYiIcQ8CfWUABh/pGqWG90q+MV3824A==}
+  '@expressive-code/core@0.40.2':
+    resolution: {integrity: sha512-gXY3v7jbgz6nWKvRpoDxK4AHUPkZRuJsM79vHX/5uhV9/qX6Qnctp/U/dMHog/LCVXcuOps+5nRmf1uxQVPb3w==}
 
-  '@expressive-code/plugin-frames@0.35.6':
-    resolution: {integrity: sha512-CqjSWjDJ3wabMJZfL9ZAzH5UAGKg7KWsf1TBzr4xvUbZvWoBtLA/TboBML0U1Ls8h/4TRCIvR4VEb8dv5+QG3w==}
+  '@expressive-code/plugin-frames@0.40.2':
+    resolution: {integrity: sha512-aLw5IlDlZWb10Jo/TTDCVsmJhKfZ7FJI83Zo9VDrV0OBlmHAg7klZqw68VDz7FlftIBVAmMby53/MNXPnMjTSQ==}
 
-  '@expressive-code/plugin-shiki@0.35.6':
-    resolution: {integrity: sha512-xm+hzi9BsmhkDUGuyAWIydOAWer7Cs9cj8FM0t4HXaQ+qCubprT6wJZSKUxuvFJIUsIOqk1xXFaJzGJGnWtKMg==}
+  '@expressive-code/plugin-shiki@0.40.2':
+    resolution: {integrity: sha512-t2HMR5BO6GdDW1c1ISBTk66xO503e/Z8ecZdNcr6E4NpUfvY+MRje+LtrcvbBqMwWBBO8RpVKcam/Uy+1GxwKQ==}
 
-  '@expressive-code/plugin-text-markers@0.35.6':
-    resolution: {integrity: sha512-/k9eWVZSCs+uEKHR++22Uu6eIbHWEciVHbIuD8frT8DlqTtHYaaiwHPncO6KFWnGDz5i/gL7oyl6XmOi/E6GVg==}
+  '@expressive-code/plugin-text-markers@0.40.2':
+    resolution: {integrity: sha512-/XoLjD67K9nfM4TgDlXAExzMJp6ewFKxNpfUw4F7q5Ecy+IU3/9zQQG/O70Zy+RxYTwKGw2MA9kd7yelsxnSmw==}
 
   '@floating-ui/core@1.6.4':
     resolution: {integrity: sha512-a4IowK4QkXl4SCWTGUR0INAfEOX3wtsYw3rKK5InQEHMGObkR8Xk44qYQD9P4r6HHw0iIfK6GUKECmY8sTkqRA==}
@@ -1603,8 +1756,8 @@ packages:
     resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
     hasBin: true
 
-  '@mdx-js/mdx@3.0.1':
-    resolution: {integrity: sha512-eIQ4QTrOWyL3LWEe/bu6Taqzq2HQvHcyTMaOrI95P2/LmJE7AsfPfgJGuFLPVqBUE1BC1rik3VIhU+s9u72arA==}
+  '@mdx-js/mdx@3.1.0':
+    resolution: {integrity: sha512-/QxEhPAvGwbQmy1Px8F899L5Uc2KZ6JtXwlCgJmjSTBedwOZkByYcBG4GceIGPXRDsmfxhHazuS+hlOShRLeDw==}
 
   '@netlify/functions@2.8.2':
     resolution: {integrity: sha512-DeoAQh8LuNPvBE4qsKlezjKj0PyXDryOFJfJKo3Z1qZLKzQ21sT314KQKPVjfvw6knqijj+IO+0kHXy/TJiqNA==}
@@ -1686,34 +1839,34 @@ packages:
     peerDependencies:
       eslint: ^8.23.0
 
-  '@oslojs/encoding@0.4.1':
-    resolution: {integrity: sha512-hkjo6MuIK/kQR5CrGNdAPZhS01ZCXuWDRJ187zh6qqF2+yMHZpD9fAYpX8q2bOO6Ryhl3XpCT6kUX76N8hhm4Q==}
+  '@oslojs/encoding@1.1.0':
+    resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==}
 
-  '@pagefind/darwin-arm64@1.1.1':
-    resolution: {integrity: sha512-tZ9tysUmQpFs2EqWG2+E1gc+opDAhSyZSsgKmFzhnWfkK02YHZhvL5XJXEZDqYy3s1FAKhwjTg8XDxneuBlDZQ==}
+  '@pagefind/darwin-arm64@1.3.0':
+    resolution: {integrity: sha512-365BEGl6ChOsauRjyVpBjXybflXAOvoMROw3TucAROHIcdBvXk9/2AmEvGFU0r75+vdQI4LJdJdpH4Y6Yqaj4A==}
     cpu: [arm64]
     os: [darwin]
 
-  '@pagefind/darwin-x64@1.1.1':
-    resolution: {integrity: sha512-ChohLQ39dLwaxQv0jIQB/SavP3TM5K5ENfDTqIdzLkmfs3+JlzSDyQKcJFjTHYcCzQOZVeieeGq8PdqvLJxJxQ==}
+  '@pagefind/darwin-x64@1.3.0':
+    resolution: {integrity: sha512-zlGHA23uuXmS8z3XxEGmbHpWDxXfPZ47QS06tGUq0HDcZjXjXHeLG+cboOy828QIV5FXsm9MjfkP5e4ZNbOkow==}
     cpu: [x64]
     os: [darwin]
 
-  '@pagefind/default-ui@1.1.1':
-    resolution: {integrity: sha512-ZM0zDatWDnac/VGHhQCiM7UgA4ca8jpjA+VfuTJyHJBaxGqZMQnm4WoTz9E0KFcue1Bh9kxpu7uWFZfwpZZk0A==}
+  '@pagefind/default-ui@1.3.0':
+    resolution: {integrity: sha512-CGKT9ccd3+oRK6STXGgfH+m0DbOKayX6QGlq38TfE1ZfUcPc5+ulTuzDbZUnMo+bubsEOIypm4Pl2iEyzZ1cNg==}
 
-  '@pagefind/linux-arm64@1.1.1':
-    resolution: {integrity: sha512-H5P6wDoCoAbdsWp0Zx0DxnLUrwTGWGLu/VI1rcN2CyFdY2EGSvPQsbGBMrseKRNuIrJDFtxHHHyjZ7UbzaM9EA==}
+  '@pagefind/linux-arm64@1.3.0':
+    resolution: {integrity: sha512-8lsxNAiBRUk72JvetSBXs4WRpYrQrVJXjlRRnOL6UCdBN9Nlsz0t7hWstRk36+JqHpGWOKYiuHLzGYqYAqoOnQ==}
     cpu: [arm64]
     os: [linux]
 
-  '@pagefind/linux-x64@1.1.1':
-    resolution: {integrity: sha512-yJs7tTYbL2MI3HT+ngs9E1BfUbY9M4/YzA0yEM5xBo4Xl8Yu8Qg2xZTOQ1/F6gwvMrjCUFo8EoACs6LRDhtMrQ==}
+  '@pagefind/linux-x64@1.3.0':
+    resolution: {integrity: sha512-hAvqdPJv7A20Ucb6FQGE6jhjqy+vZ6pf+s2tFMNtMBG+fzcdc91uTw7aP/1Vo5plD0dAOHwdxfkyw0ugal4kcQ==}
     cpu: [x64]
     os: [linux]
 
-  '@pagefind/windows-x64@1.1.1':
-    resolution: {integrity: sha512-b7/qPqgIl+lMzkQ8fJt51SfguB396xbIIR+VZ3YrL2tLuyifDJ1wL5mEm+ddmHxJ2Fki340paPcDan9en5OmAw==}
+  '@pagefind/windows-x64@1.3.0':
+    resolution: {integrity: sha512-BR1bIRWOMqkf8IoU576YDhij1Wd/Zf2kX/kCI0b2qzCKC8wcc2GQJaaRMCpzvCCrmliO4vtJ6RITp/AnoYUUmQ==}
     cpu: [x64]
     os: [win32]
 
@@ -1821,6 +1974,7 @@ packages:
 
   '@readme/json-schema-ref-parser@1.2.0':
     resolution: {integrity: sha512-Bt3QVovFSua4QmHa65EHUmh2xS0XJ3rgTEUPH998f4OW4VVJke3BuS16f+kM0ZLOGdvIrzrPRqwihuv5BAjtrA==}
+    deprecated: This package is no longer maintained. Please use `@apidevtools/json-schema-ref-parser` instead.
 
   '@readme/openapi-parser@2.5.0':
     resolution: {integrity: sha512-IbymbOqRuUzoIgxfAAR7XJt2FWl6n2yqN09fF5adacGm7W03siA3bj1Emql0X9D2T+RpBYz3x9zDsMhuoMP62A==}
@@ -1910,101 +2064,205 @@ packages:
       rollup:
         optional: true
 
+  '@rollup/pluginutils@5.1.4':
+    resolution: {integrity: sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   '@rollup/rollup-android-arm-eabi@4.28.1':
     resolution: {integrity: sha512-2aZp8AES04KI2dy3Ss6/MDjXbwBzj+i0GqKtWXgw2/Ma6E4jJvujryO6gJAghIRVz7Vwr9Gtl/8na3nDUKpraQ==}
     cpu: [arm]
     os: [android]
 
+  '@rollup/rollup-android-arm-eabi@4.34.9':
+    resolution: {integrity: sha512-qZdlImWXur0CFakn2BJ2znJOdqYZKiedEPEVNTBrpfPjc/YuTGcaYZcdmNFTkUj3DU0ZM/AElcM8Ybww3xVLzA==}
+    cpu: [arm]
+    os: [android]
+
   '@rollup/rollup-android-arm64@4.28.1':
     resolution: {integrity: sha512-EbkK285O+1YMrg57xVA+Dp0tDBRB93/BZKph9XhMjezf6F4TpYjaUSuPt5J0fZXlSag0LmZAsTmdGGqPp4pQFA==}
     cpu: [arm64]
     os: [android]
 
+  '@rollup/rollup-android-arm64@4.34.9':
+    resolution: {integrity: sha512-4KW7P53h6HtJf5Y608T1ISKvNIYLWRKMvfnG0c44M6In4DQVU58HZFEVhWINDZKp7FZps98G3gxwC1sb0wXUUg==}
+    cpu: [arm64]
+    os: [android]
+
   '@rollup/rollup-darwin-arm64@4.28.1':
     resolution: {integrity: sha512-prduvrMKU6NzMq6nxzQw445zXgaDBbMQvmKSJaxpaZ5R1QDM8w+eGxo6Y/jhT/cLoCvnZI42oEqf9KQNYz1fqQ==}
     cpu: [arm64]
     os: [darwin]
 
+  '@rollup/rollup-darwin-arm64@4.34.9':
+    resolution: {integrity: sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==}
+    cpu: [arm64]
+    os: [darwin]
+
   '@rollup/rollup-darwin-x64@4.28.1':
     resolution: {integrity: sha512-WsvbOunsUk0wccO/TV4o7IKgloJ942hVFK1CLatwv6TJspcCZb9umQkPdvB7FihmdxgaKR5JyxDjWpCOp4uZlQ==}
     cpu: [x64]
     os: [darwin]
 
+  '@rollup/rollup-darwin-x64@4.34.9':
+    resolution: {integrity: sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==}
+    cpu: [x64]
+    os: [darwin]
+
   '@rollup/rollup-freebsd-arm64@4.28.1':
     resolution: {integrity: sha512-HTDPdY1caUcU4qK23FeeGxCdJF64cKkqajU0iBnTVxS8F7H/7BewvYoG+va1KPSL63kQ1PGNyiwKOfReavzvNA==}
     cpu: [arm64]
     os: [freebsd]
 
+  '@rollup/rollup-freebsd-arm64@4.34.9':
+    resolution: {integrity: sha512-2lzjQPJbN5UnHm7bHIUKFMulGTQwdvOkouJDpPysJS+QFBGDJqcfh+CxxtG23Ik/9tEvnebQiylYoazFMAgrYw==}
+    cpu: [arm64]
+    os: [freebsd]
+
   '@rollup/rollup-freebsd-x64@4.28.1':
     resolution: {integrity: sha512-m/uYasxkUevcFTeRSM9TeLyPe2QDuqtjkeoTpP9SW0XxUWfcYrGDMkO/m2tTw+4NMAF9P2fU3Mw4ahNvo7QmsQ==}
     cpu: [x64]
     os: [freebsd]
 
+  '@rollup/rollup-freebsd-x64@4.34.9':
+    resolution: {integrity: sha512-SLl0hi2Ah2H7xQYd6Qaiu01kFPzQ+hqvdYSoOtHYg/zCIFs6t8sV95kaoqjzjFwuYQLtOI0RZre/Ke0nPaQV+g==}
+    cpu: [x64]
+    os: [freebsd]
+
   '@rollup/rollup-linux-arm-gnueabihf@4.28.1':
     resolution: {integrity: sha512-QAg11ZIt6mcmzpNE6JZBpKfJaKkqTm1A9+y9O+frdZJEuhQxiugM05gnCWiANHj4RmbgeVJpTdmKRmH/a+0QbA==}
     cpu: [arm]
     os: [linux]
 
+  '@rollup/rollup-linux-arm-gnueabihf@4.34.9':
+    resolution: {integrity: sha512-88I+D3TeKItrw+Y/2ud4Tw0+3CxQ2kLgu3QvrogZ0OfkmX/DEppehus7L3TS2Q4lpB+hYyxhkQiYPJ6Mf5/dPg==}
+    cpu: [arm]
+    os: [linux]
+
   '@rollup/rollup-linux-arm-musleabihf@4.28.1':
     resolution: {integrity: sha512-dRP9PEBfolq1dmMcFqbEPSd9VlRuVWEGSmbxVEfiq2cs2jlZAl0YNxFzAQS2OrQmsLBLAATDMb3Z6MFv5vOcXg==}
     cpu: [arm]
     os: [linux]
 
+  '@rollup/rollup-linux-arm-musleabihf@4.34.9':
+    resolution: {integrity: sha512-3qyfWljSFHi9zH0KgtEPG4cBXHDFhwD8kwg6xLfHQ0IWuH9crp005GfoUUh/6w9/FWGBwEHg3lxK1iHRN1MFlA==}
+    cpu: [arm]
+    os: [linux]
+
   '@rollup/rollup-linux-arm64-gnu@4.28.1':
     resolution: {integrity: sha512-uGr8khxO+CKT4XU8ZUH1TTEUtlktK6Kgtv0+6bIFSeiSlnGJHG1tSFSjm41uQ9sAO/5ULx9mWOz70jYLyv1QkA==}
     cpu: [arm64]
     os: [linux]
 
+  '@rollup/rollup-linux-arm64-gnu@4.34.9':
+    resolution: {integrity: sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==}
+    cpu: [arm64]
+    os: [linux]
+
   '@rollup/rollup-linux-arm64-musl@4.28.1':
     resolution: {integrity: sha512-QF54q8MYGAqMLrX2t7tNpi01nvq5RI59UBNx+3+37zoKX5KViPo/gk2QLhsuqok05sSCRluj0D00LzCwBikb0A==}
     cpu: [arm64]
     os: [linux]
 
+  '@rollup/rollup-linux-arm64-musl@4.34.9':
+    resolution: {integrity: sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==}
+    cpu: [arm64]
+    os: [linux]
+
   '@rollup/rollup-linux-loongarch64-gnu@4.28.1':
     resolution: {integrity: sha512-vPul4uodvWvLhRco2w0GcyZcdyBfpfDRgNKU+p35AWEbJ/HPs1tOUrkSueVbBS0RQHAf/A+nNtDpvw95PeVKOA==}
     cpu: [loong64]
     os: [linux]
 
+  '@rollup/rollup-linux-loongarch64-gnu@4.34.9':
+    resolution: {integrity: sha512-dRAgTfDsn0TE0HI6cmo13hemKpVHOEyeciGtvlBTkpx/F65kTvShtY/EVyZEIfxFkV5JJTuQ9tP5HGBS0hfxIg==}
+    cpu: [loong64]
+    os: [linux]
+
   '@rollup/rollup-linux-powerpc64le-gnu@4.28.1':
     resolution: {integrity: sha512-pTnTdBuC2+pt1Rmm2SV7JWRqzhYpEILML4PKODqLz+C7Ou2apEV52h19CR7es+u04KlqplggmN9sqZlekg3R1A==}
     cpu: [ppc64]
     os: [linux]
 
+  '@rollup/rollup-linux-powerpc64le-gnu@4.34.9':
+    resolution: {integrity: sha512-PHcNOAEhkoMSQtMf+rJofwisZqaU8iQ8EaSps58f5HYll9EAY5BSErCZ8qBDMVbq88h4UxaNPlbrKqfWP8RfJA==}
+    cpu: [ppc64]
+    os: [linux]
+
   '@rollup/rollup-linux-riscv64-gnu@4.28.1':
     resolution: {integrity: sha512-vWXy1Nfg7TPBSuAncfInmAI/WZDd5vOklyLJDdIRKABcZWojNDY0NJwruY2AcnCLnRJKSaBgf/GiJfauu8cQZA==}
     cpu: [riscv64]
     os: [linux]
 
+  '@rollup/rollup-linux-riscv64-gnu@4.34.9':
+    resolution: {integrity: sha512-Z2i0Uy5G96KBYKjeQFKbbsB54xFOL5/y1P5wNBsbXB8yE+At3oh0DVMjQVzCJRJSfReiB2tX8T6HUFZ2k8iaKg==}
+    cpu: [riscv64]
+    os: [linux]
+
   '@rollup/rollup-linux-s390x-gnu@4.28.1':
     resolution: {integrity: sha512-/yqC2Y53oZjb0yz8PVuGOQQNOTwxcizudunl/tFs1aLvObTclTwZ0JhXF2XcPT/zuaymemCDSuuUPXJJyqeDOg==}
     cpu: [s390x]
     os: [linux]
 
+  '@rollup/rollup-linux-s390x-gnu@4.34.9':
+    resolution: {integrity: sha512-U+5SwTMoeYXoDzJX5dhDTxRltSrIax8KWwfaaYcynuJw8mT33W7oOgz0a+AaXtGuvhzTr2tVKh5UO8GVANTxyQ==}
+    cpu: [s390x]
+    os: [linux]
+
   '@rollup/rollup-linux-x64-gnu@4.28.1':
     resolution: {integrity: sha512-fzgeABz7rrAlKYB0y2kSEiURrI0691CSL0+KXwKwhxvj92VULEDQLpBYLHpF49MSiPG4sq5CK3qHMnb9tlCjBw==}
     cpu: [x64]
     os: [linux]
 
+  '@rollup/rollup-linux-x64-gnu@4.34.9':
+    resolution: {integrity: sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==}
+    cpu: [x64]
+    os: [linux]
+
   '@rollup/rollup-linux-x64-musl@4.28.1':
     resolution: {integrity: sha512-xQTDVzSGiMlSshpJCtudbWyRfLaNiVPXt1WgdWTwWz9n0U12cI2ZVtWe/Jgwyv/6wjL7b66uu61Vg0POWVfz4g==}
     cpu: [x64]
     os: [linux]
 
+  '@rollup/rollup-linux-x64-musl@4.34.9':
+    resolution: {integrity: sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==}
+    cpu: [x64]
+    os: [linux]
+
   '@rollup/rollup-win32-arm64-msvc@4.28.1':
     resolution: {integrity: sha512-wSXmDRVupJstFP7elGMgv+2HqXelQhuNf+IS4V+nUpNVi/GUiBgDmfwD0UGN3pcAnWsgKG3I52wMOBnk1VHr/A==}
     cpu: [arm64]
     os: [win32]
 
+  '@rollup/rollup-win32-arm64-msvc@4.34.9':
+    resolution: {integrity: sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==}
+    cpu: [arm64]
+    os: [win32]
+
   '@rollup/rollup-win32-ia32-msvc@4.28.1':
     resolution: {integrity: sha512-ZkyTJ/9vkgrE/Rk9vhMXhf8l9D+eAhbAVbsGsXKy2ohmJaWg0LPQLnIxRdRp/bKyr8tXuPlXhIoGlEB5XpJnGA==}
     cpu: [ia32]
     os: [win32]
 
+  '@rollup/rollup-win32-ia32-msvc@4.34.9':
+    resolution: {integrity: sha512-KB48mPtaoHy1AwDNkAJfHXvHp24H0ryZog28spEs0V48l3H1fr4i37tiyHsgKZJnCmvxsbATdZGBpbmxTE3a9w==}
+    cpu: [ia32]
+    os: [win32]
+
   '@rollup/rollup-win32-x64-msvc@4.28.1':
     resolution: {integrity: sha512-ZvK2jBafvttJjoIdKm/Q/Bh7IJ1Ose9IBOwpOXcOvW3ikGTQGmKDgxTC6oCAzW6PynbkKP8+um1du81XJHZ0JA==}
     cpu: [x64]
     os: [win32]
 
+  '@rollup/rollup-win32-x64-msvc@4.34.9':
+    resolution: {integrity: sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==}
+    cpu: [x64]
+    os: [win32]
+
   '@sentry-internal/browser-utils@8.27.0':
     resolution: {integrity: sha512-YTIwQ1GM1NTRXgN4DvpFSQ2x4pjlqQ0FQAyHW5x2ZYv4z7VmqG4Xkid1P/srQUipECk6nxkebfD4WR19nLsvnQ==}
     engines: {node: '>=14.18'}
@@ -2043,11 +2301,26 @@ packages:
     peerDependencies:
       vue: 2.x || 3.x
 
-  '@shikijs/core@1.16.2':
-    resolution: {integrity: sha512-XSVH5OZCvE4WLMgdoBqfPMYmGHGmCC3OgZhw0S7KcSi2XKZ+5oHGe71GFnTljgdOxvxx5WrRks6QoTLKrl1eAA==}
+  '@shikijs/core@1.29.2':
+    resolution: {integrity: sha512-vju0lY9r27jJfOY4Z7+Rt/nIOjzJpZ3y+nYpqtUZInVoXQ/TJZcfGnNOGnKjFdVZb8qexiCuSlZRKcGfhhTTZQ==}
 
-  '@shikijs/vscode-textmate@9.2.0':
-    resolution: {integrity: sha512-5FinaOp6Vdh/dl4/yaOTh0ZeKch+rYS8DUb38V3GMKYVkdqzxw53lViRKUYkVILRiVQT7dcPC7VvAKOR73zVtQ==}
+  '@shikijs/engine-javascript@1.29.2':
+    resolution: {integrity: sha512-iNEZv4IrLYPv64Q6k7EPpOCE/nuvGiKl7zxdq0WFuRPF5PAE9PRo2JGq/d8crLusM59BRemJ4eOqrFrC4wiQ+A==}
+
+  '@shikijs/engine-oniguruma@1.29.2':
+    resolution: {integrity: sha512-7iiOx3SG8+g1MnlzZVDYiaeHe7Ez2Kf2HrJzdmGwkRisT7r4rak0e655AcM/tF9JG/kg5fMNYlLLKglbN7gBqA==}
+
+  '@shikijs/langs@1.29.2':
+    resolution: {integrity: sha512-FIBA7N3LZ+223U7cJDUYd5shmciFQlYkFXlkKVaHsCPgfVLiO+e12FmQE6Tf9vuyEsFe3dIl8qGWKXgEHL9wmQ==}
+
+  '@shikijs/themes@1.29.2':
+    resolution: {integrity: sha512-i9TNZlsq4uoyqSbluIcZkmPL9Bfi3djVxRnofUHwvx/h6SRW3cwgBC5SML7vsDcWyukY0eCzVN980rqP6qNl9g==}
+
+  '@shikijs/types@1.29.2':
+    resolution: {integrity: sha512-VJjK0eIijTZf0QSTODEXCqinjBn0joAHQ+aPSBzrv4O2d/QSbsMw+ZeSRx03kV34Hy7NzUvV/7NqfYGRLrASmw==}
+
+  '@shikijs/vscode-textmate@10.0.2':
+    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
 
   '@sindresorhus/merge-streams@2.3.0':
     resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==}
@@ -2146,21 +2419,12 @@ packages:
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
 
+  '@tweenjs/tween.js@23.1.3':
+    resolution: {integrity: sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==}
+
   '@types/acorn@4.0.6':
     resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==}
 
-  '@types/babel__core@7.20.5':
-    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
-
-  '@types/babel__generator@7.6.8':
-    resolution: {integrity: sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==}
-
-  '@types/babel__template@7.4.4':
-    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
-
-  '@types/babel__traverse@7.20.6':
-    resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==}
-
   '@types/cookie@0.6.0':
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
 
@@ -2191,6 +2455,9 @@ packages:
   '@types/http-proxy@1.17.15':
     resolution: {integrity: sha512-25g5atgiVNTIv0LBDTg1H74Hvayx0ajtJPLLcYE3whFv75J0pWNtOBzaXJQgDTmrX1bx5U9YC2w/n65BN1HwRQ==}
 
+  '@types/js-yaml@4.0.9':
+    resolution: {integrity: sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -2242,6 +2509,12 @@ packages:
   '@types/semver@7.5.8':
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
 
+  '@types/stats.js@0.17.3':
+    resolution: {integrity: sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==}
+
+  '@types/three@0.172.0':
+    resolution: {integrity: sha512-LrUtP3FEG26Zg5WiF0nbg8VoXiKokBLTcqM2iLvM9vzcfEiYmmBAPGdBgV0OYx9fvWlY3R/3ERTZcD9X5sc0NA==}
+
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
@@ -2257,6 +2530,9 @@ packages:
   '@types/web-bluetooth@0.0.20':
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
 
+  '@types/webxr@0.5.21':
+    resolution: {integrity: sha512-geZIAtLzjGmgY2JUi6VxXdCrTb99A7yP49lxLr2Nm/uIK0PkkxcEi4OGhoGDO4pxCf3JwGz2GiJL2Ej4K2bKaA==}
+
   '@typescript-eslint/eslint-plugin@6.21.0':
     resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -2517,31 +2793,31 @@ packages:
       vite: ^5.0.0 || ^6.0.0
       vue: ^3.2.25
 
-  '@volar/kit@2.4.2':
-    resolution: {integrity: sha512-sHCJv/nd8ZYsP/WKoTIQTboKbJ4F7oerv6PJK/ji374JTn3fqNnp4EV0V+Iiw60V7oUOWozhh7k6nugUUYDFWg==}
+  '@volar/kit@2.4.11':
+    resolution: {integrity: sha512-ups5RKbMzMCr6RKafcCqDRnJhJDNWqo2vfekwOAj6psZ15v5TlcQFQAyokQJ3wZxVkzxrQM+TqTRDENfQEXpmA==}
     peerDependencies:
       typescript: '*'
 
-  '@volar/language-core@2.4.2':
-    resolution: {integrity: sha512-sONt5RLvLL1SlBdhyUSthZzuKePbJ7DwFFB9zT0eyWpDl+v7GXGh/RkPxxWaR22bIhYtTzp4Ka1MWatl/53Riw==}
+  '@volar/language-core@2.4.11':
+    resolution: {integrity: sha512-lN2C1+ByfW9/JRPpqScuZt/4OrUUse57GLI6TbLgTIqBVemdl1wNcZ1qYGEo2+Gw8coYLgCy7SuKqn6IrQcQgg==}
 
   '@volar/language-core@2.4.4':
     resolution: {integrity: sha512-kO9k4kTLfxpg+6lq7/KAIv3m2d62IHuCL6GbVgYZTpfKvIGoAIlDxK7pFcB/eczN2+ydg/vnyaeZ6SGyZrJw2w==}
 
-  '@volar/language-server@2.4.2':
-    resolution: {integrity: sha512-BoGGGar5kzWnCxv41nnpplPQz+ntHgOSYshxH7CqNo5DOz5R3WXtkDA6T6bOpt70JeejoNyk/5kINV8KGeI17Q==}
+  '@volar/language-server@2.4.11':
+    resolution: {integrity: sha512-W9P8glH1M8LGREJ7yHRCANI5vOvTrRO15EMLdmh5WNF9sZYSEbQxiHKckZhvGIkbeR1WAlTl3ORTrJXUghjk7g==}
 
-  '@volar/language-service@2.4.2':
-    resolution: {integrity: sha512-tJAfl1RouBcSPfgY7ivV/CWH6G/cOzwflMUFnfR7qTLZht7azx4CwlndiyGiL7lGcnfi7OZBKXd8Oqy9jhKZCA==}
+  '@volar/language-service@2.4.11':
+    resolution: {integrity: sha512-KIb6g8gjUkS2LzAJ9bJCLIjfsJjeRtmXlu7b2pDFGD3fNqdbC53cCAKzgWDs64xtQVKYBU13DLWbtSNFtGuMLQ==}
 
-  '@volar/source-map@2.4.2':
-    resolution: {integrity: sha512-qiGfGgeZ5DEarPX3S+HcFktFCjfDrFPCXKeXNbrlB7v8cvtPRm8YVwoXOdGG1NhaL5rMlv5BZPVQyu4EdWWIvA==}
+  '@volar/source-map@2.4.11':
+    resolution: {integrity: sha512-ZQpmafIGvaZMn/8iuvCFGrW3smeqkq/IIh9F1SdSx9aUl0J4Iurzd6/FhmjNO5g2ejF3rT45dKskgXWiofqlZQ==}
 
   '@volar/source-map@2.4.4':
     resolution: {integrity: sha512-xG3PZqOP2haG8XG4Pg3PD1UGDAdqZg24Ru8c/qYjYAnmcj6GBR64mstx+bZux5QOyRaJK+/lNM/RnpvBD3489g==}
 
-  '@volar/typescript@2.4.2':
-    resolution: {integrity: sha512-m2uZduhaHO1SZuagi30OsjI/X1gwkaEAC+9wT/nCNAtJ5FqXEkKvUncHmffG7ESDZPlFFUBK4vJ0D9Hfr+f2EA==}
+  '@volar/typescript@2.4.11':
+    resolution: {integrity: sha512-2DT+Tdh88Spp5PyPbqhyoYavYCPDsqbHLFwcUI9K1NlY1YgUJvujGdrqUp0zWxnW7KWNTr3xSpMuv2WnaTKDAw==}
 
   '@volar/typescript@2.4.4':
     resolution: {integrity: sha512-QQMQRVj0fVHJ3XdRKiS1LclhG0VBXdFYlyuHRQF/xLk2PuJuHNWP26MDZNvEVCvnyUQuUQhIAfylwY5TGPgc6w==}
@@ -2708,6 +2984,9 @@ packages:
   '@webassemblyjs/wast-printer@1.12.1':
     resolution: {integrity: sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==}
 
+  '@webgpu/types@0.1.54':
+    resolution: {integrity: sha512-81oaalC8LFrXjhsczomEQ0u3jG+TqE6V9QHLA8GNZq/Rnot0KDugu3LhSYSlie8tSdooAN1Hov05asrUUp9qgg==}
+
   '@xtuc/ieee754@1.2.0':
     resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
 
@@ -2840,8 +3119,9 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
-  aria-query@5.3.0:
-    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
 
   array-buffer-byte-length@1.0.1:
     resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==}
@@ -2890,14 +3170,14 @@ packages:
     resolution: {integrity: sha512-ISvCdHdlTDlH5IpxQJIex7BWBywFWgjJSVdwst+/iQCoEYnyOaQ95+X1JGshuBjGp6nxKUy1jMgE3zPqN7fQdg==}
     hasBin: true
 
-  astro-expressive-code@0.35.6:
-    resolution: {integrity: sha512-1U4KrvFuodaCV3z4I1bIR16SdhQlPkolGsYTtiANxPZUVv/KitGSCTjzksrkPonn1XuwVqvnwmUUVzTLWngnBA==}
+  astro-expressive-code@0.40.2:
+    resolution: {integrity: sha512-yJMQId0yXSAbW9I6yqvJ3FcjKzJ8zRL7elbJbllkv1ZJPlsI0NI83Pxn1YL1IapEM347EvOOkSW2GL+2+NO61w==}
     peerDependencies:
-      astro: ^4.0.0-beta || ^3.3.0
+      astro: ^4.0.0-beta || ^5.0.0-beta || ^3.3.0
 
-  astro@4.15.3:
-    resolution: {integrity: sha512-zwO8H+vnNYbrdKz0Pkh2a4B/JK06JUvI18w+FxL3B5u4jqPB/SU+LH9XVUUWdNQsyJ/DBHKAf0LDK0RmwxXQEw==}
-    engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'}
+  astro@5.4.1:
+    resolution: {integrity: sha512-z9BiBz8pV7pZVn1evZv/9bJil3A9UZNyEjDFH3IjD87ioz95HHGLgbjRbbqF1EwSy8JOLKlMNyuQPqjrX8xqWw==}
+    engines: {node: ^18.17.1 || ^20.3.0 || >=22.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'}
     hasBin: true
 
   async-sema@3.1.1:
@@ -2933,18 +3213,6 @@ packages:
   bare-events@2.4.2:
     resolution: {integrity: sha512-qMKFd2qG/36aA4GwvKq8MxnPgCQAmBWmSyLWsJcbn8v03wvIPQ/hG1Ms8bPzndZxMDoHpxez5VOS+gC9Yi24/Q==}
 
-  bare-fs@2.3.3:
-    resolution: {integrity: sha512-7RYKL+vZVCyAsMLi5SPu7QGauGGT8avnP/HO571ndEuV4MYdGXvLhtW67FuLPeEI8EiIY7zbbRR9x7x7HU0kgw==}
-
-  bare-os@2.4.2:
-    resolution: {integrity: sha512-HZoJwzC+rZ9lqEemTMiO0luOePoGYNBgsLLgegKR/cljiJvcDNhDZQkzC+NC5Oh0aHbdBNSOHpghwMuB5tqhjg==}
-
-  bare-path@2.1.3:
-    resolution: {integrity: sha512-lh/eITfU8hrj9Ru5quUp0Io1kJWIk1bTjzo7JH1P5dWmQ2EL4hFUlfI8FonAhSlgIfhn63p84CDY/x+PisgcXA==}
-
-  bare-stream@2.2.1:
-    resolution: {integrity: sha512-YTB47kHwBW9zSG8LD77MIBAAQXjU2WjAkMHeeb7hUplVs6+IoM5I7uEVQNPMB7lj9r8I76UMdoMkGnCodHOLqg==}
-
   base-64@1.0.0:
     resolution: {integrity: sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==}
 
@@ -2967,15 +3235,12 @@ packages:
   birpc@0.2.19:
     resolution: {integrity: sha512-5WeXXAvTmitV1RqJFppT5QtUiz2p1mRSYU000Jkft5ZUCLJIk4uQriYNO50HknxKwM6jd8utNc66K1qGIwwWBQ==}
 
-  bl@4.1.0:
-    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
-
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
-  boxen@7.1.1:
-    resolution: {integrity: sha512-2hCgjEmP8YLWQ130n2FerGv7rYpfBmnmp9Uy2Le1vge6X3gZIfSmEzP5QTDElFxcvVcXlEn8Aq6MU/PZygIOog==}
-    engines: {node: '>=14.16'}
+  boxen@8.0.1:
+    resolution: {integrity: sha512-F3PH5k5juxom4xktynS7MoFY+NUWH5LC4CnH11YB8NPew+HLpmBLCybSAEyb2F+4pRXhuhWqFesoQd6DAyc2hw==}
+    engines: {node: '>=18'}
 
   brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
@@ -2999,9 +3264,6 @@ packages:
   buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
-  buffer@5.7.1:
-    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
-
   buffer@6.0.3:
     resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
 
@@ -3043,9 +3305,9 @@ packages:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
 
-  camelcase@7.0.1:
-    resolution: {integrity: sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==}
-    engines: {node: '>=14.16'}
+  camelcase@8.0.0:
+    resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==}
+    engines: {node: '>=16'}
 
   caniuse-api@3.0.0:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
@@ -3087,8 +3349,9 @@ packages:
     resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==}
     engines: {node: '>= 14.16.0'}
 
-  chownr@1.1.4:
-    resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
 
   chownr@2.0.0:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
@@ -3106,6 +3369,10 @@ packages:
     resolution: {integrity: sha512-TdHqgGf9odd8SXNuxtUBVx8Nv+qZOejE6qyqiy5NtbYYQOeFa6zmHkxlPzmaLxWWHsU6nJmB7AETdVPi+2NBUg==}
     engines: {node: '>=8'}
 
+  ci-info@4.1.0:
+    resolution: {integrity: sha512-HutrvTNsF48wnxkzERIXOe5/mlcfFcbfCmwcg6CJnizbSue78AbDt+1cgl26zwn61WFxhcPykPfZrbqjGmBb4A==}
+    engines: {node: '>=8'}
+
   citty@0.1.6:
     resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
 
@@ -3120,14 +3387,6 @@ packages:
     resolution: {integrity: sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==}
     engines: {node: '>=10'}
 
-  cli-cursor@5.0.0:
-    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
-    engines: {node: '>=18'}
-
-  cli-spinners@2.9.2:
-    resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
-    engines: {node: '>=6'}
-
   clipboardy@4.0.0:
     resolution: {integrity: sha512-5mOlNS0mhX0707P2I0aZ2V/cmHUEO/fL7VFLqszkhUsxt7RwnmrInf/eEQKlf5GzvYeHIjT+Ov1HRfNmymlG0w==}
     engines: {node: '>=18'}
@@ -3232,8 +3491,8 @@ packages:
   cookie-es@1.2.2:
     resolution: {integrity: sha512-+W7VmiVINB+ywl1HGXJXmrqkOhpKrIiVZV6tQuV54ZyQC7MMuBt81Vc336GMLoHBq5hV/F9eXgt5Mnx0Rha5Fg==}
 
-  cookie@0.6.0:
-    resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
     engines: {node: '>= 0.6'}
 
   copy-anything@3.0.5:
@@ -3276,6 +3535,9 @@ packages:
   crossws@0.3.1:
     resolution: {integrity: sha512-HsZgeVYaG+b5zA+9PbIPGq4+J/CJynJuearykPsXx4V/eMhyQ5EDVg3Ak2FBZtVXCiOLu/U7IiwDHTr9MA+IKw==}
 
+  crossws@0.3.4:
+    resolution: {integrity: sha512-uj0O1ETYX1Bh6uSgktfPvwDiPYGQ3aI4qVsaC/LWpkIzGj1nUYm5FK3K+t11oOlpN01lGbprFCH4wBlKdJjVgw==}
+
   css-declaration-sorter@7.2.0:
     resolution: {integrity: sha512-h70rUM+3PNFuaBDTLe8wF/cdWu+dOZmb7pJt8Z2sedYbAcQVQV/tEchueg3GWxwqS0cxtbxmaHEdkNACqcvsow==}
     engines: {node: ^14 || ^16 || >=18}
@@ -3406,14 +3668,6 @@ packages:
   decode-named-character-reference@1.0.2:
     resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==}
 
-  decompress-response@6.0.0:
-    resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
-    engines: {node: '>=10'}
-
-  deep-extend@0.6.0:
-    resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
-    engines: {node: '>=4.0.0'}
-
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -3547,8 +3801,8 @@ packages:
     resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
     engines: {node: '>=12'}
 
-  dset@3.1.3:
-    resolution: {integrity: sha512-20TuZZHCEZ2O71q9/+8BwKwZ0QtD9D8ObhrihJPr+vLLYlSuAU3/zL4cSlgbfeoGHTjCSJBa7NGcrF9/Bx/WJQ==}
+  dset@3.1.4:
+    resolution: {integrity: sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA==}
     engines: {node: '>=4'}
 
   duplexer@0.1.2:
@@ -3566,6 +3820,9 @@ packages:
   emmet@2.4.7:
     resolution: {integrity: sha512-O5O5QNqtdlnQM2bmKHtJgyChcrFMgQuulI+WdiOw2NArzprUqqxUW6bgYtKvzKgrsYpuLWalOkdhNP+1jluhCA==}
 
+  emoji-regex-xs@1.0.0:
+    resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
+
   emoji-regex@10.4.0:
     resolution: {integrity: sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==}
 
@@ -3583,9 +3840,6 @@ packages:
     resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
     engines: {node: '>= 0.8'}
 
-  end-of-stream@1.4.4:
-    resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
-
   enhanced-resolve@5.17.1:
     resolution: {integrity: sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==}
     engines: {node: '>=10.13.0'}
@@ -3625,6 +3879,9 @@ packages:
   es-module-lexer@1.5.4:
     resolution: {integrity: sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==}
 
+  es-module-lexer@1.6.0:
+    resolution: {integrity: sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==}
+
   es-object-atoms@1.0.0:
     resolution: {integrity: sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==}
     engines: {node: '>= 0.4'}
@@ -3640,6 +3897,12 @@ packages:
     resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
     engines: {node: '>= 0.4'}
 
+  esast-util-from-estree@2.0.0:
+    resolution: {integrity: sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ==}
+
+  esast-util-from-js@2.0.1:
+    resolution: {integrity: sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw==}
+
   esbuild@0.18.20:
     resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==}
     engines: {node: '>=12'}
@@ -3655,6 +3918,11 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  esbuild@0.25.0:
+    resolution: {integrity: sha512-BXq5mqc8ltbaN34cDqWuYKyNhX8D/Z0J1xdtdQ8UcIIIyJyz+ZMKUt58tF3SrZ85jcfN/PZYhjR5uDQAYNVbuw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -3931,6 +4199,9 @@ packages:
   estree-util-is-identifier-name@3.0.0:
     resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
 
+  estree-util-scope@1.0.0:
+    resolution: {integrity: sha512-2CAASclonf+JFWBNJPndcOpA8EMJwa0Q8LUFJEKqXLW6+qBvbFZuF5gItbQOs/umBUkjviCSDCbBwU2cXbmrhQ==}
+
   estree-util-to-js@2.0.0:
     resolution: {integrity: sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==}
 
@@ -3970,16 +4241,8 @@ packages:
     resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
     engines: {node: '>=16.17'}
 
-  expand-template@2.0.3:
-    resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==}
-    engines: {node: '>=6'}
-
-  expressive-code@0.35.6:
-    resolution: {integrity: sha512-+mx+TPTbMqgo0mL92Xh9QgjW0kSQIsEivMgEcOnaqKqL7qCw8Vkqc5Rg/di7ZYw4aMUSr74VTc+w8GQWu05j1g==}
-
-  extend-shallow@2.0.1:
-    resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
-    engines: {node: '>=0.10.0'}
+  expressive-code@0.40.2:
+    resolution: {integrity: sha512-1zIda2rB0qiDZACawzw2rbdBQiWHBT56uBctS+ezFe5XMAaFaHLnnSYND/Kd+dVzO9HfCXRDpzH3d+3fvOWRcw==}
 
   extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
@@ -4023,9 +4286,20 @@ packages:
       picomatch:
         optional: true
 
+  fdir@6.4.3:
+    resolution: {integrity: sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
   fflate@0.4.8:
     resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==}
 
+  fflate@0.8.2:
+    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
+
   file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -4094,9 +4368,6 @@ packages:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
 
-  fs-constants@1.0.0:
-    resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
-
   fs-extra@10.1.0:
     resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
     engines: {node: '>=12'}
@@ -4184,9 +4455,6 @@ packages:
   git-url-parse@15.0.0:
     resolution: {integrity: sha512-5reeBufLi+i4QD3ZFftcJs9jC26aULFLBU23FeKM/b1rI0K6ofIeAblmDVO7Ht22zTDE9+CkJ3ZVb0CgJmz3UQ==}
 
-  github-from-package@0.0.0:
-    resolution: {integrity: sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==}
-
   github-slugger@2.0.0:
     resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
 
@@ -4254,10 +4522,6 @@ packages:
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
-  gray-matter@4.0.3:
-    resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
-    engines: {node: '>=6.0'}
-
   gzip-size@7.0.0:
     resolution: {integrity: sha512-O1Ld7Dr+nqPnmGpdhzLmMTQ4vAsD+rHwMm1NLUmoUFFymBOMKxCCrtDxqdBRYXdeEPEi3SyoR4TizJLQrnKBNA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -4265,6 +4529,9 @@ packages:
   h3@1.13.0:
     resolution: {integrity: sha512-vFEAu/yf8UMUcB4s43OaDaigcqpQd14yanmOsn+NcRX3/guSKncyE2rOYhq8RIchgJrPSs/QiIddnTTR1ddiAg==}
 
+  h3@1.15.1:
+    resolution: {integrity: sha512-+ORaOBttdUm1E2Uu/obAyCguiI7MbBvsLTndc3gyK3zU+SYLoZXlyCP9Xgy0gikkGufFLTZXCXD6+4BsufnmHA==}
+
   has-bigints@1.0.2:
     resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
 
@@ -4303,6 +4570,9 @@ packages:
   hast-util-from-html@2.0.2:
     resolution: {integrity: sha512-HwOHwxdt2zC5KQ/CNoybBntRook2zJvfZE/u5/Ap7aLPe22bDqen7KwGkOqOyzL5zIqKwiYX/OTtE0FWgr6XXA==}
 
+  hast-util-from-html@2.0.3:
+    resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==}
+
   hast-util-from-parse5@8.0.1:
     resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==}
 
@@ -4333,6 +4603,9 @@ packages:
   hast-util-to-html@9.0.2:
     resolution: {integrity: sha512-RP5wNpj5nm1Z8cloDv4Sl4RS8jH5HYa0v93YB6Wb4poEzgMo/dAAL0KcT4974dCjcNG5pkLqTImeFHHCwwfY3g==}
 
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
   hast-util-to-jsx-runtime@2.3.0:
     resolution: {integrity: sha512-H/y0+IWPdsLLS738P8tDnrQ8Z+dj12zQQ6WC11TIM21C8WFVoIxcqWXf2H3hiTVZjF1AWqoimGwrTWecWrnmRQ==}
 
@@ -4411,6 +4684,9 @@ packages:
     resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
     engines: {node: '>=16.17.0'}
 
+  i18next@23.16.8:
+    resolution: {integrity: sha512-06r/TitrM88Mg5FdUXAKL96dJMzgqLE5dv3ryBAra4KCwD9mJ4ndOTS95ZuymIGoE+2hzfdaMak2X11/es7ZWg==}
+
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
@@ -4547,10 +4823,6 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     hasBin: true
 
-  is-extendable@0.1.1:
-    resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
-    engines: {node: '>=0.10.0'}
-
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -4575,10 +4847,6 @@ packages:
     resolution: {integrity: sha512-K55T22lfpQ63N4KEN57jZUAaAYqYHEe8veb/TycJRk9DdSCLLcovXz/mL6mOnhQaZsQGwPhuFopdQIlqGSEjiQ==}
     engines: {node: '>=18'}
 
-  is-interactive@2.0.0:
-    resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
-    engines: {node: '>=12'}
-
   is-module@1.0.0:
     resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
 
@@ -4609,9 +4877,6 @@ packages:
   is-reference@1.2.1:
     resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
 
-  is-reference@3.0.2:
-    resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
-
   is-regex@1.1.4:
     resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
     engines: {node: '>= 0.4'}
@@ -4643,14 +4908,6 @@ packages:
     resolution: {integrity: sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==}
     engines: {node: '>= 0.4'}
 
-  is-unicode-supported@1.3.0:
-    resolution: {integrity: sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==}
-    engines: {node: '>=12'}
-
-  is-unicode-supported@2.0.0:
-    resolution: {integrity: sha512-FRdAyx5lusK1iHG0TWpVtk9+1i+GjrzRffhDg4ovQ7mcidMQ6mj+MhKPmvh7Xwyv5gIS06ns49CA7Sqg7lC22Q==}
-    engines: {node: '>=18'}
-
   is-weakref@1.0.2:
     resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
 
@@ -4783,10 +5040,6 @@ packages:
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
-  kind-of@6.0.3:
-    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
-    engines: {node: '>=0.10.0'}
-
   kleur@3.0.3:
     resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
     engines: {node: '>=6'}
@@ -4876,6 +5129,7 @@ packages:
 
   lodash.isequal@4.5.0:
     resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
+    deprecated: This package is deprecated. Use require('node:util').isDeepStrictEqual instead.
 
   lodash.memoize@4.1.2:
     resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
@@ -4889,10 +5143,6 @@ packages:
   lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
-  log-symbols@6.0.0:
-    resolution: {integrity: sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==}
-    engines: {node: '>=18'}
-
   longest-streak@3.1.0:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
 
@@ -4913,6 +5163,9 @@ packages:
   magic-string@0.30.14:
     resolution: {integrity: sha512-5c99P1WKTed11ZC0HMJOj6CDIue6F8ySu+bJL+85q1zBEIY8IklrJ1eiKC2NDRh3Ct3FcvmJPyQHb9erXMTJNw==}
 
+  magic-string@0.30.17:
+    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
+
   magicast@0.3.5:
     resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
 
@@ -5008,6 +5261,9 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  meshoptimizer@0.18.1:
+    resolution: {integrity: sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==}
+
   micromark-core-commonmark@2.0.1:
     resolution: {integrity: sha512-CUQyKr1e///ZODyD1U3xit6zXwy1a8q2a1S1HKtIlmgvurrEpaw/Y9y6KSIbF8P59cn/NjzHyO+Q2fAyYLQrAA==}
 
@@ -5147,14 +5403,6 @@ packages:
     resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
     engines: {node: '>=12'}
 
-  mimic-function@5.0.1:
-    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
-    engines: {node: '>=18'}
-
-  mimic-response@3.1.0:
-    resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==}
-    engines: {node: '>=10'}
-
   min-indent@1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
@@ -5199,9 +5447,6 @@ packages:
   mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
-  mkdirp-classic@0.5.3:
-    resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
-
   mkdirp@1.0.4:
     resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
     engines: {node: '>=10'}
@@ -5235,6 +5480,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanoid@3.3.8:
+    resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
   nanoid@5.0.7:
     resolution: {integrity: sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==}
     engines: {node: ^18 || >=20}
@@ -5243,9 +5493,6 @@ packages:
   nanotar@0.1.1:
     resolution: {integrity: sha512-AiJsGsSF3O0havL1BydvI4+wR76sKT+okKRwWIaK96cZUnXqH0uNBOsHlbwZq3+m2BR1VKqHDVudl3gO4mYjpQ==}
 
-  napi-build-utils@1.0.2:
-    resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==}
-
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -5269,13 +5516,6 @@ packages:
   nlcst-to-string@4.0.0:
     resolution: {integrity: sha512-YKLBCcUYKAg0FNlOBT6aI91qFmSiFKiluk655WzPF+DDMA02qIyy8uiRqI8QXtcFpEvll12LpL5MXqEmAZ+dcA==}
 
-  node-abi@3.67.0:
-    resolution: {integrity: sha512-bLn/fU/ALVBE9wj+p4Y21ZJWYFjUXLXPi/IewyLZkx3ApxKDNBWCKdReeKOtD8dWpOdDCeMyLh6ZewzcLsG2Nw==}
-    engines: {node: '>=10'}
-
-  node-addon-api@6.1.0:
-    resolution: {integrity: sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==}
-
   node-addon-api@7.1.0:
     resolution: {integrity: sha512-mNcltoe1R8o7STTegSOHdnJNN7s5EUvhoS7ShnTHDyOSd+8H+UdWODq6qSv67PjC8Zc5JRT8+oLAMCr0SIXw7g==}
     engines: {node: ^16 || ^18 || >= 20}
@@ -5283,6 +5523,9 @@ packages:
   node-fetch-native@1.6.4:
     resolution: {integrity: sha512-IhOigYzAKHd244OC0JIMIUrjzctirCmPkaIfhDeGcEETWof5zKYUW7e7MYvChGWh/4CJeXEgsRyGzuF334rOOQ==}
 
+  node-fetch-native@1.6.6:
+    resolution: {integrity: sha512-8Mc2HhqPdlIfedsuZoc3yioPuzp6b+L5jRCRY1QzuWZh2EGJVQrGppC6V6cF0bLdbW0+O2YpqCA25aF/1lvipQ==}
+
   node-fetch@2.7.0:
     resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
     engines: {node: 4.x || >=6.0.0}
@@ -5300,6 +5543,9 @@ packages:
     resolution: {integrity: sha512-OSs33Z9yWr148JZcbZd5WiAXhh/n9z8TxQcdMhIOlpN9AhWpLfvVFO73+m77bBABQMaY9XSvIa+qk0jlI7Gcaw==}
     hasBin: true
 
+  node-mock-http@1.0.0:
+    resolution: {integrity: sha512-0uGYQ1WQL1M5kKvGRXWQ3uZCHtLTO8hln3oBjIusM75WoesZ909uQJs/Hb946i2SS+Gsrhkaa6iAO17jRIv6DQ==}
+
   node-releases@2.0.18:
     resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==}
 
@@ -5414,9 +5660,8 @@ packages:
     resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
     engines: {node: '>=12'}
 
-  onetime@7.0.0:
-    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
-    engines: {node: '>=18'}
+  oniguruma-to-es@2.3.0:
+    resolution: {integrity: sha512-bwALDxriqfKGfUufKGGepCzu9x7nJQuoRoAFp4AnwehhC2crqrDIAP/uN2qdlsAvSMpeRC3+Yzhqc7hLmle5+g==}
 
   open@10.1.0:
     resolution: {integrity: sha512-mnkeQ1qP5Ue2wd+aivTD3NHd/lZ96Lu0jgf0pwktLPtx6cTZiH7tyeGRRHs0zX0rbrahXPnXlUnbeXyaBBuIaw==}
@@ -5439,10 +5684,6 @@ packages:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
 
-  ora@8.1.0:
-    resolution: {integrity: sha512-GQEkNkH/GHOhPFXcqZs3IDahXEQcQxsSjEkK4KvEEST4t7eNzoMjxTzef+EZ+JluDEV+Raoi3WQ2CflnRdSVnQ==}
-    engines: {node: '>=18'}
-
   p-limit@2.3.0:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
     engines: {node: '>=6'}
@@ -5451,8 +5692,8 @@ packages:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
 
-  p-limit@6.1.0:
-    resolution: {integrity: sha512-H0jc0q1vOzlEk0TqAKXKZxdl7kX3OFUzCnNVUnq5Pc3DGo0kpeaMuPqxQn235HibwBEb0/pm9dgKTjXy66fBkg==}
+  p-limit@6.2.0:
+    resolution: {integrity: sha512-kuUqqHNUqoIWp/c467RI4X6mmyuojY5jGutNU0wVTmEOOfcuwLqyMVoAi9MKi2Ak+5i9+nhmrK4ufZE8069kHA==}
     engines: {node: '>=18'}
 
   p-locate@4.1.0:
@@ -5463,8 +5704,8 @@ packages:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
-  p-queue@8.0.1:
-    resolution: {integrity: sha512-NXzu9aQJTAzbBqOt2hwsR63ea7yvxJc0PwN/zobNAudYfb1B7R08SzB4TsLeSbUCuG467NhnoT0oO6w1qRO+BA==}
+  p-queue@8.1.0:
+    resolution: {integrity: sha512-mxLDbbGIBEXTJL0zEx8JIylaj3xQ7Z/7eEVjcF9fJX4DBiH9oqe+oahYnlKKxm0Ci9TlWTyhSHgygxMxjIB2jw==}
     engines: {node: '>=18'}
 
   p-timeout@6.1.2:
@@ -5481,8 +5722,8 @@ packages:
   package-manager-detector@0.2.7:
     resolution: {integrity: sha512-g4+387DXDKlZzHkP+9FLt8yKj8+/3tOkPv7DVTJGGRm00RkEWgqbFstX1mXJ4M0VDYhUqsTOiISqNOJnhAu3PQ==}
 
-  pagefind@1.1.1:
-    resolution: {integrity: sha512-U2YR0dQN5B2fbIXrLtt/UXNS0yWSSYfePaad1KcBPTi0p+zRtsVjwmoPaMQgTks5DnHNbmDxyJUL5TGaLljK3A==}
+  pagefind@1.3.0:
+    resolution: {integrity: sha512-8KPLGT5g9s+olKMRTU9LFekLizkVIu9tes90O1/aigJ0T5LmyPqTzGJrETnSw3meSYg58YH7JTzhTTW/3z6VAw==}
     hasBin: true
 
   pako@1.0.11:
@@ -5553,9 +5794,6 @@ packages:
     resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
     engines: {node: '>=16 || 14 >=14.18'}
 
-  path-to-regexp@6.2.2:
-    resolution: {integrity: sha512-GQX3SSMokngb36+whdpRXE+3f9V8UzyAorlYvOGx87ufGHehNTn5lCxrKtLyZ4Yl/wEKnNnr98ZzOwwDZV5ogw==}
-
   path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
@@ -5570,9 +5808,6 @@ packages:
   perfect-debounce@1.0.0:
     resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
 
-  periscopic@3.1.0:
-    resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==}
-
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -5826,19 +6061,18 @@ packages:
     resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.5.3:
+    resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
+    engines: {node: ^10 || ^12 || >=14}
+
   posthog-js@1.158.2:
     resolution: {integrity: sha512-ovb7GHHRNDf6vmuL+8lbDukewzDzQlLZXg3d475hrfHSBgidYeTxtLGtoBcUz4x6558BLDFjnSip+f3m4rV9LA==}
 
   preact@10.23.2:
     resolution: {integrity: sha512-kKYfePf9rzKnxOAKDpsWhg/ysrHPqT+yQ7UW4JjdnqjFIeNUnNcEJvhuA8fDenxAGWzUqtd51DfVg7xp/8T9NA==}
 
-  prebuild-install@7.1.2:
-    resolution: {integrity: sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==}
-    engines: {node: '>=10'}
-    hasBin: true
-
-  preferred-pm@4.0.0:
-    resolution: {integrity: sha512-gYBeFTZLu055D8Vv3cSPox/0iTPtkzxpLroSYYA7WXgRi31WCJ51Uyl8ZiPeUUjyvs2MBzK+S8v9JVUgHU/Sqw==}
+  preferred-pm@4.1.1:
+    resolution: {integrity: sha512-rU+ZAv1Ur9jAUZtGPebQVQPzdGhNzaEiQ7VL9+cjsAWPHFYOccNXPNiev1CCDSOg/2j7UujM7ojNhpkuILEVNQ==}
     engines: {node: '>=18.12'}
 
   prelude-ls@1.2.1:
@@ -5933,12 +6167,12 @@ packages:
   property-information@6.5.0:
     resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
 
+  property-information@7.0.0:
+    resolution: {integrity: sha512-7D/qOz/+Y4X/rzSB6jKxKUsQnphO046ei8qxG59mtM3RG3DHgTK81HrxrmoDVINJb8NKT5ZsRbwHvQ6B68Iyhg==}
+
   protocols@2.0.1:
     resolution: {integrity: sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==}
 
-  pump@3.0.0:
-    resolution: {integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==}
-
   punycode.js@2.3.1:
     resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
     engines: {node: '>=6'}
@@ -5971,10 +6205,6 @@ packages:
   rc9@2.1.2:
     resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
 
-  rc@1.2.8:
-    resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
-    hasBin: true
-
   read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
 
@@ -6008,6 +6238,18 @@ packages:
     resolution: {integrity: sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==}
     engines: {node: '>= 14.16.0'}
 
+  recma-build-jsx@1.0.0:
+    resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==}
+
+  recma-jsx@1.0.0:
+    resolution: {integrity: sha512-5vwkv65qWwYxg+Atz95acp8DMu1JDSqdGkA2Of1j6rCreyFUE/gp15fC8MnGEuG1W68UKjM6x6+YTWIh7hZM/Q==}
+
+  recma-parse@1.0.0:
+    resolution: {integrity: sha512-OYLsIGBB5Y5wjnSnQW6t3Xg7q3fQ7FWbw/vcXtORTnyaSFscOtABg+7Pnz6YZ6c27fG1/aN8CjfwoUEUIdwqWQ==}
+
+  recma-stringify@1.0.0:
+    resolution: {integrity: sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g==}
+
   redis-errors@1.2.0:
     resolution: {integrity: sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==}
     engines: {node: '>=4'}
@@ -6023,6 +6265,15 @@ packages:
   regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
 
+  regex-recursion@5.1.1:
+    resolution: {integrity: sha512-ae7SBCbzVNrIjgSbh7wMznPcQel1DNlDtzensnFxpiNpXt1U2ju/bHugH422r+4LAVS1FpW1YCwilmnNsjum9w==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
+  regex@5.1.1:
+    resolution: {integrity: sha512-dN5I359AVGPnwzJm2jN1k0W9LPZ+ePvoOeVMMfqIMFz53sSwXkxaJoxr50ptnsC771lK95BnTrVSZxq0b9yCGw==}
+
   regexp-ast-analysis@0.7.1:
     resolution: {integrity: sha512-sZuz1dYW/ZsfG17WSAG7eS85r5a0dDsvg+7BiiYR5o6lKCAtUrEwdmRmaGF6rwVj3LcmAeYkOWKEPlbPzN3Y3A==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
@@ -6043,8 +6294,8 @@ packages:
     resolution: {integrity: sha512-qx+xQGZVsy55CH0a1hiVwHmqjLryfh7wQyF5HO07XJ9f7dQMY/gPQHhlyDkIzJKC+x2fUCpCcUODUUUFrm7SHA==}
     hasBin: true
 
-  rehype-expressive-code@0.35.6:
-    resolution: {integrity: sha512-pPdE+pRcRw01kxMOwHQjuRxgwlblZt5+wAc3w2aPGgmcnn57wYjn07iKO7zaznDxYVxMYVvYlnL+R3vWFQS4Gw==}
+  rehype-expressive-code@0.40.2:
+    resolution: {integrity: sha512-+kn+AMGCrGzvtH8Q5lC6Y5lnmTV/r33fdmi5QU/IH1KPHKobKr5UnLwJuqHv5jBTSN/0v2wLDS7RTM73FVzqmQ==}
 
   rehype-format@5.0.0:
     resolution: {integrity: sha512-kM4II8krCHmUhxrlvzFSptvaWh280Fr7UGNJU5DCMuvmAwGCNmGfi9CvFAQK6JDjsNoRMWQStglK3zKJH685Wg==}
@@ -6058,12 +6309,21 @@ packages:
   rehype-raw@7.0.0:
     resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}
 
+  rehype-recma@1.0.0:
+    resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==}
+
   rehype-stringify@10.0.0:
     resolution: {integrity: sha512-1TX1i048LooI9QoecrXy7nGFFbFSufxVRAfc6Y9YMRAi56l+oB0zP51mLSV312uRuvVLPV1opSlJmslozR1XHQ==}
 
+  rehype-stringify@10.0.1:
+    resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==}
+
   rehype@13.0.1:
     resolution: {integrity: sha512-AcSLS2mItY+0fYu9xKxOu1LhUZeBZZBx8//5HKzF+0XP+eP8+6a5MXn2+DW2kfXR6Dtp1FEXMVrjyKAcvcU8vg==}
 
+  rehype@13.0.2:
+    resolution: {integrity: sha512-j31mdaRFrwFRUIlxGeuPXXKWQxet52RBQRvCmzl5eCefn/KGbomK5GMHNMsOJf55fgo3qw5tST5neDuarDYR2A==}
+
   remark-directive@3.0.0:
     resolution: {integrity: sha512-l1UyWJ6Eg1VPU7Hm/9tt0zKtReJQNOA4+iDMAxTyZNWnJnFlbS/7zhiel/rogTLQ2vMYwDzSJa4BiVNqGlqIMA==}
 
@@ -6079,6 +6339,9 @@ packages:
   remark-rehype@11.1.0:
     resolution: {integrity: sha512-z3tJrAs2kIs1AqIIy6pzHmAHlF1hWQ+OdY4/hv+Wxe35EhyLKcajL33iUEn3ScxtFox9nUvRufR/Zre8Q08H/g==}
 
+  remark-rehype@11.1.1:
+    resolution: {integrity: sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ==}
+
   remark-smartypants@3.0.2:
     resolution: {integrity: sha512-ILTWeOriIluwEvPjv67v7Blgrcx+LZOkAUVtKI3putuhlZm84FnqDORNXPPm+HY3NdZOMhyDwZ1E+eZB/Df5dA==}
     engines: {node: '>=16.0.0'}
@@ -6118,10 +6381,6 @@ packages:
     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
 
-  restore-cursor@5.1.0:
-    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
-    engines: {node: '>=18'}
-
   retext-latin@4.0.0:
     resolution: {integrity: sha512-hv9woG7Fy0M9IlRQloq/N6atV82NxLGveq+3H2WOi79dtIYWN8OaxogDm77f8YnVXJL2VD3bbqowu5E3EMhBYA==}
 
@@ -6166,6 +6425,11 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  rollup@4.34.9:
+    resolution: {integrity: sha512-nF5XYqWWp9hx/LrpC8sZvvvmq0TeTjQgaZHYmAgwysT9nh8sWnZhBnM8ZyVbbJFIQBLwHDNoMqsBZBbUo4U8sQ==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
   run-applescript@7.0.0:
     resolution: {integrity: sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==}
     engines: {node: '>=18'}
@@ -6209,10 +6473,6 @@ packages:
   scule@1.3.0:
     resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
 
-  section-matter@1.0.0:
-    resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
-    engines: {node: '>=4'}
-
   semver@5.7.2:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
     hasBin: true
@@ -6226,6 +6486,11 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  semver@7.7.1:
+    resolution: {integrity: sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   send@0.19.0:
     resolution: {integrity: sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==}
     engines: {node: '>= 0.8.0'}
@@ -6257,10 +6522,6 @@ packages:
   setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
-  sharp@0.32.6:
-    resolution: {integrity: sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==}
-    engines: {node: '>=14.15.0'}
-
   sharp@0.33.5:
     resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -6276,8 +6537,8 @@ packages:
   shell-quote@1.8.1:
     resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
 
-  shiki@1.16.2:
-    resolution: {integrity: sha512-gSym0hZf5a1U0iDPsdoOAZbvoi+e0c6c3NKAi03FoSLTm7oG20tum29+gk0wzzivOasn3loxfGUPT+jZXIUbWg==}
+  shiki@1.29.2:
+    resolution: {integrity: sha512-njXuliz/cP+67jU2hukkxCNuH1yUi4QfdZZY+sMr5PPrIyXSu5iTb/qYC4BiWWB0vZ+7TbdvYUCeL23zpwCfbg==}
 
   side-channel@1.0.6:
     resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==}
@@ -6290,12 +6551,6 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
-  simple-concat@1.0.1:
-    resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==}
-
-  simple-get@4.0.1:
-    resolution: {integrity: sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==}
-
   simple-git@3.27.0:
     resolution: {integrity: sha512-ivHoFS9Yi9GY49ogc6/YAi3Fl9ROnF4VyubNylgCkA+RVqLaKWnDSzXOVzya8csELIaWaYNutsEuAhZrtOjozA==}
 
@@ -6309,9 +6564,9 @@ packages:
   sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
 
-  sitemap@7.1.2:
-    resolution: {integrity: sha512-ARCqzHJ0p4gWt+j7NlU5eDlIO9+Rkr/JhPFZKKQ1l5GCus7rJH4UdrlVAh0xC/gDS/Qir2UMxqYNHtsKr2rpCw==}
-    engines: {node: '>=12.0.0', npm: '>=5.6.0'}
+  sitemap@8.0.0:
+    resolution: {integrity: sha512-+AbdxhM9kJsHtruUF39bwS/B0Fytw6Fr1o4ZAIAEqA6cke2xcoO2GleBw9Zw7nRzILVEgz7zBM5GiTJjie1G9A==}
+    engines: {node: '>=14.0.0', npm: '>=6.0.0'}
     hasBin: true
 
   slash@3.0.0:
@@ -6328,6 +6583,10 @@ packages:
   smob@1.5.0:
     resolution: {integrity: sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==}
 
+  smol-toml@1.3.1:
+    resolution: {integrity: sha512-tEYNll18pPKHroYSmLLrksq233j021G0giwW7P3D24jC54pQ5W5BXMsQ/Mvw1OJCmEYDgY+lrzT+3nNUtoNfXQ==}
+    engines: {node: '>= 18'}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -6374,13 +6633,13 @@ packages:
   standard-as-callback@2.1.0:
     resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
 
-  starlight-openapi@0.7.0:
-    resolution: {integrity: sha512-+aqVVqmoFZTb3ibXM6mfl3nmKY/bCZOn5+FTRzOGulEOtG4R8Y8NGwj9HN+6vxLZSPlAPfKwb3ipcAdDbVBuCg==}
-    engines: {node: '>=18.14.1'}
+  starlight-openapi@0.14.0:
+    resolution: {integrity: sha512-th8SXIw68x5h3zjgB0d55PqUfWPreauJcU17WW/qJF8dDOUuGERG1mnZ673AvGzY8/nrNtn/yR1n3Pz6RbwN7Q==}
+    engines: {node: '>=18.17.1'}
     peerDependencies:
-      '@astrojs/markdown-remark': '>=4.2.0'
-      '@astrojs/starlight': '>=0.26.0'
-      astro: '>=4.8.6'
+      '@astrojs/markdown-remark': '>=6.0.1'
+      '@astrojs/starlight': '>=0.30.0'
+      astro: '>=5.1.5'
 
   statuses@2.0.1:
     resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
@@ -6389,10 +6648,6 @@ packages:
   std-env@3.8.0:
     resolution: {integrity: sha512-Bc3YwwCB+OzldMxOXJIIvC6cPRWr/LxOp48CdQTOkPyk/t4JWWJbrilwBd7RJzKV8QW7tJkcgAmeuLLJugl5/w==}
 
-  stdin-discarder@0.2.2:
-    resolution: {integrity: sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==}
-    engines: {node: '>=18'}
-
   stream-replace-string@2.0.0:
     resolution: {integrity: sha512-TlnjJ1C0QrmxRNrON00JvaFFlNh5TTG00APw23j74ET7gkQpTASi6/L2fuiav8pzK715HXtUeClpBTw2NPSn6w==}
 
@@ -6439,10 +6694,6 @@ packages:
     resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
     engines: {node: '>=12'}
 
-  strip-bom-string@1.0.0:
-    resolution: {integrity: sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==}
-    engines: {node: '>=0.10.0'}
-
   strip-bom@3.0.0:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
     engines: {node: '>=4'}
@@ -6455,10 +6706,6 @@ packages:
     resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
     engines: {node: '>=8'}
 
-  strip-json-comments@2.0.1:
-    resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
-    engines: {node: '>=0.10.0'}
-
   strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
@@ -6562,16 +6809,6 @@ packages:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
 
-  tar-fs@2.1.1:
-    resolution: {integrity: sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==}
-
-  tar-fs@3.0.6:
-    resolution: {integrity: sha512-iokBDQQkUyeXhgPYaZxmczGPhnhXZ0CmrqI+MOb/WFGS9DW5wnfrLgtjUJBvz50vQ3qfRwJ62QVoCFu8mPVu5w==}
-
-  tar-stream@2.2.0:
-    resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
-    engines: {node: '>=6'}
-
   tar-stream@3.1.7:
     resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
 
@@ -6613,16 +6850,26 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
+  three@0.172.0:
+    resolution: {integrity: sha512-6HMgMlzU97MsV7D/tY8Va38b83kz8YJX+BefKjspMNAv0Vx6dxMogHOrnRl/sbMIs3BPUKijPqDqJ/+UwJbIow==}
+
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
   tinyexec@0.3.1:
     resolution: {integrity: sha512-WiCJLEECkO18gwqIp6+hJg0//p23HXp4S+gGtAKu3mI2F2/sXC4FvHvXvB0zJVVaTPhx1/tOwdbRsa1sOBIKqQ==}
 
+  tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
+
   tinyglobby@0.2.10:
     resolution: {integrity: sha512-Zc+8eJlFMvgatPZTl6A9L/yht8QqdmUNtURHaKZLmKBE12hNPSrqNkUp2cs3M/UKmNVVAMFQYSjYIVHDjW5zew==}
     engines: {node: '>=12.0.0'}
 
+  tinyglobby@0.2.12:
+    resolution: {integrity: sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==}
+    engines: {node: '>=12.0.0'}
+
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -6653,8 +6900,8 @@ packages:
   ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
 
-  tsconfck@3.1.3:
-    resolution: {integrity: sha512-ulNZP1SVpRDesxeMLON/LtWM8HIgAJEIVpVVhBM6gsmvQ8+Rh+ZG7FWGvHh7Ah3pRABwVJWklWCr/BTZSv0xnQ==}
+  tsconfck@3.1.5:
+    resolution: {integrity: sha512-CLDfGgUp7XPswWnezWwsCRxNmgQjhYq3VXHM0/XIRxhVrKw0M1if9agzryh1QS3nxjCROvV+xWxoJO1YctzzWg==}
     engines: {node: ^18 || >=20}
     hasBin: true
     peerDependencies:
@@ -6669,9 +6916,6 @@ packages:
   tslib@2.6.3:
     resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==}
 
-  tunnel-agent@0.6.0:
-    resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
-
   turbo-darwin-64@2.2.3:
     resolution: {integrity: sha512-Rcm10CuMKQGcdIBS3R/9PMeuYnv6beYIHqfZFeKWVYEWH69sauj4INs83zKMTUiZJ3/hWGZ4jet9AOwhsssLyg==}
     cpu: [x64]
@@ -6726,10 +6970,6 @@ packages:
     resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==}
     engines: {node: '>=8'}
 
-  type-fest@2.19.0:
-    resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
-    engines: {node: '>=12.20'}
-
   type-fest@4.30.0:
     resolution: {integrity: sha512-G6zXWS1dLj6eagy6sVhOMQiLtJdxQBHIA9Z6HFUNLOlr6MFOgzV8wvmidtPONfPtEUv0uZsy77XJNzTAfwPDaA==}
     engines: {node: '>=16'}
@@ -6761,6 +7001,11 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  typescript@5.8.2:
+    resolution: {integrity: sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
   uc.micro@1.0.6:
     resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
 
@@ -6898,6 +7143,65 @@ packages:
       ioredis:
         optional: true
 
+  unstorage@1.15.0:
+    resolution: {integrity: sha512-m40eHdGY/gA6xAPqo8eaxqXgBuzQTlAKfmB1iF7oCKXE1HfwHwzDJBywK+qQGn52dta+bPlZluPF7++yR3p/bg==}
+    peerDependencies:
+      '@azure/app-configuration': ^1.8.0
+      '@azure/cosmos': ^4.2.0
+      '@azure/data-tables': ^13.3.0
+      '@azure/identity': ^4.6.0
+      '@azure/keyvault-secrets': ^4.9.0
+      '@azure/storage-blob': ^12.26.0
+      '@capacitor/preferences': ^6.0.3
+      '@deno/kv': '>=0.9.0'
+      '@netlify/blobs': ^6.5.0 || ^7.0.0 || ^8.1.0
+      '@planetscale/database': ^1.19.0
+      '@upstash/redis': ^1.34.3
+      '@vercel/blob': '>=0.27.1'
+      '@vercel/kv': ^1.0.1
+      aws4fetch: ^1.0.20
+      db0: '>=0.2.1'
+      idb-keyval: ^6.2.1
+      ioredis: ^5.4.2
+      uploadthing: ^7.4.4
+    peerDependenciesMeta:
+      '@azure/app-configuration':
+        optional: true
+      '@azure/cosmos':
+        optional: true
+      '@azure/data-tables':
+        optional: true
+      '@azure/identity':
+        optional: true
+      '@azure/keyvault-secrets':
+        optional: true
+      '@azure/storage-blob':
+        optional: true
+      '@capacitor/preferences':
+        optional: true
+      '@deno/kv':
+        optional: true
+      '@netlify/blobs':
+        optional: true
+      '@planetscale/database':
+        optional: true
+      '@upstash/redis':
+        optional: true
+      '@vercel/blob':
+        optional: true
+      '@vercel/kv':
+        optional: true
+      aws4fetch:
+        optional: true
+      db0:
+        optional: true
+      idb-keyval:
+        optional: true
+      ioredis:
+        optional: true
+      uploadthing:
+        optional: true
+
   untun@0.1.3:
     resolution: {integrity: sha512-4luGP9LMYszMRZwsvyUd9MrxgEGZdZuZgpVQHEEX0lCYFESasVRvZd0EYpCkOIbJKHMuv0LskpXc/8Un+MJzEQ==}
     hasBin: true
@@ -6924,6 +7228,10 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  url-template@3.1.1:
+    resolution: {integrity: sha512-4oszoaEKE/mQOtAmdMWqIRHmkxWkUZMnXFnjQ5i01CuRSK3uluxcH1MRVVVWmhlnzT1SCDfKxxficm2G37qzCA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   urlpattern-polyfill@8.0.2:
     resolution: {integrity: sha512-Qp95D4TPJl1kC9SKigDcqgyM2VDVO4RiJc2d4qe5GrYm+zbIQCWWKAFaJNQ4BhdFeDGwBmAxqJBwWSJDb9T3BQ==}
 
@@ -7065,40 +7373,80 @@ packages:
       terser:
         optional: true
 
-  vitefu@1.0.2:
-    resolution: {integrity: sha512-0/iAvbXyM3RiPPJ4lyD4w6Mjgtf4ejTK6TPvTNG3H32PLwuT0N/ZjJLiXug7ETE/LWtTeHw9WRv7uX/tIKYyKg==}
+  vite@6.2.0:
+    resolution: {integrity: sha512-7dPxoo+WsT/64rDcwoOjk76XHj+TqNTIvHKcuMQ1k4/SeHDaQt5GFAeLYzrimZrMpn/O6DtdI03WUjdxuPM0oQ==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
     peerDependencies:
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      jiti: '>=1.21.0'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vitefu@1.0.6:
+    resolution: {integrity: sha512-+Rex1GlappUyNN6UfwbVZne/9cYC4+R2XDk9xkNXBKMw6HQagdX9PgZ8V2v1WUSK1wfBLp7qbI1+XSNIlB1xmA==}
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
     peerDependenciesMeta:
       vite:
         optional: true
 
-  volar-service-css@0.0.61:
-    resolution: {integrity: sha512-Ct9L/w+IB1JU8F4jofcNCGoHy6TF83aiapfZq9A0qYYpq+Kk5dH+ONS+rVZSsuhsunq8UvAuF8Gk6B8IFLfniw==}
+  volar-service-css@0.0.62:
+    resolution: {integrity: sha512-JwNyKsH3F8PuzZYuqPf+2e+4CTU8YoyUHEHVnoXNlrLe7wy9U3biomZ56llN69Ris7TTy/+DEX41yVxQpM4qvg==}
     peerDependencies:
       '@volar/language-service': ~2.4.0
     peerDependenciesMeta:
       '@volar/language-service':
         optional: true
 
-  volar-service-emmet@0.0.61:
-    resolution: {integrity: sha512-iiYqBxjjcekqrRruw4COQHZME6EZYWVbkHjHDbULpml3g8HGJHzpAMkj9tXNCPxf36A+f1oUYjsvZt36qPg4cg==}
+  volar-service-emmet@0.0.62:
+    resolution: {integrity: sha512-U4dxWDBWz7Pi4plpbXf4J4Z/ss6kBO3TYrACxWNsE29abu75QzVS0paxDDhI6bhqpbDFXlpsDhZ9aXVFpnfGRQ==}
     peerDependencies:
       '@volar/language-service': ~2.4.0
     peerDependenciesMeta:
       '@volar/language-service':
         optional: true
 
-  volar-service-html@0.0.61:
-    resolution: {integrity: sha512-yFE+YmmgqIL5HI4ORqP++IYb1QaGcv+xBboI0WkCxJJ/M35HZj7f5rbT3eQ24ECLXFbFCFanckwyWJVz5KmN3Q==}
+  volar-service-html@0.0.62:
+    resolution: {integrity: sha512-Zw01aJsZRh4GTGUjveyfEzEqpULQUdQH79KNEiKVYHZyuGtdBRYCHlrus1sueSNMxwwkuF5WnOHfvBzafs8yyQ==}
     peerDependencies:
       '@volar/language-service': ~2.4.0
     peerDependenciesMeta:
       '@volar/language-service':
         optional: true
 
-  volar-service-prettier@0.0.61:
-    resolution: {integrity: sha512-F612nql5I0IS8HxXemCGvOR2Uxd4XooIwqYVUvk7WSBxP/+xu1jYvE3QJ7EVpl8Ty3S4SxPXYiYTsG3bi+gzIQ==}
+  volar-service-prettier@0.0.62:
+    resolution: {integrity: sha512-h2yk1RqRTE+vkYZaI9KYuwpDfOQRrTEMvoHol0yW4GFKc75wWQRrb5n/5abDrzMPrkQbSip8JH2AXbvrRtYh4w==}
     peerDependencies:
       '@volar/language-service': ~2.4.0
       prettier: ^2.2 || ^3.0
@@ -7108,24 +7456,24 @@ packages:
       prettier:
         optional: true
 
-  volar-service-typescript-twoslash-queries@0.0.61:
-    resolution: {integrity: sha512-99FICGrEF0r1E2tV+SvprHPw9Knyg7BdW2fUch0tf59kG+KG+Tj4tL6tUg+cy8f23O/VXlmsWFMIE+bx1dXPnQ==}
+  volar-service-typescript-twoslash-queries@0.0.62:
+    resolution: {integrity: sha512-KxFt4zydyJYYI0kFAcWPTh4u0Ha36TASPZkAnNY784GtgajerUqM80nX/W1d0wVhmcOFfAxkVsf/Ed+tiYU7ng==}
     peerDependencies:
       '@volar/language-service': ~2.4.0
     peerDependenciesMeta:
       '@volar/language-service':
         optional: true
 
-  volar-service-typescript@0.0.61:
-    resolution: {integrity: sha512-4kRHxVbW7wFBHZWRU6yWxTgiKETBDIJNwmJUAWeP0mHaKpnDGj/astdRFKqGFRYVeEYl45lcUPhdJyrzanjsdQ==}
+  volar-service-typescript@0.0.62:
+    resolution: {integrity: sha512-p7MPi71q7KOsH0eAbZwPBiKPp9B2+qrdHAd6VY5oTo9BUXatsOAdakTm9Yf0DUj6uWBAaOT01BSeVOPwucMV1g==}
     peerDependencies:
       '@volar/language-service': ~2.4.0
     peerDependenciesMeta:
       '@volar/language-service':
         optional: true
 
-  volar-service-yaml@0.0.61:
-    resolution: {integrity: sha512-L+gbDiLDQQ1rZUbJ3mf3doDsoQUa8OZM/xdpk/unMg1Vz24Zmi2Ign8GrZyBD7bRoIQDwOH9gdktGDKzRPpUNw==}
+  volar-service-yaml@0.0.62:
+    resolution: {integrity: sha512-k7gvv7sk3wa+nGll3MaSKyjwQsJjIGCHFjVkl3wjaSP2nouKyn9aokGmqjrl39mi88Oy49giog2GkZH526wjig==}
     peerDependencies:
       '@volar/language-service': ~2.4.0
     peerDependenciesMeta:
@@ -7321,8 +7669,8 @@ packages:
     resolution: {integrity: sha512-n1brCuqClxfFfq/Rb0ICg9giSZqCS+pLtccdag6C2HyufBrh3fBOiy9nb6ggRMvWOVH5GrdJskj5iGTZNxd7SA==}
     engines: {node: '>=4'}
 
-  which-pm@3.0.0:
-    resolution: {integrity: sha512-ysVYmw6+ZBhx3+ZkcPwRuJi38ZOTLJJ33PSHaitLxSKUMsh0LkKd0nC69zZCwt5D+AYUcMK2hhw4yWny20vSGg==}
+  which-pm@3.0.1:
+    resolution: {integrity: sha512-v2JrMq0waAI4ju1xU5x3blsxBBMgdgZve580iYMN5frDaLGjbA24fok7wKCsya8KLVO19Ju4XDc5+zTZCJkQfg==}
     engines: {node: '>=18.12'}
 
   which-typed-array@1.1.15:
@@ -7342,9 +7690,9 @@ packages:
   wide-align@1.1.5:
     resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==}
 
-  widest-line@4.0.1:
-    resolution: {integrity: sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==}
-    engines: {node: '>=12'}
+  widest-line@5.0.0:
+    resolution: {integrity: sha512-c9bZp7b5YtRj2wOe6dlj32MK+Bx/M/d+9VB2SHM1OtsUHR0aV0tdP6DWh/iMt0kWi1t5g1Iudu6hQRNd1A4PVA==}
+    engines: {node: '>=18'}
 
   word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
@@ -7358,6 +7706,10 @@ packages:
     resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
     engines: {node: '>=12'}
 
+  wrap-ansi@9.0.0:
+    resolution: {integrity: sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==}
+    engines: {node: '>=18'}
+
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
@@ -7382,8 +7734,8 @@ packages:
     engines: {node: '>= 0.10.0'}
     hasBin: true
 
-  xxhash-wasm@1.0.2:
-    resolution: {integrity: sha512-ibF0Or+FivM9lNrg+HGJfVX8WJqgo+kCLDc4vx6xMeTce7Aj+DLttKbxxRR/gNLSAelRc1omAPlJ77N/Jem07A==}
+  xxhash-wasm@1.1.0:
+    resolution: {integrity: sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA==}
 
   y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
@@ -7427,6 +7779,14 @@ packages:
     resolution: {integrity: sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==}
     engines: {node: '>=12.20'}
 
+  yocto-spinner@0.2.1:
+    resolution: {integrity: sha512-lHHxjh0bXaLgdJy3cNnVb/F9myx3CkhrvSOEVTkaUgNMXnYFa2xYPVhtGnqhh3jErY2gParBOHallCbc7NrlZQ==}
+    engines: {node: '>=18.19'}
+
+  yoctocolors@2.1.1:
+    resolution: {integrity: sha512-GQHQqAopRhwU8Kt1DDM8NjibDXHC8eoh1erhGAJPEyveY9qqVeXvVikNKrDz69sHowPMorbPUrH/mx8c50eiBQ==}
+    engines: {node: '>=18'}
+
   zhead@2.2.4:
     resolution: {integrity: sha512-8F0OI5dpWIA5IGG5NHUg9staDwz/ZPxZtvGVf01j7vHqSyZ0raHY+78atOVxRqb73AotX22uV1pXt3gYSstGag==}
 
@@ -7434,10 +7794,10 @@ packages:
     resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
     engines: {node: '>= 14'}
 
-  zod-to-json-schema@3.23.2:
-    resolution: {integrity: sha512-uSt90Gzc/tUfyNqxnjlfBs8W6WSGpNBv0rVsNxP/BVSMHMKGdthPYff4xtCHYloJGM0CFxFsb3NbC0eqPhfImw==}
+  zod-to-json-schema@3.24.3:
+    resolution: {integrity: sha512-HIAfWdYIt1sssHfYZFCXp4rU1w2r8hVVXYIlmoa0r0gABLs5di3RCqPU5DDROogVz1pAdYBaz7HK5n9pSUNs3A==}
     peerDependencies:
-      zod: ^3.23.3
+      zod: ^3.24.1
 
   zod-to-ts@1.2.0:
     resolution: {integrity: sha512-x30XE43V+InwGpvTySRNz9kB7qFU8DlyEy7BsSTCHPH1R0QasMmHWZDCzYm6bVXtj/9NNJAZF3jW8rzFvH5OFA==}
@@ -7448,6 +7808,9 @@ packages:
   zod@3.23.8:
     resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
 
+  zod@3.24.2:
+    resolution: {integrity: sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ==}
+
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
@@ -7466,13 +7829,12 @@ snapshots:
 
   '@apidevtools/swagger-methods@3.0.2': {}
 
-  '@astrojs/check@0.9.3(prettier@3.3.2)(typescript@5.5.4)':
+  '@astrojs/check@0.9.4(prettier@3.3.2)(typescript@5.8.2)':
     dependencies:
-      '@astrojs/language-server': 2.14.1(prettier@3.3.2)(typescript@5.5.4)
-      chokidar: 3.6.0
-      fast-glob: 3.3.2
+      '@astrojs/language-server': 2.15.4(prettier@3.3.2)(typescript@5.8.2)
+      chokidar: 4.0.1
       kleur: 4.1.5
-      typescript: 5.5.4
+      typescript: 5.8.2
       yargs: 17.7.2
     transitivePeerDependencies:
       - prettier
@@ -7480,27 +7842,28 @@ snapshots:
 
   '@astrojs/compiler@2.10.3': {}
 
-  '@astrojs/internal-helpers@0.4.1': {}
+  '@astrojs/compiler@2.10.4': {}
 
-  '@astrojs/language-server@2.14.1(prettier@3.3.2)(typescript@5.5.4)':
+  '@astrojs/internal-helpers@0.6.0': {}
+
+  '@astrojs/language-server@2.15.4(prettier@3.3.2)(typescript@5.8.2)':
     dependencies:
       '@astrojs/compiler': 2.10.3
-      '@astrojs/yaml2ts': 0.2.1
+      '@astrojs/yaml2ts': 0.2.2
       '@jridgewell/sourcemap-codec': 1.5.0
-      '@volar/kit': 2.4.2(typescript@5.5.4)
-      '@volar/language-core': 2.4.4
-      '@volar/language-server': 2.4.2
-      '@volar/language-service': 2.4.2
-      '@volar/typescript': 2.4.4
+      '@volar/kit': 2.4.11(typescript@5.8.2)
+      '@volar/language-core': 2.4.11
+      '@volar/language-server': 2.4.11
+      '@volar/language-service': 2.4.11
       fast-glob: 3.3.2
       muggle-string: 0.4.1
-      volar-service-css: 0.0.61(@volar/language-service@2.4.2)
-      volar-service-emmet: 0.0.61(@volar/language-service@2.4.2)
-      volar-service-html: 0.0.61(@volar/language-service@2.4.2)
-      volar-service-prettier: 0.0.61(@volar/language-service@2.4.2)(prettier@3.3.2)
-      volar-service-typescript: 0.0.61(@volar/language-service@2.4.2)
-      volar-service-typescript-twoslash-queries: 0.0.61(@volar/language-service@2.4.2)
-      volar-service-yaml: 0.0.61(@volar/language-service@2.4.2)
+      volar-service-css: 0.0.62(@volar/language-service@2.4.11)
+      volar-service-emmet: 0.0.62(@volar/language-service@2.4.11)
+      volar-service-html: 0.0.62(@volar/language-service@2.4.11)
+      volar-service-prettier: 0.0.62(@volar/language-service@2.4.11)(prettier@3.3.2)
+      volar-service-typescript: 0.0.62(@volar/language-service@2.4.11)
+      volar-service-typescript-twoslash-queries: 0.0.62(@volar/language-service@2.4.11)
+      volar-service-yaml: 0.0.62(@volar/language-service@2.4.11)
       vscode-html-languageservice: 5.3.1
       vscode-uri: 3.0.8
     optionalDependencies:
@@ -7508,21 +7871,24 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
-  '@astrojs/markdown-remark@5.2.0':
+  '@astrojs/markdown-remark@6.2.0':
     dependencies:
-      '@astrojs/prism': 3.1.0
+      '@astrojs/internal-helpers': 0.6.0
+      '@astrojs/prism': 3.2.0
       github-slugger: 2.0.0
-      hast-util-from-html: 2.0.2
+      hast-util-from-html: 2.0.3
       hast-util-to-text: 4.0.2
       import-meta-resolve: 4.1.0
+      js-yaml: 4.1.0
       mdast-util-definitions: 6.0.0
       rehype-raw: 7.0.0
-      rehype-stringify: 10.0.0
+      rehype-stringify: 10.0.1
       remark-gfm: 4.0.0
       remark-parse: 11.0.0
-      remark-rehype: 11.1.0
+      remark-rehype: 11.1.1
       remark-smartypants: 3.0.2
-      shiki: 1.16.2
+      shiki: 1.29.2
+      smol-toml: 1.3.1
       unified: 11.0.5
       unist-util-remove-position: 5.0.0
       unist-util-visit: 5.0.0
@@ -7531,16 +7897,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/mdx@3.1.5(astro@4.15.3(@types/node@22.4.1)(rollup@4.28.1)(sass@1.77.6)(terser@5.31.6)(typescript@5.5.4))':
+  '@astrojs/mdx@4.1.0(astro@5.4.1(@types/node@22.4.1)(db0@0.2.1)(jiti@2.4.1)(rollup@4.34.9)(sass@1.77.6)(terser@5.31.6)(typescript@5.8.2)(yaml@2.6.1))':
     dependencies:
-      '@astrojs/markdown-remark': 5.2.0
-      '@mdx-js/mdx': 3.0.1
+      '@astrojs/markdown-remark': 6.2.0
+      '@mdx-js/mdx': 3.1.0(acorn@8.14.0)
       acorn: 8.14.0
-      astro: 4.15.3(@types/node@22.4.1)(rollup@4.28.1)(sass@1.77.6)(terser@5.31.6)(typescript@5.5.4)
-      es-module-lexer: 1.5.4
+      astro: 5.4.1(@types/node@22.4.1)(db0@0.2.1)(jiti@2.4.1)(rollup@4.34.9)(sass@1.77.6)(terser@5.31.6)(typescript@5.8.2)(yaml@2.6.1)
+      es-module-lexer: 1.6.0
       estree-util-visit: 2.0.0
-      gray-matter: 4.0.3
-      hast-util-to-html: 9.0.2
+      hast-util-to-html: 9.0.5
       kleur: 4.1.5
       rehype-raw: 7.0.0
       remark-gfm: 4.0.0
@@ -7551,34 +7916,38 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/prism@3.1.0':
+  '@astrojs/prism@3.2.0':
     dependencies:
       prismjs: 1.29.0
 
-  '@astrojs/sitemap@3.1.6':
+  '@astrojs/sitemap@3.2.1':
     dependencies:
-      sitemap: 7.1.2
+      sitemap: 8.0.0
       stream-replace-string: 2.0.0
       zod: 3.23.8
 
-  '@astrojs/starlight@0.26.3(astro@4.15.3(@types/node@22.4.1)(rollup@4.28.1)(sass@1.77.6)(terser@5.31.6)(typescript@5.5.4))':
+  '@astrojs/starlight@0.32.2(astro@5.4.1(@types/node@22.4.1)(db0@0.2.1)(jiti@2.4.1)(rollup@4.34.9)(sass@1.77.6)(terser@5.31.6)(typescript@5.8.2)(yaml@2.6.1))':
     dependencies:
-      '@astrojs/mdx': 3.1.5(astro@4.15.3(@types/node@22.4.1)(rollup@4.28.1)(sass@1.77.6)(terser@5.31.6)(typescript@5.5.4))
-      '@astrojs/sitemap': 3.1.6
-      '@pagefind/default-ui': 1.1.1
+      '@astrojs/mdx': 4.1.0(astro@5.4.1(@types/node@22.4.1)(db0@0.2.1)(jiti@2.4.1)(rollup@4.34.9)(sass@1.77.6)(terser@5.31.6)(typescript@5.8.2)(yaml@2.6.1))
+      '@astrojs/sitemap': 3.2.1
+      '@pagefind/default-ui': 1.3.0
       '@types/hast': 3.0.4
+      '@types/js-yaml': 4.0.9
       '@types/mdast': 4.0.4
-      astro: 4.15.3(@types/node@22.4.1)(rollup@4.28.1)(sass@1.77.6)(terser@5.31.6)(typescript@5.5.4)
-      astro-expressive-code: 0.35.6(astro@4.15.3(@types/node@22.4.1)(rollup@4.28.1)(sass@1.77.6)(terser@5.31.6)(typescript@5.5.4))
+      astro: 5.4.1(@types/node@22.4.1)(db0@0.2.1)(jiti@2.4.1)(rollup@4.34.9)(sass@1.77.6)(terser@5.31.6)(typescript@5.8.2)(yaml@2.6.1)
+      astro-expressive-code: 0.40.2(astro@5.4.1(@types/node@22.4.1)(db0@0.2.1)(jiti@2.4.1)(rollup@4.34.9)(sass@1.77.6)(terser@5.31.6)(typescript@5.8.2)(yaml@2.6.1))
       bcp-47: 2.1.0
       hast-util-from-html: 2.0.2
       hast-util-select: 6.0.2
       hast-util-to-string: 3.0.0
       hastscript: 9.0.0
+      i18next: 23.16.8
+      js-yaml: 4.1.0
+      klona: 2.0.6
       mdast-util-directive: 3.0.0
       mdast-util-to-markdown: 2.1.0
       mdast-util-to-string: 4.0.0
-      pagefind: 1.1.1
+      pagefind: 1.3.0
       rehype: 13.0.1
       rehype-format: 5.0.0
       remark-directive: 3.0.0
@@ -7588,19 +7957,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/telemetry@3.1.0':
+  '@astrojs/telemetry@3.2.0':
     dependencies:
-      ci-info: 4.0.0
+      ci-info: 4.1.0
       debug: 4.4.0(supports-color@9.4.0)
       dlv: 1.1.3
-      dset: 3.1.3
+      dset: 3.1.4
       is-docker: 3.0.0
       is-wsl: 3.1.0
       which-pm-runs: 1.1.0
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/yaml2ts@0.2.1':
+  '@astrojs/yaml2ts@0.2.2':
     dependencies:
       yaml: 2.6.1
 
@@ -7759,17 +8128,6 @@ snapshots:
       '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-react-jsx@7.25.2(@babel/core@7.26.0)':
-    dependencies:
-      '@babel/core': 7.26.0
-      '@babel/helper-annotate-as-pure': 7.25.9
-      '@babel/helper-module-imports': 7.25.9
-      '@babel/helper-plugin-utils': 7.25.9
-      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.26.0)
-      '@babel/types': 7.26.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/plugin-transform-typescript@7.26.3(@babel/core@7.26.0)':
     dependencies:
       '@babel/core': 7.26.0
@@ -7939,6 +8297,9 @@ snapshots:
   '@esbuild/aix-ppc64@0.24.0':
     optional: true
 
+  '@esbuild/aix-ppc64@0.25.0':
+    optional: true
+
   '@esbuild/android-arm64@0.18.20':
     optional: true
 
@@ -7948,6 +8309,9 @@ snapshots:
   '@esbuild/android-arm64@0.24.0':
     optional: true
 
+  '@esbuild/android-arm64@0.25.0':
+    optional: true
+
   '@esbuild/android-arm@0.18.20':
     optional: true
 
@@ -7957,6 +8321,9 @@ snapshots:
   '@esbuild/android-arm@0.24.0':
     optional: true
 
+  '@esbuild/android-arm@0.25.0':
+    optional: true
+
   '@esbuild/android-x64@0.18.20':
     optional: true
 
@@ -7966,6 +8333,9 @@ snapshots:
   '@esbuild/android-x64@0.24.0':
     optional: true
 
+  '@esbuild/android-x64@0.25.0':
+    optional: true
+
   '@esbuild/darwin-arm64@0.18.20':
     optional: true
 
@@ -7975,6 +8345,9 @@ snapshots:
   '@esbuild/darwin-arm64@0.24.0':
     optional: true
 
+  '@esbuild/darwin-arm64@0.25.0':
+    optional: true
+
   '@esbuild/darwin-x64@0.18.20':
     optional: true
 
@@ -7984,6 +8357,9 @@ snapshots:
   '@esbuild/darwin-x64@0.24.0':
     optional: true
 
+  '@esbuild/darwin-x64@0.25.0':
+    optional: true
+
   '@esbuild/freebsd-arm64@0.18.20':
     optional: true
 
@@ -7993,6 +8369,9 @@ snapshots:
   '@esbuild/freebsd-arm64@0.24.0':
     optional: true
 
+  '@esbuild/freebsd-arm64@0.25.0':
+    optional: true
+
   '@esbuild/freebsd-x64@0.18.20':
     optional: true
 
@@ -8002,6 +8381,9 @@ snapshots:
   '@esbuild/freebsd-x64@0.24.0':
     optional: true
 
+  '@esbuild/freebsd-x64@0.25.0':
+    optional: true
+
   '@esbuild/linux-arm64@0.18.20':
     optional: true
 
@@ -8011,6 +8393,9 @@ snapshots:
   '@esbuild/linux-arm64@0.24.0':
     optional: true
 
+  '@esbuild/linux-arm64@0.25.0':
+    optional: true
+
   '@esbuild/linux-arm@0.18.20':
     optional: true
 
@@ -8020,6 +8405,9 @@ snapshots:
   '@esbuild/linux-arm@0.24.0':
     optional: true
 
+  '@esbuild/linux-arm@0.25.0':
+    optional: true
+
   '@esbuild/linux-ia32@0.18.20':
     optional: true
 
@@ -8029,6 +8417,9 @@ snapshots:
   '@esbuild/linux-ia32@0.24.0':
     optional: true
 
+  '@esbuild/linux-ia32@0.25.0':
+    optional: true
+
   '@esbuild/linux-loong64@0.18.20':
     optional: true
 
@@ -8038,6 +8429,9 @@ snapshots:
   '@esbuild/linux-loong64@0.24.0':
     optional: true
 
+  '@esbuild/linux-loong64@0.25.0':
+    optional: true
+
   '@esbuild/linux-mips64el@0.18.20':
     optional: true
 
@@ -8047,6 +8441,9 @@ snapshots:
   '@esbuild/linux-mips64el@0.24.0':
     optional: true
 
+  '@esbuild/linux-mips64el@0.25.0':
+    optional: true
+
   '@esbuild/linux-ppc64@0.18.20':
     optional: true
 
@@ -8056,6 +8453,9 @@ snapshots:
   '@esbuild/linux-ppc64@0.24.0':
     optional: true
 
+  '@esbuild/linux-ppc64@0.25.0':
+    optional: true
+
   '@esbuild/linux-riscv64@0.18.20':
     optional: true
 
@@ -8065,6 +8465,9 @@ snapshots:
   '@esbuild/linux-riscv64@0.24.0':
     optional: true
 
+  '@esbuild/linux-riscv64@0.25.0':
+    optional: true
+
   '@esbuild/linux-s390x@0.18.20':
     optional: true
 
@@ -8074,6 +8477,9 @@ snapshots:
   '@esbuild/linux-s390x@0.24.0':
     optional: true
 
+  '@esbuild/linux-s390x@0.25.0':
+    optional: true
+
   '@esbuild/linux-x64@0.18.20':
     optional: true
 
@@ -8083,6 +8489,12 @@ snapshots:
   '@esbuild/linux-x64@0.24.0':
     optional: true
 
+  '@esbuild/linux-x64@0.25.0':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.25.0':
+    optional: true
+
   '@esbuild/netbsd-x64@0.18.20':
     optional: true
 
@@ -8092,9 +8504,15 @@ snapshots:
   '@esbuild/netbsd-x64@0.24.0':
     optional: true
 
+  '@esbuild/netbsd-x64@0.25.0':
+    optional: true
+
   '@esbuild/openbsd-arm64@0.24.0':
     optional: true
 
+  '@esbuild/openbsd-arm64@0.25.0':
+    optional: true
+
   '@esbuild/openbsd-x64@0.18.20':
     optional: true
 
@@ -8104,6 +8522,9 @@ snapshots:
   '@esbuild/openbsd-x64@0.24.0':
     optional: true
 
+  '@esbuild/openbsd-x64@0.25.0':
+    optional: true
+
   '@esbuild/sunos-x64@0.18.20':
     optional: true
 
@@ -8113,6 +8534,9 @@ snapshots:
   '@esbuild/sunos-x64@0.24.0':
     optional: true
 
+  '@esbuild/sunos-x64@0.25.0':
+    optional: true
+
   '@esbuild/win32-arm64@0.18.20':
     optional: true
 
@@ -8122,6 +8546,9 @@ snapshots:
   '@esbuild/win32-arm64@0.24.0':
     optional: true
 
+  '@esbuild/win32-arm64@0.25.0':
+    optional: true
+
   '@esbuild/win32-ia32@0.18.20':
     optional: true
 
@@ -8131,6 +8558,9 @@ snapshots:
   '@esbuild/win32-ia32@0.24.0':
     optional: true
 
+  '@esbuild/win32-ia32@0.25.0':
+    optional: true
+
   '@esbuild/win32-x64@0.18.20':
     optional: true
 
@@ -8140,6 +8570,9 @@ snapshots:
   '@esbuild/win32-x64@0.24.0':
     optional: true
 
+  '@esbuild/win32-x64@0.25.0':
+    optional: true
+
   '@eslint-community/eslint-utils@4.4.0(eslint@8.57.0)':
     dependencies:
       eslint: 8.57.0
@@ -8204,7 +8637,7 @@ snapshots:
     dependencies:
       levn: 0.4.1
 
-  '@expressive-code/core@0.35.6':
+  '@expressive-code/core@0.40.2':
     dependencies:
       '@ctrl/tinycolor': 4.1.0
       hast-util-select: 6.0.2
@@ -8216,18 +8649,18 @@ snapshots:
       unist-util-visit: 5.0.0
       unist-util-visit-parents: 6.0.1
 
-  '@expressive-code/plugin-frames@0.35.6':
+  '@expressive-code/plugin-frames@0.40.2':
     dependencies:
-      '@expressive-code/core': 0.35.6
+      '@expressive-code/core': 0.40.2
 
-  '@expressive-code/plugin-shiki@0.35.6':
+  '@expressive-code/plugin-shiki@0.40.2':
     dependencies:
-      '@expressive-code/core': 0.35.6
-      shiki: 1.16.2
+      '@expressive-code/core': 0.40.2
+      shiki: 1.29.2
 
-  '@expressive-code/plugin-text-markers@0.35.6':
+  '@expressive-code/plugin-text-markers@0.40.2':
     dependencies:
-      '@expressive-code/core': 0.35.6
+      '@expressive-code/core': 0.40.2
 
   '@floating-ui/core@1.6.4':
     dependencies:
@@ -8254,7 +8687,7 @@ snapshots:
       json-stable-stringify: 1.1.1
       loud-rejection: 2.2.0
       tslib: 2.6.3
-      typescript: 5.5.4
+      typescript: 5.8.2
     optionalDependencies:
       '@vue/compiler-core': 3.5.13
       vue: 3.5.13(typescript@5.5.4)
@@ -8331,7 +8764,7 @@ snapshots:
       chalk: 4.1.2
       json-stable-stringify: 1.1.1
       tslib: 2.6.3
-      typescript: 5.5.4
+      typescript: 5.8.2
 
   '@humanfs/core@0.19.0': {}
 
@@ -8520,13 +8953,13 @@ snapshots:
       nopt: 5.0.0
       npmlog: 5.0.1
       rimraf: 3.0.2
-      semver: 7.6.3
+      semver: 7.7.1
       tar: 6.2.1
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@mdx-js/mdx@3.0.1':
+  '@mdx-js/mdx@3.1.0(acorn@8.14.0)':
     dependencies:
       '@types/estree': 1.0.6
       '@types/estree-jsx': 1.0.5
@@ -8534,14 +8967,15 @@ snapshots:
       '@types/mdx': 2.0.13
       collapse-white-space: 2.1.0
       devlop: 1.1.0
-      estree-util-build-jsx: 3.0.1
       estree-util-is-identifier-name: 3.0.0
-      estree-util-to-js: 2.0.0
+      estree-util-scope: 1.0.0
       estree-walker: 3.0.3
-      hast-util-to-estree: 3.1.0
       hast-util-to-jsx-runtime: 2.3.0
       markdown-extensions: 2.0.0
-      periscopic: 3.1.0
+      recma-build-jsx: 1.0.0
+      recma-jsx: 1.0.0(acorn@8.14.0)
+      recma-stringify: 1.0.0
+      rehype-recma: 1.0.0
       remark-mdx: 3.0.1
       remark-parse: 11.0.0
       remark-rehype: 11.1.0
@@ -8552,6 +8986,7 @@ snapshots:
       unist-util-visit: 5.0.0
       vfile: 6.0.3
     transitivePeerDependencies:
+      - acorn
       - supports-color
 
   '@netlify/functions@2.8.2':
@@ -8601,7 +9036,7 @@ snapshots:
       pkg-types: 1.2.1
       prompts: 2.4.2
       rc9: 2.1.2
-      semver: 7.6.3
+      semver: 7.7.1
 
   '@nuxt/devtools@1.6.3(rollup@4.28.1)(vite@5.4.11(@types/node@20.14.11)(sass@1.77.6)(terser@5.31.6))(vue@3.5.13(typescript@5.5.4))':
     dependencies:
@@ -8699,7 +9134,7 @@ snapshots:
       pathe: 1.1.2
       pkg-types: 1.2.1
       scule: 1.3.0
-      semver: 7.6.3
+      semver: 7.7.1
       ufo: 1.5.4
       unctx: 2.3.1
       unimport: 3.14.4
@@ -8727,7 +9162,7 @@ snapshots:
       pathe: 1.1.2
       pkg-types: 1.2.1
       scule: 1.3.0
-      semver: 7.6.3
+      semver: 7.7.1
       ufo: 1.5.4
       unctx: 2.3.1
       unimport: 3.14.4(rollup@3.29.4)
@@ -8755,7 +9190,7 @@ snapshots:
       pathe: 1.1.2
       pkg-types: 1.2.1
       scule: 1.3.0
-      semver: 7.6.3
+      semver: 7.7.1
       ufo: 1.5.4
       unctx: 2.3.1
       unimport: 3.14.4(rollup@4.28.1)
@@ -8943,23 +9378,23 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  '@oslojs/encoding@0.4.1': {}
+  '@oslojs/encoding@1.1.0': {}
 
-  '@pagefind/darwin-arm64@1.1.1':
+  '@pagefind/darwin-arm64@1.3.0':
     optional: true
 
-  '@pagefind/darwin-x64@1.1.1':
+  '@pagefind/darwin-x64@1.3.0':
     optional: true
 
-  '@pagefind/default-ui@1.1.1': {}
+  '@pagefind/default-ui@1.3.0': {}
 
-  '@pagefind/linux-arm64@1.1.1':
+  '@pagefind/linux-arm64@1.3.0':
     optional: true
 
-  '@pagefind/linux-x64@1.1.1':
+  '@pagefind/linux-x64@1.3.0':
     optional: true
 
-  '@pagefind/windows-x64@1.1.1':
+  '@pagefind/windows-x64@1.3.0':
     optional: true
 
   '@parcel/watcher-android-arm64@2.4.1':
@@ -9169,63 +9604,128 @@ snapshots:
     optionalDependencies:
       rollup: 4.28.1
 
+  '@rollup/pluginutils@5.1.4(rollup@4.34.9)':
+    dependencies:
+      '@types/estree': 1.0.6
+      estree-walker: 2.0.2
+      picomatch: 4.0.2
+    optionalDependencies:
+      rollup: 4.34.9
+
   '@rollup/rollup-android-arm-eabi@4.28.1':
     optional: true
 
+  '@rollup/rollup-android-arm-eabi@4.34.9':
+    optional: true
+
   '@rollup/rollup-android-arm64@4.28.1':
     optional: true
 
+  '@rollup/rollup-android-arm64@4.34.9':
+    optional: true
+
   '@rollup/rollup-darwin-arm64@4.28.1':
     optional: true
 
+  '@rollup/rollup-darwin-arm64@4.34.9':
+    optional: true
+
   '@rollup/rollup-darwin-x64@4.28.1':
     optional: true
 
+  '@rollup/rollup-darwin-x64@4.34.9':
+    optional: true
+
   '@rollup/rollup-freebsd-arm64@4.28.1':
     optional: true
 
+  '@rollup/rollup-freebsd-arm64@4.34.9':
+    optional: true
+
   '@rollup/rollup-freebsd-x64@4.28.1':
     optional: true
 
+  '@rollup/rollup-freebsd-x64@4.34.9':
+    optional: true
+
   '@rollup/rollup-linux-arm-gnueabihf@4.28.1':
     optional: true
 
+  '@rollup/rollup-linux-arm-gnueabihf@4.34.9':
+    optional: true
+
   '@rollup/rollup-linux-arm-musleabihf@4.28.1':
     optional: true
 
+  '@rollup/rollup-linux-arm-musleabihf@4.34.9':
+    optional: true
+
   '@rollup/rollup-linux-arm64-gnu@4.28.1':
     optional: true
 
+  '@rollup/rollup-linux-arm64-gnu@4.34.9':
+    optional: true
+
   '@rollup/rollup-linux-arm64-musl@4.28.1':
     optional: true
 
+  '@rollup/rollup-linux-arm64-musl@4.34.9':
+    optional: true
+
   '@rollup/rollup-linux-loongarch64-gnu@4.28.1':
     optional: true
 
+  '@rollup/rollup-linux-loongarch64-gnu@4.34.9':
+    optional: true
+
   '@rollup/rollup-linux-powerpc64le-gnu@4.28.1':
     optional: true
 
+  '@rollup/rollup-linux-powerpc64le-gnu@4.34.9':
+    optional: true
+
   '@rollup/rollup-linux-riscv64-gnu@4.28.1':
     optional: true
 
+  '@rollup/rollup-linux-riscv64-gnu@4.34.9':
+    optional: true
+
   '@rollup/rollup-linux-s390x-gnu@4.28.1':
     optional: true
 
+  '@rollup/rollup-linux-s390x-gnu@4.34.9':
+    optional: true
+
   '@rollup/rollup-linux-x64-gnu@4.28.1':
     optional: true
 
+  '@rollup/rollup-linux-x64-gnu@4.34.9':
+    optional: true
+
   '@rollup/rollup-linux-x64-musl@4.28.1':
     optional: true
 
+  '@rollup/rollup-linux-x64-musl@4.34.9':
+    optional: true
+
   '@rollup/rollup-win32-arm64-msvc@4.28.1':
     optional: true
 
+  '@rollup/rollup-win32-arm64-msvc@4.34.9':
+    optional: true
+
   '@rollup/rollup-win32-ia32-msvc@4.28.1':
     optional: true
 
+  '@rollup/rollup-win32-ia32-msvc@4.34.9':
+    optional: true
+
   '@rollup/rollup-win32-x64-msvc@4.28.1':
     optional: true
 
+  '@rollup/rollup-win32-x64-msvc@4.34.9':
+    optional: true
+
   '@sentry-internal/browser-utils@8.27.0':
     dependencies:
       '@sentry/core': 8.27.0
@@ -9281,12 +9781,40 @@ snapshots:
       '@sentry/utils': 8.27.0
       vue: 3.5.13(typescript@5.5.4)
 
-  '@shikijs/core@1.16.2':
+  '@shikijs/core@1.29.2':
     dependencies:
-      '@shikijs/vscode-textmate': 9.2.0
+      '@shikijs/engine-javascript': 1.29.2
+      '@shikijs/engine-oniguruma': 1.29.2
+      '@shikijs/types': 1.29.2
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/engine-javascript@1.29.2':
+    dependencies:
+      '@shikijs/types': 1.29.2
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 2.3.0
+
+  '@shikijs/engine-oniguruma@1.29.2':
+    dependencies:
+      '@shikijs/types': 1.29.2
+      '@shikijs/vscode-textmate': 10.0.2
+
+  '@shikijs/langs@1.29.2':
+    dependencies:
+      '@shikijs/types': 1.29.2
+
+  '@shikijs/themes@1.29.2':
+    dependencies:
+      '@shikijs/types': 1.29.2
+
+  '@shikijs/types@1.29.2':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
-  '@shikijs/vscode-textmate@9.2.0': {}
+  '@shikijs/vscode-textmate@10.0.2': {}
 
   '@sindresorhus/merge-streams@2.3.0': {}
 
@@ -9369,31 +9897,12 @@ snapshots:
 
   '@trysound/sax@0.2.0': {}
 
+  '@tweenjs/tween.js@23.1.3': {}
+
   '@types/acorn@4.0.6':
     dependencies:
       '@types/estree': 1.0.6
 
-  '@types/babel__core@7.20.5':
-    dependencies:
-      '@babel/parser': 7.26.3
-      '@babel/types': 7.26.3
-      '@types/babel__generator': 7.6.8
-      '@types/babel__template': 7.4.4
-      '@types/babel__traverse': 7.20.6
-
-  '@types/babel__generator@7.6.8':
-    dependencies:
-      '@babel/types': 7.26.3
-
-  '@types/babel__template@7.4.4':
-    dependencies:
-      '@babel/parser': 7.26.3
-      '@babel/types': 7.26.3
-
-  '@types/babel__traverse@7.20.6':
-    dependencies:
-      '@babel/types': 7.26.3
-
   '@types/cookie@0.6.0': {}
 
   '@types/debug@4.1.12':
@@ -9434,6 +9943,8 @@ snapshots:
     dependencies:
       '@types/node': 20.14.11
 
+  '@types/js-yaml@4.0.9': {}
+
   '@types/json-schema@7.0.15': {}
 
   '@types/json-stable-stringify@1.0.36': {}
@@ -9482,6 +9993,17 @@ snapshots:
 
   '@types/semver@7.5.8': {}
 
+  '@types/stats.js@0.17.3': {}
+
+  '@types/three@0.172.0':
+    dependencies:
+      '@tweenjs/tween.js': 23.1.3
+      '@types/stats.js': 0.17.3
+      '@types/webxr': 0.5.21
+      '@webgpu/types': 0.1.54
+      fflate: 0.8.2
+      meshoptimizer: 0.18.1
+
   '@types/trusted-types@2.0.7': {}
 
   '@types/unist@2.0.11': {}
@@ -9492,6 +10014,8 @@ snapshots:
 
   '@types/web-bluetooth@0.0.20': {}
 
+  '@types/webxr@0.5.21': {}
+
   '@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4))(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4)':
     dependencies:
       '@eslint-community/regexpp': 4.11.0
@@ -9505,7 +10029,7 @@ snapshots:
       graphemer: 1.4.0
       ignore: 5.3.1
       natural-compare: 1.4.0
-      semver: 7.6.3
+      semver: 7.7.1
       ts-api-utils: 1.3.0(typescript@5.5.4)
     optionalDependencies:
       typescript: 5.5.4
@@ -9652,7 +10176,7 @@ snapshots:
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.3
-      semver: 7.6.3
+      semver: 7.7.1
       ts-api-utils: 1.3.0(typescript@5.5.4)
     optionalDependencies:
       typescript: 5.5.4
@@ -9667,7 +10191,7 @@ snapshots:
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.6.3
+      semver: 7.7.1
       ts-api-utils: 1.3.0(typescript@5.5.4)
     optionalDependencies:
       typescript: 5.5.4
@@ -9682,7 +10206,7 @@ snapshots:
       fast-glob: 3.3.2
       is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.6.3
+      semver: 7.7.1
       ts-api-utils: 1.3.0(typescript@5.5.4)
     optionalDependencies:
       typescript: 5.5.4
@@ -9698,7 +10222,7 @@ snapshots:
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.5.4)
       eslint: 9.13.0(jiti@2.4.1)
-      semver: 7.6.3
+      semver: 7.7.1
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -9912,28 +10436,28 @@ snapshots:
       vite: 5.4.11(@types/node@22.4.1)(sass@1.77.6)(terser@5.31.6)
       vue: 3.5.13(typescript@5.5.4)
 
-  '@volar/kit@2.4.2(typescript@5.5.4)':
+  '@volar/kit@2.4.11(typescript@5.8.2)':
     dependencies:
-      '@volar/language-service': 2.4.2
-      '@volar/typescript': 2.4.2
+      '@volar/language-service': 2.4.11
+      '@volar/typescript': 2.4.11
       typesafe-path: 0.2.2
-      typescript: 5.5.4
+      typescript: 5.8.2
       vscode-languageserver-textdocument: 1.0.12
       vscode-uri: 3.0.8
 
-  '@volar/language-core@2.4.2':
+  '@volar/language-core@2.4.11':
     dependencies:
-      '@volar/source-map': 2.4.2
+      '@volar/source-map': 2.4.11
 
   '@volar/language-core@2.4.4':
     dependencies:
       '@volar/source-map': 2.4.4
 
-  '@volar/language-server@2.4.2':
+  '@volar/language-server@2.4.11':
     dependencies:
-      '@volar/language-core': 2.4.2
-      '@volar/language-service': 2.4.2
-      '@volar/typescript': 2.4.2
+      '@volar/language-core': 2.4.11
+      '@volar/language-service': 2.4.11
+      '@volar/typescript': 2.4.11
       path-browserify: 1.0.1
       request-light: 0.7.0
       vscode-languageserver: 9.0.1
@@ -9941,20 +10465,20 @@ snapshots:
       vscode-languageserver-textdocument: 1.0.12
       vscode-uri: 3.0.8
 
-  '@volar/language-service@2.4.2':
+  '@volar/language-service@2.4.11':
     dependencies:
-      '@volar/language-core': 2.4.2
+      '@volar/language-core': 2.4.11
       vscode-languageserver-protocol: 3.17.5
       vscode-languageserver-textdocument: 1.0.12
       vscode-uri: 3.0.8
 
-  '@volar/source-map@2.4.2': {}
+  '@volar/source-map@2.4.11': {}
 
   '@volar/source-map@2.4.4': {}
 
-  '@volar/typescript@2.4.2':
+  '@volar/typescript@2.4.11':
     dependencies:
-      '@volar/language-core': 2.4.2
+      '@volar/language-core': 2.4.11
       path-browserify: 1.0.1
       vscode-uri: 3.0.8
 
@@ -10127,6 +10651,12 @@ snapshots:
       '@vue/shared': 3.5.13
       vue: 3.5.13(typescript@5.5.4)
 
+  '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.8.2))':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.13
+      '@vue/shared': 3.5.13
+      vue: 3.5.13(typescript@5.8.2)
+
   '@vue/shared@3.5.13': {}
 
   '@vue/tsconfig@0.5.1': {}
@@ -10260,6 +10790,8 @@ snapshots:
       '@xtuc/long': 4.2.2
     optional: true
 
+  '@webgpu/types@0.1.54': {}
+
   '@xtuc/ieee754@1.2.0':
     optional: true
 
@@ -10395,9 +10927,7 @@ snapshots:
 
   argparse@2.0.1: {}
 
-  aria-query@5.3.0:
-    dependencies:
-      dequal: 2.0.3
+  aria-query@5.3.2: {}
 
   array-buffer-byte-length@1.0.1:
     dependencies:
@@ -10465,83 +10995,94 @@ snapshots:
 
   astring@1.8.6: {}
 
-  astro-expressive-code@0.35.6(astro@4.15.3(@types/node@22.4.1)(rollup@4.28.1)(sass@1.77.6)(terser@5.31.6)(typescript@5.5.4)):
+  astro-expressive-code@0.40.2(astro@5.4.1(@types/node@22.4.1)(db0@0.2.1)(jiti@2.4.1)(rollup@4.34.9)(sass@1.77.6)(terser@5.31.6)(typescript@5.8.2)(yaml@2.6.1)):
     dependencies:
-      astro: 4.15.3(@types/node@22.4.1)(rollup@4.28.1)(sass@1.77.6)(terser@5.31.6)(typescript@5.5.4)
-      rehype-expressive-code: 0.35.6
+      astro: 5.4.1(@types/node@22.4.1)(db0@0.2.1)(jiti@2.4.1)(rollup@4.34.9)(sass@1.77.6)(terser@5.31.6)(typescript@5.8.2)(yaml@2.6.1)
+      rehype-expressive-code: 0.40.2
 
-  astro@4.15.3(@types/node@22.4.1)(rollup@4.28.1)(sass@1.77.6)(terser@5.31.6)(typescript@5.5.4):
+  astro@5.4.1(@types/node@22.4.1)(db0@0.2.1)(jiti@2.4.1)(rollup@4.34.9)(sass@1.77.6)(terser@5.31.6)(typescript@5.8.2)(yaml@2.6.1):
     dependencies:
-      '@astrojs/compiler': 2.10.3
-      '@astrojs/internal-helpers': 0.4.1
-      '@astrojs/markdown-remark': 5.2.0
-      '@astrojs/telemetry': 3.1.0
-      '@babel/core': 7.26.0
-      '@babel/plugin-transform-react-jsx': 7.25.2(@babel/core@7.26.0)
-      '@babel/types': 7.26.3
-      '@oslojs/encoding': 0.4.1
-      '@rollup/pluginutils': 5.1.3(rollup@4.28.1)
-      '@types/babel__core': 7.20.5
+      '@astrojs/compiler': 2.10.4
+      '@astrojs/internal-helpers': 0.6.0
+      '@astrojs/markdown-remark': 6.2.0
+      '@astrojs/telemetry': 3.2.0
+      '@oslojs/encoding': 1.1.0
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.9)
       '@types/cookie': 0.6.0
       acorn: 8.14.0
-      aria-query: 5.3.0
+      aria-query: 5.3.2
       axobject-query: 4.1.0
-      boxen: 7.1.1
-      ci-info: 4.0.0
+      boxen: 8.0.1
+      ci-info: 4.1.0
       clsx: 2.1.1
       common-ancestor-path: 1.0.1
-      cookie: 0.6.0
+      cookie: 0.7.2
       cssesc: 3.0.0
       debug: 4.4.0(supports-color@9.4.0)
       deterministic-object-hash: 2.0.2
       devalue: 5.1.1
       diff: 5.2.0
       dlv: 1.1.3
-      dset: 3.1.3
-      es-module-lexer: 1.5.4
-      esbuild: 0.21.5
+      dset: 3.1.4
+      es-module-lexer: 1.6.0
+      esbuild: 0.25.0
       estree-walker: 3.0.3
-      fast-glob: 3.3.2
-      fastq: 1.17.1
       flattie: 1.1.1
       github-slugger: 2.0.0
-      gray-matter: 4.0.3
       html-escaper: 3.0.3
       http-cache-semantics: 4.1.1
       js-yaml: 4.1.0
       kleur: 4.1.5
-      magic-string: 0.30.14
+      magic-string: 0.30.17
       magicast: 0.3.5
-      micromatch: 4.0.8
       mrmime: 2.0.0
       neotraverse: 0.6.18
-      ora: 8.1.0
-      p-limit: 6.1.0
-      p-queue: 8.0.1
-      path-to-regexp: 6.2.2
-      preferred-pm: 4.0.0
+      p-limit: 6.2.0
+      p-queue: 8.1.0
+      picomatch: 4.0.2
+      preferred-pm: 4.1.1
       prompts: 2.4.2
-      rehype: 13.0.1
-      semver: 7.6.3
-      shiki: 1.16.2
-      string-width: 7.2.0
-      strip-ansi: 7.1.0
-      tinyexec: 0.3.1
-      tsconfck: 3.1.3(typescript@5.5.4)
+      rehype: 13.0.2
+      semver: 7.7.1
+      shiki: 1.29.2
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.12
+      tsconfck: 3.1.5(typescript@5.8.2)
+      ultrahtml: 1.5.3
       unist-util-visit: 5.0.0
+      unstorage: 1.15.0(db0@0.2.1)
       vfile: 6.0.3
-      vite: 5.4.11(@types/node@22.4.1)(sass@1.77.6)(terser@5.31.6)
-      vitefu: 1.0.2(vite@5.4.11(@types/node@22.4.1)(sass@1.77.6)(terser@5.31.6))
-      which-pm: 3.0.0
-      xxhash-wasm: 1.0.2
+      vite: 6.2.0(@types/node@22.4.1)(jiti@2.4.1)(sass@1.77.6)(terser@5.31.6)(yaml@2.6.1)
+      vitefu: 1.0.6(vite@6.2.0(@types/node@22.4.1)(jiti@2.4.1)(sass@1.77.6)(terser@5.31.6)(yaml@2.6.1))
+      which-pm: 3.0.1
+      xxhash-wasm: 1.1.0
       yargs-parser: 21.1.1
-      zod: 3.23.8
-      zod-to-json-schema: 3.23.2(zod@3.23.8)
-      zod-to-ts: 1.2.0(typescript@5.5.4)(zod@3.23.8)
+      yocto-spinner: 0.2.1
+      zod: 3.24.2
+      zod-to-json-schema: 3.24.3(zod@3.24.2)
+      zod-to-ts: 1.2.0(typescript@5.8.2)(zod@3.24.2)
     optionalDependencies:
       sharp: 0.33.5
     transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
       - '@types/node'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/kv'
+      - aws4fetch
+      - db0
+      - idb-keyval
+      - ioredis
+      - jiti
       - less
       - lightningcss
       - rollup
@@ -10551,7 +11092,10 @@ snapshots:
       - sugarss
       - supports-color
       - terser
+      - tsx
       - typescript
+      - uploadthing
+      - yaml
 
   async-sema@3.1.1: {}
 
@@ -10582,27 +11126,6 @@ snapshots:
   bare-events@2.4.2:
     optional: true
 
-  bare-fs@2.3.3:
-    dependencies:
-      bare-events: 2.4.2
-      bare-path: 2.1.3
-      bare-stream: 2.2.1
-    optional: true
-
-  bare-os@2.4.2:
-    optional: true
-
-  bare-path@2.1.3:
-    dependencies:
-      bare-os: 2.4.2
-    optional: true
-
-  bare-stream@2.2.1:
-    dependencies:
-      b4a: 1.6.6
-      streamx: 2.18.0
-    optional: true
-
   base-64@1.0.0: {}
 
   base64-js@1.5.1: {}
@@ -10623,24 +11146,18 @@ snapshots:
 
   birpc@0.2.19: {}
 
-  bl@4.1.0:
-    dependencies:
-      buffer: 5.7.1
-      inherits: 2.0.4
-      readable-stream: 3.6.2
-
   boolbase@1.0.0: {}
 
-  boxen@7.1.1:
+  boxen@8.0.1:
     dependencies:
       ansi-align: 3.0.1
-      camelcase: 7.0.1
+      camelcase: 8.0.0
       chalk: 5.3.0
       cli-boxes: 3.0.0
-      string-width: 5.1.2
-      type-fest: 2.19.0
-      widest-line: 4.0.1
-      wrap-ansi: 8.1.0
+      string-width: 7.2.0
+      type-fest: 4.30.0
+      widest-line: 5.0.0
+      wrap-ansi: 9.0.0
 
   brace-expansion@1.1.11:
     dependencies:
@@ -10666,11 +11183,6 @@ snapshots:
 
   buffer-from@1.1.2: {}
 
-  buffer@5.7.1:
-    dependencies:
-      base64-js: 1.5.1
-      ieee754: 1.2.1
-
   buffer@6.0.3:
     dependencies:
       base64-js: 1.5.1
@@ -10680,7 +11192,7 @@ snapshots:
 
   builtins@5.1.0:
     dependencies:
-      semver: 7.6.3
+      semver: 7.7.1
 
   bundle-name@4.1.0:
     dependencies:
@@ -10719,7 +11231,7 @@ snapshots:
 
   camelcase-css@2.0.1: {}
 
-  camelcase@7.0.1: {}
+  camelcase@8.0.0: {}
 
   caniuse-api@3.0.0:
     dependencies:
@@ -10765,7 +11277,9 @@ snapshots:
     dependencies:
       readdirp: 4.0.2
 
-  chownr@1.1.4: {}
+  chokidar@4.0.3:
+    dependencies:
+      readdirp: 4.0.2
 
   chownr@2.0.0: {}
 
@@ -10776,6 +11290,8 @@ snapshots:
 
   ci-info@4.0.0: {}
 
+  ci-info@4.1.0: {}
+
   citty@0.1.6:
     dependencies:
       consola: 3.2.3
@@ -10788,12 +11304,6 @@ snapshots:
 
   cli-boxes@3.0.0: {}
 
-  cli-cursor@5.0.0:
-    dependencies:
-      restore-cursor: 5.1.0
-
-  cli-spinners@2.9.2: {}
-
   clipboardy@4.0.0:
     dependencies:
       execa: 8.0.1
@@ -10876,7 +11386,7 @@ snapshots:
 
   cookie-es@1.2.2: {}
 
-  cookie@0.6.0: {}
+  cookie@0.7.2: {}
 
   copy-anything@3.0.5:
     dependencies:
@@ -10913,6 +11423,10 @@ snapshots:
     dependencies:
       uncrypto: 0.1.3
 
+  crossws@0.3.4:
+    dependencies:
+      uncrypto: 0.1.3
+
   css-declaration-sorter@7.2.0(postcss@8.4.49):
     dependencies:
       postcss: 8.4.49
@@ -11041,12 +11555,6 @@ snapshots:
     dependencies:
       character-entities: 2.0.2
 
-  decompress-response@6.0.0:
-    dependencies:
-      mimic-response: 3.1.0
-
-  deep-extend@0.6.0: {}
-
   deep-is@0.1.4: {}
 
   deepmerge@4.3.1: {}
@@ -11152,7 +11660,7 @@ snapshots:
 
   dotenv@16.4.5: {}
 
-  dset@3.1.3: {}
+  dset@3.1.4: {}
 
   duplexer@0.1.2: {}
 
@@ -11167,6 +11675,8 @@ snapshots:
       '@emmetio/abbreviation': 2.3.3
       '@emmetio/css-abbreviation': 2.1.8
 
+  emoji-regex-xs@1.0.0: {}
+
   emoji-regex@10.4.0: {}
 
   emoji-regex@8.0.0: {}
@@ -11177,10 +11687,6 @@ snapshots:
 
   encodeurl@2.0.0: {}
 
-  end-of-stream@1.4.4:
-    dependencies:
-      once: 1.4.0
-
   enhanced-resolve@5.17.1:
     dependencies:
       graceful-fs: 4.2.11
@@ -11257,6 +11763,8 @@ snapshots:
 
   es-module-lexer@1.5.4: {}
 
+  es-module-lexer@1.6.0: {}
+
   es-object-atoms@1.0.0:
     dependencies:
       es-errors: 1.3.0
@@ -11277,6 +11785,20 @@ snapshots:
       is-date-object: 1.0.5
       is-symbol: 1.0.4
 
+  esast-util-from-estree@2.0.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      devlop: 1.1.0
+      estree-util-visit: 2.0.0
+      unist-util-position-from-estree: 2.0.0
+
+  esast-util-from-js@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      acorn: 8.14.0
+      esast-util-from-estree: 2.0.0
+      vfile-message: 4.0.2
+
   esbuild@0.18.20:
     optionalDependencies:
       '@esbuild/android-arm': 0.18.20
@@ -11356,6 +11878,34 @@ snapshots:
       '@esbuild/win32-ia32': 0.24.0
       '@esbuild/win32-x64': 0.24.0
 
+  esbuild@0.25.0:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.25.0
+      '@esbuild/android-arm': 0.25.0
+      '@esbuild/android-arm64': 0.25.0
+      '@esbuild/android-x64': 0.25.0
+      '@esbuild/darwin-arm64': 0.25.0
+      '@esbuild/darwin-x64': 0.25.0
+      '@esbuild/freebsd-arm64': 0.25.0
+      '@esbuild/freebsd-x64': 0.25.0
+      '@esbuild/linux-arm': 0.25.0
+      '@esbuild/linux-arm64': 0.25.0
+      '@esbuild/linux-ia32': 0.25.0
+      '@esbuild/linux-loong64': 0.25.0
+      '@esbuild/linux-mips64el': 0.25.0
+      '@esbuild/linux-ppc64': 0.25.0
+      '@esbuild/linux-riscv64': 0.25.0
+      '@esbuild/linux-s390x': 0.25.0
+      '@esbuild/linux-x64': 0.25.0
+      '@esbuild/netbsd-arm64': 0.25.0
+      '@esbuild/netbsd-x64': 0.25.0
+      '@esbuild/openbsd-arm64': 0.25.0
+      '@esbuild/openbsd-x64': 0.25.0
+      '@esbuild/sunos-x64': 0.25.0
+      '@esbuild/win32-arm64': 0.25.0
+      '@esbuild/win32-ia32': 0.25.0
+      '@esbuild/win32-x64': 0.25.0
+
   escalade@3.2.0: {}
 
   escape-html@1.0.3: {}
@@ -11548,7 +12098,7 @@ snapshots:
       is-core-module: 2.15.0
       minimatch: 3.1.2
       resolve: 1.22.8
-      semver: 7.6.3
+      semver: 7.7.1
 
   eslint-plugin-node@11.1.0(eslint@9.13.0(jiti@2.4.1)):
     dependencies:
@@ -11610,7 +12160,7 @@ snapshots:
       read-pkg-up: 7.0.1
       regexp-tree: 0.1.27
       safe-regex: 2.1.1
-      semver: 7.6.3
+      semver: 7.7.1
       strip-indent: 3.0.0
 
   eslint-plugin-unicorn@54.0.0(eslint@9.13.0(jiti@2.4.1)):
@@ -11827,6 +12377,11 @@ snapshots:
 
   estree-util-is-identifier-name@3.0.0: {}
 
+  estree-util-scope@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.6
+      devlop: 1.1.0
+
   estree-util-to-js@2.0.0:
     dependencies:
       '@types/estree-jsx': 1.0.5
@@ -11878,18 +12433,12 @@ snapshots:
       signal-exit: 4.1.0
       strip-final-newline: 3.0.0
 
-  expand-template@2.0.3: {}
-
-  expressive-code@0.35.6:
+  expressive-code@0.40.2:
     dependencies:
-      '@expressive-code/core': 0.35.6
-      '@expressive-code/plugin-frames': 0.35.6
-      '@expressive-code/plugin-shiki': 0.35.6
-      '@expressive-code/plugin-text-markers': 0.35.6
-
-  extend-shallow@2.0.1:
-    dependencies:
-      is-extendable: 0.1.1
+      '@expressive-code/core': 0.40.2
+      '@expressive-code/plugin-frames': 0.40.2
+      '@expressive-code/plugin-shiki': 0.40.2
+      '@expressive-code/plugin-text-markers': 0.40.2
 
   extend@3.0.2: {}
 
@@ -11930,8 +12479,14 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.2
 
+  fdir@6.4.3(picomatch@4.0.2):
+    optionalDependencies:
+      picomatch: 4.0.2
+
   fflate@0.4.8: {}
 
+  fflate@0.8.2: {}
+
   file-entry-cache@6.0.1:
     dependencies:
       flat-cache: 3.2.0
@@ -12015,8 +12570,6 @@ snapshots:
 
   fresh@0.5.2: {}
 
-  fs-constants@1.0.0: {}
-
   fs-extra@10.1.0:
     dependencies:
       graceful-fs: 4.2.11
@@ -12115,8 +12668,6 @@ snapshots:
     dependencies:
       git-up: 7.0.0
 
-  github-from-package@0.0.0: {}
-
   github-slugger@2.0.0: {}
 
   glob-parent@5.1.2:
@@ -12195,13 +12746,6 @@ snapshots:
 
   graphemer@1.4.0: {}
 
-  gray-matter@4.0.3:
-    dependencies:
-      js-yaml: 3.14.1
-      kind-of: 6.0.3
-      section-matter: 1.0.0
-      strip-bom-string: 1.0.0
-
   gzip-size@7.0.0:
     dependencies:
       duplexer: 0.1.2
@@ -12219,6 +12763,18 @@ snapshots:
       uncrypto: 0.1.3
       unenv: 1.10.0
 
+  h3@1.15.1:
+    dependencies:
+      cookie-es: 1.2.2
+      crossws: 0.3.4
+      defu: 6.1.4
+      destr: 2.0.3
+      iron-webcrypto: 1.2.1
+      node-mock-http: 1.0.0
+      radix3: 1.1.2
+      ufo: 1.5.4
+      uncrypto: 0.1.3
+
   has-bigints@1.0.2: {}
 
   has-flag@4.0.0: {}
@@ -12257,6 +12813,15 @@ snapshots:
       vfile: 6.0.3
       vfile-message: 4.0.2
 
+  hast-util-from-html@2.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      devlop: 1.1.0
+      hast-util-from-parse5: 8.0.1
+      parse5: 7.1.2
+      vfile: 6.0.3
+      vfile-message: 4.0.2
+
   hast-util-from-parse5@8.0.1:
     dependencies:
       '@types/hast': 3.0.4
@@ -12362,6 +12927,20 @@ snapshots:
       stringify-entities: 4.0.4
       zwitch: 2.0.4
 
+  hast-util-to-html@9.0.5:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.0
+      property-information: 7.0.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
   hast-util-to-jsx-runtime@2.3.0:
     dependencies:
       '@types/estree': 1.0.6
@@ -12471,6 +13050,10 @@ snapshots:
 
   human-signals@5.0.0: {}
 
+  i18next@23.16.8:
+    dependencies:
+      '@babel/runtime': 7.25.6
+
   ieee754@1.2.1: {}
 
   ignore@5.3.1: {}
@@ -12603,8 +13186,6 @@ snapshots:
 
   is-docker@3.0.0: {}
 
-  is-extendable@0.1.1: {}
-
   is-extglob@2.1.1: {}
 
   is-fullwidth-code-point@3.0.0: {}
@@ -12624,8 +13205,6 @@ snapshots:
       global-directory: 4.0.1
       is-path-inside: 4.0.0
 
-  is-interactive@2.0.0: {}
-
   is-module@1.0.0: {}
 
   is-negative-zero@2.0.3: {}
@@ -12646,10 +13225,6 @@ snapshots:
     dependencies:
       '@types/estree': 1.0.6
 
-  is-reference@3.0.2:
-    dependencies:
-      '@types/estree': 1.0.6
-
   is-regex@1.1.4:
     dependencies:
       call-bind: 1.0.7
@@ -12679,10 +13254,6 @@ snapshots:
     dependencies:
       which-typed-array: 1.1.15
 
-  is-unicode-supported@1.3.0: {}
-
-  is-unicode-supported@2.0.0: {}
-
   is-weakref@1.0.2:
     dependencies:
       call-bind: 1.0.7
@@ -12800,8 +13371,6 @@ snapshots:
     dependencies:
       json-buffer: 3.0.1
 
-  kind-of@6.0.3: {}
-
   kleur@3.0.3: {}
 
   kleur@4.1.5: {}
@@ -12906,11 +13475,6 @@ snapshots:
 
   lodash@4.17.21: {}
 
-  log-symbols@6.0.0:
-    dependencies:
-      chalk: 5.3.0
-      is-unicode-supported: 1.3.0
-
   longest-streak@3.1.0: {}
 
   loud-rejection@2.2.0:
@@ -12932,6 +13496,10 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  magic-string@0.30.17:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
   magicast@0.3.5:
     dependencies:
       '@babel/parser': 7.26.3
@@ -13156,6 +13724,8 @@ snapshots:
 
   merge2@1.4.1: {}
 
+  meshoptimizer@0.18.1: {}
+
   micromark-core-commonmark@2.0.1:
     dependencies:
       decode-named-character-reference: 1.0.2
@@ -13453,10 +14023,6 @@ snapshots:
 
   mimic-fn@4.0.0: {}
 
-  mimic-function@5.0.1: {}
-
-  mimic-response@3.1.0: {}
-
   min-indent@1.0.1: {}
 
   minimatch@3.1.2:
@@ -13494,8 +14060,6 @@ snapshots:
 
   mitt@3.0.1: {}
 
-  mkdirp-classic@0.5.3: {}
-
   mkdirp@1.0.4: {}
 
   mlly@1.7.3:
@@ -13523,12 +14087,12 @@ snapshots:
 
   nanoid@3.3.7: {}
 
+  nanoid@3.3.8: {}
+
   nanoid@5.0.7: {}
 
   nanotar@0.1.1: {}
 
-  napi-build-utils@1.0.2: {}
-
   natural-compare@1.4.0: {}
 
   neo-async@2.6.2:
@@ -13594,7 +14158,7 @@ snapshots:
       rollup: 4.28.1
       rollup-plugin-visualizer: 5.12.0(rollup@4.28.1)
       scule: 1.3.0
-      semver: 7.6.3
+      semver: 7.7.1
       serve-placeholder: 2.0.2
       serve-static: 1.16.2
       std-env: 3.8.0
@@ -13632,16 +14196,12 @@ snapshots:
     dependencies:
       '@types/nlcst': 2.0.3
 
-  node-abi@3.67.0:
-    dependencies:
-      semver: 7.6.3
-
-  node-addon-api@6.1.0: {}
-
   node-addon-api@7.1.0: {}
 
   node-fetch-native@1.6.4: {}
 
+  node-fetch-native@1.6.6: {}
+
   node-fetch@2.7.0:
     dependencies:
       whatwg-url: 5.0.0
@@ -13650,6 +14210,8 @@ snapshots:
 
   node-gyp-build@4.8.1: {}
 
+  node-mock-http@1.0.0: {}
+
   node-releases@2.0.18: {}
 
   nopt@5.0.0:
@@ -13875,9 +14437,11 @@ snapshots:
     dependencies:
       mimic-fn: 4.0.0
 
-  onetime@7.0.0:
+  oniguruma-to-es@2.3.0:
     dependencies:
-      mimic-function: 5.0.1
+      emoji-regex-xs: 1.0.0
+      regex: 5.1.1
+      regex-recursion: 5.1.1
 
   open@10.1.0:
     dependencies:
@@ -13915,18 +14479,6 @@ snapshots:
       type-check: 0.4.0
       word-wrap: 1.2.5
 
-  ora@8.1.0:
-    dependencies:
-      chalk: 5.3.0
-      cli-cursor: 5.0.0
-      cli-spinners: 2.9.2
-      is-interactive: 2.0.0
-      is-unicode-supported: 2.0.0
-      log-symbols: 6.0.0
-      stdin-discarder: 0.2.2
-      string-width: 7.2.0
-      strip-ansi: 7.1.0
-
   p-limit@2.3.0:
     dependencies:
       p-try: 2.2.0
@@ -13935,7 +14487,7 @@ snapshots:
     dependencies:
       yocto-queue: 0.1.0
 
-  p-limit@6.1.0:
+  p-limit@6.2.0:
     dependencies:
       yocto-queue: 1.1.1
 
@@ -13947,7 +14499,7 @@ snapshots:
     dependencies:
       p-limit: 3.1.0
 
-  p-queue@8.0.1:
+  p-queue@8.1.0:
     dependencies:
       eventemitter3: 5.0.1
       p-timeout: 6.1.2
@@ -13960,13 +14512,13 @@ snapshots:
 
   package-manager-detector@0.2.7: {}
 
-  pagefind@1.1.1:
+  pagefind@1.3.0:
     optionalDependencies:
-      '@pagefind/darwin-arm64': 1.1.1
-      '@pagefind/darwin-x64': 1.1.1
-      '@pagefind/linux-arm64': 1.1.1
-      '@pagefind/linux-x64': 1.1.1
-      '@pagefind/windows-x64': 1.1.1
+      '@pagefind/darwin-arm64': 1.3.0
+      '@pagefind/darwin-x64': 1.3.0
+      '@pagefind/linux-arm64': 1.3.0
+      '@pagefind/linux-x64': 1.3.0
+      '@pagefind/windows-x64': 1.3.0
 
   pako@1.0.11: {}
 
@@ -14048,8 +14600,6 @@ snapshots:
       lru-cache: 10.4.3
       minipass: 7.1.2
 
-  path-to-regexp@6.2.2: {}
-
   path-type@4.0.0: {}
 
   path-type@5.0.0: {}
@@ -14058,12 +14608,6 @@ snapshots:
 
   perfect-debounce@1.0.0: {}
 
-  periscopic@3.1.0:
-    dependencies:
-      '@types/estree': 1.0.6
-      estree-walker: 3.0.3
-      is-reference: 3.0.2
-
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
@@ -14284,6 +14828,12 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  postcss@8.5.3:
+    dependencies:
+      nanoid: 3.3.8
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   posthog-js@1.158.2:
     dependencies:
       fflate: 0.4.8
@@ -14292,26 +14842,11 @@ snapshots:
 
   preact@10.23.2: {}
 
-  prebuild-install@7.1.2:
-    dependencies:
-      detect-libc: 2.0.3
-      expand-template: 2.0.3
-      github-from-package: 0.0.0
-      minimist: 1.2.8
-      mkdirp-classic: 0.5.3
-      napi-build-utils: 1.0.2
-      node-abi: 3.67.0
-      pump: 3.0.0
-      rc: 1.2.8
-      simple-get: 4.0.1
-      tar-fs: 2.1.1
-      tunnel-agent: 0.6.0
-
-  preferred-pm@4.0.0:
+  preferred-pm@4.1.1:
     dependencies:
       find-up-simple: 1.0.0
       find-yarn-workspace-root2: 1.2.16
-      which-pm: 3.0.0
+      which-pm: 3.0.1
 
   prelude-ls@1.2.1: {}
 
@@ -14343,12 +14878,9 @@ snapshots:
 
   property-information@6.5.0: {}
 
-  protocols@2.0.1: {}
+  property-information@7.0.0: {}
 
-  pump@3.0.0:
-    dependencies:
-      end-of-stream: 1.4.4
-      once: 1.4.0
+  protocols@2.0.1: {}
 
   punycode.js@2.3.1: {}
 
@@ -14375,13 +14907,6 @@ snapshots:
       defu: 6.1.4
       destr: 2.0.3
 
-  rc@1.2.8:
-    dependencies:
-      deep-extend: 0.6.0
-      ini: 1.3.8
-      minimist: 1.2.8
-      strip-json-comments: 2.0.1
-
   read-cache@1.0.0:
     dependencies:
       pify: 2.3.0
@@ -14433,6 +14958,36 @@ snapshots:
 
   readdirp@4.0.2: {}
 
+  recma-build-jsx@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.6
+      estree-util-build-jsx: 3.0.1
+      vfile: 6.0.3
+
+  recma-jsx@1.0.0(acorn@8.14.0):
+    dependencies:
+      acorn-jsx: 5.3.2(acorn@8.14.0)
+      estree-util-to-js: 2.0.0
+      recma-parse: 1.0.0
+      recma-stringify: 1.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - acorn
+
+  recma-parse@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.6
+      esast-util-from-js: 2.0.1
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  recma-stringify@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.6
+      estree-util-to-js: 2.0.0
+      unified: 11.0.5
+      vfile: 6.0.3
+
   redis-errors@1.2.0: {}
 
   redis-parser@3.0.0:
@@ -14445,6 +15000,17 @@ snapshots:
 
   regenerator-runtime@0.14.1: {}
 
+  regex-recursion@5.1.1:
+    dependencies:
+      regex: 5.1.1
+      regex-utilities: 2.3.0
+
+  regex-utilities@2.3.0: {}
+
+  regex@5.1.1:
+    dependencies:
+      regex-utilities: 2.3.0
+
   regexp-ast-analysis@0.7.1:
     dependencies:
       '@eslint-community/regexpp': 4.11.0
@@ -14465,9 +15031,9 @@ snapshots:
     dependencies:
       jsesc: 0.5.0
 
-  rehype-expressive-code@0.35.6:
+  rehype-expressive-code@0.40.2:
     dependencies:
-      expressive-code: 0.35.6
+      expressive-code: 0.40.2
 
   rehype-format@5.0.0:
     dependencies:
@@ -14500,12 +15066,26 @@ snapshots:
       hast-util-raw: 9.0.4
       vfile: 6.0.3
 
+  rehype-recma@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.6
+      '@types/hast': 3.0.4
+      hast-util-to-estree: 3.1.0
+    transitivePeerDependencies:
+      - supports-color
+
   rehype-stringify@10.0.0:
     dependencies:
       '@types/hast': 3.0.4
       hast-util-to-html: 9.0.2
       unified: 11.0.5
 
+  rehype-stringify@10.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.2
+      unified: 11.0.5
+
   rehype@13.0.1:
     dependencies:
       '@types/hast': 3.0.4
@@ -14513,6 +15093,13 @@ snapshots:
       rehype-stringify: 10.0.0
       unified: 11.0.5
 
+  rehype@13.0.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      rehype-parse: 9.0.0
+      rehype-stringify: 10.0.0
+      unified: 11.0.5
+
   remark-directive@3.0.0:
     dependencies:
       '@types/mdast': 4.0.4
@@ -14557,6 +15144,14 @@ snapshots:
       unified: 11.0.5
       vfile: 6.0.3
 
+  remark-rehype@11.1.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      mdast-util-to-hast: 13.2.0
+      unified: 11.0.5
+      vfile: 6.0.3
+
   remark-smartypants@3.0.2:
     dependencies:
       retext: 9.0.0
@@ -14592,11 +15187,6 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
-  restore-cursor@5.1.0:
-    dependencies:
-      onetime: 7.0.0
-      signal-exit: 4.1.0
-
   retext-latin@4.0.0:
     dependencies:
       '@types/nlcst': 2.0.3
@@ -14669,6 +15259,31 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.28.1
       fsevents: 2.3.3
 
+  rollup@4.34.9:
+    dependencies:
+      '@types/estree': 1.0.6
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.34.9
+      '@rollup/rollup-android-arm64': 4.34.9
+      '@rollup/rollup-darwin-arm64': 4.34.9
+      '@rollup/rollup-darwin-x64': 4.34.9
+      '@rollup/rollup-freebsd-arm64': 4.34.9
+      '@rollup/rollup-freebsd-x64': 4.34.9
+      '@rollup/rollup-linux-arm-gnueabihf': 4.34.9
+      '@rollup/rollup-linux-arm-musleabihf': 4.34.9
+      '@rollup/rollup-linux-arm64-gnu': 4.34.9
+      '@rollup/rollup-linux-arm64-musl': 4.34.9
+      '@rollup/rollup-linux-loongarch64-gnu': 4.34.9
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.34.9
+      '@rollup/rollup-linux-riscv64-gnu': 4.34.9
+      '@rollup/rollup-linux-s390x-gnu': 4.34.9
+      '@rollup/rollup-linux-x64-gnu': 4.34.9
+      '@rollup/rollup-linux-x64-musl': 4.34.9
+      '@rollup/rollup-win32-arm64-msvc': 4.34.9
+      '@rollup/rollup-win32-ia32-msvc': 4.34.9
+      '@rollup/rollup-win32-x64-msvc': 4.34.9
+      fsevents: 2.3.3
+
   run-applescript@7.0.0: {}
 
   run-parallel@1.2.0:
@@ -14719,17 +15334,14 @@ snapshots:
 
   scule@1.3.0: {}
 
-  section-matter@1.0.0:
-    dependencies:
-      extend-shallow: 2.0.1
-      kind-of: 6.0.3
-
   semver@5.7.2: {}
 
   semver@6.3.1: {}
 
   semver@7.6.3: {}
 
+  semver@7.7.1: {}
+
   send@0.19.0:
     dependencies:
       debug: 2.6.9
@@ -14787,22 +15399,11 @@ snapshots:
 
   setprototypeof@1.2.0: {}
 
-  sharp@0.32.6:
-    dependencies:
-      color: 4.2.3
-      detect-libc: 2.0.3
-      node-addon-api: 6.1.0
-      prebuild-install: 7.1.2
-      semver: 7.6.3
-      simple-get: 4.0.1
-      tar-fs: 3.0.6
-      tunnel-agent: 0.6.0
-
   sharp@0.33.5:
     dependencies:
       color: 4.2.3
       detect-libc: 2.0.3
-      semver: 7.6.3
+      semver: 7.7.1
     optionalDependencies:
       '@img/sharp-darwin-arm64': 0.33.5
       '@img/sharp-darwin-x64': 0.33.5
@@ -14823,7 +15424,6 @@ snapshots:
       '@img/sharp-wasm32': 0.33.5
       '@img/sharp-win32-ia32': 0.33.5
       '@img/sharp-win32-x64': 0.33.5
-    optional: true
 
   shebang-command@2.0.0:
     dependencies:
@@ -14833,10 +15433,15 @@ snapshots:
 
   shell-quote@1.8.1: {}
 
-  shiki@1.16.2:
+  shiki@1.29.2:
     dependencies:
-      '@shikijs/core': 1.16.2
-      '@shikijs/vscode-textmate': 9.2.0
+      '@shikijs/core': 1.29.2
+      '@shikijs/engine-javascript': 1.29.2
+      '@shikijs/engine-oniguruma': 1.29.2
+      '@shikijs/langs': 1.29.2
+      '@shikijs/themes': 1.29.2
+      '@shikijs/types': 1.29.2
+      '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
   side-channel@1.0.6:
@@ -14850,14 +15455,6 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
-  simple-concat@1.0.1: {}
-
-  simple-get@4.0.1:
-    dependencies:
-      decompress-response: 6.0.0
-      once: 1.4.0
-      simple-concat: 1.0.1
-
   simple-git@3.27.0:
     dependencies:
       '@kwsites/file-exists': 1.1.1
@@ -14878,7 +15475,7 @@ snapshots:
 
   sisteransi@1.0.5: {}
 
-  sitemap@7.1.2:
+  sitemap@8.0.0:
     dependencies:
       '@types/node': 17.0.45
       '@types/sax': 1.2.7
@@ -14893,6 +15490,8 @@ snapshots:
 
   smob@1.5.0: {}
 
+  smol-toml@1.3.1: {}
+
   source-map-js@1.2.1: {}
 
   source-map-support@0.5.21:
@@ -14933,13 +15532,14 @@ snapshots:
 
   standard-as-callback@2.1.0: {}
 
-  starlight-openapi@0.7.0(@astrojs/markdown-remark@5.2.0)(@astrojs/starlight@0.26.3(astro@4.15.3(@types/node@22.4.1)(rollup@4.28.1)(sass@1.77.6)(terser@5.31.6)(typescript@5.5.4)))(astro@4.15.3(@types/node@22.4.1)(rollup@4.28.1)(sass@1.77.6)(terser@5.31.6)(typescript@5.5.4))(openapi-types@12.1.3):
+  starlight-openapi@0.14.0(@astrojs/markdown-remark@6.2.0)(@astrojs/starlight@0.32.2(astro@5.4.1(@types/node@22.4.1)(db0@0.2.1)(jiti@2.4.1)(rollup@4.34.9)(sass@1.77.6)(terser@5.31.6)(typescript@5.8.2)(yaml@2.6.1)))(astro@5.4.1(@types/node@22.4.1)(db0@0.2.1)(jiti@2.4.1)(rollup@4.34.9)(sass@1.77.6)(terser@5.31.6)(typescript@5.8.2)(yaml@2.6.1))(openapi-types@12.1.3):
     dependencies:
-      '@astrojs/markdown-remark': 5.2.0
-      '@astrojs/starlight': 0.26.3(astro@4.15.3(@types/node@22.4.1)(rollup@4.28.1)(sass@1.77.6)(terser@5.31.6)(typescript@5.5.4))
+      '@astrojs/markdown-remark': 6.2.0
+      '@astrojs/starlight': 0.32.2(astro@5.4.1(@types/node@22.4.1)(db0@0.2.1)(jiti@2.4.1)(rollup@4.34.9)(sass@1.77.6)(terser@5.31.6)(typescript@5.8.2)(yaml@2.6.1))
       '@readme/openapi-parser': 2.5.0(openapi-types@12.1.3)
-      astro: 4.15.3(@types/node@22.4.1)(rollup@4.28.1)(sass@1.77.6)(terser@5.31.6)(typescript@5.5.4)
+      astro: 5.4.1(@types/node@22.4.1)(db0@0.2.1)(jiti@2.4.1)(rollup@4.34.9)(sass@1.77.6)(terser@5.31.6)(typescript@5.8.2)(yaml@2.6.1)
       github-slugger: 2.0.0
+      url-template: 3.1.1
     transitivePeerDependencies:
       - openapi-types
 
@@ -14947,8 +15547,6 @@ snapshots:
 
   std-env@3.8.0: {}
 
-  stdin-discarder@0.2.2: {}
-
   stream-replace-string@2.0.0: {}
 
   streamx@2.18.0:
@@ -15017,8 +15615,6 @@ snapshots:
     dependencies:
       ansi-regex: 6.0.1
 
-  strip-bom-string@1.0.0: {}
-
   strip-bom@3.0.0: {}
 
   strip-final-newline@3.0.0: {}
@@ -15027,8 +15623,6 @@ snapshots:
     dependencies:
       min-indent: 1.0.1
 
-  strip-json-comments@2.0.1: {}
-
   strip-json-comments@3.1.1: {}
 
   strip-literal@2.1.1:
@@ -15157,29 +15751,6 @@ snapshots:
 
   tapable@2.2.1: {}
 
-  tar-fs@2.1.1:
-    dependencies:
-      chownr: 1.1.4
-      mkdirp-classic: 0.5.3
-      pump: 3.0.0
-      tar-stream: 2.2.0
-
-  tar-fs@3.0.6:
-    dependencies:
-      pump: 3.0.0
-      tar-stream: 3.1.7
-    optionalDependencies:
-      bare-fs: 2.3.3
-      bare-path: 2.1.3
-
-  tar-stream@2.2.0:
-    dependencies:
-      bl: 4.1.0
-      end-of-stream: 1.4.4
-      fs-constants: 1.0.0
-      inherits: 2.0.4
-      readable-stream: 3.6.2
-
   tar-stream@3.1.7:
     dependencies:
       b4a: 1.6.6
@@ -15226,15 +15797,24 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
+  three@0.172.0: {}
+
   tiny-invariant@1.3.3: {}
 
   tinyexec@0.3.1: {}
 
+  tinyexec@0.3.2: {}
+
   tinyglobby@0.2.10:
     dependencies:
       fdir: 6.4.2(picomatch@4.0.2)
       picomatch: 4.0.2
 
+  tinyglobby@0.2.12:
+    dependencies:
+      fdir: 6.4.3(picomatch@4.0.2)
+      picomatch: 4.0.2
+
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
@@ -15255,9 +15835,9 @@ snapshots:
 
   ts-interface-checker@0.1.13: {}
 
-  tsconfck@3.1.3(typescript@5.5.4):
+  tsconfck@3.1.5(typescript@5.8.2):
     optionalDependencies:
-      typescript: 5.5.4
+      typescript: 5.8.2
 
   tsconfig-paths@3.15.0:
     dependencies:
@@ -15268,10 +15848,6 @@ snapshots:
 
   tslib@2.6.3: {}
 
-  tunnel-agent@0.6.0:
-    dependencies:
-      safe-buffer: 5.2.1
-
   turbo-darwin-64@2.2.3:
     optional: true
 
@@ -15311,8 +15887,6 @@ snapshots:
 
   type-fest@0.8.1: {}
 
-  type-fest@2.19.0: {}
-
   type-fest@4.30.0: {}
 
   typed-array-buffer@1.0.2:
@@ -15351,10 +15925,12 @@ snapshots:
 
   typescript-auto-import-cache@0.3.3:
     dependencies:
-      semver: 7.6.3
+      semver: 7.7.1
 
   typescript@5.5.4: {}
 
+  typescript@5.8.2: {}
+
   uc.micro@1.0.6: {}
 
   uc.micro@2.1.0: {}
@@ -15413,7 +15989,7 @@ snapshots:
 
   unimport@3.14.4:
     dependencies:
-      '@rollup/pluginutils': 5.1.3(rollup@3.29.4)
+      '@rollup/pluginutils': 5.1.3(rollup@4.28.1)
       acorn: 8.14.0
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
@@ -15565,6 +16141,19 @@ snapshots:
     optionalDependencies:
       ioredis: 5.4.1
 
+  unstorage@1.15.0(db0@0.2.1):
+    dependencies:
+      anymatch: 3.1.3
+      chokidar: 4.0.3
+      destr: 2.0.3
+      h3: 1.15.1
+      lru-cache: 10.4.3
+      node-fetch-native: 1.6.6
+      ofetch: 1.4.1
+      ufo: 1.5.4
+    optionalDependencies:
+      db0: 0.2.1
+
   untun@0.1.3:
     dependencies:
       citty: 0.1.6
@@ -15606,6 +16195,8 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  url-template@3.1.1: {}
+
   urlpattern-polyfill@8.0.2: {}
 
   util-deprecate@1.0.2: {}
@@ -15716,7 +16307,7 @@ snapshots:
   vite@4.5.3(@types/node@22.4.1)(sass@1.77.6)(terser@5.31.6):
     dependencies:
       esbuild: 0.18.20
-      postcss: 8.4.49
+      postcss: 8.5.3
       rollup: 3.29.4
     optionalDependencies:
       '@types/node': 22.4.1
@@ -15747,65 +16338,78 @@ snapshots:
       sass: 1.77.6
       terser: 5.31.6
 
-  vitefu@1.0.2(vite@5.4.11(@types/node@22.4.1)(sass@1.77.6)(terser@5.31.6)):
+  vite@6.2.0(@types/node@22.4.1)(jiti@2.4.1)(sass@1.77.6)(terser@5.31.6)(yaml@2.6.1):
+    dependencies:
+      esbuild: 0.25.0
+      postcss: 8.5.3
+      rollup: 4.34.9
     optionalDependencies:
-      vite: 5.4.11(@types/node@22.4.1)(sass@1.77.6)(terser@5.31.6)
+      '@types/node': 22.4.1
+      fsevents: 2.3.3
+      jiti: 2.4.1
+      sass: 1.77.6
+      terser: 5.31.6
+      yaml: 2.6.1
 
-  volar-service-css@0.0.61(@volar/language-service@2.4.2):
+  vitefu@1.0.6(vite@6.2.0(@types/node@22.4.1)(jiti@2.4.1)(sass@1.77.6)(terser@5.31.6)(yaml@2.6.1)):
+    optionalDependencies:
+      vite: 6.2.0(@types/node@22.4.1)(jiti@2.4.1)(sass@1.77.6)(terser@5.31.6)(yaml@2.6.1)
+
+  volar-service-css@0.0.62(@volar/language-service@2.4.11):
     dependencies:
       vscode-css-languageservice: 6.3.1
       vscode-languageserver-textdocument: 1.0.12
       vscode-uri: 3.0.8
     optionalDependencies:
-      '@volar/language-service': 2.4.2
+      '@volar/language-service': 2.4.11
 
-  volar-service-emmet@0.0.61(@volar/language-service@2.4.2):
+  volar-service-emmet@0.0.62(@volar/language-service@2.4.11):
     dependencies:
       '@emmetio/css-parser': 0.4.0
       '@emmetio/html-matcher': 1.3.0
       '@vscode/emmet-helper': 2.9.3
       vscode-uri: 3.0.8
     optionalDependencies:
-      '@volar/language-service': 2.4.2
+      '@volar/language-service': 2.4.11
 
-  volar-service-html@0.0.61(@volar/language-service@2.4.2):
+  volar-service-html@0.0.62(@volar/language-service@2.4.11):
     dependencies:
       vscode-html-languageservice: 5.3.1
       vscode-languageserver-textdocument: 1.0.12
       vscode-uri: 3.0.8
     optionalDependencies:
-      '@volar/language-service': 2.4.2
+      '@volar/language-service': 2.4.11
 
-  volar-service-prettier@0.0.61(@volar/language-service@2.4.2)(prettier@3.3.2):
+  volar-service-prettier@0.0.62(@volar/language-service@2.4.11)(prettier@3.3.2):
     dependencies:
       vscode-uri: 3.0.8
     optionalDependencies:
-      '@volar/language-service': 2.4.2
+      '@volar/language-service': 2.4.11
       prettier: 3.3.2
 
-  volar-service-typescript-twoslash-queries@0.0.61(@volar/language-service@2.4.2):
+  volar-service-typescript-twoslash-queries@0.0.62(@volar/language-service@2.4.11):
     dependencies:
       vscode-uri: 3.0.8
     optionalDependencies:
-      '@volar/language-service': 2.4.2
+      '@volar/language-service': 2.4.11
 
-  volar-service-typescript@0.0.61(@volar/language-service@2.4.2):
+  volar-service-typescript@0.0.62(@volar/language-service@2.4.11):
     dependencies:
       path-browserify: 1.0.1
-      semver: 7.6.3
+      semver: 7.7.1
       typescript-auto-import-cache: 0.3.3
       vscode-languageserver-textdocument: 1.0.12
       vscode-nls: 5.2.0
       vscode-uri: 3.0.8
     optionalDependencies:
-      '@volar/language-service': 2.4.2
+      '@volar/language-service': 2.4.11
 
-  volar-service-yaml@0.0.61(@volar/language-service@2.4.2):
+  volar-service-yaml@0.0.62(@volar/language-service@2.4.11):
     dependencies:
       vscode-uri: 3.0.8
       yaml-language-server: 1.15.0
     optionalDependencies:
-      '@volar/language-service': 2.4.2
+      '@volar/language-service': 2.4.11
 
   vscode-css-languageservice@6.3.1:
     dependencies:
@@ -15836,7 +16440,7 @@ snapshots:
   vscode-languageclient@7.0.0:
     dependencies:
       minimatch: 3.1.2
-      semver: 7.6.3
+      semver: 7.7.1
       vscode-languageserver-protocol: 3.16.0
 
   vscode-languageserver-protocol@3.16.0:
@@ -15961,6 +16565,16 @@ snapshots:
     optionalDependencies:
       typescript: 5.5.4
 
+  vue@3.5.13(typescript@5.8.2):
+    dependencies:
+      '@vue/compiler-dom': 3.5.13
+      '@vue/compiler-sfc': 3.5.13
+      '@vue/runtime-dom': 3.5.13
+      '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@5.8.2))
+      '@vue/shared': 3.5.13
+    optionalDependencies:
+      typescript: 5.8.2
+
   w3c-keyname@2.2.8: {}
 
   watchpack@2.4.2:
@@ -15992,7 +16606,7 @@ snapshots:
       browserslist: 4.24.2
       chrome-trace-event: 1.0.4
       enhanced-resolve: 5.17.1
-      es-module-lexer: 1.5.4
+      es-module-lexer: 1.6.0
       eslint-scope: 5.1.1
       events: 3.3.0
       glob-to-regexp: 0.4.1
@@ -16027,7 +16641,7 @@ snapshots:
 
   which-pm-runs@1.1.0: {}
 
-  which-pm@3.0.0:
+  which-pm@3.0.1:
     dependencies:
       load-yaml-file: 0.2.0
 
@@ -16051,9 +16665,9 @@ snapshots:
     dependencies:
       string-width: 4.2.3
 
-  widest-line@4.0.1:
+  widest-line@5.0.0:
     dependencies:
-      string-width: 5.1.2
+      string-width: 7.2.0
 
   word-wrap@1.2.5: {}
 
@@ -16069,6 +16683,12 @@ snapshots:
       string-width: 5.1.2
       strip-ansi: 7.1.0
 
+  wrap-ansi@9.0.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 7.2.0
+      strip-ansi: 7.1.0
+
   wrappy@1.0.2: {}
 
   ws@8.18.0: {}
@@ -16080,7 +16700,7 @@ snapshots:
       commander: 2.20.3
       cssfilter: 0.0.10
 
-  xxhash-wasm@1.0.2: {}
+  xxhash-wasm@1.1.0: {}
 
   y18n@5.0.8: {}
 
@@ -16125,6 +16745,12 @@ snapshots:
 
   yocto-queue@1.1.1: {}
 
+  yocto-spinner@0.2.1:
+    dependencies:
+      yoctocolors: 2.1.1
+
+  yoctocolors@2.1.1: {}
+
   zhead@2.2.4: {}
 
   zip-stream@6.0.1:
@@ -16133,15 +16759,17 @@ snapshots:
       compress-commons: 6.0.2
       readable-stream: 4.5.2
 
-  zod-to-json-schema@3.23.2(zod@3.23.8):
+  zod-to-json-schema@3.24.3(zod@3.24.2):
     dependencies:
-      zod: 3.23.8
+      zod: 3.24.2
 
-  zod-to-ts@1.2.0(typescript@5.5.4)(zod@3.23.8):
+  zod-to-ts@1.2.0(typescript@5.8.2)(zod@3.24.2):
     dependencies:
-      typescript: 5.5.4
-      zod: 3.23.8
+      typescript: 5.8.2
+      zod: 3.24.2
 
   zod@3.23.8: {}
 
+  zod@3.24.2: {}
+
   zwitch@2.0.4: {}