diff --git a/.gitignore b/.gitignore
index f617deccb..41ffebf9a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -56,4 +56,8 @@ generated
 # app testing dir
 app-playground-data/*
 
+# soley because i need the PORT to be 3002 due to WSL stuff
+.env
+apps/frontend/.env
+
 .astro
diff --git a/.idea/daedalus.iml b/.idea/daedalus.iml
index 3d715289c..198021c44 100644
--- a/.idea/daedalus.iml
+++ b/.idea/daedalus.iml
@@ -7,6 +7,11 @@
       <sourceFolder url="file://$MODULE_DIR$/daedalus_client_new/src" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/apps/daedalus_client/src" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/packages/daedalus/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/apps/app-playground/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/apps/app/src" isTestSource="false" />
+      <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" />
       <excludeFolder url="file://$MODULE_DIR$/target" />
     </content>
     <orderEntry type="inheritedJdk" />
diff --git a/Cargo.lock b/Cargo.lock
index eae0fdac3..11eac56e0 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -14,7 +14,7 @@ dependencies = [
  "futures-sink",
  "memchr",
  "pin-project-lite",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "tokio-util",
  "tracing",
 ]
@@ -90,7 +90,7 @@ dependencies = [
  "rand 0.8.5",
  "sha1 0.10.6",
  "smallvec 1.13.2",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "tokio-util",
  "tracing",
  "zstd 0.13.2",
@@ -103,7 +103,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e01ed3140b2f8d422c68afa1ed2e85d996ea619c988ac834d255db32138655cb"
 dependencies = [
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -129,7 +129,7 @@ dependencies = [
  "serde_json",
  "serde_plain",
  "tempfile",
- "tokio 1.41.0",
+ "tokio 1.41.1",
 ]
 
 [[package]]
@@ -142,7 +142,7 @@ dependencies = [
  "parse-size",
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -168,7 +168,7 @@ checksum = "24eda4e2a6e042aa4e55ac438a2ae052d3b5da0ecf83d7411e1a368946925208"
 dependencies = [
  "actix-macros",
  "futures-core",
- "tokio 1.41.0",
+ "tokio 1.41.1",
 ]
 
 [[package]]
@@ -184,7 +184,7 @@ dependencies = [
  "futures-util",
  "mio 1.0.2",
  "socket2",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "tracing",
 ]
 
@@ -228,7 +228,7 @@ dependencies = [
  "bytes 1.8.0",
  "bytestring",
  "cfg-if 1.0.0",
- "cookie",
+ "cookie 0.16.2",
  "derive_more",
  "encoding_rs",
  "futures-core",
@@ -260,7 +260,7 @@ dependencies = [
  "actix-router",
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -288,7 +288,7 @@ dependencies = [
  "actix-http",
  "actix-web",
  "futures-core",
- "tokio 1.41.0",
+ "tokio 1.41.1",
 ]
 
 [[package]]
@@ -300,12 +300,6 @@ dependencies = [
  "gimli",
 ]
 
-[[package]]
-name = "adler"
-version = "1.0.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f26201604c87b1e01bd3d98f8d5d9a8fcbb815e8cedb41ffccbeb4bf593a35fe"
-
 [[package]]
 name = "adler2"
 version = "2.0.0"
@@ -373,9 +367,9 @@ dependencies = [
 
 [[package]]
 name = "allocator-api2"
-version = "0.2.18"
+version = "0.2.20"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5c6cb57a04249c6480766f7f7cef5467412af1490f8d1e243141daddada3264f"
+checksum = "45862d1c77f2228b9e10bc609d5bc203d86ebc9b87ad8d5d5167a6c9abf739d9"
 
 [[package]]
 name = "android-tzdata"
@@ -394,15 +388,15 @@ dependencies = [
 
 [[package]]
 name = "anyhow"
-version = "1.0.91"
+version = "1.0.93"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c042108f3ed77fd83760a5fd79b53be043192bb3b9dba91d8c574c0ada7850c8"
+checksum = "4c95c10ba0b00a02636238b814946408b1322d5ac4760326e6fb8ec956d85775"
 
 [[package]]
 name = "arbitrary"
-version = "1.3.2"
+version = "1.4.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7d5a26814d8dcb93b0e5a0ff3c6d80a8843bafb21b39e8e18a6f05471870e110"
+checksum = "dde20b3d026af13f561bdd0f15edf01fc734f0dafcedbaf42bba506a9517f223"
 dependencies = [
  "derive_arbitrary",
 ]
@@ -439,9 +433,9 @@ checksum = "d92bec98840b8f03a5ff5413de5293bfcd8bf96467cf5452609f939ec6f5de16"
 
 [[package]]
 name = "ashpd"
-version = "0.9.2"
+version = "0.10.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4d43c03d9e36dd40cab48435be0b09646da362c278223ca535493877b2c1dee9"
+checksum = "e9c39d707614dbcc6bed00015539f488d8e3fe3e66ed60961efc0c90f4b380b3"
 dependencies = [
  "enumflags2",
  "futures-channel",
@@ -450,12 +444,12 @@ dependencies = [
  "raw-window-handle 0.6.2",
  "serde",
  "serde_repr",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "url",
  "wayland-backend",
  "wayland-client",
  "wayland-protocols",
- "zbus",
+ "zbus 5.1.1",
 ]
 
 [[package]]
@@ -507,7 +501,7 @@ dependencies = [
  "futures-io",
  "memchr",
  "pin-project-lite",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "xz2",
  "zstd 0.13.2",
  "zstd-safe 7.2.1",
@@ -521,8 +515,8 @@ checksum = "30ca9a001c1e8ba5149f91a74362376cc6bc5b919d92d988668657bd570bdcec"
 dependencies = [
  "async-task",
  "concurrent-queue",
- "fastrand 2.1.1",
- "futures-lite 2.3.0",
+ "fastrand 2.2.0",
+ "futures-lite 2.5.0",
  "slab",
 ]
 
@@ -534,22 +528,22 @@ checksum = "ebcd09b382f40fcd159c2d695175b2ae620ffa5f3bd6f664131efff4e8b9e04a"
 dependencies = [
  "async-lock",
  "blocking",
- "futures-lite 2.3.0",
+ "futures-lite 2.5.0",
 ]
 
 [[package]]
 name = "async-io"
-version = "2.3.4"
+version = "2.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "444b0228950ee6501b3568d3c93bf1176a1fdbc3b758dcd9475046d30f4dc7e8"
+checksum = "43a2b323ccce0a1d90b449fd71f2a06ca7faa7c54c2751f06c9bd851fc061059"
 dependencies = [
  "async-lock",
  "cfg-if 1.0.0",
  "concurrent-queue",
  "futures-io",
- "futures-lite 2.3.0",
+ "futures-lite 2.5.0",
  "parking",
- "polling 3.7.3",
+ "polling 3.7.4",
  "rustix",
  "slab",
  "tracing",
@@ -581,7 +575,7 @@ dependencies = [
  "blocking",
  "cfg-if 1.0.0",
  "event-listener 5.3.1",
- "futures-lite 2.3.0",
+ "futures-lite 2.5.0",
  "rustix",
  "tracing",
 ]
@@ -594,7 +588,7 @@ checksum = "3b43422f69d8ff38f95f1b2bb76517c91589a924d1559a0e935d7c8ce0274c11"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -635,8 +629,8 @@ dependencies = [
  "sha2 0.10.8",
  "smart-default",
  "smol_str",
- "thiserror",
- "tokio 1.41.0",
+ "thiserror 1.0.69",
+ "tokio 1.41.1",
  "uuid 0.8.2",
 ]
 
@@ -654,7 +648,7 @@ checksum = "721cae7de5c34fbb2acd27e21e6d2cf7b886dce0c27388d46c4e6c47ea4318dd"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -668,10 +662,10 @@ dependencies = [
  "log",
  "pin-project-lite",
  "rustls-pki-types",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "tokio-rustls 0.26.0",
  "tungstenite",
- "webpki-roots",
+ "webpki-roots 0.26.6",
 ]
 
 [[package]]
@@ -683,10 +677,10 @@ dependencies = [
  "async-compression",
  "chrono",
  "crc32fast",
- "futures-lite 2.3.0",
+ "futures-lite 2.5.0",
  "pin-project",
- "thiserror",
- "tokio 1.41.0",
+ "thiserror 1.0.69",
+ "tokio 1.41.1",
  "tokio-util",
 ]
 
@@ -737,23 +731,12 @@ dependencies = [
  "http 0.2.12",
  "log",
  "native-tls",
+ "rustls 0.20.9",
  "serde",
  "serde_json",
  "url",
-]
-
-[[package]]
-name = "attohttpc"
-version = "0.26.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0f77d243921b0979fbbd728dd2d5162e68ac8252976797c24eb5b3a6af9090dc"
-dependencies = [
- "http 0.2.12",
- "log",
- "native-tls",
- "serde",
- "serde_json",
- "url",
+ "webpki",
+ "webpki-roots 0.22.6",
 ]
 
 [[package]]
@@ -768,30 +751,13 @@ version = "0.34.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3776743bb68d4ad02ba30ba8f64373f1be4e082fe47651767171ce75bb2f6cf5"
 dependencies = [
- "attohttpc 0.22.0",
+ "attohttpc",
  "dirs 4.0.0",
  "log",
  "quick-xml 0.26.0",
  "rust-ini 0.18.0",
  "serde",
- "thiserror",
- "time",
- "url",
-]
-
-[[package]]
-name = "aws-creds"
-version = "0.36.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "390ad3b77f3e21e01a4a0355865853b681daf1988510b0b15e31c0c4ae7eb0f6"
-dependencies = [
- "attohttpc 0.26.1",
- "home",
- "log",
- "quick-xml 0.30.0",
- "rust-ini 0.19.0",
- "serde",
- "thiserror",
+ "thiserror 1.0.69",
  "time",
  "url",
 ]
@@ -802,7 +768,7 @@ version = "0.25.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e9aed3f9c7eac9be28662fdb3b0f4d1951e812f7c64fed4f0327ba702f459b3b"
 dependencies = [
- "thiserror",
+ "thiserror 1.0.69",
 ]
 
 [[package]]
@@ -814,7 +780,7 @@ dependencies = [
  "addr2line",
  "cfg-if 1.0.0",
  "libc",
- "miniz_oxide 0.8.0",
+ "miniz_oxide",
  "object",
  "rustc-demangle",
  "windows-targets 0.52.6",
@@ -964,15 +930,15 @@ dependencies = [
  "async-channel 2.3.1",
  "async-task",
  "futures-io",
- "futures-lite 2.3.0",
+ "futures-lite 2.5.0",
  "piper",
 ]
 
 [[package]]
 name = "borsh"
-version = "1.5.1"
+version = "1.5.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a6362ed55def622cddc70a4746a68554d7b687713770de539e59a739b249f8ed"
+checksum = "2506947f73ad44e344215ccd6403ac2ae18cd8e046e581a441bf8d199f257f03"
 dependencies = [
  "borsh-derive",
  "cfg_aliases",
@@ -980,16 +946,15 @@ dependencies = [
 
 [[package]]
 name = "borsh-derive"
-version = "1.5.1"
+version = "1.5.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c3ef8005764f53cd4dca619f5bf64cafd4664dada50ece25e4d81de54c80cc0b"
+checksum = "c2593a3b8b938bd68373196c9832f516be11fa487ef4ae745eb282e6a56a7244"
 dependencies = [
  "once_cell",
  "proc-macro-crate 3.2.0",
  "proc-macro2",
  "quote",
- "syn 2.0.82",
- "syn_derive",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -1026,12 +991,12 @@ dependencies = [
 
 [[package]]
 name = "bstr"
-version = "1.10.0"
+version = "1.11.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "40723b8fb387abc38f4f4a37c09073622e41dd12327033091ef8950659e6dc0c"
+checksum = "1a68f1f47cdf0ec8ee4b941b2eee2a80cb796db73118c0dd09ac63fbe405be22"
 dependencies = [
  "memchr",
- "regex-automata 0.4.8",
+ "regex-automata 0.4.9",
  "serde",
 ]
 
@@ -1141,7 +1106,7 @@ dependencies = [
  "glib",
  "libc",
  "once_cell",
- "thiserror",
+ "thiserror 1.0.69",
 ]
 
 [[package]]
@@ -1184,7 +1149,7 @@ dependencies = [
  "semver 1.0.23",
  "serde",
  "serde_json",
- "thiserror",
+ "thiserror 1.0.69",
 ]
 
 [[package]]
@@ -1205,9 +1170,9 @@ checksum = "a2698f953def977c68f935bb0dfa959375ad4638570e969e2f1e9f433cbf1af6"
 
 [[package]]
 name = "cc"
-version = "1.1.31"
+version = "1.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c2e7962b54006dcfcc61cb72735f4d89bb97061dd6a7ed882ec6b8ee53714c6f"
+checksum = "fd9de9f2205d5ef3fd67e685b0df337994ddd4495e2a28d185500d0e1edfea47"
 dependencies = [
  "jobserver",
  "libc",
@@ -1320,9 +1285,9 @@ dependencies = [
  "sealed",
  "serde",
  "static_assertions",
- "thiserror",
+ "thiserror 1.0.69",
  "time",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "url",
  "uuid 1.11.0",
 ]
@@ -1442,7 +1407,7 @@ dependencies = [
  "futures-core",
  "memchr",
  "pin-project-lite",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "tokio-util",
 ]
 
@@ -1464,7 +1429,7 @@ dependencies = [
  "encode_unicode 0.3.6",
  "lazy_static",
  "libc",
- "unicode-width",
+ "unicode-width 0.1.14",
  "windows-sys 0.52.0",
 ]
 
@@ -1532,6 +1497,16 @@ dependencies = [
  "version_check",
 ]
 
+[[package]]
+name = "cookie"
+version = "0.18.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4ddef33a339a91ea89fb53151bd0a4689cfce27055c291dfa69945475d22c747"
+dependencies = [
+ "time",
+ "version_check",
+]
+
 [[package]]
 name = "core-foundation"
 version = "0.9.4"
@@ -1608,9 +1583,9 @@ dependencies = [
 
 [[package]]
 name = "cpufeatures"
-version = "0.2.14"
+version = "0.2.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "608697df725056feaccfa42cffdaeeec3fccc4ffc38358ecd19b243e716a78e0"
+checksum = "0ca741a962e1b0bff6d724a1a0958b686406e853bb14061f218562e1896f95e6"
 dependencies = [
  "libc",
 ]
@@ -1792,14 +1767,14 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "13b588ba4ac1a99f7f2964d24b3d896ddc6bf847ee3855dbd4366f058cfcd331"
 dependencies = [
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
 name = "csv"
-version = "1.3.0"
+version = "1.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ac574ff4d437a7b5ad237ef331c17ccca63c46479e5b5453eb8e10bb99a759fe"
+checksum = "acdc4883a9c96732e4733212c01447ebd805833b7275a73ca3ee080fd77afdaf"
 dependencies = [
  "csv-core",
  "itoa 1.0.11",
@@ -1823,7 +1798,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "edb49164822f3ee45b17acd4a208cfc1251410cf0cad9a833234c9890774dd9f"
 dependencies = [
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -1843,9 +1818,9 @@ dependencies = [
 
 [[package]]
 name = "curl-sys"
-version = "0.4.77+curl-8.10.1"
+version = "0.4.78+curl-8.11.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f469e8a5991f277a208224f6c7ad72ecb5f986e36d09ae1f2c1bb9259478a480"
+checksum = "8eec768341c5c7789611ae51cf6c459099f22e64a5d5d0ce4892434e33821eaf"
 dependencies = [
  "cc",
  "libc",
@@ -1865,7 +1840,7 @@ dependencies = [
  "chrono",
  "serde",
  "serde_json",
- "thiserror",
+ "thiserror 1.0.69",
 ]
 
 [[package]]
@@ -1882,15 +1857,15 @@ dependencies = [
  "indexmap 2.6.0",
  "itertools 0.13.0",
  "lazy_static",
- "reqwest 0.12.8",
- "rust-s3 0.34.0",
+ "reqwest 0.12.9",
+ "rust-s3",
  "semver 1.0.23",
  "serde",
  "serde-xml-rs",
  "serde_json",
  "sha1_smol",
- "thiserror",
- "tokio 1.41.0",
+ "thiserror 1.0.69",
+ "tokio 1.41.1",
  "tracing",
  "tracing-error",
  "tracing-futures",
@@ -1942,7 +1917,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "strsim 0.11.1",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -1964,7 +1939,7 @@ checksum = "d336a2a514f6ccccaa3e09b02d41d35330c07ddf03a62165fcec10bb561c7806"
 dependencies = [
  "darling_core 0.20.10",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -2020,7 +1995,7 @@ checksum = "6541a3916932fe57768d4be0b1ffb5ec7cbf74ca8c903fdfd5c0fe8aa958f0ed"
 dependencies = [
  "deadpool-runtime",
  "num_cpus",
- "tokio 1.41.0",
+ "tokio 1.41.1",
 ]
 
 [[package]]
@@ -2039,7 +2014,7 @@ version = "0.1.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "092966b41edc516079bdf31ec78a2e0588d1d0c08f78b91d8307215928642b2b"
 dependencies = [
- "tokio 1.41.0",
+ "tokio 1.41.1",
 ]
 
 [[package]]
@@ -2087,18 +2062,18 @@ checksum = "d150dea618e920167e5973d70ae6ece4385b7164e0d799fe7c122dd0a5d912ad"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
 name = "derive_arbitrary"
-version = "1.3.2"
+version = "1.4.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "67e77553c4162a157adbf834ebae5b415acbecbeafc7a74b0e886657506a7611"
+checksum = "30542c1ad912e0e3d22a1935c290e12e8a29d704a420177a31faad4a601a0800"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -2142,7 +2117,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "rustc_version 0.4.1",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -2255,7 +2230,7 @@ checksum = "97369cbbc041bc366949bc74d34658d6cda5621039731c6310521892a3a20ae0"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -2287,7 +2262,7 @@ checksum = "f2b99bf03862d7f545ebc28ddd33a665b50865f4dfd84031a393823879bd4c54"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -2414,9 +2389,9 @@ checksum = "e079f19b08ca6239f47f8ba8509c11cf3ea30095831f7fed61441475edd8c449"
 
 [[package]]
 name = "embed-resource"
-version = "2.5.0"
+version = "2.5.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f4e24052d7be71f0efb50c201557f6fe7d237cfd5a64fd5bcd7fd8fe32dbbffa"
+checksum = "b68b6f9f63a0b6a38bc447d4ce84e2b388f3ec95c99c641c8ff0dd3ef89a6379"
 dependencies = [
  "cc",
  "memchr",
@@ -2446,9 +2421,9 @@ checksum = "34aa73646ffb006b8f5147f3dc182bd4bcb190227ce861fc4a4844bf8e3cb2c0"
 
 [[package]]
 name = "encoding_rs"
-version = "0.8.34"
+version = "0.8.35"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b45de904aa0b010bce2ab45264d0631681847fa7b6f2eaa7dab7619943bc4f59"
+checksum = "75030f3c4f45dafd7586dd6780965a8c7e8e285a5ecb86713e63a79c5b2766f3"
 dependencies = [
  "cfg-if 1.0.0",
 ]
@@ -2477,7 +2452,7 @@ checksum = "de0d48a183585823424a4ce1aa132d174a6a81bd540895822eb4c8373a8e49e8"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -2559,15 +2534,14 @@ dependencies = [
 
 [[package]]
 name = "exr"
-version = "1.72.0"
+version = "1.73.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "887d93f60543e9a9362ef8a21beedd0a833c5d9610e18c67abe15a5963dcb1a4"
+checksum = "f83197f59927b46c04a183a619b7c29df34e63e63c7869320862268c0ef687e0"
 dependencies = [
  "bit_field",
- "flume",
  "half",
  "lebe",
- "miniz_oxide 0.7.4",
+ "miniz_oxide",
  "rayon-core",
  "smallvec 1.13.2",
  "zune-inflate",
@@ -2594,15 +2568,15 @@ dependencies = [
 
 [[package]]
 name = "fastrand"
-version = "2.1.1"
+version = "2.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e8c02a5121d4ea3eb16a80748c74f5549a5665e4c21333c6098f283870fbdea6"
+checksum = "486f806e73c5707928240ddc295403b1b93c96a02038563881c4a2fd84b81ac4"
 
 [[package]]
 name = "fdeflate"
-version = "0.3.5"
+version = "0.3.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d8090f921a24b04994d9929e204f50b498a33ea6ba559ffaa05e04f7ee7fb5ab"
+checksum = "07c6f4c64c1d33a3111c4466f7365ebdcc37c5bd1ea0d62aae2e3d722aacbedb"
 dependencies = [
  "simd-adler32",
 ]
@@ -2653,21 +2627,12 @@ dependencies = [
 
 [[package]]
 name = "flate2"
-version = "1.0.34"
+version = "1.0.35"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a1b589b4dc103969ad3cf85c950899926ec64300a1a46d76c03a6072957036f0"
+checksum = "c936bfdafb507ebbf50b8074c54fa31c5be9a1e7e5f467dd659697041407d07c"
 dependencies = [
  "crc32fast",
- "miniz_oxide 0.8.0",
-]
-
-[[package]]
-name = "fluent-uri"
-version = "0.1.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "17c704e9dbe1ddd863da1e6ff3567795087b1eb201ce80d8fa81162e1516500d"
-dependencies = [
- "bitflags 1.3.2",
+ "miniz_oxide",
 ]
 
 [[package]]
@@ -2714,7 +2679,7 @@ checksum = "1a5c6c585bc94aaf2c7b51dd4c2ba22680844aba4c687be581871a6f518c5742"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -2861,11 +2826,11 @@ dependencies = [
 
 [[package]]
 name = "futures-lite"
-version = "2.3.0"
+version = "2.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "52527eb5074e35e9339c6b4e8d12600c7128b68fb25dcb9fa9dec18f7c25f3a5"
+checksum = "cef40d21ae2c515b51041df9ed313ed21e572df340ea58a922a0aefe7e8891a1"
 dependencies = [
- "fastrand 2.1.1",
+ "fastrand 2.2.0",
  "futures-core",
  "futures-io",
  "parking",
@@ -2880,7 +2845,7 @@ checksum = "162ee34ebcb7c64a8abebc059ce0fee27c2262618d7b60ed8faf72fef13c3650"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -3066,8 +3031,10 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c4567c8db10ae91089c99af84c68c38da3ec2f087c3f82960bcdbf3656b6f4d7"
 dependencies = [
  "cfg-if 1.0.0",
+ "js-sys",
  "libc",
  "wasi 0.11.0+wasi-snapshot-preview1",
+ "wasm-bindgen",
 ]
 
 [[package]]
@@ -3102,7 +3069,7 @@ dependencies = [
  "once_cell",
  "pin-project-lite",
  "smallvec 1.13.2",
- "thiserror",
+ "thiserror 1.0.69",
 ]
 
 [[package]]
@@ -3138,7 +3105,7 @@ dependencies = [
  "memchr",
  "once_cell",
  "smallvec 1.13.2",
- "thiserror",
+ "thiserror 1.0.69",
 ]
 
 [[package]]
@@ -3152,7 +3119,7 @@ dependencies = [
  "proc-macro-error",
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -3262,7 +3229,7 @@ dependencies = [
  "proc-macro-error",
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -3279,7 +3246,7 @@ dependencies = [
  "http 0.2.12",
  "indexmap 2.6.0",
  "slab",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "tokio-util",
  "tracing",
 ]
@@ -3298,7 +3265,7 @@ dependencies = [
  "http 1.1.0",
  "indexmap 2.6.0",
  "slab",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "tokio-util",
  "tracing",
 ]
@@ -3322,12 +3289,6 @@ dependencies = [
  "ahash 0.7.8",
 ]
 
-[[package]]
-name = "hashbrown"
-version = "0.13.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "43a3c133739dddd0d2990f9a4bdf8eb4b21ef50e4851ca85ab661199821d510e"
-
 [[package]]
 name = "hashbrown"
 version = "0.14.5"
@@ -3340,9 +3301,9 @@ dependencies = [
 
 [[package]]
 name = "hashbrown"
-version = "0.15.0"
+version = "0.15.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1e087f84d4f86bf4b218b927129862374b72199ae7d8657835f1e89000eea4fb"
+checksum = "3a9bfc1af68b1726ea47d3d5109de126281def866b33970e10fbab11b5dafab3"
 
 [[package]]
 name = "hashlink"
@@ -3573,7 +3534,7 @@ dependencies = [
  "itoa 1.0.11",
  "pin-project-lite",
  "socket2",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "tower-service",
  "tracing",
  "want",
@@ -3595,7 +3556,7 @@ dependencies = [
  "itoa 1.0.11",
  "pin-project-lite",
  "smallvec 1.13.2",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "want",
 ]
 
@@ -3610,8 +3571,8 @@ dependencies = [
  "hyper 0.14.31",
  "log",
  "rustls 0.21.12",
- "rustls-native-certs",
- "tokio 1.41.0",
+ "rustls-native-certs 0.6.3",
+ "tokio 1.41.1",
  "tokio-rustls 0.24.1",
 ]
 
@@ -3625,12 +3586,13 @@ dependencies = [
  "http 1.1.0",
  "hyper 1.5.0",
  "hyper-util",
- "rustls 0.23.15",
+ "rustls 0.23.17",
+ "rustls-native-certs 0.8.0",
  "rustls-pki-types",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "tokio-rustls 0.26.0",
  "tower-service",
- "webpki-roots",
+ "webpki-roots 0.26.6",
 ]
 
 [[package]]
@@ -3642,7 +3604,7 @@ dependencies = [
  "bytes 1.8.0",
  "hyper 0.14.31",
  "native-tls",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "tokio-native-tls",
 ]
 
@@ -3657,16 +3619,16 @@ dependencies = [
  "hyper 1.5.0",
  "hyper-util",
  "native-tls",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "tokio-native-tls",
  "tower-service",
 ]
 
 [[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.8.0",
  "futures-channel",
@@ -3676,7 +3638,7 @@ dependencies = [
  "hyper 1.5.0",
  "pin-project-lite",
  "socket2",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "tower-service",
  "tracing",
 ]
@@ -3829,7 +3791,7 @@ checksum = "1ec89e9337638ecdc08744df490b221a7399bf8d164eb52a665454e60e075ad6"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -3850,24 +3812,23 @@ dependencies = [
 
 [[package]]
 name = "idna"
-version = "0.5.0"
+version = "1.0.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "634d9b1461af396cad843f47fdba5597a4f9e6ddd4bfb6ff5d85028c25cb12f6"
+checksum = "686f825264d630750a544639377bae737628043f20d38bbc029e8f29ea968a7e"
 dependencies = [
- "unicode-bidi",
- "unicode-normalization",
+ "idna_adapter",
+ "smallvec 1.13.2",
+ "utf8_iter",
 ]
 
 [[package]]
-name = "idna"
-version = "1.0.2"
+name = "idna_adapter"
+version = "1.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bd69211b9b519e98303c015e21a007e293db403b6c85b9b124e133d25e242cdd"
+checksum = "daca1df1c957320b2cf139ac61e7bd64fed304c5040df000a745aa1de3b4ef71"
 dependencies = [
  "icu_normalizer",
  "icu_properties",
- "smallvec 1.13.2",
- "utf8_iter",
 ]
 
 [[package]]
@@ -3896,9 +3857,9 @@ dependencies = [
 
 [[package]]
 name = "image"
-version = "0.25.4"
+version = "0.25.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bc144d44a31d753b02ce64093d532f55ff8dc4ebf2ffb8a63c0dda691385acae"
+checksum = "cd6f44aed642f18953a158afeb30206f4d50da59fbc66ecb53c66488de73563b"
 dependencies = [
  "bytemuck",
  "byteorder-lite",
@@ -3929,21 +3890,21 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "707907fe3c25f5424cce2cb7e1cbcafee6bdbe735ca90ef77c29e84591e5b9da"
 dependencies = [
  "equivalent",
- "hashbrown 0.15.0",
+ "hashbrown 0.15.1",
  "serde",
 ]
 
 [[package]]
 name = "indicatif"
-version = "0.17.8"
+version = "0.17.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "763a5a8f45087d6bcea4222e7b72c291a054edf80e4ef6efd2a4979878c7bea3"
+checksum = "cbf675b85ed934d3c67b5c5469701eec7db22689d0a2139d856e0925fa28b281"
 dependencies = [
  "console",
- "instant",
  "number_prefix",
  "portable-atomic",
- "unicode-width",
+ "unicode-width 0.2.0",
+ "web-time",
 ]
 
 [[package]]
@@ -4191,7 +4152,7 @@ dependencies = [
  "combine",
  "jni-sys",
  "log",
- "thiserror",
+ "thiserror 1.0.69",
  "walkdir",
  "windows-sys 0.45.0",
 ]
@@ -4229,39 +4190,16 @@ dependencies = [
  "wasm-bindgen",
 ]
 
-[[package]]
-name = "json-patch"
-version = "2.0.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5b1fb8864823fad91877e6caea0baca82e49e8db50f8e5c9f9a453e27d3330fc"
-dependencies = [
- "jsonptr 0.4.7",
- "serde",
- "serde_json",
- "thiserror",
-]
-
 [[package]]
 name = "json-patch"
 version = "3.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "863726d7afb6bc2590eeff7135d923545e5e964f004c2ccf8716c25e70a86f08"
 dependencies = [
- "jsonptr 0.6.3",
- "serde",
- "serde_json",
- "thiserror",
-]
-
-[[package]]
-name = "jsonptr"
-version = "0.4.7"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1c6e529149475ca0b2820835d3dce8fcc41c6b943ca608d32f35b449255e4627"
-dependencies = [
- "fluent-uri",
+ "jsonptr",
  "serde",
  "serde_json",
+ "thiserror 1.0.69",
 ]
 
 [[package]]
@@ -4379,7 +4317,7 @@ dependencies = [
  "image 0.24.9",
  "itertools 0.12.1",
  "jemallocator",
- "json-patch 3.0.1",
+ "json-patch",
  "lazy_static",
  "lettre",
  "log",
@@ -4391,7 +4329,7 @@ dependencies = [
  "redis",
  "regex",
  "reqwest 0.11.27",
- "rust-s3 0.33.0",
+ "rust-s3",
  "rust_decimal",
  "rust_iso3166",
  "rusty-money",
@@ -4405,8 +4343,8 @@ dependencies = [
  "spdx",
  "sqlx",
  "tar",
- "thiserror",
- "tokio 1.41.0",
+ "thiserror 1.0.69",
+ "tokio 1.41.1",
  "tokio-stream",
  "totp-rs",
  "url",
@@ -4445,26 +4383,26 @@ checksum = "03087c2bad5e1034e8cace5926dec053fb3790248370865f5117a7d0213354c8"
 
 [[package]]
 name = "lettre"
-version = "0.11.9"
+version = "0.11.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "69f204773bab09b150320ea1c83db41dc6ee606a4bc36dc1f43005fe7b58ce06"
+checksum = "0161e452348e399deb685ba05e55ee116cae9410f4f51fe42d597361444521d9"
 dependencies = [
  "base64 0.22.1",
  "chumsky",
  "email-encoding",
  "email_address",
- "fastrand 2.1.1",
+ "fastrand 2.2.0",
  "futures-util",
  "hostname",
  "httpdate",
- "idna 1.0.2",
+ "idna 1.0.3",
  "mime",
  "native-tls",
  "nom",
  "percent-encoding",
  "quoted_printable",
  "socket2",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "url",
 ]
 
@@ -4494,9 +4432,9 @@ dependencies = [
 
 [[package]]
 name = "libc"
-version = "0.2.161"
+version = "0.2.164"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8e9489c2807c139ffd9c1794f4af0ebe86a828db53ecdc7fea2111d0fed085d1"
+checksum = "433bfe06b8c75da9b2e3fbea6e5329ff87748f0b144ef75306e674c3f6f7c13f"
 
 [[package]]
 name = "libdbus-sys"
@@ -4530,9 +4468,9 @@ dependencies = [
 
 [[package]]
 name = "libm"
-version = "0.2.8"
+version = "0.2.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4ec2a862134d2a7d32d7983ddcdd1c4923530833c9f2ea1a44fc5fa473989058"
+checksum = "8355be11b20d696c8f18f6cc018c4e372165b1fa8126cef092399c9951984ffa"
 
 [[package]]
 name = "libnghttp2-sys"
@@ -4751,7 +4689,7 @@ checksum = "5cf92c10c7e361d6b99666ec1c6f9805b0bea2c3bd8c78dc6fe98ac5bd78db11"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -4806,7 +4744,7 @@ dependencies = [
  "meilisearch-index-setting-macro",
  "serde",
  "serde_json",
- "thiserror",
+ "thiserror 1.0.69",
  "time",
  "uuid 1.11.0",
  "wasm-bindgen",
@@ -4876,15 +4814,6 @@ version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a05b5d0594e0cb1ad8cee3373018d2b84e25905dc75b2468114cc9a8e86cfc20"
 
-[[package]]
-name = "miniz_oxide"
-version = "0.7.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b8a240ddb74feaf34a79a7add65a741f3167852fba007066dcac1ca548d89c08"
-dependencies = [
- "adler",
-]
-
 [[package]]
 name = "miniz_oxide"
 version = "0.8.0"
@@ -4964,9 +4893,9 @@ dependencies = [
 
 [[package]]
 name = "muda"
-version = "0.15.1"
+version = "0.15.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b8123dfd4996055ac9b15a60ad263b44b01e539007523ad7a4a533a3d93b0591"
+checksum = "fdae9c00e61cc0579bcac625e8ad22104c60548a025bfc972dc83868a28e1484"
 dependencies = [
  "crossbeam-channel",
  "dpi",
@@ -4978,7 +4907,7 @@ dependencies = [
  "once_cell",
  "png",
  "serde",
- "thiserror",
+ "thiserror 1.0.69",
  "windows-sys 0.59.0",
 ]
 
@@ -5004,7 +4933,7 @@ dependencies = [
  "objc_id",
  "once_cell",
  "raw-window-handle 0.5.2",
- "thiserror",
+ "thiserror 1.0.69",
  "versions",
  "wfd",
  "which",
@@ -5040,7 +4969,7 @@ dependencies = [
  "ndk-sys",
  "num_enum",
  "raw-window-handle 0.6.2",
- "thiserror",
+ "thiserror 1.0.69",
 ]
 
 [[package]]
@@ -5264,7 +5193,7 @@ dependencies = [
  "proc-macro-crate 3.2.0",
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -5550,9 +5479,9 @@ checksum = "c08d65885ee38876c4f86fa503fb49d7b507c2b62552df7c70b2fce627e06381"
 
 [[package]]
 name = "open"
-version = "5.3.0"
+version = "5.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "61a877bf6abd716642a53ef1b89fb498923a4afca5c754f9050b4d081c05c4b3"
+checksum = "3ecd52f0b8d15c40ce4820aa251ed5de032e5d91fab27f7db2f40d42a8bdf69c"
 dependencies = [
  "is-wsl",
  "libc",
@@ -5595,7 +5524,7 @@ checksum = "a948666b637a0f465e8564c73e89d4dde00d72d4d473cc972f390fc3dcee7d9c"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -5606,9 +5535,9 @@ checksum = "ff011a302c396a5197692431fc1948019154afc178baf7d8e37367442a4601cf"
 
 [[package]]
 name = "openssl-src"
-version = "300.4.0+3.4.0"
+version = "300.4.1+3.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a709e02f2b4aca747929cca5ed248880847c650233cf8b8cdc48f40aaf4898a6"
+checksum = "faa4eac4138c62414b5622d1b31c5c304f34b406b013c079c2bbc652fdd6678c"
 dependencies = [
  "cc",
 ]
@@ -5642,16 +5571,6 @@ dependencies = [
  "hashbrown 0.12.3",
 ]
 
-[[package]]
-name = "ordered-multimap"
-version = "0.6.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4ed8acf08e98e744e5384c8bc63ceb0364e68a6854187221c18df61c4797690e"
-dependencies = [
- "dlv-list 0.5.2",
- "hashbrown 0.13.2",
-]
-
 [[package]]
 name = "ordered-multimap"
 version = "0.7.3"
@@ -5962,7 +5881,7 @@ dependencies = [
  "phf_shared 0.11.2",
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -6010,34 +5929,34 @@ dependencies = [
  "serde",
  "serde_derive",
  "strum",
- "thiserror",
+ "thiserror 1.0.69",
 ]
 
 [[package]]
 name = "pin-project"
-version = "1.1.6"
+version = "1.1.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "baf123a161dde1e524adf36f90bc5d8d3462824a9c43553ad07a8183161189ec"
+checksum = "be57f64e946e500c8ee36ef6331845d40a93055567ec57e8fae13efd33759b95"
 dependencies = [
  "pin-project-internal",
 ]
 
 [[package]]
 name = "pin-project-internal"
-version = "1.1.6"
+version = "1.1.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a4502d8515ca9f32f1fb543d987f63d95a14934883db45bdb48060b6b69257f8"
+checksum = "3c0f5fad0874fc7abcd4d750e76917eaebbecaa2c20bde22e1dbeeba8beb758c"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
 name = "pin-project-lite"
-version = "0.2.14"
+version = "0.2.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bda66fc9667c18cb2758a2ac84d1167245054bcf85d5d1aaa6923f45801bdd02"
+checksum = "915a1e146535de9163f3987b8944ed8cf49a18bb0056bcebcdcece385cece4ff"
 
 [[package]]
 name = "pin-utils"
@@ -6052,7 +5971,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "96c8c490f422ef9a4efd2cb5b42b76c8613d7e7dfc1caf667b8a3350a5acc066"
 dependencies = [
  "atomic-waker",
- "fastrand 2.1.1",
+ "fastrand 2.2.0",
  "futures-io",
 ]
 
@@ -6106,7 +6025,7 @@ dependencies = [
  "crc32fast",
  "fdeflate",
  "flate2",
- "miniz_oxide 0.8.0",
+ "miniz_oxide",
 ]
 
 [[package]]
@@ -6127,9 +6046,9 @@ dependencies = [
 
 [[package]]
 name = "polling"
-version = "3.7.3"
+version = "3.7.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cc2790cd301dec6cd3b7a025e4815cf825724a51c98dccfe6a3e55f05ffb6511"
+checksum = "a604568c3202727d1507653cb121dbd627a58684eb09a820fd746bee38b4442f"
 dependencies = [
  "cfg-if 1.0.0",
  "concurrent-queue",
@@ -6178,7 +6097,7 @@ dependencies = [
  "is-terminal",
  "lazy_static",
  "term",
- "unicode-width",
+ "unicode-width 0.1.14",
 ]
 
 [[package]]
@@ -6293,14 +6212,14 @@ dependencies = [
  "memchr",
  "parking_lot 0.12.3",
  "procfs",
- "thiserror",
+ "thiserror 1.0.69",
 ]
 
 [[package]]
 name = "psm"
-version = "0.1.23"
+version = "0.1.24"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "aa37f80ca58604976033fae9515a8a2989fc13797d953f7c04fb8fa36a11f205"
+checksum = "200b9ff220857e53e184257720a14553b2f4aa02577d2ed9842d45d4b9654810"
 dependencies = [
  "cc",
 ]
@@ -6365,16 +6284,6 @@ dependencies = [
  "serde",
 ]
 
-[[package]]
-name = "quick-xml"
-version = "0.30.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "eff6510e86862b57b210fd8cbe8ed3f0d7d600b9c2863cd4549a2e033c66e956"
-dependencies = [
- "memchr",
- "serde",
-]
-
 [[package]]
 name = "quick-xml"
 version = "0.31.0"
@@ -6404,45 +6313,49 @@ dependencies = [
 
 [[package]]
 name = "quinn"
-version = "0.11.5"
+version = "0.11.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8c7c5fdde3cdae7203427dc4f0a68fe0ed09833edc525a03456b153b79828684"
+checksum = "62e96808277ec6f97351a2380e6c25114bc9e67037775464979f3037c92d05ef"
 dependencies = [
  "bytes 1.8.0",
  "pin-project-lite",
  "quinn-proto",
  "quinn-udp",
  "rustc-hash",
- "rustls 0.23.15",
+ "rustls 0.23.17",
  "socket2",
- "thiserror",
- "tokio 1.41.0",
+ "thiserror 2.0.3",
+ "tokio 1.41.1",
  "tracing",
 ]
 
 [[package]]
 name = "quinn-proto"
-version = "0.11.8"
+version = "0.11.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fadfaed2cd7f389d0161bb73eeb07b7b78f8691047a6f3e73caaeae55310a4a6"
+checksum = "a2fe5ef3495d7d2e377ff17b1a8ce2ee2ec2a18cde8b6ad6619d65d0701c135d"
 dependencies = [
  "bytes 1.8.0",
+ "getrandom 0.2.15",
  "rand 0.8.5",
  "ring 0.17.8",
  "rustc-hash",
- "rustls 0.23.15",
+ "rustls 0.23.17",
+ "rustls-pki-types",
  "slab",
- "thiserror",
+ "thiserror 2.0.3",
  "tinyvec",
  "tracing",
+ "web-time",
 ]
 
 [[package]]
 name = "quinn-udp"
-version = "0.5.5"
+version = "0.5.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4fe68c2e9e1a1234e218683dbdf9f9dfcb094113c5ac2b938dfcb9bab4c4140b"
+checksum = "7d5a626c6807713b15cac82a6acaccd6043c9a5408c24baae07611fec3f243da"
 dependencies = [
+ "cfg_aliases",
  "libc",
  "once_cell",
  "socket2",
@@ -6624,7 +6537,7 @@ dependencies = [
  "ryu",
  "sha1_smol",
  "socket2",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "tokio-util",
  "url",
 ]
@@ -6652,18 +6565,18 @@ checksum = "ba009ff324d1fc1b900bd1fdb31564febe58a8ccc8a6fdbb93b543d33b13ca43"
 dependencies = [
  "getrandom 0.2.15",
  "libredox",
- "thiserror",
+ "thiserror 1.0.69",
 ]
 
 [[package]]
 name = "regex"
-version = "1.11.0"
+version = "1.11.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "38200e5ee88914975b69f657f0801b6f6dccafd44fd9326302a4aaeecfacb1d8"
+checksum = "b544ef1b4eac5dc2db33ea63606ae9ffcfac26c1416a2806ae0bf5f56b201191"
 dependencies = [
  "aho-corasick",
  "memchr",
- "regex-automata 0.4.8",
+ "regex-automata 0.4.9",
  "regex-syntax 0.8.5",
 ]
 
@@ -6678,9 +6591,9 @@ dependencies = [
 
 [[package]]
 name = "regex-automata"
-version = "0.4.8"
+version = "0.4.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "368758f23274712b504848e9d5a6f010445cc8b87a7cdb4d7cbee666c1288da3"
+checksum = "809e8dc61f6de73b46c85f4c96486310fe304c434cfa43669d7b40f711150908"
 dependencies = [
  "aho-corasick",
  "memchr",
@@ -6741,6 +6654,7 @@ dependencies = [
  "http 0.2.12",
  "http-body 0.4.6",
  "hyper 0.14.31",
+ "hyper-rustls 0.24.2",
  "hyper-tls 0.5.0",
  "ipnet",
  "js-sys",
@@ -6751,14 +6665,16 @@ dependencies = [
  "once_cell",
  "percent-encoding",
  "pin-project-lite",
+ "rustls 0.21.12",
  "rustls-pemfile 1.0.4",
  "serde",
  "serde_json",
  "serde_urlencoded",
  "sync_wrapper 0.1.2",
  "system-configuration 0.5.1",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "tokio-native-tls",
+ "tokio-rustls 0.24.1",
  "tokio-util",
  "tower-service",
  "url",
@@ -6766,14 +6682,15 @@ dependencies = [
  "wasm-bindgen-futures",
  "wasm-streams",
  "web-sys",
+ "webpki-roots 0.25.4",
  "winreg 0.50.0",
 ]
 
 [[package]]
 name = "reqwest"
-version = "0.12.8"
+version = "0.12.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f713147fbe92361e52392c73b8c9e48c04c6625bce969ef54dc901e58e042a7b"
+checksum = "a77c62af46e79de0a562e1a9849205ffcb7fc1238876e9bd743357570e04046f"
 dependencies = [
  "async-compression",
  "base64 0.22.1",
@@ -6799,7 +6716,8 @@ dependencies = [
  "percent-encoding",
  "pin-project-lite",
  "quinn",
- "rustls 0.23.15",
+ "rustls 0.23.17",
+ "rustls-native-certs 0.8.0",
  "rustls-pemfile 2.2.0",
  "rustls-pki-types",
  "serde",
@@ -6807,7 +6725,7 @@ dependencies = [
  "serde_urlencoded",
  "sync_wrapper 1.0.1",
  "system-configuration 0.6.1",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "tokio-native-tls",
  "tokio-rustls 0.26.0",
  "tokio-util",
@@ -6817,7 +6735,7 @@ dependencies = [
  "wasm-bindgen-futures",
  "wasm-streams",
  "web-sys",
- "webpki-roots",
+ "webpki-roots 0.26.6",
  "windows-registry 0.2.0",
 ]
 
@@ -6839,9 +6757,9 @@ dependencies = [
 
 [[package]]
 name = "rfd"
-version = "0.15.0"
+version = "0.15.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8af382a047821a08aa6bfc09ab0d80ff48d45d8726f7cd8e44891f7cb4a4278e"
+checksum = "46f6f80a9b882647d9014673ca9925d30ffc9750f2eed2b4490e189eaebd01e8"
 dependencies = [
  "ashpd",
  "block2",
@@ -6958,16 +6876,6 @@ dependencies = [
  "ordered-multimap 0.4.3",
 ]
 
-[[package]]
-name = "rust-ini"
-version = "0.19.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7e2a3bcec1f113553ef1c88aae6c020a369d03d55b58de9869a0908930385091"
-dependencies = [
- "cfg-if 1.0.0",
- "ordered-multimap 0.6.0",
-]
-
 [[package]]
 name = "rust-ini"
 version = "0.21.1"
@@ -6986,7 +6894,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1b2ac5ff6acfbe74226fa701b5ef793aaa054055c13ebb7060ad36942956e027"
 dependencies = [
  "async-trait",
- "aws-creds 0.34.1",
+ "aws-creds",
  "aws-region",
  "base64 0.13.1",
  "bytes 1.8.0",
@@ -7005,46 +6913,9 @@ dependencies = [
  "serde",
  "serde_derive",
  "sha2 0.10.8",
- "thiserror",
+ "thiserror 1.0.69",
  "time",
- "tokio 1.41.0",
- "tokio-stream",
- "url",
-]
-
-[[package]]
-name = "rust-s3"
-version = "0.34.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c6679da8efaf4c6f0c161de0961dfe95fb6e9049c398d6fbdada2639f053aedb"
-dependencies = [
- "async-trait",
- "aws-creds 0.36.0",
- "aws-region",
- "base64 0.21.7",
- "bytes 1.8.0",
- "cfg-if 1.0.0",
- "futures 0.3.31",
- "hex",
- "hmac 0.12.1",
- "http 0.2.12",
- "hyper 0.14.31",
- "hyper-tls 0.5.0",
- "log",
- "maybe-async",
- "md5",
- "minidom",
- "native-tls",
- "percent-encoding",
- "quick-xml 0.30.0",
- "serde",
- "serde_derive",
- "serde_json",
- "sha2 0.10.8",
- "thiserror",
- "time",
- "tokio 1.41.0",
- "tokio-native-tls",
+ "tokio 1.41.1",
  "tokio-stream",
  "url",
 ]
@@ -7119,9 +6990,9 @@ dependencies = [
 
 [[package]]
 name = "rustix"
-version = "0.38.37"
+version = "0.38.40"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8acb788b847c24f28525660c4d7758620a7210875711f79e7f663cc152726811"
+checksum = "99e4ea3e1cdc4b559b8e5650f9c8e5998e3e5c1343b4eaf034565f32318d63c0"
 dependencies = [
  "bitflags 2.6.0",
  "errno",
@@ -7130,6 +7001,18 @@ dependencies = [
  "windows-sys 0.52.0",
 ]
 
+[[package]]
+name = "rustls"
+version = "0.20.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1b80e3dec595989ea8510028f30c408a4630db12c9cbb8de34203b89d6577e99"
+dependencies = [
+ "log",
+ "ring 0.16.20",
+ "sct",
+ "webpki",
+]
+
 [[package]]
 name = "rustls"
 version = "0.21.12"
@@ -7144,10 +7027,25 @@ dependencies = [
 
 [[package]]
 name = "rustls"
-version = "0.23.15"
+version = "0.22.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5fbb44d7acc4e873d613422379f69f237a1b141928c02f6bc6ccfddddc2d7993"
+checksum = "bf4ef73721ac7bcd79b2b315da7779d8fc09718c6b3d2d1b2d94850eb8c18432"
 dependencies = [
+ "log",
+ "ring 0.17.8",
+ "rustls-pki-types",
+ "rustls-webpki 0.102.8",
+ "subtle",
+ "zeroize",
+]
+
+[[package]]
+name = "rustls"
+version = "0.23.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f1a745511c54ba6d4465e8d5dfbd81b45791756de28d4981af70d6dca128f1e"
+dependencies = [
+ "log",
  "once_cell",
  "ring 0.17.8",
  "rustls-pki-types",
@@ -7168,6 +7066,19 @@ dependencies = [
  "security-framework",
 ]
 
+[[package]]
+name = "rustls-native-certs"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fcaf18a4f2be7326cd874a5fa579fae794320a0f388d365dca7e480e55f83f8a"
+dependencies = [
+ "openssl-probe",
+ "rustls-pemfile 2.2.0",
+ "rustls-pki-types",
+ "schannel",
+ "security-framework",
+]
+
 [[package]]
 name = "rustls-pemfile"
 version = "1.0.4"
@@ -7191,6 +7102,9 @@ name = "rustls-pki-types"
 version = "1.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "16f1201b3c9a7ee8039bcadc17b7e605e2945b27eee7631788c1bd2b0643674b"
+dependencies = [
+ "web-time",
+]
 
 [[package]]
 name = "rustls-webpki"
@@ -7303,7 +7217,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "serde_derive_internals 0.29.1",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -7375,9 +7289,9 @@ dependencies = [
 
 [[package]]
 name = "security-framework-sys"
-version = "2.12.0"
+version = "2.12.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ea4a292869320c0272d7bc55a5a6aafaff59b4f63404a003887b679a2e05b4b6"
+checksum = "fa39c7303dc58b5543c94d22c1766b0d31f2ee58306363ea622b10bbc075eaa2"
 dependencies = [
  "core-foundation-sys",
  "libc",
@@ -7429,28 +7343,29 @@ checksum = "388a1df253eca08550bef6c72392cfe7c30914bf41df5269b68cbd6ff8f570a3"
 
 [[package]]
 name = "sentry"
-version = "0.32.3"
+version = "0.34.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "00421ed8fa0c995f07cde48ba6c89e80f2b312f74ff637326f392fbfd23abe02"
+checksum = "5484316556650182f03b43d4c746ce0e3e48074a21e2f51244b648b6542e1066"
 dependencies = [
  "httpdate",
- "native-tls",
- "reqwest 0.12.8",
+ "reqwest 0.12.9",
+ "rustls 0.22.4",
  "sentry-backtrace",
  "sentry-contexts",
  "sentry-core",
  "sentry-debug-images",
  "sentry-panic",
  "sentry-tracing",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "ureq",
+ "webpki-roots 0.26.6",
 ]
 
 [[package]]
 name = "sentry-actix"
-version = "0.32.3"
+version = "0.34.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d1986312ea8425a28299262ead2483ca8f0e167994f9239848d5718041abcd49"
+checksum = "e461c7d3a46d298b5ffc66127c1f16454dd11d3d89fcfb21023cd499d82b9a78"
 dependencies = [
  "actix-web",
  "futures-util",
@@ -7459,9 +7374,9 @@ dependencies = [
 
 [[package]]
 name = "sentry-backtrace"
-version = "0.32.3"
+version = "0.34.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a79194074f34b0cbe5dd33896e5928bbc6ab63a889bd9df2264af5acb186921e"
+checksum = "40aa225bb41e2ec9d7c90886834367f560efc1af028f1c5478a6cce6a59c463a"
 dependencies = [
  "backtrace",
  "once_cell",
@@ -7471,9 +7386,9 @@ dependencies = [
 
 [[package]]
 name = "sentry-contexts"
-version = "0.32.3"
+version = "0.34.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "eba8870c5dba2bfd9db25c75574a11429f6b95957b0a78ac02e2970dd7a5249a"
+checksum = "1a8dd746da3d16cb8c39751619cefd4fcdbd6df9610f3310fd646b55f6e39910"
 dependencies = [
  "hostname",
  "libc",
@@ -7485,9 +7400,9 @@ dependencies = [
 
 [[package]]
 name = "sentry-core"
-version = "0.32.3"
+version = "0.34.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "46a75011ea1c0d5c46e9e57df03ce81f5c7f0a9e199086334a1f9c0a541e0826"
+checksum = "161283cfe8e99c8f6f236a402b9ccf726b201f365988b5bb637ebca0abbd4a30"
 dependencies = [
  "once_cell",
  "rand 0.8.5",
@@ -7498,9 +7413,9 @@ dependencies = [
 
 [[package]]
 name = "sentry-debug-images"
-version = "0.32.3"
+version = "0.34.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7ec2a486336559414ab66548da610da5e9626863c3c4ffca07d88f7dc71c8de8"
+checksum = "8fc6b25e945fcaa5e97c43faee0267eebda9f18d4b09a251775d8fef1086238a"
 dependencies = [
  "findshlibs",
  "once_cell",
@@ -7509,9 +7424,9 @@ dependencies = [
 
 [[package]]
 name = "sentry-panic"
-version = "0.32.3"
+version = "0.34.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2eaa3ecfa3c8750c78dcfd4637cfa2598b95b52897ed184b4dc77fcf7d95060d"
+checksum = "bc74f229c7186dd971a9491ffcbe7883544aa064d1589bd30b83fb856cd22d63"
 dependencies = [
  "sentry-backtrace",
  "sentry-core",
@@ -7519,9 +7434,9 @@ dependencies = [
 
 [[package]]
 name = "sentry-tracing"
-version = "0.32.3"
+version = "0.34.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f715932bf369a61b7256687c6f0554141b7ce097287e30e3f7ed6e9de82498fe"
+checksum = "cd3c5faf2103cd01eeda779ea439b68c4ee15adcdb16600836e97feafab362ec"
 dependencies = [
  "sentry-backtrace",
  "sentry-core",
@@ -7531,16 +7446,16 @@ dependencies = [
 
 [[package]]
 name = "sentry-types"
-version = "0.32.3"
+version = "0.34.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4519c900ce734f7a0eb7aba0869dfb225a7af8820634a7dd51449e3b093cfb7c"
+checksum = "5d68cdf6bc41b8ff3ae2a9c4671e97426dcdd154cc1d4b6b72813f285d6b163f"
 dependencies = [
  "debugid",
  "hex",
  "rand 0.8.5",
  "serde",
  "serde_json",
- "thiserror",
+ "thiserror 1.0.69",
  "time",
  "url",
  "uuid 1.11.0",
@@ -7548,9 +7463,9 @@ dependencies = [
 
 [[package]]
 name = "serde"
-version = "1.0.213"
+version = "1.0.215"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3ea7893ff5e2466df8d720bb615088341b295f849602c6956047f8f80f0e9bc1"
+checksum = "6513c1ad0b11a9376da888e3e0baa0077f1aed55c17f50e7b2397136129fb88f"
 dependencies = [
  "serde_derive",
 ]
@@ -7574,19 +7489,19 @@ checksum = "fb3aa78ecda1ebc9ec9847d5d3aba7d618823446a049ba2491940506da6e2782"
 dependencies = [
  "log",
  "serde",
- "thiserror",
+ "thiserror 1.0.69",
  "xml-rs",
 ]
 
 [[package]]
 name = "serde_derive"
-version = "1.0.213"
+version = "1.0.215"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7e85ad2009c50b58e87caa8cd6dac16bdf511bbfb7af6c33df902396aa480fa5"
+checksum = "ad1e866f866923f252f05c889987993144fb74e722403468a4ebd70c3cd756c0"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -7608,7 +7523,7 @@ checksum = "18d26a20a969b9e3fdf2fc2d9f21eda6c40e2de84c9408bb5d3b05d499aae711"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -7661,7 +7576,7 @@ checksum = "c7715380eec75f029a4ef7de39a9200e0a63823176b759d055b613f5a87df6a6"
 dependencies = [
  "percent-encoding",
  "serde",
- "thiserror",
+ "thiserror 1.0.69",
 ]
 
 [[package]]
@@ -7672,7 +7587,7 @@ checksum = "8cac3f1e2ca2fe333923a1ae72caca910b98ed0630bb35ef6f8c8517d6e81afa"
 dependencies = [
  "percent-encoding",
  "serde",
- "thiserror",
+ "thiserror 1.0.69",
 ]
 
 [[package]]
@@ -7683,7 +7598,7 @@ checksum = "6c64451ba24fc7a6a2d60fc75dd9c83c90903b19028d4eff35e88fc1e86564e9"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -7734,7 +7649,7 @@ dependencies = [
  "darling 0.20.10",
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -8010,9 +7925,9 @@ dependencies = [
 
 [[package]]
 name = "spdx"
-version = "0.10.6"
+version = "0.10.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "47317bbaf63785b53861e1ae2d11b80d6b624211d42cb20efcd210ee6f8a14bc"
+checksum = "bae30cc7bfe3656d60ee99bf6836f472b0c53dddcbf335e253329abb16e535a2"
 dependencies = [
  "smallvec 1.13.2",
 ]
@@ -8103,19 +8018,19 @@ dependencies = [
  "paste",
  "percent-encoding",
  "rust_decimal",
- "rustls 0.23.15",
+ "rustls 0.23.17",
  "rustls-pemfile 2.2.0",
  "serde",
  "serde_json",
  "sha2 0.10.8",
  "smallvec 1.13.2",
  "sqlformat",
- "thiserror",
- "tokio 1.41.0",
+ "thiserror 1.0.69",
+ "tokio 1.41.1",
  "tokio-stream",
  "tracing",
  "url",
- "webpki-roots",
+ "webpki-roots 0.26.6",
 ]
 
 [[package]]
@@ -8128,7 +8043,7 @@ dependencies = [
  "quote",
  "sqlx-core",
  "sqlx-macros-core",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -8151,9 +8066,9 @@ dependencies = [
  "sqlx-mysql",
  "sqlx-postgres",
  "sqlx-sqlite",
- "syn 2.0.82",
+ "syn 2.0.87",
  "tempfile",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "url",
 ]
 
@@ -8196,7 +8111,7 @@ dependencies = [
  "smallvec 1.13.2",
  "sqlx-core",
  "stringprep",
- "thiserror",
+ "thiserror 1.0.69",
  "tracing",
  "whoami",
 ]
@@ -8236,7 +8151,7 @@ dependencies = [
  "smallvec 1.13.2",
  "sqlx-core",
  "stringprep",
- "thiserror",
+ "thiserror 1.0.69",
  "tracing",
  "whoami",
 ]
@@ -8364,7 +8279,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "rustversion",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -8397,27 +8312,15 @@ dependencies = [
 
 [[package]]
 name = "syn"
-version = "2.0.82"
+version = "2.0.87"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "83540f837a8afc019423a8edb95b52a8effe46957ee402287f4292fae35be021"
+checksum = "25aa4ce346d03a6dcd68dd8b4010bcb74e54e62c90c573f394c46eae99aba32d"
 dependencies = [
  "proc-macro2",
  "quote",
  "unicode-ident",
 ]
 
-[[package]]
-name = "syn_derive"
-version = "0.1.8"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1329189c02ff984e9736652b1631330da25eaa6bc639089ed4915d25446cbe7b"
-dependencies = [
- "proc-macro-error",
- "proc-macro2",
- "quote",
- "syn 2.0.82",
-]
-
 [[package]]
 name = "sync_wrapper"
 version = "0.1.2"
@@ -8441,7 +8344,7 @@ checksum = "c8af7666ab7b6390ab78131fb5b0fce11d6b7a6951602017c35fa82800708971"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -8456,9 +8359,9 @@ dependencies = [
 
 [[package]]
 name = "sys-locale"
-version = "0.3.1"
+version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e801cf239ecd6ccd71f03d270d67dd53d13e90aab208bf4b8fe4ad957ea949b0"
+checksum = "8eab9a99a024a169fe8a903cf9d4a3b3601109bcc13bd9e3c6fff259138626c4"
 dependencies = [
  "libc",
 ]
@@ -8535,9 +8438,9 @@ dependencies = [
 
 [[package]]
 name = "tao"
-version = "0.30.3"
+version = "0.30.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a0dbbebe82d02044dfa481adca1550d6dd7bd16e086bc34fa0fbecceb5a63751"
+checksum = "6682a07cf5bab0b8a2bd20d0a542917ab928b5edb75ebd4eda6b05cbaab872da"
 dependencies = [
  "bitflags 2.6.0",
  "cocoa 0.26.0",
@@ -8580,7 +8483,7 @@ checksum = "f4e16beb8b2ac17db28eab8bca40e62dbfbb34c0fcdc6d9826b11b7b5d047dfd"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -8591,9 +8494,9 @@ checksum = "55937e1799185b12863d447f42597ed69d9928686b8d88a1df17376a097d8369"
 
 [[package]]
 name = "tar"
-version = "0.4.42"
+version = "0.4.43"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4ff6c40d3aedb5e06b57c6f669ad17ab063dd1e63d977c6a88e7f4dfa4f04020"
+checksum = "c65998313f8e17d0d553d28f91a0df93e4dbbbf770279c7bc21ca0f09ea1a1f6"
 dependencies = [
  "filetime",
  "libc",
@@ -8608,9 +8511,9 @@ checksum = "61c41af27dd6d1e27b1b16b489db798443478cef1f06a660c96db617ba5de3b1"
 
 [[package]]
 name = "tauri"
-version = "2.0.6"
+version = "2.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d3889b392db6d32a105d3757230ea0220090b8f94c90d3e60b6c5eb91178ab1b"
+checksum = "e545de0a2dfe296fa67db208266cd397c5a55ae782da77973ef4c4fac90e9f2c"
 dependencies = [
  "anyhow",
  "bytes 1.8.0",
@@ -8635,7 +8538,7 @@ dependencies = [
  "percent-encoding",
  "plist",
  "raw-window-handle 0.6.2",
- "reqwest 0.12.8",
+ "reqwest 0.12.9",
  "serde",
  "serde_json",
  "serde_repr",
@@ -8646,8 +8549,8 @@ dependencies = [
  "tauri-runtime",
  "tauri-runtime-wry",
  "tauri-utils",
- "thiserror",
- "tokio 1.41.0",
+ "thiserror 2.0.3",
+ "tokio 1.41.1",
  "tray-icon",
  "url",
  "urlpattern",
@@ -8659,16 +8562,16 @@ dependencies = [
 
 [[package]]
 name = "tauri-build"
-version = "2.0.2"
+version = "2.0.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9f96827ccfb1aa40d55d0ded79562d18ba18566657a553f992a982d755148376"
+checksum = "7bd2a4bcfaf5fb9f4be72520eefcb61ae565038f8ccba2a497d8c28f463b8c01"
 dependencies = [
  "anyhow",
  "cargo_toml",
  "dirs 5.0.1",
  "glob",
  "heck 0.5.0",
- "json-patch 3.0.1",
+ "json-patch",
  "quote",
  "schemars",
  "semver 1.0.23",
@@ -8683,14 +8586,14 @@ dependencies = [
 
 [[package]]
 name = "tauri-codegen"
-version = "2.0.2"
+version = "2.0.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8947f16f47becd9e9cd39b74ee337fd1981574d78819be18e4384d85e5a0b82f"
+checksum = "bf79faeecf301d3e969b1fae977039edb77a4c1f25cc0a961be298b54bff97cf"
 dependencies = [
  "base64 0.22.1",
  "brotli 7.0.0",
  "ico",
- "json-patch 2.0.0",
+ "json-patch",
  "plist",
  "png",
  "proc-macro2",
@@ -8699,9 +8602,9 @@ dependencies = [
  "serde",
  "serde_json",
  "sha2 0.10.8",
- "syn 2.0.82",
+ "syn 2.0.87",
  "tauri-utils",
- "thiserror",
+ "thiserror 2.0.3",
  "time",
  "url",
  "uuid 1.11.0",
@@ -8710,23 +8613,23 @@ dependencies = [
 
 [[package]]
 name = "tauri-macros"
-version = "2.0.2"
+version = "2.0.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8bd1c8d4a66799d3438747c3a79705cd665a95d6f24cb5f315413ff7a981fe2a"
+checksum = "c52027c8c5afb83166dacddc092ee8fff50772f9646d461d8c33ee887e447a03"
 dependencies = [
  "heck 0.5.0",
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
  "tauri-codegen",
  "tauri-utils",
 ]
 
 [[package]]
 name = "tauri-plugin"
-version = "2.0.2"
+version = "2.0.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6fa4e6c94cb1d635f65a770c69e23de1bc054b0e4c554fa037a7cc7676333d39"
+checksum = "e753f2a30933a9bbf0a202fa47d7cc4a3401f06e8d6dcc53b79aa62954828c79"
 dependencies = [
  "anyhow",
  "glob",
@@ -8753,7 +8656,7 @@ dependencies = [
  "tauri",
  "tauri-plugin",
  "tauri-utils",
- "thiserror",
+ "thiserror 1.0.69",
  "url",
  "windows-registry 0.3.0",
  "windows-result",
@@ -8773,7 +8676,7 @@ dependencies = [
  "tauri",
  "tauri-plugin",
  "tauri-plugin-fs",
- "thiserror",
+ "thiserror 1.0.69",
  "url",
 ]
 
@@ -8793,7 +8696,7 @@ dependencies = [
  "serde_repr",
  "tauri",
  "tauri-plugin",
- "thiserror",
+ "thiserror 1.0.69",
  "url",
  "uuid 1.11.0",
 ]
@@ -8813,7 +8716,7 @@ dependencies = [
  "sys-locale",
  "tauri",
  "tauri-plugin",
- "thiserror",
+ "thiserror 1.0.69",
 ]
 
 [[package]]
@@ -8833,8 +8736,8 @@ dependencies = [
  "shared_child",
  "tauri",
  "tauri-plugin",
- "thiserror",
- "tokio 1.41.0",
+ "thiserror 1.0.69",
+ "tokio 1.41.1",
 ]
 
 [[package]]
@@ -8847,9 +8750,9 @@ dependencies = [
  "serde",
  "serde_json",
  "tauri",
- "thiserror",
+ "thiserror 1.0.69",
  "windows-sys 0.59.0",
- "zbus",
+ "zbus 4.4.0",
 ]
 
 [[package]]
@@ -8866,7 +8769,7 @@ dependencies = [
  "infer 0.16.0",
  "minisign-verify",
  "percent-encoding",
- "reqwest 0.12.8",
+ "reqwest 0.12.9",
  "semver 1.0.23",
  "serde",
  "serde_json",
@@ -8874,9 +8777,9 @@ dependencies = [
  "tauri",
  "tauri-plugin",
  "tempfile",
- "thiserror",
+ "thiserror 1.0.69",
  "time",
- "tokio 1.41.0",
+ "tokio 1.41.1",
  "url",
  "windows-sys 0.59.0",
  "zip 2.2.0",
@@ -8884,9 +8787,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-plugin-window-state"
-version = "2.0.1"
+version = "2.0.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fd1cef203a15b4772898e7bc8e57c1f34696e39848987dfcd294d51ba0525650"
+checksum = "683c8764751fbbcebf3a594bcee24cf84c62773fa0080d1b40fc80698472421e"
 dependencies = [
  "bitflags 2.6.0",
  "log",
@@ -8894,14 +8797,14 @@ dependencies = [
  "serde_json",
  "tauri",
  "tauri-plugin",
- "thiserror",
+ "thiserror 1.0.69",
 ]
 
 [[package]]
 name = "tauri-runtime"
-version = "2.1.1"
+version = "2.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a1ef7363e7229ac8d04e8a5d405670dbd43dde8fc4bc3bc56105c35452d03784"
+checksum = "cce18d43f80d4aba3aa8a0c953bbe835f3d0f2370aca75e8dbb14bd4bab27958"
 dependencies = [
  "dpi",
  "gtk",
@@ -8911,16 +8814,16 @@ dependencies = [
  "serde",
  "serde_json",
  "tauri-utils",
- "thiserror",
+ "thiserror 2.0.3",
  "url",
  "windows 0.58.0",
 ]
 
 [[package]]
 name = "tauri-runtime-wry"
-version = "2.1.2"
+version = "2.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "62fa2068e8498ad007b54d5773d03d57c3ff6dd96f8c8ce58beff44d0d5e0d30"
+checksum = "9f442a38863e10129ffe2cec7bd09c2dcf8a098a3a27801a476a304d5bb991d2"
 dependencies = [
  "gtk",
  "http 1.1.0",
@@ -8944,9 +8847,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-utils"
-version = "2.0.2"
+version = "2.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1fc65d6f5c54e56b66258948a6d9e47a82ea41f4b5a7612bfbdd1634c2913ed0"
+checksum = "9271a88f99b4adea0dc71d0baca4505475a0bbd139fb135f62958721aaa8fe54"
 dependencies = [
  "brotli 7.0.0",
  "cargo_metadata",
@@ -8954,8 +8857,9 @@ dependencies = [
  "dunce",
  "glob",
  "html5ever",
+ "http 1.1.0",
  "infer 0.16.0",
- "json-patch 2.0.0",
+ "json-patch",
  "kuchikiki",
  "log",
  "memchr",
@@ -8970,7 +8874,7 @@ dependencies = [
  "serde_json",
  "serde_with",
  "swift-rs",
- "thiserror",
+ "thiserror 2.0.3",
  "toml 0.8.19",
  "url",
  "urlpattern",
@@ -8990,12 +8894,12 @@ dependencies = [
 
 [[package]]
 name = "tempfile"
-version = "3.13.0"
+version = "3.14.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f0f2c9fc62d0beef6951ccffd757e241266a2c833136efbe35af6cd2567dca5b"
+checksum = "28cce251fcbc87fac86a866eeb0d6c2d536fc16d06f184bb61aeae11aa4cee0c"
 dependencies = [
  "cfg-if 1.0.0",
- "fastrand 2.1.1",
+ "fastrand 2.2.0",
  "once_cell",
  "rustix",
  "windows-sys 0.59.0",
@@ -9058,7 +8962,7 @@ dependencies = [
  "paste",
  "rand 0.8.5",
  "regex",
- "reqwest 0.12.8",
+ "reqwest 0.12.9",
  "serde",
  "serde_ini",
  "serde_json",
@@ -9069,8 +8973,8 @@ dependencies = [
  "sysinfo",
  "tauri",
  "tempfile",
- "thiserror",
- "tokio 1.41.0",
+ "thiserror 1.0.69",
+ "tokio 1.41.1",
  "toml 0.8.19",
  "tracing",
  "tracing-error",
@@ -9113,8 +9017,8 @@ dependencies = [
  "tauri-plugin-updater",
  "tauri-plugin-window-state",
  "theseus",
- "thiserror",
- "tokio 1.41.0",
+ "thiserror 1.0.69",
+ "tokio 1.41.1",
  "tracing",
  "tracing-error",
  "url",
@@ -9131,8 +9035,8 @@ dependencies = [
  "serde",
  "serde_json",
  "theseus",
- "thiserror",
- "tokio 1.41.0",
+ "thiserror 1.0.69",
+ "tokio 1.41.1",
  "tracing",
  "tracing-error",
  "tracing-subscriber",
@@ -9149,22 +9053,42 @@ checksum = "8eaa81235c7058867fa8c0e7314f33dcce9c215f535d1913822a2b3f5e289f3c"
 
 [[package]]
 name = "thiserror"
-version = "1.0.65"
+version = "1.0.69"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5d11abd9594d9b38965ef50805c5e469ca9cc6f197f883f717e0269a3057b3d5"
+checksum = "b6aaf5339b578ea85b50e080feb250a3e8ae8cfcdff9a461c9ec2904bc923f52"
 dependencies = [
- "thiserror-impl",
+ "thiserror-impl 1.0.69",
+]
+
+[[package]]
+name = "thiserror"
+version = "2.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c006c85c7651b3cf2ada4584faa36773bd07bac24acfb39f3c431b36d7e667aa"
+dependencies = [
+ "thiserror-impl 2.0.3",
 ]
 
 [[package]]
 name = "thiserror-impl"
-version = "1.0.65"
+version = "1.0.69"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ae71770322cbd277e69d762a16c444af02aa0575ac0d174f0b9562d3b37f8602"
+checksum = "4fee6c4efc90059e10f81e6d42c60a18f76588c3d74cb83a0b242a2b6c7504c1"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
+]
+
+[[package]]
+name = "thiserror-impl"
+version = "2.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f077553d607adc1caf65430528a576c757a71ed73944b66ebb58ef2bbd243568"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -9279,9 +9203,9 @@ dependencies = [
 
 [[package]]
 name = "tokio"
-version = "1.41.0"
+version = "1.41.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "145f3413504347a2be84393cc8a7d2fb4d863b375909ea59f2158261aa258bbb"
+checksum = "22cfb5bee7a6a52939ca9224d6ac897bb669134078daa8735560897f69de4d33"
 dependencies = [
  "backtrace",
  "bytes 1.8.0",
@@ -9357,7 +9281,7 @@ checksum = "693d596312e88961bc67d7f1f97af8a70227d9f90c31bba5806eec004978d752"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -9367,7 +9291,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bbae76ab933c85776efabc971569dd6119c580d8f5d448769dec1764bf796ef2"
 dependencies = [
  "native-tls",
- "tokio 1.41.0",
+ "tokio 1.41.1",
 ]
 
 [[package]]
@@ -9396,7 +9320,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c28327cf380ac148141087fbfb9de9d7bd4e84ab5d2c28fbc911d753de8a7081"
 dependencies = [
  "rustls 0.21.12",
- "tokio 1.41.0",
+ "tokio 1.41.1",
 ]
 
 [[package]]
@@ -9405,9 +9329,9 @@ version = "0.26.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0c7bc40d0e5a97695bb96e27995cd3a08538541b0a846f65bba7a359f36700d4"
 dependencies = [
- "rustls 0.23.15",
+ "rustls 0.23.17",
  "rustls-pki-types",
- "tokio 1.41.0",
+ "tokio 1.41.1",
 ]
 
 [[package]]
@@ -9418,7 +9342,7 @@ checksum = "4f4e6ce100d0eb49a2734f8c0812bcd324cf357d21810932c5df6b96ef2b86f1"
 dependencies = [
  "futures-core",
  "pin-project-lite",
- "tokio 1.41.0",
+ "tokio 1.41.1",
 ]
 
 [[package]]
@@ -9518,7 +9442,7 @@ dependencies = [
  "futures-io",
  "futures-sink",
  "pin-project-lite",
- "tokio 1.41.0",
+ "tokio 1.41.1",
 ]
 
 [[package]]
@@ -9631,7 +9555,7 @@ checksum = "34704c8d6ebcbc939824180af020566b01a7c01f80641264eba0999f6c2b6be7"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -9713,7 +9637,7 @@ dependencies = [
  "once_cell",
  "png",
  "serde",
- "thiserror",
+ "thiserror 1.0.69",
  "windows-sys 0.59.0",
 ]
 
@@ -9742,10 +9666,10 @@ dependencies = [
  "httparse",
  "log",
  "rand 0.8.5",
- "rustls 0.23.15",
+ "rustls 0.23.17",
  "rustls-pki-types",
  "sha1 0.10.6",
- "thiserror",
+ "thiserror 1.0.69",
  "utf-8",
 ]
 
@@ -9867,6 +9791,12 @@ version = "0.1.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7dd6e30e90baa6f72411720665d41d89b9a3d039dc45b8faea1ddd07f617f6af"
 
+[[package]]
+name = "unicode-width"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1fc81956842c57dac11422a97c3b8195a1ff727f06e85c84ed2e8aa277c9a0fd"
+
 [[package]]
 name = "unicode_categories"
 version = "0.1.1"
@@ -9893,19 +9823,21 @@ checksum = "b74fc6b57825be3373f7054754755f03ac3a8f5d70015ccad699ba2029956f4a"
 dependencies = [
  "base64 0.22.1",
  "log",
- "native-tls",
  "once_cell",
+ "rustls 0.23.17",
+ "rustls-pki-types",
  "url",
+ "webpki-roots 0.26.6",
 ]
 
 [[package]]
 name = "url"
-version = "2.5.2"
+version = "2.5.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "22784dbdf76fdde8af1aeda5622b546b422b6fc585325248a2bf9f5e41e94d6c"
+checksum = "8d157f1b96d14500ffdc1f10ba712e780825526c03d9a49b4d0324b0d9113ada"
 dependencies = [
  "form_urlencoded",
- "idna 0.5.0",
+ "idna 1.0.3",
  "percent-encoding",
  "serde",
 ]
@@ -10140,7 +10072,7 @@ dependencies = [
  "once_cell",
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
  "wasm-bindgen-shared",
 ]
 
@@ -10174,7 +10106,7 @@ checksum = "26c6ab57572f7a24a4985830b120de1594465e5d500f24afe89e16b4e833ef68"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
  "wasm-bindgen-backend",
  "wasm-bindgen-shared",
 ]
@@ -10187,9 +10119,9 @@ checksum = "65fc09f10666a9f147042251e0dda9c18f166ff7de300607007e96bdebc1068d"
 
 [[package]]
 name = "wasm-streams"
-version = "0.4.1"
+version = "0.4.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4e072d4e72f700fb3443d8fe94a39315df013eef1104903cdb0a2abd322bbecd"
+checksum = "15053d8d85c7eccdbefef60f06769760a563c7f0a9d6902a13d35c7800b0ad65"
 dependencies = [
  "futures-util",
  "js-sys",
@@ -10214,9 +10146,9 @@ dependencies = [
 
 [[package]]
 name = "wayland-client"
-version = "0.31.6"
+version = "0.31.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e3f45d1222915ef1fd2057220c1d9d9624b7654443ea35c3877f7a52bd0a5a2d"
+checksum = "b66249d3fc69f76fd74c82cc319300faa554e9d865dab1f7cd66cc20db10b280"
 dependencies = [
  "bitflags 2.6.0",
  "rustix",
@@ -10226,9 +10158,9 @@ dependencies = [
 
 [[package]]
 name = "wayland-protocols"
-version = "0.32.4"
+version = "0.32.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2b5755d77ae9040bb872a25026555ce4cb0ae75fd923e90d25fba07d81057de0"
+checksum = "7cd0ade57c4e6e9a8952741325c30bf82f4246885dca8bf561898b86d0c1f58e"
 dependencies = [
  "bitflags 2.6.0",
  "wayland-backend",
@@ -10268,6 +10200,16 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "web-time"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5a6580f308b1fad9207618087a65c04e7a10bc77e02c8e84e9b00dd4b12fa0bb"
+dependencies = [
+ "js-sys",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "webbrowser"
 version = "0.8.15"
@@ -10335,10 +10277,35 @@ version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8f53152f51fb5af0c08484c33d16cca96175881d1f3dec068c23b31a158c2d99"
 dependencies = [
- "image 0.25.4",
+ "image 0.25.5",
  "libwebp-sys",
 ]
 
+[[package]]
+name = "webpki"
+version = "0.22.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ed63aea5ce73d0ff405984102c42de94fc55a6b75765d621c65262469b3c9b53"
+dependencies = [
+ "ring 0.17.8",
+ "untrusted 0.9.0",
+]
+
+[[package]]
+name = "webpki-roots"
+version = "0.22.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b6c71e40d7d2c34a5106301fb632274ca37242cd0c9d3e64dbece371a40a2d87"
+dependencies = [
+ "webpki",
+]
+
+[[package]]
+name = "webpki-roots"
+version = "0.25.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5f20c57d8d7db6d3b86154206ae5d8fba62dd39573114de97c2cb0578251f8e1"
+
 [[package]]
 name = "webpki-roots"
 version = "0.26.6"
@@ -10370,7 +10337,7 @@ checksum = "1d228f15bba3b9d56dde8bddbee66fa24545bd17b48d5128ccf4a8742b18e431"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -10379,7 +10346,7 @@ version = "0.33.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a3a3e2eeb58f82361c93f9777014668eb3d07e7d174ee4c819575a9208011886"
 dependencies = [
- "thiserror",
+ "thiserror 1.0.69",
  "windows 0.58.0",
  "windows-core 0.58.0",
 ]
@@ -10542,7 +10509,7 @@ checksum = "2bbd5b46c938e506ecbce286b6628a02171d56153ba733b6c741fc627ec9579b"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -10553,7 +10520,7 @@ checksum = "053c4c462dc91d3b1504c6fe5a726dd15e216ba718e84a0e46a88fbe5ded3515"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -10891,12 +10858,13 @@ checksum = "1e9df38ee2d2c3c5948ea468a8406ff0db0b29ae1ffde1bcf20ef305bcc95c51"
 
 [[package]]
 name = "wry"
-version = "0.46.3"
+version = "0.47.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cd5cdf57c66813d97601181349c63b96994b3074fc3d7a31a8cce96e968e3bbd"
+checksum = "553ca1ce149982123962fac2506aa75b8b76288779a77e72b12fa2fc34938647"
 dependencies = [
  "base64 0.22.1",
  "block2",
+ "cookie 0.18.1",
  "crossbeam-channel",
  "dpi",
  "dunce",
@@ -10920,7 +10888,8 @@ dependencies = [
  "sha2 0.10.8",
  "soup3",
  "tao-macros",
- "thiserror",
+ "thiserror 1.0.69",
+ "url",
  "webkit2gtk",
  "webkit2gtk-sys",
  "webview2-com",
@@ -10993,9 +10962,9 @@ dependencies = [
 
 [[package]]
 name = "xml-rs"
-version = "0.8.22"
+version = "0.8.23"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "af4e2e2f7cba5a093896c1e150fbfe177d1883e7448200efb81d40b9d339ef26"
+checksum = "af310deaae937e48a26602b730250b4949e125f468f11e6990be3e5304ddd96f"
 
 [[package]]
 name = "xz2"
@@ -11060,7 +11029,7 @@ checksum = "28cc31741b18cb6f1d5ff12f5b7523e3d6eb0852bbbad19d73905511d9849b95"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
  "synstructure",
 ]
 
@@ -11093,14 +11062,43 @@ dependencies = [
  "serde_repr",
  "sha1 0.10.6",
  "static_assertions",
- "tokio 1.41.0",
  "tracing",
  "uds_windows",
  "windows-sys 0.52.0",
  "xdg-home",
- "zbus_macros",
- "zbus_names",
- "zvariant",
+ "zbus_macros 4.4.0",
+ "zbus_names 3.0.0",
+ "zvariant 4.2.0",
+]
+
+[[package]]
+name = "zbus"
+version = "5.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1162094dc63b1629fcc44150bcceeaa80798cd28bcbe7fa987b65a034c258608"
+dependencies = [
+ "async-broadcast",
+ "async-recursion",
+ "async-trait",
+ "enumflags2",
+ "event-listener 5.3.1",
+ "futures-core",
+ "futures-util",
+ "hex",
+ "nix",
+ "ordered-stream",
+ "serde",
+ "serde_repr",
+ "static_assertions",
+ "tokio 1.41.1",
+ "tracing",
+ "uds_windows",
+ "windows-sys 0.59.0",
+ "winnow 0.6.20",
+ "xdg-home",
+ "zbus_macros 5.1.1",
+ "zbus_names 4.1.0",
+ "zvariant 5.1.0",
 ]
 
 [[package]]
@@ -11112,8 +11110,23 @@ dependencies = [
  "proc-macro-crate 3.2.0",
  "proc-macro2",
  "quote",
- "syn 2.0.82",
- "zvariant_utils",
+ "syn 2.0.87",
+ "zvariant_utils 2.1.0",
+]
+
+[[package]]
+name = "zbus_macros"
+version = "5.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2cd2dcdce3e2727f7d74b7e33b5a89539b3cc31049562137faf7ae4eb86cd16d"
+dependencies = [
+ "proc-macro-crate 3.2.0",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.87",
+ "zbus_names 4.1.0",
+ "zvariant 5.1.0",
+ "zvariant_utils 3.0.2",
 ]
 
 [[package]]
@@ -11124,7 +11137,19 @@ checksum = "4b9b1fef7d021261cc16cba64c351d291b715febe0fa10dc3a443ac5a5022e6c"
 dependencies = [
  "serde",
  "static_assertions",
- "zvariant",
+ "zvariant 4.2.0",
+]
+
+[[package]]
+name = "zbus_names"
+version = "4.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "856b7a38811f71846fd47856ceee8bccaec8399ff53fb370247e66081ace647b"
+dependencies = [
+ "serde",
+ "static_assertions",
+ "winnow 0.6.20",
+ "zvariant 5.1.0",
 ]
 
 [[package]]
@@ -11145,7 +11170,7 @@ checksum = "fa4f8080344d4671fb4e831a13ad1e68092748387dfc4f55e356242fae12ce3e"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -11165,7 +11190,7 @@ checksum = "0ea7b4a3637ea8669cedf0f1fd5c286a17f3de97b8dd5a70a6c167a1730e63a5"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
  "synstructure",
 ]
 
@@ -11194,7 +11219,7 @@ checksum = "6eafa6dfb17584ea3e2bd6e76e0cc15ad7af12b09abdd1ca55961bed9b1063c6"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
 ]
 
 [[package]]
@@ -11229,7 +11254,7 @@ dependencies = [
  "displaydoc",
  "indexmap 2.6.0",
  "memchr",
- "thiserror",
+ "thiserror 1.0.69",
 ]
 
 [[package]]
@@ -11293,13 +11318,28 @@ name = "zvariant"
 version = "4.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2084290ab9a1c471c38fc524945837734fbf124487e105daec2bb57fd48c81fe"
+dependencies = [
+ "endi",
+ "enumflags2",
+ "serde",
+ "static_assertions",
+ "zvariant_derive 4.2.0",
+]
+
+[[package]]
+name = "zvariant"
+version = "5.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a1200ee6ac32f1e5a312e455a949a4794855515d34f9909f4a3e082d14e1a56f"
 dependencies = [
  "endi",
  "enumflags2",
  "serde",
  "static_assertions",
  "url",
- "zvariant_derive",
+ "winnow 0.6.20",
+ "zvariant_derive 5.1.0",
+ "zvariant_utils 3.0.2",
 ]
 
 [[package]]
@@ -11311,8 +11351,21 @@ dependencies = [
  "proc-macro-crate 3.2.0",
  "proc-macro2",
  "quote",
- "syn 2.0.82",
- "zvariant_utils",
+ "syn 2.0.87",
+ "zvariant_utils 2.1.0",
+]
+
+[[package]]
+name = "zvariant_derive"
+version = "5.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "687e3b97fae6c9104fbbd36c73d27d149abf04fb874e2efbd84838763daa8916"
+dependencies = [
+ "proc-macro-crate 3.2.0",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.87",
+ "zvariant_utils 3.0.2",
 ]
 
 [[package]]
@@ -11323,7 +11376,21 @@ checksum = "c51bcff7cc3dbb5055396bcf774748c3dab426b4b8659046963523cee4808340"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.82",
+ "syn 2.0.87",
+]
+
+[[package]]
+name = "zvariant_utils"
+version = "3.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "20d1d011a38f12360e5fcccceeff5e2c42a8eb7f27f0dcba97a0862ede05c9c6"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "serde",
+ "static_assertions",
+ "syn 2.0.87",
+ "winnow 0.6.20",
 ]
 
 [[package]]
diff --git a/apps/app-frontend/src/pages/Settings.vue b/apps/app-frontend/src/pages/Settings.vue
index ce615e4ee..ffdb0ac97 100644
--- a/apps/app-frontend/src/pages/Settings.vue
+++ b/apps/app-frontend/src/pages/Settings.vue
@@ -402,7 +402,14 @@ await getBranches()
             The memory allocated to each instance when it is ran.
           </span>
         </label>
-        <Slider id="max-memory" v-model="settings.memory.maximum" :min="8" :max="maxMemory" :step="64" unit="mb" />
+        <Slider
+          id="max-memory"
+          v-model="settings.memory.maximum"
+          :min="8"
+          :max="maxMemory"
+          :step="64"
+          unit="MB"
+        />
       </div>
     </Card>
     <Card>
diff --git a/apps/app/capabilities/plugins.json b/apps/app/capabilities/plugins.json
index efca87b7f..b2beac297 100644
--- a/apps/app/capabilities/plugins.json
+++ b/apps/app/capabilities/plugins.json
@@ -2,9 +2,7 @@
   "identifier": "plugins",
   "description": "",
   "local": true,
-  "windows": [
-    "main"
-  ],
+  "windows": ["main"],
   "permissions": [
     "dialog:allow-open",
     "dialog:allow-confirm",
diff --git a/apps/app/gen/schemas/desktop-schema.json b/apps/app/gen/schemas/desktop-schema.json
index ca5047808..e6a003aad 100644
--- a/apps/app/gen/schemas/desktop-schema.json
+++ b/apps/app/gen/schemas/desktop-schema.json
@@ -84,7 +84,7 @@
           }
         },
         "permissions": {
-          "description": "List of permissions attached to this capability.\n\nMust include the plugin name as prefix in the form of `${plugin-name}:${permission-name}`. For commands directly implemented in the application itself only `${permission-name}` is required.\n\n## Example\n\n```json [ \"core:default\", \"shell:allow-open\", \"dialog:open\", { \"identifier\": \"fs:allow-write-text-file\", \"allow\": [{ \"path\": \"$HOME/test.txt\" }] } ```",
+          "description": "List of permissions attached to this capability.\n\nMust include the plugin name as prefix in the form of `${plugin-name}:${permission-name}`. For commands directly implemented in the application itself only `${permission-name}` is required.\n\n## Example\n\n```json [ \"core:default\", \"shell:allow-open\", \"dialog:open\", { \"identifier\": \"fs:allow-write-text-file\", \"allow\": [{ \"path\": \"$HOME/test.txt\" }] } ] ```",
           "type": "array",
           "items": {
             "$ref": "#/definitions/PermissionEntry"
diff --git a/apps/app/gen/schemas/macOS-schema.json b/apps/app/gen/schemas/macOS-schema.json
index ca5047808..e6a003aad 100644
--- a/apps/app/gen/schemas/macOS-schema.json
+++ b/apps/app/gen/schemas/macOS-schema.json
@@ -84,7 +84,7 @@
           }
         },
         "permissions": {
-          "description": "List of permissions attached to this capability.\n\nMust include the plugin name as prefix in the form of `${plugin-name}:${permission-name}`. For commands directly implemented in the application itself only `${permission-name}` is required.\n\n## Example\n\n```json [ \"core:default\", \"shell:allow-open\", \"dialog:open\", { \"identifier\": \"fs:allow-write-text-file\", \"allow\": [{ \"path\": \"$HOME/test.txt\" }] } ```",
+          "description": "List of permissions attached to this capability.\n\nMust include the plugin name as prefix in the form of `${plugin-name}:${permission-name}`. For commands directly implemented in the application itself only `${permission-name}` is required.\n\n## Example\n\n```json [ \"core:default\", \"shell:allow-open\", \"dialog:open\", { \"identifier\": \"fs:allow-write-text-file\", \"allow\": [{ \"path\": \"$HOME/test.txt\" }] } ] ```",
           "type": "array",
           "items": {
             "$ref": "#/definitions/PermissionEntry"
diff --git a/apps/app/gen/schemas/windows-schema.json b/apps/app/gen/schemas/windows-schema.json
new file mode 100644
index 000000000..44b4ebb29
--- /dev/null
+++ b/apps/app/gen/schemas/windows-schema.json
@@ -0,0 +1,3314 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "CapabilityFile",
+  "description": "Capability formats accepted in a capability file.",
+  "anyOf": [
+    {
+      "description": "A single capability.",
+      "allOf": [
+        {
+          "$ref": "#/definitions/Capability"
+        }
+      ]
+    },
+    {
+      "description": "A list of capabilities.",
+      "type": "array",
+      "items": {
+        "$ref": "#/definitions/Capability"
+      }
+    },
+    {
+      "description": "A list of capabilities.",
+      "type": "object",
+      "required": [
+        "capabilities"
+      ],
+      "properties": {
+        "capabilities": {
+          "description": "The list of capabilities.",
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/Capability"
+          }
+        }
+      }
+    }
+  ],
+  "definitions": {
+    "Capability": {
+      "description": "A grouping and boundary mechanism developers can use to isolate access to the IPC layer.\n\nIt controls application windows fine grained access to the Tauri core, application, or plugin commands. If a window is not matching any capability then it has no access to the IPC layer at all.\n\nThis can be done to create groups of windows, based on their required system access, which can reduce impact of frontend vulnerabilities in less privileged windows. Windows can be added to a capability by exact name (e.g. `main-window`) or glob patterns like `*` or `admin-*`. A Window can have none, one, or multiple associated capabilities.\n\n## Example\n\n```json { \"identifier\": \"main-user-files-write\", \"description\": \"This capability allows the `main` window on macOS and Windows access to `filesystem` write related commands and `dialog` commands to enable programatic access to files selected by the user.\", \"windows\": [ \"main\" ], \"permissions\": [ \"core:default\", \"dialog:open\", { \"identifier\": \"fs:allow-write-text-file\", \"allow\": [{ \"path\": \"$HOME/test.txt\" }] }, \"platforms\": [\"macOS\",\"windows\"] } ```",
+      "type": "object",
+      "required": [
+        "identifier",
+        "permissions"
+      ],
+      "properties": {
+        "identifier": {
+          "description": "Identifier of the capability.\n\n## Example\n\n`main-user-files-write`",
+          "type": "string"
+        },
+        "description": {
+          "description": "Description of what the capability is intended to allow on associated windows.\n\nIt should contain a description of what the grouped permissions should allow.\n\n## Example\n\nThis capability allows the `main` window access to `filesystem` write related commands and `dialog` commands to enable programatic access to files selected by the user.",
+          "default": "",
+          "type": "string"
+        },
+        "remote": {
+          "description": "Configure remote URLs that can use the capability permissions.\n\nThis setting is optional and defaults to not being set, as our default use case is that the content is served from our local application.\n\n:::caution Make sure you understand the security implications of providing remote sources with local system access. :::\n\n## Example\n\n```json { \"urls\": [\"https://*.mydomain.dev\"] } ```",
+          "anyOf": [
+            {
+              "$ref": "#/definitions/CapabilityRemote"
+            },
+            {
+              "type": "null"
+            }
+          ]
+        },
+        "local": {
+          "description": "Whether this capability is enabled for local app URLs or not. Defaults to `true`.",
+          "default": true,
+          "type": "boolean"
+        },
+        "windows": {
+          "description": "List of windows that are affected by this capability. Can be a glob pattern.\n\nOn multiwebview windows, prefer [`Self::webviews`] for a fine grained access control.\n\n## Example\n\n`[\"main\"]`",
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "webviews": {
+          "description": "List of webviews that are affected by this capability. Can be a glob pattern.\n\nThis is only required when using on multiwebview contexts, by default all child webviews of a window that matches [`Self::windows`] are linked.\n\n## Example\n\n`[\"sub-webview-one\", \"sub-webview-two\"]`",
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "permissions": {
+          "description": "List of permissions attached to this capability.\n\nMust include the plugin name as prefix in the form of `${plugin-name}:${permission-name}`. For commands directly implemented in the application itself only `${permission-name}` is required.\n\n## Example\n\n```json [ \"core:default\", \"shell:allow-open\", \"dialog:open\", { \"identifier\": \"fs:allow-write-text-file\", \"allow\": [{ \"path\": \"$HOME/test.txt\" }] } ```",
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/PermissionEntry"
+          },
+          "uniqueItems": true
+        },
+        "platforms": {
+          "description": "Limit which target platforms this capability applies to.\n\nBy default all platforms are targeted.\n\n## Example\n\n`[\"macOS\",\"windows\"]`",
+          "type": [
+            "array",
+            "null"
+          ],
+          "items": {
+            "$ref": "#/definitions/Target"
+          }
+        }
+      }
+    },
+    "CapabilityRemote": {
+      "description": "Configuration for remote URLs that are associated with the capability.",
+      "type": "object",
+      "required": [
+        "urls"
+      ],
+      "properties": {
+        "urls": {
+          "description": "Remote domains this capability refers to using the [URLPattern standard](https://urlpattern.spec.whatwg.org/).\n\n## Examples\n\n- \"https://*.mydomain.dev\": allows subdomains of mydomain.dev - \"https://mydomain.dev/api/*\": allows any subpath of mydomain.dev/api",
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        }
+      }
+    },
+    "PermissionEntry": {
+      "description": "An entry for a permission value in a [`Capability`] can be either a raw permission [`Identifier`] or an object that references a permission and extends its scope.",
+      "anyOf": [
+        {
+          "description": "Reference a permission or permission set by identifier.",
+          "allOf": [
+            {
+              "$ref": "#/definitions/Identifier"
+            }
+          ]
+        },
+        {
+          "description": "Reference a permission or permission set by identifier and extends its scope.",
+          "type": "object",
+          "allOf": [
+            {
+              "if": {
+                "properties": {
+                  "identifier": {
+                    "anyOf": [
+                      {
+                        "description": "This permission set configures which\nshell functionality is exposed by default.\n\n#### Granted Permissions\n\nIt allows to use the `open` functionality without any specific\nscope pre-configured. It will allow opening `http(s)://`,\n`tel:` and `mailto:` links.\n",
+                        "type": "string",
+                        "const": "shell:default"
+                      },
+                      {
+                        "description": "Enables the execute command without any pre-configured scope.",
+                        "type": "string",
+                        "const": "shell:allow-execute"
+                      },
+                      {
+                        "description": "Enables the kill command without any pre-configured scope.",
+                        "type": "string",
+                        "const": "shell:allow-kill"
+                      },
+                      {
+                        "description": "Enables the open command without any pre-configured scope.",
+                        "type": "string",
+                        "const": "shell:allow-open"
+                      },
+                      {
+                        "description": "Enables the spawn command without any pre-configured scope.",
+                        "type": "string",
+                        "const": "shell:allow-spawn"
+                      },
+                      {
+                        "description": "Enables the stdin_write command without any pre-configured scope.",
+                        "type": "string",
+                        "const": "shell:allow-stdin-write"
+                      },
+                      {
+                        "description": "Denies the execute command without any pre-configured scope.",
+                        "type": "string",
+                        "const": "shell:deny-execute"
+                      },
+                      {
+                        "description": "Denies the kill command without any pre-configured scope.",
+                        "type": "string",
+                        "const": "shell:deny-kill"
+                      },
+                      {
+                        "description": "Denies the open command without any pre-configured scope.",
+                        "type": "string",
+                        "const": "shell:deny-open"
+                      },
+                      {
+                        "description": "Denies the spawn command without any pre-configured scope.",
+                        "type": "string",
+                        "const": "shell:deny-spawn"
+                      },
+                      {
+                        "description": "Denies the stdin_write command without any pre-configured scope.",
+                        "type": "string",
+                        "const": "shell:deny-stdin-write"
+                      }
+                    ]
+                  }
+                }
+              },
+              "then": {
+                "properties": {
+                  "allow": {
+                    "items": {
+                      "title": "Entry",
+                      "description": "A command allowed to be executed by the webview API.",
+                      "type": "object",
+                      "required": [
+                        "args",
+                        "cmd",
+                        "name",
+                        "sidecar"
+                      ],
+                      "properties": {
+                        "args": {
+                          "description": "The allowed arguments for the command execution.",
+                          "allOf": [
+                            {
+                              "$ref": "#/definitions/ShellAllowedArgs"
+                            }
+                          ]
+                        },
+                        "cmd": {
+                          "description": "The command name. It can start with a variable that resolves to a system base directory. The variables are: `$AUDIO`, `$CACHE`, `$CONFIG`, `$DATA`, `$LOCALDATA`, `$DESKTOP`, `$DOCUMENT`, `$DOWNLOAD`, `$EXE`, `$FONT`, `$HOME`, `$PICTURE`, `$PUBLIC`, `$RUNTIME`, `$TEMPLATE`, `$VIDEO`, `$RESOURCE`, `$APP`, `$LOG`, `$TEMP`, `$APPCONFIG`, `$APPDATA`, `$APPLOCALDATA`, `$APPCACHE`, `$APPLOG`.",
+                          "type": "string"
+                        },
+                        "name": {
+                          "description": "The name for this allowed shell command configuration.\n\nThis name will be used inside of the webview API to call this command along with any specified arguments.",
+                          "type": "string"
+                        },
+                        "sidecar": {
+                          "description": "If this command is a sidecar command.",
+                          "type": "boolean"
+                        }
+                      }
+                    }
+                  },
+                  "deny": {
+                    "items": {
+                      "title": "Entry",
+                      "description": "A command allowed to be executed by the webview API.",
+                      "type": "object",
+                      "required": [
+                        "args",
+                        "cmd",
+                        "name",
+                        "sidecar"
+                      ],
+                      "properties": {
+                        "args": {
+                          "description": "The allowed arguments for the command execution.",
+                          "allOf": [
+                            {
+                              "$ref": "#/definitions/ShellAllowedArgs"
+                            }
+                          ]
+                        },
+                        "cmd": {
+                          "description": "The command name. It can start with a variable that resolves to a system base directory. The variables are: `$AUDIO`, `$CACHE`, `$CONFIG`, `$DATA`, `$LOCALDATA`, `$DESKTOP`, `$DOCUMENT`, `$DOWNLOAD`, `$EXE`, `$FONT`, `$HOME`, `$PICTURE`, `$PUBLIC`, `$RUNTIME`, `$TEMPLATE`, `$VIDEO`, `$RESOURCE`, `$APP`, `$LOG`, `$TEMP`, `$APPCONFIG`, `$APPDATA`, `$APPLOCALDATA`, `$APPCACHE`, `$APPLOG`.",
+                          "type": "string"
+                        },
+                        "name": {
+                          "description": "The name for this allowed shell command configuration.\n\nThis name will be used inside of the webview API to call this command along with any specified arguments.",
+                          "type": "string"
+                        },
+                        "sidecar": {
+                          "description": "If this command is a sidecar command.",
+                          "type": "boolean"
+                        }
+                      }
+                    }
+                  }
+                }
+              },
+              "properties": {
+                "identifier": {
+                  "description": "Identifier of the permission or permission set.",
+                  "allOf": [
+                    {
+                      "$ref": "#/definitions/Identifier"
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              "properties": {
+                "identifier": {
+                  "description": "Identifier of the permission or permission set.",
+                  "allOf": [
+                    {
+                      "$ref": "#/definitions/Identifier"
+                    }
+                  ]
+                },
+                "allow": {
+                  "description": "Data that defines what is allowed by the scope.",
+                  "type": [
+                    "array",
+                    "null"
+                  ],
+                  "items": {
+                    "$ref": "#/definitions/Value"
+                  }
+                },
+                "deny": {
+                  "description": "Data that defines what is denied by the scope. This should be prioritized by validation logic.",
+                  "type": [
+                    "array",
+                    "null"
+                  ],
+                  "items": {
+                    "$ref": "#/definitions/Value"
+                  }
+                }
+              }
+            }
+          ],
+          "required": [
+            "identifier"
+          ]
+        }
+      ]
+    },
+    "Identifier": {
+      "description": "Permission identifier",
+      "oneOf": [
+        {
+          "description": "Default plugin permissions.",
+          "type": "string",
+          "const": "ads:default"
+        },
+        {
+          "description": "Enables the get_ads_personalization command without any pre-configured scope.",
+          "type": "string",
+          "const": "ads:allow-get-ads-personalization"
+        },
+        {
+          "description": "Enables the hide_ads_window command without any pre-configured scope.",
+          "type": "string",
+          "const": "ads:allow-hide-ads-window"
+        },
+        {
+          "description": "Enables the init_ads_window command without any pre-configured scope.",
+          "type": "string",
+          "const": "ads:allow-init-ads-window"
+        },
+        {
+          "description": "Enables the open_link command without any pre-configured scope.",
+          "type": "string",
+          "const": "ads:allow-open-link"
+        },
+        {
+          "description": "Enables the record_ads_click command without any pre-configured scope.",
+          "type": "string",
+          "const": "ads:allow-record-ads-click"
+        },
+        {
+          "description": "Enables the scroll_ads_window command without any pre-configured scope.",
+          "type": "string",
+          "const": "ads:allow-scroll-ads-window"
+        },
+        {
+          "description": "Enables the show_ads_window command without any pre-configured scope.",
+          "type": "string",
+          "const": "ads:allow-show-ads-window"
+        },
+        {
+          "description": "Denies the get_ads_personalization command without any pre-configured scope.",
+          "type": "string",
+          "const": "ads:deny-get-ads-personalization"
+        },
+        {
+          "description": "Denies the hide_ads_window command without any pre-configured scope.",
+          "type": "string",
+          "const": "ads:deny-hide-ads-window"
+        },
+        {
+          "description": "Denies the init_ads_window command without any pre-configured scope.",
+          "type": "string",
+          "const": "ads:deny-init-ads-window"
+        },
+        {
+          "description": "Denies the open_link command without any pre-configured scope.",
+          "type": "string",
+          "const": "ads:deny-open-link"
+        },
+        {
+          "description": "Denies the record_ads_click command without any pre-configured scope.",
+          "type": "string",
+          "const": "ads:deny-record-ads-click"
+        },
+        {
+          "description": "Denies the scroll_ads_window command without any pre-configured scope.",
+          "type": "string",
+          "const": "ads:deny-scroll-ads-window"
+        },
+        {
+          "description": "Denies the show_ads_window command without any pre-configured scope.",
+          "type": "string",
+          "const": "ads:deny-show-ads-window"
+        },
+        {
+          "description": "Default plugin permissions.",
+          "type": "string",
+          "const": "auth:default"
+        },
+        {
+          "description": "Enables the get_default_user command without any pre-configured scope.",
+          "type": "string",
+          "const": "auth:allow-get-default-user"
+        },
+        {
+          "description": "Enables the get_users command without any pre-configured scope.",
+          "type": "string",
+          "const": "auth:allow-get-users"
+        },
+        {
+          "description": "Enables the login command without any pre-configured scope.",
+          "type": "string",
+          "const": "auth:allow-login"
+        },
+        {
+          "description": "Enables the remove_user command without any pre-configured scope.",
+          "type": "string",
+          "const": "auth:allow-remove-user"
+        },
+        {
+          "description": "Enables the set_default_user command without any pre-configured scope.",
+          "type": "string",
+          "const": "auth:allow-set-default-user"
+        },
+        {
+          "description": "Denies the get_default_user command without any pre-configured scope.",
+          "type": "string",
+          "const": "auth:deny-get-default-user"
+        },
+        {
+          "description": "Denies the get_users command without any pre-configured scope.",
+          "type": "string",
+          "const": "auth:deny-get-users"
+        },
+        {
+          "description": "Denies the login command without any pre-configured scope.",
+          "type": "string",
+          "const": "auth:deny-login"
+        },
+        {
+          "description": "Denies the remove_user command without any pre-configured scope.",
+          "type": "string",
+          "const": "auth:deny-remove-user"
+        },
+        {
+          "description": "Denies the set_default_user command without any pre-configured scope.",
+          "type": "string",
+          "const": "auth:deny-set-default-user"
+        },
+        {
+          "description": "Default plugin permissions.",
+          "type": "string",
+          "const": "cache:default"
+        },
+        {
+          "description": "Enables the get_organization command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:allow-get-organization"
+        },
+        {
+          "description": "Enables the get_organization_many command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:allow-get-organization-many"
+        },
+        {
+          "description": "Enables the get_project command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:allow-get-project"
+        },
+        {
+          "description": "Enables the get_project_many command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:allow-get-project-many"
+        },
+        {
+          "description": "Enables the get_search_results command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:allow-get-search-results"
+        },
+        {
+          "description": "Enables the get_search_results_many command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:allow-get-search-results-many"
+        },
+        {
+          "description": "Enables the get_team command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:allow-get-team"
+        },
+        {
+          "description": "Enables the get_team_many command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:allow-get-team-many"
+        },
+        {
+          "description": "Enables the get_user command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:allow-get-user"
+        },
+        {
+          "description": "Enables the get_user_many command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:allow-get-user-many"
+        },
+        {
+          "description": "Enables the get_version command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:allow-get-version"
+        },
+        {
+          "description": "Enables the get_version_many command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:allow-get-version-many"
+        },
+        {
+          "description": "Enables the purge_cache_types command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:allow-purge-cache-types"
+        },
+        {
+          "description": "Denies the get_organization command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:deny-get-organization"
+        },
+        {
+          "description": "Denies the get_organization_many command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:deny-get-organization-many"
+        },
+        {
+          "description": "Denies the get_project command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:deny-get-project"
+        },
+        {
+          "description": "Denies the get_project_many command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:deny-get-project-many"
+        },
+        {
+          "description": "Denies the get_search_results command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:deny-get-search-results"
+        },
+        {
+          "description": "Denies the get_search_results_many command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:deny-get-search-results-many"
+        },
+        {
+          "description": "Denies the get_team command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:deny-get-team"
+        },
+        {
+          "description": "Denies the get_team_many command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:deny-get-team-many"
+        },
+        {
+          "description": "Denies the get_user command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:deny-get-user"
+        },
+        {
+          "description": "Denies the get_user_many command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:deny-get-user-many"
+        },
+        {
+          "description": "Denies the get_version command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:deny-get-version"
+        },
+        {
+          "description": "Denies the get_version_many command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:deny-get-version-many"
+        },
+        {
+          "description": "Denies the purge_cache_types command without any pre-configured scope.",
+          "type": "string",
+          "const": "cache:deny-purge-cache-types"
+        },
+        {
+          "description": "Default core plugins set which includes:\n- 'core:path:default'\n- 'core:event:default'\n- 'core:window:default'\n- 'core:webview:default'\n- 'core:app:default'\n- 'core:image:default'\n- 'core:resources:default'\n- 'core:menu:default'\n- 'core:tray:default'\n",
+          "type": "string",
+          "const": "core:default"
+        },
+        {
+          "description": "Default permissions for the plugin.",
+          "type": "string",
+          "const": "core:app:default"
+        },
+        {
+          "description": "Enables the app_hide command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:app:allow-app-hide"
+        },
+        {
+          "description": "Enables the app_show command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:app:allow-app-show"
+        },
+        {
+          "description": "Enables the default_window_icon command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:app:allow-default-window-icon"
+        },
+        {
+          "description": "Enables the name command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:app:allow-name"
+        },
+        {
+          "description": "Enables the set_app_theme command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:app:allow-set-app-theme"
+        },
+        {
+          "description": "Enables the tauri_version command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:app:allow-tauri-version"
+        },
+        {
+          "description": "Enables the version command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:app:allow-version"
+        },
+        {
+          "description": "Denies the app_hide command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:app:deny-app-hide"
+        },
+        {
+          "description": "Denies the app_show command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:app:deny-app-show"
+        },
+        {
+          "description": "Denies the default_window_icon command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:app:deny-default-window-icon"
+        },
+        {
+          "description": "Denies the name command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:app:deny-name"
+        },
+        {
+          "description": "Denies the set_app_theme command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:app:deny-set-app-theme"
+        },
+        {
+          "description": "Denies the tauri_version command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:app:deny-tauri-version"
+        },
+        {
+          "description": "Denies the version command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:app:deny-version"
+        },
+        {
+          "description": "Default permissions for the plugin.",
+          "type": "string",
+          "const": "core:event:default"
+        },
+        {
+          "description": "Enables the emit command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:event:allow-emit"
+        },
+        {
+          "description": "Enables the emit_to command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:event:allow-emit-to"
+        },
+        {
+          "description": "Enables the listen command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:event:allow-listen"
+        },
+        {
+          "description": "Enables the unlisten command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:event:allow-unlisten"
+        },
+        {
+          "description": "Denies the emit command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:event:deny-emit"
+        },
+        {
+          "description": "Denies the emit_to command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:event:deny-emit-to"
+        },
+        {
+          "description": "Denies the listen command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:event:deny-listen"
+        },
+        {
+          "description": "Denies the unlisten command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:event:deny-unlisten"
+        },
+        {
+          "description": "Default permissions for the plugin.",
+          "type": "string",
+          "const": "core:image:default"
+        },
+        {
+          "description": "Enables the from_bytes command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:image:allow-from-bytes"
+        },
+        {
+          "description": "Enables the from_path command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:image:allow-from-path"
+        },
+        {
+          "description": "Enables the new command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:image:allow-new"
+        },
+        {
+          "description": "Enables the rgba command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:image:allow-rgba"
+        },
+        {
+          "description": "Enables the size command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:image:allow-size"
+        },
+        {
+          "description": "Denies the from_bytes command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:image:deny-from-bytes"
+        },
+        {
+          "description": "Denies the from_path command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:image:deny-from-path"
+        },
+        {
+          "description": "Denies the new command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:image:deny-new"
+        },
+        {
+          "description": "Denies the rgba command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:image:deny-rgba"
+        },
+        {
+          "description": "Denies the size command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:image:deny-size"
+        },
+        {
+          "description": "Default permissions for the plugin.",
+          "type": "string",
+          "const": "core:menu:default"
+        },
+        {
+          "description": "Enables the append command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:allow-append"
+        },
+        {
+          "description": "Enables the create_default command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:allow-create-default"
+        },
+        {
+          "description": "Enables the get command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:allow-get"
+        },
+        {
+          "description": "Enables the insert command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:allow-insert"
+        },
+        {
+          "description": "Enables the is_checked command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:allow-is-checked"
+        },
+        {
+          "description": "Enables the is_enabled command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:allow-is-enabled"
+        },
+        {
+          "description": "Enables the items command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:allow-items"
+        },
+        {
+          "description": "Enables the new command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:allow-new"
+        },
+        {
+          "description": "Enables the popup command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:allow-popup"
+        },
+        {
+          "description": "Enables the prepend command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:allow-prepend"
+        },
+        {
+          "description": "Enables the remove command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:allow-remove"
+        },
+        {
+          "description": "Enables the remove_at command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:allow-remove-at"
+        },
+        {
+          "description": "Enables the set_accelerator command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:allow-set-accelerator"
+        },
+        {
+          "description": "Enables the set_as_app_menu command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:allow-set-as-app-menu"
+        },
+        {
+          "description": "Enables the set_as_help_menu_for_nsapp command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:allow-set-as-help-menu-for-nsapp"
+        },
+        {
+          "description": "Enables the set_as_window_menu command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:allow-set-as-window-menu"
+        },
+        {
+          "description": "Enables the set_as_windows_menu_for_nsapp command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:allow-set-as-windows-menu-for-nsapp"
+        },
+        {
+          "description": "Enables the set_checked command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:allow-set-checked"
+        },
+        {
+          "description": "Enables the set_enabled command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:allow-set-enabled"
+        },
+        {
+          "description": "Enables the set_icon command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:allow-set-icon"
+        },
+        {
+          "description": "Enables the set_text command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:allow-set-text"
+        },
+        {
+          "description": "Enables the text command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:allow-text"
+        },
+        {
+          "description": "Denies the append command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:deny-append"
+        },
+        {
+          "description": "Denies the create_default command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:deny-create-default"
+        },
+        {
+          "description": "Denies the get command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:deny-get"
+        },
+        {
+          "description": "Denies the insert command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:deny-insert"
+        },
+        {
+          "description": "Denies the is_checked command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:deny-is-checked"
+        },
+        {
+          "description": "Denies the is_enabled command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:deny-is-enabled"
+        },
+        {
+          "description": "Denies the items command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:deny-items"
+        },
+        {
+          "description": "Denies the new command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:deny-new"
+        },
+        {
+          "description": "Denies the popup command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:deny-popup"
+        },
+        {
+          "description": "Denies the prepend command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:deny-prepend"
+        },
+        {
+          "description": "Denies the remove command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:deny-remove"
+        },
+        {
+          "description": "Denies the remove_at command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:deny-remove-at"
+        },
+        {
+          "description": "Denies the set_accelerator command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:deny-set-accelerator"
+        },
+        {
+          "description": "Denies the set_as_app_menu command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:deny-set-as-app-menu"
+        },
+        {
+          "description": "Denies the set_as_help_menu_for_nsapp command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:deny-set-as-help-menu-for-nsapp"
+        },
+        {
+          "description": "Denies the set_as_window_menu command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:deny-set-as-window-menu"
+        },
+        {
+          "description": "Denies the set_as_windows_menu_for_nsapp command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:deny-set-as-windows-menu-for-nsapp"
+        },
+        {
+          "description": "Denies the set_checked command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:deny-set-checked"
+        },
+        {
+          "description": "Denies the set_enabled command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:deny-set-enabled"
+        },
+        {
+          "description": "Denies the set_icon command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:deny-set-icon"
+        },
+        {
+          "description": "Denies the set_text command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:deny-set-text"
+        },
+        {
+          "description": "Denies the text command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:menu:deny-text"
+        },
+        {
+          "description": "Default permissions for the plugin.",
+          "type": "string",
+          "const": "core:path:default"
+        },
+        {
+          "description": "Enables the basename command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:path:allow-basename"
+        },
+        {
+          "description": "Enables the dirname command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:path:allow-dirname"
+        },
+        {
+          "description": "Enables the extname command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:path:allow-extname"
+        },
+        {
+          "description": "Enables the is_absolute command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:path:allow-is-absolute"
+        },
+        {
+          "description": "Enables the join command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:path:allow-join"
+        },
+        {
+          "description": "Enables the normalize command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:path:allow-normalize"
+        },
+        {
+          "description": "Enables the resolve command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:path:allow-resolve"
+        },
+        {
+          "description": "Enables the resolve_directory command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:path:allow-resolve-directory"
+        },
+        {
+          "description": "Denies the basename command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:path:deny-basename"
+        },
+        {
+          "description": "Denies the dirname command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:path:deny-dirname"
+        },
+        {
+          "description": "Denies the extname command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:path:deny-extname"
+        },
+        {
+          "description": "Denies the is_absolute command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:path:deny-is-absolute"
+        },
+        {
+          "description": "Denies the join command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:path:deny-join"
+        },
+        {
+          "description": "Denies the normalize command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:path:deny-normalize"
+        },
+        {
+          "description": "Denies the resolve command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:path:deny-resolve"
+        },
+        {
+          "description": "Denies the resolve_directory command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:path:deny-resolve-directory"
+        },
+        {
+          "description": "Default permissions for the plugin.",
+          "type": "string",
+          "const": "core:resources:default"
+        },
+        {
+          "description": "Enables the close command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:resources:allow-close"
+        },
+        {
+          "description": "Denies the close command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:resources:deny-close"
+        },
+        {
+          "description": "Default permissions for the plugin.",
+          "type": "string",
+          "const": "core:tray:default"
+        },
+        {
+          "description": "Enables the get_by_id command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:tray:allow-get-by-id"
+        },
+        {
+          "description": "Enables the new command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:tray:allow-new"
+        },
+        {
+          "description": "Enables the remove_by_id command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:tray:allow-remove-by-id"
+        },
+        {
+          "description": "Enables the set_icon command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:tray:allow-set-icon"
+        },
+        {
+          "description": "Enables the set_icon_as_template command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:tray:allow-set-icon-as-template"
+        },
+        {
+          "description": "Enables the set_menu command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:tray:allow-set-menu"
+        },
+        {
+          "description": "Enables the set_show_menu_on_left_click command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:tray:allow-set-show-menu-on-left-click"
+        },
+        {
+          "description": "Enables the set_temp_dir_path command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:tray:allow-set-temp-dir-path"
+        },
+        {
+          "description": "Enables the set_title command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:tray:allow-set-title"
+        },
+        {
+          "description": "Enables the set_tooltip command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:tray:allow-set-tooltip"
+        },
+        {
+          "description": "Enables the set_visible command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:tray:allow-set-visible"
+        },
+        {
+          "description": "Denies the get_by_id command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:tray:deny-get-by-id"
+        },
+        {
+          "description": "Denies the new command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:tray:deny-new"
+        },
+        {
+          "description": "Denies the remove_by_id command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:tray:deny-remove-by-id"
+        },
+        {
+          "description": "Denies the set_icon command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:tray:deny-set-icon"
+        },
+        {
+          "description": "Denies the set_icon_as_template command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:tray:deny-set-icon-as-template"
+        },
+        {
+          "description": "Denies the set_menu command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:tray:deny-set-menu"
+        },
+        {
+          "description": "Denies the set_show_menu_on_left_click command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:tray:deny-set-show-menu-on-left-click"
+        },
+        {
+          "description": "Denies the set_temp_dir_path command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:tray:deny-set-temp-dir-path"
+        },
+        {
+          "description": "Denies the set_title command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:tray:deny-set-title"
+        },
+        {
+          "description": "Denies the set_tooltip command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:tray:deny-set-tooltip"
+        },
+        {
+          "description": "Denies the set_visible command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:tray:deny-set-visible"
+        },
+        {
+          "description": "Default permissions for the plugin.",
+          "type": "string",
+          "const": "core:webview:default"
+        },
+        {
+          "description": "Enables the clear_all_browsing_data command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:allow-clear-all-browsing-data"
+        },
+        {
+          "description": "Enables the create_webview command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:allow-create-webview"
+        },
+        {
+          "description": "Enables the create_webview_window command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:allow-create-webview-window"
+        },
+        {
+          "description": "Enables the get_all_webviews command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:allow-get-all-webviews"
+        },
+        {
+          "description": "Enables the internal_toggle_devtools command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:allow-internal-toggle-devtools"
+        },
+        {
+          "description": "Enables the print command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:allow-print"
+        },
+        {
+          "description": "Enables the reparent command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:allow-reparent"
+        },
+        {
+          "description": "Enables the set_webview_focus command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:allow-set-webview-focus"
+        },
+        {
+          "description": "Enables the set_webview_position command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:allow-set-webview-position"
+        },
+        {
+          "description": "Enables the set_webview_size command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:allow-set-webview-size"
+        },
+        {
+          "description": "Enables the set_webview_zoom command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:allow-set-webview-zoom"
+        },
+        {
+          "description": "Enables the webview_close command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:allow-webview-close"
+        },
+        {
+          "description": "Enables the webview_hide command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:allow-webview-hide"
+        },
+        {
+          "description": "Enables the webview_position command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:allow-webview-position"
+        },
+        {
+          "description": "Enables the webview_show command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:allow-webview-show"
+        },
+        {
+          "description": "Enables the webview_size command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:allow-webview-size"
+        },
+        {
+          "description": "Denies the clear_all_browsing_data command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:deny-clear-all-browsing-data"
+        },
+        {
+          "description": "Denies the create_webview command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:deny-create-webview"
+        },
+        {
+          "description": "Denies the create_webview_window command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:deny-create-webview-window"
+        },
+        {
+          "description": "Denies the get_all_webviews command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:deny-get-all-webviews"
+        },
+        {
+          "description": "Denies the internal_toggle_devtools command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:deny-internal-toggle-devtools"
+        },
+        {
+          "description": "Denies the print command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:deny-print"
+        },
+        {
+          "description": "Denies the reparent command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:deny-reparent"
+        },
+        {
+          "description": "Denies the set_webview_focus command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:deny-set-webview-focus"
+        },
+        {
+          "description": "Denies the set_webview_position command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:deny-set-webview-position"
+        },
+        {
+          "description": "Denies the set_webview_size command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:deny-set-webview-size"
+        },
+        {
+          "description": "Denies the set_webview_zoom command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:deny-set-webview-zoom"
+        },
+        {
+          "description": "Denies the webview_close command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:deny-webview-close"
+        },
+        {
+          "description": "Denies the webview_hide command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:deny-webview-hide"
+        },
+        {
+          "description": "Denies the webview_position command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:deny-webview-position"
+        },
+        {
+          "description": "Denies the webview_show command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:deny-webview-show"
+        },
+        {
+          "description": "Denies the webview_size command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:webview:deny-webview-size"
+        },
+        {
+          "description": "Default permissions for the plugin.",
+          "type": "string",
+          "const": "core:window:default"
+        },
+        {
+          "description": "Enables the available_monitors command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-available-monitors"
+        },
+        {
+          "description": "Enables the center command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-center"
+        },
+        {
+          "description": "Enables the close command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-close"
+        },
+        {
+          "description": "Enables the create command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-create"
+        },
+        {
+          "description": "Enables the current_monitor command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-current-monitor"
+        },
+        {
+          "description": "Enables the cursor_position command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-cursor-position"
+        },
+        {
+          "description": "Enables the destroy command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-destroy"
+        },
+        {
+          "description": "Enables the get_all_windows command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-get-all-windows"
+        },
+        {
+          "description": "Enables the hide command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-hide"
+        },
+        {
+          "description": "Enables the inner_position command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-inner-position"
+        },
+        {
+          "description": "Enables the inner_size command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-inner-size"
+        },
+        {
+          "description": "Enables the internal_toggle_maximize command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-internal-toggle-maximize"
+        },
+        {
+          "description": "Enables the is_closable command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-is-closable"
+        },
+        {
+          "description": "Enables the is_decorated command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-is-decorated"
+        },
+        {
+          "description": "Enables the is_enabled command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-is-enabled"
+        },
+        {
+          "description": "Enables the is_focused command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-is-focused"
+        },
+        {
+          "description": "Enables the is_fullscreen command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-is-fullscreen"
+        },
+        {
+          "description": "Enables the is_maximizable command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-is-maximizable"
+        },
+        {
+          "description": "Enables the is_maximized command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-is-maximized"
+        },
+        {
+          "description": "Enables the is_minimizable command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-is-minimizable"
+        },
+        {
+          "description": "Enables the is_minimized command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-is-minimized"
+        },
+        {
+          "description": "Enables the is_resizable command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-is-resizable"
+        },
+        {
+          "description": "Enables the is_visible command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-is-visible"
+        },
+        {
+          "description": "Enables the maximize command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-maximize"
+        },
+        {
+          "description": "Enables the minimize command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-minimize"
+        },
+        {
+          "description": "Enables the monitor_from_point command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-monitor-from-point"
+        },
+        {
+          "description": "Enables the outer_position command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-outer-position"
+        },
+        {
+          "description": "Enables the outer_size command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-outer-size"
+        },
+        {
+          "description": "Enables the primary_monitor command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-primary-monitor"
+        },
+        {
+          "description": "Enables the request_user_attention command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-request-user-attention"
+        },
+        {
+          "description": "Enables the scale_factor command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-scale-factor"
+        },
+        {
+          "description": "Enables the set_always_on_bottom command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-always-on-bottom"
+        },
+        {
+          "description": "Enables the set_always_on_top command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-always-on-top"
+        },
+        {
+          "description": "Enables the set_closable command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-closable"
+        },
+        {
+          "description": "Enables the set_content_protected command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-content-protected"
+        },
+        {
+          "description": "Enables the set_cursor_grab command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-cursor-grab"
+        },
+        {
+          "description": "Enables the set_cursor_icon command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-cursor-icon"
+        },
+        {
+          "description": "Enables the set_cursor_position command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-cursor-position"
+        },
+        {
+          "description": "Enables the set_cursor_visible command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-cursor-visible"
+        },
+        {
+          "description": "Enables the set_decorations command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-decorations"
+        },
+        {
+          "description": "Enables the set_effects command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-effects"
+        },
+        {
+          "description": "Enables the set_enabled command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-enabled"
+        },
+        {
+          "description": "Enables the set_focus command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-focus"
+        },
+        {
+          "description": "Enables the set_fullscreen command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-fullscreen"
+        },
+        {
+          "description": "Enables the set_icon command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-icon"
+        },
+        {
+          "description": "Enables the set_ignore_cursor_events command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-ignore-cursor-events"
+        },
+        {
+          "description": "Enables the set_max_size command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-max-size"
+        },
+        {
+          "description": "Enables the set_maximizable command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-maximizable"
+        },
+        {
+          "description": "Enables the set_min_size command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-min-size"
+        },
+        {
+          "description": "Enables the set_minimizable command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-minimizable"
+        },
+        {
+          "description": "Enables the set_position command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-position"
+        },
+        {
+          "description": "Enables the set_progress_bar command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-progress-bar"
+        },
+        {
+          "description": "Enables the set_resizable command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-resizable"
+        },
+        {
+          "description": "Enables the set_shadow command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-shadow"
+        },
+        {
+          "description": "Enables the set_size command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-size"
+        },
+        {
+          "description": "Enables the set_size_constraints command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-size-constraints"
+        },
+        {
+          "description": "Enables the set_skip_taskbar command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-skip-taskbar"
+        },
+        {
+          "description": "Enables the set_theme command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-theme"
+        },
+        {
+          "description": "Enables the set_title command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-title"
+        },
+        {
+          "description": "Enables the set_title_bar_style command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-title-bar-style"
+        },
+        {
+          "description": "Enables the set_visible_on_all_workspaces command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-set-visible-on-all-workspaces"
+        },
+        {
+          "description": "Enables the show command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-show"
+        },
+        {
+          "description": "Enables the start_dragging command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-start-dragging"
+        },
+        {
+          "description": "Enables the start_resize_dragging command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-start-resize-dragging"
+        },
+        {
+          "description": "Enables the theme command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-theme"
+        },
+        {
+          "description": "Enables the title command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-title"
+        },
+        {
+          "description": "Enables the toggle_maximize command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-toggle-maximize"
+        },
+        {
+          "description": "Enables the unmaximize command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-unmaximize"
+        },
+        {
+          "description": "Enables the unminimize command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:allow-unminimize"
+        },
+        {
+          "description": "Denies the available_monitors command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-available-monitors"
+        },
+        {
+          "description": "Denies the center command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-center"
+        },
+        {
+          "description": "Denies the close command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-close"
+        },
+        {
+          "description": "Denies the create command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-create"
+        },
+        {
+          "description": "Denies the current_monitor command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-current-monitor"
+        },
+        {
+          "description": "Denies the cursor_position command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-cursor-position"
+        },
+        {
+          "description": "Denies the destroy command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-destroy"
+        },
+        {
+          "description": "Denies the get_all_windows command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-get-all-windows"
+        },
+        {
+          "description": "Denies the hide command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-hide"
+        },
+        {
+          "description": "Denies the inner_position command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-inner-position"
+        },
+        {
+          "description": "Denies the inner_size command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-inner-size"
+        },
+        {
+          "description": "Denies the internal_toggle_maximize command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-internal-toggle-maximize"
+        },
+        {
+          "description": "Denies the is_closable command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-is-closable"
+        },
+        {
+          "description": "Denies the is_decorated command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-is-decorated"
+        },
+        {
+          "description": "Denies the is_enabled command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-is-enabled"
+        },
+        {
+          "description": "Denies the is_focused command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-is-focused"
+        },
+        {
+          "description": "Denies the is_fullscreen command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-is-fullscreen"
+        },
+        {
+          "description": "Denies the is_maximizable command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-is-maximizable"
+        },
+        {
+          "description": "Denies the is_maximized command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-is-maximized"
+        },
+        {
+          "description": "Denies the is_minimizable command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-is-minimizable"
+        },
+        {
+          "description": "Denies the is_minimized command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-is-minimized"
+        },
+        {
+          "description": "Denies the is_resizable command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-is-resizable"
+        },
+        {
+          "description": "Denies the is_visible command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-is-visible"
+        },
+        {
+          "description": "Denies the maximize command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-maximize"
+        },
+        {
+          "description": "Denies the minimize command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-minimize"
+        },
+        {
+          "description": "Denies the monitor_from_point command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-monitor-from-point"
+        },
+        {
+          "description": "Denies the outer_position command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-outer-position"
+        },
+        {
+          "description": "Denies the outer_size command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-outer-size"
+        },
+        {
+          "description": "Denies the primary_monitor command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-primary-monitor"
+        },
+        {
+          "description": "Denies the request_user_attention command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-request-user-attention"
+        },
+        {
+          "description": "Denies the scale_factor command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-scale-factor"
+        },
+        {
+          "description": "Denies the set_always_on_bottom command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-always-on-bottom"
+        },
+        {
+          "description": "Denies the set_always_on_top command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-always-on-top"
+        },
+        {
+          "description": "Denies the set_closable command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-closable"
+        },
+        {
+          "description": "Denies the set_content_protected command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-content-protected"
+        },
+        {
+          "description": "Denies the set_cursor_grab command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-cursor-grab"
+        },
+        {
+          "description": "Denies the set_cursor_icon command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-cursor-icon"
+        },
+        {
+          "description": "Denies the set_cursor_position command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-cursor-position"
+        },
+        {
+          "description": "Denies the set_cursor_visible command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-cursor-visible"
+        },
+        {
+          "description": "Denies the set_decorations command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-decorations"
+        },
+        {
+          "description": "Denies the set_effects command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-effects"
+        },
+        {
+          "description": "Denies the set_enabled command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-enabled"
+        },
+        {
+          "description": "Denies the set_focus command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-focus"
+        },
+        {
+          "description": "Denies the set_fullscreen command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-fullscreen"
+        },
+        {
+          "description": "Denies the set_icon command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-icon"
+        },
+        {
+          "description": "Denies the set_ignore_cursor_events command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-ignore-cursor-events"
+        },
+        {
+          "description": "Denies the set_max_size command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-max-size"
+        },
+        {
+          "description": "Denies the set_maximizable command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-maximizable"
+        },
+        {
+          "description": "Denies the set_min_size command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-min-size"
+        },
+        {
+          "description": "Denies the set_minimizable command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-minimizable"
+        },
+        {
+          "description": "Denies the set_position command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-position"
+        },
+        {
+          "description": "Denies the set_progress_bar command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-progress-bar"
+        },
+        {
+          "description": "Denies the set_resizable command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-resizable"
+        },
+        {
+          "description": "Denies the set_shadow command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-shadow"
+        },
+        {
+          "description": "Denies the set_size command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-size"
+        },
+        {
+          "description": "Denies the set_size_constraints command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-size-constraints"
+        },
+        {
+          "description": "Denies the set_skip_taskbar command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-skip-taskbar"
+        },
+        {
+          "description": "Denies the set_theme command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-theme"
+        },
+        {
+          "description": "Denies the set_title command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-title"
+        },
+        {
+          "description": "Denies the set_title_bar_style command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-title-bar-style"
+        },
+        {
+          "description": "Denies the set_visible_on_all_workspaces command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-set-visible-on-all-workspaces"
+        },
+        {
+          "description": "Denies the show command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-show"
+        },
+        {
+          "description": "Denies the start_dragging command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-start-dragging"
+        },
+        {
+          "description": "Denies the start_resize_dragging command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-start-resize-dragging"
+        },
+        {
+          "description": "Denies the theme command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-theme"
+        },
+        {
+          "description": "Denies the title command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-title"
+        },
+        {
+          "description": "Denies the toggle_maximize command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-toggle-maximize"
+        },
+        {
+          "description": "Denies the unmaximize command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-unmaximize"
+        },
+        {
+          "description": "Denies the unminimize command without any pre-configured scope.",
+          "type": "string",
+          "const": "core:window:deny-unminimize"
+        },
+        {
+          "description": "Allows reading the opened deep link via the get_current command",
+          "type": "string",
+          "const": "deep-link:default"
+        },
+        {
+          "description": "Enables the get_current command without any pre-configured scope.",
+          "type": "string",
+          "const": "deep-link:allow-get-current"
+        },
+        {
+          "description": "Enables the is_registered command without any pre-configured scope.",
+          "type": "string",
+          "const": "deep-link:allow-is-registered"
+        },
+        {
+          "description": "Enables the register command without any pre-configured scope.",
+          "type": "string",
+          "const": "deep-link:allow-register"
+        },
+        {
+          "description": "Enables the unregister command without any pre-configured scope.",
+          "type": "string",
+          "const": "deep-link:allow-unregister"
+        },
+        {
+          "description": "Denies the get_current command without any pre-configured scope.",
+          "type": "string",
+          "const": "deep-link:deny-get-current"
+        },
+        {
+          "description": "Denies the is_registered command without any pre-configured scope.",
+          "type": "string",
+          "const": "deep-link:deny-is-registered"
+        },
+        {
+          "description": "Denies the register command without any pre-configured scope.",
+          "type": "string",
+          "const": "deep-link:deny-register"
+        },
+        {
+          "description": "Denies the unregister command without any pre-configured scope.",
+          "type": "string",
+          "const": "deep-link:deny-unregister"
+        },
+        {
+          "description": "This permission set configures the types of dialogs\navailable from the dialog plugin.\n\n#### Granted Permissions\n\nAll dialog types are enabled.\n\n\n",
+          "type": "string",
+          "const": "dialog:default"
+        },
+        {
+          "description": "Enables the ask command without any pre-configured scope.",
+          "type": "string",
+          "const": "dialog:allow-ask"
+        },
+        {
+          "description": "Enables the confirm command without any pre-configured scope.",
+          "type": "string",
+          "const": "dialog:allow-confirm"
+        },
+        {
+          "description": "Enables the message command without any pre-configured scope.",
+          "type": "string",
+          "const": "dialog:allow-message"
+        },
+        {
+          "description": "Enables the open command without any pre-configured scope.",
+          "type": "string",
+          "const": "dialog:allow-open"
+        },
+        {
+          "description": "Enables the save command without any pre-configured scope.",
+          "type": "string",
+          "const": "dialog:allow-save"
+        },
+        {
+          "description": "Denies the ask command without any pre-configured scope.",
+          "type": "string",
+          "const": "dialog:deny-ask"
+        },
+        {
+          "description": "Denies the confirm command without any pre-configured scope.",
+          "type": "string",
+          "const": "dialog:deny-confirm"
+        },
+        {
+          "description": "Denies the message command without any pre-configured scope.",
+          "type": "string",
+          "const": "dialog:deny-message"
+        },
+        {
+          "description": "Denies the open command without any pre-configured scope.",
+          "type": "string",
+          "const": "dialog:deny-open"
+        },
+        {
+          "description": "Denies the save command without any pre-configured scope.",
+          "type": "string",
+          "const": "dialog:deny-save"
+        },
+        {
+          "description": "Default plugin permissions.",
+          "type": "string",
+          "const": "import:default"
+        },
+        {
+          "description": "Enables the get_default_launcher_path command without any pre-configured scope.",
+          "type": "string",
+          "const": "import:allow-get-default-launcher-path"
+        },
+        {
+          "description": "Enables the get_importable_instances command without any pre-configured scope.",
+          "type": "string",
+          "const": "import:allow-get-importable-instances"
+        },
+        {
+          "description": "Enables the import_instance command without any pre-configured scope.",
+          "type": "string",
+          "const": "import:allow-import-instance"
+        },
+        {
+          "description": "Enables the is_valid_importable_instance command without any pre-configured scope.",
+          "type": "string",
+          "const": "import:allow-is-valid-importable-instance"
+        },
+        {
+          "description": "Denies the get_default_launcher_path command without any pre-configured scope.",
+          "type": "string",
+          "const": "import:deny-get-default-launcher-path"
+        },
+        {
+          "description": "Denies the get_importable_instances command without any pre-configured scope.",
+          "type": "string",
+          "const": "import:deny-get-importable-instances"
+        },
+        {
+          "description": "Denies the import_instance command without any pre-configured scope.",
+          "type": "string",
+          "const": "import:deny-import-instance"
+        },
+        {
+          "description": "Denies the is_valid_importable_instance command without any pre-configured scope.",
+          "type": "string",
+          "const": "import:deny-is-valid-importable-instance"
+        },
+        {
+          "description": "Default plugin permissions.",
+          "type": "string",
+          "const": "jre:default"
+        },
+        {
+          "description": "Enables the get_java_versions command without any pre-configured scope.",
+          "type": "string",
+          "const": "jre:allow-get-java-versions"
+        },
+        {
+          "description": "Enables the jre_auto_install_java command without any pre-configured scope.",
+          "type": "string",
+          "const": "jre:allow-jre-auto-install-java"
+        },
+        {
+          "description": "Enables the jre_find_filtered_jres command without any pre-configured scope.",
+          "type": "string",
+          "const": "jre:allow-jre-find-filtered-jres"
+        },
+        {
+          "description": "Enables the jre_get_jre command without any pre-configured scope.",
+          "type": "string",
+          "const": "jre:allow-jre-get-jre"
+        },
+        {
+          "description": "Enables the jre_get_max_memory command without any pre-configured scope.",
+          "type": "string",
+          "const": "jre:allow-jre-get-max-memory"
+        },
+        {
+          "description": "Enables the jre_test_jre command without any pre-configured scope.",
+          "type": "string",
+          "const": "jre:allow-jre-test-jre"
+        },
+        {
+          "description": "Enables the set_java_version command without any pre-configured scope.",
+          "type": "string",
+          "const": "jre:allow-set-java-version"
+        },
+        {
+          "description": "Denies the get_java_versions command without any pre-configured scope.",
+          "type": "string",
+          "const": "jre:deny-get-java-versions"
+        },
+        {
+          "description": "Denies the jre_auto_install_java command without any pre-configured scope.",
+          "type": "string",
+          "const": "jre:deny-jre-auto-install-java"
+        },
+        {
+          "description": "Denies the jre_find_filtered_jres command without any pre-configured scope.",
+          "type": "string",
+          "const": "jre:deny-jre-find-filtered-jres"
+        },
+        {
+          "description": "Denies the jre_get_jre command without any pre-configured scope.",
+          "type": "string",
+          "const": "jre:deny-jre-get-jre"
+        },
+        {
+          "description": "Denies the jre_get_max_memory command without any pre-configured scope.",
+          "type": "string",
+          "const": "jre:deny-jre-get-max-memory"
+        },
+        {
+          "description": "Denies the jre_test_jre command without any pre-configured scope.",
+          "type": "string",
+          "const": "jre:deny-jre-test-jre"
+        },
+        {
+          "description": "Denies the set_java_version command without any pre-configured scope.",
+          "type": "string",
+          "const": "jre:deny-set-java-version"
+        },
+        {
+          "description": "Default plugin permissions.",
+          "type": "string",
+          "const": "logs:default"
+        },
+        {
+          "description": "Enables the logs_delete_logs command without any pre-configured scope.",
+          "type": "string",
+          "const": "logs:allow-logs-delete-logs"
+        },
+        {
+          "description": "Enables the logs_delete_logs_by_filename command without any pre-configured scope.",
+          "type": "string",
+          "const": "logs:allow-logs-delete-logs-by-filename"
+        },
+        {
+          "description": "Enables the logs_get_latest_log_cursor command without any pre-configured scope.",
+          "type": "string",
+          "const": "logs:allow-logs-get-latest-log-cursor"
+        },
+        {
+          "description": "Enables the logs_get_logs command without any pre-configured scope.",
+          "type": "string",
+          "const": "logs:allow-logs-get-logs"
+        },
+        {
+          "description": "Enables the logs_get_logs_by_filename command without any pre-configured scope.",
+          "type": "string",
+          "const": "logs:allow-logs-get-logs-by-filename"
+        },
+        {
+          "description": "Enables the logs_get_output_by_filename command without any pre-configured scope.",
+          "type": "string",
+          "const": "logs:allow-logs-get-output-by-filename"
+        },
+        {
+          "description": "Denies the logs_delete_logs command without any pre-configured scope.",
+          "type": "string",
+          "const": "logs:deny-logs-delete-logs"
+        },
+        {
+          "description": "Denies the logs_delete_logs_by_filename command without any pre-configured scope.",
+          "type": "string",
+          "const": "logs:deny-logs-delete-logs-by-filename"
+        },
+        {
+          "description": "Denies the logs_get_latest_log_cursor command without any pre-configured scope.",
+          "type": "string",
+          "const": "logs:deny-logs-get-latest-log-cursor"
+        },
+        {
+          "description": "Denies the logs_get_logs command without any pre-configured scope.",
+          "type": "string",
+          "const": "logs:deny-logs-get-logs"
+        },
+        {
+          "description": "Denies the logs_get_logs_by_filename command without any pre-configured scope.",
+          "type": "string",
+          "const": "logs:deny-logs-get-logs-by-filename"
+        },
+        {
+          "description": "Denies the logs_get_output_by_filename command without any pre-configured scope.",
+          "type": "string",
+          "const": "logs:deny-logs-get-output-by-filename"
+        },
+        {
+          "description": "Default plugin permissions.",
+          "type": "string",
+          "const": "metadata:default"
+        },
+        {
+          "description": "Enables the metadata_get_game_versions command without any pre-configured scope.",
+          "type": "string",
+          "const": "metadata:allow-metadata-get-game-versions"
+        },
+        {
+          "description": "Enables the metadata_get_loader_versions command without any pre-configured scope.",
+          "type": "string",
+          "const": "metadata:allow-metadata-get-loader-versions"
+        },
+        {
+          "description": "Denies the metadata_get_game_versions command without any pre-configured scope.",
+          "type": "string",
+          "const": "metadata:deny-metadata-get-game-versions"
+        },
+        {
+          "description": "Denies the metadata_get_loader_versions command without any pre-configured scope.",
+          "type": "string",
+          "const": "metadata:deny-metadata-get-loader-versions"
+        },
+        {
+          "description": "Default plugin permissions.",
+          "type": "string",
+          "const": "mr-auth:default"
+        },
+        {
+          "description": "Enables the create_account command without any pre-configured scope.",
+          "type": "string",
+          "const": "mr-auth:allow-create-account"
+        },
+        {
+          "description": "Enables the get command without any pre-configured scope.",
+          "type": "string",
+          "const": "mr-auth:allow-get"
+        },
+        {
+          "description": "Enables the login_2fa command without any pre-configured scope.",
+          "type": "string",
+          "const": "mr-auth:allow-login-2fa"
+        },
+        {
+          "description": "Enables the login_pass command without any pre-configured scope.",
+          "type": "string",
+          "const": "mr-auth:allow-login-pass"
+        },
+        {
+          "description": "Enables the logout command without any pre-configured scope.",
+          "type": "string",
+          "const": "mr-auth:allow-logout"
+        },
+        {
+          "description": "Denies the create_account command without any pre-configured scope.",
+          "type": "string",
+          "const": "mr-auth:deny-create-account"
+        },
+        {
+          "description": "Denies the get command without any pre-configured scope.",
+          "type": "string",
+          "const": "mr-auth:deny-get"
+        },
+        {
+          "description": "Denies the login_2fa command without any pre-configured scope.",
+          "type": "string",
+          "const": "mr-auth:deny-login-2fa"
+        },
+        {
+          "description": "Denies the login_pass command without any pre-configured scope.",
+          "type": "string",
+          "const": "mr-auth:deny-login-pass"
+        },
+        {
+          "description": "Denies the logout command without any pre-configured scope.",
+          "type": "string",
+          "const": "mr-auth:deny-logout"
+        },
+        {
+          "description": "This permission set configures which\noperating system information are available\nto gather from the frontend.\n\n#### Granted Permissions\n\nAll information except the host name are available.\n\n",
+          "type": "string",
+          "const": "os:default"
+        },
+        {
+          "description": "Enables the arch command without any pre-configured scope.",
+          "type": "string",
+          "const": "os:allow-arch"
+        },
+        {
+          "description": "Enables the exe_extension command without any pre-configured scope.",
+          "type": "string",
+          "const": "os:allow-exe-extension"
+        },
+        {
+          "description": "Enables the family command without any pre-configured scope.",
+          "type": "string",
+          "const": "os:allow-family"
+        },
+        {
+          "description": "Enables the hostname command without any pre-configured scope.",
+          "type": "string",
+          "const": "os:allow-hostname"
+        },
+        {
+          "description": "Enables the locale command without any pre-configured scope.",
+          "type": "string",
+          "const": "os:allow-locale"
+        },
+        {
+          "description": "Enables the os_type command without any pre-configured scope.",
+          "type": "string",
+          "const": "os:allow-os-type"
+        },
+        {
+          "description": "Enables the platform command without any pre-configured scope.",
+          "type": "string",
+          "const": "os:allow-platform"
+        },
+        {
+          "description": "Enables the version command without any pre-configured scope.",
+          "type": "string",
+          "const": "os:allow-version"
+        },
+        {
+          "description": "Denies the arch command without any pre-configured scope.",
+          "type": "string",
+          "const": "os:deny-arch"
+        },
+        {
+          "description": "Denies the exe_extension command without any pre-configured scope.",
+          "type": "string",
+          "const": "os:deny-exe-extension"
+        },
+        {
+          "description": "Denies the family command without any pre-configured scope.",
+          "type": "string",
+          "const": "os:deny-family"
+        },
+        {
+          "description": "Denies the hostname command without any pre-configured scope.",
+          "type": "string",
+          "const": "os:deny-hostname"
+        },
+        {
+          "description": "Denies the locale command without any pre-configured scope.",
+          "type": "string",
+          "const": "os:deny-locale"
+        },
+        {
+          "description": "Denies the os_type command without any pre-configured scope.",
+          "type": "string",
+          "const": "os:deny-os-type"
+        },
+        {
+          "description": "Denies the platform command without any pre-configured scope.",
+          "type": "string",
+          "const": "os:deny-platform"
+        },
+        {
+          "description": "Denies the version command without any pre-configured scope.",
+          "type": "string",
+          "const": "os:deny-version"
+        },
+        {
+          "description": "Default plugin permissions.",
+          "type": "string",
+          "const": "pack:default"
+        },
+        {
+          "description": "Enables the pack_get_profile_from_pack command without any pre-configured scope.",
+          "type": "string",
+          "const": "pack:allow-pack-get-profile-from-pack"
+        },
+        {
+          "description": "Enables the pack_install command without any pre-configured scope.",
+          "type": "string",
+          "const": "pack:allow-pack-install"
+        },
+        {
+          "description": "Denies the pack_get_profile_from_pack command without any pre-configured scope.",
+          "type": "string",
+          "const": "pack:deny-pack-get-profile-from-pack"
+        },
+        {
+          "description": "Denies the pack_install command without any pre-configured scope.",
+          "type": "string",
+          "const": "pack:deny-pack-install"
+        },
+        {
+          "description": "Default plugin permissions.",
+          "type": "string",
+          "const": "process:default"
+        },
+        {
+          "description": "Enables the process_get_all command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:allow-process-get-all"
+        },
+        {
+          "description": "Enables the process_get_by_profile_path command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:allow-process-get-by-profile-path"
+        },
+        {
+          "description": "Enables the process_kill command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:allow-process-kill"
+        },
+        {
+          "description": "Enables the process_wait_for command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:allow-process-wait-for"
+        },
+        {
+          "description": "Denies the process_get_all command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:deny-process-get-all"
+        },
+        {
+          "description": "Denies the process_get_by_profile_path command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:deny-process-get-by-profile-path"
+        },
+        {
+          "description": "Denies the process_kill command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:deny-process-kill"
+        },
+        {
+          "description": "Denies the process_wait_for command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:deny-process-wait-for"
+        },
+        {
+          "description": "Default plugin permissions.",
+          "type": "string",
+          "const": "profile:default"
+        },
+        {
+          "description": "Enables the profile_add_project_from_path command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-add-project-from-path"
+        },
+        {
+          "description": "Enables the profile_add_project_from_version command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-add-project-from-version"
+        },
+        {
+          "description": "Enables the profile_check_installed command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-check-installed"
+        },
+        {
+          "description": "Enables the profile_edit command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-edit"
+        },
+        {
+          "description": "Enables the profile_edit_icon command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-edit-icon"
+        },
+        {
+          "description": "Enables the profile_export_mrpack command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-export-mrpack"
+        },
+        {
+          "description": "Enables the profile_get command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-get"
+        },
+        {
+          "description": "Enables the profile_get_full_path command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-get-full-path"
+        },
+        {
+          "description": "Enables the profile_get_many command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-get-many"
+        },
+        {
+          "description": "Enables the profile_get_mod_full_path command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-get-mod-full-path"
+        },
+        {
+          "description": "Enables the profile_get_optimal_jre_key command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-get-optimal-jre-key"
+        },
+        {
+          "description": "Enables the profile_get_pack_export_candidates command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-get-pack-export-candidates"
+        },
+        {
+          "description": "Enables the profile_get_projects command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-get-projects"
+        },
+        {
+          "description": "Enables the profile_install command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-install"
+        },
+        {
+          "description": "Enables the profile_kill command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-kill"
+        },
+        {
+          "description": "Enables the profile_list command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-list"
+        },
+        {
+          "description": "Enables the profile_remove command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-remove"
+        },
+        {
+          "description": "Enables the profile_remove_project command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-remove-project"
+        },
+        {
+          "description": "Enables the profile_repair_managed_modrinth command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-repair-managed-modrinth"
+        },
+        {
+          "description": "Enables the profile_run command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-run"
+        },
+        {
+          "description": "Enables the profile_run_credentials command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-run-credentials"
+        },
+        {
+          "description": "Enables the profile_toggle_disable_project command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-toggle-disable-project"
+        },
+        {
+          "description": "Enables the profile_update_all command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-update-all"
+        },
+        {
+          "description": "Enables the profile_update_managed_modrinth_version command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-update-managed-modrinth-version"
+        },
+        {
+          "description": "Enables the profile_update_project command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:allow-profile-update-project"
+        },
+        {
+          "description": "Denies the profile_add_project_from_path command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-add-project-from-path"
+        },
+        {
+          "description": "Denies the profile_add_project_from_version command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-add-project-from-version"
+        },
+        {
+          "description": "Denies the profile_check_installed command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-check-installed"
+        },
+        {
+          "description": "Denies the profile_edit command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-edit"
+        },
+        {
+          "description": "Denies the profile_edit_icon command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-edit-icon"
+        },
+        {
+          "description": "Denies the profile_export_mrpack command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-export-mrpack"
+        },
+        {
+          "description": "Denies the profile_get command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-get"
+        },
+        {
+          "description": "Denies the profile_get_full_path command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-get-full-path"
+        },
+        {
+          "description": "Denies the profile_get_many command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-get-many"
+        },
+        {
+          "description": "Denies the profile_get_mod_full_path command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-get-mod-full-path"
+        },
+        {
+          "description": "Denies the profile_get_optimal_jre_key command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-get-optimal-jre-key"
+        },
+        {
+          "description": "Denies the profile_get_pack_export_candidates command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-get-pack-export-candidates"
+        },
+        {
+          "description": "Denies the profile_get_projects command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-get-projects"
+        },
+        {
+          "description": "Denies the profile_install command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-install"
+        },
+        {
+          "description": "Denies the profile_kill command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-kill"
+        },
+        {
+          "description": "Denies the profile_list command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-list"
+        },
+        {
+          "description": "Denies the profile_remove command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-remove"
+        },
+        {
+          "description": "Denies the profile_remove_project command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-remove-project"
+        },
+        {
+          "description": "Denies the profile_repair_managed_modrinth command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-repair-managed-modrinth"
+        },
+        {
+          "description": "Denies the profile_run command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-run"
+        },
+        {
+          "description": "Denies the profile_run_credentials command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-run-credentials"
+        },
+        {
+          "description": "Denies the profile_toggle_disable_project command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-toggle-disable-project"
+        },
+        {
+          "description": "Denies the profile_update_all command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-update-all"
+        },
+        {
+          "description": "Denies the profile_update_managed_modrinth_version command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-update-managed-modrinth-version"
+        },
+        {
+          "description": "Denies the profile_update_project command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile:deny-profile-update-project"
+        },
+        {
+          "description": "Default plugin permissions.",
+          "type": "string",
+          "const": "profile-create:default"
+        },
+        {
+          "description": "Enables the profile_create command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile-create:allow-profile-create"
+        },
+        {
+          "description": "Enables the profile_duplicate command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile-create:allow-profile-duplicate"
+        },
+        {
+          "description": "Denies the profile_create command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile-create:deny-profile-create"
+        },
+        {
+          "description": "Denies the profile_duplicate command without any pre-configured scope.",
+          "type": "string",
+          "const": "profile-create:deny-profile-duplicate"
+        },
+        {
+          "description": "Default plugin permissions.",
+          "type": "string",
+          "const": "settings:default"
+        },
+        {
+          "description": "Enables the cancel_directory_change command without any pre-configured scope.",
+          "type": "string",
+          "const": "settings:allow-cancel-directory-change"
+        },
+        {
+          "description": "Enables the settings_get command without any pre-configured scope.",
+          "type": "string",
+          "const": "settings:allow-settings-get"
+        },
+        {
+          "description": "Enables the settings_set command without any pre-configured scope.",
+          "type": "string",
+          "const": "settings:allow-settings-set"
+        },
+        {
+          "description": "Denies the cancel_directory_change command without any pre-configured scope.",
+          "type": "string",
+          "const": "settings:deny-cancel-directory-change"
+        },
+        {
+          "description": "Denies the settings_get command without any pre-configured scope.",
+          "type": "string",
+          "const": "settings:deny-settings-get"
+        },
+        {
+          "description": "Denies the settings_set command without any pre-configured scope.",
+          "type": "string",
+          "const": "settings:deny-settings-set"
+        },
+        {
+          "description": "This permission set configures which\nshell functionality is exposed by default.\n\n#### Granted Permissions\n\nIt allows to use the `open` functionality without any specific\nscope pre-configured. It will allow opening `http(s)://`,\n`tel:` and `mailto:` links.\n",
+          "type": "string",
+          "const": "shell:default"
+        },
+        {
+          "description": "Enables the execute command without any pre-configured scope.",
+          "type": "string",
+          "const": "shell:allow-execute"
+        },
+        {
+          "description": "Enables the kill command without any pre-configured scope.",
+          "type": "string",
+          "const": "shell:allow-kill"
+        },
+        {
+          "description": "Enables the open command without any pre-configured scope.",
+          "type": "string",
+          "const": "shell:allow-open"
+        },
+        {
+          "description": "Enables the spawn command without any pre-configured scope.",
+          "type": "string",
+          "const": "shell:allow-spawn"
+        },
+        {
+          "description": "Enables the stdin_write command without any pre-configured scope.",
+          "type": "string",
+          "const": "shell:allow-stdin-write"
+        },
+        {
+          "description": "Denies the execute command without any pre-configured scope.",
+          "type": "string",
+          "const": "shell:deny-execute"
+        },
+        {
+          "description": "Denies the kill command without any pre-configured scope.",
+          "type": "string",
+          "const": "shell:deny-kill"
+        },
+        {
+          "description": "Denies the open command without any pre-configured scope.",
+          "type": "string",
+          "const": "shell:deny-open"
+        },
+        {
+          "description": "Denies the spawn command without any pre-configured scope.",
+          "type": "string",
+          "const": "shell:deny-spawn"
+        },
+        {
+          "description": "Denies the stdin_write command without any pre-configured scope.",
+          "type": "string",
+          "const": "shell:deny-stdin-write"
+        },
+        {
+          "description": "Default plugin permissions.",
+          "type": "string",
+          "const": "tags:default"
+        },
+        {
+          "description": "Enables the tags_get_categories command without any pre-configured scope.",
+          "type": "string",
+          "const": "tags:allow-tags-get-categories"
+        },
+        {
+          "description": "Enables the tags_get_donation_platforms command without any pre-configured scope.",
+          "type": "string",
+          "const": "tags:allow-tags-get-donation-platforms"
+        },
+        {
+          "description": "Enables the tags_get_game_versions command without any pre-configured scope.",
+          "type": "string",
+          "const": "tags:allow-tags-get-game-versions"
+        },
+        {
+          "description": "Enables the tags_get_loaders command without any pre-configured scope.",
+          "type": "string",
+          "const": "tags:allow-tags-get-loaders"
+        },
+        {
+          "description": "Enables the tags_get_report_types command without any pre-configured scope.",
+          "type": "string",
+          "const": "tags:allow-tags-get-report-types"
+        },
+        {
+          "description": "Denies the tags_get_categories command without any pre-configured scope.",
+          "type": "string",
+          "const": "tags:deny-tags-get-categories"
+        },
+        {
+          "description": "Denies the tags_get_donation_platforms command without any pre-configured scope.",
+          "type": "string",
+          "const": "tags:deny-tags-get-donation-platforms"
+        },
+        {
+          "description": "Denies the tags_get_game_versions command without any pre-configured scope.",
+          "type": "string",
+          "const": "tags:deny-tags-get-game-versions"
+        },
+        {
+          "description": "Denies the tags_get_loaders command without any pre-configured scope.",
+          "type": "string",
+          "const": "tags:deny-tags-get-loaders"
+        },
+        {
+          "description": "Denies the tags_get_report_types command without any pre-configured scope.",
+          "type": "string",
+          "const": "tags:deny-tags-get-report-types"
+        },
+        {
+          "description": "This permission set configures which kind of\nupdater functions are exposed to the frontend.\n\n#### Granted Permissions\n\nThe full workflow from checking for updates to installing them\nis enabled.\n\n",
+          "type": "string",
+          "const": "updater:default"
+        },
+        {
+          "description": "Enables the check command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:allow-check"
+        },
+        {
+          "description": "Enables the download command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:allow-download"
+        },
+        {
+          "description": "Enables the download_and_install command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:allow-download-and-install"
+        },
+        {
+          "description": "Enables the install command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:allow-install"
+        },
+        {
+          "description": "Denies the check command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:deny-check"
+        },
+        {
+          "description": "Denies the download command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:deny-download"
+        },
+        {
+          "description": "Denies the download_and_install command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:deny-download-and-install"
+        },
+        {
+          "description": "Denies the install command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:deny-install"
+        },
+        {
+          "description": "Default plugin permissions.",
+          "type": "string",
+          "const": "utils:default"
+        },
+        {
+          "description": "Enables the get_opening_command command without any pre-configured scope.",
+          "type": "string",
+          "const": "utils:allow-get-opening-command"
+        },
+        {
+          "description": "Enables the get_os command without any pre-configured scope.",
+          "type": "string",
+          "const": "utils:allow-get-os"
+        },
+        {
+          "description": "Enables the highlight_in_folder command without any pre-configured scope.",
+          "type": "string",
+          "const": "utils:allow-highlight-in-folder"
+        },
+        {
+          "description": "Enables the open_path command without any pre-configured scope.",
+          "type": "string",
+          "const": "utils:allow-open-path"
+        },
+        {
+          "description": "Enables the progress_bars_list command without any pre-configured scope.",
+          "type": "string",
+          "const": "utils:allow-progress-bars-list"
+        },
+        {
+          "description": "Enables the should_disable_mouseover command without any pre-configured scope.",
+          "type": "string",
+          "const": "utils:allow-should-disable-mouseover"
+        },
+        {
+          "description": "Enables the show_launcher_logs_folder command without any pre-configured scope.",
+          "type": "string",
+          "const": "utils:allow-show-launcher-logs-folder"
+        },
+        {
+          "description": "Denies the get_opening_command command without any pre-configured scope.",
+          "type": "string",
+          "const": "utils:deny-get-opening-command"
+        },
+        {
+          "description": "Denies the get_os command without any pre-configured scope.",
+          "type": "string",
+          "const": "utils:deny-get-os"
+        },
+        {
+          "description": "Denies the highlight_in_folder command without any pre-configured scope.",
+          "type": "string",
+          "const": "utils:deny-highlight-in-folder"
+        },
+        {
+          "description": "Denies the open_path command without any pre-configured scope.",
+          "type": "string",
+          "const": "utils:deny-open-path"
+        },
+        {
+          "description": "Denies the progress_bars_list command without any pre-configured scope.",
+          "type": "string",
+          "const": "utils:deny-progress-bars-list"
+        },
+        {
+          "description": "Denies the should_disable_mouseover command without any pre-configured scope.",
+          "type": "string",
+          "const": "utils:deny-should-disable-mouseover"
+        },
+        {
+          "description": "Denies the show_launcher_logs_folder command without any pre-configured scope.",
+          "type": "string",
+          "const": "utils:deny-show-launcher-logs-folder"
+        },
+        {
+          "description": "This permission set configures what kind of\noperations are available from the window state plugin.\n\n#### Granted Permissions\n\nAll operations are enabled by default.\n\n",
+          "type": "string",
+          "const": "window-state:default"
+        },
+        {
+          "description": "Enables the filename command without any pre-configured scope.",
+          "type": "string",
+          "const": "window-state:allow-filename"
+        },
+        {
+          "description": "Enables the restore_state command without any pre-configured scope.",
+          "type": "string",
+          "const": "window-state:allow-restore-state"
+        },
+        {
+          "description": "Enables the save_window_state command without any pre-configured scope.",
+          "type": "string",
+          "const": "window-state:allow-save-window-state"
+        },
+        {
+          "description": "Denies the filename command without any pre-configured scope.",
+          "type": "string",
+          "const": "window-state:deny-filename"
+        },
+        {
+          "description": "Denies the restore_state command without any pre-configured scope.",
+          "type": "string",
+          "const": "window-state:deny-restore-state"
+        },
+        {
+          "description": "Denies the save_window_state command without any pre-configured scope.",
+          "type": "string",
+          "const": "window-state:deny-save-window-state"
+        }
+      ]
+    },
+    "Value": {
+      "description": "All supported ACL values.",
+      "anyOf": [
+        {
+          "description": "Represents a null JSON value.",
+          "type": "null"
+        },
+        {
+          "description": "Represents a [`bool`].",
+          "type": "boolean"
+        },
+        {
+          "description": "Represents a valid ACL [`Number`].",
+          "allOf": [
+            {
+              "$ref": "#/definitions/Number"
+            }
+          ]
+        },
+        {
+          "description": "Represents a [`String`].",
+          "type": "string"
+        },
+        {
+          "description": "Represents a list of other [`Value`]s.",
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/Value"
+          }
+        },
+        {
+          "description": "Represents a map of [`String`] keys to [`Value`]s.",
+          "type": "object",
+          "additionalProperties": {
+            "$ref": "#/definitions/Value"
+          }
+        }
+      ]
+    },
+    "Number": {
+      "description": "A valid ACL number.",
+      "anyOf": [
+        {
+          "description": "Represents an [`i64`].",
+          "type": "integer",
+          "format": "int64"
+        },
+        {
+          "description": "Represents a [`f64`].",
+          "type": "number",
+          "format": "double"
+        }
+      ]
+    },
+    "Target": {
+      "description": "Platform target.",
+      "oneOf": [
+        {
+          "description": "MacOS.",
+          "type": "string",
+          "enum": [
+            "macOS"
+          ]
+        },
+        {
+          "description": "Windows.",
+          "type": "string",
+          "enum": [
+            "windows"
+          ]
+        },
+        {
+          "description": "Linux.",
+          "type": "string",
+          "enum": [
+            "linux"
+          ]
+        },
+        {
+          "description": "Android.",
+          "type": "string",
+          "enum": [
+            "android"
+          ]
+        },
+        {
+          "description": "iOS.",
+          "type": "string",
+          "enum": [
+            "iOS"
+          ]
+        }
+      ]
+    },
+    "ShellAllowedArg": {
+      "description": "A command argument allowed to be executed by the webview API.",
+      "anyOf": [
+        {
+          "description": "A non-configurable argument that is passed to the command in the order it was specified.",
+          "type": "string"
+        },
+        {
+          "description": "A variable that is set while calling the command from the webview API.",
+          "type": "object",
+          "required": [
+            "validator"
+          ],
+          "properties": {
+            "raw": {
+              "description": "Marks the validator as a raw regex, meaning the plugin should not make any modification at runtime.\n\nThis means the regex will not match on the entire string by default, which might be exploited if your regex allow unexpected input to be considered valid. When using this option, make sure your regex is correct.",
+              "default": false,
+              "type": "boolean"
+            },
+            "validator": {
+              "description": "[regex] validator to require passed values to conform to an expected input.\n\nThis will require the argument value passed to this variable to match the `validator` regex before it will be executed.\n\nThe regex string is by default surrounded by `^...$` to match the full string. For example the `https?://\\w+` regex would be registered as `^https?://\\w+$`.\n\n[regex]: <https://docs.rs/regex/latest/regex/#syntax>",
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        }
+      ]
+    },
+    "ShellAllowedArgs": {
+      "description": "A set of command arguments allowed to be executed by the webview API.\n\nA value of `true` will allow any arguments to be passed to the command. `false` will disable all arguments. A list of [`ShellAllowedArg`] will set those arguments as the only valid arguments to be passed to the attached command configuration.",
+      "anyOf": [
+        {
+          "description": "Use a simple boolean to allow all or disable all arguments to this command configuration.",
+          "type": "boolean"
+        },
+        {
+          "description": "A specific set of [`ShellAllowedArg`] that are valid to call for the command configuration.",
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/ShellAllowedArg"
+          }
+        }
+      ]
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/daedalus_client/Cargo.toml b/apps/daedalus_client/Cargo.toml
index 37acaeb10..30b0f9db5 100644
--- a/apps/daedalus_client/Cargo.toml
+++ b/apps/daedalus_client/Cargo.toml
@@ -16,18 +16,27 @@ serde_json = "1.0"
 serde-xml-rs = "0.6.0"
 lazy_static = "1.4.0"
 thiserror = "1.0"
-reqwest = { version = "0.12.5", features = ["stream", "json", "rustls-tls"] }
+reqwest = { version = "0.12.5", default-features = false, features = [
+    "stream",
+    "json",
+    "rustls-tls-native-roots",
+] }
 async_zip = { version = "0.0.17", features = ["full"] }
 semver = "1.0"
 chrono = { version = "0.4", features = ["serde"] }
 bytes = "1.6.0"
-rust-s3 = "0.34.0"
+rust-s3 = { version = "0.33.0", default-features = false, features = [
+    "fail-on-err",
+    "tags",
+    "tokio-rustls-tls",
+    "reqwest",
+] }
 dashmap = "5.5.3"
 sha1_smol = { version = "1.0.0", features = ["std"] }
-indexmap = { version = "2.2.6", features = ["serde"]}
+indexmap = { version = "2.2.6", features = ["serde"] }
 itertools = "0.13.0"
 tracing-error = "0.2.0"
 
 tracing = "0.1"
 tracing-subscriber = { version = "0.3", features = ["env-filter"] }
-tracing-futures = { version = "0.2.5", features = ["futures", "tokio"] }
\ No newline at end of file
+tracing-futures = { version = "0.2.5", features = ["futures", "tokio"] }
diff --git a/apps/daedalus_client/src/forge.rs b/apps/daedalus_client/src/forge.rs
index b36266556..5591f3211 100644
--- a/apps/daedalus_client/src/forge.rs
+++ b/apps/daedalus_client/src/forge.rs
@@ -749,6 +749,7 @@ async fn fetch(
         let manifest = daedalus::modded::Manifest {
             game_versions: forge_versions
                 .into_iter()
+                .sorted_by(|a, b| b.game_version.cmp(&a.game_version))
                 .rev()
                 .chunk_by(|x| x.game_version.clone())
                 .into_iter()
diff --git a/apps/docs/astro.config.mjs b/apps/docs/astro.config.mjs
index a311a155f..4fcf82fa6 100644
--- a/apps/docs/astro.config.mjs
+++ b/apps/docs/astro.config.mjs
@@ -1,5 +1,5 @@
-import { defineConfig } from 'astro/config';
-import starlight from '@astrojs/starlight';
+import starlight from '@astrojs/starlight'
+import { defineConfig } from 'astro/config'
 import starlightOpenAPI, { openAPISidebarGroups } from 'starlight-openapi'
 
 // https://astro.build/config
@@ -8,15 +8,16 @@ export default defineConfig({
   integrations: [
     starlight({
       title: 'Modrinth Documentation',
+      favicon: '/favicon.ico',
       editLink: {
         baseUrl: 'https://github.com/modrinth/code/edit/main/apps/docs/',
       },
       social: {
-          github: 'https://github.com/modrinth/code',
-          discord: 'https://discord.modrinth.com',
-          'x.com': 'https://x.com/modrinth',
-          mastodon: 'https://floss.social/@modrinth',
-          threads: 'https://threads.net/@modrinth',
+        github: 'https://github.com/modrinth/code',
+        discord: 'https://discord.modrinth.com',
+        'x.com': 'https://x.com/modrinth',
+        mastodon: 'https://floss.social/@modrinth',
+        threads: 'https://threads.net/@modrinth',
       },
       logo: {
         light: './src/assets/light-logo.svg',
@@ -36,16 +37,16 @@ export default defineConfig({
             label: 'Modrinth API',
             schema: './public/openapi.yaml',
           },
-        ])
+        ]),
       ],
       sidebar: [
         {
-            label: 'Contributing to Modrinth',
-            autogenerate: { directory: 'contributing' },
+          label: 'Contributing to Modrinth',
+          autogenerate: { directory: 'contributing' },
         },
         // Add the generated sidebar group to the sidebar.
         ...openAPISidebarGroups,
       ],
     }),
   ],
-});
+})
diff --git a/apps/docs/public/openapi.yaml b/apps/docs/public/openapi.yaml
index c4e023beb..1b7bd6968 100644
--- a/apps/docs/public/openapi.yaml
+++ b/apps/docs/public/openapi.yaml
@@ -339,8 +339,8 @@ components:
           type: array
           items:
             type: string
-          description: The mod loaders that this version supports
-          example: ["fabric", "forge"]
+          description: The mod loaders that this version supports. In case of resource packs, use "minecraft"
+          example: ["fabric", "forge", "minecraft"]
         featured:
           type: boolean
           description: Whether the version is featured or not
diff --git a/apps/frontend/.eslintrc.cjs b/apps/frontend/.eslintrc.cjs
index 5d253386a..b0faf8948 100644
--- a/apps/frontend/.eslintrc.cjs
+++ b/apps/frontend/.eslintrc.cjs
@@ -1,4 +1,7 @@
 module.exports = {
   root: true,
   extends: ["../../packages/eslint-config-custom/nuxt.js"],
+  rules: {
+    "import/no-unresolved": "off",
+  },
 };
diff --git a/apps/frontend/nuxt.config.ts b/apps/frontend/nuxt.config.ts
index 867919706..966fe4fb1 100644
--- a/apps/frontend/nuxt.config.ts
+++ b/apps/frontend/nuxt.config.ts
@@ -176,7 +176,6 @@ export default defineNuxtConfig({
         $fetch(`${API_URL}projects_random?count=60`, headers),
         $fetch(`${API_URL}search?limit=3&query=leave&index=relevance`, headers),
         $fetch(`${API_URL}search?limit=3&query=&index=updated`, headers),
-        // TODO: dehardcode
         $fetch(`${API_URL.replace("/v2/", "/_internal/")}billing/products`, headers),
       ]);
 
@@ -321,8 +320,10 @@ export default defineNuxtConfig({
     apiBaseUrl: process.env.BASE_URL ?? globalThis.BASE_URL ?? getApiUrl(),
     // @ts-ignore
     rateLimitKey: process.env.RATE_LIMIT_IGNORE_KEY ?? globalThis.RATE_LIMIT_IGNORE_KEY,
+    pyroBaseUrl: process.env.PYRO_BASE_URL,
     public: {
       apiBaseUrl: getApiUrl(),
+      pyroBaseUrl: process.env.PYRO_BASE_URL,
       siteUrl: getDomain(),
       production: isProduction(),
       featureFlagOverrides: getFeatureFlagOverrides(),
@@ -361,7 +362,7 @@ export default defineNuxtConfig({
       },
     },
   },
-  modules: ["@vintl/nuxt", "@nuxtjs/turnstile"],
+  modules: ["@vintl/nuxt", "@nuxtjs/turnstile", "@pinia/nuxt"],
   vintl: {
     defaultLocale: "en-US",
     locales: [
@@ -462,6 +463,7 @@ function getDomain() {
       return "https://modrinth.com";
     }
   } else {
-    return "http://localhost:3000";
+    const port = process.env.PORT || 3000;
+    return `http://localhost:${port}`;
   }
 }
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index fca6cc271..3a13549f4 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -16,6 +16,7 @@
     "@formatjs/cli": "^6.2.12",
     "@nuxt/devtools": "^1.3.3",
     "@nuxtjs/turnstile": "^0.8.0",
+    "@types/dompurify": "^3.0.5",
     "@types/node": "^20.1.0",
     "@vintl/compact-number": "^2.0.5",
     "@vintl/how-ago": "^3.0.1",
@@ -38,8 +39,13 @@
     "@modrinth/assets": "workspace:*",
     "@modrinth/ui": "workspace:*",
     "@modrinth/utils": "workspace:*",
+    "@pinia/nuxt": "^0.5.1",
     "@vintl/vintl": "^4.4.1",
+    "@vueuse/core": "^11.1.0",
+    "ace-builds": "^1.36.2",
+    "ansi-to-html": "^0.7.2",
     "dayjs": "^1.11.7",
+    "dompurify": "^3.1.7",
     "floating-vue": "2.0.0-beta.20",
     "fuse.js": "^6.6.2",
     "highlight.js": "^11.7.0",
@@ -48,9 +54,12 @@
     "jszip": "^3.10.1",
     "markdown-it": "14.1.0",
     "pathe": "^1.1.2",
+    "pinia": "^2.1.7",
     "qrcode.vue": "^3.4.0",
     "semver": "^7.5.4",
-    "vue-multiselect": "3.0.0",
+    "vue-multiselect": "3.0.0-alpha.2",
+    "vue-typed-virtual-list": "^1.0.10",
+    "vue3-ace-editor": "^2.2.4",
     "vue3-apexcharts": "^1.5.2",
     "xss": "^1.0.14"
   }
diff --git a/apps/frontend/src/assets/images/badges/alpha-tester.svg b/apps/frontend/src/assets/images/badges/alpha-tester.svg
new file mode 100644
index 000000000..487b25eb7
--- /dev/null
+++ b/apps/frontend/src/assets/images/badges/alpha-tester.svg
@@ -0,0 +1,12 @@
+<svg width="59" height="59" viewBox="0 0 59 59" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3318_3814)">
+<rect x="0.414214" y="29.75" width="41.4871" height="41.4871" rx="6" transform="rotate(-45 0.414214 29.75)" fill="#601C2D" stroke="#FF496E" stroke-width="2"/>
+<path d="M28.3854 24.14C27.7881 24.14 27.2747 23.9813 26.8454 23.664C26.4161 23.3373 26.0894 22.88 25.8654 22.292C25.6414 21.6947 25.5294 20.9993 25.5294 20.206C25.5294 18.8993 25.7954 17.91 26.3274 17.238C26.8594 16.5567 27.5687 16.216 28.4554 16.216C28.8194 16.216 29.1367 16.2673 29.4074 16.37C29.6874 16.4633 29.9301 16.594 30.1354 16.762C30.3407 16.93 30.5181 17.1213 30.6674 17.336H30.7234L30.9054 16.356H32.6694V21.578C32.6694 21.8953 32.7254 22.11 32.8374 22.222C32.9587 22.334 33.0941 22.39 33.2434 22.39C33.3087 22.39 33.3834 22.3807 33.4674 22.362C33.5514 22.3433 33.6121 22.3293 33.6494 22.32V23.958C33.6027 23.986 33.5234 24.014 33.4114 24.042C33.2994 24.07 33.1781 24.0933 33.0474 24.112C32.9261 24.1307 32.8141 24.14 32.7114 24.14C32.2447 24.14 31.8667 24.056 31.5774 23.888C31.2881 23.72 31.0641 23.4213 30.9054 22.992H30.7654C30.6254 23.1973 30.4434 23.3887 30.2194 23.566C29.9954 23.7433 29.7294 23.8833 29.4214 23.986C29.1134 24.0887 28.7681 24.14 28.3854 24.14ZM29.1554 22.502C29.5381 22.502 29.8414 22.4227 30.0654 22.264C30.2987 22.1053 30.4667 21.8627 30.5694 21.536C30.6721 21.2 30.7234 20.78 30.7234 20.276V20.192C30.7234 19.4453 30.6067 18.8807 30.3734 18.498C30.1494 18.106 29.7341 17.91 29.1274 17.91C28.6327 17.91 28.2641 18.106 28.0214 18.498C27.7787 18.89 27.6574 19.464 27.6574 20.22C27.6574 20.9667 27.7787 21.536 28.0214 21.928C28.2641 22.3107 28.6421 22.502 29.1554 22.502Z" fill="#FF496E"/>
+<path d="M23.0278 31.9446C23.0136 31.7884 22.9504 31.6669 22.8382 31.5803C22.7274 31.4922 22.569 31.4482 22.363 31.4482C22.2267 31.4482 22.113 31.4659 22.0221 31.5014C21.9312 31.5369 21.863 31.5859 21.8176 31.6484C21.7721 31.7095 21.7487 31.7798 21.7472 31.8594C21.7444 31.9247 21.7572 31.9822 21.7856 32.032C21.8154 32.0817 21.858 32.1257 21.9134 32.1641C21.9703 32.201 22.0384 32.2337 22.118 32.2621C22.1975 32.2905 22.287 32.3153 22.3865 32.3366L22.7615 32.4219C22.9774 32.4688 23.1677 32.5312 23.3325 32.6094C23.4987 32.6875 23.6379 32.7805 23.7501 32.8885C23.8637 32.9964 23.9497 33.1207 24.0079 33.2614C24.0661 33.402 24.096 33.5597 24.0974 33.7344C24.096 34.0099 24.0264 34.2464 23.8886 34.4439C23.7508 34.6413 23.5526 34.7926 23.2941 34.8977C23.037 35.0028 22.7267 35.0554 22.363 35.0554C21.998 35.0554 21.6798 35.0007 21.4085 34.8913C21.1372 34.782 20.9262 34.6158 20.7757 34.3928C20.6251 34.1697 20.5477 33.8878 20.5434 33.5469H21.5534C21.5619 33.6875 21.5995 33.8047 21.6663 33.8984C21.733 33.9922 21.8247 34.0632 21.9411 34.1115C22.059 34.1598 22.1954 34.1839 22.3502 34.1839C22.4923 34.1839 22.613 34.1648 22.7124 34.1264C22.8133 34.0881 22.8907 34.0348 22.9447 33.9666C22.9987 33.8984 23.0264 33.8203 23.0278 33.7322C23.0264 33.6499 23.0008 33.5795 22.9511 33.5213C22.9014 33.4616 22.8247 33.4105 22.721 33.3679C22.6187 33.3239 22.488 33.2834 22.3289 33.2464L21.873 33.1399C21.4951 33.0533 21.1975 32.9134 20.9802 32.7202C20.7629 32.5256 20.6549 32.2628 20.6563 31.9318C20.6549 31.6619 20.7274 31.4254 20.8737 31.2223C21.02 31.0192 21.2224 30.8608 21.4809 30.7472C21.7394 30.6335 22.0342 30.5767 22.3651 30.5767C22.7032 30.5767 22.9965 30.6342 23.2451 30.7493C23.4951 30.8629 23.689 31.0227 23.8268 31.2287C23.9646 31.4347 24.0349 31.6733 24.0377 31.9446H23.0278ZM25.6847 30.6364V35H24.6301V30.6364H25.6847ZM30.0606 30.6364V35H29.1657L27.4292 32.4815H27.4015V35H26.3469V30.6364H27.2545L28.9719 33.1506H29.0081V30.6364H30.0606ZM34.6847 32.2173H33.6194C33.6052 32.108 33.5761 32.0092 33.532 31.9212C33.488 31.8331 33.4298 31.7578 33.3573 31.6953C33.2849 31.6328 33.199 31.5852 33.0995 31.5526C33.0015 31.5185 32.8928 31.5014 32.7735 31.5014C32.5619 31.5014 32.3794 31.5533 32.2259 31.657C32.074 31.7607 31.9568 31.9105 31.8744 32.1065C31.7934 32.3026 31.7529 32.5398 31.7529 32.8182C31.7529 33.108 31.7941 33.3509 31.8765 33.5469C31.9603 33.7415 32.0775 33.8885 32.2281 33.9879C32.3801 34.0859 32.5597 34.1349 32.7671 34.1349C32.8836 34.1349 32.9894 34.12 33.0846 34.0902C33.1812 34.0604 33.2657 34.017 33.3382 33.9602C33.412 33.902 33.4724 33.8317 33.5193 33.7493C33.5676 33.6655 33.6009 33.571 33.6194 33.4659L34.6847 33.4723C34.6663 33.6655 34.6102 33.8558 34.5164 34.0433C34.4241 34.2308 34.297 34.402 34.135 34.5568C33.9731 34.7102 33.7757 34.8324 33.5427 34.9233C33.3112 35.0142 33.0455 35.0597 32.7458 35.0597C32.3509 35.0597 31.9972 34.973 31.6847 34.7997C31.3737 34.625 31.1279 34.3707 30.9475 34.0369C30.7671 33.7031 30.6769 33.2969 30.6769 32.8182C30.6769 32.3381 30.7686 31.9311 30.9518 31.5973C31.135 31.2635 31.3829 31.0099 31.6954 30.8366C32.0079 30.6634 32.358 30.5767 32.7458 30.5767C33.01 30.5767 33.2544 30.6136 33.4788 30.6875C33.7032 30.7599 33.9007 30.8665 34.0711 31.0071C34.2416 31.1463 34.3801 31.3175 34.4866 31.5206C34.5931 31.7237 34.6592 31.956 34.6847 32.2173ZM35.2883 35V30.6364H38.3309V31.4929H36.343V32.3878H38.1753V33.2464H36.343V34.1435H38.3309V35H35.2883ZM20.2361 42H19.1025L20.5748 37.6364H21.979L23.4513 42H22.3177L21.2929 38.7358H21.2588L20.2361 42ZM20.0848 40.2827H22.4541V41.0838H20.0848V40.2827ZM23.9211 42V37.6364H24.9758V41.1435H26.7911V42H23.9211ZM27.3371 42V37.6364H29.1396C29.4664 37.6364 29.7483 37.7003 29.9855 37.8281C30.2242 37.9545 30.4081 38.1314 30.5374 38.3587C30.6666 38.5845 30.7313 38.8473 30.7313 39.147C30.7313 39.4482 30.6652 39.7116 30.5331 39.9375C30.4024 40.1619 30.2156 40.3359 29.9727 40.4595C29.7298 40.5831 29.4415 40.6449 29.1077 40.6449H27.9955V39.8139H28.9117C29.0708 39.8139 29.2036 39.7862 29.3101 39.7308C29.4181 39.6754 29.4997 39.598 29.5551 39.4986C29.6105 39.3977 29.6382 39.2805 29.6382 39.147C29.6382 39.0121 29.6105 38.8956 29.5551 38.7976C29.4997 38.6982 29.4181 38.6214 29.3101 38.5675C29.2021 38.5135 29.0693 38.4865 28.9117 38.4865H28.3918V42H27.3371ZM31.2512 42V37.6364H32.3058V39.3878H34.0253V37.6364H35.0779V42H34.0253V40.2464H32.3058V42H31.2512ZM36.6833 42H35.5498L37.0221 37.6364H38.4262L39.8985 42H38.765L37.7401 38.7358H37.7061L36.6833 42ZM36.532 40.2827H38.9014V41.0838H36.532V40.2827Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_3318_3814">
+<rect width="59" height="59" rx="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/frontend/src/assets/images/badges/beta-tester.svg b/apps/frontend/src/assets/images/badges/beta-tester.svg
new file mode 100644
index 000000000..63d0c4003
--- /dev/null
+++ b/apps/frontend/src/assets/images/badges/beta-tester.svg
@@ -0,0 +1,12 @@
+<svg width="59" height="59" viewBox="0 0 59 59" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3318_3833)">
+<rect x="0.414214" y="29.75" width="41.4871" height="41.4871" rx="6" transform="rotate(-45 0.414214 29.75)" fill="#1C3360" stroke="#4F9CFF" stroke-width="2"/>
+<path d="M26.1623 27.36V16.608C26.1623 15.852 26.2976 15.2313 26.5683 14.746C26.8483 14.2513 27.2403 13.8873 27.7443 13.654C28.2576 13.4113 28.8596 13.29 29.5503 13.29C30.2223 13.29 30.7963 13.3927 31.2723 13.598C31.7483 13.794 32.1123 14.0927 32.3643 14.494C32.6256 14.886 32.7563 15.3807 32.7563 15.978C32.7563 16.426 32.677 16.8133 32.5183 17.14C32.369 17.4667 32.1543 17.728 31.8743 17.924C31.6036 18.12 31.277 18.2553 30.8943 18.33V18.372C31.3796 18.4373 31.7996 18.5727 32.1543 18.778C32.5183 18.9833 32.7983 19.2727 32.9943 19.646C33.1996 20.01 33.3023 20.4767 33.3023 21.046C33.3023 21.6993 33.153 22.2593 32.8543 22.726C32.565 23.1833 32.173 23.5333 31.6783 23.776C31.193 24.0187 30.6516 24.14 30.0543 24.14C29.7556 24.14 29.5083 24.1213 29.3123 24.084C29.1163 24.056 28.9343 24.0093 28.7663 23.944C28.6076 23.8787 28.435 23.7993 28.2483 23.706V27.36H26.1623ZM29.6623 22.474C30.129 22.474 30.493 22.334 30.7543 22.054C31.0156 21.7647 31.1463 21.368 31.1463 20.864C31.1463 20.4813 31.067 20.1733 30.9083 19.94C30.759 19.6973 30.5676 19.5247 30.3343 19.422C30.101 19.31 29.8583 19.254 29.6063 19.254H28.9763V17.686H29.4803C29.7323 17.686 29.947 17.6253 30.1243 17.504C30.3016 17.3733 30.437 17.2007 30.5303 16.986C30.6236 16.762 30.6703 16.51 30.6703 16.23C30.6703 15.7913 30.5583 15.4647 30.3343 15.25C30.1103 15.026 29.8443 14.914 29.5363 14.914C29.275 14.914 29.0463 14.97 28.8503 15.082C28.6543 15.194 28.505 15.376 28.4023 15.628C28.2996 15.8707 28.2483 16.202 28.2483 16.622V21.998C28.4816 22.1473 28.7103 22.264 28.9343 22.348C29.1583 22.432 29.401 22.474 29.6623 22.474Z" fill="#4F9CFF"/>
+<path d="M23.0278 31.9446C23.0136 31.7884 22.9504 31.6669 22.8382 31.5803C22.7274 31.4922 22.569 31.4482 22.363 31.4482C22.2267 31.4482 22.113 31.4659 22.0221 31.5014C21.9312 31.5369 21.863 31.5859 21.8176 31.6484C21.7721 31.7095 21.7487 31.7798 21.7472 31.8594C21.7444 31.9247 21.7572 31.9822 21.7856 32.032C21.8154 32.0817 21.858 32.1257 21.9134 32.1641C21.9703 32.201 22.0384 32.2337 22.118 32.2621C22.1975 32.2905 22.287 32.3153 22.3865 32.3366L22.7615 32.4219C22.9774 32.4688 23.1677 32.5312 23.3325 32.6094C23.4987 32.6875 23.6379 32.7805 23.7501 32.8885C23.8637 32.9964 23.9497 33.1207 24.0079 33.2614C24.0661 33.402 24.096 33.5597 24.0974 33.7344C24.096 34.0099 24.0264 34.2464 23.8886 34.4439C23.7508 34.6413 23.5526 34.7926 23.2941 34.8977C23.037 35.0028 22.7267 35.0554 22.363 35.0554C21.998 35.0554 21.6798 35.0007 21.4085 34.8913C21.1372 34.782 20.9262 34.6158 20.7757 34.3928C20.6251 34.1697 20.5477 33.8878 20.5434 33.5469H21.5534C21.5619 33.6875 21.5995 33.8047 21.6663 33.8984C21.733 33.9922 21.8247 34.0632 21.9411 34.1115C22.059 34.1598 22.1954 34.1839 22.3502 34.1839C22.4923 34.1839 22.613 34.1648 22.7124 34.1264C22.8133 34.0881 22.8907 34.0348 22.9447 33.9666C22.9987 33.8984 23.0264 33.8203 23.0278 33.7322C23.0264 33.6499 23.0008 33.5795 22.9511 33.5213C22.9014 33.4616 22.8247 33.4105 22.721 33.3679C22.6187 33.3239 22.488 33.2834 22.3289 33.2464L21.873 33.1399C21.4951 33.0533 21.1975 32.9134 20.9802 32.7202C20.7629 32.5256 20.6549 32.2628 20.6563 31.9318C20.6549 31.6619 20.7274 31.4254 20.8737 31.2223C21.02 31.0192 21.2224 30.8608 21.4809 30.7472C21.7394 30.6335 22.0342 30.5767 22.3651 30.5767C22.7032 30.5767 22.9965 30.6342 23.2451 30.7493C23.4951 30.8629 23.689 31.0227 23.8268 31.2287C23.9646 31.4347 24.0349 31.6733 24.0377 31.9446H23.0278ZM25.6847 30.6364V35H24.6301V30.6364H25.6847ZM30.0606 30.6364V35H29.1657L27.4292 32.4815H27.4015V35H26.3469V30.6364H27.2545L28.9719 33.1506H29.0081V30.6364H30.0606ZM34.6847 32.2173H33.6194C33.6052 32.108 33.5761 32.0092 33.532 31.9212C33.488 31.8331 33.4298 31.7578 33.3573 31.6953C33.2849 31.6328 33.199 31.5852 33.0995 31.5526C33.0015 31.5185 32.8928 31.5014 32.7735 31.5014C32.5619 31.5014 32.3794 31.5533 32.2259 31.657C32.074 31.7607 31.9568 31.9105 31.8744 32.1065C31.7934 32.3026 31.7529 32.5398 31.7529 32.8182C31.7529 33.108 31.7941 33.3509 31.8765 33.5469C31.9603 33.7415 32.0775 33.8885 32.2281 33.9879C32.3801 34.0859 32.5597 34.1349 32.7671 34.1349C32.8836 34.1349 32.9894 34.12 33.0846 34.0902C33.1812 34.0604 33.2657 34.017 33.3382 33.9602C33.412 33.902 33.4724 33.8317 33.5193 33.7493C33.5676 33.6655 33.6009 33.571 33.6194 33.4659L34.6847 33.4723C34.6663 33.6655 34.6102 33.8558 34.5164 34.0433C34.4241 34.2308 34.297 34.402 34.135 34.5568C33.9731 34.7102 33.7757 34.8324 33.5427 34.9233C33.3112 35.0142 33.0455 35.0597 32.7458 35.0597C32.3509 35.0597 31.9972 34.973 31.6847 34.7997C31.3737 34.625 31.1279 34.3707 30.9475 34.0369C30.7671 33.7031 30.6769 33.2969 30.6769 32.8182C30.6769 32.3381 30.7686 31.9311 30.9518 31.5973C31.135 31.2635 31.3829 31.0099 31.6954 30.8366C32.0079 30.6634 32.358 30.5767 32.7458 30.5767C33.01 30.5767 33.2544 30.6136 33.4788 30.6875C33.7032 30.7599 33.9007 30.8665 34.0711 31.0071C34.2416 31.1463 34.3801 31.3175 34.4866 31.5206C34.5931 31.7237 34.6592 31.956 34.6847 32.2173ZM35.2883 35V30.6364H38.3309V31.4929H36.343V32.3878H38.1753V33.2464H36.343V34.1435H38.3309V35H35.2883ZM21.9142 42V37.6364H23.7338C24.0605 37.6364 24.334 37.6825 24.5542 37.7749C24.7757 37.8672 24.9419 37.9964 25.0527 38.1626C25.165 38.3288 25.2211 38.5213 25.2211 38.7401C25.2211 38.9062 25.1863 39.0547 25.1167 39.1854C25.0471 39.3146 24.9512 39.4219 24.829 39.5071C24.7069 39.5923 24.5655 39.652 24.405 39.6861V39.7287C24.5811 39.7372 24.7438 39.7848 24.8929 39.8714C25.0435 39.9581 25.1642 40.0788 25.2551 40.2337C25.3461 40.3871 25.3915 40.5689 25.3915 40.7791C25.3915 41.0135 25.3319 41.223 25.2125 41.4077C25.0932 41.5909 24.9206 41.7358 24.6948 41.8423C24.4689 41.9474 24.1948 42 23.8723 42H21.9142ZM22.9689 41.1499H23.6209C23.8496 41.1499 24.0179 41.1065 24.1259 41.0199C24.2353 40.9332 24.29 40.8125 24.29 40.6577C24.29 40.5455 24.2637 40.4489 24.2111 40.3679C24.1586 40.2855 24.084 40.2223 23.9874 40.1783C23.8908 40.1328 23.775 40.1101 23.6401 40.1101H22.9689V41.1499ZM22.9689 39.4304H23.5527C23.6678 39.4304 23.7701 39.4112 23.8596 39.3729C23.949 39.3345 24.0186 39.2791 24.0684 39.2067C24.1195 39.1342 24.1451 39.0469 24.1451 38.9446C24.1451 38.7983 24.0932 38.6832 23.9895 38.5994C23.8858 38.5156 23.7459 38.4737 23.5698 38.4737H22.9689V39.4304ZM25.8986 42V37.6364H28.9412V38.4929H26.9533V39.3878H28.7857V40.2464H26.9533V41.1435H28.9412V42H25.8986ZM29.459 38.4929V37.6364H33.1472V38.4929H31.824V42H30.7843V38.4929H29.459ZM34.0613 42H32.9277L34.4 37.6364H35.8042L37.2765 42H36.1429L35.1181 38.7358H35.084L34.0613 42ZM33.91 40.2827H36.2793V41.0838H33.91V40.2827Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_3318_3833">
+<rect width="59" height="59" rx="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/frontend/src/assets/images/games/rinth.png b/apps/frontend/src/assets/images/games/rinth.png
new file mode 100644
index 000000000..35b04a575
Binary files /dev/null and b/apps/frontend/src/assets/images/games/rinth.png differ
diff --git a/apps/frontend/src/assets/images/servers/minecraft-background-dark.png b/apps/frontend/src/assets/images/servers/minecraft-background-dark.png
new file mode 100644
index 000000000..bb22629be
Binary files /dev/null and b/apps/frontend/src/assets/images/servers/minecraft-background-dark.png differ
diff --git a/apps/frontend/src/assets/images/servers/minecraft_server_icon.png b/apps/frontend/src/assets/images/servers/minecraft_server_icon.png
new file mode 100644
index 000000000..ec98382d4
Binary files /dev/null and b/apps/frontend/src/assets/images/servers/minecraft_server_icon.png differ
diff --git a/apps/frontend/src/assets/images/servers/this-is-fine.gif b/apps/frontend/src/assets/images/servers/this-is-fine.gif
new file mode 100644
index 000000000..3f175f231
Binary files /dev/null and b/apps/frontend/src/assets/images/servers/this-is-fine.gif differ
diff --git a/apps/frontend/src/components/ui/Checkbox.vue b/apps/frontend/src/components/ui/Checkbox.vue
index fc9390f9f..ddfe94366 100644
--- a/apps/frontend/src/components/ui/Checkbox.vue
+++ b/apps/frontend/src/components/ui/Checkbox.vue
@@ -119,7 +119,7 @@ export default {
   }
 
   svg {
-    color: var(--color-brand-inverted);
+    color: var(--color-accent-contrast, var(--color-brand-inverted));
     stroke-width: 0.2rem;
     height: 0.8rem;
     width: 0.8rem;
diff --git a/apps/frontend/src/components/ui/CopyCode.vue b/apps/frontend/src/components/ui/CopyCode.vue
index e42fe01ee..7161a3a6b 100644
--- a/apps/frontend/src/components/ui/CopyCode.vue
+++ b/apps/frontend/src/components/ui/CopyCode.vue
@@ -45,7 +45,7 @@ export default {
   margin: 0;
   padding: 0.25rem 0.5rem;
   background-color: var(--color-code-bg);
-  width: min-content;
+  width: fit-content;
   border-radius: 10px;
   user-select: text;
   transition:
@@ -55,7 +55,6 @@ export default {
     outline 0.2s ease-in-out;
 
   span {
-    max-width: 10rem;
     overflow: hidden;
     text-overflow: ellipsis;
   }
diff --git a/apps/frontend/src/components/ui/NavTabs.vue b/apps/frontend/src/components/ui/NavTabs.vue
index 9ab0bf4d0..3d7748297 100644
--- a/apps/frontend/src/components/ui/NavTabs.vue
+++ b/apps/frontend/src/components/ui/NavTabs.vue
@@ -1,6 +1,7 @@
 <template>
   <nav
-    class="experimental-styles-within relative flex w-fit overflow-clip rounded-full bg-bg-raised p-1 text-sm font-bold"
+    ref="scrollContainer"
+    class="experimental-styles-within relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
   >
     <NuxtLink
       v-for="(link, index) in filteredLinks"
@@ -18,7 +19,9 @@
       <span class="text-nowrap">{{ link.label }}</span>
     </NuxtLink>
     <div
-      :class="`navtabs-transition pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full p-1 ${subpageSelected ? 'bg-button-bg' : 'bg-brand-highlight'}`"
+      :class="`navtabs-transition pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full p-1 ${
+        subpageSelected ? 'bg-button-bg' : 'bg-brand-highlight'
+      }`"
       :style="{
         left: sliderLeftPx,
         top: sliderTopPx,
@@ -32,6 +35,8 @@
 </template>
 
 <script setup lang="ts">
+import { ref, computed, watch, onMounted } from "vue";
+
 const route = useNativeRoute();
 
 interface Tab {
@@ -47,12 +52,13 @@ const props = defineProps<{
   query?: string;
 }>();
 
+const scrollContainer = ref<HTMLElement | null>(null);
+
 const sliderLeft = ref(4);
 const sliderTop = ref(4);
 const sliderRight = ref(4);
 const sliderBottom = ref(4);
 const activeIndex = ref(-1);
-const oldIndex = ref(-1);
 const subpageSelected = ref(false);
 
 const filteredLinks = computed(() =>
@@ -63,6 +69,8 @@ const sliderTopPx = computed(() => `${sliderTop.value}px`);
 const sliderRightPx = computed(() => `${sliderRight.value}px`);
 const sliderBottomPx = computed(() => `${sliderBottom.value}px`);
 
+const tabLinkElements = ref();
+
 function pickLink() {
   let index = -1;
   subpageSelected.value = false;
@@ -86,16 +94,13 @@ function pickLink() {
   if (activeIndex.value !== -1) {
     startAnimation();
   } else {
-    oldIndex.value = -1;
     sliderLeft.value = 0;
     sliderRight.value = 0;
   }
 }
 
-const tabLinkElements = ref();
-
 function startAnimation() {
-  const el = tabLinkElements.value[activeIndex.value].$el;
+  const el = tabLinkElements.value[activeIndex.value]?.$el;
 
   if (!el || !el.offsetParent) return;
 
@@ -141,21 +146,19 @@ function startAnimation() {
 }
 
 onMounted(() => {
-  window.addEventListener("resize", pickLink);
   pickLink();
 });
 
-onUnmounted(() => {
-  window.removeEventListener("resize", pickLink);
-});
-
-watch(route, () => pickLink());
+watch(
+  () => route.path,
+  () => pickLink(),
+);
 </script>
+
 <style scoped>
 .navtabs-transition {
-  /* Delay on opacity is to hide any jankiness as the page loads */
   transition:
-    all 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s,
+    all 150ms cubic-bezier(0.4, 0, 0.2, 1),
     opacity 250ms cubic-bezier(0.5, 0, 0.2, 1) 50ms;
 }
 </style>
diff --git a/apps/frontend/src/components/ui/NotificationItem.vue b/apps/frontend/src/components/ui/NotificationItem.vue
index 1d2132953..1f01cda87 100644
--- a/apps/frontend/src/components/ui/NotificationItem.vue
+++ b/apps/frontend/src/components/ui/NotificationItem.vue
@@ -571,6 +571,10 @@ function getMessages() {
     gap: var(--spacing-card-sm);
   }
 
+  .notification__actions .iconified-button.square-button svg {
+    margin-right: 0;
+  }
+
   .unknown-type {
     color: var(--color-red);
   }
diff --git a/apps/frontend/src/components/ui/ProjectMemberHeader.vue b/apps/frontend/src/components/ui/ProjectMemberHeader.vue
index 087ddb73d..63f75715e 100644
--- a/apps/frontend/src/components/ui/ProjectMemberHeader.vue
+++ b/apps/frontend/src/components/ui/ProjectMemberHeader.vue
@@ -384,6 +384,8 @@ const submitForReview = async () => {
 }
 
 .author-actions {
+  margin-top: var(--spacing-card-md);
+
   &:empty {
     display: none;
   }
diff --git a/apps/frontend/src/components/ui/charts/ChartDisplay.vue b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
index 36a603f58..f60edd474 100644
--- a/apps/frontend/src/components/ui/charts/ChartDisplay.vue
+++ b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
@@ -134,7 +134,6 @@
                   :data="analytics.formattedData.value.revenue.chart.data"
                   :labels="analytics.formattedData.value.revenue.chart.labels"
                   is-money
-                  suffix="<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'><line x1='12' y1='2' x2='12' y2='22'></line><path d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'></path></svg>"
                   :colors="
                     isUsingProjectColors
                       ? analytics.formattedData.value.revenue.chart.colors
@@ -193,15 +192,20 @@
                 class="country-value"
               >
                 <div class="country-flag-container">
-                  <img
-                    :src="
-                      name.toLowerCase() === 'xx' || !name
-                        ? 'https://cdn.modrinth.com/placeholder-banner.svg'
-                        : countryCodeToFlag(name)
-                    "
-                    alt="Hidden country"
-                    class="country-flag"
-                  />
+                  <template v-if="name.toLowerCase() === 'xx' || !name">
+                    <img
+                      src="https://cdn.modrinth.com/placeholder-banner.svg"
+                      alt="Placeholder flag"
+                      class="country-flag"
+                    />
+                  </template>
+                  <template v-else>
+                    <img
+                      :src="countryCodeToFlag(name)"
+                      :alt="`${countryCodeToName(name)}'s flag`"
+                      class="country-flag"
+                    />
+                  </template>
                 </div>
                 <div class="country-text">
                   <strong class="country-name"
@@ -247,15 +251,20 @@
                 class="country-value"
               >
                 <div class="country-flag-container">
-                  <img
-                    :src="
-                      name.toLowerCase() === 'xx' || !name
-                        ? 'https://cdn.modrinth.com/placeholder-banner.svg'
-                        : countryCodeToFlag(name)
-                    "
-                    alt="Hidden country"
-                    class="country-flag"
-                  />
+                  <template v-if="name.toLowerCase() === 'xx' || !name">
+                    <img
+                      src="https://cdn.modrinth.com/placeholder-banner.svg"
+                      alt="Placeholder flag"
+                      class="country-flag"
+                    />
+                  </template>
+                  <template v-else>
+                    <img
+                      :src="countryCodeToFlag(name)"
+                      :alt="`${countryCodeToName(name)}'s flag`"
+                      class="country-flag"
+                    />
+                  </template>
                 </div>
                 <div class="country-text">
                   <strong class="country-name">
diff --git a/apps/frontend/src/components/ui/servers/BackupCreateModal.vue b/apps/frontend/src/components/ui/servers/BackupCreateModal.vue
new file mode 100644
index 000000000..e0b674869
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/BackupCreateModal.vue
@@ -0,0 +1,95 @@
+<template>
+  <NewModal ref="modal" header="Creating backup" @show="focusInput">
+    <div class="flex flex-col gap-2 md:w-[600px]">
+      <div class="font-semibold text-contrast">Name</div>
+      <input
+        ref="input"
+        v-model="backupName"
+        type="text"
+        class="bg-bg-input w-full rounded-lg p-4"
+        placeholder="e.g. Before 1.21"
+        maxlength="64"
+      />
+      <div class="flex items-center gap-2">
+        <InfoIcon class="hidden sm:block" />
+        <span class="text-sm text-secondary">
+          If left empty, the backup name will default to
+          <span class="font-semibold"> Backup #{{ newBackupAmount }}</span>
+        </span>
+      </div>
+    </div>
+    <div class="mb-1 mt-4 flex justify-start gap-4">
+      <ButtonStyled color="brand">
+        <button :disabled="isCreating" @click="createBackup">
+          <PlusIcon />
+          Create backup
+        </button>
+      </ButtonStyled>
+      <ButtonStyled>
+        <button @click="hideModal">
+          <XIcon />
+          Cancel
+        </button>
+      </ButtonStyled>
+    </div>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from "vue";
+import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { PlusIcon, XIcon, InfoIcon } from "@modrinth/assets";
+import type { Server } from "~/composables/pyroServers";
+
+const props = defineProps<{
+  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+}>();
+
+const emit = defineEmits(["backupCreated"]);
+
+const modal = ref<InstanceType<typeof NewModal>>();
+const input = ref<HTMLInputElement>();
+const isCreating = ref(false);
+const backupError = ref<string | null>(null);
+const backupName = ref("");
+const newBackupAmount = computed(() =>
+  props.server.backups?.data?.length === undefined ? 1 : props.server.backups?.data?.length + 1,
+);
+
+const focusInput = () => {
+  nextTick(() => {
+    setTimeout(() => {
+      input.value?.focus();
+    }, 100);
+  });
+};
+
+const hideModal = () => {
+  modal.value?.hide();
+  backupName.value = "";
+};
+
+const createBackup = async () => {
+  if (!backupName.value.trim()) {
+    backupName.value = `Backup #${newBackupAmount.value}`;
+  }
+
+  isCreating.value = true;
+  try {
+    await props.server.backups?.create(backupName.value);
+    await props.server.refresh();
+    hideModal();
+    emit("backupCreated", { success: true, message: "Backup created successfully" });
+  } catch (error) {
+    backupError.value = error instanceof Error ? error.message : String(error);
+    emit("backupCreated", { success: false, message: backupError.value });
+  } finally {
+    isCreating.value = false;
+  }
+};
+
+defineExpose({
+  show: () => modal.value?.show(),
+  hide: hideModal,
+});
+</script>
diff --git a/apps/frontend/src/components/ui/servers/BackupDeleteModal.vue b/apps/frontend/src/components/ui/servers/BackupDeleteModal.vue
new file mode 100644
index 000000000..44d0ac11e
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/BackupDeleteModal.vue
@@ -0,0 +1,86 @@
+<template>
+  <NewModal ref="modal" danger header="Deleting backup">
+    <div class="flex flex-col gap-4">
+      <div class="relative flex w-full flex-col gap-2 rounded-2xl bg-[#0e0e0ea4] p-6">
+        <div class="text-2xl font-extrabold text-contrast">
+          {{ backupName }}
+        </div>
+        <div class="flex gap-2 font-semibold text-contrast">
+          <CalendarIcon />
+          {{ formattedDate }}
+        </div>
+      </div>
+    </div>
+    <div class="mb-1 mt-4 flex justify-end gap-4">
+      <ButtonStyled color="red">
+        <button :disabled="isDeleting" @click="deleteBackup">
+          <TrashIcon />
+          Delete backup
+        </button>
+      </ButtonStyled>
+      <ButtonStyled type="transparent">
+        <button @click="hideModal">Cancel</button>
+      </ButtonStyled>
+    </div>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { TrashIcon, CalendarIcon } from "@modrinth/assets";
+import type { Server } from "~/composables/pyroServers";
+
+const props = defineProps<{
+  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+  backupId: string;
+  backupName: string;
+  backupCreatedAt: string;
+}>();
+
+const emit = defineEmits(["backupDeleted"]);
+
+const modal = ref<InstanceType<typeof NewModal>>();
+const isDeleting = ref(false);
+const backupError = ref<string | null>(null);
+
+const formattedDate = computed(() => {
+  return new Date(props.backupCreatedAt).toLocaleString("en-US", {
+    month: "numeric",
+    day: "numeric",
+    year: "2-digit",
+    hour: "numeric",
+    minute: "numeric",
+    hour12: true,
+  });
+});
+
+const hideModal = () => {
+  modal.value?.hide();
+};
+
+const deleteBackup = async () => {
+  if (!props.backupId) {
+    emit("backupDeleted", { success: false, message: "No backup selected" });
+    return;
+  }
+
+  isDeleting.value = true;
+  try {
+    await props.server.backups?.delete(props.backupId);
+    await props.server.refresh();
+    hideModal();
+    emit("backupDeleted", { success: true, message: "Backup deleted successfully" });
+  } catch (error) {
+    backupError.value = error instanceof Error ? error.message : String(error);
+    emit("backupDeleted", { success: false, message: backupError.value });
+  } finally {
+    isDeleting.value = false;
+  }
+};
+
+defineExpose({
+  show: () => modal.value?.show(),
+  hide: hideModal,
+});
+</script>
diff --git a/apps/frontend/src/components/ui/servers/BackupRenameModal.vue b/apps/frontend/src/components/ui/servers/BackupRenameModal.vue
new file mode 100644
index 000000000..f1ab41e2f
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/BackupRenameModal.vue
@@ -0,0 +1,86 @@
+<template>
+  <NewModal ref="modal" header="Renaming backup" @show="focusInput">
+    <div class="flex flex-col gap-2 md:w-[600px]">
+      <div class="font-semibold text-contrast">Name</div>
+      <input
+        ref="input"
+        v-model="backupName"
+        type="text"
+        class="bg-bg-input w-full rounded-lg p-4"
+        placeholder="e.g. Before 1.21"
+      />
+    </div>
+    <div class="mb-1 mt-4 flex justify-start gap-4">
+      <ButtonStyled color="brand">
+        <button :disabled="isRenaming" @click="renameBackup">
+          <SaveIcon />
+          Rename backup
+        </button>
+      </ButtonStyled>
+      <ButtonStyled>
+        <button @click="hideModal">
+          <XIcon />
+          Cancel
+        </button>
+      </ButtonStyled>
+    </div>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from "vue";
+import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { SaveIcon, XIcon } from "@modrinth/assets";
+import type { Server } from "~/composables/pyroServers";
+
+const props = defineProps<{
+  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+  currentBackupId: string;
+}>();
+
+const emit = defineEmits(["backupRenamed"]);
+
+const modal = ref<InstanceType<typeof NewModal>>();
+const input = ref<HTMLInputElement>();
+const backupName = ref("");
+const isRenaming = ref(false);
+const backupError = ref<string | null>(null);
+
+const focusInput = () => {
+  nextTick(() => {
+    setTimeout(() => {
+      input.value?.focus();
+    }, 100);
+  });
+};
+
+const hideModal = () => {
+  backupName.value = "";
+  modal.value?.hide();
+};
+
+const renameBackup = async () => {
+  if (!backupName.value.trim() || !props.currentBackupId) {
+    emit("backupRenamed", { success: false, message: "Backup name cannot be empty" });
+    return;
+  }
+
+  isRenaming.value = true;
+  try {
+    await props.server.backups?.rename(props.currentBackupId, backupName.value);
+    await props.server.refresh();
+    hideModal();
+    emit("backupRenamed", { success: true, message: "Backup renamed successfully" });
+  } catch (error) {
+    backupError.value = error instanceof Error ? error.message : String(error);
+    emit("backupRenamed", { success: false, message: backupError.value });
+  } finally {
+    isRenaming.value = false;
+  }
+};
+
+defineExpose({
+  show: () => modal.value?.show(),
+  hide: hideModal,
+});
+</script>
diff --git a/apps/frontend/src/components/ui/servers/BackupRestoreModal.vue b/apps/frontend/src/components/ui/servers/BackupRestoreModal.vue
new file mode 100644
index 000000000..9439ecb2e
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/BackupRestoreModal.vue
@@ -0,0 +1,82 @@
+<template>
+  <NewModal ref="modal" header="Restoring backup">
+    <div class="flex flex-col gap-4">
+      <div class="relative flex w-full flex-col gap-2 rounded-2xl bg-bg p-6">
+        <div class="text-2xl font-extrabold text-contrast">
+          {{ backupName }}
+        </div>
+        <div class="flex gap-2 font-semibold text-contrast">
+          <CalendarIcon />
+          {{ formattedDate }}
+        </div>
+      </div>
+    </div>
+    <div class="mb-1 mt-4 flex justify-end gap-4">
+      <ButtonStyled color="brand">
+        <button :disabled="isRestoring" @click="restoreBackup">Restore backup</button>
+      </ButtonStyled>
+      <ButtonStyled type="transparent">
+        <button @click="hideModal">Cancel</button>
+      </ButtonStyled>
+    </div>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { CalendarIcon } from "@modrinth/assets";
+import type { Server } from "~/composables/pyroServers";
+
+const props = defineProps<{
+  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+  backupId: string;
+  backupName: string;
+  backupCreatedAt: string;
+}>();
+
+const emit = defineEmits(["backupRestored"]);
+
+const modal = ref<InstanceType<typeof NewModal>>();
+const isRestoring = ref(false);
+const backupError = ref<string | null>(null);
+
+const formattedDate = computed(() => {
+  return new Date(props.backupCreatedAt).toLocaleString("en-US", {
+    month: "numeric",
+    day: "numeric",
+    year: "2-digit",
+    hour: "numeric",
+    minute: "numeric",
+    hour12: true,
+  });
+});
+
+const hideModal = () => {
+  modal.value?.hide();
+};
+
+const restoreBackup = async () => {
+  if (!props.backupId) {
+    emit("backupRestored", { success: false, message: "No backup selected" });
+    return;
+  }
+
+  isRestoring.value = true;
+  try {
+    await props.server.backups?.restore(props.backupId);
+    hideModal();
+    emit("backupRestored", { success: true, message: "Backup restored successfully" });
+  } catch (error) {
+    backupError.value = error instanceof Error ? error.message : String(error);
+    emit("backupRestored", { success: false, message: backupError.value });
+  } finally {
+    isRestoring.value = false;
+  }
+};
+
+defineExpose({
+  show: () => modal.value?.show(),
+  hide: hideModal,
+});
+</script>
diff --git a/apps/frontend/src/components/ui/servers/BackupSettingsModal.vue b/apps/frontend/src/components/ui/servers/BackupSettingsModal.vue
new file mode 100644
index 000000000..e85646309
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/BackupSettingsModal.vue
@@ -0,0 +1,201 @@
+<template>
+  <NewModal ref="modal" header="Editing auto backup settings">
+    <div class="flex flex-col gap-4 md:w-[600px]">
+      <div class="flex flex-col gap-2">
+        <div class="font-semibold text-contrast">Auto backup</div>
+        <p class="m-0">
+          Automatically create a backup of your server every
+          <strong>{{ autoBackupInterval == 1 ? "hour" : `${autoBackupInterval} hours` }}</strong>
+        </p>
+      </div>
+
+      <div v-if="isLoadingSettings" class="py-2 text-sm text-secondary">Loading settings...</div>
+      <template v-else>
+        <input
+          id="auto-backup-toggle"
+          v-model="autoBackupEnabled"
+          class="switch stylized-toggle"
+          type="checkbox"
+          :disabled="isSaving"
+        />
+
+        <div class="flex flex-col gap-2">
+          <div class="font-semibold text-contrast">Interval</div>
+          <p class="m-0">
+            The amount of hours between each backup. This will only backup your server if it has
+            been modified since the last backup.
+          </p>
+        </div>
+
+        <div class="flex items-center gap-2 text-contrast">
+          <div
+            class="flex w-fit items-center rounded-xl border border-solid border-button-border bg-table-alternateRow"
+          >
+            <button
+              class="rounded-l-xl p-3 text-secondary enabled:hover:text-contrast [&&]:bg-transparent enabled:[&&]:hover:bg-button-bg"
+              :disabled="!autoBackupEnabled || isSaving"
+              @click="autoBackupInterval = Math.max(autoBackupInterval - 1, 1)"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="2" viewBox="-2 0 18 2">
+                <path
+                  d="M18,12H6"
+                  transform="translate(-5 -11)"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                />
+              </svg>
+            </button>
+            <input
+              id="auto-backup-interval"
+              v-model="autoBackupInterval"
+              class="w-16 !appearance-none text-center [&&]:bg-transparent [&&]:focus:shadow-none"
+              type="number"
+              style="-moz-appearance: textfield; appearance: none"
+              min="1"
+              max="24"
+              step="1"
+              :disabled="!autoBackupEnabled || isSaving"
+            />
+
+            <button
+              class="rounded-r-xl p-3 text-secondary enabled:hover:text-contrast [&&]:bg-transparent enabled:[&&]:hover:bg-button-bg"
+              :disabled="!autoBackupEnabled || isSaving"
+              @click="autoBackupInterval = Math.min(autoBackupInterval + 1, 24)"
+            >
+              <PlusIcon />
+            </button>
+          </div>
+          {{ autoBackupInterval == 1 ? "hour" : "hours" }}
+        </div>
+
+        <div class="mt-4 flex justify-start gap-4">
+          <ButtonStyled color="brand">
+            <button :disabled="!hasChanges || isSaving" @click="saveSettings">
+              <SaveIcon class="h-5 w-5" />
+              {{ isSaving ? "Saving..." : "Save changes" }}
+            </button>
+          </ButtonStyled>
+          <ButtonStyled>
+            <button :disabled="isSaving" @click="modal?.hide()">
+              <XIcon />
+              Cancel
+            </button>
+          </ButtonStyled>
+        </div>
+      </template>
+    </div>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { PlusIcon, XIcon, SaveIcon } from "@modrinth/assets";
+import { ref, computed } from "vue";
+import type { Server } from "~/composables/pyroServers";
+
+const props = defineProps<{
+  server: Server<["backups"]>;
+}>();
+
+const modal = ref<InstanceType<typeof NewModal>>();
+
+const initialSettings = ref<{ interval: number; enabled: boolean } | null>(null);
+const autoBackupEnabled = ref(false);
+const autoBackupInterval = ref(1);
+const isLoadingSettings = ref(true);
+const isSaving = ref(false);
+
+const validatedBackupInterval = computed(() => {
+  const roundedValue = Math.round(autoBackupInterval.value);
+
+  if (roundedValue < 1) {
+    return 1;
+  } else if (roundedValue > 24) {
+    return 24;
+  }
+  return roundedValue;
+});
+
+const hasChanges = computed(() => {
+  if (!initialSettings.value) return false;
+
+  return (
+    autoBackupEnabled.value !== initialSettings.value.enabled ||
+    autoBackupInterval.value !== initialSettings.value.interval
+  );
+});
+
+const fetchSettings = async () => {
+  isLoadingSettings.value = true;
+  try {
+    const settings = await props.server.backups?.getAutoBackup();
+    initialSettings.value = settings as { interval: number; enabled: boolean };
+    autoBackupEnabled.value = settings?.enabled ?? false;
+    autoBackupInterval.value = settings?.interval || 1;
+  } catch (error) {
+    console.error("Error fetching backup settings:", error);
+    addNotification({
+      group: "server",
+      title: "Error",
+      text: "Failed to load backup settings",
+      type: "error",
+    });
+  } finally {
+    isLoadingSettings.value = false;
+  }
+};
+
+const saveSettings = async () => {
+  isSaving.value = true;
+  try {
+    await props.server.backups?.updateAutoBackup(
+      autoBackupEnabled.value ? "enable" : "disable",
+      autoBackupInterval.value,
+    );
+
+    initialSettings.value = {
+      enabled: autoBackupEnabled.value,
+      interval: autoBackupInterval.value,
+    };
+
+    addNotification({
+      group: "server",
+      title: "Success",
+      text: "Backup settings updated successfully",
+      type: "success",
+    });
+
+    modal.value?.hide();
+  } catch (error) {
+    console.error("Error saving backup settings:", error);
+    addNotification({
+      group: "server",
+      title: "Error",
+      text: "Failed to save backup settings",
+      type: "error",
+    });
+  } finally {
+    isSaving.value = false;
+  }
+};
+
+watch(autoBackupInterval, () => {
+  autoBackupInterval.value = validatedBackupInterval.value;
+});
+
+defineExpose({
+  show: async () => {
+    await fetchSettings();
+    modal.value?.show();
+  },
+});
+</script>
+
+<style scoped>
+.stylized-toggle:checked::after {
+  background: var(--color-accent-contrast) !important;
+}
+</style>
diff --git a/apps/frontend/src/components/ui/servers/FileItem.vue b/apps/frontend/src/components/ui/servers/FileItem.vue
new file mode 100644
index 000000000..78ca6100c
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/FileItem.vue
@@ -0,0 +1,229 @@
+<template>
+  <li
+    role="button"
+    data-pyro-file
+    :class="containerClasses"
+    tabindex="0"
+    @click="selectItem"
+    @contextmenu="openContextMenu"
+    @keydown="(e) => e.key === 'Enter' && selectItem()"
+  >
+    <div data-pyro-file-metadata class="flex w-full items-center gap-4 truncate">
+      <div
+        class="flex size-8 items-center justify-center rounded-full bg-bg-raised p-[6px] group-hover:bg-brand-highlight group-hover:text-brand group-focus:bg-brand-highlight group-focus:text-brand"
+      >
+        <component :is="iconComponent" class="size-6" />
+      </div>
+      <div class="flex w-full flex-col truncate">
+        <span
+          class="w-[98%] truncate font-bold group-hover:text-contrast group-focus:text-contrast"
+          >{{ name }}</span
+        >
+        <span class="text-xs text-secondary group-hover:text-primary">
+          {{ subText }}
+        </span>
+      </div>
+    </div>
+
+    <div data-pyro-file-actions class="flex w-fit flex-shrink-0 items-center gap-4 md:gap-12">
+      <span class="w-[160px] text-nowrap text-right font-mono text-sm text-secondary">{{
+        formattedDate
+      }}</span>
+      <ButtonStyled circular type="transparent">
+        <UiServersTeleportOverflowMenu :options="menuOptions" direction="left" position="bottom">
+          <MoreHorizontalIcon class="h-5 w-5 bg-transparent" />
+          <template #rename> <EditIcon /> Rename </template>
+          <template #move> <RightArrowIcon /> Move </template>
+          <template #download> <DownloadIcon /> Download </template>
+          <template #delete> <TrashIcon /> Delete </template>
+        </UiServersTeleportOverflowMenu>
+      </ButtonStyled>
+    </div>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { ButtonStyled } from "@modrinth/ui";
+import {
+  MoreHorizontalIcon,
+  EditIcon,
+  DownloadIcon,
+  TrashIcon,
+  FolderOpenIcon,
+  FileIcon,
+  RightArrowIcon,
+} from "@modrinth/assets";
+import { computed, shallowRef, ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import {
+  UiServersIconsCogFolderIcon,
+  UiServersIconsEarthIcon,
+  UiServersIconsCodeFileIcon,
+  UiServersIconsTextFileIcon,
+  UiServersIconsImageFileIcon,
+} from "#components";
+import PaletteIcon from "~/assets/icons/palette.svg?component";
+
+interface FileItemProps {
+  name: string;
+  type: "directory" | "file";
+  size?: number;
+  count?: number;
+  modified: number;
+  path: string;
+}
+
+const props = defineProps<FileItemProps>();
+
+const emit = defineEmits(["rename", "download", "delete", "move", "edit", "contextmenu"]);
+
+const codeExtensions = Object.freeze([
+  "json",
+  "json5",
+  "jsonc",
+  "java",
+  "kt",
+  "kts",
+  "sh",
+  "bat",
+  "ps1",
+  "yml",
+  "yaml",
+  "toml",
+  "js",
+  "ts",
+  "py",
+  "rb",
+  "php",
+  "html",
+  "css",
+  "cpp",
+  "c",
+  "h",
+  "rs",
+  "go",
+]);
+
+const textExtensions = Object.freeze(["txt", "md", "log", "cfg", "conf", "properties", "ini"]);
+const imageExtensions = Object.freeze(["png", "jpg", "jpeg", "gif", "svg", "webp"]);
+const units = Object.freeze(["B", "KB", "MB", "GB", "TB", "PB", "EB"]);
+
+const route = shallowRef(useRoute());
+const router = useRouter();
+
+const containerClasses = computed(() => [
+  "group m-0 p-0 focus:!outline-none flex w-full select-none items-center justify-between overflow-hidden border-0 border-b border-solid border-bg-raised p-3 last:border-none hover:bg-bg-raised focus:bg-bg-raised",
+  isEditableFile.value ? "cursor-pointer" : props.type === "directory" ? "cursor-pointer" : "",
+]);
+
+const fileExtension = computed(() => props.name.split(".").pop()?.toLowerCase() || "");
+
+const menuOptions = computed(() => [
+  {
+    id: "rename",
+    action: () => emit("rename", { name: props.name, type: props.type, path: props.path }),
+  },
+  {
+    id: "move",
+    action: () => emit("move", { name: props.name, type: props.type, path: props.path }),
+  },
+  {
+    id: "download",
+    action: () => emit("download", { name: props.name, type: props.type, path: props.path }),
+    shown: props.type !== "directory",
+  },
+  {
+    id: "delete",
+    action: () => emit("delete", { name: props.name, type: props.type, path: props.path }),
+    color: "red" as const,
+  },
+]);
+
+const iconComponent = computed(() => {
+  if (props.type === "directory") {
+    if (props.name === "config") return UiServersIconsCogFolderIcon;
+    if (props.name === "world") return UiServersIconsEarthIcon;
+    if (props.name === "resourcepacks") return PaletteIcon;
+    return FolderOpenIcon;
+  }
+
+  const ext = fileExtension.value;
+  if (codeExtensions.includes(ext)) return UiServersIconsCodeFileIcon;
+  if (textExtensions.includes(ext)) return UiServersIconsTextFileIcon;
+  if (imageExtensions.includes(ext)) return UiServersIconsImageFileIcon;
+  return FileIcon;
+});
+
+const subText = computed(() => {
+  if (props.type === "directory") {
+    return `${props.count} ${props.count === 1 ? "item" : "items"}`;
+  }
+  return formattedSize.value;
+});
+
+const formattedDate = computed(() => {
+  const date = new Date(props.modified * 1000);
+  return `${date.toLocaleDateString("en-US", {
+    month: "2-digit",
+    day: "2-digit",
+    year: "2-digit",
+  })}, ${date.toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "numeric",
+    hour12: true,
+  })}`;
+});
+
+const isEditableFile = computed(() => {
+  if (props.type === "file") {
+    const ext = fileExtension.value;
+    return (
+      !props.name.includes(".") ||
+      textExtensions.includes(ext) ||
+      codeExtensions.includes(ext) ||
+      imageExtensions.includes(ext)
+    );
+  }
+  return false;
+});
+
+const formattedSize = computed(() => {
+  if (props.size === undefined) return "";
+  const bytes = props.size;
+  if (bytes === 0) return "0 B";
+
+  const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  const size = (bytes / Math.pow(1024, exponent)).toFixed(2);
+  return `${size} ${units[exponent]}`;
+});
+
+const openContextMenu = (event: MouseEvent) => {
+  event.preventDefault();
+  emit("contextmenu", event.clientX, event.clientY);
+};
+
+const navigateToFolder = () => {
+  const currentPath = route.value.query.path?.toString() || "";
+  const newPath = currentPath.endsWith("/")
+    ? `${currentPath}${props.name}`
+    : `${currentPath}/${props.name}`;
+  router.push({ query: { path: newPath, page: 1 } });
+};
+
+const isNavigating = ref(false);
+
+const selectItem = () => {
+  if (isNavigating.value) return;
+  isNavigating.value = true;
+
+  if (props.type === "directory") {
+    navigateToFolder();
+  } else if (props.type === "file" && isEditableFile.value) {
+    emit("edit", { name: props.name, type: props.type, path: props.path });
+  }
+
+  setTimeout(() => {
+    isNavigating.value = false;
+  }, 500);
+};
+</script>
diff --git a/apps/frontend/src/components/ui/servers/FileManagerError.vue b/apps/frontend/src/components/ui/servers/FileManagerError.vue
new file mode 100644
index 000000000..a15b5f826
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/FileManagerError.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="flex h-full w-full items-center justify-center gap-6 p-20">
+    <FileIcon class="size-28" />
+    <div class="flex flex-col gap-2">
+      <h3 class="text-red-500 m-0 text-2xl font-bold">{{ title }}</h3>
+      <p class="m-0 text-sm text-secondary">
+        {{ message }}
+      </p>
+      <div class="flex gap-2">
+        <ButtonStyled>
+          <button size="sm" @click="$emit('refetch')">
+            <UiServersIconsLoadingIcon class="h-5 w-5" />
+            Try again
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button size="sm" @click="$emit('home')">
+            <HomeIcon class="h-5 w-5" />
+            Go to home folder
+          </button>
+        </ButtonStyled>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FileIcon, HomeIcon } from "@modrinth/assets";
+import { ButtonStyled } from "@modrinth/ui";
+
+defineProps<{
+  title: string;
+  message: string;
+}>();
+
+defineEmits<{
+  (e: "refetch"): void;
+  (e: "home"): void;
+}>();
+</script>
diff --git a/apps/frontend/src/components/ui/servers/FileVirtualList.vue b/apps/frontend/src/components/ui/servers/FileVirtualList.vue
new file mode 100644
index 000000000..fe470cbef
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/FileVirtualList.vue
@@ -0,0 +1,120 @@
+<template>
+  <div ref="listContainer" data-pyro-files-virtual-list-root class="relative w-full">
+    <div
+      :style="{
+        position: 'relative',
+        minHeight: `${totalHeight}px`,
+      }"
+      data-pyro-files-virtual-height-watcher
+    >
+      <ul
+        class="list-none"
+        :style="{
+          position: 'absolute',
+          top: `${visibleTop}px`,
+          width: '100%',
+          margin: 0,
+          padding: 0,
+        }"
+        data-pyro-files-virtual-list
+      >
+        <UiServersFileItem
+          v-for="item in visibleItems"
+          :key="item.path"
+          :count="item.count"
+          :created="item.created"
+          :modified="item.modified"
+          :name="item.name"
+          :path="item.path"
+          :type="item.type"
+          :size="item.size"
+          @delete="$emit('delete', item)"
+          @rename="$emit('rename', item)"
+          @download="$emit('download', item)"
+          @move="$emit('move', item)"
+          @edit="$emit('edit', item)"
+          @contextmenu="(x, y) => $emit('contextmenu', item, x, y)"
+        />
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from "vue";
+
+const props = defineProps<{
+  items: any[];
+}>();
+
+const emit = defineEmits<{
+  (e: "delete", item: any): void;
+  (e: "rename", item: any): void;
+  (e: "download", item: any): void;
+  (e: "move", item: any): void;
+  (e: "edit", item: any): void;
+  (e: "contextmenu", item: any, x: number, y: number): void;
+  (e: "loadMore"): void;
+}>();
+
+const ITEM_HEIGHT = 61;
+const BUFFER_SIZE = 5;
+
+const listContainer = ref<HTMLElement | null>(null);
+const windowScrollY = ref(0);
+const windowHeight = ref(0);
+
+const totalHeight = computed(() => props.items.length * ITEM_HEIGHT);
+
+const visibleRange = computed(() => {
+  if (!listContainer.value) return { start: 0, end: 0 };
+
+  const containerTop = listContainer.value.getBoundingClientRect().top + window.scrollY;
+  const relativeScrollTop = Math.max(0, windowScrollY.value - containerTop);
+
+  const start = Math.floor(relativeScrollTop / ITEM_HEIGHT);
+  const visibleCount = Math.ceil(windowHeight.value / ITEM_HEIGHT);
+
+  return {
+    start: Math.max(0, start - BUFFER_SIZE),
+    end: Math.min(props.items.length, start + visibleCount + BUFFER_SIZE * 2),
+  };
+});
+
+const visibleTop = computed(() => {
+  return visibleRange.value.start * ITEM_HEIGHT;
+});
+
+const visibleItems = computed(() => {
+  return props.items.slice(visibleRange.value.start, visibleRange.value.end);
+});
+
+const handleScroll = () => {
+  windowScrollY.value = window.scrollY;
+
+  if (!listContainer.value) return;
+
+  const containerBottom = listContainer.value.getBoundingClientRect().bottom;
+  const remainingScroll = containerBottom - window.innerHeight;
+
+  if (remainingScroll < windowHeight.value * 0.2) {
+    emit("loadMore");
+  }
+};
+
+const handleResize = () => {
+  windowHeight.value = window.innerHeight;
+};
+
+onMounted(() => {
+  windowHeight.value = window.innerHeight;
+  window.addEventListener("scroll", handleScroll, { passive: true });
+  window.addEventListener("resize", handleResize, { passive: true });
+  handleScroll();
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", handleScroll);
+  window.removeEventListener("resize", handleResize);
+});
+</script>
diff --git a/apps/frontend/src/components/ui/servers/FilesBrowseNavbar.vue b/apps/frontend/src/components/ui/servers/FilesBrowseNavbar.vue
new file mode 100644
index 000000000..426007c5a
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/FilesBrowseNavbar.vue
@@ -0,0 +1,231 @@
+<template>
+  <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',
+      !isStuck ? 'rounded-t-2xl' : 'sticky top-0 z-20',
+    ]"
+    data-pyro-files-state="browsing"
+    aria-label="File navigation"
+  >
+    <nav
+      aria-label="Breadcrumb navigation"
+      class="m-0 flex min-w-0 flex-shrink items-center p-0 text-contrast"
+    >
+      <ol class="m-0 flex min-w-0 flex-shrink list-none items-center p-0">
+        <li class="-ml-1 flex-shrink-0">
+          <ButtonStyled type="transparent">
+            <button
+              v-tooltip="'Back to home'"
+              type="button"
+              class="mr-2 grid h-12 w-10 place-content-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+              @click="$emit('navigate', -1)"
+            >
+              <span
+                class="grid size-8 place-content-center rounded-full bg-button-bg p-[6px] group-hover:bg-brand-highlight group-hover:text-brand"
+              >
+                <HomeIcon class="h-5 w-5" />
+                <span class="sr-only">Home</span>
+              </span>
+            </button>
+          </ButtonStyled>
+        </li>
+        <li class="m-0 -ml-2 min-w-0 flex-shrink p-0">
+          <ol class="m-0 flex min-w-0 flex-shrink items-center overflow-hidden p-0">
+            <TransitionGroup
+              name="breadcrumb"
+              tag="span"
+              class="relative flex min-w-0 flex-shrink items-center"
+            >
+              <li
+                v-for="(segment, index) in breadcrumbSegments"
+                :key="`${segment || index}-group`"
+                class="relative flex min-w-0 flex-shrink items-center text-sm"
+              >
+                <div class="flex min-w-0 flex-shrink items-center">
+                  <ButtonStyled type="transparent">
+                    <button
+                      class="cursor-pointer truncate focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+                      :aria-current="
+                        index === breadcrumbSegments.length - 1 ? 'location' : undefined
+                      "
+                      :class="{
+                        '!text-contrast': index === breadcrumbSegments.length - 1,
+                      }"
+                      @click="$emit('navigate', index)"
+                    >
+                      {{ segment || "" }}
+                    </button>
+                  </ButtonStyled>
+                  <ChevronRightIcon
+                    v-if="index < breadcrumbSegments.length - 1"
+                    class="size-4 flex-shrink-0 text-secondary"
+                    aria-hidden="true"
+                  />
+                </div>
+              </li>
+            </TransitionGroup>
+          </ol>
+        </li>
+      </ol>
+    </nav>
+
+    <div class="flex flex-shrink-0 items-center gap-1">
+      <div class="flex w-full flex-row-reverse sm:flex-row">
+        <ButtonStyled type="transparent">
+          <UiServersTeleportOverflowMenu
+            position="bottom"
+            direction="left"
+            aria-label="Sort files"
+            :options="[
+              { id: 'normal', action: () => $emit('sort', 'default') },
+              { id: 'modified', action: () => $emit('sort', 'modified') },
+              { id: 'filesOnly', action: () => $emit('sort', 'filesOnly') },
+              { id: 'foldersOnly', action: () => $emit('sort', 'foldersOnly') },
+            ]"
+          >
+            <span class="hidden whitespace-pre text-sm font-medium sm:block">
+              {{ sortMethodLabel }}
+            </span>
+            <SortAscendingIcon aria-hidden="true" />
+            <DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
+            <template #normal> Alphabetical </template>
+            <template #modified> Date modified </template>
+            <template #filesOnly> Files only </template>
+            <template #foldersOnly> Folders only </template>
+          </UiServersTeleportOverflowMenu>
+        </ButtonStyled>
+        <div class="mx-1 w-full text-sm sm:w-40">
+          <label for="search-folder" class="sr-only">Search folder</label>
+          <div class="relative">
+            <SearchIcon
+              class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2"
+              aria-hidden="true"
+            />
+            <input
+              id="search-folder"
+              :value="searchQuery"
+              type="search"
+              name="search"
+              autocomplete="off"
+              class="h-8 min-h-[unset] w-full border-[1px] border-solid border-button-bg bg-transparent py-2 pl-9"
+              placeholder="Search..."
+              @input="$emit('update:searchQuery', ($event.target as HTMLInputElement).value)"
+            />
+          </div>
+        </div>
+      </div>
+
+      <ButtonStyled type="transparent">
+        <UiServersTeleportOverflowMenu
+          position="bottom"
+          direction="left"
+          aria-label="Create new..."
+          :options="[
+            { id: 'file', action: () => $emit('create', 'file') },
+            { id: 'directory', action: () => $emit('create', 'directory') },
+            { id: 'upload', action: () => $emit('upload') },
+          ]"
+        >
+          <PlusIcon aria-hidden="true" />
+          <DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
+          <template #file> <BoxIcon aria-hidden="true" /> New file </template>
+          <template #directory> <FolderOpenIcon aria-hidden="true" /> New folder </template>
+          <template #upload> <UploadIcon aria-hidden="true" /> Upload file </template>
+        </UiServersTeleportOverflowMenu>
+      </ButtonStyled>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import {
+  BoxIcon,
+  PlusIcon,
+  UploadIcon,
+  DropdownIcon,
+  FolderOpenIcon,
+  SearchIcon,
+  SortAscendingIcon,
+  HomeIcon,
+  ChevronRightIcon,
+} from "@modrinth/assets";
+import { ButtonStyled } from "@modrinth/ui";
+import { ref, computed } from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
+
+const props = defineProps<{
+  breadcrumbSegments: string[];
+  searchQuery: string;
+  sortMethod: 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;
+}>();
+
+const pyroFilesSentinel = ref<HTMLElement | null>(null);
+const isStuck = ref(false);
+
+useIntersectionObserver(
+  pyroFilesSentinel,
+  ([{ isIntersecting }]) => {
+    isStuck.value = !isIntersecting;
+  },
+  { threshold: [0, 1] },
+);
+
+const sortMethodLabel = computed(() => {
+  switch (props.sortMethod) {
+    case "modified":
+      return "Date modified";
+    case "filesOnly":
+      return "Files only";
+    case "foldersOnly":
+      return "Folders only";
+    default:
+      return "Alphabetical";
+  }
+});
+</script>
+
+<style scoped>
+.sentinel {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  visibility: hidden;
+}
+
+.breadcrumb-move,
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all 0.2s ease;
+}
+
+.breadcrumb-enter-from {
+  opacity: 0;
+  transform: translateX(-10px) scale(0.9);
+}
+
+.breadcrumb-leave-to {
+  opacity: 0;
+  transform: translateX(-10px) scale(0.8);
+  filter: blur(4px);
+}
+
+.breadcrumb-leave-active {
+  position: relative;
+  pointer-events: none;
+}
+
+.breadcrumb-move {
+  z-index: 1;
+}
+</style>
diff --git a/apps/frontend/src/components/ui/servers/FilesContextMenu.vue b/apps/frontend/src/components/ui/servers/FilesContextMenu.vue
new file mode 100644
index 000000000..19acda990
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/FilesContextMenu.vue
@@ -0,0 +1,106 @@
+<template>
+  <div
+    class="fixed"
+    :style="{
+      transform: `translateY(${isAtBottom ? '-100%' : '0'})`,
+      top: `${y}px`,
+      left: `${x}px`,
+    }"
+  >
+    <Transition>
+      <div
+        v-if="item"
+        id="item-context-menu"
+        ref="ctxRef"
+        :style="{
+          border: '1px solid var(--color-button-bg)',
+          borderRadius: 'var(--radius-md)',
+          backgroundColor: 'var(--color-raised-bg)',
+          padding: 'var(--gap-sm)',
+          boxShadow: 'var(--shadow-floating)',
+          gap: 'var(--gap-xs)',
+          width: 'max-content',
+        }"
+        class="flex h-fit w-fit select-none flex-col"
+      >
+        <button
+          class="btn btn-transparent flex !w-full items-center"
+          @click="$emit('rename', item)"
+        >
+          <EditIcon class="h-5 w-5" />
+          Rename
+        </button>
+        <button class="btn btn-transparent flex !w-full items-center" @click="$emit('move', item)">
+          <ArrowBigUpDashIcon class="h-5 w-5" />
+          Move
+        </button>
+        <button
+          v-if="item.type !== 'directory'"
+          class="btn btn-transparent flex !w-full items-center"
+          @click="$emit('download', item)"
+        >
+          <DownloadIcon class="h-5 w-5" />
+          Download
+        </button>
+        <button
+          class="btn btn-transparent btn-red flex !w-full items-center"
+          @click="$emit('delete', item)"
+        >
+          <TrashIcon class="h-5 w-5" />
+          Delete
+        </button>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { EditIcon, ArrowBigUpDashIcon, DownloadIcon, TrashIcon } from "@modrinth/assets";
+
+interface FileItem {
+  type: string;
+  name: string;
+  [key: string]: any;
+}
+
+defineProps<{
+  item: FileItem | null;
+  x: number;
+  y: number;
+  isAtBottom: boolean;
+}>();
+
+const ctxRef = ref<HTMLElement | null>(null);
+
+defineEmits<{
+  (e: "rename", item: FileItem): void;
+  (e: "move", item: FileItem): void;
+  (e: "download", item: FileItem): void;
+  (e: "delete", item: FileItem): void;
+}>();
+
+defineExpose({
+  ctxRef,
+});
+</script>
+
+<style scoped>
+#item-context-menu {
+  transition:
+    transform 0.1s ease,
+    opacity 0.1s ease;
+  transform-origin: top left;
+}
+
+#item-context-menu.v-enter-active,
+#item-context-menu.v-leave-active {
+  transform: scale(1);
+  opacity: 1;
+}
+
+#item-context-menu.v-enter-from,
+#item-context-menu.v-leave-to {
+  transform: scale(0.5);
+  opacity: 0;
+}
+</style>
diff --git a/apps/frontend/src/components/ui/servers/FilesCreateItemModal.vue b/apps/frontend/src/components/ui/servers/FilesCreateItemModal.vue
new file mode 100644
index 000000000..0b29db261
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/FilesCreateItemModal.vue
@@ -0,0 +1,95 @@
+<template>
+  <NewModal ref="modal" :header="`Creating a ${type}`">
+    <form class="flex flex-col gap-4 md:w-[600px]" @submit.prevent="handleSubmit">
+      <div class="flex flex-col gap-2">
+        <div class="font-semibold text-contrast">Name</div>
+        <input
+          ref="createInput"
+          v-model="itemName"
+          autofocus
+          type="text"
+          class="bg-bg-input w-full rounded-lg p-4"
+          :placeholder="`e.g. ${type === 'file' ? 'config.yml' : 'plugins'}`"
+          required
+        />
+        <div v-if="submitted && error" class="text-red">{{ error }}</div>
+      </div>
+      <div class="flex justify-start gap-4">
+        <ButtonStyled color="brand">
+          <button :disabled="!!error" type="submit">
+            <PlusIcon class="h-5 w-5" />
+            Create
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button type="button" @click="hide">
+            <XIcon class="h-5 w-5" />
+            Cancel
+          </button>
+        </ButtonStyled>
+      </div>
+    </form>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import { PlusIcon, XIcon } from "@modrinth/assets";
+import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { ref, computed, nextTick } from "vue";
+
+const props = defineProps<{
+  type: "file" | "directory";
+}>();
+
+const emit = defineEmits<{
+  (e: "create", name: string): void;
+}>();
+
+const modal = ref<typeof NewModal>();
+const createInput = ref<HTMLInputElement | null>(null);
+const itemName = ref("");
+const submitted = ref(false);
+
+const error = computed(() => {
+  if (!itemName.value) {
+    return "Name is required.";
+  }
+  if (props.type === "file") {
+    const validPattern = /^[a-zA-Z0-9-_.\s]+$/;
+    if (!validPattern.test(itemName.value)) {
+      return "Name must contain only alphanumeric characters, dashes, underscores, dots, or spaces.";
+    }
+  } else {
+    const validPattern = /^[a-zA-Z0-9-_\s]+$/;
+    if (!validPattern.test(itemName.value)) {
+      return "Name must contain only alphanumeric characters, dashes, underscores, or spaces.";
+    }
+  }
+  return "";
+});
+
+const handleSubmit = () => {
+  submitted.value = true;
+  if (!error.value) {
+    emit("create", itemName.value);
+    hide();
+  }
+};
+
+const show = () => {
+  itemName.value = "";
+  submitted.value = false;
+  modal.value?.show();
+  nextTick(() => {
+    setTimeout(() => {
+      createInput.value?.focus();
+    }, 100);
+  });
+};
+
+const hide = () => {
+  modal.value?.hide();
+};
+
+defineExpose({ show, hide });
+</script>
diff --git a/apps/frontend/src/components/ui/servers/FilesDeleteItemModal.vue b/apps/frontend/src/components/ui/servers/FilesDeleteItemModal.vue
new file mode 100644
index 000000000..f3879a58a
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/FilesDeleteItemModal.vue
@@ -0,0 +1,77 @@
+<template>
+  <NewModal ref="modal" danger :header="`Deleting ${item?.type}`">
+    <form class="flex flex-col gap-4 md:w-[600px]" @submit.prevent="handleSubmit">
+      <div
+        class="relative flex w-full items-center gap-2 rounded-2xl border border-solid border-[#cb224436] bg-[#f57b7b0e] p-6 shadow-md dark:border-0 dark:bg-[#0e0e0ea4]"
+      >
+        <div
+          class="flex h-9 w-9 items-center justify-center rounded-full bg-[#3f1818a4] p-[6px] group-hover:bg-brand-highlight group-hover:text-brand"
+        >
+          <FolderOpenIcon v-if="item?.type === 'directory'" class="h-5 w-5" />
+          <FileIcon v-else-if="item?.type === 'file'" class="h-5 w-5" />
+        </div>
+        <div class="flex flex-col">
+          <span class="font-bold group-hover:text-contrast">{{ item?.name }}</span>
+          <span
+            v-if="item?.type === 'directory'"
+            class="text-xs text-secondary group-hover:text-primary"
+          >
+            {{ item?.count }} items
+          </span>
+          <span v-else class="text-xs text-secondary group-hover:text-primary">
+            {{ ((item?.size ?? 0) / 1024 / 1024).toFixed(2) }} MB
+          </span>
+        </div>
+      </div>
+      <div class="flex justify-start gap-4">
+        <ButtonStyled color="red">
+          <button type="submit">
+            <TrashIcon class="h-5 w-5" />
+            Delete {{ item?.type }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button type="button" @click="hide">
+            <XIcon class="h-5 w-5" />
+            Cancel
+          </button>
+        </ButtonStyled>
+      </div>
+    </form>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { FileIcon, FolderOpenIcon, TrashIcon, XIcon } from "@modrinth/assets";
+
+defineProps<{
+  item: {
+    name: string;
+    type: string;
+    count?: number;
+    size?: number;
+  } | null;
+}>();
+
+const emit = defineEmits<{
+  (e: "delete"): void;
+}>();
+
+const modal = ref<typeof NewModal>();
+
+const handleSubmit = () => {
+  emit("delete");
+  hide();
+};
+
+const show = () => {
+  modal.value?.show();
+};
+
+const hide = () => {
+  modal.value?.hide();
+};
+
+defineExpose({ show, hide });
+</script>
diff --git a/apps/frontend/src/components/ui/servers/FilesEditingNavbar.vue b/apps/frontend/src/components/ui/servers/FilesEditingNavbar.vue
new file mode 100644
index 000000000..d359a9921
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/FilesEditingNavbar.vue
@@ -0,0 +1,140 @@
+<template>
+  <header
+    data-pyro-files-state="editing"
+    class="flex h-12 select-none items-center justify-between rounded-t-2xl bg-table-alternateRow p-3"
+    aria-label="File editor navigation"
+  >
+    <nav
+      aria-label="Breadcrumb navigation"
+      class="m-0 flex list-none items-center p-0 text-contrast"
+    >
+      <ol class="m-0 flex list-none items-center p-0">
+        <li class="-ml-1">
+          <ButtonStyled type="transparent">
+            <button
+              v-tooltip="'Back to home'"
+              type="button"
+              class="grid h-12 w-10 place-content-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+              @click="goHome"
+            >
+              <span
+                class="grid size-8 place-content-center rounded-full bg-button-bg p-[6px] group-hover:bg-brand-highlight group-hover:text-brand"
+              >
+                <HomeIcon class="h-5 w-5" />
+                <span class="sr-only">Home</span>
+              </span>
+            </button>
+          </ButtonStyled>
+        </li>
+        <li class="m-0 -ml-2 p-0">
+          <ol class="m-0 flex items-center p-0">
+            <li
+              v-for="(segment, index) in breadcrumbSegments"
+              :key="index"
+              class="flex items-center text-sm"
+            >
+              <ButtonStyled type="transparent">
+                <button
+                  class="cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+                  :class="{ '!text-contrast': index === breadcrumbSegments.length - 1 }"
+                  @click="$emit('navigate', index)"
+                >
+                  {{ segment || "" }}
+                </button>
+              </ButtonStyled>
+              <ChevronRightIcon
+                v-if="index < breadcrumbSegments.length"
+                class="size-4 text-secondary"
+                aria-hidden="true"
+              />
+            </li>
+            <li class="flex items-center px-3 text-sm">
+              <span class="font-semibold !text-contrast" aria-current="location">{{
+                fileName
+              }}</span>
+            </li>
+          </ol>
+        </li>
+      </ol>
+    </nav>
+    <div v-if="!isImage" class="flex gap-2">
+      <Button
+        v-if="isLogFile"
+        v-tooltip="'Share to mclo.gs'"
+        icon-only
+        transparent
+        aria-label="Share to mclo.gs"
+        @click="$emit('share')"
+      >
+        <ShareIcon />
+      </Button>
+      <ButtonStyled type="transparent">
+        <UiServersTeleportOverflowMenu
+          position="bottom"
+          direction="left"
+          aria-label="Save file"
+          :options="[
+            { id: 'save', action: () => $emit('save') },
+            { id: 'save-as', action: () => $emit('save-as') },
+            { id: 'save&restart', action: () => $emit('save-restart') },
+          ]"
+        >
+          <SaveIcon aria-hidden="true" />
+          <DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
+          <template #save> <SaveIcon aria-hidden="true" /> Save </template>
+          <template #save-as> <SaveIcon aria-hidden="true" /> Save as... </template>
+          <template #save&restart>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z"
+                clip-rule="evenodd"
+              />
+            </svg>
+            Save & restart
+          </template>
+        </UiServersTeleportOverflowMenu>
+      </ButtonStyled>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { DropdownIcon, SaveIcon, ShareIcon, HomeIcon, ChevronRightIcon } from "@modrinth/assets";
+import { Button, ButtonStyled } from "@modrinth/ui";
+import { computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+const props = defineProps<{
+  breadcrumbSegments: string[];
+  fileName?: string;
+  isImage: boolean;
+  filePath?: string;
+}>();
+
+const isLogFile = computed(() => {
+  return props.filePath?.startsWith("logs") || props.filePath?.endsWith(".log");
+});
+
+const route = useRoute();
+const router = useRouter();
+
+const emit = defineEmits<{
+  (e: "cancel"): void;
+  (e: "save"): void;
+  (e: "save-as"): void;
+  (e: "save-restart"): void;
+  (e: "share"): void;
+  (e: "navigate", index: number): void;
+}>();
+
+const goHome = () => {
+  emit("cancel");
+  router.push({ path: "/servers/manage/" + route.params.id + "/files" });
+};
+</script>
diff --git a/apps/frontend/src/components/ui/servers/FilesImageViewer.vue b/apps/frontend/src/components/ui/servers/FilesImageViewer.vue
new file mode 100644
index 000000000..3792217d9
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/FilesImageViewer.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="flex h-[calc(100vh-12rem)] w-full flex-col items-center bg-bg-raised">
+    <div
+      ref="container"
+      class="relative w-full flex-grow overflow-hidden bg-bg-raised"
+      @mousedown="startPan"
+      @mousemove="pan"
+      @mouseup="endPan"
+      @mouseleave="endPan"
+      @wheel.prevent="handleWheel"
+    >
+      <UiServersPyroLoading v-if="loading" />
+      <div v-if="error" class="flex h-full w-full flex-col items-center justify-center gap-8">
+        <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-12"
+        >
+          <path d="M4 13c3.5-2 8-2 10 2a5.5 5.5 0 0 1 8 5" />
+          <path
+            d="M5.15 17.89c5.52-1.52 8.65-6.89 7-12C11.55 4 11.5 2 13 2c3.22 0 5 5.5 5 8 0 6.5-4.2 12-10.49 12C5.11 22 2 22 2 20c0-1.5 1.14-1.55 3.15-2.11Z"
+          />
+        </svg>
+        <p class="m-0">Invalid or empty image file.</p>
+      </div>
+      <img
+        v-show="!loading && !error"
+        ref="image"
+        :src="imageUrl"
+        class="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform"
+        :style="{
+          transform: `translate(-50%, -50%) scale(${scale}) translate(${translateX}px, ${translateY}px)`,
+          transition: isPanning ? 'none' : 'transform 0.3s ease-out',
+        }"
+        alt="Viewed image"
+        @load="onImageLoad"
+        @error="onImageError"
+      />
+    </div>
+    <div
+      v-if="!error"
+      class="absolute bottom-0 mb-2 flex w-fit justify-center space-x-4 rounded-xl bg-bg p-2"
+    >
+      <Button icon-only transparent @click="zoomIn">
+        <ZoomInIcon />
+      </Button>
+      <Button icon-only transparent @click="resetZoom">
+        <HomeIcon />
+      </Button>
+      <Button icon-only transparent @click="zoomOut">
+        <ZoomOutIcon />
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from "vue";
+import { HomeIcon, ZoomInIcon, ZoomOutIcon } from "@modrinth/assets";
+import { Button } from "@modrinth/ui";
+
+const props = defineProps({
+  imageBlob: {
+    type: Blob,
+    required: true,
+  },
+});
+
+const container = ref(null);
+const image = ref(null);
+const scale = ref(1);
+const translateX = ref(0);
+const translateY = ref(0);
+const isPanning = ref(false);
+const startX = ref(0);
+const startY = ref(0);
+const imageUrl = ref("");
+const loading = ref(true);
+const error = ref(false);
+
+const createImageUrl = (blob) => {
+  if (imageUrl.value) {
+    URL.revokeObjectURL(imageUrl.value);
+  }
+  imageUrl.value = URL.createObjectURL(blob);
+};
+
+watch(
+  () => props.imageBlob,
+  (newBlob) => {
+    if (newBlob) {
+      loading.value = true;
+      error.value = false;
+      createImageUrl(newBlob);
+    }
+  },
+);
+
+onMounted(() => {
+  if (props.imageBlob) {
+    createImageUrl(props.imageBlob);
+  }
+});
+
+const onImageLoad = () => {
+  loading.value = false;
+  resetZoom();
+};
+
+const onImageError = () => {
+  loading.value = false;
+  error.value = true;
+};
+
+const zoomIn = () => {
+  scale.value = Math.min(scale.value * 1.2, 5);
+};
+
+const zoomOut = () => {
+  scale.value = Math.max(scale.value / 1.2, 0.1);
+};
+
+const resetZoom = () => {
+  scale.value = 0.5;
+  translateX.value = 0;
+  translateY.value = 0;
+};
+
+const startPan = (e) => {
+  isPanning.value = true;
+  startX.value = e.clientX - translateX.value;
+  startY.value = e.clientY - translateY.value;
+};
+
+const pan = (e) => {
+  if (isPanning.value) {
+    translateX.value = e.clientX - startX.value;
+    translateY.value = e.clientY - startY.value;
+  }
+};
+
+const endPan = () => {
+  isPanning.value = false;
+};
+
+const handleWheel = (e) => {
+  const delta = (e.deltaY * -0.01) / 10;
+  const newScale = Math.max(0.1, Math.min(scale.value + delta, 5));
+
+  scale.value = newScale;
+};
+</script>
diff --git a/apps/frontend/src/components/ui/servers/FilesMoveItemModal.vue b/apps/frontend/src/components/ui/servers/FilesMoveItemModal.vue
new file mode 100644
index 000000000..3da9fbd6a
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/FilesMoveItemModal.vue
@@ -0,0 +1,81 @@
+<template>
+  <NewModal ref="modal" :header="`Moving ${item?.name}`">
+    <form class="flex flex-col gap-4 md:w-[600px]" @submit.prevent="handleSubmit">
+      <div class="flex flex-col gap-2">
+        <input
+          ref="destinationInput"
+          v-model="destination"
+          autofocus
+          type="text"
+          class="bg-bg-input w-full rounded-lg p-4"
+          placeholder="e.g. mods/modname"
+          required
+        />
+      </div>
+      <div class="flex items-center gap-2 text-nowrap">
+        New location:
+        <div class="w-full rounded-lg bg-table-alternateRow p-2 font-bold text-contrast">
+          <span class="text-secondary">/root</span>{{ newpath }}
+        </div>
+      </div>
+      <div class="flex justify-start gap-4">
+        <ButtonStyled color="brand">
+          <button type="submit">
+            <ArrowBigUpDashIcon class="h-5 w-5" />
+            Move
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button type="button" @click="hide">
+            <XIcon class="h-5 w-5" />
+            Cancel
+          </button>
+        </ButtonStyled>
+      </div>
+    </form>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import { ArrowBigUpDashIcon, XIcon } from "@modrinth/assets";
+import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { ref, nextTick } from "vue";
+
+const destinationInput = ref<HTMLInputElement | null>(null);
+
+const props = defineProps<{
+  item: { name: string } | null;
+  currentPath: string;
+}>();
+
+const emit = defineEmits<{
+  (e: "move", destination: string): void;
+}>();
+
+const modal = ref<typeof NewModal>();
+const destination = ref("");
+const newpath = computed(() => {
+  return destination.value.replace("//", "/");
+});
+
+const handleSubmit = () => {
+  emit("move", destination.value);
+  hide();
+};
+
+const show = () => {
+  destination.value = props.currentPath;
+  modal.value?.show();
+  nextTick(() => {
+    setTimeout(() => {
+      destinationInput.value?.focus();
+    }, 100);
+  });
+};
+
+const hide = () => {
+  modal.value?.hide();
+};
+
+defineExpose({ show, hide });
+</script>
diff --git a/apps/frontend/src/components/ui/servers/FilesRenameItemModal.vue b/apps/frontend/src/components/ui/servers/FilesRenameItemModal.vue
new file mode 100644
index 000000000..de6657dda
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/FilesRenameItemModal.vue
@@ -0,0 +1,94 @@
+<template>
+  <NewModal ref="modal" :header="`Renaming ${item?.type}`">
+    <form class="flex flex-col gap-4 md:w-[600px]" @submit.prevent="handleSubmit">
+      <div class="flex flex-col gap-2">
+        <div class="font-semibold text-contrast">Name</div>
+        <input
+          ref="renameInput"
+          v-model="itemName"
+          autofocus
+          type="text"
+          class="bg-bg-input w-full rounded-lg p-4"
+          required
+        />
+        <div v-if="submitted && error" class="text-red">{{ error }}</div>
+      </div>
+      <div class="flex justify-start gap-4">
+        <ButtonStyled color="brand">
+          <button :disabled="!!error" type="submit">
+            <EditIcon class="h-5 w-5" />
+            Rename
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button type="button" @click="hide">
+            <XIcon class="h-5 w-5" />
+            Cancel
+          </button>
+        </ButtonStyled>
+      </div>
+    </form>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import { EditIcon, XIcon } from "@modrinth/assets";
+import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { ref, computed, nextTick } from "vue";
+
+const props = defineProps<{
+  item: { name: string; type: string } | null;
+}>();
+
+const emit = defineEmits<{
+  (e: "rename", newName: string): void;
+}>();
+
+const modal = ref<typeof NewModal>();
+const renameInput = ref<HTMLInputElement | null>(null);
+const itemName = ref("");
+const submitted = ref(false);
+
+const error = computed(() => {
+  if (!itemName.value) {
+    return "Name is required.";
+  }
+  if (props.item?.type === "file") {
+    const validPattern = /^[a-zA-Z0-9-_.\s]+$/;
+    if (!validPattern.test(itemName.value)) {
+      return "Name must contain only alphanumeric characters, dashes, underscores, dots, or spaces.";
+    }
+  } else {
+    const validPattern = /^[a-zA-Z0-9-_\s]+$/;
+    if (!validPattern.test(itemName.value)) {
+      return "Name must contain only alphanumeric characters, dashes, underscores, or spaces.";
+    }
+  }
+  return "";
+});
+
+const handleSubmit = () => {
+  submitted.value = true;
+  if (!error.value) {
+    emit("rename", itemName.value);
+    hide();
+  }
+};
+
+const show = (item: { name: string; type: string }) => {
+  itemName.value = item.name;
+  submitted.value = false;
+  modal.value?.show();
+  nextTick(() => {
+    setTimeout(() => {
+      renameInput.value?.focus();
+    }, 100);
+  });
+};
+
+const hide = () => {
+  modal.value?.hide();
+};
+
+defineExpose({ show, hide });
+</script>
diff --git a/apps/frontend/src/components/ui/servers/LoaderSelector.vue b/apps/frontend/src/components/ui/servers/LoaderSelector.vue
new file mode 100644
index 000000000..ceb3e3143
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/LoaderSelector.vue
@@ -0,0 +1,76 @@
+<template>
+  <div
+    v-for="loader in loaders"
+    :key="loader.name"
+    class="group relative flex items-center justify-between rounded-2xl p-2 pr-2.5 hover:bg-bg"
+  >
+    <div class="flex items-center gap-4">
+      <div
+        class="grid size-10 place-content-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
+        :class="isCurrentLoader(loader.name) ? '[&&]:bg-bg-green' : ''"
+      >
+        <UiServersIconsLoaderIcon
+          :loader="loader.name"
+          class="[&&]:size-6"
+          :class="isCurrentLoader(loader.name) ? 'text-brand' : ''"
+        />
+      </div>
+      <div class="flex flex-col gap-0.5">
+        <div class="flex flex-row items-center gap-2">
+          <h1 class="m-0 text-xl font-bold leading-none text-contrast">
+            {{ loader.displayName }}
+          </h1>
+          <span
+            v-if="isCurrentLoader(loader.name)"
+            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="h-4 w-4" />
+            Current
+          </span>
+        </div>
+        <p v-if="isCurrentLoader(loader.name)" class="m-0 text-xs text-secondary">
+          {{ data.loader_version }}
+        </p>
+      </div>
+    </div>
+
+    <ButtonStyled>
+      <button @click="selectLoader(loader.name)">
+        <DownloadIcon class="h-5 w-5" />
+        {{ isCurrentLoader(loader.name) ? "Reinstall" : "Install" }}
+      </button>
+    </ButtonStyled>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CheckIcon, DownloadIcon } from "@modrinth/assets";
+import { ButtonStyled } from "@modrinth/ui";
+
+const props = defineProps<{
+  data: {
+    loader: string | null;
+    loader_version: string | null;
+  };
+}>();
+
+const emit = defineEmits<{
+  (e: "selectLoader", loader: string): void;
+}>();
+
+const loaders = [
+  { name: "Vanilla" as const, displayName: "Vanilla" },
+  { name: "Fabric" as const, displayName: "Fabric" },
+  { name: "Quilt" as const, displayName: "Quilt" },
+  { name: "Forge" as const, displayName: "Forge" },
+  { name: "NeoForge" as const, displayName: "NeoForge" },
+];
+
+const isCurrentLoader = (loaderName: string) => {
+  return props.data.loader?.toLowerCase() === loaderName.toLowerCase();
+};
+
+const selectLoader = (loader: string) => {
+  emit("selectLoader", loader);
+};
+</script>
diff --git a/apps/frontend/src/components/ui/servers/LogParser.vue b/apps/frontend/src/components/ui/servers/LogParser.vue
new file mode 100644
index 000000000..efea31712
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/LogParser.vue
@@ -0,0 +1,107 @@
+<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/MOTDEditor.vue b/apps/frontend/src/components/ui/servers/MOTDEditor.vue
new file mode 100644
index 000000000..aa4c5d0e8
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/MOTDEditor.vue
@@ -0,0 +1,660 @@
+<template>
+  <div class="flex items-center justify-center">
+    <div class="w-full overflow-hidden">
+      <div class="mb-4">
+        <div
+          v-for="(line, lineIndex) in motd"
+          :key="lineIndex"
+          class="relative mb-2 rounded bg-button-bg p-2"
+        >
+          <div
+            class="font-minecraft text-white"
+            :contenteditable="true"
+            spellcheck="false"
+            @input="handleInput($event, lineIndex)"
+            @keydown.enter.prevent
+            @paste.prevent="handlePaste($event, lineIndex)"
+            @mouseup="handleSelection(lineIndex)"
+            v-html="renderLine(line)"
+          ></div>
+          <div class="text-sm text-gray-400">
+            {{ motd[lineIndex].reduce((sum, segment) => sum + segment.text.length, 0) }}/45
+            characters
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <transition name="fade">
+      <div
+        v-if="showPopup"
+        :style="{ top: `${popupY}px`, left: `${popupX}px` }"
+        class="fixed z-10 flex flex-col items-end gap-2 transition-all duration-300 ease-in-out"
+      >
+        <div class="rounded-xl border bg-table-alternateRow p-2 shadow-lg">
+          <div class="flex space-x-2">
+            <Button
+              v-for="style in styles"
+              :key="style.name"
+              icon-only
+              transparent
+              @click="applyStyle({ [style.name]: !currentStyle[style.name] })"
+            >
+              <component :is="style.icon" class="h-4 w-4" />
+            </Button>
+            <div class="relative overflow-y-scroll">
+              <Button icon-only transparent :class="colorPicker ?? 'hidden'" @click="pickColor">
+                <PaintBrushIcon />
+              </Button>
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="colorPicker"
+          icon-only
+          class="w-fit overflow-y-auto rounded-xl p-2 [&&]:bg-table-alternateRow"
+        >
+          <div :class="colorPicker ? `grid grid-flow-col grid-rows-4 gap-2` : '[&&]:hidden'">
+            <button
+              v-for="format in sortedFormatCodes()"
+              :key="format.code"
+              class="rounded-full p-3"
+              :style="{ backgroundColor: format.color }"
+              :title="format.description"
+              @click="applyStyle({ color: format.color })"
+            ></button>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import {
+  ItalicIcon,
+  BoldIcon,
+  StrikethroughIcon,
+  UnderlineIcon,
+  PaintBrushIcon,
+  ChevronLeftIcon,
+} from "@modrinth/assets";
+import { Button } from "@modrinth/ui";
+
+const props = defineProps({
+  server: {
+    type: Object,
+    required: true,
+  },
+});
+
+const formatCodes = [
+  { code: "§f", color: "white", description: "White" },
+  { code: "§7", color: "#AAAAAA", description: "Gray" },
+  { code: "§8", color: "#555555", description: "Dark Gray" },
+  { code: "§0", color: "#000000", description: "Black" },
+  { code: "§9", color: "#5555FF", description: "Blue" },
+  { code: "§1", color: "#0000AA", description: "Dark Blue" },
+  { code: "§b", color: "#55FFFF", description: "Aqua" },
+  { code: "§3", color: "#00AAAA", description: "Dark Aqua" },
+  { code: "§a", color: "#55FF55", description: "Green" },
+  { code: "§2", color: "#00AA00", description: "Dark Green" },
+  { code: "§e", color: "#FFFF55", description: "Yellow" },
+  { code: "§6", color: "#FFAA00", description: "Gold" },
+  { code: "§c", color: "#FF5555", description: "Red" },
+  { code: "§4", color: "#AA0000", description: "Dark Red" },
+  { code: "§d", color: "#FF55FF", description: "Light Purple" },
+  { code: "§5", color: "#AA00AA", description: "Dark Purple" },
+];
+
+const sortedFormatCodes = () => {
+  const colors = formatCodes;
+  if (colors[0].description === "White") {
+    colors.reverse();
+  }
+  return colors;
+};
+
+const minecraftEmojis = [
+  { char: "☺", name: "SMILING FACE" },
+  { char: "☹", name: "FROWNING FACE" },
+  { char: "☠", name: "SKULL AND CROSSBONES" },
+  { char: "❣", name: "HEART EXCLAMATION" },
+  { char: "❤", name: "RED HEART" },
+  { char: "✌", name: "VICTORY HAND" },
+  { char: "☝", name: "INDEX POINTING UP" },
+  { char: "✍", name: "WRITING HAND" },
+  { char: "♨", name: "HOT SPRINGS" },
+  { char: "✈", name: "AIRPLANE" },
+  { char: "⌛", name: "HOURGLASS DONE" },
+  { char: "⌚", name: "WATCH" },
+  { char: "☀", name: "SUN" },
+  { char: "☁", name: "CLOUD" },
+  { char: "☂", name: "UMBRELLA" },
+  { char: "❄", name: "SNOWFLAKE" },
+  { char: "☃", name: "SNOWMAN" },
+  { char: "☄", name: "COMET" },
+  { char: "♠", name: "SPADE SUIT" },
+  { char: "♥", name: "HEART SUIT" },
+  { char: "♦", name: "DIAMOND SUIT" },
+  { char: "♣", name: "CLUB SUIT" },
+  { char: "♟", name: "CHESS PAWN" },
+  { char: "☎", name: "TELEPHONE" },
+  { char: "⌨", name: "KEYBOARD" },
+  { char: "✉", name: "ENVELOPE" },
+  { char: "✏", name: "PENCIL" },
+  { char: "✒", name: "BLACK PEN" },
+  { char: "✂", name: "SCISSORS" },
+  { char: "☢", name: "RADIOACTIVE" },
+  { char: "☣", name: "BIOHAZARD" },
+  { char: "⬆", name: "UP ARROW" },
+  { char: "⬇", name: "DOWN ARROW" },
+  { char: "➡", name: "RIGHT ARROW" },
+  { char: "⬅", name: "LEFT ARROW" },
+  { char: "↗", name: "UP-RIGHT ARROW" },
+  { char: "↘", name: "DOWN-RIGHT ARROW" },
+  { char: "↙", name: "DOWN-LEFT ARROW" },
+  { char: "↖", name: "UP-LEFT ARROW" },
+  { char: "↕", name: "UP-DOWN ARROW" },
+  { char: "↔", name: "LEFT-RIGHT ARROW" },
+  { char: "↩", name: "RIGHT ARROW CURVING LEFT" },
+  { char: "↪", name: "LEFT ARROW CURVING RIGHT" },
+  { char: "✡", name: "STAR OF DAVID" },
+  { char: "☸", name: "WHEEL OF DHARMA" },
+  { char: "☯", name: "YIN YANG" },
+  { char: "✝", name: "LATIN CROSS" },
+  { char: "☦", name: "ORTHODOX CROSS" },
+  { char: "☪", name: "STAR AND CRESCENT" },
+  { char: "☮", name: "PEACE SYMBOL" },
+  { char: "♈", name: "ARIES" },
+  { char: "♉", name: "TAURUS" },
+  { char: "♊", name: "GEMINI" },
+  { char: "♋", name: "CANCER" },
+  { char: "♌", name: "LEO" },
+  { char: "♍", name: "VIRGO" },
+  { char: "♎", name: "LIBRA" },
+  { char: "♏", name: "SCORPIO" },
+  { char: "♐", name: "SAGITTARIUS" },
+  { char: "♑", name: "CAPRICORN" },
+  { char: "♒", name: "AQUARIUS" },
+  { char: "♓", name: "PISCES" },
+  { char: "▶", name: "PLAY BUTTON" },
+  { char: "◀", name: "REVERSE BUTTON" },
+  { char: "♀", name: "FEMALE SIGN" },
+  { char: "♂", name: "MALE SIGN" },
+  { char: "✖", name: "MULTIPLY" },
+  { char: "‼", name: "DOUBLE EXCLAMATION MARK" },
+  { char: "〰", name: "WAVY DASH" },
+  { char: "☑", name: "CHECK BOX WITH CHECK" },
+  { char: "✔", name: "CHECK MARK" },
+  { char: "✳", name: "EIGHT-SPOKED ASTERISK" },
+  { char: "✴", name: "EIGHT-POINTED STAR" },
+  { char: "❇", name: "SPARKLE" },
+  { char: "©", name: "COPYRIGHT" },
+  { char: "®", name: "REGISTERED" },
+  { char: "™", name: "TRADE MARK" },
+  { char: "Ⓜ", name: "CIRCLED M" },
+  { char: "㊗", name: 'JAPANESE "CONGRATULATIONS" BUTTON' },
+  { char: "㊙", name: 'JAPANESE "SECRET" BUTTON' },
+  { char: "▪", name: "BLACK SMALL SQUARE" },
+  { char: "▫", name: "WHITE SMALL SQUARE" },
+  { char: "☷", name: "TRIGRAM FOR EARTH" },
+  { char: "☵", name: "TRIGRAM FOR WATER" },
+  { char: "☶", name: "TRIGRAM FOR MOUNTAIN" },
+  { char: "☋", name: "DESCENDING NODE" },
+  { char: "☌", name: "CONJUNCTION" },
+  { char: "♜", name: "BLACK CHESS ROOK" },
+  { char: "♕", name: "WHITE CHESS QUEEN" },
+  { char: "♡", name: "WHITE HEART SUIT" },
+  { char: "♬", name: "BEAMED SIXTEENTH NOTES" },
+  { char: "☚", name: "BLACK LEFT POINTING INDEX" },
+  { char: "♮", name: "MUSIC NATURAL SIGN" },
+  { char: "♝", name: "BLACK CHESS BISHOP" },
+  { char: "♯", name: "SHARP" },
+  { char: "☴", name: "TRIGRAM FOR WIND" },
+  { char: "♭", name: "FLAT" },
+  { char: "☓", name: "SALTIRE" },
+  { char: "☛", name: "BLACK RIGHT POINTING INDEX" },
+  { char: "☭", name: "HAMMER AND SICKLE" },
+  { char: "♢", name: "WHITE DIAMOND SUIT" },
+  { char: "✐", name: "UPPER RIGHT PENCIL" },
+  { char: "♖", name: "WHITE CHESS ROOK" },
+  { char: "☈", name: "THUNDERSTORM" },
+  { char: "☒", name: "BALLOT BOX WITH X" },
+  { char: "★", name: "BLACK STAR" },
+  { char: "♚", name: "BLACK CHESS KING" },
+  { char: "♛", name: "BLACK CHESS QUEEN" },
+  { char: "✎", name: "LOWER RIGHT PENCIL" },
+  { char: "♪", name: "EIGHTH NOTE" },
+  { char: "☰", name: "TRIGRAM FOR HEAVEN" },
+  { char: "☽", name: "FIRST QUARTER MOON" },
+  { char: "☡", name: "CAUTION SIGN" },
+  { char: "☼", name: "WHITE SUN WITH RAYS" },
+  { char: "♅", name: "URANUS" },
+  { char: "☐", name: "BALLOT BOX" },
+  { char: "☟", name: "WHITE DOWN POINTING INDEX" },
+  { char: "❦", name: "FLORAL HEART" },
+  { char: "☊", name: "ASCENDING NODE" },
+  { char: "☍", name: "OPPOSITION" },
+  { char: "☬", name: "ADI SHAKTI" },
+  { char: "♧", name: "WHITE CLUB SUIT" },
+  { char: "☫", name: "FARSI SYMBOL" },
+  { char: "☱", name: "TRIGRAM FOR LAKE" },
+  { char: "☾", name: "LAST QUARTER MOON" },
+  { char: "☤", name: "CADUCEUS" },
+  { char: "❧", name: "ROTATED FLORAL HEART BULLET" },
+  { char: "♄", name: "SATURN" },
+  { char: "♁", name: "EARTH" },
+  { char: "♔", name: "WHITE CHESS KING" },
+  { char: "❥", name: "ROTATED HEAVY BLACK HEART BULLET" },
+  { char: "☥", name: "ANKH" },
+  { char: "☻", name: "BLACK SMILING FACE" },
+  { char: "♤", name: "WHITE SPADE SUIT" },
+  { char: "♞", name: "BLACK CHESS KNIGHT" },
+  { char: "♆", name: "NEPTUNE" },
+  { char: "#", name: "HASH SIGN" },
+  { char: "♃", name: "JUPITER" },
+  { char: "♩", name: "QUARTER NOTE" },
+  { char: "☇", name: "LIGHTNING" },
+  { char: "☞", name: "WHITE RIGHT POINTING INDEX" },
+  { char: "♫", name: "BEAMED EIGHTH NOTES" },
+  { char: "☏", name: "WHITE TELEPHONE" },
+  { char: "♘", name: "WHITE CHESS KNIGHT" },
+  { char: "☧", name: "CHI RHO" },
+  { char: "☉", name: "SUN" },
+  { char: "♇", name: "PLUTO" },
+  { char: "☩", name: "CROSS OF JERUSALEM" },
+  { char: "♙", name: "WHITE CHESS PAWN" },
+  { char: "☜", name: "WHITE LEFT POINTING INDEX" },
+  { char: "☲", name: "TRIGRAM FOR FIRE" },
+  { char: "☨", name: "CROSS OF LORRAINE" },
+  { char: "♗", name: "WHITE CHESS BISHOP" },
+  { char: "☳", name: "TRIGRAM FOR THUNDER" },
+  { char: "⚔", name: "CROSSED SWORDS" },
+  { char: "⚀", name: "DICE ONE" },
+];
+
+const rawMotd = ref(props.server.general?.motd ?? "");
+
+const motd = computed(() => {
+  const lines = rawMotd.value.split("\n");
+  return lines.map((line) => {
+    const segments = [];
+    let currentSegment = { text: "", color: "White" };
+    let i = 0;
+    while (i < line.length) {
+      if (line[i] === "§") {
+        if (currentSegment.text) {
+          segments.push({ ...currentSegment });
+          currentSegment = { text: "", color: "White" };
+        }
+        const formatCode = line.substr(i, 2);
+        const format = formatCodes.find((f) => f.code === formatCode);
+        console.log(format);
+        console.log(formatCode);
+        if (format) {
+          currentSegment.color = format.color;
+          i += 2;
+          continue;
+        } else if (formatCode === "§l") {
+          currentSegment.bold = true;
+          i += 2;
+          continue;
+        } else if (formatCode === "§o") {
+          currentSegment.italic = true;
+          i += 2;
+          continue;
+        } else if (formatCode === "§n") {
+          currentSegment.underline = true;
+          i += 2;
+          continue;
+        } else if (formatCode === "§m") {
+          currentSegment.strikethrough = true;
+          i += 2;
+          continue;
+        }
+      }
+      currentSegment.text += line[i];
+      i++;
+    }
+    if (currentSegment.text) {
+      segments.push(currentSegment);
+    }
+    return segments;
+  });
+});
+
+const styles = [
+  {
+    name: "bold",
+    icon: BoldIcon,
+  },
+  {
+    name: "italic",
+    icon: ItalicIcon,
+  },
+  {
+    name: "underline",
+    icon: UnderlineIcon,
+  },
+  {
+    name: "strikethrough",
+    icon: StrikethroughIcon,
+  },
+];
+
+const showPopup = ref(false);
+const popupX = ref(0);
+const popupY = ref(0);
+const currentLineIndex = ref(0);
+const selectionStart = ref(0);
+const selectionEnd = ref(0);
+const colorPicker = ref(false);
+
+const pickColor = () => {
+  colorPicker.value = !colorPicker.value;
+};
+
+const totalCharacters = computed(() => {
+  return motd.value.reduce((sum, line) => {
+    return Math.max(
+      sum,
+      line.reduce((lineSum, segment) => lineSum + segment.text.length, 0),
+    );
+  }, 0);
+});
+
+const minecraftFormat = computed(() => {
+  return motd.value
+    .map((line) => {
+      return line
+        .map((segment) => {
+          let format = getColorCode(segment.color);
+          if (segment.bold) format += "§l";
+          if (segment.italic) format += "§o";
+          if (segment.underline) format += "§n";
+          if (segment.strikethrough) format += "§m";
+          return format + segment.text;
+        })
+        .join("");
+    })
+    .join("\n");
+});
+
+const currentStyle = computed(() => {
+  const line = motd.value[currentLineIndex.value];
+  if (!line) return {};
+
+  let start = 0;
+  for (const segment of line) {
+    if (start + segment.text.length > selectionStart.value) {
+      return {
+        color: segment.color || "White",
+        bold: segment.bold || false,
+        italic: segment.italic || false,
+        underline: segment.underline || false,
+        strikethrough: segment.strikethrough || false,
+      };
+    }
+    start += segment.text.length;
+  }
+  return {};
+});
+
+function getColorCode(color) {
+  const format = formatCodes.find((f) => f.description === color);
+  return format ? format.code : "§f";
+}
+
+function renderLine(line) {
+  return line
+    .map((segment) => {
+      let style = `color: ${segment.color};`;
+      if (segment.bold) style += "font-weight: 900;";
+      if (segment.italic) style += "font-style: italic;";
+      if (segment.underline) style += "text-decoration: underline;";
+      if (segment.strikethrough) style += "text-decoration: line-through;";
+      return `<span style="${style}">${segment.text}</span>`;
+    })
+    .join("");
+}
+
+function handleSelection(lineIndex) {
+  const selection = window.getSelection();
+  if (selection.toString().length > 0) {
+    const range = selection.getRangeAt(0);
+    const rect = range.getBoundingClientRect();
+
+    popupX.value = rect.left;
+    popupY.value = rect.bottom;
+    showPopup.value = true;
+    currentLineIndex.value = lineIndex;
+
+    const lineElement = document.querySelectorAll("[contenteditable]")[lineIndex];
+    const rangeClone = range.cloneRange();
+    rangeClone.selectNodeContents(lineElement);
+    rangeClone.setEnd(range.startContainer, range.startOffset);
+    selectionStart.value = rangeClone.toString().length;
+    selectionEnd.value = selectionStart.value + range.toString().length;
+  } else {
+    showPopup.value = false;
+    colorPicker.value = false;
+  }
+}
+
+function applyStyle(newStyle) {
+  const line = motd.value[currentLineIndex.value];
+  const newLine = [];
+  let currentPos = 0;
+
+  for (const segment of line) {
+    if (currentPos + segment.text.length <= selectionStart.value) {
+      newLine.push(segment);
+    } else if (currentPos >= selectionEnd.value) {
+      newLine.push(segment);
+    } else {
+      const beforeSelection = segment.text.slice(0, Math.max(0, selectionStart.value - currentPos));
+      const inSelection = segment.text.slice(
+        Math.max(0, selectionStart.value - currentPos),
+        Math.min(segment.text.length, selectionEnd.value - currentPos),
+      );
+      const afterSelection = segment.text.slice(
+        Math.min(segment.text.length, selectionEnd.value - currentPos),
+      );
+      console.log(beforeSelection);
+      console.log(inSelection);
+      console.log(afterSelection);
+
+      if (beforeSelection) newLine.push({ ...segment, text: beforeSelection });
+      if (inSelection) {
+        const mergedStyle = { ...segment, ...newStyle };
+        for (const key in newStyle) {
+          if (newStyle[key] === false) {
+            delete mergedStyle[key];
+          }
+        }
+        newLine.push({ ...mergedStyle, text: inSelection });
+      }
+      if (afterSelection) newLine.push({ ...segment, text: afterSelection });
+    }
+    currentPos += segment.text.length;
+  }
+
+  motd.value[currentLineIndex.value] = newLine;
+  showPopup.value = false;
+  colorPicker.value = false;
+
+  // Rerender the line to reflect the changes
+  nextTick(() => {
+    const lineElement = document.querySelectorAll("[contenteditable]")[currentLineIndex.value];
+    lineElement.innerHTML = renderLine(newLine);
+  });
+}
+
+function insertEmoji() {
+  const emoji = "☺";
+  if (totalCharacters.value + emoji.length <= 90) {
+    applyStyle({ text: emoji });
+  }
+}
+
+function handleInput(event, lineIndex) {
+  const newText = event.target.textContent;
+  const oldText = motd.value[lineIndex].reduce((acc, segment) => acc + segment.text, "");
+  const diff = newText.length - oldText.length;
+
+  if (newText.length <= 45) {
+    const selection = window.getSelection();
+    const range = selection.getRangeAt(0);
+    const cursorOffset = getCursorOffset(event.target, range);
+
+    const newLine = [];
+    let currentPos = 0;
+    for (const segment of motd.value[lineIndex]) {
+      const segmentEnd = currentPos + segment.text.length;
+      const newSegmentText = newText.slice(currentPos, Math.min(segmentEnd, newText.length));
+      if (newSegmentText) {
+        newLine.push({ ...segment, text: newSegmentText });
+      }
+      currentPos = segmentEnd;
+      if (currentPos >= newText.length) break;
+    }
+    if (currentPos < newText.length) {
+      newLine.push({ text: newText.slice(currentPos), color: "White" });
+    }
+    motd.value[lineIndex] = newLine;
+
+    nextTick(() => {
+      const lineElement = event.target;
+      lineElement.innerHTML = renderLine(newLine);
+
+      const newRange = document.createRange();
+      const sel = window.getSelection();
+      const { node, offset } = getCursorNodeAndOffset(lineElement, cursorOffset);
+
+      if (node) {
+        newRange.setStart(node, offset);
+        newRange.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(newRange);
+      }
+    });
+  } else {
+    event.target.innerHTML = renderLine(motd.value[lineIndex]);
+  }
+}
+
+// Helper function to get cursor offset considering styled spans
+function getCursorOffset(element, range) {
+  let offset = 0;
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
+  let node;
+
+  while ((node = walker.nextNode())) {
+    if (node === range.startContainer) {
+      return offset + range.startOffset;
+    }
+    offset += node.length;
+  }
+  return offset;
+}
+
+// Helper function to find the node and offset for cursor placement
+function getCursorNodeAndOffset(element, targetOffset) {
+  let currentOffset = 0;
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
+  let node;
+
+  while ((node = walker.nextNode())) {
+    if (currentOffset + node.length >= targetOffset) {
+      return { node, offset: targetOffset - currentOffset };
+    }
+    currentOffset += node.length;
+  }
+
+  // If we've gone past the end, return the last possible position
+  const lastTextNode = element.lastChild?.lastChild;
+  return { node: lastTextNode, offset: lastTextNode?.length || 0 };
+}
+
+function handlePaste(event, lineIndex) {
+  event.preventDefault();
+  const pastedText = (event.clipboardData || window.clipboardData).getData("text");
+  const selection = window.getSelection();
+  const range = selection.getRangeAt(0);
+  const startOffset = range.startOffset;
+
+  const currentText = motd.value[lineIndex].reduce((acc, segment) => acc + segment.text, "");
+  const newText = currentText.slice(0, startOffset) + pastedText + currentText.slice(startOffset);
+
+  if (newText.length <= 45) {
+    // Preserve existing styles by matching new text with old segments
+    const newLine = [];
+    let currentPos = 0;
+    for (const segment of motd.value[lineIndex]) {
+      if (currentPos < startOffset) {
+        const segmentEnd = Math.min(currentPos + segment.text.length, startOffset);
+        newLine.push({ ...segment, text: newText.slice(currentPos, segmentEnd) });
+        currentPos = segmentEnd;
+      } else if (currentPos >= startOffset + pastedText.length) {
+        newLine.push({ ...segment, text: newText.slice(currentPos) });
+        break;
+      }
+    }
+    // Insert pasted text as a new segment
+    if (currentPos < startOffset + pastedText.length) {
+      newLine.push({
+        text: newText.slice(currentPos, startOffset + pastedText.length),
+        color: "White",
+      });
+    }
+    motd.value[lineIndex] = newLine;
+
+    nextTick(() => {
+      const lineElement = document.querySelectorAll("[contenteditable]")[lineIndex];
+      lineElement.innerHTML = renderLine(newLine);
+      const newRange = document.createRange();
+      const sel = window.getSelection();
+      newRange.setStart(lineElement.childNodes[0], startOffset + pastedText.length);
+      newRange.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(newRange);
+    });
+  }
+}
+</script>
+
+<style scoped>
+.minecraft-font {
+  font-family: "Minecraft", monospace;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+[contenteditable] {
+  outline: none;
+}
+</style>
+
+<style scoped>
+@font-face {
+  font-family: "Monocraft";
+  src: url("/Monocraft.ttf") format("truetype");
+}
+
+.font-minecraft {
+  font-family: "Monocraft", monospace;
+}
+
+.mcbg {
+  background: url("@/assets/images/servers/minecraft-background-dark.png") repeat center center;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease-in-out;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
+  opacity: 0;
+}
+</style>
diff --git a/apps/frontend/src/components/ui/servers/ModrinthServersIcon.vue b/apps/frontend/src/components/ui/servers/ModrinthServersIcon.vue
new file mode 100644
index 000000000..ea8832780
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/ModrinthServersIcon.vue
@@ -0,0 +1,53 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:serif="http://www.serif.com/"
+    version="1.1"
+    viewBox="0 0 1793 199"
+  >
+    <g>
+      <g id="Layer_1">
+        <g id="green" fill="var(--color-brand)">
+          <path
+            d="M1184.1,166.6c-8,0-15.6-1-22.9-3.1s-13.1-4.6-17.4-7.6l8.5-16.9c4.3,2.7,9.4,5,15.3,6.8,5.9,1.8,11.9,2.7,17.8,2.7s12.1-.9,15.2-2.8c3.1-1.9,4.7-4.5,4.7-7.7s-1.1-4.6-3.2-6c-2.1-1.4-4.9-2.4-8.4-3.1-3.4-.7-7.3-1.4-11.5-2-4.2-.6-8.4-1.4-12.6-2.4-4.2-1-8-2.5-11.5-4.5-3.4-2-6.2-4.6-8.4-7.9-2.1-3.3-3.2-7.7-3.2-13.2s1.7-11.3,5.2-15.8c3.4-4.5,8.3-7.9,14.5-10.3,6.2-2.4,13.6-3.7,22.2-3.7s12.9.7,19.4,2.1c6.5,1.4,11.9,3.4,16.2,6.1l-8.5,16.9c-4.5-2.7-9.1-4.6-13.6-5.6-4.6-1-9.1-1.5-13.6-1.5-6.8,0-11.8,1-15,3-3.3,2-4.9,4.6-4.9,7.7s1.1,5,3.2,6.4c2.1,1.4,4.9,2.6,8.4,3.4,3.4.8,7.3,1.5,11.5,2,4.2.5,8.4,1.3,12.6,2.4,4.2,1.1,8,2.5,11.5,4.4,3.5,1.8,6.3,4.4,8.5,7.7,2.1,3.3,3.2,7.7,3.2,13s-1.8,11.1-5.3,15.5c-3.5,4.4-8.5,7.8-14.9,10.2-6.4,2.4-14.1,3.7-23,3.7Z"
+          />
+          <path
+            d="M1291.1,166.6c-10.6,0-19.8-2.1-27.7-6.3-7.9-4.2-14-10-18.3-17.4-4.3-7.4-6.5-15.7-6.5-25.1s2.1-17.9,6.3-25.2c4.2-7.3,10-13,17.5-17.2,7.4-4.2,15.9-6.2,25.4-6.2s17.5,2,24.8,6.1c7.2,4,12.9,9.7,17.1,17.1,4.2,7.4,6.2,16,6.2,26s0,2,0,3.2c0,1.2-.2,2.3-.3,3.4h-79.3v-14.8h67.5l-8.7,4.6c.1-5.5-1-10.3-3.4-14.4-2.4-4.2-5.6-7.4-9.7-9.8-4.1-2.4-8.8-3.6-14.2-3.6s-10.2,1.2-14.3,3.6c-4.1,2.4-7.3,5.7-9.6,9.9-2.3,4.2-3.5,9.2-3.5,14.9v3.6c0,5.7,1.3,10.7,3.9,15.1,2.6,4.4,6.3,7.8,11,10.2,4.7,2.4,10.2,3.6,16.4,3.6s10.2-.8,14.4-2.5c4.3-1.7,8.1-4.3,11.4-7.8l11.9,13.7c-4.3,5-9.6,8.8-16.1,11.5-6.5,2.7-13.9,4-22.2,4Z"
+          />
+          <path
+            d="M1357.2,165.3v-95.1h21.2v26.2l-2.5-7.7c2.8-6.4,7.3-11.3,13.4-14.6,6.1-3.3,13.7-5,22.9-5v21.2c-1-.2-1.8-.4-2.7-.4-.8,0-1.7,0-2.5,0-8.4,0-15.1,2.5-20.1,7.4-5,4.9-7.5,12.3-7.5,22v46.1h-22.3Z"
+          />
+          <path d="M1460,165.3l-40.8-95.1h23.2l35.1,83.9h-11.4l36.3-83.9h21.4l-40.8,95.1h-23Z" />
+          <path
+            d="M1579.6,166.6c-10.6,0-19.8-2.1-27.7-6.3-7.9-4.2-14-10-18.3-17.4-4.3-7.4-6.5-15.7-6.5-25.1s2.1-17.9,6.3-25.2c4.2-7.3,10-13,17.5-17.2,7.4-4.2,15.9-6.2,25.4-6.2s17.5,2,24.8,6.1c7.2,4,12.9,9.7,17.1,17.1,4.2,7.4,6.2,16,6.2,26s0,2,0,3.2c0,1.2-.2,2.3-.3,3.4h-79.3v-14.8h67.5l-8.7,4.6c.1-5.5-1-10.3-3.4-14.4-2.4-4.2-5.6-7.4-9.7-9.8-4.1-2.4-8.8-3.6-14.2-3.6s-10.2,1.2-14.3,3.6c-4.1,2.4-7.3,5.7-9.6,9.9-2.3,4.2-3.5,9.2-3.5,14.9v3.6c0,5.7,1.3,10.7,3.9,15.1,2.6,4.4,6.3,7.8,11,10.2,4.7,2.4,10.2,3.6,16.4,3.6s10.2-.8,14.4-2.5c4.3-1.7,8.1-4.3,11.4-7.8l11.9,13.7c-4.3,5-9.6,8.8-16.1,11.5-6.5,2.7-13.9,4-22.2,4Z"
+          />
+          <path
+            d="M1645.7,165.3v-95.1h21.2v26.2l-2.5-7.7c2.8-6.4,7.3-11.3,13.4-14.6,6.1-3.3,13.7-5,22.9-5v21.2c-1-.2-1.8-.4-2.7-.4-.8,0-1.7,0-2.5,0-8.4,0-15.1,2.5-20.1,7.4-5,4.9-7.5,12.3-7.5,22v46.1h-22.3Z"
+          />
+          <path
+            d="M1749.9,166.6c-8,0-15.6-1-22.9-3.1s-13.1-4.6-17.4-7.6l8.5-16.9c4.3,2.7,9.4,5,15.3,6.8,5.9,1.8,11.9,2.7,17.8,2.7s12.1-.9,15.2-2.8c3.1-1.9,4.7-4.5,4.7-7.7s-1.1-4.6-3.2-6c-2.1-1.4-4.9-2.4-8.4-3.1-3.4-.7-7.3-1.4-11.5-2-4.2-.6-8.4-1.4-12.6-2.4-4.2-1-8-2.5-11.5-4.5-3.4-2-6.2-4.6-8.4-7.9-2.1-3.3-3.2-7.7-3.2-13.2s1.7-11.3,5.2-15.8c3.4-4.5,8.3-7.9,14.5-10.3,6.2-2.4,13.6-3.7,22.2-3.7s12.9.7,19.4,2.1c6.5,1.4,11.9,3.4,16.2,6.1l-8.5,16.9c-4.5-2.7-9.1-4.6-13.6-5.6-4.6-1-9.1-1.5-13.6-1.5-6.8,0-11.8,1-15,3-3.3,2-4.9,4.6-4.9,7.7s1.1,5,3.2,6.4c2.1,1.4,4.9,2.6,8.4,3.4,3.4.8,7.3,1.5,11.5,2,4.2.5,8.4,1.3,12.6,2.4,4.2,1.1,8,2.5,11.5,4.4,3.5,1.8,6.3,4.4,8.5,7.7,2.1,3.3,3.2,7.7,3.2,13s-1.8,11.1-5.3,15.5c-3.5,4.4-8.5,7.8-14.9,10.2-6.4,2.4-14.1,3.7-23,3.7Z"
+          />
+          <g>
+            <path
+              d="M9.8,143l63.4-38.1-5.8-15.3,18.1-18.6,22.9-4.9,6.6,8.2-10.6,10.7-9.2,2.9-6.6,6.8,3.2,9,6.5,6.9,9.2-2.5,6.6-7.2,14.3-4.5,4.3,9.6-14.8,18.1-24.8,7.8-11.1-12.4-63.6,38.2c-3-3.9-6.5-9.4-8.8-14.7ZM192.8,65.4l-50.4,13.6c2.8,7.4,3.7,11.7,4.5,16.5l50.3-13.6c-.8-5.4-2.2-10.8-4.4-16.5Z"
+              fill-rule="evenodd"
+            />
+            <path
+              d="M17.3,106.5c3.6,42.1,38.9,75.2,82,75.2s60.7-18.9,74-46.3l16.4,5.7c-15.8,34.1-50.3,57.9-90.4,57.9S3.6,158.2,0,106.5h17.3ZM.3,89.4C5.3,39.2,47.8,0,99.3,0s99.5,44.6,99.5,99.5-1.1,17.4-3.3,25.5l-16.3-5.7c1.6-6.5,2.4-13.1,2.4-19.8,0-45.4-36.9-82.3-82.3-82.3S22.6,48.7,17.6,89.4H.3Z"
+              fill-rule="evenodd"
+            />
+            <path
+              d="M99,51.6c-26.4,0-47.9,21.5-47.9,48s21.5,48,48,48,2.7,0,4-.2l4.8,16.8c-2.9.4-5.8.6-8.8.6-36,0-65.2-29.2-65.2-65.2S63.1,34.4,99,34.4s1.8,0,2.7,0l-2.7,17.1ZM118.6,37.4c26.4,8.3,45.6,33,45.6,62.2s-16.4,50.2-39.8,60l-4.8-16.7c16.2-7.7,27.4-24.2,27.4-43.3s-13-38.1-31.1-44.9l2.7-17.2Z"
+              fill-rule="evenodd"
+            />
+          </g>
+        </g>
+        <g id="black" fill="currentColor">
+          <path
+            d="M354.8,69.2c12,0,21.7,3.4,28.6,10.4,7,7.2,10.6,17.5,10.6,31.5v54.8h-22.4v-51.9c0-8.4-1.8-14.7-5.5-19-3.8-4.1-8.9-6.3-15.9-6.3s-13.6,2.5-18.1,7.3c-4.5,5-6.8,12.2-6.8,21.3v48.5h-22.4v-51.9c0-8.4-1.8-14.7-5.5-19-3.8-4.1-8.9-6.3-15.9-6.3s-13.6,2.5-18.1,7.3c-4.5,4.8-6.8,12-6.8,21.3v48.5h-22.4v-95.6h21.3v12.2c3.6-4.3,8.1-7.5,13.4-9.8,5.4-2.3,11.3-3.4,17.9-3.4s13.6,1.3,19.2,3.9c5.5,2.9,9.8,6.8,13.1,12,3.9-5,8.9-8.9,15.2-11.8,6.3-2.7,13.1-4.1,20.6-4.1ZM466,167.2c-9.7,0-18.4-2.1-26.1-6.3-7.6-4-13.8-10.1-18.1-17.5-4.5-7.3-6.6-15.7-6.6-25.2s2.1-17.9,6.6-25.2c4.3-7.4,10.6-13.4,18.1-17.4,7.7-4.1,16.5-6.3,26.1-6.3s18.6,2.1,26.3,6.3c7.7,4.1,13.8,10,18.3,17.4,4.3,7.3,6.4,15.7,6.4,25.2s-2.1,17.9-6.4,25.2c-4.5,7.5-10.6,13.4-18.3,17.5-7.7,4.1-16.5,6.3-26.3,6.3h0ZM466,148c8.2,0,15-2.7,20.4-8.2,5.4-5.5,8.1-12.7,8.1-21.7s-2.7-16.1-8.1-21.7c-5.4-5.5-12.2-8.2-20.4-8.2s-15,2.7-20.2,8.2c-5.4,5.5-8.1,12.7-8.1,21.7s2.7,16.1,8.1,21.7c5.2,5.5,12,8.2,20.2,8.2ZM631.5,33.1v132.8h-21.5v-12.3c-3.7,4.4-8.3,7.9-13.6,10.2-5.5,2.3-11.5,3.4-18.1,3.4s-17.4-2-24.7-6.1c-7.3-4.1-13.2-9.8-17.4-17.4-4.1-7.3-6.3-15.9-6.3-25.6s2.1-18.3,6.3-25.6c4.1-7.3,10-13.1,17.4-17.2,7.3-4.1,15.6-6.1,24.7-6.1s12.2,1.1,17.4,3.2c5.2,2.1,9.8,5.4,13.4,9.7v-49h22.4ZM581.1,148c5.4,0,10.2-1.3,14.5-3.8,4.3-2.3,7.7-5.9,10.2-10.4,2.5-4.5,3.8-9.8,3.8-15.7s-1.3-11.3-3.8-15.7c-2.5-4.5-5.9-8.1-10.2-10.6-4.3-2.3-9.1-3.6-14.5-3.6s-10.2,1.3-14.5,3.6c-4.3,2.5-7.7,6.1-10.2,10.6-2.5,4.5-3.8,9.8-3.8,15.7s1.3,11.3,3.8,15.7c2.5,4.5,5.9,8.1,10.2,10.4,4.3,2.5,9.1,3.8,14.5,3.8ZM681.6,84.3c6.4-10,17.7-15,34-15v21.3c-1.7-.3-3.4-.5-5.2-.5-8.8,0-15.6,2.5-20.4,7.5-4.8,5.2-7.3,12.5-7.3,22v46.4h-22.4v-95.6h21.3v14h0ZM734.1,70.3h22.4v95.6h-22.4v-95.6ZM745.4,54.6c-4.1,0-7.5-1.3-10.2-3.9-2.7-2.4-4.2-5.9-4.1-9.5,0-3.8,1.4-7,4.1-9.7,2.7-2.5,6.1-3.8,10.2-3.8s7.5,1.3,10.2,3.6c2.7,2.5,4.1,5.5,4.1,9.3s-1.3,7.2-3.9,9.8c-2.7,2.7-6.3,4.1-10.4,4.1ZM839.5,69.2c12,0,21.7,3.6,29,10.6,7.3,7,10.9,17.5,10.9,31.3v54.8h-22.4v-51.9c0-8.4-2-14.7-5.9-19-3.9-4.1-9.5-6.3-16.8-6.3s-14.7,2.5-19.5,7.3c-4.8,5-7.2,12.2-7.2,21.5v48.3h-22.4v-95.6h21.3v12.3c3.8-4.5,8.4-7.7,14-10,5.5-2.3,12-3.4,19-3.4ZM964.8,160.7c-2.8,2.2-6,3.9-9.5,4.8-3.9,1.1-7.9,1.6-12,1.6-10.6,0-18.6-2.7-24.3-8.2-5.7-5.5-8.6-13.4-8.6-24v-46h-15.7v-17.9h15.7v-21.8h22.4v21.8h25.6v17.9h-25.6v45.5c0,4.7,1.1,8.2,3.4,10.6,2.3,2.5,5.5,3.8,9.8,3.8s9.1-1.3,12.5-3.9l6.3,15.9ZM1036.9,69.2c12,0,21.7,3.6,29,10.6,7.3,7,10.9,17.5,10.9,31.3v54.8h-22.4v-51.9c0-8.4-2-14.7-5.9-19-3.9-4.1-9.5-6.3-16.8-6.3s-14.7,2.5-19.5,7.3c-4.8,5-7.2,12.2-7.2,21.5v48.3h-22.4V33.1h22.4v48.3c3.8-3.9,8.2-7,13.8-9.1,5.4-2,11.5-3,18.1-3Z"
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
diff --git a/apps/frontend/src/components/ui/servers/PanelCopyIP.vue b/apps/frontend/src/components/ui/servers/PanelCopyIP.vue
new file mode 100644
index 000000000..6bc45920d
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/PanelCopyIP.vue
@@ -0,0 +1,31 @@
+<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/PanelOverviewLoading.vue b/apps/frontend/src/components/ui/servers/PanelOverviewLoading.vue
new file mode 100644
index 000000000..7fbe45a37
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/PanelOverviewLoading.vue
@@ -0,0 +1,77 @@
+<template>
+  <div
+    aria-hidden="true"
+    style="font-variant-numeric: tabular-nums"
+    class="pointer-events-none h-full w-full select-none"
+  >
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-row items-center gap-6">
+        <div
+          class="relative max-h-[156px] 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">
+            <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">0.00%</h2>
+              <h3 class="relative z-10 text-sm font-normal text-secondary">/ 100%</h3>
+            </div>
+            <h3 class="relative z-10 text-base font-normal text-secondary">CPU usage</h3>
+          </div>
+          <CPUIcon class="absolute right-10 top-10" />
+        </div>
+        <div
+          class="relative max-h-[156px] 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">
+            <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">0.00%</h2>
+              <h3 class="relative z-10 text-sm font-normal text-secondary">/ 100%</h3>
+            </div>
+            <h3 class="relative z-10 text-base font-normal text-secondary">Memory usage</h3>
+          </div>
+          <DBIcon class="absolute right-10 top-10" />
+        </div>
+        <div
+          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>
+          </div>
+          <h3 class="relative z-10 text-base font-normal text-secondary">Storage usage</h3>
+          <FolderOpenIcon class="absolute right-10 top-10 size-8" />
+        </div>
+      </div>
+
+      <div
+        class="relative flex h-full w-full flex-col gap-3 overflow-hidden rounded-2xl bg-bg-raised p-8"
+      >
+        <div class="experimental-styles-within flex flex-row items-center">
+          <div class="flex flex-row items-center gap-4">
+            <h2 class="m-0 text-3xl font-extrabold text-contrast">Console</h2>
+          </div>
+        </div>
+        <div
+          class="console relative h-full min-h-[488px] w-full overflow-hidden rounded-xl bg-bg text-sm"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CPUIcon, DBIcon, FolderOpenIcon } from "@modrinth/assets";
+</script>
+
+<style scoped>
+html.light-mode .console {
+  background: var(--color-bg);
+}
+
+html.dark-mode .console {
+  background: black;
+}
+
+html.oled-mode .console {
+  background: black;
+}
+</style>
diff --git a/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue b/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue
new file mode 100644
index 000000000..ebb5cf0b7
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue
@@ -0,0 +1,312 @@
+<template>
+  <div class="contents">
+    <NewModal ref="confirmActionModal" header="Confirming power action" @close="closePowerModal">
+      <div class="flex flex-col gap-4 md:w-[400px]">
+        <p class="m-0">Are you sure you want to {{ currentPendingAction }} the server?</p>
+
+        <UiCheckbox
+          v-model="powerDontAskAgainCheckbox"
+          label="Don't ask me again"
+          class="text-sm"
+          :disabled="!currentPendingAction"
+        />
+        <div class="flex flex-row gap-4">
+          <ButtonStyled type="standard" color="brand" @click="confirmAction">
+            <button>
+              <CheckIcon class="h-5 w-5" />
+              {{ currentPendingActionFriendly }} server
+            </button>
+          </ButtonStyled>
+          <ButtonStyled @click="closePowerModal">
+            <button>
+              <XIcon class="h-5 w-5" />
+              Cancel
+            </button>
+          </ButtonStyled>
+        </div>
+      </div>
+    </NewModal>
+
+    <NewModal
+      ref="detailsModal"
+      :header="`All of ${props.serverName ? props.serverName : 'Server'} info`"
+      @close="closeDetailsModal"
+    >
+      <UiServersServerInfoLabels
+        :server-data="serverData"
+        :show-game-label="true"
+        :show-loader-label="true"
+        :uptime-seconds="uptimeSeconds"
+        :column="true"
+        class="mb-6 flex flex-col gap-2"
+      />
+      <ButtonStyled type="standard" color="brand" @click="closeDetailsModal">
+        <button class="w-full">Close</button>
+      </ButtonStyled>
+    </NewModal>
+
+    <div class="flex flex-row items-center gap-2 rounded-lg">
+      <ButtonStyled v-if="isInstalling" type="standard" color="brand">
+        <button disabled class="flex-shrink-0">
+          <UiServersPanelSpinner class="size-5" /> Installing...
+        </button>
+      </ButtonStyled>
+      <div v-else class="contents">
+        <ButtonStyled v-if="showStopButton" type="transparent">
+          <button :disabled="!canTakeAction || disabled || isStopping" @click="stopServer">
+            <div class="flex gap-1">
+              <StopCircleIcon class="h-5 w-5" />
+              <span>{{ stopButtonText }}</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">
+              <UiServersIconsLoadingIcon />
+            </div>
+            <div v-else class="contents">
+              <component :is="showRestartIcon ? UpdatedIcon : PlayIcon" />
+            </div>
+            <span>
+              {{ actionButtonText }}
+            </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>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import {
+  PlayIcon,
+  UpdatedIcon,
+  StopCircleIcon,
+  SlashIcon,
+  MoreVerticalIcon,
+  XIcon,
+  CheckIcon,
+  ServerIcon,
+  InfoIcon,
+} from "@modrinth/assets";
+import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { useRouter } from "vue-router";
+import { useStorage } from "@vueuse/core";
+
+const props = defineProps<{
+  isOnline: boolean;
+  isActioning: boolean;
+  isInstalling: boolean;
+  disabled: boolean;
+  serverName?: string;
+  serverData: object;
+  uptimeSeconds: number;
+}>();
+
+const router = useRouter();
+const serverId = router.currentRoute.value.params.id;
+
+const userPreferences = useStorage(`pyro-server-${serverId}-preferences`, {
+  powerDontAskAgain: false,
+});
+
+const emit = defineEmits<{
+  (e: "action", action: "start" | "restart" | "stop" | "kill"): void;
+}>();
+
+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,
+);
+
+const isStartingOrRestarting = computed(
+  () =>
+    currentState.value === ServerState.Starting || currentState.value === ServerState.Restarting,
+);
+
+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 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 stopButtonText = computed(() =>
+  currentState.value === ServerState.Stopping ? "Stopping..." : "Stop",
+);
+
+const createPendingAction = () => {
+  if (!canTakeAction.value) return;
+  if (currentState.value === ServerState.Running) {
+    currentPendingAction.value = "restart";
+    currentPendingState.value = ServerState.Restarting;
+    showPowerModal();
+  } else {
+    runAction("start", ServerState.Starting);
+  }
+};
+
+const handleAction = () => {
+  createPendingAction();
+};
+
+const showPowerModal = () => {
+  if (userPreferences.value.powerDontAskAgain) {
+    runAction(
+      currentPendingAction.value as "start" | "restart" | "stop" | "kill",
+      currentPendingState.value!,
+    );
+  } else {
+    confirmActionModal.value?.show();
+  }
+};
+
+const confirmAction = () => {
+  if (powerDontAskAgainCheckbox.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);
+  }
+};
+
+const stopServer = () => {
+  if (!canTakeAction.value) return;
+  currentPendingAction.value = "stop";
+  currentPendingState.value = ServerState.Stopping;
+  showPowerModal();
+};
+
+const killServer = () => {
+  currentPendingAction.value = "kill";
+  currentPendingState.value = ServerState.Stopping;
+  showPowerModal();
+};
+
+const closePowerModal = () => {
+  confirmActionModal.value?.hide();
+  currentPendingAction.value = null;
+  powerDontAskAgainCheckbox.value = false;
+};
+
+const closeDetailsModal = () => {
+  detailsModal.value?.hide();
+};
+
+const showDetailsModal = () => {
+  detailsModal.value?.show();
+};
+
+watch(
+  () => props.isOnline,
+  (newValue) => {
+    if (newValue) {
+      currentState.value = ServerState.Running;
+    } else {
+      currentState.value = ServerState.Stopped;
+    }
+  },
+);
+
+watch(
+  () => router.currentRoute.value.fullPath,
+  () => {
+    closeDetailsModal();
+  },
+);
+</script>
diff --git a/apps/frontend/src/components/ui/servers/PanelServerStatus.vue b/apps/frontend/src/components/ui/servers/PanelServerStatus.vue
new file mode 100644
index 000000000..81e6ebc6f
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/PanelServerStatus.vue
@@ -0,0 +1,66 @@
+<template>
+  <div
+    :aria-label="`Server is ${getStatusText}`"
+    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}`"
+    >
+      <div
+        :class="`absolute inline-flex h-4 w-4 animate-ping rounded-full ${getStatusClass.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'
+      }`"
+    >
+      <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'}`"
+      >
+        {{ getStatusText }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import type { ServerState } from "~/types/servers";
+
+const props = 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: "" };
+  }
+});
+
+const getStatusText = computed(() => {
+  switch (props.state) {
+    case "running":
+      return "Running";
+    case "stopped":
+      return "";
+    case "crashed":
+      return "Crashed";
+    default:
+      return "Unknown";
+  }
+});
+</script>
diff --git a/apps/frontend/src/components/ui/servers/PanelSpinner.vue b/apps/frontend/src/components/ui/servers/PanelSpinner.vue
new file mode 100644
index 000000000..d9b5721de
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/PanelSpinner.vue
@@ -0,0 +1,22 @@
+<template>
+  <svg
+    class="h-5 w-5 animate-spin"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      class="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    ></circle>
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+</template>
diff --git a/apps/frontend/src/components/ui/servers/PanelTerminal.vue b/apps/frontend/src/components/ui/servers/PanelTerminal.vue
new file mode 100644
index 000000000..47c0a8e84
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/PanelTerminal.vue
@@ -0,0 +1,684 @@
+<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>
+    <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',
+      }"
+    >
+      <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"
+        @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>
+      </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"
+      >
+        <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"
+          >
+            <template v-for="(item, index) in visibleItems" :key="index">
+              <li>
+                <UiServersLogParser :log="item" :index="visibleStartIndex + index" />
+              </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-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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RightArrowIcon } from "@modrinth/assets";
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from "vue";
+
+const { $cosmetics } = useNuxtApp();
+const cosmetics = $cosmetics;
+
+const props = defineProps<{
+  consoleOutput: string[];
+  fullScreen: boolean;
+}>();
+
+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 userHasScrolled = ref(false);
+const isScrolledToBottom = ref(true);
+
+const handleScrollEvent = () => {
+  handleListScroll();
+};
+
+const totalHeight = computed(
+  () =>
+    itemHeights.value.reduce((sum, height) => sum + height, 0) ||
+    props.consoleOutput.length * averageItemHeight.value,
+);
+
+watch(totalHeight, () => {
+  if (isScrolledToBottom.value) {
+    scrollToBottom();
+  }
+  if (!initial.value) {
+    initial.value = true;
+  }
+});
+
+const lerp = (start: number, end: number, t: number) => start * (1 - t) + end * t;
+
+const getBlurStyle = (i: number) => {
+  const properBlurIteration = i + 1;
+  const blur = lerp(0, 2 ** (properBlurIteration - 3), bottomThreshold.value);
+  const singular = 100 / progressiveBlurIterations.value;
+  let mask = "linear-gradient(";
+
+  switch (i) {
+    case 0:
+      mask += `rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) ${singular}%`;
+      break;
+    case 1:
+      mask += `rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) ${singular}%, rgb(0, 0, 0) ${singular * 2}%`;
+      break;
+    case 2:
+      mask += `rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) ${singular}%, rgba(0, 0, 0, 0) ${singular * 2}%, rgb(0, 0, 0) ${singular * 3}%`;
+      break;
+    default:
+      mask += `rgba(0, 0, 0, 0) ${singular * (i - 3)}%, rgb(0, 0, 0) ${singular * (i + 1 - 3)}%, rgb(0, 0, 0) ${singular * (i + 2 - 3)}%, rgba(0, 0, 0, 0) ${singular * (i + 3 - 3)}%`;
+      break;
+  }
+
+  mask += `)`;
+
+  return {
+    backdropFilter: `blur(${blur}px)`,
+    mask,
+    position: "absolute" as any,
+    zIndex: progressiveBlurIterations.value - i,
+  };
+};
+
+const getItemOffset = (index: number) => {
+  return itemHeights.value.slice(0, index).reduce((sum, height) => sum + height, 0);
+};
+
+const visibleStartIndex = computed(() => {
+  let index = 0;
+  let offset = 0;
+  while (
+    index < props.consoleOutput.length &&
+    offset < scrollTop.value - bufferSize * averageItemHeight.value
+  ) {
+    offset += itemHeights.value[index] || averageItemHeight.value;
+    index++;
+  }
+  return Math.max(0, index - 1);
+});
+
+const visibleEndIndex = computed(() => {
+  let index = visibleStartIndex.value;
+  let offset = getItemOffset(index);
+  while (
+    index < props.consoleOutput.length &&
+    offset < scrollTop.value + clientHeight.value + bufferSize * averageItemHeight.value
+  ) {
+    offset += itemHeights.value[index] || averageItemHeight.value;
+    index++;
+  }
+  return Math.min(props.consoleOutput.length - 1, index);
+});
+
+const visibleItems = computed(() =>
+  props.consoleOutput.slice(visibleStartIndex.value, visibleEndIndex.value + 1),
+);
+
+const offsetY = computed(() => getItemOffset(visibleStartIndex.value));
+
+const handleListScroll = () => {
+  if (!scrollContainer.value) return;
+
+  const container = scrollContainer.value;
+  scrollTop.value = container.scrollTop;
+  clientHeight.value = container.clientHeight;
+
+  const scrollHeight = container.scrollHeight;
+  const threshold = 32;
+
+  isScrolledToBottom.value = scrollHeight - scrollTop.value - clientHeight.value <= threshold;
+
+  if (!isScrolledToBottom.value && !isAutoScrolling.value) {
+    userHasScrolled.value = true;
+  }
+
+  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 = props.consoleOutput[index];
+    if (content) {
+      cachedHeights.value.set(content, height);
+    }
+  });
+};
+
+const updateClientHeight = () => {
+  if (scrollContainer.value) {
+    clientHeight.value = scrollContainer.value.clientHeight;
+  }
+};
+
+const scrollToBottom = () => {
+  if (!scrollContainer.value) return;
+
+  isAutoScrolling.value = true;
+  const container = scrollContainer.value;
+
+  nextTick(() => {
+    const maxScroll = container.scrollHeight - container.clientHeight;
+    container.scrollTop = maxScroll;
+
+    setTimeout(() => {
+      if (container.scrollTop < maxScroll) {
+        container.scrollTop = maxScroll;
+      }
+      isAutoScrolling.value = false;
+      userHasScrolled.value = false;
+      isScrolledToBottom.value = true;
+      handleListScroll();
+    }, 50);
+  });
+};
+
+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;
+
+  const contentHeight = scrollContainer.value.scrollHeight;
+  const viewportHeight = scrollContainer.value.clientHeight;
+  const trackHeight = scrollbarTrack.value.clientHeight;
+
+  const heightRatio = viewportHeight / contentHeight;
+
+  const minThumbHeight = Math.min(40, trackHeight / 2);
+
+  const proposedHeight = Math.max(heightRatio * trackHeight, minThumbHeight);
+
+  return Math.min(proposedHeight, trackHeight);
+};
+
+const getThumbPosition = () => {
+  if (!scrollContainer.value || !scrollbarTrack.value) return 0;
+
+  const contentHeight = scrollContainer.value.scrollHeight;
+  const viewportHeight = scrollContainer.value.clientHeight;
+  const trackHeight = scrollbarTrack.value.clientHeight;
+  const scrollProgress = scrollTop.value / (contentHeight - viewportHeight);
+
+  const thumbHeight = getThumbHeight();
+  const availableTrackSpace = trackHeight - thumbHeight;
+
+  return Math.max(0, Math.min(scrollProgress * availableTrackSpace, availableTrackSpace));
+};
+
+const startDragging = (event: MouseEvent) => {
+  event.preventDefault();
+  event.stopPropagation();
+
+  if (!scrollContainer.value || !scrollbarTrack.value) return;
+
+  isDragging.value = true;
+  startY.value = event.clientY;
+  startScrollTop.value = scrollContainer.value.scrollTop;
+
+  window.addEventListener("mousemove", handleDragging);
+  window.addEventListener("mouseup", stopDragging);
+
+  document.body.style.userSelect = "none";
+  document.body.style.pointerEvents = "none";
+};
+
+const handleDragging = (event: MouseEvent) => {
+  if (!isDragging.value || !scrollContainer.value || !scrollbarTrack.value) return;
+
+  const trackRect = scrollbarTrack.value.getBoundingClientRect();
+  const deltaY = event.clientY - startY.value;
+
+  const trackHeight = trackRect.height;
+  const contentHeight = scrollContainer.value.scrollHeight;
+  const viewportHeight = scrollContainer.value.clientHeight;
+  const maxScroll = contentHeight - viewportHeight;
+
+  const moveRatio = deltaY / trackHeight;
+  const scrollDelta = moveRatio * maxScroll;
+
+  const newScrollTop = Math.max(0, Math.min(startScrollTop.value + scrollDelta, maxScroll));
+  scrollContainer.value.scrollTop = newScrollTop;
+};
+
+const stopDragging = () => {
+  isDragging.value = false;
+
+  window.removeEventListener("mousemove", handleDragging);
+  window.removeEventListener("mouseup", stopDragging);
+
+  document.body.style.userSelect = "";
+  document.body.style.pointerEvents = "";
+};
+
+const handleTrackClick = (event: MouseEvent) => {
+  if (!scrollContainer.value || !scrollbarTrack.value || event.target === scrollbarThumb.value)
+    return;
+
+  const trackRect = scrollbarTrack.value.getBoundingClientRect();
+  const thumbHeight = getThumbHeight();
+
+  const clickOffset = event.clientY - trackRect.top;
+
+  const currentThumbPosition = getThumbPosition();
+  const thumbCenterPosition = currentThumbPosition + thumbHeight / 2;
+  const scrollAmount = clientHeight.value * (clickOffset < thumbCenterPosition ? -1 : 1);
+
+  const newScrollTop = Math.max(
+    0,
+    Math.min(
+      scrollContainer.value.scrollTop + scrollAmount,
+      scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight,
+    ),
+  );
+
+  scrollContainer.value.scrollTop = newScrollTop;
+};
+
+const enterFullScreen = () => {
+  isFullScreen.value = true;
+  document.body.style.overflow = "hidden";
+  nextTick(() => {
+    updateClientHeight();
+    updateItemHeights();
+  });
+};
+
+const exitFullScreen = () => {
+  isFullScreen.value = false;
+  document.body.style.overflow = "";
+  nextTick(() => {
+    updateClientHeight();
+    updateItemHeights();
+  });
+};
+
+const toggleFullscreen = () => {
+  if (isFullScreen.value) {
+    exitFullScreen();
+  } else {
+    enterFullScreen();
+  }
+};
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === "Escape" && isFullScreen.value) {
+    exitFullScreen();
+  }
+};
+
+const initializeTerminal = async () => {
+  if (!scrollContainer.value) return;
+
+  updateClientHeight();
+
+  const initialHeights = props.consoleOutput.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;
+};
+
+onMounted(async () => {
+  await initializeTerminal();
+
+  window.addEventListener("resize", updateClientHeight);
+  window.addEventListener("keydown", handleKeydown);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", updateClientHeight);
+  window.removeEventListener("keydown", handleKeydown);
+  stopDragging();
+});
+
+watch(
+  () => props.consoleOutput,
+  async (newOutput) => {
+    const newItemsCount = newOutput.length - itemHeights.value.length;
+
+    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);
+
+watch(
+  () => props.fullScreen,
+  (newValue) => {
+    isFullScreen.value = newValue;
+    nextTick(() => {
+      updateClientHeight();
+      updateItemHeights();
+    });
+  },
+);
+
+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 },
+);
+</script>
+
+<style scoped>
+:root {
+  --console-bg: var(--color-bg);
+}
+
+.terminal-font {
+  font-family: var(--mono-font);
+  font-size: 1rem;
+  line-height: 1.5em;
+}
+
+html.light-mode .console {
+  --console-bg: var(--color-bg);
+}
+
+html.dark-mode .console {
+  --console-bg: black;
+}
+
+html.oled-mode .console {
+  --console-bg: black;
+}
+
+.console {
+  background: var(--console-bg);
+}
+
+.scrollbar-none {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-none::-webkit-scrollbar {
+  display: none;
+}
+
+[data-pyro-terminal-root]::-webkit-scrollbar,
+[data-pyro-terminal-root]::-webkit-scrollbar-thumb,
+[data-pyro-terminal-root]::-webkit-scrollbar-track-piece,
+[data-pyro-terminal-root]::-webkit-scrollbar-corner {
+  display: none;
+}
+
+.screen-fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 50;
+  background: var(--color-bg);
+}
+
+@keyframes scaleUp {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.scale-fullscreen {
+  animation: scaleUp 190ms forwards;
+}
+
+.progressive-gradient {
+  background: linear-gradient(
+    to top,
+    color-mix(in srgb, var(--color-bg), transparent var(--transparency)) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+}
+
+html.dark-mode .progressive-gradient {
+  background: linear-gradient(
+    to top,
+    color-mix(in srgb, black, transparent var(--transparency)) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+}
+
+.scroll-to-bottom-enter-active,
+.scroll-to-bottom-leave-active {
+  transition:
+    opacity 300ms ease,
+    transform 300ms ease;
+}
+
+.scroll-to-bottom-enter-from,
+.scroll-to-bottom-leave-to {
+  opacity: 0;
+  transform: scale(0.4) translateY(2rem);
+}
+
+[data-pyro-terminal-selected="true"] {
+  border-radius: 0;
+}
+
+[data-pyro-terminal-selected="true"].first-selected {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+  overflow: hidden !important;
+}
+
+[data-pyro-terminal-selected="true"].last-selected {
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+  overflow: hidden !important;
+}
+
+[data-pyro-terminal-root] {
+  will-change: transform;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+  -webkit-font-smoothing: subpixel-antialiased;
+}
+
+[data-pyro-terminal-root] {
+  user-select: none;
+}
+
+[data-pyro-terminal-root] * {
+  user-select: text;
+}
+
+.selection-in-progress {
+  pointer-events: none;
+}
+</style>
diff --git a/apps/frontend/src/components/ui/servers/PanelTerminalFullscreen.vue b/apps/frontend/src/components/ui/servers/PanelTerminalFullscreen.vue
new file mode 100644
index 000000000..c908aeabc
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/PanelTerminalFullscreen.vue
@@ -0,0 +1,19 @@
+<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="size-5"
+  >
+    <path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8" />
+    <path d="M3 16.2V21m0 0h4.8M3 21l6-6" />
+    <path d="M21 7.8V3m0 0h-4.8M21 3l-6 6" />
+    <path d="M3 7.8V3m0 0h4.8M3 3l6 6" />
+  </svg>
+</template>
diff --git a/apps/frontend/src/components/ui/servers/PanelTerminalMinimize.vue b/apps/frontend/src/components/ui/servers/PanelTerminalMinimize.vue
new file mode 100644
index 000000000..109f532f9
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/PanelTerminalMinimize.vue
@@ -0,0 +1,19 @@
+<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="size-5"
+  >
+    <path d="m15 15 6 6m-6-6v4.8m0-4.8h4.8" />
+    <path d="M9 19.8V15m0 0H4.2M9 15l-6 6" />
+    <path d="M15 4.2V9m0 0h4.8M15 9l6-6" />
+    <path d="M9 4.2V9m0 0H4.2M9 9 3 3" />
+  </svg>
+</template>
diff --git a/apps/frontend/src/components/ui/servers/PoweredByPyro.vue b/apps/frontend/src/components/ui/servers/PoweredByPyro.vue
new file mode 100644
index 000000000..f6c54fa3c
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/PoweredByPyro.vue
@@ -0,0 +1,14 @@
+<template>
+  <a
+    href="https://pyro.host"
+    target="_blank"
+    class="mx-auto mt-8 flex select-none flex-row items-center gap-2 hover:underline"
+  >
+    <PyroIcon class="size-4 text-secondary" />
+    <span class="text-sm text-secondary">Powered by Pyro</span>
+  </a>
+</template>
+
+<script setup lang="ts">
+import { PyroIcon } from "@modrinth/assets";
+</script>
diff --git a/apps/frontend/src/components/ui/servers/ProjectSelect.vue b/apps/frontend/src/components/ui/servers/ProjectSelect.vue
new file mode 100644
index 000000000..bdc2e2ebd
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/ProjectSelect.vue
@@ -0,0 +1,167 @@
+<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
new file mode 100644
index 000000000..3c72d239b
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/PyroLoading.vue
@@ -0,0 +1,94 @@
+<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
new file mode 100644
index 000000000..d2d9648cd
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/PyroModal.vue
@@ -0,0 +1,60 @@
+<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-button-bg'"
+    ></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
new file mode 100644
index 000000000..be754f733
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/SaveBanner.vue
@@ -0,0 +1,75 @@
+<template>
+  <Transition name="save-banner">
+    <div
+      v-if="props.isVisible"
+      data-pyro-save-banner
+      class="fixed bottom-16 left-0 right-0 z-[6] mx-auto h-fit w-full max-w-4xl transition-all duration-300 sm:bottom-8"
+    >
+      <div class="mx-2 rounded-2xl border-2 border-solid border-button-border bg-bg-raised p-4">
+        <div class="flex flex-col items-center justify-between gap-2 md:flex-row">
+          <span class="font-bold text-contrast">Careful, you have unsaved changes!</span>
+          <div class="flex gap-2">
+            <ButtonStyled type="transparent" color="standard">
+              <button :disabled="props.isUpdating" @click="props.reset">Reset</button>
+            </ButtonStyled>
+            <ButtonStyled type="standard" :color="props.restart ? 'standard' : 'brand'">
+              <button :disabled="props.isUpdating" @click="props.save">
+                {{ props.isUpdating ? "Saving..." : "Save" }}
+              </button>
+            </ButtonStyled>
+            <ButtonStyled v-if="props.restart" type="standard" color="brand">
+              <button :disabled="props.isUpdating" @click="saveAndRestart">
+                {{ props.isUpdating ? "Saving..." : "Save & restart" }}
+              </button>
+            </ButtonStyled>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { ButtonStyled } from "@modrinth/ui";
+import type { Server } from "~/composables/pyroServers";
+
+const props = defineProps<{
+  isUpdating: boolean;
+  restart?: boolean;
+  save: () => void;
+  reset: () => void;
+  isVisible: boolean;
+  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+}>();
+
+const saveAndRestart = async () => {
+  props.save();
+  await props.server.general?.power("Restart");
+};
+</script>
+
+<style scoped>
+.save-banner-enter-active {
+  transition:
+    opacity 300ms,
+    transform 300ms;
+}
+
+.save-banner-leave-active {
+  transition:
+    opacity 200ms,
+    transform 200ms;
+}
+
+.save-banner-enter-from,
+.save-banner-leave-to {
+  opacity: 0;
+  transform: translateY(100%) scale(0.98);
+}
+
+.save-banner-enter-to,
+.save-banner-leave-from {
+  opacity: 1;
+  transform: none;
+}
+</style>
diff --git a/apps/frontend/src/components/ui/servers/ServerGameLabel.vue b/apps/frontend/src/components/ui/servers/ServerGameLabel.vue
new file mode 100644
index 000000000..bef037812
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/ServerGameLabel.vue
@@ -0,0 +1,33 @@
+<template>
+  <div
+    v-if="game"
+    v-tooltip="'Change server version'"
+    class="min-w-0 flex-none flex-row items-center gap-2 first:!flex"
+  >
+    <GameIcon aria-hidden="true" class="size-5 shrink-0" />
+    <NuxtLink
+      v-if="isLink"
+      :to="serverId ? `/servers/manage/${serverId}/options/loader` : ''"
+      class="min-w-0 truncate text-sm font-semibold"
+      :class="serverId ? 'hover:underline' : ''"
+    >
+      {{ game[0].toUpperCase() + game.slice(1) }} {{ mcVersion }}
+    </NuxtLink>
+    <div v-else class="min-w-0 truncate text-sm font-semibold">
+      {{ game[0].toUpperCase() + game.slice(1) }} {{ mcVersion }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { GameIcon } from "@modrinth/assets";
+
+defineProps<{
+  game: string;
+  mcVersion: string;
+  isLink?: boolean;
+}>();
+
+const route = useNativeRoute();
+const serverId = route.params.id as string;
+</script>
diff --git a/apps/frontend/src/components/ui/servers/ServerIcon.vue b/apps/frontend/src/components/ui/servers/ServerIcon.vue
new file mode 100644
index 000000000..9e8d00b29
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/ServerIcon.vue
@@ -0,0 +1,26 @@
+<template>
+  <div
+    class="experimental-styles-within flex size-24 shrink-0 overflow-hidden rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
+  >
+    <client-only>
+      <img
+        v-if="image"
+        class="h-full w-full select-none object-fill"
+        alt="Server Icon"
+        :src="image"
+      />
+      <img
+        v-else
+        class="h-full w-full select-none object-fill"
+        alt="Server Icon"
+        src="~/assets/images/servers/minecraft_server_icon.png"
+      />
+    </client-only>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  image: string | undefined;
+}>();
+</script>
diff --git a/apps/frontend/src/components/ui/servers/ServerInfoLabels.vue b/apps/frontend/src/components/ui/servers/ServerInfoLabels.vue
new file mode 100644
index 000000000..a23430e78
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/ServerInfoLabels.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <UiServersServerGameLabel
+      v-if="showGameLabel"
+      :game="serverData.game!"
+      :mc-version="serverData.mc_version ?? ''"
+      :is-link="linked"
+    />
+    <UiServersServerLoaderLabel
+      v-if="showLoaderLabel"
+      :loader="serverData.loader!"
+      :loader-version="serverData.loader_version ?? ''"
+      :no-separator="column"
+      :is-link="linked"
+    />
+    <UiServersServerSubdomainLabel
+      v-if="serverData.net.domain"
+      :subdomain="serverData.net.domain"
+      :no-separator="column"
+      :is-link="linked"
+    />
+    <UiServersServerUptimeLabel
+      v-if="uptimeSeconds"
+      :uptime-seconds="uptimeSeconds"
+      :no-separator="column"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+interface ServerInfoLabelsProps {
+  serverData: Record<string, any>;
+  showGameLabel: boolean;
+  showLoaderLabel: boolean;
+  uptimeSeconds?: number;
+  column?: boolean;
+  linked?: boolean;
+}
+
+defineProps<ServerInfoLabelsProps>();
+</script>
diff --git a/apps/frontend/src/components/ui/servers/ServerListing.vue b/apps/frontend/src/components/ui/servers/ServerListing.vue
new file mode 100644
index 000000000..18be551ff
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/ServerListing.vue
@@ -0,0 +1,101 @@
+<template>
+  <NuxtLink class="contents" :to="`/servers/manage/${props.server_id}`">
+    <div
+      class="flex cursor-pointer flex-row items-center overflow-x-hidden rounded-3xl bg-bg-raised p-4 transition-transform duration-100 active:scale-95"
+      data-pyro-server-listing
+      :data-pyro-server-listing-id="server_id"
+    >
+      <UiServersServerIcon :image="image" />
+      <div class="ml-8 flex flex-col gap-2.5">
+        <div class="flex flex-row items-center gap-2">
+          <h2 class="m-0 text-xl font-bold text-contrast">{{ name }}</h2>
+          <ChevronRightIcon />
+        </div>
+
+        <div
+          v-if="projectData?.title"
+          class="m-0 flex flex-row items-center gap-2 text-sm font-medium text-secondary"
+        >
+          <UiAvatar
+            :src="iconUrl"
+            no-shadow
+            style="min-height: 20px; min-width: 20px; height: 20px; width: 20px"
+            alt="Server Icon"
+          />
+          Using {{ projectData?.title || "Unknown" }}
+        </div>
+        <div v-else class="min-h-[20px]"></div>
+
+        <UiServersServerInfoLabels
+          :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"
+        />
+      </div>
+    </div>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+import { ChevronRightIcon } from "@modrinth/assets";
+import type { Project, Server } from "~/types/servers";
+
+const props = defineProps<Partial<Server>>();
+
+const showGameLabel = computed(() => !!props.game);
+const showLoaderLabel = computed(() => !!props.loader);
+const showSubdomainLabel = computed(() => !!props.net?.domain);
+
+let projectData: Ref<Project | null>;
+if (props.upstream) {
+  const { data } = await useAsyncData<Project>(
+    `server-project-${props.server_id}`,
+    async (): Promise<Project> => {
+      const result = await useBaseFetch(`project/${props.upstream?.project_id}`);
+      return result as Project;
+    },
+  );
+  projectData = data;
+} else {
+  projectData = ref(null);
+}
+
+const image = ref<string | 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);
+    }
+  }
+});
+
+const iconUrl = computed(() => projectData.value?.icon_url || undefined);
+</script>
diff --git a/apps/frontend/src/components/ui/servers/ServerListingSkeleton.vue b/apps/frontend/src/components/ui/servers/ServerListingSkeleton.vue
new file mode 100644
index 000000000..8ebe506e1
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/ServerListingSkeleton.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="flex flex-row items-center gap-8 overflow-x-hidden rounded-3xl bg-bg-raised p-4">
+    <div class="relative grid place-content-center">
+      <img
+        no-shadow
+        size="lg"
+        alt="Server Icon"
+        class="size-[96px] rounded-xl bg-bg-raised opacity-50"
+        src="~/assets/images/servers/minecraft_server_icon.png"
+      />
+      <div class="absolute inset-0 grid place-content-center">
+        <UiServersIconsLoadingIcon class="size-8 animate-spin text-contrast" />
+      </div>
+    </div>
+    <div class="flex flex-col gap-4">
+      <h2 class="m-0 text-contrast">Your new server is being prepared.</h2>
+      <p class="m-0">It'll appear here once it's ready.</p>
+    </div>
+  </div>
+</template>
diff --git a/apps/frontend/src/components/ui/servers/ServerLoaderLabel.vue b/apps/frontend/src/components/ui/servers/ServerLoaderLabel.vue
new file mode 100644
index 000000000..13e8694f8
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/ServerLoaderLabel.vue
@@ -0,0 +1,35 @@
+<template>
+  <div
+    v-if="loader"
+    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" />
+      <NuxtLink
+        v-if="isLink"
+        :to="serverId ? `/servers/manage/${serverId}/options/loader` : ''"
+        class="min-w-0 text-sm font-semibold"
+        :class="serverId ? 'hover:underline' : ''"
+      >
+        {{ loader }} <span v-if="loaderVersion">{{ loaderVersion }}</span>
+      </NuxtLink>
+      <div v-else class="min-w-0 text-sm font-semibold">
+        {{ loader }} <span v-if="loaderVersion">{{ loaderVersion }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  noSeparator?: boolean;
+  loader: "Fabric" | "Quilt" | "Forge" | "NeoForge" | "Paper" | "Spigot" | "Bukkit" | "Vanilla";
+  loaderVersion: string;
+  isLink?: boolean;
+}>();
+
+const route = useNativeRoute();
+const serverId = route.params.id as string;
+</script>
diff --git a/apps/frontend/src/components/ui/servers/ServerManageEmptyState.vue b/apps/frontend/src/components/ui/servers/ServerManageEmptyState.vue
new file mode 100644
index 000000000..dd7cde956
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/ServerManageEmptyState.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="flex h-full flex-col items-center justify-center gap-8">
+    <img
+      src="https://cdn.modrinth.com/servers/excitement.webp"
+      alt=""
+      class="max-w-[360px]"
+      style="mask-image: radial-gradient(97% 77% at 50% 25%, #d9d9d9 0, hsla(0, 0%, 45%, 0) 100%)"
+    />
+    <h1 class="m-0 text-contrast">You don't have any servers yet!</h1>
+    <p class="m-0">Modrinth Servers is a new way to play modded Minecraft with your friends.</p>
+    <ButtonStyled size="large" type="standard" color="brand">
+      <NuxtLink to="/servers#plan">Create a Server</NuxtLink>
+    </ButtonStyled>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ButtonStyled } from "@modrinth/ui";
+</script>
diff --git a/apps/frontend/src/components/ui/servers/ServerSidebar.vue b/apps/frontend/src/components/ui/servers/ServerSidebar.vue
new file mode 100644
index 000000000..0c44c9767
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/ServerSidebar.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="static w-full grid-cols-1 md:relative md:flex">
+    <div class="static h-full flex-col pb-4 md:flex md:pb-0 md:pr-4">
+      <div class="z-10 flex select-none flex-col gap-2 rounded-2xl bg-bg-raised p-4 md:w-[16rem]">
+        <div v-for="link in navLinks" :key="link.label">
+          <NuxtLink
+            :to="link.href"
+            class="flex items-center gap-2 rounded-xl p-2 hover:bg-button-bg"
+            :class="{ 'bg-button-bg text-contrast': route.path === link.href }"
+          >
+            <div class="flex items-center gap-2 font-bold">
+              <component :is="link.icon" class="size-6" />
+              {{ link.label }}
+            </div>
+
+            <div class="flex-grow" />
+            <RightArrowIcon v-if="link.external" class="size-4" />
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+
+    <div class="h-full w-full">
+      <NuxtPage :route="props.route" :server="props.server" @reinstall="onReinstall" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RightArrowIcon } from "@modrinth/assets";
+import type { RouteLocationNormalized } from "vue-router";
+import type { Server } from "~/composables/pyroServers";
+
+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"]>;
+}>();
+
+const onReinstall = (...args: any[]) => {
+  emit("reinstall", ...args);
+};
+</script>
diff --git a/apps/frontend/src/components/ui/servers/ServerSkeleton.vue b/apps/frontend/src/components/ui/servers/ServerSkeleton.vue
new file mode 100644
index 000000000..7429de93b
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/ServerSkeleton.vue
@@ -0,0 +1,18 @@
+<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
new file mode 100644
index 000000000..85547442a
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/ServerStats.vue
@@ -0,0 +1,330 @@
+<template>
+  <div
+    data-pyro-server-stats
+    style="font-variant-numeric: tabular-nums"
+    class="flex select-none flex-col items-center gap-6 md:flex-row"
+  >
+    <div
+      v-for="(metric, index) in metrics"
+      :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>
+        <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>
+
+      <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"
+          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"
+        />
+      </ClientOnly>
+    </div>
+
+    <NuxtLink
+      :to="`/servers/manage/${serverId}/files`"
+      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 mt-1 text-3xl font-extrabold text-contrast">
+          {{ formatBytes(animatedStorageUsage) }}
+        </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>
+
+      <FolderOpenIcon class="absolute right-10 top-10 size-8" />
+    </NuxtLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+import { FolderOpenIcon, CPUIcon, DBIcon } from "@modrinth/assets";
+import { useStorage } from "@vueuse/core";
+import type { Stats } from "~/types/servers";
+import WarningIcon from "~/assets/images/utils/issues.svg?component";
+
+const route = useNativeRoute();
+const serverId = route.params.id;
+
+const userPreferences = useStorage(`pyro-server-${serverId}-preferences`, {
+  ramAsNumber: false,
+  autoRestart: false,
+  backupWhileRunning: false,
+});
+
+const VueApexCharts = defineAsyncComponent(() => import("vue3-apexcharts"));
+
+const props = defineProps({
+  data: {
+    type: Object as PropType<Stats>,
+    required: true,
+  },
+});
+
+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"];
+  let value = bytes;
+  let unitIndex = 0;
+
+  while (value >= 1024 && unitIndex < units.length - 2) {
+    value /= 1024;
+    unitIndex++;
+  }
+
+  return `${Math.round(value * 100) / 100} ${units[unitIndex]}`;
+};
+
+const animatedStorageUsage = ref(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);
+};
+
+onMounted(() => {
+  animateValue(0, props.data.current.storage_usage_bytes, 250);
+});
+
+watch(
+  () => props.data.current.storage_usage_bytes,
+  (newValue, oldValue) => {
+    animateValue(oldValue, newValue, 250);
+  },
+);
+
+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% {
+    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
new file mode 100644
index 000000000..ed7d17966
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/ServerSubdomainLabel.vue
@@ -0,0 +1,40 @@
+<template>
+  <div
+    v-if="subdomain"
+    v-tooltip="'Copy subdomain'"
+    class="flex min-w-0 flex-row items-center gap-4 truncate hover:cursor-pointer"
+  >
+    <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">
+      <LinkIcon class="flex size-5 shrink-0" />
+      <div
+        class="flex min-w-0 text-sm font-semibold"
+        :class="serverId ? 'hover:underline' : ''"
+        @click="copySubdomain"
+      >
+        {{ subdomain }}.modrinth.gg
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { LinkIcon } from "@modrinth/assets";
+const props = defineProps<{
+  subdomain: string;
+  noSeparator?: boolean;
+}>();
+
+const copySubdomain = () => {
+  navigator.clipboard.writeText(props.subdomain + ".modrinth.gg");
+  addNotification({
+    group: "servers",
+    title: "Subdomain copied",
+    text: "Your subdomain has been copied to your clipboard.",
+    type: "success",
+  });
+};
+
+const route = useNativeRoute();
+const serverId = computed(() => route.params.id as string);
+</script>
diff --git a/apps/frontend/src/components/ui/servers/ServerUptimeLabel.vue b/apps/frontend/src/components/ui/servers/ServerUptimeLabel.vue
new file mode 100644
index 000000000..e57075315
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/ServerUptimeLabel.vue
@@ -0,0 +1,65 @@
+<template>
+  <div
+    v-if="uptimeSeconds || uptimeSeconds !== 0"
+    v-tooltip="`Online for ${verboseUptime}`"
+    class="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" />
+      <time class="truncate text-sm font-semibold" :aria-label="verboseUptime">
+        {{ formattedUptime }}
+      </time>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{
+  uptimeSeconds: number;
+  noSeparator?: boolean;
+}>();
+
+const formattedUptime = computed(() => {
+  const days = Math.floor(props.uptimeSeconds / (24 * 3600));
+  const hours = Math.floor((props.uptimeSeconds % (24 * 3600)) / 3600);
+  const minutes = Math.floor((props.uptimeSeconds % 3600) / 60);
+  const seconds = props.uptimeSeconds % 60;
+
+  let formatted = "";
+  if (days > 0) {
+    formatted += `${days}d `;
+  }
+  if (hours > 0 || days > 0) {
+    formatted += `${hours}h `;
+  }
+  formatted += `${minutes}m ${seconds}s`;
+
+  return formatted.trim();
+});
+
+const verboseUptime = computed(() => {
+  const days = Math.floor(props.uptimeSeconds / (24 * 3600));
+  const hours = Math.floor((props.uptimeSeconds % (24 * 3600)) / 3600);
+  const minutes = Math.floor((props.uptimeSeconds % 3600) / 60);
+  const seconds = props.uptimeSeconds % 60;
+
+  let verbose = "";
+  if (days > 0) {
+    verbose += `${days} day${days > 1 ? "s" : ""} `;
+  }
+  if (hours > 0) {
+    verbose += `${hours} hour${hours > 1 ? "s" : ""} `;
+  }
+  if (minutes > 0) {
+    verbose += `${minutes} minute${minutes > 1 ? "s" : ""} `;
+  }
+  verbose += `${seconds} second${seconds > 1 ? "s" : ""}`;
+
+  return verbose.trim();
+});
+</script>
diff --git a/apps/frontend/src/components/ui/servers/TeleportDropdownMenu.vue b/apps/frontend/src/components/ui/servers/TeleportDropdownMenu.vue
new file mode 100644
index 000000000..2038179b0
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/TeleportDropdownMenu.vue
@@ -0,0 +1,444 @@
+<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"
+      :class="triggerClasses"
+      @click="toggleDropdown"
+    >
+      <span>{{ selectedOption }}</span>
+      <DropdownIcon
+        class="transition-transform duration-200 ease-in-out"
+        :class="{ 'rotate-180': dropdownVisible }"
+      />
+    </div>
+
+    <Teleport to="#teleports">
+      <transition
+        enter-active-class="transition-opacity duration-200 ease-out"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="transition-opacity duration-200 ease-in"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <div
+          v-if="dropdownVisible"
+          ref="optionsContainer"
+          data-pyro-dropdown-options
+          class="experimental-styles-within fixed z-50 bg-button-bg shadow-lg"
+          :class="{
+            'rounded-b-xl': !isRenderingUp,
+            'rounded-t-xl': isRenderingUp,
+          }"
+          :style="positionStyle"
+          @keydown.stop="handleDropdownKeyDown"
+        >
+          <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,
+                  transform: `translateY(${item.index * ITEM_HEIGHT}px)`,
+                  width: '100%',
+                  height: `${ITEM_HEIGHT}px`,
+                }"
+              >
+                <div
+                  :ref="(el) => handleOptionRef(el as HTMLElement, 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"
+                  :class="{
+                    'bg-brand font-bold text-brand-inverted': selectedValue === item.option,
+                    'bg-bg-raised': focusedOptionIndex === item.index,
+                  }"
+                  :aria-selected="selectedValue === item.option"
+                  @click="selectOption(item.option, item.index)"
+                  @mouseover="focusedOptionIndex = item.index"
+                  @focus="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>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DropdownIcon } from "@modrinth/assets";
+import { computed, ref, watch, onMounted, onUnmounted, nextTick } from "vue";
+import type { CSSProperties } from "vue";
+
+const ITEM_HEIGHT = 44;
+const BUFFER_ITEMS = 5;
+
+type OptionValue = string | number | Record<string, any>;
+
+interface Props {
+  options: OptionValue[];
+  name: string;
+  defaultValue?: OptionValue | null;
+  placeholder?: string | number | null;
+  modelValue?: OptionValue | null;
+  renderUp?: boolean;
+  disabled?: boolean;
+  displayName?: (option: OptionValue) => string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultValue: null,
+  placeholder: null,
+  modelValue: null,
+  renderUp: false,
+  disabled: false,
+  displayName: (option: OptionValue) => String(option),
+});
+
+const emit = defineEmits<{
+  (e: "input", value: OptionValue): void;
+  (e: "change", value: { option: OptionValue; index: number }): void;
+  (e: "update:modelValue", value: OptionValue): void;
+}>();
+
+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 positionStyle = ref<CSSProperties>({
+  position: "fixed",
+  top: "0px",
+  left: "0px",
+  width: "0px",
+  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(() => {
+  const startIndex = Math.floor(scrollTop.value / ITEM_HEIGHT) - BUFFER_ITEMS;
+  const visibleCount = Math.ceil(virtualListHeight.value / ITEM_HEIGHT) + 2 * BUFFER_ITEMS;
+
+  return Array.from({ length: visibleCount }, (_, i) => {
+    const index = startIndex + i;
+    if (index >= 0 && index < props.options.length) {
+      return {
+        index,
+        option: props.options[index],
+      };
+    }
+    return null;
+  }).filter((item): item is { index: number; option: OptionValue } => item !== null);
+});
+
+const selectedOption = computed(() => {
+  if (selectedValue.value !== null && selectedValue.value !== undefined) {
+    return props.displayName(selectedValue.value as OptionValue);
+  }
+  return props.placeholder || "Select an option";
+});
+
+const radioValue = computed<OptionValue>({
+  get() {
+    return props.modelValue ?? selectedValue.value ?? "";
+  },
+  set(newValue: OptionValue) {
+    emit("update:modelValue", newValue);
+    selectedValue.value = newValue;
+  },
+});
+
+const triggerClasses = computed(() => ({
+  "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;
+
+  await nextTick();
+  const triggerRect = dropdown.value.getBoundingClientRect();
+  const viewportHeight = window.innerHeight;
+  const margin = 8;
+
+  const contentHeight = props.options.length * ITEM_HEIGHT;
+  const preferredHeight = Math.min(contentHeight, 300);
+
+  const spaceBelow = viewportHeight - triggerRect.bottom;
+  const spaceAbove = triggerRect.top;
+
+  isRenderingUp.value = spaceBelow < preferredHeight && spaceAbove > spaceBelow;
+
+  virtualListHeight.value = isRenderingUp.value
+    ? Math.min(spaceAbove - margin, preferredHeight)
+    : Math.min(spaceBelow - margin, preferredHeight);
+
+  positionStyle.value = {
+    position: "fixed",
+    left: `${triggerRect.left}px`,
+    width: `${triggerRect.width}px`,
+    zIndex: 999,
+    ...(isRenderingUp.value
+      ? { bottom: `${viewportHeight - triggerRect.top}px`, top: "auto" }
+      : { top: `${triggerRect.bottom}px`, bottom: "auto" }),
+  };
+};
+
+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) {
+      closeDropdown();
+    } else {
+      openDropdown();
+    }
+  }
+};
+
+const handleResize = () => {
+  if (dropdownVisible.value) {
+    requestAnimationFrame(() => {
+      updatePosition();
+    });
+  }
+};
+
+const handleScroll = (event: Event) => {
+  const target = event.target as HTMLElement;
+  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);
+};
+
+const selectOption = (option: OptionValue, index: number) => {
+  radioValue.value = option;
+  emit("change", { option, index });
+  closeDropdown();
+};
+
+const focusNextOption = () => {
+  if (focusedOptionIndex.value === null) {
+    focusedOptionIndex.value = 0;
+  } else {
+    focusedOptionIndex.value = (focusedOptionIndex.value + 1) % props.options.length;
+  }
+  scrollToFocused();
+  nextTick(() => {
+    focusedOptionRef.value?.focus();
+  });
+};
+
+const focusPreviousOption = () => {
+  if (focusedOptionIndex.value === null) {
+    focusedOptionIndex.value = props.options.length - 1;
+  } else {
+    focusedOptionIndex.value =
+      (focusedOptionIndex.value - 1 + props.options.length) % props.options.length;
+  }
+  scrollToFocused();
+  nextTick(() => {
+    focusedOptionRef.value?.focus();
+  });
+};
+
+const scrollToFocused = () => {
+  if (focusedOptionIndex.value === null) return;
+
+  const optionsElement = optionsContainer.value?.querySelector(".overflow-y-auto");
+  if (!optionsElement) return;
+
+  const targetScrollTop = focusedOptionIndex.value * ITEM_HEIGHT;
+  const scrollBottom = optionsElement.clientHeight;
+
+  if (targetScrollTop < optionsElement.scrollTop) {
+    optionsElement.scrollTop = targetScrollTop;
+  } else if (targetScrollTop + ITEM_HEIGHT > optionsElement.scrollTop + scrollBottom) {
+    optionsElement.scrollTop = targetScrollTop - scrollBottom + ITEM_HEIGHT;
+  }
+};
+
+onMounted(() => {
+  window.addEventListener("resize", handleResize);
+  window.addEventListener("scroll", handleResize, true);
+  window.addEventListener("click", (event) => {
+    if (!isChildOfDropdown(event.target as HTMLElement)) {
+      closeDropdown();
+    }
+  });
+  window.addEventListener("close-all-dropdowns", closeDropdown);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", handleResize);
+  window.removeEventListener("scroll", handleResize, true);
+  window.removeEventListener("click", (event) => {
+    if (!isChildOfDropdown(event.target as HTMLElement)) {
+      closeDropdown();
+    }
+  });
+  window.removeEventListener("close-all-dropdowns", closeDropdown);
+  lastFocusedElement.value = null;
+});
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    selectedValue.value = newValue;
+  },
+);
+
+watch(dropdownVisible, async (newValue) => {
+  if (newValue) {
+    await updatePosition();
+    scrollTop.value = 0;
+  }
+});
+</script>
diff --git a/apps/frontend/src/components/ui/servers/TeleportOverflowMenu.vue b/apps/frontend/src/components/ui/servers/TeleportOverflowMenu.vue
new file mode 100644
index 000000000..8b808ec39
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/TeleportOverflowMenu.vue
@@ -0,0 +1,433 @@
+<template>
+  <div data-pyro-telepopover-wrapper class="relative">
+    <button
+      ref="triggerRef"
+      class="teleport-overflow-menu-trigger"
+      :aria-expanded="isOpen"
+      :aria-haspopup="true"
+      @mousedown="handleMouseDown"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="handleMouseLeave"
+      @click="toggleMenu"
+    >
+      <slot></slot>
+    </button>
+    <Teleport to="#teleports">
+      <Transition
+        enter-active-class="transition duration-125 ease-out"
+        enter-from-class="transform scale-75 opacity-0"
+        enter-to-class="transform scale-100 opacity-100"
+        leave-active-class="transition duration-125 ease-in"
+        leave-from-class="transform scale-100 opacity-100"
+        leave-to-class="transform scale-75 opacity-0"
+      >
+        <div
+          v-if="isOpen"
+          ref="menuRef"
+          data-pyro-telepopover-root
+          class="experimental-styles-within fixed isolate z-[9999] flex w-fit flex-col gap-2 overflow-hidden rounded-2xl border-[1px] border-solid border-button-bg bg-bg-raised p-2 shadow-lg"
+          :style="menuStyle"
+          role="menu"
+          tabindex="-1"
+          @mousedown.stop
+          @mouseleave="handleMouseLeave"
+        >
+          <ButtonStyled
+            v-for="(option, index) in filteredOptions"
+            :key="option.id"
+            type="transparent"
+            role="menuitem"
+            :color="option.color"
+          >
+            <button
+              v-if="typeof option.action === 'function'"
+              :ref="
+                (el) => {
+                  if (el) menuItemsRef[index] = el as HTMLElement;
+                }
+              "
+              class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
+              :aria-selected="index === selectedIndex"
+              :style="index === selectedIndex ? { background: 'var(--color-button-bg)' } : {}"
+              @click="handleItemClick(option, index)"
+              @focus="selectedIndex = index"
+              @mouseover="handleMouseOver(index)"
+            >
+              <slot :name="option.id">{{ option.id }}</slot>
+            </button>
+            <nuxt-link
+              v-else-if="typeof option.action === 'string' && option.action.startsWith('/')"
+              :ref="
+                (el) => {
+                  if (el) menuItemsRef[index] = el as HTMLElement;
+                }
+              "
+              :to="option.action"
+              class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
+              :aria-selected="index === selectedIndex"
+              :style="index === selectedIndex ? { background: 'var(--color-button-bg)' } : {}"
+              @click="handleItemClick(option, index)"
+              @focus="selectedIndex = index"
+              @mouseover="handleMouseOver(index)"
+            >
+              <slot :name="option.id">{{ option.id }}</slot>
+            </nuxt-link>
+            <a
+              v-else-if="typeof option.action === 'string' && !option.action.startsWith('http')"
+              :ref="
+                (el) => {
+                  if (el) menuItemsRef[index] = el as HTMLElement;
+                }
+              "
+              :href="option.action"
+              target="_blank"
+              class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
+              :aria-selected="index === selectedIndex"
+              :style="index === selectedIndex ? { background: 'var(--color-button-bg)' } : {}"
+              @click="handleItemClick(option, index)"
+              @focus="selectedIndex = index"
+              @mouseover="handleMouseOver(index)"
+            >
+              <slot :name="option.id">{{ option.id }}</slot>
+            </a>
+            <span v-else>
+              <slot :name="option.id">{{ option.id }}</slot>
+            </span>
+          </ButtonStyled>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ButtonStyled } from "@modrinth/ui";
+import { ref, onMounted, onUnmounted, watch, nextTick, computed } from "vue";
+import { onClickOutside, useElementHover } from "@vueuse/core";
+
+interface Option {
+  id: string;
+  action?: (() => void) | string;
+  shown?: boolean;
+  color?: "standard" | "brand" | "red" | "orange" | "green" | "blue" | "purple";
+}
+
+const props = withDefaults(
+  defineProps<{
+    options: Option[];
+    hoverable?: boolean;
+  }>(),
+  {
+    hoverable: false,
+  },
+);
+
+const emit = defineEmits<{
+  (e: "select", option: Option): void;
+}>();
+
+const isOpen = ref(false);
+const selectedIndex = ref(-1);
+const menuRef = ref<HTMLElement | null>(null);
+const triggerRef = ref<HTMLElement | null>(null);
+const isMouseDown = ref(false);
+const typeAheadBuffer = ref("");
+const typeAheadTimeout = ref<number | null>(null);
+const menuItemsRef = ref<HTMLElement[]>([]);
+
+const hoveringTrigger = useElementHover(triggerRef);
+const hoveringMenu = useElementHover(menuRef);
+
+const hovering = computed(() => hoveringTrigger.value || hoveringMenu.value);
+
+const menuStyle = ref({
+  top: "0px",
+  left: "0px",
+});
+
+const filteredOptions = computed(() => props.options.filter((option) => option.shown !== false));
+
+const calculateMenuPosition = () => {
+  if (!triggerRef.value || !menuRef.value) return { top: "0px", left: "0px" };
+
+  const triggerRect = triggerRef.value.getBoundingClientRect();
+  const menuRect = menuRef.value.getBoundingClientRect();
+  const menuWidth = menuRect.width;
+  const menuHeight = menuRect.height;
+  const margin = 8;
+
+  let top: number;
+  let left: number;
+
+  // okay gang lets calculate this shit
+  // from the top now yall
+  // y
+  if (triggerRect.bottom + menuHeight + margin <= window.innerHeight) {
+    top = triggerRect.bottom + margin;
+  } else if (triggerRect.top - menuHeight - margin >= 0) {
+    top = triggerRect.top - menuHeight - margin;
+  } else {
+    top = Math.max(margin, window.innerHeight - menuHeight - margin);
+  }
+
+  // x
+  if (triggerRect.left + menuWidth + margin <= window.innerWidth) {
+    left = triggerRect.left;
+  } else if (triggerRect.right - menuWidth - margin >= 0) {
+    left = triggerRect.right - menuWidth;
+  } else {
+    left = Math.max(margin, window.innerWidth - menuWidth - margin);
+  }
+
+  return {
+    top: `${top}px`,
+    left: `${left}px`,
+  };
+};
+
+const toggleMenu = (event: MouseEvent) => {
+  event.stopPropagation();
+  if (!props.hoverable) {
+    if (isOpen.value) {
+      closeMenu();
+    } else {
+      openMenu();
+    }
+  }
+};
+
+const openMenu = () => {
+  isOpen.value = true;
+  disableBodyScroll();
+  nextTick(() => {
+    menuStyle.value = calculateMenuPosition();
+    document.addEventListener("mousemove", handleMouseMove);
+    focusFirstMenuItem();
+  });
+};
+
+const closeMenu = () => {
+  isOpen.value = false;
+  selectedIndex.value = -1;
+  enableBodyScroll();
+  document.removeEventListener("mousemove", handleMouseMove);
+};
+
+const selectOption = (option: Option) => {
+  emit("select", option);
+  if (typeof option.action === "function") {
+    option.action();
+  }
+  closeMenu();
+};
+
+const handleMouseDown = (event: MouseEvent) => {
+  event.preventDefault();
+  isMouseDown.value = true;
+};
+
+const handleMouseEnter = () => {
+  if (props.hoverable) {
+    openMenu();
+  }
+};
+
+const handleMouseLeave = () => {
+  if (props.hoverable) {
+    setTimeout(() => {
+      if (!hovering.value) {
+        closeMenu();
+      }
+    }, 250);
+  }
+};
+
+const handleMouseMove = (event: MouseEvent) => {
+  if (!isOpen.value || !isMouseDown.value) return;
+
+  const menuRect = menuRef.value?.getBoundingClientRect();
+  if (!menuRect) return;
+
+  const menuItems = menuRef.value?.querySelectorAll('[role="menuitem"]');
+  if (!menuItems) return;
+
+  for (let i = 0; i < menuItems.length; i++) {
+    const itemRect = (menuItems[i] as HTMLElement).getBoundingClientRect();
+    if (
+      event.clientX >= itemRect.left &&
+      event.clientX <= itemRect.right &&
+      event.clientY >= itemRect.top &&
+      event.clientY <= itemRect.bottom
+    ) {
+      selectedIndex.value = i;
+      break;
+    }
+  }
+};
+
+const handleItemClick = (option: Option, index: number) => {
+  selectedIndex.value = index;
+  selectOption(option);
+};
+
+const handleMouseOver = (index: number) => {
+  selectedIndex.value = index;
+  menuItemsRef.value[selectedIndex.value].focus();
+};
+
+// Scrolling is disabled for keyboard navigation
+const disableBodyScroll = () => {
+  // Make opening not shift page when there's a vertical scrollbar
+  const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+  if (scrollBarWidth > 0) {
+    document.body.style.paddingRight = `${scrollBarWidth}px`;
+  } else {
+    document.body.style.paddingRight = "";
+  }
+
+  document.body.style.overflow = "hidden";
+};
+
+const enableBodyScroll = () => {
+  document.body.style.paddingRight = "";
+  document.body.style.overflow = "";
+};
+
+const focusFirstMenuItem = () => {
+  if (menuItemsRef.value.length > 0) {
+    menuItemsRef.value[0].focus();
+  }
+};
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (!isOpen.value) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      openMenu();
+    }
+    return;
+  }
+
+  switch (event.key) {
+    case "ArrowDown":
+      event.preventDefault();
+      selectedIndex.value = (selectedIndex.value + 1) % filteredOptions.value.length;
+      menuItemsRef.value[selectedIndex.value].focus();
+      break;
+    case "ArrowUp":
+      event.preventDefault();
+      selectedIndex.value =
+        (selectedIndex.value - 1 + filteredOptions.value.length) % filteredOptions.value.length;
+      menuItemsRef.value[selectedIndex.value].focus();
+      break;
+    case "Home":
+      event.preventDefault();
+      if (menuItemsRef.value.length > 0) {
+        selectedIndex.value = 0;
+        menuItemsRef.value[selectedIndex.value].focus();
+      }
+      break;
+    case "End":
+      event.preventDefault();
+      if (menuItemsRef.value.length > 0) {
+        selectedIndex.value = filteredOptions.value.length - 1;
+        menuItemsRef.value[selectedIndex.value].focus();
+      }
+      break;
+    case "Enter":
+    case " ":
+      event.preventDefault();
+      if (selectedIndex.value >= 0) {
+        selectOption(filteredOptions.value[selectedIndex.value]);
+      }
+      break;
+    case "Escape":
+      event.preventDefault();
+      closeMenu();
+      triggerRef.value?.focus();
+      break;
+    case "Tab":
+      event.preventDefault();
+      if (menuItemsRef.value.length > 0) {
+        if (event.shiftKey) {
+          selectedIndex.value =
+            (selectedIndex.value - 1 + filteredOptions.value.length) % filteredOptions.value.length;
+        } else {
+          selectedIndex.value = (selectedIndex.value + 1) % filteredOptions.value.length;
+        }
+        menuItemsRef.value[selectedIndex.value].focus();
+      }
+      break;
+    default:
+      if (event.key.length === 1) {
+        typeAheadBuffer.value += event.key.toLowerCase();
+        const matchIndex = filteredOptions.value.findIndex((option) =>
+          option.id.toLowerCase().startsWith(typeAheadBuffer.value),
+        );
+        if (matchIndex !== -1) {
+          selectedIndex.value = matchIndex;
+          menuItemsRef.value[selectedIndex.value].focus();
+        }
+        if (typeAheadTimeout.value) {
+          clearTimeout(typeAheadTimeout.value);
+        }
+        typeAheadTimeout.value = setTimeout(() => {
+          typeAheadBuffer.value = "";
+        }, 1000) as unknown as number;
+      }
+      break;
+  }
+};
+
+const handleResizeOrScroll = () => {
+  if (isOpen.value) {
+    menuStyle.value = calculateMenuPosition();
+  }
+};
+
+const throttle = (func: (...args: any[]) => void, limit: number): ((...args: any[]) => void) => {
+  let inThrottle: boolean;
+  return function (...args: any[]) {
+    if (!inThrottle) {
+      func(...args);
+      inThrottle = true;
+      setTimeout(() => (inThrottle = false), limit);
+    }
+  };
+};
+
+const throttledHandleResizeOrScroll = throttle(handleResizeOrScroll, 100);
+
+onMounted(() => {
+  triggerRef.value?.addEventListener("keydown", handleKeydown);
+  window.addEventListener("resize", throttledHandleResizeOrScroll);
+  window.addEventListener("scroll", throttledHandleResizeOrScroll);
+});
+
+onUnmounted(() => {
+  triggerRef.value?.removeEventListener("keydown", handleKeydown);
+  window.removeEventListener("resize", throttledHandleResizeOrScroll);
+  window.removeEventListener("scroll", throttledHandleResizeOrScroll);
+  document.removeEventListener("mousemove", handleMouseMove);
+  if (typeAheadTimeout.value) {
+    clearTimeout(typeAheadTimeout.value);
+  }
+  enableBodyScroll();
+});
+
+watch(isOpen, (newValue) => {
+  if (newValue) {
+    nextTick(() => {
+      menuRef.value?.addEventListener("keydown", handleKeydown);
+    });
+  } else {
+    menuRef.value?.removeEventListener("keydown", handleKeydown);
+  }
+});
+
+onClickOutside(menuRef, (event) => {
+  if (!triggerRef.value?.contains(event.target as Node)) {
+    closeMenu();
+  }
+});
+</script>
diff --git a/apps/frontend/src/components/ui/servers/Timer.vue b/apps/frontend/src/components/ui/servers/Timer.vue
new file mode 100644
index 000000000..0de5f7a95
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/Timer.vue
@@ -0,0 +1,17 @@
+<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"
+  >
+    <line x1="10" x2="14" y1="2" y2="2" />
+    <line x1="12" x2="15" y1="14" y2="11" />
+    <circle cx="12" cy="14" r="8" />
+  </svg>
+</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/CodeFileIcon.vue b/apps/frontend/src/components/ui/servers/icons/CodeFileIcon.vue
new file mode 100644
index 000000000..6f7f60003
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/icons/CodeFileIcon.vue
@@ -0,0 +1,18 @@
+<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"
+  >
+    <path d="M10 12.5 8 15l2 2.5" />
+    <path d="m14 12.5 2 2.5-2 2.5" />
+    <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" />
+  </svg>
+</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/CogFolderIcon.vue b/apps/frontend/src/components/ui/servers/icons/CogFolderIcon.vue
new file mode 100644
index 000000000..f3e65a3fb
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/icons/CogFolderIcon.vue
@@ -0,0 +1,26 @@
+<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"
+  >
+    <circle cx="18" cy="18" r="3" />
+    <path
+      d="M10.3 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v3.3"
+    />
+    <path d="m21.7 19.4-.9-.3" />
+    <path d="m15.2 16.9-.9-.3" />
+    <path d="m16.6 21.7.3-.9" />
+    <path d="m19.1 15.2.3-.9" />
+    <path d="m19.6 21.7-.4-1" />
+    <path d="m16.8 15.3-.4-1" />
+    <path d="m14.3 19.6 1-.4" />
+    <path d="m20.7 16.8 1-.4" />
+  </svg>
+</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/EarthIcon.vue b/apps/frontend/src/components/ui/servers/icons/EarthIcon.vue
new file mode 100644
index 000000000..3e617ec8f
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/icons/EarthIcon.vue
@@ -0,0 +1,20 @@
+<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"
+  >
+    <path d="M21.54 15H17a2 2 0 0 0-2 2v4.54" />
+    <path
+      d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17"
+    />
+    <path d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05" />
+    <circle cx="12" cy="12" r="10" />
+  </svg>
+</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/ImageFileIcon.vue b/apps/frontend/src/components/ui/servers/icons/ImageFileIcon.vue
new file mode 100644
index 000000000..e7287ebf8
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/icons/ImageFileIcon.vue
@@ -0,0 +1,18 @@
+<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"
+  >
+    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+    <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+    <circle cx="10" cy="12" r="2" />
+    <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22" />
+  </svg>
+</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue b/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue
new file mode 100644
index 000000000..8647d9cd1
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue
@@ -0,0 +1,172 @@
+<template>
+  <svg
+    v-if="loader === 'Fabric'"
+    xmlns="http://www.w3.org/2000/svg"
+    xml:space="preserve"
+    fill-rule="evenodd"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    clip-rule="evenodd"
+    viewBox="0 0 24 24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-width="23"
+      d="m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8"
+      transform="matrix(.08671 0 0 .0867 -49.8 -56)"
+    />
+  </svg>
+  <svg
+    v-else-if="loader === 'Quilt'"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xml:space="preserve"
+    fill-rule="evenodd"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-miterlimit="2"
+    clip-rule="evenodd"
+    viewBox="0 0 24 24"
+  >
+    <defs>
+      <path
+        id="quilt"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="65.6"
+        d="M442.5 233.9c0-6.4-5.2-11.6-11.6-11.6h-197c-6.4 0-11.6 5.2-11.6 11.6v197c0 6.4 5.2 11.6 11.6 11.6h197c6.4 0 11.6-5.2 11.6-11.7v-197Z"
+      ></path>
+    </defs>
+    <path fill="none" d="M0 0h24v24H0z"></path>
+    <use
+      xlink:href="#quilt"
+      stroke-width="65.6"
+      transform="matrix(.03053 0 0 .03046 -3.2 -3.2)"
+    ></use>
+    <use xlink:href="#quilt" stroke-width="65.6" transform="matrix(.03053 0 0 .03046 -3.2 7)"></use>
+    <use
+      xlink:href="#quilt"
+      stroke-width="65.6"
+      transform="matrix(.03053 0 0 .03046 6.9 -3.2)"
+    ></use>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-width="70.4"
+      d="M442.5 234.8c0-7-5.6-12.5-12.5-12.5H234.7c-6.8 0-12.4 5.6-12.4 12.5V430c0 6.9 5.6 12.5 12.4 12.5H430c6.9 0 12.5-5.6 12.5-12.5V234.8Z"
+      transform="rotate(45 3.5 24) scale(.02843 .02835)"
+    ></path>
+  </svg>
+  <svg
+    v-else-if="loader === 'Forge'"
+    ml:space="preserve"
+    fill-rule="evenodd"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-miterlimit="1.5"
+    clip-rule="evenodd"
+    viewBox="0 0 24 24"
+  >
+    <path fill="none" d="M0 0h24v24H0z"></path>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      d="M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z"
+    ></path>
+  </svg>
+  <svg
+    v-else-if="loader === 'NeoForge'"
+    enable-background="new 0 0 24 24"
+    version="1.1"
+    viewBox="0 0 24 24"
+    xml:space="preserve"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+    >
+      <path d="m12 19.2v2m0-2v2" />
+      <path
+        d="m8.4 1.3c0.5 1.5 0.7 3 0.1 4.6-0.2 0.5-0.9 1.5-1.6 1.5m8.7-6.1c-0.5 1.5-0.7 3-0.1 4.6 0.2 0.6 0.9 1.5 1.6 1.5"
+      />
+      <path d="m3.6 15.8h-1.7m18.5 0h1.7" />
+      <path d="m3.2 12.1h-1.7m19.3 0h1.8" />
+      <path d="m8.1 12.7v1.6m7.8-1.6v1.6" />
+      <path d="m10.8 18h1.2m0 1.2-1.2-1.2m2.4 0h-1.2m0 1.2 1.2-1.2" />
+      <path
+        d="m4 9.7c-0.5 1.2-0.8 2.4-0.8 3.7 0 3.1 2.9 6.3 5.3 8.2 0.9 0.7 2.2 1.1 3.4 1.1m0.1-17.8c-1.1 0-2.1 0.2-3.2 0.7m11.2 4.1c0.5 1.2 0.8 2.4 0.8 3.7 0 3.1-2.9 6.3-5.3 8.2-0.9 0.7-2.2 1.1-3.4 1.1m-0.1-17.8c1.1 0 2.1 0.2 3.2 0.7"
+      />
+      <path
+        d="m4 9.7c-0.2-1.8-0.3-3.7 0.5-5.5s2.2-2.6 3.9-3m11.6 8.5c0.2-1.9 0.3-3.7-0.5-5.5s-2.2-2.6-3.9-3"
+      />
+      <path d="m12 21.2-2.4 0.4m2.4-0.4 2.4 0.4" />
+    </g>
+  </svg>
+  <svg
+    v-else-if="loader === 'Paper'"
+    xml:space="preserve"
+    fill-rule="evenodd"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-miterlimit="1.5"
+    clip-rule="evenodd"
+    viewBox="0 0 24 24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path fill="none" stroke="currentColor" stroke-width="2" d="m12 18 6 2 3-17L2 14l6 2" />
+    <path stroke="currentColor" stroke-width="2" d="m9 21-1-5 4 2-3 3Z" />
+    <path fill="currentColor" d="m12 18-4-2 10-9-6 11Z" />
+  </svg>
+  <svg
+    v-else-if="loader === 'Spigot'"
+    viewBox="0 0 332 284"
+    style="
+      fill-rule: evenodd;
+      clip-rule: evenodd;
+      stroke-linejoin: round;
+      fill: none;
+      fill-rule: nonzero;
+      stroke-width: 24px;
+    "
+    stroke="currentColor"
+  >
+    <path
+      d="M147.5,27l27,-15l27.5,15l66.5,0l0,33.5l-73,-0.912l0,45.5l26,-0.088l0,31.5l-12.5,0l0,15.5l16,21.5l35,0l0,-21.5l35.5,0l0,21.5l24.5,0l0,55.5l-24.5,0l0,17l-35.5,0l0,-27l-35,0l-55.5,14.5l-67.5,-14.5l-15,14.5l18,12.5l-3,24.5l-41.5,1.5l-48.5,-19.5l6,-19l24.5,-4.5l16,-41l79,-36l-7,-15.5l0,-31.5l23.5,0l0,-45.5l-73.5,0l0,-32.5l67,0Z"
+    />
+  </svg>
+  <svg
+    v-else-if="loader === 'Bukkit'"
+    viewBox="0 0 292 319"
+    style="fill-rule: evenodd; clip-rule: evenodd; stroke-linecap: round; stroke-linejoin: round"
+    stroke="currentColor"
+  >
+    <g transform="matrix(1,0,0,1,0,-5)">
+      <path
+        d="M12,109.5L12,155L34.5,224L57.5,224L57.5,271L81,294L160,294L160,172L259.087,172L265,155L265,109.5M12,109.5L12,64L34.5,64L34.5,41L81,17L195.5,17L241,41L241,64L265,64L265,109.5M12,109.5L81,109.5L81,132L195.5,132L195.5,109.5L265,109.5M264.087,204L264.087,244M207.5,272L207.5,312M250,272L250,312L280,312L280,272L250,272ZM192.5,204L192.5,244L222.5,244L222.5,204L192.5,204Z"
+        style="fill: none; fill-rule: nonzero; stroke-width: 24px"
+      />
+    </g>
+  </svg>
+  <svg v-else-if="loader === 'Vanilla'" viewBox="0 0 20 20" fill="currentColor">
+    <path
+      fill-rule="evenodd"
+      d="M9.504 1.132a1 1 0 01.992 0l1.75 1a1 1 0 11-.992 1.736L10 3.152l-1.254.716a1 1 0 11-.992-1.736l1.75-1zM5.618 4.504a1 1 0 01-.372 1.364L5.016 6l.23.132a1 1 0 11-.992 1.736L4 7.723V8a1 1 0 01-2 0V6a.996.996 0 01.52-.878l1.734-.99a1 1 0 011.364.372zm8.764 0a1 1 0 011.364-.372l1.733.99A1.002 1.002 0 0118 6v2a1 1 0 11-2 0v-.277l-.254.145a1 1 0 11-.992-1.736l.23-.132-.23-.132a1 1 0 01-.372-1.364zm-7 4a1 1 0 011.364-.372L10 8.848l1.254-.716a1 1 0 11.992 1.736L11 10.58V12a1 1 0 11-2 0v-1.42l-1.246-.712a1 1 0 01-.372-1.364zM3 11a1 1 0 011 1v1.42l1.246.712a1 1 0 11-.992 1.736l-1.75-1A1 1 0 012 14v-2a1 1 0 011-1zm14 0a1 1 0 011 1v2a1 1 0 01-.504.868l-1.75 1a1 1 0 11-.992-1.736L16 13.42V12a1 1 0 011-1zm-9.618 5.504a1 1 0 011.364-.372l.254.145V16a1 1 0 112 0v.277l.254-.145a1 1 0 11.992 1.736l-1.735.992a.995.995 0 01-1.022 0l-1.735-.992a1 1 0 01-.372-1.364z"
+      clip-rule="evenodd"
+    ></path>
+  </svg>
+  <LoaderIcon v-else />
+</template>
+
+<script setup lang="ts">
+import { LoaderIcon } from "@modrinth/assets";
+
+defineProps<{
+  loader: "Fabric" | "Quilt" | "Forge" | "NeoForge" | "Paper" | "Spigot" | "Bukkit" | "Vanilla";
+}>();
+</script>
diff --git a/apps/frontend/src/components/ui/servers/icons/LoadingIcon.vue b/apps/frontend/src/components/ui/servers/icons/LoadingIcon.vue
new file mode 100644
index 000000000..c2277f280
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/icons/LoadingIcon.vue
@@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+    <path
+      fill-rule="evenodd"
+      d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/PanelErrorIcon.vue b/apps/frontend/src/components/ui/servers/icons/PanelErrorIcon.vue
new file mode 100644
index 000000000..0904de9d7
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/icons/PanelErrorIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="size-8 text-[#FF496E]"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+    />
+  </svg>
+</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/SlashIcon.vue b/apps/frontend/src/components/ui/servers/icons/SlashIcon.vue
new file mode 100644
index 000000000..613ec2713
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/icons/SlashIcon.vue
@@ -0,0 +1,10 @@
+<template>
+  <svg height="32" viewBox="0 0 32 32" width="32">
+    <path
+      d="M22 5L9 28"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    ></path>
+  </svg>
+</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/TextFileIcon.vue b/apps/frontend/src/components/ui/servers/icons/TextFileIcon.vue
new file mode 100644
index 000000000..fb1189117
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/icons/TextFileIcon.vue
@@ -0,0 +1,20 @@
+<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-file-text"
+  >
+    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+    <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+    <path d="M10 9H8" />
+    <path d="M16 13H8" />
+    <path d="M16 17H8" />
+  </svg>
+</template>
diff --git a/apps/frontend/src/composables/auth.js b/apps/frontend/src/composables/auth.js
index 606e401e5..8cdcd0dce 100644
--- a/apps/frontend/src/composables/auth.js
+++ b/apps/frontend/src/composables/auth.js
@@ -113,7 +113,7 @@ export const getAuthUrl = (provider, redirect = "") => {
   }
   const fullURL = `${config.public.siteUrl}${redirect}`;
 
-  return `${config.public.apiBaseUrl}auth/init?url=${fullURL}&provider=${provider}`;
+  return `${config.public.apiBaseUrl}auth/init?provider=${provider}&url=${fullURL}`;
 };
 
 export const removeAuthProvider = async (provider) => {
diff --git a/apps/frontend/src/composables/featureFlags.ts b/apps/frontend/src/composables/featureFlags.ts
index d52368f50..179f3e6e3 100644
--- a/apps/frontend/src/composables/featureFlags.ts
+++ b/apps/frontend/src/composables/featureFlags.ts
@@ -23,6 +23,8 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
   showAdsWithPlus: false,
 
   // Feature toggles
+  projectTypesPrimaryNav: false,
+  hidePlusPromoInUserMenu: false,
   // advancedRendering: true,
   // externalLinksNewTab: true,
   // notUsingBlockers: false,
diff --git a/apps/frontend/src/composables/pyroFetch.ts b/apps/frontend/src/composables/pyroFetch.ts
new file mode 100644
index 000000000..0d0da31b9
--- /dev/null
+++ b/apps/frontend/src/composables/pyroFetch.ts
@@ -0,0 +1,103 @@
+import { $fetch, FetchError } from "ofetch";
+
+interface PyroFetchOptions {
+  method?: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+  contentType?: string;
+  body?: Record<string, any>;
+  version?: number;
+  override?: {
+    url?: string;
+    token?: string;
+  };
+  retry?: boolean;
+}
+
+export class PyroFetchError extends Error {
+  constructor(
+    message: string,
+    public statusCode?: number,
+    public originalError?: Error,
+  ) {
+    super(message);
+    this.name = "PyroFetchError";
+  }
+}
+
+export async function usePyroFetch<T>(path: string, options: PyroFetchOptions = {}): Promise<T> {
+  const config = useRuntimeConfig();
+  const auth = await useAuth();
+  const authToken = auth.value?.token;
+
+  if (!authToken) {
+    throw new PyroFetchError("Cannot pyrofetch without auth", 10000);
+  }
+
+  const { method = "GET", contentType = "application/json", body, version = 0, override } = options;
+
+  const base = (import.meta.server ? config.pyroBaseUrl : config.public.pyroBaseUrl)?.replace(
+    /\/$/,
+    "",
+  );
+
+  if (!base) {
+    throw new PyroFetchError(
+      "Cannot pyrofetch without base url. Make sure to set a PYRO_BASE_URL in environment variables",
+      10001,
+    );
+  }
+
+  const fullUrl = override?.url
+    ? `https://${override.url}/${path.replace(/^\//, "")}`
+    : `${base}/modrinth/v${version}/${path.replace(/^\//, "")}`;
+
+  type HeadersRecord = Record<string, string>;
+
+  const headers: HeadersRecord = {
+    Authorization: `Bearer ${override?.token ?? authToken}`,
+    "Access-Control-Allow-Headers": "Authorization",
+    "User-Agent": "Pyro/1.0 (https://pyro.host)",
+    Vary: "Accept, Origin",
+    "Content-Type": contentType,
+  };
+
+  if (import.meta.client && typeof window !== "undefined") {
+    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("Fetch error:", error);
+    if (error instanceof FetchError) {
+      const statusCode = error.response?.status;
+      const statusText = error.response?.statusText || "Unknown error";
+      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",
+      };
+      const message =
+        statusCode && statusCode in errorMessages
+          ? errorMessages[statusCode]
+          : `HTTP Error: ${statusCode || "unknown"} ${statusText}`;
+      throw new PyroFetchError(`[PYROFETCH][PYRO] ${message}`, statusCode, error);
+    }
+    throw new PyroFetchError(
+      "[PYROFETCH][PYRO] An unexpected error occurred during the fetch operation.",
+      undefined,
+      error as Error,
+    );
+  }
+}
diff --git a/apps/frontend/src/composables/pyroServers.ts b/apps/frontend/src/composables/pyroServers.ts
new file mode 100644
index 000000000..811ca15d7
--- /dev/null
+++ b/apps/frontend/src/composables/pyroServers.ts
@@ -0,0 +1,1312 @@
+// usePyroServer is a composable that interfaces with the REDACTED API to get data and control the users server
+import { $fetch, FetchError } from "ofetch";
+
+interface PyroFetchOptions {
+  method?: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+  contentType?: string;
+  body?: Record<string, any>;
+  version?: number;
+  override?: {
+    url?: string;
+    token?: string;
+  };
+  retry?: boolean;
+}
+
+async function PyroFetch<T>(path: string, options: PyroFetchOptions = {}): Promise<T> {
+  const config = useRuntimeConfig();
+  const auth = await useAuth();
+  const authToken = auth.value?.token;
+
+  if (!authToken) {
+    throw new PyroFetchError("Cannot pyrofetch without auth", 10000);
+  }
+
+  const { method = "GET", contentType = "application/json", body, version = 0, override } = options;
+
+  const base = (import.meta.server ? config.pyroBaseUrl : config.public.pyroBaseUrl)?.replace(
+    /\/$/,
+    "",
+  );
+
+  if (!base) {
+    throw new PyroFetchError(
+      "Cannot pyrofetch without base url. Make sure to set a PYRO_BASE_URL in environment variables",
+      10001,
+    );
+  }
+
+  const fullUrl = override?.url
+    ? `https://${override.url}/${path.replace(/^\//, "")}`
+    : `${base}/modrinth/v${version}/${path.replace(/^\//, "")}`;
+
+  type HeadersRecord = Record<string, string>;
+
+  const headers: HeadersRecord = {
+    Authorization: `Bearer ${override?.token ?? authToken}`,
+    "Access-Control-Allow-Headers": "Authorization",
+    "User-Agent": "Pyro/1.0 (https://pyro.host)",
+    Vary: "Accept, Origin",
+  };
+
+  if (contentType !== "none") {
+    headers["Content-Type"] = contentType;
+  }
+
+  if (import.meta.client && typeof window !== "undefined") {
+    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]:", error);
+    if (error instanceof FetchError) {
+      const statusCode = error.response?.status;
+      const statusText = error.response?.statusText || "Unknown error";
+      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",
+      };
+      const message =
+        statusCode && statusCode in errorMessages
+          ? errorMessages[statusCode]
+          : `HTTP Error: ${statusCode || "unknown"} ${statusText}`;
+      throw new PyroFetchError(`[PYROSERVERS][PYRO] ${message}`, statusCode, error);
+    }
+    throw new PyroFetchError(
+      "[PYROSERVERS][PYRO] An unexpected error occurred during the fetch operation.",
+      undefined,
+      error as Error,
+    );
+  }
+}
+
+const internalServerRefrence = ref<any>(null);
+
+interface License {
+  id: string;
+  name: string;
+  url: string;
+}
+
+interface DonationUrl {
+  id: string;
+  platform: string;
+  url: string;
+}
+
+interface GalleryItem {
+  url: string;
+  featured: boolean;
+  title: string;
+  description: string;
+  created: string;
+  ordering: number;
+}
+
+export interface Project {
+  slug: string;
+  title: string;
+  description: string;
+  categories: string[];
+  client_side: "required" | "optional";
+  server_side: "required" | "optional";
+  body: string;
+  status: "approved" | "pending" | "rejected";
+  requested_status: "approved" | "pending" | "rejected";
+  additional_categories: string[];
+  issues_url: string;
+  source_url: string;
+  wiki_url: string;
+  discord_url: string;
+  donation_urls: DonationUrl[];
+  project_type: "mod" | "resourcepack" | "map" | "plugin";
+  downloads: number;
+  icon_url: string;
+  color: number;
+  thread_id: string;
+  monetization_status: "monetized" | "non-monetized";
+  id: string;
+  team: string;
+  body_url: string | null;
+  moderator_message: string | null;
+  published: string;
+  updated: string;
+  approved: string;
+  queued: string;
+  followers: number;
+  license: License;
+  versions: string[];
+  game_versions: string[];
+  loaders: string[];
+  gallery: GalleryItem[];
+}
+
+interface General {
+  server_id: string;
+  name: string;
+  net: {
+    ip: string;
+    port: number;
+    domain: string;
+  };
+  game: string;
+  backup_quota: number;
+  used_backup_quota: number;
+  status: string;
+  suspension_reason: string;
+  loader: string;
+  loader_version: string;
+  mc_version: string;
+  upstream: {
+    kind: "modpack" | "mod" | "resourcepack";
+    version_id: string;
+    project_id: string;
+  } | null;
+  motd?: string;
+  image?: string;
+  project?: Project;
+  sftp_username: string;
+  sftp_password: string;
+  sftp_host: string;
+  datacenter?: string;
+}
+
+interface Allocation {
+  port: number;
+  name: string;
+}
+
+interface Startup {
+  invocation: string;
+  original_invocation: string;
+  jdk_version: "lts8" | "lts11" | "lts17" | "lts21";
+  jdk_build: "corretto" | "temurin" | "graal";
+}
+
+interface Mod {
+  filename: string;
+  project_id: string;
+  version_id: string;
+  name: string;
+  version_number: string;
+  icon_url: string;
+  disabled: boolean;
+}
+
+interface Backup {
+  id: string;
+  name: string;
+  created_at: string;
+  ongoing: boolean;
+}
+
+interface AutoBackupSettings {
+  enabled: boolean;
+  interval: number;
+}
+
+interface JWTAuth {
+  url: string;
+  token: string;
+}
+
+const constructServerProperties = (properties: any): string => {
+  let fileContent = `#Minecraft server properties\n#${new Date().toUTCString()}\n`;
+
+  for (const [key, value] of Object.entries(properties)) {
+    if (typeof value === "object") {
+      fileContent += `${key}=${JSON.stringify(value)}\n`;
+    } else if (typeof value === "boolean") {
+      fileContent += `${key}=${value ? "true" : "false"}\n`;
+    } else {
+      fileContent += `${key}=${value}\n`;
+    }
+  }
+
+  return fileContent;
+};
+
+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,
+    });
+
+    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 (image.value === null && iconUrl) {
+    console.log("iconUrl", iconUrl);
+    try {
+      const response = await fetch(iconUrl);
+      const file = await response.blob();
+      const originalfile = new File([file], "server-icon-original.png", {
+        type: "image/png",
+      });
+      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,
+          });
+        }
+      }
+    } catch (error) {
+      if (error instanceof PyroFetchError && error.statusCode === 404) {
+        console.log("[PYROSERVERS] No server icon found");
+      } else {
+        console.error(error);
+      }
+    }
+  }
+  return image.value;
+};
+
+// ------------------ GENERAL ------------------ //
+
+const sendPowerAction = async (action: string) => {
+  try {
+    await PyroFetch(`servers/${internalServerRefrence.value.serverId}/power`, {
+      method: "POST",
+      body: { action },
+    });
+
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    await internalServerRefrence.value.refresh();
+  } catch (error) {
+    console.error("Error changing power state:", error);
+    throw error;
+  }
+};
+
+const updateName = async (newName: string) => {
+  try {
+    await PyroFetch(`servers/${internalServerRefrence.value.serverId}/name`, {
+      method: "POST",
+      body: { name: newName },
+    });
+  } catch (error) {
+    console.error("Error updating server name:", error);
+    throw error;
+  }
+};
+
+const reinstallServer = async (
+  serverId: string,
+  loader: boolean,
+  projectId: string,
+  versionId?: string,
+  loaderVersionId?: string,
+  hardReset: boolean = false,
+) => {
+  try {
+    const hardResetParam = hardReset ? "true" : "false";
+    if (loader) {
+      if (projectId.toLowerCase() === "neoforge") {
+        projectId = "NeoForge";
+      }
+      await PyroFetch(`servers/${serverId}/reinstall?hard=${hardResetParam}`, {
+        method: "POST",
+        body: { loader: projectId, loader_version: loaderVersionId, game_version: versionId },
+      });
+    } else {
+      await PyroFetch(`servers/${serverId}/reinstall?hard=${hardResetParam}`, {
+        method: "POST",
+        body: { project_id: projectId, version_id: versionId },
+      });
+    }
+  } catch (error) {
+    console.error("Error reinstalling server:", error);
+    throw error;
+  }
+};
+
+const reinstallFromMrpack = async (mrpack: File, hardReset: boolean = false) => {
+  const hardResetParam = hardReset ? "true" : "false";
+  try {
+    const auth = await PyroFetch<JWTAuth>(
+      `servers/${internalServerRefrence.value.serverId}/reinstallFromMrpack`,
+    );
+
+    const formData = new FormData();
+    formData.append("file", mrpack);
+
+    const response = await fetch(
+      `https://${auth.url}/reinstallMrpackMultiparted?hard=${hardResetParam}`,
+      {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${auth.token}`,
+        },
+        body: formData,
+        signal: AbortSignal.timeout(30 * 60 * 1000),
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error(`[pyroservers] native fetch err status: ${response.status}`);
+    }
+  } catch (error) {
+    console.error("Error reinstalling from mrpack:", error);
+    throw error;
+  }
+};
+
+const suspendServer = async (status: boolean) => {
+  try {
+    await PyroFetch(`servers/${internalServerRefrence.value.serverId}/suspend`, {
+      method: "POST",
+      body: { suspended: status },
+    });
+  } catch (error) {
+    console.error("Error suspending server:", error);
+    throw error;
+  }
+};
+
+const fetchConfigFile = async (fileName: string) => {
+  try {
+    return await PyroFetch(`servers/${internalServerRefrence.value.serverId}/config/${fileName}`);
+  } catch (error) {
+    console.error("Error fetching config file:", error);
+    throw error;
+  }
+};
+
+const getMotd = async () => {
+  try {
+    const props = await downloadFile("/server.properties");
+    if (props) {
+      const lines = props.split("\n");
+      for (const line of lines) {
+        if (line.startsWith("motd=")) {
+          return line.slice(5);
+        }
+      }
+    }
+  } catch {
+    return null;
+  }
+};
+
+const setMotd = async (motd: string) => {
+  try {
+    const props = (await fetchConfigFile("ServerProperties")) as any;
+    if (props) {
+      props.motd = motd;
+      const newProps = constructServerProperties(props);
+      const octetStream = new Blob([newProps], { type: "application/octet-stream" });
+      const auth = await await PyroFetch<JWTAuth>(
+        `servers/${internalServerRefrence.value.serverId}/fs`,
+      );
+
+      return await PyroFetch(`/update?path=/server.properties`, {
+        method: "PUT",
+        contentType: "application/octet-stream",
+        body: octetStream,
+        override: auth,
+      });
+    }
+  } catch (error) {
+    console.error("Error setting motd:", error);
+  }
+};
+
+// ------------------ MODS ------------------ //
+
+const installMod = async (projectId: string, versionId: string) => {
+  try {
+    await PyroFetch(`servers/${internalServerRefrence.value.serverId}/mods`, {
+      method: "POST",
+      body: { rinth_ids: { project_id: projectId, version_id: versionId } },
+    });
+  } catch (error) {
+    console.error("Error installing mod:", error);
+    throw error;
+  }
+};
+
+const removeMod = async (modId: string) => {
+  try {
+    await PyroFetch(`servers/${internalServerRefrence.value.serverId}/deleteMod`, {
+      method: "POST",
+      body: {
+        path: modId,
+      },
+    });
+  } catch (error) {
+    console.error("Error removing mod:", error);
+    throw error;
+  }
+};
+
+const reinstallMod = async (modId: string, versionId: string) => {
+  try {
+    await PyroFetch(`servers/${internalServerRefrence.value.serverId}/mods/${modId}`, {
+      method: "PUT",
+      body: { version_id: versionId },
+    });
+  } catch (error) {
+    console.error("Error reinstalling mod:", error);
+    throw error;
+  }
+};
+
+// ------------------ BACKUPS ------------------ //
+
+const createBackup = async (backupName: string) => {
+  try {
+    await PyroFetch(`servers/${internalServerRefrence.value.serverId}/backups`, {
+      method: "POST",
+      body: { name: backupName },
+    });
+  } catch (error) {
+    console.error("Error creating backup:", error);
+    throw error;
+  }
+};
+
+const renameBackup = async (backupId: string, newName: string) => {
+  try {
+    await PyroFetch(`servers/${internalServerRefrence.value.serverId}/backups/${backupId}/rename`, {
+      method: "POST",
+      body: { name: newName },
+    });
+  } catch (error) {
+    console.error("Error renaming backup:", error);
+    throw error;
+  }
+};
+
+const deleteBackup = async (backupId: string) => {
+  try {
+    await PyroFetch(`servers/${internalServerRefrence.value.serverId}/backups/${backupId}`, {
+      method: "DELETE",
+    });
+  } catch (error) {
+    console.error("Error deleting backup:", error);
+    throw error;
+  }
+};
+
+const restoreBackup = async (backupId: string) => {
+  try {
+    await PyroFetch(
+      `servers/${internalServerRefrence.value.serverId}/backups/${backupId}/restore`,
+      {
+        method: "POST",
+      },
+    );
+  } catch (error) {
+    console.error("Error restoring backup:", error);
+    throw error;
+  }
+};
+
+const downloadBackup = async (backupId: string) => {
+  try {
+    return await PyroFetch(`servers/${internalServerRefrence.value.serverId}/backups/${backupId}`);
+  } catch (error) {
+    console.error("Error downloading backup:", error);
+    throw error;
+  }
+};
+
+const updateAutoBackup = async (autoBackup: "enable" | "disable", interval: number) => {
+  try {
+    return await PyroFetch(`servers/${internalServerRefrence.value.serverId}/autobackup`, {
+      method: "POST",
+      body: { set: autoBackup, interval },
+    });
+  } catch (error) {
+    console.error("Error updating auto backup:", error);
+    throw error;
+  }
+};
+
+const getAutoBackup = async () => {
+  try {
+    return await PyroFetch(`servers/${internalServerRefrence.value.serverId}/autobackup`);
+  } catch (error) {
+    console.error("Error getting auto backup settings:", error);
+    throw error;
+  }
+};
+
+// ------------------ NETWORK ------------------ //
+
+const reserveAllocation = async (name: string): Promise<Allocation> => {
+  try {
+    return await PyroFetch<Allocation>(
+      `servers/${internalServerRefrence.value.serverId}/allocations?name=${name}`,
+      {
+        method: "POST",
+      },
+    );
+  } catch (error) {
+    console.error("Error reserving new allocation:", error);
+    throw error;
+  }
+};
+
+const updateAllocation = async (port: number, name: string) => {
+  try {
+    await PyroFetch(
+      `servers/${internalServerRefrence.value.serverId}/allocations/${port}?name=${name}`,
+      {
+        method: "PUT",
+      },
+    );
+  } catch (error) {
+    console.error("Error updating allocations:", error);
+    throw error;
+  }
+};
+
+const deleteAllocation = async (port: number) => {
+  try {
+    await PyroFetch(`servers/${internalServerRefrence.value.serverId}/allocations/${port}`, {
+      method: "DELETE",
+    });
+  } catch (error) {
+    console.error("Error deleting allocation:", error);
+    throw error;
+  }
+};
+
+const checkSubdomainAvailability = async (subdomain: string): Promise<{ available: boolean }> => {
+  try {
+    return (await PyroFetch(`subdomains/${subdomain}/isavailable`)) as { available: boolean };
+  } catch (error) {
+    console.error("Error checking subdomain availability:", error);
+    throw error;
+  }
+};
+
+const changeSubdomain = async (subdomain: string) => {
+  try {
+    await PyroFetch(`servers/${internalServerRefrence.value.serverId}/subdomain`, {
+      method: "POST",
+      body: { subdomain },
+    });
+  } catch (error) {
+    console.error("Error changing subdomain:", error);
+    throw error;
+  }
+};
+
+// ------------------ STARTUP ------------------ //
+
+const updateStartupSettings = async (
+  invocation: string,
+  jdkVersion: "lts8" | "lts11" | "lts17" | "lts21",
+  jdkBuild: "corretto" | "temurin" | "graal",
+) => {
+  try {
+    await PyroFetch(`servers/${internalServerRefrence.value.serverId}/startup`, {
+      method: "POST",
+      body: {
+        invocation: invocation || null,
+        jdk_version: jdkVersion || null,
+        jdk_build: jdkBuild || null,
+      },
+    });
+  } catch (error) {
+    console.error("Error updating startup settings:", error);
+    throw error;
+  }
+};
+
+// ------------------ FS ------------------ //
+
+const retryWithAuth = async (requestFn: () => Promise<any>) => {
+  try {
+    return await requestFn();
+  } catch (error) {
+    if (error instanceof PyroFetchError && error.statusCode === 401) {
+      await internalServerRefrence.value.refresh(["fs"]);
+      return await requestFn();
+    }
+  }
+};
+
+const listDirContents = (path: string, page: number, pageSize: number) => {
+  return retryWithAuth(async () => {
+    const encodedPath = encodeURIComponent(path);
+    return await PyroFetch(`/list?path=${encodedPath}&page=${page}&page_size=${pageSize}`, {
+      override: internalServerRefrence.value.fs.auth,
+      retry: false,
+    });
+  });
+};
+
+const createFileOrFolder = (path: string, type: "file" | "directory") => {
+  return retryWithAuth(async () => {
+    const encodedPath = encodeURIComponent(path);
+    return await PyroFetch(`/create?path=${encodedPath}&type=${type}`, {
+      method: "POST",
+      contentType: "application/octet-stream",
+      override: internalServerRefrence.value.fs.auth,
+    });
+  });
+};
+
+const uploadFile = (path: string, file: File) => {
+  return retryWithAuth(async () => {
+    const encodedPath = encodeURIComponent(path);
+    return await PyroFetch(`/create?path=${encodedPath}&type=file`, {
+      method: "POST",
+      contentType: "application/octet-stream",
+      body: file,
+      override: internalServerRefrence.value.fs.auth,
+    });
+  });
+};
+
+const renameFileOrFolder = (path: string, name: string) => {
+  const pathName = path.split("/").slice(0, -1).join("/") + "/" + name;
+  return retryWithAuth(async () => {
+    return await PyroFetch(`/move`, {
+      method: "POST",
+      override: internalServerRefrence.value.fs.auth,
+      body: {
+        source: path,
+        destination: pathName,
+      },
+    });
+  });
+};
+
+const updateFile = (path: string, content: string) => {
+  const octetStream = new Blob([content], { type: "application/octet-stream" });
+  return retryWithAuth(async () => {
+    return await PyroFetch(`/update?path=${path}`, {
+      method: "PUT",
+      contentType: "application/octet-stream",
+      body: octetStream,
+      override: internalServerRefrence.value.fs.auth,
+    });
+  });
+};
+
+const createMissingFolders = async (path: string) => {
+  if (path.startsWith("/")) {
+    path = path.substring(1);
+  }
+  const folders = path.split("/");
+  console.log(folders);
+  let currentPath = "";
+
+  for (const folder of folders) {
+    currentPath += "/" + folder;
+    try {
+      await createFileOrFolder(currentPath, "directory");
+    } catch {}
+  }
+};
+
+const moveFileOrFolder = (path: string, newPath: string) => {
+  return retryWithAuth(async () => {
+    console.log(path);
+    console.log(newPath);
+    console.log(newPath.substring(0, newPath.lastIndexOf("/")));
+    await createMissingFolders(newPath.substring(0, newPath.lastIndexOf("/")));
+
+    return await PyroFetch(`/move`, {
+      method: "POST",
+      override: internalServerRefrence.value.fs.auth,
+      body: {
+        source: path,
+        destination: newPath,
+      },
+    });
+  });
+};
+
+const deleteFileOrFolder = (path: string, recursive: boolean) => {
+  const encodedPath = encodeURIComponent(path);
+  return retryWithAuth(async () => {
+    return await PyroFetch(`/delete?path=${encodedPath}&recursive=${recursive}`, {
+      method: "DELETE",
+      override: internalServerRefrence.value.fs.auth,
+    });
+  });
+};
+
+const downloadFile = (path: string, raw?: boolean) => {
+  return retryWithAuth(async () => {
+    const encodedPath = encodeURIComponent(path);
+    const fileData = await PyroFetch(`/download?path=${encodedPath}`, {
+      override: internalServerRefrence.value.fs.auth,
+    });
+
+    if (fileData instanceof Blob) {
+      if (raw) {
+        return fileData;
+      } else {
+        return await fileData.text();
+      }
+    }
+  });
+};
+
+const modules: any = {
+  general: {
+    get: async (serverId: string) => {
+      try {
+        const data = await PyroFetch<General>(`servers/${serverId}`);
+        // TODO: temp hack to fix hydration error
+        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(
+            `§b${data.project?.title || data.loader + " " + data.mc_version} §f♦ §aModrinth Servers`,
+          );
+        }
+        data.motd = motd;
+        return data;
+      } catch (error) {
+        internalServerRefrence.value.setError(error);
+        return undefined;
+      }
+    },
+    updateName,
+    power: sendPowerAction,
+    reinstall: reinstallServer,
+    reinstallFromMrpack,
+    suspend: suspendServer,
+    getMotd,
+    setMotd,
+    fetchConfigFile,
+  },
+  mods: {
+    get: async (serverId: string) => {
+      try {
+        const mods = await PyroFetch<Mod[]>(`servers/${serverId}/mods`);
+        return {
+          data:
+            internalServerRefrence.value.error === undefined
+              ? mods.sort((a, b) => (a?.name ?? "").localeCompare(b?.name ?? ""))
+              : [],
+        };
+      } catch (error) {
+        internalServerRefrence.value.setError(error);
+        return undefined;
+      }
+    },
+    install: installMod,
+    remove: removeMod,
+    reinstall: reinstallMod,
+  },
+  backups: {
+    get: async (serverId: string) => {
+      try {
+        return { data: await PyroFetch<Backup[]>(`servers/${serverId}/backups`) };
+      } catch (error) {
+        internalServerRefrence.value.setError(error);
+        return undefined;
+      }
+    },
+    create: createBackup,
+    rename: renameBackup,
+    delete: deleteBackup,
+    restore: restoreBackup,
+    download: downloadBackup,
+    updateAutoBackup,
+    getAutoBackup,
+  },
+  network: {
+    get: async (serverId: string) => {
+      try {
+        return { allocations: await PyroFetch<Allocation[]>(`servers/${serverId}/allocations`) };
+      } catch (error) {
+        internalServerRefrence.value.setError(error);
+        return undefined;
+      }
+    },
+    reserveAllocation,
+    updateAllocation,
+    deleteAllocation,
+    checkSubdomainAvailability,
+    changeSubdomain,
+  },
+  startup: {
+    get: async (serverId: string) => {
+      try {
+        return await PyroFetch<Startup>(`servers/${serverId}/startup`);
+      } catch (error) {
+        internalServerRefrence.value.setError(error);
+        return undefined;
+      }
+    },
+    update: updateStartupSettings,
+  },
+  ws: {
+    get: async (serverId: string) => {
+      try {
+        return await PyroFetch<JWTAuth>(`servers/${serverId}/ws`);
+      } catch (error) {
+        internalServerRefrence.value.setError(error);
+        return undefined;
+      }
+    },
+  },
+  fs: {
+    get: async (serverId: string) => {
+      try {
+        return { auth: await PyroFetch<JWTAuth>(`servers/${serverId}/fs`) };
+      } catch (error) {
+        internalServerRefrence.value.setError(error);
+        return undefined;
+      }
+    },
+    listDirContents,
+    createFileOrFolder,
+    uploadFile,
+    renameFileOrFolder,
+    updateFile,
+    moveFileOrFolder,
+    deleteFileOrFolder,
+    downloadFile,
+  },
+};
+
+type GeneralFunctions = {
+  /**
+   * INTERNAL: Gets the general settings of a server.
+   * @param serverId - The ID of the server.
+   */
+  get: (serverId: string) => Promise<General>;
+
+  /**
+   * Updates the name of the server.
+   * @param newName - The new name for the server.
+   */
+  updateName: (newName: string) => Promise<void>;
+
+  /**
+   * Sends a power action to the server.
+
+   * @param action - The power action to send (e.g., "start", "stop", "restart").
+   */
+  power: (action: string) => Promise<void>;
+
+  /**
+   * Reinstalls the server with the specified project and version.
+   * @param loader - Whether to use a loader.
+   * @param projectId - The ID of the project.
+   * @param versionId - Optional version ID.
+   * @param loaderVersionId - Optional loader version ID.
+   * @param hardReset - Whether to perform a hard reset.
+   */
+  reinstall: (
+    serverId: string,
+    loader: boolean,
+    projectId: string,
+    versionId?: string,
+    loaderVersionId?: string,
+    hardReset?: boolean,
+  ) => Promise<void>;
+
+  /**
+   * Reinstalls the server from a mrpack.
+   * @param mrpack - The mrpack file.
+   * @param hardReset - Whether to perform a hard reset.
+   */
+  reinstallFromMrpack: (mrpack: File, hardReset?: boolean) => Promise<void>;
+
+  /**
+   * Suspends or resumes the server.
+   * @param status - True to suspend the server, false to resume.
+   */
+  suspend: (status: boolean) => Promise<void>;
+
+  /**
+   * INTERNAL: Gets the general settings of a server.
+   */
+  getMotd: () => Promise<string>;
+
+  /**
+   * INTERNAL: Updates the general settings of a server.
+   * @param motd - The new motd.
+   */
+  setMotd: (motd: string) => Promise<void>;
+
+  /**
+   * INTERNAL: Gets the config file of a server.
+   * @param fileName - The name of the file.
+   */
+  fetchConfigFile: (fileName: string) => Promise<any>;
+};
+
+type ModFunctions = {
+  /**
+   * INTERNAL: Gets the mods of a server.
+   * @param serverId - The ID of the server.
+   * @returns
+   */
+  get: (serverId: string) => Promise<Mod[]>;
+
+  /**
+   * Installs a mod to a server.
+   * @param projectId - The ID of the project.
+   * @param versionId - The ID of the version.
+   */
+  install: (projectId: string, versionId: string) => Promise<void>;
+
+  /**
+   * Removes a mod from a server.
+   * @param modId - The ID of the mod.
+   */
+  remove: (modId: string) => Promise<void>;
+
+  /**
+   * Reinstalls a mod to a server.
+   * @param modId - The ID of the mod.
+   * @param versionId - The ID of the version.
+   */
+  reinstall: (modId: string, versionId: string) => Promise<void>;
+};
+
+type BackupFunctions = {
+  /**
+   * INTERNAL: Gets the backups of a server.
+   * @param serverId - The ID of the server.
+   * @returns
+   */
+  get: (serverId: string) => Promise<Backup[]>;
+
+  /**
+   * Creates a new backup for the server.
+   * @param backupName - The name of the backup.
+   */
+  create: (backupName: string) => Promise<void>;
+
+  /**
+   * Renames a backup for the server.
+   * @param backupId - The ID of the backup.
+   * @param newName - The new name for the backup.
+   */
+  rename: (backupId: string, newName: string) => Promise<void>;
+
+  /**
+   * Deletes a backup for the server.
+   * @param backupId - The ID of the backup.
+   */
+  delete: (backupId: string) => Promise<void>;
+
+  /**
+   * Restores a backup for the server.
+   * @param serverId - The ID of the server.
+   * @param backupId - The ID of the backup.
+   */
+  restore: (backupId: string) => Promise<void>;
+
+  /**
+   * Downloads a backup for the server.
+   * @param backupId - The ID of the backup.
+   */
+  download: (backupId: string) => Promise<void>;
+
+  /**
+   * Updates the auto backup settings of the server.
+   * @param autoBackup - Whether to enable auto backup.
+   * @param interval - The interval to backup at (in Hours).
+   */
+  updateAutoBackup: (autoBackup: "enable" | "disable", interval: number) => Promise<void>;
+
+  /**
+   * Gets the auto backup settings of the server.
+   */
+  getAutoBackup: () => Promise<AutoBackupSettings>;
+};
+
+type NetworkFunctions = {
+  /**
+   * INTERNAL: Gets the network settings of a server.
+   * @param serverId - The ID of the server.
+   * @returns
+   */
+  get: (serverId: string) => Promise<Allocation[]>;
+
+  /**
+   * Reserves a new allocation for the server.
+   * @param name - The name of the allocation.
+   * @returns The allocated network port details.
+   */
+  reserveAllocation: (name: string) => Promise<Allocation>;
+
+  /**
+   * Updates the allocation for the server.
+   * @param port - The port to update.
+   * @param name - The new name for the allocation.
+   */
+  updateAllocation: (port: number, name: string) => Promise<void>;
+
+  /**
+   * Deletes an allocation for the server.
+   * @param port - The port to delete.
+   */
+  deleteAllocation: (port: number) => Promise<void>;
+
+  /**
+   * Checks if a subdomain is available.
+   * @param subdomain - The subdomain to check.
+   * @returns True if the subdomain is available, otherwise false.
+   */
+  checkSubdomainAvailability: (subdomain: string) => Promise<boolean>;
+
+  /**
+   * Changes the subdomain of the server.
+   * @param subdomain - The new subdomain.
+   */
+  changeSubdomain: (subdomain: string) => Promise<void>;
+};
+
+type StartupFunctions = {
+  /**
+   * INTERNAL: Gets the startup settings of a server.
+   * @param serverId - The ID of the server.
+   * @returns
+   */
+  get: (serverId: string) => Promise<Startup>;
+
+  /**
+   * Updates the startup settings of a server.
+   * @param invocation - The invocation of the server.
+   * @param jdkVersion - The version of the JDK.
+   * @param jdkBuild - The build of the JDK.
+   */
+  update: (
+    invocation: string,
+    jdkVersion: "lts8" | "lts11" | "lts17" | "lts21",
+    jdkBuild: "corretto" | "temurin" | "graal",
+  ) => Promise<void>;
+};
+
+type FSFunctions = {
+  /**
+   * INTERNAL: Gets the file system settings of a server.
+   * @param serverId
+   * @returns
+   */
+  get: (serverId: string) => Promise<JWTAuth>;
+
+  /**
+   * @param path - The path to list the contents of.
+   * @param page - The page to list.
+   * @param pageSize - The page size to list.
+   * @returns
+   */
+  listDirContents: (path: string, page: number, pageSize: number) => Promise<any>;
+
+  /**
+   * @param path - The path to create the file or folder at.
+   * @param type - The type of file or folder to create.
+   * @returns
+   */
+  createFileOrFolder: (path: string, type: "file" | "directory") => Promise<any>;
+
+  /**
+   * @param path - The path to upload the file to.
+   * @param file - The file to upload.
+   * @returns
+   */
+  uploadFile: (path: string, file: File) => Promise<any>;
+
+  /**
+   * @param path - The path to rename the file or folder at.
+   * @param name - The new name for the file or folder.
+   * @returns
+   */
+  renameFileOrFolder: (path: string, name: string) => Promise<any>;
+
+  /**
+   * @param path - The path to update the file at.
+   * @param content - The new content for the file.
+   * @returns
+   */
+  updateFile: (path: string, content: string) => Promise<any>;
+
+  /**
+   * @param path - The path to move the file or folder at.
+   * @param newPath - The new path for the file or folder.
+   * @returns
+   */
+  moveFileOrFolder: (path: string, newPath: string) => Promise<any>;
+
+  /**
+   * @param path - The path to delete the file or folder at.
+   * @param recursive - Whether to delete the file or folder recursively.
+   * @returns
+   */
+  deleteFileOrFolder: (path: string, recursive: boolean) => Promise<any>;
+
+  /**
+   * @param serverId - The ID of the server.
+   * @param path - The path to download the file from.
+   * @param raw - Whether to return the raw blob.
+   * @returns
+   */
+  downloadFile: (path: string, raw?: boolean) => Promise<any>;
+};
+
+type GeneralModule = General & GeneralFunctions;
+type ModsModule = { data: Mod[] } & ModFunctions;
+type BackupsModule = { data: Backup[] } & BackupFunctions;
+type NetworkModule = { allocations: Allocation[] } & NetworkFunctions;
+type StartupModule = Startup & StartupFunctions;
+type FSModule = { auth: JWTAuth } & FSFunctions;
+
+type ModulesMap = {
+  general: GeneralModule;
+  mods: ModsModule;
+  backups: BackupsModule;
+  network: NetworkModule;
+  startup: StartupModule;
+  ws: JWTAuth;
+  fs: FSModule;
+};
+
+type avaliableModules = ("general" | "mods" | "backups" | "network" | "startup" | "ws" | "fs")[];
+
+export type Server<T extends avaliableModules> = {
+  [K in T[number]]?: ModulesMap[K];
+} & {
+  /**
+   * Refreshes the included modules of the server
+   * @param refreshModules - The modules to refresh.
+   */
+  refresh: (refreshModules?: avaliableModules) => Promise<void>;
+  setError: (error: Error) => void;
+  error?: Error;
+  serverId: string;
+};
+
+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 };
+              }
+            })(),
+          );
+        }
+      } 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.all(promises);
+    },
+    setError: (error: Error) => {
+      server.error = error;
+    },
+    serverId,
+  });
+
+  for (const module of includedModules) {
+    const mods = modules[module];
+    server[module] = mods;
+  }
+
+  internalServerRefrence.value = server;
+
+  await server.refresh();
+
+  return server as Server<typeof includedModules>;
+};
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 8a452dac8..e70191c04 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -38,7 +38,7 @@
         config.public.apiBaseUrl.startsWith('https://staging-api.modrinth.com') &&
         !cosmetics.hideStagingBanner
       "
-      class="site-banner site-banner--warning"
+      class="site-banner site-banner--warning [&>*]:z-[6]"
     >
       <div class="site-banner__title">
         <IssuesIcon aria-hidden="true" />
@@ -54,7 +54,7 @@
       </div>
     </div>
     <header
-      class="experimental-styles-within desktop-only relative z-[5] mx-auto my-4 grid max-w-[1280px] grid-cols-[1fr_auto] items-center gap-2 px-3 sm:grid-cols-[auto_1fr_auto]"
+      class="experimental-styles-within desktop-only relative z-[5] mx-auto grid max-w-[1280px] grid-cols-[1fr_auto] items-center gap-2 px-3 py-4 lg:grid-cols-[auto_1fr_auto]"
     >
       <div>
         <NuxtLink to="/" aria-label="Modrinth home page">
@@ -62,121 +62,165 @@
         </NuxtLink>
       </div>
       <div
-        class="col-span-2 row-start-2 flex flex-wrap justify-center gap-1 sm:col-span-1 sm:row-start-auto"
+        :class="`col-span-2 row-start-2 flex flex-wrap justify-center ${flags.projectTypesPrimaryNav ? 'gap-2' : 'gap-4'} lg:col-span-1 lg:row-start-auto`"
       >
-        <div class="hidden xl:contents">
-          <ButtonStyled type="transparent">
-            <nuxt-link to="/mods" class="temp-nav-buttons"> Mods </nuxt-link>
+        <template v-if="flags.projectTypesPrimaryNav">
+          <ButtonStyled
+            type="transparent"
+            :highlighted="route.name === 'search-mods' || route.path.startsWith('/mod/')"
+            :highlighted-style="
+              route.name === 'search-mods' ? 'main-nav-primary' : 'main-nav-secondary'
+            "
+          >
+            <nuxt-link to="/mods"> <BoxIcon aria-hidden="true" /> Mods </nuxt-link>
           </ButtonStyled>
-          <ButtonStyled type="transparent">
-            <nuxt-link to="/resourcepacks" class="temp-nav-buttons"> Resource Packs </nuxt-link>
+          <ButtonStyled
+            type="transparent"
+            :highlighted="
+              route.name === 'search-resourcepacks' || route.path.startsWith('/resourcepack/')
+            "
+            :highlighted-style="
+              route.name === 'search-resourcepacks' ? 'main-nav-primary' : 'main-nav-secondary'
+            "
+          >
+            <nuxt-link to="/resourcepacks">
+              <PaintBrushIcon aria-hidden="true" /> Resource Packs
+            </nuxt-link>
           </ButtonStyled>
-          <ButtonStyled type="transparent">
-            <nuxt-link to="/datapacks" class="temp-nav-buttons"> Data Packs </nuxt-link>
+          <ButtonStyled
+            type="transparent"
+            :highlighted="route.name === 'search-datapacks' || route.path.startsWith('/datapack/')"
+            :highlighted-style="
+              route.name === 'search-datapacks' ? 'main-nav-primary' : 'main-nav-secondary'
+            "
+          >
+            <nuxt-link to="/datapacks"> <BracesIcon aria-hidden="true" /> Data Packs </nuxt-link>
           </ButtonStyled>
-          <ButtonStyled type="transparent">
-            <nuxt-link to="/modpacks" class="temp-nav-buttons"> Modpacks </nuxt-link>
+          <ButtonStyled
+            type="transparent"
+            :highlighted="route.name === 'search-modpacks' || route.path.startsWith('/modpack/')"
+            :highlighted-style="
+              route.name === 'search-modpacks' ? 'main-nav-primary' : 'main-nav-secondary'
+            "
+          >
+            <nuxt-link to="/modpacks"> <PackageOpenIcon aria-hidden="true" /> Modpacks </nuxt-link>
           </ButtonStyled>
-          <ButtonStyled type="transparent">
-            <nuxt-link to="/shaders" class="temp-nav-buttons"> Shaders </nuxt-link>
+          <ButtonStyled
+            type="transparent"
+            :highlighted="route.name === 'search-shaders' || route.path.startsWith('/shader/')"
+            :highlighted-style="
+              route.name === 'search-shaders' ? 'main-nav-primary' : 'main-nav-secondary'
+            "
+          >
+            <nuxt-link to="/shaders"> <GlassesIcon aria-hidden="true" /> Shaders </nuxt-link>
           </ButtonStyled>
-          <ButtonStyled type="transparent">
-            <nuxt-link to="/plugins" class="temp-nav-buttons"> Plugins </nuxt-link>
+          <ButtonStyled
+            type="transparent"
+            :highlighted="route.name === 'search-plugins' || route.path.startsWith('/plugin/')"
+            :highlighted-style="
+              route.name === 'search-plugins' ? 'main-nav-primary' : 'main-nav-secondary'
+            "
+          >
+            <nuxt-link to="/plugins"> <PlugIcon aria-hidden="true" /> Plugins </nuxt-link>
           </ButtonStyled>
-        </div>
-        <div class="contents xl:hidden">
-          <ButtonStyled type="transparent">
-            <OverflowMenu
-              class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
+        </template>
+        <template v-else>
+          <ButtonStyled
+            type="transparent"
+            :highlighted="isDiscovering || isDiscoveringSubpage"
+            :highlighted-style="isDiscoveringSubpage ? 'main-nav-secondary' : 'main-nav-primary'"
+          >
+            <TeleportOverflowMenu
               :options="[
                 {
                   id: 'mods',
-                  link: '/mods',
+                  action: '/mods',
                 },
                 {
                   id: 'resourcepacks',
-                  link: '/resourcepacks',
+                  action: '/resourcepacks',
                 },
                 {
                   id: 'datapacks',
-                  link: '/datapacks',
-                },
-                {
-                  id: 'plugins',
-                  link: '/plugins',
+                  action: '/datapacks',
                 },
                 {
                   id: 'shaders',
-                  link: '/shaders',
+                  action: '/shaders',
                 },
                 {
                   id: 'modpacks',
-                  link: '/modpacks',
+                  action: '/modpacks',
+                },
+                {
+                  id: 'plugins',
+                  action: '/plugins',
                 },
               ]"
+              hoverable
             >
-              <CompassIcon aria-hidden="true" /> Browse
+              <BoxIcon
+                v-if="route.name === 'search-mods' || route.path.startsWith('/mod/')"
+                aria-hidden="true"
+              />
+              <PaintBrushIcon
+                v-else-if="
+                  route.name === 'search-resourcepacks' || route.path.startsWith('/resourcepack/')
+                "
+                aria-hidden="true"
+              />
+              <BracesIcon
+                v-else-if="route.name === 'search-datapacks' || route.path.startsWith('/datapack/')"
+                aria-hidden="true"
+              />
+              <PackageOpenIcon
+                v-else-if="route.name === 'search-modpacks' || route.path.startsWith('/modpack/')"
+                aria-hidden="true"
+              />
+              <GlassesIcon
+                v-else-if="route.name === 'search-shaders' || route.path.startsWith('/shader/')"
+                aria-hidden="true"
+              />
+              <PlugIcon
+                v-else-if="route.name === 'search-plugins' || route.path.startsWith('/plugin/')"
+                aria-hidden="true"
+              />
+              <CompassIcon v-else aria-hidden="true" />
+              <span class="hidden md:contents">Discover content</span>
+              <span class="contents md:hidden">Discover</span>
               <DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
+
               <template #mods> <BoxIcon aria-hidden="true" /> Mods </template>
               <template #resourcepacks>
                 <PaintBrushIcon aria-hidden="true" /> Resource Packs
               </template>
               <template #datapacks> <BracesIcon aria-hidden="true" /> Data Packs </template>
-              <template #plugins> <ServerIcon aria-hidden="true" /> Plugins </template>
+              <template #plugins> <PlugIcon aria-hidden="true" /> Plugins </template>
               <template #shaders> <GlassesIcon aria-hidden="true" /> Shaders </template>
               <template #modpacks> <PackageOpenIcon aria-hidden="true" /> Modpacks </template>
-            </OverflowMenu>
-          </ButtonStyled>
-        </div>
-        <ButtonStyled type="transparent">
-          <OverflowMenu
-            class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
-            :options="[
-              {
-                id: 'servers',
-                link: 'https://bisecthosting.com/modrinth',
-                shown: false,
-              },
-              {
-                id: 'app',
-                link: '/app',
-              },
-              {
-                id: 'plus',
-                color: 'purple',
-                link: '/plus',
-                shown: !auth.user || !isPermission(auth.user.badges, 1 << 0),
-              },
-            ]"
-          >
-            <HamburgerIcon aria-hidden="true" /> More
-            <DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
-            <template #servers> <ServerIcon aria-hidden="true" /> Host a server </template>
-            <template #app> <DownloadIcon aria-hidden="true" /> Get Modrinth App </template>
-            <template #plus>
-              <ArrowBigUpDashIcon aria-hidden="true" /> Upgrade to Modrinth+
-            </template>
-          </OverflowMenu>
-        </ButtonStyled>
-        <div v-if="false" class="hidden lg:contents">
-          <ButtonStyled v-if="false" type="transparent">
-            <a href="https://bisecthosting.com/modrinth">
-              <ServerIcon aria-hidden="true" /> Host a server
-            </a>
-          </ButtonStyled>
-          <ButtonStyled type="transparent">
-            <NuxtLink to="/app"> <DownloadIcon aria-hidden="true" /> Get Modrinth App </NuxtLink>
+            </TeleportOverflowMenu>
           </ButtonStyled>
+
           <ButtonStyled
-            v-if="!auth.user || !isPermission(auth.user.badges, 1 << 0)"
             type="transparent"
-            color="purple"
+            :highlighted="route.name.startsWith('servers')"
+            :highlighted-style="
+              route.name === 'servers' ? 'main-nav-primary' : 'main-nav-secondary'
+            "
           >
-            <NuxtLink to="/plus">
-              <ArrowBigUpDashIcon aria-hidden="true" /> Upgrade to Modrinth+
-            </NuxtLink>
+            <nuxt-link to="/servers">
+              <ServerIcon aria-hidden="true" />
+              Host a server
+            </nuxt-link>
           </ButtonStyled>
-        </div>
+          <ButtonStyled type="transparent" :highlighted="route.name === 'app'">
+            <nuxt-link to="/app">
+              <DownloadIcon aria-hidden="true" />
+              <span class="hidden md:contents">Get Modrinth App</span>
+              <span class="contents md:hidden">Modrinth App</span>
+            </nuxt-link>
+          </ButtonStyled>
+        </template>
       </div>
       <div class="flex items-center gap-2">
         <ButtonStyled type="transparent">
@@ -224,7 +268,12 @@
           <template #profile> <UserIcon aria-hidden="true" /> Profile </template>
           <template #notifications> <BellIcon aria-hidden="true" /> Notifications </template>
           <template #saved> <BookmarkIcon aria-hidden="true" /> Saved projects </template>
+          <template #servers> <ServerIcon aria-hidden="true" /> My servers </template>
+          <template #plus>
+            <ArrowBigUpDashIcon aria-hidden="true" /> Upgrade to Modrinth+
+          </template>
           <template #settings> <SettingsIcon aria-hidden="true" /> Settings </template>
+          <template #flags> <ReportIcon aria-hidden="true" /> Feature flags </template>
           <template #projects> <BoxIcon aria-hidden="true" /> Projects </template>
           <template #organizations>
             <OrganizationIcon aria-hidden="true" /> Organizations
@@ -302,6 +351,10 @@
               <LibraryIcon class="icon" />
               {{ formatMessage(commonMessages.collectionsLabel) }}
             </NuxtLink>
+            <NuxtLink class="iconified-button" to="/servers/manage">
+              <ServerIcon class="icon" />
+              {{ formatMessage(commonMessages.serversLabel) }}
+            </NuxtLink>
             <NuxtLink
               v-if="auth.user.role === 'moderator' || auth.user.role === 'admin'"
               class="iconified-button"
@@ -521,6 +574,7 @@ import {
   HomeIcon,
   MoonIcon,
   SunIcon,
+  PlugIcon,
   PlusIcon,
   DropdownIcon,
   LogOutIcon,
@@ -537,14 +591,15 @@ import {
 } from "@modrinth/assets";
 import { Button, ButtonStyled, OverflowMenu, Avatar } from "@modrinth/ui";
 
+import CrossIcon from "assets/images/utils/x.svg";
+import NotificationIcon from "assets/images/sidebar/notifications.svg";
+import ModerationIcon from "assets/images/sidebar/admin.svg";
 import ModalCreation from "~/components/ui/ModalCreation.vue";
 import { getProjectTypeMessage } from "~/utils/i18n-project-type.ts";
 import { commonMessages } from "~/utils/common-messages.ts";
 import CollectionCreateModal from "~/components/ui/CollectionCreateModal.vue";
 import OrganizationCreateModal from "~/components/ui/OrganizationCreateModal.vue";
-import CrossIcon from "assets/images/utils/x.svg";
-import NotificationIcon from "assets/images/sidebar/notifications.svg";
-import ModerationIcon from "assets/images/sidebar/admin.svg";
+import TeleportOverflowMenu from "~/components/ui/servers/TeleportOverflowMenu.vue";
 
 const { formatMessage } = useVIntl();
 
@@ -735,6 +790,7 @@ const isMobileMenuOpen = ref(false);
 const isBrowseMenuOpen = ref(false);
 const navRoutes = computed(() => [
   {
+    id: "mods",
     label: formatMessage(getProjectTypeMessage("mod", true)),
     href: "/mods",
   },
@@ -766,6 +822,12 @@ const userMenuOptions = computed(() => {
       id: "profile",
       link: `/user/${auth.value.user.username}`,
     },
+    {
+      id: "plus",
+      link: "/plus",
+      color: "purple",
+      shown: !flags.value.hidePlusPromoInUserMenu && !isPermission(auth.value.user.badges, 1 << 0),
+    },
     {
       id: "notifications",
       link: "/dashboard/notifications",
@@ -774,6 +836,15 @@ const userMenuOptions = computed(() => {
       id: "saved",
       link: "/dashboard/collections",
     },
+    {
+      id: "servers",
+      link: "/servers/manage",
+    },
+    {
+      id: "flags",
+      link: "/flags",
+      shown: flags.value.developerMode,
+    },
     {
       id: "settings",
       link: "/settings",
@@ -836,6 +907,10 @@ const userMenuOptions = computed(() => {
   return options;
 });
 
+const isDiscovering = computed(() => route.name && route.name.startsWith("search-"));
+
+const isDiscoveringSubpage = computed(() => route.name && route.name.startsWith("type-id"));
+
 onMounted(() => {
   if (window && import.meta.client) {
     window.history.scrollRestoration = "auto";
@@ -894,19 +969,23 @@ function runAnalytics() {
   const config = useRuntimeConfig();
   const replacedUrl = config.public.apiBaseUrl.replace("v2/", "");
 
-  setTimeout(() => {
-    $fetch(`${replacedUrl}analytics/view`, {
-      method: "POST",
-      body: {
-        url: window.location.href,
-      },
-      headers: {
-        Authorization: auth.value.token,
-      },
-    })
-      .then(() => {})
-      .catch(() => {});
-  });
+  try {
+    setTimeout(() => {
+      $fetch(`${replacedUrl}analytics/view`, {
+        method: "POST",
+        body: {
+          url: window.location.href,
+        },
+        headers: {
+          Authorization: auth.value.token,
+        },
+      })
+        .then(() => {})
+        .catch(() => {});
+    });
+  } catch (e) {
+    console.error(`Sending analytics failed (CORS error? If so, ignore)`, e);
+  }
 }
 function toggleMobileMenu() {
   isMobileMenuOpen.value = !isMobileMenuOpen.value;
@@ -1080,6 +1159,8 @@ function hideStagingBanner() {
 }
 
 .email-nag {
+  z-index: 6;
+  position: relative;
   background-color: var(--color-raised-bg);
   width: 100%;
   display: flex;
@@ -1090,13 +1171,28 @@ function hideStagingBanner() {
 }
 
 .site-banner--warning {
-  background-color: var(--color-red-bg);
+  // On some pages, there's gradient backgrounds that seep underneath
+  // the banner, so we need to add a solid color underlay.
+  background-color: black;
   border-bottom: 2px solid var(--color-red);
   display: grid;
   gap: 0.5rem;
   grid-template: "title actions" "description actions";
   padding-block: var(--gap-xl);
   padding-inline: max(calc((100% - 80rem) / 2 + var(--gap-md)), var(--gap-xl));
+  z-index: 4;
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--color-red-bg);
+    z-index: 5;
+  }
 
   .site-banner__title {
     grid-area: title;
@@ -1337,10 +1433,5 @@ function hideStagingBanner() {
     padding-top: 0.75rem;
   }
 }
-
-.temp-nav-buttons.router-link-exact-active {
-  color: var(--color-contrast) !important;
-  background-color: var(--color-brand-highlight) !important;
-}
 </style>
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 9799a1c49..1afc0e82a 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -606,6 +606,7 @@
                       auth.user ? reportProject(project.id) : navigateTo('/auth/sign-in'),
                     color: 'red',
                     hoverOnly: true,
+                    shown: !currentMember,
                   },
                   { id: 'copy-id', action: () => copyId() },
                 ]"
@@ -1383,7 +1384,7 @@ try {
       },
     ),
     useAsyncData(`project/${route.params.id}/dependencies`, () =>
-      useBaseFetch(`project/${route.params.id}/dependencies`),
+      useBaseFetch(`project/${route.params.id}/dependencies`, {}),
     ),
     useAsyncData(`project/${route.params.id}/version?featured=true`, () =>
       useBaseFetch(`project/${route.params.id}/version?featured=true`),
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/description.vue b/apps/frontend/src/pages/[type]/[id]/settings/description.vue
index 7b82eb4e2..d7b6f7c3d 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/description.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/description.vue
@@ -124,8 +124,4 @@ export default defineNuxtComponent({
 .markdown-disclaimer {
   margin-block: 1rem;
 }
-
-.universal-card {
-  margin-top: 1rem;
-}
 </style>
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/index.vue b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
index 6772eaece..11d38289b 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/index.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
@@ -445,4 +445,8 @@ svg {
 .small-multiselect {
   max-width: 15rem;
 }
+
+.button-group {
+  justify-content: flex-start;
+}
 </style>
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/links.vue b/apps/frontend/src/pages/[type]/[id]/settings/links.vue
index e4b6c4385..dc250b836 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/links.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/links.vue
@@ -268,4 +268,8 @@ function checkDifference(newLink, existingLink) {
     height: 40px;
   }
 }
+
+.button-group {
+  justify-content: flex-start;
+}
 </style>
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/tags.vue b/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
index e42144b48..d346a60cc 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
@@ -260,6 +260,10 @@ export default defineNuxtComponent({
   }
 }
 
+.button-group {
+  justify-content: flex-start;
+}
+
 .category-list {
   column-count: 4;
   column-gap: var(--spacing-card-lg);
diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version].vue b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
index dae2fe6ef..f03723a58 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -158,7 +158,7 @@
             Report
           </nuxt-link>
         </ButtonStyled>
-        <ButtonStyled v-else>
+        <ButtonStyled v-else-if="!currentMember">
           <button @click="() => reportVersion(version.id)">
             <ReportIcon aria-hidden="true" />
             Report
diff --git a/apps/frontend/src/pages/[type]/[id]/versions.vue b/apps/frontend/src/pages/[type]/[id]/versions.vue
index 9129cb15f..1abdf5d12 100644
--- a/apps/frontend/src/pages/[type]/[id]/versions.vue
+++ b/apps/frontend/src/pages/[type]/[id]/versions.vue
@@ -205,6 +205,7 @@
                     color: 'red',
                     hoverFilled: true,
                     action: () => reportVersion(version.id),
+                    shown: !currentMember,
                   },
                   { divider: true, shown: currentMember },
                   {
diff --git a/apps/frontend/src/pages/collection/[id].vue b/apps/frontend/src/pages/collection/[id].vue
index 7dfd6a7ad..3ff01bc3d 100644
--- a/apps/frontend/src/pages/collection/[id].vue
+++ b/apps/frontend/src/pages/collection/[id].vue
@@ -35,7 +35,6 @@
                       accept="image/png,image/jpeg,image/gif,image/webp"
                       class="btn btn-transparent upload"
                       style="white-space: nowrap"
-                      prompt="Upload icon"
                       aria-label="Upload icon"
                       @change="showPreviewImage"
                     >
diff --git a/apps/frontend/src/pages/index.vue b/apps/frontend/src/pages/index.vue
index ebbcc5de3..b6bce53af 100644
--- a/apps/frontend/src/pages/index.vue
+++ b/apps/frontend/src/pages/index.vue
@@ -13,6 +13,7 @@
             >
               {{ projectType.display }}s <br />
             </strong>
+            <strong class="main-header-strong">servers <br /></strong>
             <strong class="main-header-strong">mods</strong>
           </span>
         </div>
@@ -724,6 +725,7 @@ async function updateSearchProjects() {
 
           display: -webkit-box;
           -webkit-line-clamp: 2;
+          line-clamp: 2;
           -webkit-box-orient: vertical;
           overflow: hidden;
 
@@ -1166,7 +1168,7 @@ async function updateSearchProjects() {
   > span {
     position: absolute;
     top: 0;
-    animation: slide 10s infinite;
+    animation: slide 12s infinite;
 
     @media (prefers-reduced-motion) {
       animation-play-state: paused !important;
@@ -1175,32 +1177,36 @@ async function updateSearchProjects() {
 
   @keyframes slide {
     0%,
-    13% {
+    10% {
       top: 0;
     }
-    17%,
-    30% {
+    13%,
+    23% {
       top: -1.2em;
     }
-    33%,
-    46% {
+    26%,
+    36% {
       top: -2.4em;
     }
-    50%,
-    63% {
+    39%,
+    49% {
       top: -3.6em;
     }
-    66%,
-    79% {
+    52%,
+    62% {
       top: -4.8em;
     }
-    83%,
-    96% {
+    65%,
+    75% {
       top: -6em;
     }
+    78%,
+    88% {
+      top: -7.2em;
+    }
     99.99997%,
     99.99998% {
-      top: -7.2em;
+      top: -8.4em;
     }
     99.99999% {
       top: 0;
diff --git a/apps/frontend/src/pages/search/[searchProjectType].vue b/apps/frontend/src/pages/search/[searchProjectType].vue
index 45dc64ccf..aaac004e3 100644
--- a/apps/frontend/src/pages/search/[searchProjectType].vue
+++ b/apps/frontend/src/pages/search/[searchProjectType].vue
@@ -13,8 +13,38 @@
       aria-label="Filters"
     >
       <AdPlaceholder
-        v-if="!auth.user || !isPermission(auth.user.badges, 1 << 0) || flags.showAdsWithPlus"
+        v-if="
+          (!auth.user || !isPermission(auth.user.badges, 1 << 0) || flags.showAdsWithPlus) &&
+          !server
+        "
       />
+      <section v-if="server" class="card">
+        <nuxt-link
+          :to="`/servers/manage/${server.serverId}/content`"
+          class="mb-2 flex items-center gap-2"
+        >
+          <Avatar :src="server.general.image" size="sm" />
+          <div class="flex flex-col gap-2">
+            <span class="font-bold">{{ server.general.name }}</span>
+            <span>{{ server.general.loader }} {{ server.general.mc_version }}</span>
+          </div>
+        </nuxt-link>
+        <Checkbox
+          v-if="projectType.id !== 'modpack'"
+          v-model="serverOverrideGameVersions"
+          label="Override game versions"
+        />
+        <Checkbox
+          v-if="projectType.id !== 'modpack'"
+          v-model="serverOverrideLoaders"
+          label="Override loaders"
+        />
+        <Checkbox
+          v-if="projectType.id !== 'modpack'"
+          v-model="serverHideInstalled"
+          label="Hide already installed"
+        />
+      </section>
       <section class="card gap-1" :class="{ 'max-lg:!hidden': !sidebarMenuOpen }">
         <div class="flex items-center gap-2">
           <div class="iconified-input w-full">
@@ -204,14 +234,6 @@
           </button>
         </div>
       </div>
-      <pagination
-        v-if="false"
-        :page="currentPage"
-        :count="pageCount"
-        :link-function="(x) => getSearchUrl(x <= 1 ? 0 : (x - 1) * maxResults)"
-        class="mb-3 justify-end"
-        @switch-page="onSearchChangeToTop"
-      />
       <LogoAnimated v-if="searchLoading && !noLoad" />
       <div v-else-if="results && results.hits && results.hits.length === 0" class="no-results">
         <p>No results found for your query!</p>
@@ -243,10 +265,33 @@
             :server-side="result.server_side"
             :categories="result.display_categories"
             :search="true"
-            :show-updated-date="sortType.name !== 'newest'"
+            :show-updated-date="!server && sortType.name !== 'newest'"
+            :show-created-date="!server"
             :hide-loaders="['resourcepack', 'datapack'].includes(projectType.id)"
             :color="result.color"
-          />
+          >
+            <template v-if="server">
+              <button
+                v-if="
+                  result.installed ||
+                  server.mods.data.find((x) => x.project_id === result.project_id) ||
+                  server.general?.project?.id === result.project_id
+                "
+                disabled
+                class="btn btn-outline btn-primary"
+              >
+                <CheckIcon />
+                Installed
+              </button>
+              <button v-else-if="result.installing" disabled class="btn btn-outline btn-primary">
+                Installing...
+              </button>
+              <button v-else class="btn btn-outline btn-primary" @click="serverInstall(result)">
+                <DownloadIcon />
+                Install
+              </button>
+            </template>
+          </ProjectCard>
         </div>
       </div>
       <div class="pagination-after">
@@ -263,8 +308,8 @@
 </template>
 <script setup>
 import { Multiselect } from "vue-multiselect";
-import { Pagination, ScrollablePanel, Checkbox } from "@modrinth/ui";
-import { BanIcon, DropdownIcon, CheckIcon, FilterXIcon } from "@modrinth/assets";
+import { Pagination, ScrollablePanel, Checkbox, Avatar } from "@modrinth/ui";
+import { BanIcon, DropdownIcon, CheckIcon, FilterXIcon, DownloadIcon } from "@modrinth/assets";
 import ProjectCard from "~/components/ui/ProjectCard.vue";
 import LogoAnimated from "~/components/brand/LogoAnimated.vue";
 
@@ -379,8 +424,56 @@ if (route.query.o) {
   currentPage.value = Math.ceil(route.query.o / maxResults.value) + 1;
 }
 
+const server = ref();
+const serverHideInstalled = ref(false);
+const serverOverrideGameVersions = ref(false);
+const serverOverrideLoaders = ref(false);
+
+if (route.query.sid) {
+  server.value = await usePyroServer(route.query.sid, ["general", "mods"]);
+}
+
+if (route.query.shi && projectType.value.id !== "modpack") {
+  serverHideInstalled.value = route.query.shi === "true";
+}
+
+if (route.query.sogv && projectType.value.id !== "modpack") {
+  serverOverrideGameVersions.value = route.query.sogv === "true";
+}
+
+if (route.query.sol && projectType.value.id !== "modpack") {
+  serverOverrideLoaders.value = route.query.sol === "true";
+}
+
+async function serverInstall(project) {
+  project.installing = true;
+  try {
+    const versions = await useBaseFetch(`project/${project.project_id}/version`, {}, false, true);
+
+    const version =
+      versions.find(
+        (x) =>
+          x.game_versions.includes(server.value.general.mc_version) &&
+          x.loaders.includes(server.value.general.loader.toLowerCase()),
+      ) ?? versions[0];
+
+    if (projectType.value.id === "modpack") {
+      await server.value.general?.reinstall(route.query.sid, false, project.project_id, version.id);
+      project.installed = true;
+      navigateTo(`/servers/manage/${route.query.sid}/options/loader`);
+    } else if (projectType.value.id === "mod") {
+      await server.value.mods.install(version.project_id, version.id);
+      await server.value.refresh(["mods"]);
+      project.installed = true;
+    }
+  } catch (e) {
+    console.error(e);
+  }
+  project.installing = false;
+}
+
 projectType.value = tags.value.projectTypes.find(
-  (x) => x.id === route.path.substring(1, route.path.length - 1),
+  (x) => x.id === route.path.replaceAll(/^\/|s\/?$/g, ""), // Removes prefix `/` and suffixes `s` and `s/`
 );
 
 const noLoad = ref(false);
@@ -392,7 +485,6 @@ const {
   () => {
     const config = useRuntimeConfig();
     const base = import.meta.server ? config.apiBaseUrl : config.public.apiBaseUrl;
-
     const params = [`limit=${maxResults.value}`, `index=${sortType.value.name}`];
 
     if (query.value.length > 0) {
@@ -416,8 +508,20 @@ const {
         formattedFacets.push([facet.replace(":", "!=")]);
       }
 
+      if (server.value && serverHideInstalled.value) {
+        const installedMods = server.value.mods.data
+          .filter((x) => x.project_id)
+          .map((x) => x.project_id);
+
+        installedMods.map((x) => [`project_id != ${x}`]).forEach((x) => formattedFacets.push(x));
+      }
+
       // loaders specifier
-      if (orFacets.value.length > 0) {
+      if (server.value && !(serverOverrideLoaders.value || projectType.value.id === "modpack")) {
+        formattedFacets.push([
+          `categories:${encodeURIComponent(server.value.general.loader.toLowerCase())}`,
+        ]);
+      } else if (orFacets.value.length > 0) {
         formattedFacets.push(orFacets.value);
       } else if (projectType.value.id === "plugin") {
         formattedFacets.push(
@@ -435,7 +539,12 @@ const {
         );
       }
 
-      if (selectedVersions.value.length > 0) {
+      if (
+        server.value &&
+        !(serverOverrideGameVersions.value || projectType.value.id === "modpack")
+      ) {
+        formattedFacets.push([`versions:${encodeURIComponent(server.value.general.mc_version)}`]);
+      } else if (selectedVersions.value.length > 0) {
         const versionFacets = [];
         for (const facet of selectedVersions.value) {
           versionFacets.push("versions:" + facet);
@@ -574,6 +683,22 @@ function getSearchUrl(offset, useObj) {
     queryItems.push(`m=${encodeURIComponent(maxResults.value)}`);
     obj.m = maxResults.value;
   }
+  if (server.value) {
+    queryItems.push(`sid=${encodeURIComponent(server.value.serverId)}`);
+    obj.sid = server.value.serverId;
+  }
+  if (serverHideInstalled.value) {
+    queryItems.push("shi=true");
+    obj.shi = true;
+  }
+  if (serverOverrideGameVersions.value) {
+    queryItems.push("sogv=true");
+    obj.sogv = true;
+  }
+  if (serverOverrideLoaders.value) {
+    queryItems.push("sol=true");
+    obj.sol = true;
+  }
 
   let url = `${route.path}`;
 
@@ -648,7 +773,11 @@ const queryFilter = ref("");
 const filters = computed(() => {
   const filters = {};
 
-  if (projectType.value.id !== "resourcepack" && projectType.value.id !== "datapack") {
+  if (
+    projectType.value.id !== "resourcepack" &&
+    projectType.value.id !== "datapack" &&
+    (!server.value || serverOverrideLoaders.value || projectType.value.id === "modpack")
+  ) {
     const loaders = tags.value.loaders
       .filter((x) => {
         if (projectType.value.id === "mod" && !showAllLoaders.value) {
@@ -701,9 +830,11 @@ const filters = computed(() => {
     }
   }
 
-  filters.gameVersion = tags.value.gameVersions
-    .filter((x) => (showSnapshots.value ? true : x.version_type === "release"))
-    .map((x) => ({ name: x.version, type: "gameVersion" }));
+  if (!server.value || serverOverrideGameVersions.value || projectType.value.id === "modpack") {
+    filters.gameVersion = tags.value.gameVersions
+      .filter((x) => (showSnapshots.value ? true : x.version_type === "release"))
+      .map((x) => ({ name: x.version, type: "gameVersion" }));
+  }
 
   if (!["resourcepack", "plugin", "shader", "datapack"].includes(projectType.value.id)) {
     filters.environment = [
diff --git a/apps/frontend/src/pages/servers/admin/index.vue b/apps/frontend/src/pages/servers/admin/index.vue
new file mode 100644
index 000000000..701d0084b
--- /dev/null
+++ b/apps/frontend/src/pages/servers/admin/index.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="flex h-full w-full flex-col">
+    <div
+      class="flex items-center justify-between gap-2 border-0 border-b border-solid border-bg-raised p-3"
+    >
+      <h2 class="m-0 text-2xl font-bold text-contrast">Admin</h2>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
diff --git a/apps/frontend/src/pages/servers/index.vue b/apps/frontend/src/pages/servers/index.vue
new file mode 100644
index 000000000..0e652e9fd
--- /dev/null
+++ b/apps/frontend/src/pages/servers/index.vue
@@ -0,0 +1,1008 @@
+<template>
+  <div
+    ref="scrollListener"
+    data-pyro
+    class="servers-hero relative isolate -mt-44 h-full min-h-screen pt-8"
+  >
+    <PurchaseModal
+      v-if="showModal && selectedProduct && customer"
+      :key="selectedProduct.id"
+      ref="purchaseModal"
+      :product="selectedProduct"
+      :country="country"
+      :custom-server="customServer"
+      :publishable-key="config.public.stripePublishableKey"
+      :send-billing-request="
+        async (body) =>
+          await useBaseFetch('billing/payment', { internal: true, method: 'POST', body })
+      "
+      :fetch-payment-data="fetchPaymentData"
+      :on-error="handleError"
+      :customer="customer"
+      :payment-methods="paymentMethods"
+      :return-url="`${config.public.siteUrl}/servers/manage`"
+      :server-name="`${auth?.user?.username}'s server`"
+      :fetch-capacity-statuses="fetchCapacityStatuses"
+      :out-of-stock-url="outOfStockUrl"
+      @hidden="handleModalHidden"
+    />
+
+    <section
+      class="mx-auto mt-32 flex min-h-[calc(80vh-0px)] max-w-7xl flex-col justify-center px-5 sm:mt-20 sm:min-h-[calc(100vh-0px)] sm:pl-10 lg:pl-3"
+    >
+      <div class="z-[5] flex w-full flex-col gap-8">
+        <div class="flex flex-col gap-4">
+          <div
+            class="relative h-fit w-fit rounded-full bg-highlight-green px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
+          >
+            Beta Release
+          </div>
+          <h1 class="relative m-0 max-w-3xl text-3xl font-bold !leading-[110%] md:text-6xl">
+            Host your next server with Modrinth Servers
+          </h1>
+        </div>
+        <h2
+          class="relative m-0 max-w-2xl text-base font-normal leading-[155%] text-secondary md:text-[1.2rem]"
+        >
+          Modrinth Servers is the easiest way to host your own Minecraft server. Seamlessly install
+          and play your favorite mods and modpacks, all within the Modrinth platform.
+        </h2>
+        <div class="relative flex w-full flex-wrap items-center gap-8 align-middle sm:w-fit">
+          <div
+            class="flex w-full flex-col items-center gap-5 text-center align-middle sm:w-fit sm:flex-row"
+          >
+            <ButtonStyled color="brand" size="large">
+              <nuxt-link class="w-fit" to="#plan">
+                <GameIcon aria-hidden="true" />
+                {{ hasServers ? "Start a new server" : "Start your server" }}
+              </nuxt-link>
+            </ButtonStyled>
+            <ButtonStyled v-if="hasServers" type="outlined" size="large">
+              <nuxt-link class="w-fit" to="/servers/manage">
+                <BoxIcon aria-hidden="true" /> Manage your servers
+              </nuxt-link>
+            </ButtonStyled>
+            <UiServersPoweredByPyro class="mx-0 !mt-0" />
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="absolute left-[55%] top-56 z-[5] hidden h-full max-h-[calc(100vh-10rem)] w-full rotate-1 xl:block"
+      >
+        <img
+          src="https://cdn.modrinth.com/servers/panel-right-dark.webp"
+          alt=""
+          aria-hidden="true"
+          class="pointer-events-none h-full w-fit select-none"
+        />
+      </div>
+
+      <div
+        class="top-26 pointer-events-none absolute left-0 z-[4] flex h-screen w-full flex-row items-end gap-24 sm:-right-1/4 sm:top-14"
+      >
+        <div
+          class="pointer-events-none absolute left-0 right-0 top-8 max-h-[90%] overflow-hidden sm:top-28 sm:mt-0"
+          style="mask-image: linear-gradient(black, transparent 80%)"
+        >
+          <img
+            src="https://cdn.modrinth.com/servers/bigrinth.webp"
+            alt=""
+            aria-hidden="true"
+            class="pointer-events-none w-full animate-spin select-none p-4 opacity-50"
+            style="
+              animation-duration: 172s !important;
+              animation-timing-function: linear;
+              animation-iteration-count: infinite;
+            "
+          />
+        </div>
+      </div>
+    </section>
+
+    <section
+      class="relative 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:pt-48"
+    >
+      <div class="faded-brand-line absolute left-0 top-0 h-[1px] w-full"></div>
+      <div class="relative mx-auto flex w-full max-w-7xl flex-col gap-8">
+        <div
+          class="relative w-fit rounded-full bg-highlight-green px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
+        >
+          Why Modrinth Servers?
+        </div>
+        <h1 class="relative m-0 max-w-2xl text-4xl leading-[120%] md:text-7xl">
+          Find a modpack. Now it's a server.
+        </h1>
+        <h2
+          class="relative m-0 max-w-2xl text-base font-normal leading-[155%] text-secondary md:text-[18px]"
+        >
+          Choose from the thousands of modpacks on Modrinth or create your own. Invite your friends
+          when you're ready to play.
+        </h2>
+        <img
+          src="https://cdn.modrinth.com/servers/excitement.webp"
+          alt=""
+          class="absolute right-14 top-0 hidden max-w-[360px] lg:block"
+        />
+        <div class="relative grid w-full grid-cols-1 gap-8 lg:grid-cols-2">
+          <div class="relative flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12">
+            <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-8 text-brand"
+            >
+              <path
+                d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z"
+              />
+              <rect x="3" y="14" width="7" height="7" rx="1" />
+              <circle cx="17.5" cy="17.5" r="3.5" />
+            </svg>
+            <h2 class="m-0 text-lg font-bold">Play where your mods are</h2>
+            <h3 class="m-0 text-base font-normal text-secondary">
+              Modrinth Servers seamlessly integrates the mod and modpack installation process into
+              your server.
+            </h3>
+          </div>
+
+          <div class="relative flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12">
+            <LoaderIcon loader="fabric" class="size-8 text-brand" />
+            <h2 class="m-0 text-lg font-bold">All your favorite mods</h2>
+            <h3 class="m-0 text-base font-normal text-secondary">
+              Choose between Vanilla, Fabric, Forge, Quilt and NeoForge. If it's on Modrinth, it can
+              run on your server.
+            </h3>
+          </div>
+        </div>
+        <div class="relative">
+          <img
+            src="https://cdn.modrinth.com/servers/installation-dark.webp"
+            alt=""
+            class="hidden w-full rounded-2xl sm:block"
+          />
+        </div>
+        <div class="grid w-full grid-cols-1 gap-8 lg:grid-cols-3">
+          <div class="flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12">
+            <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-8 text-brand"
+            >
+              <rect width="20" height="16" x="2" y="4" rx="2" />
+              <path d="M6 8h.01" />
+              <path d="M10 8h.01" />
+              <path d="M14 8h.01" />
+            </svg>
+            <h2 class="m-0 text-lg font-bold">Manage it all on Modrinth</h2>
+            <h3 class="m-0 text-base font-normal text-secondary">
+              Your server, mods, players, and more are all on Modrinth. No need to switch between
+              platforms.
+            </h3>
+          </div>
+
+          <div class="relative flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12">
+            <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-8 text-brand"
+            >
+              <polygon points="13 19 22 12 13 5 13 19" />
+              <polygon points="2 19 11 12 2 5 2 19" />
+            </svg>
+            <h2 class="m-0 text-lg font-bold">
+              Experience modern, reliable hosting powered by Pyro
+            </h2>
+            <h3 class="m-0 text-base font-normal text-secondary">
+              Modrinth Servers are hosted on
+              <span class="text-contrast">2023 Ryzen 7/9 CPUs with DDR5 RAM</span>, running on
+              custom-built software to ensure your server performs smoothly.
+            </h3>
+          </div>
+
+          <div class="relative flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12">
+            <ServerIcon class="size-8 text-brand" />
+            <h2 class="m-0 text-lg font-bold">Consistently fast</h2>
+            <h3 class="m-0 text-base font-normal text-secondary">
+              Under Pyro, infrastructure is never overloaded, meaning each Modrinth server always
+              runs at its full performance.
+              <a
+                class="mt-2 flex items-center gap-2 font-medium text-contrast transition-all hover:gap-3"
+                href="https://status.pyro.host/"
+                target="_blank"
+              >
+                See the infrastructure <RightArrowIcon class="flex-none" />
+              </a>
+            </h3>
+          </div>
+        </div>
+      </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="relative mx-auto flex w-full max-w-7xl flex-col gap-8">
+        <div
+          class="relative w-fit rounded-full bg-highlight-green px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
+        >
+          Included with your server
+        </div>
+        <h1 class="relative m-0 max-w-2xl text-4xl leading-[120%] md:text-7xl">
+          Comes with all the features you need.
+        </h1>
+        <h2
+          class="relative m-0 max-w-xl text-base font-normal leading-[155%] text-secondary md:text-[18px]"
+        >
+          Included with every server is a suite of features designed to provide a hosting experience
+          that only Modrinth can offer.
+        </h2>
+        <img
+          src="https://cdn.modrinth.com/servers/waving.webp"
+          alt=""
+          class="absolute right-8 top-40 hidden max-w-[480px] lg:block"
+        />
+        <div class="grid grid-cols-1 gap-9 lg:grid-cols-2">
+          <div class="grid w-full grid-cols-1 gap-8">
+            <div class="relative flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12">
+              <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-8 text-brand"
+              >
+                <circle cx="12" cy="12" r="10" />
+                <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
+                <path d="M2 12h20" />
+              </svg>
+              <h2 class="m-0 text-lg font-bold">Custom URL</h2>
+              <h3 class="m-0 text-base font-normal text-secondary">
+                Share your server with a custom
+                <span class="text-contrast">modrinth.gg</span> URL.
+              </h3>
+              <div
+                aria-hidden="true"
+                class="ooh-shiny absolute right-4 top-4 flex items-center justify-center rounded-full bg-bg-raised p-4"
+              >
+                <span class="font-bold text-contrast">{{ currentText }}</span
+                >.modrinth.gg
+              </div>
+            </div>
+            <div class="relative flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12">
+              <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-8 text-brand"
+              >
+                <path d="M12 13v8" />
+                <path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
+                <path d="m8 17 4-4 4 4" />
+              </svg>
+              <h2 class="m-0 text-lg font-bold">Backups included</h2>
+              <h3 class="m-0 text-base font-normal text-secondary">
+                Every server comes with 15 backups stored securely off-site with Backblaze.
+              </h3>
+            </div>
+          </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="relative flex flex-col gap-4 overflow-hidden rounded-2xl p-6 text-left sm:backdrop-blur-xl md:p-12"
+          >
+            <h2 class="m-0 text-lg font-bold">Easy to use file manager</h2>
+            <h3 class="m-0 text-base font-normal">
+              Search, manage, edit, and upload files directly to your server with ease.
+            </h3>
+
+            <img
+              src="https://cdn.modrinth.com/servers/content-dark.webp"
+              alt=""
+              class="absolute -bottom-12 -right-[15%] hidden max-w-2xl rounded-2xl bg-brand p-4 lg:block"
+            />
+            <div class="flex flex-row items-center gap-3">
+              <div
+                aria-hidden="true"
+                class="max-w-fit rounded-full bg-brand p-4 text-sm font-bold text-[var(--color-accent-contrast)] lg:absolute lg:bottom-8 lg:right-8 lg:block"
+              >
+                8.49 GB used
+              </div>
+              <div
+                aria-hidden="true"
+                class="flex w-fit items-center gap-2 rounded-full bg-button-bg p-3 lg:hidden"
+              >
+                <SortAscendingIcon class="h-6 w-6" />
+                Sort
+              </div>
+              <div
+                aria-hidden="true"
+                class="flex w-fit items-center rounded-full bg-button-bg p-3 lg:hidden"
+              >
+                <SearchIcon class="h-6 w-6" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="grid w-full grid-cols-1 gap-8 lg:grid-cols-2">
+          <div class="relative flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12">
+            <TerminalSquareIcon class="size-8 text-brand" />
+            <h2 class="m-0 text-lg font-bold">
+              A powerful console, server properties manager, and more
+            </h2>
+            <h3 class="m-0 text-base font-normal text-secondary">
+              Modrinth Servers come with powerful tools to manage your server.
+            </h3>
+          </div>
+          <div class="relative flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12">
+            <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-8 text-brand"
+            >
+              <path
+                d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
+              />
+              <path
+                d="M12 5 9.04 7.96a2.17 2.17 0 0 0 0 3.08c.82.82 2.13.85 3 .07l2.07-1.9a2.82 2.82 0 0 1 3.79 0l2.96 2.66"
+              />
+              <path d="m18 15-2-2" />
+              <path d="m15 18-2-2" />
+            </svg>
+            <h2 class="m-0 text-lg font-bold">Help when you need it</h2>
+            <h3 class="m-0 text-base font-normal text-secondary">
+              Reach out to the Modrinth team for help with your server at any time.
+            </h3>
+          </div>
+        </div>
+
+        <div class="grid w-full grid-cols-1 gap-8 lg:grid-cols-2">
+          <div class="relative flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12">
+            <TransferIcon class="size-8 text-brand" />
+            <h2 class="m-0 text-lg font-bold">SFTP access</h2>
+            <h3 class="m-0 text-base font-normal text-secondary">
+              Access your server files directly with SFTP built into Modrinth Servers.
+            </h3>
+          </div>
+          <div class="relative flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12">
+            <VersionIcon class="size-8 text-brand" />
+            <h2 class="m-0 text-lg font-bold">Advanced networking management</h2>
+            <h3 class="m-0 text-base font-normal text-secondary">
+              Add your own domain to your server, reserve up to 15 ports for mods that require them,
+              and more.
+            </h3>
+          </div>
+        </div>
+        <div class="relative flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12">
+          <h1 class="m-0 text-lg font-bold">Frequently Asked Questions</h1>
+          <div class="details-hide flex flex-col gap-1">
+            <details pyro-hash="cpus" class="group" :open="$route.hash === '#cpus'">
+              <summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
+                <span class="mr-2 transition-transform duration-200 group-open:rotate-90">
+                  <RightArrowIcon />
+                </span>
+                What kind of CPUs do Modrinth Servers run on?
+              </summary>
+              <p class="m-0 !leading-[190%]">
+                Modrinth Servers use 2023 Ryzen 7 and Ryzen 9 CPUs at 4+ GHz, paired with DDR5
+                memory.
+              </p>
+            </details>
+
+            <details pyro-hash="ddos" class="group" :open="$route.hash === '#ddos'">
+              <summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
+                <span class="mr-2 transition-transform duration-200 group-open:rotate-90">
+                  <RightArrowIcon />
+                </span>
+                Do Modrinth Servers have DDoS protection?
+              </summary>
+              <p class="m-0 !leading-[190%]">
+                Yes. All Modrinth Servers come with DDoS protection. Protection is powered by a
+                combination of in-house network filtering by Pyro as well as with our data center
+                provider. Your server is safe on Modrinth.
+              </p>
+            </details>
+
+            <details pyro-hash="region" class="group" :open="$route.hash === '#region'">
+              <summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
+                <span class="mr-2 transition-transform duration-200 group-open:rotate-90">
+                  <RightArrowIcon />
+                </span>
+                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.
+              </p>
+            </details>
+
+            <details pyro-hash="storage" class="group" :open="$route.hash === '#storage'">
+              <summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
+                <span class="mr-2 transition-transform duration-200 group-open:rotate-90">
+                  <RightArrowIcon />
+                </span>
+                Can I increase the storage on my server?
+              </summary>
+              <p class="m-0 !leading-[190%]">
+                Yes, storage can be increased on your server at no additional cost. If you need more
+                storage, reach out to Modrinth Support.
+              </p>
+            </details>
+
+            <details pyro-hash="players" class="group" :open="$route.hash === '#players'">
+              <summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
+                <span class="mr-2 transition-transform duration-200 group-open:rotate-90">
+                  <RightArrowIcon />
+                </span>
+                How fast are Modrinth Servers? How many players can they handle?
+              </summary>
+              <p class="m-0 !leading-[190%]">
+                During the Modrinth "Emergency SMP" test, we had over 80 players on a server running
+                on the Large plan. The server ran smoothly and was only limited by RAM. We're
+                confident that Modrinth Servers can handle a large number of players, with any kind
+                of modpack.
+              </p>
+            </details>
+          </div>
+        </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"
+    >
+      <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 items-center gap-8 text-center">
+        <h1 class="relative m-0 text-4xl leading-[120%] md:text-7xl">
+          Start your server on Modrinth
+        </h1>
+        <h2
+          class="relative m-0 max-w-xl text-base font-normal leading-[155%] text-secondary md:text-[18px]"
+        >
+          {{
+            isAtCapacity && !loggedOut
+              ? "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
+              </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">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
+              </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">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
+              </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">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"
+        >
+          <div class="flex flex-col gap-4">
+            <h1 class="m-0">Build your own</h1>
+            <h2 class="m-0 text-base font-normal">
+              If you're a more technical server administrator, you can pick your own RAM and storage
+              options.
+            </h2>
+          </div>
+
+          <div class="flex w-full flex-col-reverse gap-2 md:w-auto md:flex-col md:items-center">
+            <ButtonStyled color="standard" size="large">
+              <button class="w-full md:w-fit" @click="selectProduct('custom')">
+                Build your own
+                <RightArrowIcon class="!min-h-4 !min-w-4" />
+              </button>
+            </ButtonStyled>
+            <p class="m-0 text-sm">Starting at $3/GB RAM</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { ButtonStyled, PurchaseModal } from "@modrinth/ui";
+import {
+  BoxIcon,
+  GameIcon,
+  RightArrowIcon,
+  SearchIcon,
+  SortAscendingIcon,
+  ExternalIcon,
+  TerminalSquareIcon,
+  TransferIcon,
+  VersionIcon,
+  ServerIcon,
+} from "@modrinth/assets";
+import { products } from "~/generated/state.json";
+import LoaderIcon from "~/components/ui/servers/icons/LoaderIcon.vue";
+
+const pyroProducts = products.filter((p) => p.metadata.type === "pyro");
+const pyroPlanProducts = pyroProducts.filter(
+  (p) => p.metadata.ram === 4096 || p.metadata.ram === 6144 || p.metadata.ram === 8192,
+);
+pyroPlanProducts.sort((a, b) => a.metadata.ram - b.metadata.ram);
+
+const title = "Modrinth Servers";
+const description =
+  "Start your own Minecraft server directly on Modrinth. Play your favorite mods, plugins, and datapacks — without the hassle of setup.";
+
+useSeoMeta({
+  title,
+  description,
+  ogTitle: title,
+  ogDescription: description,
+});
+
+useHead({
+  script: [
+    {
+      src: "https://js.stripe.com/v3/",
+      defer: true,
+      async: true,
+    },
+  ],
+});
+
+const auth = await useAuth();
+const data = useNuxtApp();
+const config = useRuntimeConfig();
+const purchaseModal = ref(null);
+const country = useUserCountry();
+const customer = ref(null);
+const paymentMethods = ref([]);
+const selectedProduct = ref(null);
+const customServer = ref(false);
+const showModal = ref(false);
+const modalKey = ref(0);
+
+const words = ["my-smp", "medieval-masters", "create-server", "mega-smp", "spookypack"];
+const currentWordIndex = ref(0);
+const currentText = ref("");
+const isDeleting = ref(false);
+const typingSpeed = 75;
+const deletingSpeed = 25;
+const pauseTime = 2000;
+
+const loggedOut = computed(() => !auth.value.user);
+const outOfStockUrl = "https://support.modrinth.com";
+
+const { data: hasServers } = await useAsyncData("ServerListCountCheck", async () => {
+  try {
+    if (!auth.value.user) return false;
+    const response = await usePyroFetch("servers");
+    return response.servers && response.servers.length > 0;
+  } catch {
+    return false;
+  }
+});
+
+async function fetchCapacityStatuses(customProduct = null) {
+  try {
+    const productsToCheck = customProduct?.metadata ? [customProduct] : pyroPlanProducts;
+    const capacityChecks = productsToCheck.map((product) =>
+      usePyroFetch("capacity", {
+        method: "POST",
+        body: {
+          cpu: product.metadata.cpu,
+          memory_mb: product.metadata.ram,
+          swap_mb: product.metadata.swap,
+          storage_mb: product.metadata.storage,
+        },
+      }),
+    );
+
+    const results = await Promise.all(capacityChecks);
+    if (customProduct?.metadata) {
+      return {
+        custom: results[0],
+      };
+    } else {
+      return {
+        small: results[0],
+        medium: results[1],
+        large: results[2],
+      };
+    }
+  } catch (error) {
+    console.error("Error checking server capacities:", error);
+    return {
+      custom: { available: 0 },
+      small: { available: 0 },
+      medium: { available: 0 },
+      large: { available: 0 },
+    };
+  }
+}
+
+const { data: capacityStatuses, refresh: refreshCapacity } = await useAsyncData(
+  "ServerCapacityAll",
+  fetchCapacityStatuses,
+);
+
+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 startTyping = () => {
+  const currentWord = words[currentWordIndex.value];
+  if (isDeleting.value) {
+    if (currentText.value.length > 0) {
+      currentText.value = currentText.value.slice(0, -1);
+      setTimeout(startTyping, deletingSpeed);
+    } else {
+      isDeleting.value = false;
+      currentWordIndex.value = (currentWordIndex.value + 1) % words.length;
+      setTimeout(startTyping, typingSpeed);
+    }
+  } else if (currentText.value.length < currentWord.length) {
+    currentText.value = currentWord.slice(0, currentText.value.length + 1);
+    setTimeout(startTyping, typingSpeed);
+  } else {
+    isDeleting.value = true;
+    setTimeout(startTyping, pauseTime);
+  }
+};
+
+const handleError = (err) => {
+  addNotification({
+    group: "main",
+    title: "An error occurred",
+    type: "error",
+    text: err.message ?? (err.data ? err.data.description : err),
+  });
+};
+
+const handleModalHidden = () => {
+  showModal.value = false;
+};
+
+watch(selectedProduct, async (newProduct) => {
+  if (newProduct) {
+    showModal.value = false;
+    await nextTick();
+    showModal.value = true;
+    modalKey.value++;
+    await nextTick();
+    if (purchaseModal.value && purchaseModal.value.show) {
+      purchaseModal.value.show();
+    }
+  }
+});
+
+async function fetchPaymentData() {
+  if (!auth.value.user) return;
+  try {
+    const [customerData, paymentMethodsData] = await Promise.all([
+      useBaseFetch("billing/customer", { internal: true }),
+      useBaseFetch("billing/payment_methods", { internal: true }),
+    ]);
+    customer.value = customerData;
+    paymentMethods.value = paymentMethodsData;
+  } catch (error) {
+    console.error("Error fetching payment data:", error);
+    addNotification({
+      group: "main",
+      title: "Error fetching payment data",
+      type: "error",
+      text: error.message || "An unexpected error occurred",
+    });
+  }
+}
+
+const route = useRoute();
+const isAtCapacity = computed(
+  () => isSmallAtCapacity.value && isMediumAtCapacity.value && isLargeAtCapacity.value,
+);
+
+const scrollToFaq = () => {
+  if (route.hash) {
+    // where pyro-hash === route.hash
+    const faq = document.querySelector(`[pyro-hash="${route.hash.slice(1)}"]`);
+    if (faq) {
+      faq.open = true;
+      const top = faq.getBoundingClientRect().top;
+      const offset = window.innerHeight / 2 - faq.clientHeight / 2;
+      window.scrollTo({ top: window.scrollY + top - offset, behavior: "smooth" });
+    }
+  }
+};
+
+onMounted(scrollToFaq);
+
+watch(() => route.hash, scrollToFaq);
+
+const plans = {
+  small: pyroPlanProducts?.[0],
+  medium: pyroPlanProducts?.[1],
+  large: pyroPlanProducts?.[2],
+  custom: pyroProducts || [],
+};
+
+const selectProduct = async (product) => {
+  if (loggedOut.value) {
+    data.$router.push(`/auth/sign-in?redirect=${encodeURIComponent("/servers?plan=" + product)}`);
+    return;
+  }
+
+  await refreshCapacity();
+  if (isAtCapacity.value) {
+    addNotification({
+      group: "main",
+      title: "Server Capacity Full",
+      type: "error",
+      text: "We are currently at capacity. Please try again later.",
+    });
+    return;
+  }
+
+  const selectedPlan = plans[product];
+  if (!selectedPlan) return;
+
+  if (
+    (product === "custom" && !selectedPlan.length) ||
+    (product !== "custom" && !selectedPlan.metadata)
+  ) {
+    addNotification({
+      group: "main",
+      title: "Invalid product",
+      type: "error",
+      text: "The selected product was found but lacks necessary data. Please contact support.",
+    });
+    return;
+  }
+
+  // required for the purchase modal
+  if (!pyroProducts.metadata) {
+    pyroProducts.metadata = {};
+  }
+  pyroProducts.metadata.type = "pyro";
+
+  customServer.value = product === "custom";
+  selectedProduct.value = selectedPlan;
+  showModal.value = true;
+  modalKey.value++;
+  await nextTick();
+
+  if (purchaseModal.value && purchaseModal.value.show) {
+    purchaseModal.value.show();
+  }
+};
+
+const planQuery = () => {
+  if (route.query.plan) {
+    document.getElementById("plan").scrollIntoView();
+    selectProduct(route.query.plan);
+  }
+};
+
+onMounted(() => {
+  startTyping();
+  planQuery();
+});
+
+watch(customer, (newCustomer) => {
+  if (newCustomer) planQuery();
+});
+
+onMounted(() => {
+  document.body.style.background = "var(--color-accent-contrast)";
+  document.body.style.overflowX = "hidden !important";
+  const layoutDiv = document.querySelector(".layout");
+  if (layoutDiv) {
+    layoutDiv.style.background = "var(--color-accent-contrast)";
+  }
+  fetchPaymentData();
+});
+
+onUnmounted(() => {
+  document.body.style.background = "";
+  document.body.style.overflowX = "";
+  const layoutDiv = document.querySelector(".layout");
+  if (layoutDiv) {
+    layoutDiv.style.background = "";
+  }
+  if (window.Stripe) {
+    window.Stripe = null;
+  }
+});
+</script>
+
+<style scoped>
+.servers-hero {
+  background: radial-gradient(
+    65% 30% at 50% -10%,
+    var(--color-brand-highlight) 0%,
+    var(--color-accent-contrast) 100%
+  );
+}
+
+.faded-brand-line {
+  background: linear-gradient(to right, var(--color-brand-highlight), transparent);
+}
+
+.details-hide summary::-webkit-details-marker {
+  display: none;
+}
+</style>
diff --git a/apps/frontend/src/pages/servers/manage/[id].vue b/apps/frontend/src/pages/servers/manage/[id].vue
new file mode 100644
index 000000000..5dc51646d
--- /dev/null
+++ b/apps/frontend/src/pages/servers/manage/[id].vue
@@ -0,0 +1,823 @@
+<template>
+  <div class="contents">
+    <div
+      v-if="server.error && server.error.message.includes('Forbidden')"
+      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-orange p-4">
+              <TransferIcon class="size-12 text-orange" />
+            </div>
+            <h1 class="m-0 mb-2 w-fit text-4xl font-bold">Server not found</h1>
+          </div>
+          <p class="text-lg text-secondary">
+            You don't have permission to view this server or it no longer exists. If you believe
+            this is an error, please contact Modrinth support.
+          </p>
+        </div>
+        <UiCopyCode :text="server.error ? String(server.error) : 'Unknown 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"
+      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-orange p-4">
+              <TransferIcon class="size-12 text-orange" />
+            </div>
+            <h1 class="m-0 mb-2 w-fit text-4xl font-bold">Connection lost</h1>
+            <div class="text-center text-secondary">
+              {{
+                formattedTime == "00"
+                  ? "Reconnecting..."
+                  : `Retrying in ${formattedTime} seconds...`
+              }}
+            </div>
+          </div>
+          <p class="text-lg text-secondary">
+            Something went wrong, and we couldn't connect to your server. This is likely due to a
+            temporary network issue. You'll be reconnected automatically.
+          </p>
+        </div>
+        <UiCopyCode :text="server.error ? String(server.error) : 'Unknown error'" />
+        <ButtonStyled
+          :disabled="formattedTime !== '00'"
+          size="large"
+          color="brand"
+          @click="() => reloadNuxtApp()"
+        >
+          <button class="mt-6 !w-full">Reload</button>
+        </ButtonStyled>
+      </div>
+    </div>
+    <div
+      v-else-if="serverData"
+      data-pyro-server-manager-root
+      class="experimental-styles-within mobile-blurred-servericon relative mx-auto box-border flex min-h-screen w-full min-w-0 max-w-[1280px] flex-col gap-6 px-3 transition-all duration-300"
+      :style="{
+        '--server-bg-image': serverData.image
+          ? `url(${serverData.image})`
+          : `linear-gradient(180deg, rgba(153,153,153,1) 0%, rgba(87,87,87,1) 100%)`,
+      }"
+    >
+      <div class="flex w-full min-w-0 select-none flex-col items-center gap-6 pt-4 sm:flex-row">
+        <UiServersServerIcon :image="serverData.image" class="drop-shadow-lg sm:drop-shadow-none" />
+        <div
+          class="flex min-w-0 flex-1 flex-col-reverse items-center gap-2 sm:flex-col sm:items-start"
+        >
+          <div class="hidden shrink-0 flex-row items-center gap-1 sm:flex">
+            <NuxtLink to="/servers/manage" class="breadcrumb goto-link flex w-fit items-center">
+              <LeftArrowIcon />
+              All servers
+            </NuxtLink>
+          </div>
+          <div class="flex w-full flex-col items-center gap-4 sm:flex-row">
+            <h1
+              class="m-0 w-screen flex-shrink gap-3 truncate px-3 text-center text-4xl font-bold text-contrast sm:w-full sm:p-0 sm:text-left"
+            >
+              {{ serverData.name }}
+            </h1>
+            <div
+              v-if="isConnected"
+              data-pyro-server-action-buttons
+              class="server-action-buttons-anim flex w-fit flex-shrink-0"
+            >
+              <UiServersPanelServerActionButton
+                class="flex-shrink-0"
+                :is-online="isServerRunning"
+                :is-actioning="isActioning"
+                :is-installing="serverData.status === 'installing'"
+                :disabled="isActioning || !!error"
+                :server-name="serverData.name"
+                :server-data="serverData"
+                :uptime-seconds="uptimeSeconds"
+                @action="sendPowerAction"
+              />
+            </div>
+          </div>
+
+          <UiServersServerInfoLabels
+            :server-data="serverData"
+            :show-game-label="showGameLabel"
+            :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"
+          />
+        </div>
+      </div>
+
+      <div
+        data-pyro-navigation
+        class="isolate flex w-full select-none flex-col justify-between gap-4 overflow-auto md:flex-row md:items-center"
+      >
+        <UiNavTabs :links="navLinks" />
+      </div>
+
+      <div data-pyro-mount class="h-full w-full flex-1">
+        <div
+          v-if="error"
+          class="mx-auto mb-4 flex justify-between gap-2 rounded-2xl border-2 border-solid border-red bg-bg-red p-4 font-semibold text-contrast"
+        >
+          <div class="flex flex-row gap-4">
+            <IssuesIcon class="hidden h-8 w-8 text-red sm:block" />
+            <div class="flex flex-col gap-2 leading-[150%]">
+              <div class="flex items-center gap-3">
+                <IssuesIcon class="block h-8 w-8 text-red sm:hidden" />
+                <div class="flex gap-2 text-xl font-bold">{{ errorTitle }}</div>
+              </div>
+
+              <div
+                v-if="errorTitle.toLocaleLowerCase() === 'installation error'"
+                class="font-normal"
+              >
+                <div
+                  v-if="
+                    errorMessage.toLocaleLowerCase() === 'the specified version may be incorrect'
+                  "
+                >
+                  An invalid loader or Minecraft version was specified and could not be installed.
+                  <ul class="m-0 mt-4 p-0 pl-4">
+                    <li>
+                      If this version of Minecraft was released recently, please check if Modrinth
+                      Servers supports it.
+                    </li>
+                    <li>
+                      If you've installed a modpack, it may have been packaged incorrectly or may
+                      not be compatible with the loader.
+                    </li>
+                    <li>
+                      Your server may need to be reinstalled with a valid mod loader and version.
+                      You can change the loader by clicking the "Change Loader" button.
+                    </li>
+                    <li>
+                      If you're stuck, please contact Modrinth support with the information below:
+                    </li>
+                  </ul>
+                  <ButtonStyled>
+                    <button class="mt-2" @click="copyServerDebugInfo">
+                      <CopyIcon v-if="!copied" />
+                      <CheckIcon v-else />
+                      Copy Debug Info
+                    </button>
+                  </ButtonStyled>
+                </div>
+                <div v-if="errorMessage.toLocaleLowerCase() === 'internal error'">
+                  An internal error occurred while installing your server. Don't fret — try
+                  reinstalling your server, and if the problem persists, please contact Modrinth
+                  support with your server's debug information.
+                </div>
+
+                <div
+                  v-if="errorTitle === 'Installation error'"
+                  class="mt-2 flex flex-col gap-4 sm:flex-row"
+                >
+                  <ButtonStyled v-if="errorLog">
+                    <button @click="openInstallLog"><FileIcon />Open Installation Log</button>
+                  </ButtonStyled>
+                  <ButtonStyled>
+                    <button @click="copyServerDebugInfo">
+                      <CopyIcon v-if="!copied" />
+                      <CheckIcon v-else />
+                      Copy Debug Info
+                    </button>
+                  </ButtonStyled>
+                  <ButtonStyled color="red" type="standard">
+                    <NuxtLink
+                      class="whitespace-pre"
+                      :to="`/servers/manage/${serverId}/options/loader`"
+                    >
+                      <RightArrowIcon />
+                      Change Loader
+                    </NuxtLink>
+                  </ButtonStyled>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div
+          v-if="!isConnected && !isReconnecting && !isLoading"
+          data-pyro-server-ws-error
+          class="mb-4 flex w-full flex-row items-center gap-4 rounded-2xl bg-bg-red p-4 text-contrast"
+        >
+          <IssuesIcon class="size-5 text-red" />
+          Something went wrong...
+        </div>
+
+        <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"
+        >
+          <UiServersPanelSpinner />
+          Hang on, we're reconnecting to your server.
+        </div>
+
+        <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"
+        >
+          <UiServersPanelSpinner />
+          We're preparing your server, this may take a few minutes.
+        </div>
+
+        <NuxtPage
+          :route="route"
+          :is-connected="isConnected"
+          :is-ws-auth-incorrect="isWSAuthIncorrect"
+          :is-server-running="isServerRunning"
+          :stats="stats"
+          :server-power-state="serverPowerState"
+          :console-output="throttledConsoleOutput"
+          :socket="socket"
+          :server="server"
+          @reinstall="onReinstall"
+        />
+      </div>
+
+      <UiServersPoweredByPyro />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from "vue";
+import {
+  CopyIcon,
+  IssuesIcon,
+  LeftArrowIcon,
+  RightArrowIcon,
+  CheckIcon,
+  FileIcon,
+  TransferIcon,
+} from "@modrinth/assets";
+import DOMPurify from "dompurify";
+import { ButtonStyled } from "@modrinth/ui";
+import { refThrottled } from "@vueuse/core";
+import type { ServerState, Stats, WSEvent, WSInstallationResultEvent } from "~/types/servers";
+
+const socket = ref<WebSocket | null>(null);
+const isReconnecting = ref(false);
+const isLoading = ref(true);
+const reconnectInterval = ref<ReturnType<typeof setInterval> | null>(null);
+const isFirstMount = ref(true);
+const isMounted = ref(true);
+
+const route = useNativeRoute();
+const router = useRouter();
+const serverId = route.params.id as string;
+const server = await usePyroServer(serverId, [
+  "general",
+  "mods",
+  "backups",
+  "network",
+  "startup",
+  "ws",
+  "fs",
+]);
+
+watch(
+  () => server.error,
+  (newError) => {
+    if (newError && !newError.message.includes("Forbidden")) {
+      startPolling();
+    }
+  },
+);
+
+const errorTitle = ref("Error");
+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 maxConsoleOutput = 5000;
+const consoleOutput = ref<string[]>([]);
+const throttledConsoleOutput = refThrottled(consoleOutput, 200);
+const cpuData = ref<number[]>([]);
+const ramData = ref<number[]>([]);
+const isActioning = ref(false);
+const isServerRunning = computed(() => serverPowerState.value === "running");
+const serverPowerState = ref<ServerState>("stopped");
+const uptimeSeconds = ref(0);
+const firstConnect = ref(true);
+const copied = ref(false);
+
+const initialConsoleMessage = [
+  "   __________________________________________________",
+  " /  Welcome to your \x1B[32mModrinth Server\x1B[37m!                  \\",
+  "|   Press the green start button to start your server! |",
+  " \\____________________________________________________/",
+  "\x1B[32m     _    _ \x1B[37m",
+  "\x1B[32m    (o)--(o)      \x1B[37m",
+  "\x1B[32m   /.______.\\\x1B[37m",
+  "\x1B[32m   \\________/     \x1B[37m",
+  "\x1B[32m  ./        \\.    \x1B[37m",
+  "\x1B[32m ( .        , )\x1B[37m",
+  "\x1B[32m  \\ \\_\\\\ //_/ /\x1B[37m",
+  "\x1B[32m   ~~  ~~  ~~\x1B[37m",
+];
+
+const stats = ref<Stats>({
+  current: {
+    cpu_percent: 0,
+    ram_usage_bytes: 0,
+    ram_total_bytes: 1,
+    storage_usage_bytes: 0,
+    storage_total_bytes: 0,
+  },
+  past: {
+    cpu_percent: 0,
+    ram_usage_bytes: 0,
+    ram_total_bytes: 1,
+    storage_usage_bytes: 0,
+    storage_total_bytes: 0,
+  },
+  graph: {
+    cpu: [],
+    ram: [],
+  },
+});
+
+const showGameLabel = computed(() => !!serverData.value?.game);
+const showLoaderLabel = computed(() => !!serverData.value?.loader);
+
+const navLinks = [
+  { label: "Overview", href: `/servers/manage/${serverId}`, subpages: [] },
+  {
+    label: "Content",
+    href: `/servers/manage/${serverId}/content`,
+    subpages: ["mods", "datapacks"],
+  },
+  { label: "Files", href: `/servers/manage/${serverId}/files`, subpages: [] },
+  { label: "Backups", href: `/servers/manage/${serverId}/backups`, subpages: [] },
+  {
+    label: "Options",
+    href: `/servers/manage/${serverId}/options`,
+    subpages: ["startup", "network", "properties", "info"],
+  },
+];
+
+const connectWebSocket = () => {
+  if (!isMounted.value) return;
+
+  try {
+    const wsAuth = computed(() => server.ws);
+    socket.value = new WebSocket(`wss://${wsAuth.value?.url}`);
+
+    socket.value.onopen = () => {
+      if (!isMounted.value) {
+        socket.value?.close();
+        return;
+      }
+
+      consoleOutput.value = [];
+      socket.value?.send(JSON.stringify({ event: "auth", jwt: wsAuth.value?.token }));
+      isConnected.value = true;
+      isReconnecting.value = false;
+      isLoading.value = false;
+
+      if (firstConnect.value) {
+        for (let i = 0; i < initialConsoleMessage.length; i++) {
+          consoleOutput.value.push(initialConsoleMessage[i]);
+        }
+      }
+
+      firstConnect.value = false;
+
+      if (reconnectInterval.value) {
+        if (reconnectInterval.value !== null) {
+          clearInterval(reconnectInterval.value);
+        }
+        reconnectInterval.value = null;
+      }
+    };
+
+    socket.value.onmessage = (event) => {
+      if (isMounted.value) {
+        const data: WSEvent = JSON.parse(event.data);
+        handleWebSocketMessage(data);
+      }
+    };
+
+    socket.value.onclose = () => {
+      if (isMounted.value) {
+        consoleOutput.value.push(
+          "\nSomething went wrong with the connection, we're reconnecting...",
+        );
+        isConnected.value = false;
+        scheduleReconnect();
+      }
+    };
+
+    socket.value.onerror = (error) => {
+      if (isMounted.value) {
+        console.error("Failed to connect WebSocket:", error);
+        isConnected.value = false;
+        scheduleReconnect();
+      }
+    };
+  } catch (error) {
+    if (isMounted.value) {
+      console.error("Failed to connect WebSocket:", error);
+      isConnected.value = false;
+      scheduleReconnect();
+    }
+  }
+};
+
+const scheduleReconnect = () => {
+  if (!isMounted.value) return;
+
+  if (!reconnectInterval.value) {
+    isReconnecting.value = true;
+    reconnectInterval.value = setInterval(() => {
+      if (isMounted.value) {
+        console.log("Attempting to reconnect...");
+        connectWebSocket();
+      } else {
+        reconnectInterval.value = null;
+      }
+    }, 5000);
+  }
+};
+
+let uptimeIntervalId: ReturnType<typeof setInterval> | null = null;
+
+const startUptimeUpdates = () => {
+  uptimeIntervalId = setInterval(() => {
+    uptimeSeconds.value += 1;
+  }, 1000);
+};
+
+const stopUptimeUpdates = () => {
+  if (uptimeIntervalId) {
+    clearInterval(uptimeIntervalId);
+    intervalId = null;
+  }
+};
+
+const handleWebSocketMessage = (data: WSEvent) => {
+  switch (data.event) {
+    case "log":
+      // eslint-disable-next-line no-case-declarations
+      const log = data.message.split("\n").filter((l) => l.trim());
+      if (consoleOutput.value.length > maxConsoleOutput) {
+        consoleOutput.value.shift();
+      }
+      consoleOutput.value.push(...log);
+      break;
+    case "stats":
+      updateStats(data);
+      break;
+    case "auth-expiring":
+    case "auth-incorrect":
+      reauthenticate();
+      break;
+    case "power-state":
+      updatePowerState(data.state);
+      break;
+    case "installation-result":
+      handleInstallationResult(data);
+      break;
+    case "new-mod":
+      server.refresh(["mods"]);
+      console.log("New mod:", data);
+      break;
+    case "auth-ok":
+      break;
+    case "uptime":
+      stopUptimeUpdates();
+      uptimeSeconds.value = data.uptime;
+      startUptimeUpdates();
+      break;
+    default:
+      console.warn("Unhandled WebSocket event:", data);
+  }
+};
+
+const newLoader = ref<string | null>(null);
+const newLoaderVersion = ref<string | null>(null);
+const newMCVersion = ref<string | null>(null);
+
+const handleInstallationResult = async (data: WSInstallationResultEvent) => {
+  switch (data.result) {
+    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;
+      }
+
+      error.value = null;
+      break;
+    case "err": {
+      console.log("failed to install");
+      console.log(data);
+      errorTitle.value = "Installation error";
+      errorMessage.value = data.reason ?? "Unknown error";
+      error.value = new Error(data.reason ?? "Unknown error");
+      let files = await server.fs?.listDirContents("/", 1, 100);
+      if (files.total > 1) {
+        for (let i = 1; i < files.total; i++) {
+          files = await server.fs?.listDirContents("/", i, 100);
+          if (files.items?.length === 0) break;
+        }
+      }
+      const fileName = await files.items?.find((file: { name: string }) =>
+        file.name.startsWith("modrinth-installation"),
+      )?.name;
+      errorLogFile.value = fileName;
+      errorLog.value = await server.fs?.downloadFile(fileName);
+      break;
+    }
+  }
+};
+
+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 loader to", potentialArgs.loader);
+  //   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 = {
+    current: currentStats,
+    past: { ...stats.value.current },
+    graph: {
+      cpu: updateGraphData(cpuData.value, currentStats.cpu_percent),
+      ram: updateGraphData(
+        ramData.value,
+        Math.floor((currentStats.ram_usage_bytes / currentStats.ram_total_bytes) * 100),
+      ),
+    },
+  };
+};
+
+const updatePowerState = (state: ServerState) => {
+  console.log("Power state:", state);
+  serverPowerState.value = state;
+  if (state === "stopped" || state === "crashed") {
+    stopUptimeUpdates();
+    uptimeSeconds.value = 0;
+  }
+};
+
+const updateGraphData = (dataArray: number[], newValue: number): number[] => {
+  const updated = [...dataArray, newValue];
+  if (updated.length > 10) updated.shift();
+  return updated;
+};
+
+const reauthenticate = async () => {
+  try {
+    await server.refresh();
+    const wsAuth = computed(() => server.ws);
+    socket.value?.send(JSON.stringify({ event: "auth", jwt: wsAuth.value?.token }));
+  } catch (error) {
+    console.error("Reauthentication failed:", error);
+    isWSAuthIncorrect.value = true;
+  }
+};
+
+const toAdverb = (word: string) => {
+  if (word.endsWith("p")) {
+    return word + "ping";
+  }
+  if (word.endsWith("e")) {
+    return word.slice(0, -1) + "ing";
+  }
+  if (word.endsWith("ie")) {
+    return word.slice(0, -2) + "ying";
+  }
+  return word + "ing";
+};
+
+const sendPowerAction = async (action: "restart" | "start" | "stop" | "kill") => {
+  const actionName = action.charAt(0).toUpperCase() + action.slice(1);
+  try {
+    isActioning.value = true;
+    await server.general?.power(actionName);
+  } catch (error) {
+    console.error(`Error ${toAdverb(actionName)} server:`, error);
+    notifyError(
+      `Error ${toAdverb(actionName)} server`,
+      "An error occurred while performing this action.",
+    );
+  } finally {
+    isActioning.value = false;
+  }
+};
+
+const notifyError = (title: string, text: string) => {
+  addNotification({
+    group: "server",
+    title,
+    text,
+    type: "error",
+  });
+};
+
+let intervalId: ReturnType<typeof setInterval> | null = null;
+const countdown = ref(15);
+
+const formattedTime = computed(() => {
+  const seconds = countdown.value % 60;
+  return `${seconds.toString().padStart(2, "0")}`;
+});
+
+const stopPolling = () => {
+  if (intervalId) {
+    clearInterval(intervalId);
+    intervalId = null;
+  }
+};
+
+const startPolling = () => {
+  countdown.value = 15;
+  intervalId = setInterval(() => {
+    if (countdown.value <= 0) {
+      reloadNuxtApp();
+    } else {
+      countdown.value--;
+    }
+  }, 1000);
+};
+
+const copyServerDebugInfo = () => {
+  const debugInfo = `Server ID: ${serverData.value?.server_id}\nError: ${errorMessage.value}\nKind: ${serverData.value?.upstream?.kind}\nProject ID: ${serverData.value?.upstream?.project_id}\nVersion ID: ${serverData.value?.upstream?.version_id}\nLog: ${errorLog.value}`;
+  navigator.clipboard.writeText(debugInfo);
+  copied.value = true;
+  setTimeout(() => {
+    copied.value = false;
+  }, 5000);
+};
+
+const openInstallLog = () => {
+  router.replace({
+    path: `/servers/manage/${serverId}/files`,
+    query: { ...route.query, editing: errorLogFile.value },
+  });
+};
+
+const cleanup = () => {
+  isMounted.value = false;
+
+  stopPolling();
+  stopUptimeUpdates();
+  if (reconnectInterval.value) {
+    clearInterval(reconnectInterval.value);
+    reconnectInterval.value = null;
+  }
+
+  if (socket.value) {
+    socket.value.onopen = null;
+    socket.value.onmessage = null;
+    socket.value.onclose = null;
+    socket.value.onerror = null;
+
+    if (
+      socket.value.readyState === WebSocket.OPEN ||
+      socket.value.readyState === WebSocket.CONNECTING
+    ) {
+      socket.value.close();
+    }
+    socket.value = null;
+  }
+
+  isConnected.value = false;
+  isReconnecting.value = false;
+  isLoading.value = true;
+
+  DOMPurify.removeHook("afterSanitizeAttributes");
+};
+
+onMounted(() => {
+  isMounted.value = true;
+  if (server.error) {
+    if (!server.error.message.includes("Forbidden")) {
+      startPolling();
+    }
+  } else {
+    connectWebSocket();
+  }
+
+  DOMPurify.addHook(
+    "afterSanitizeAttributes",
+    (node: {
+      tagName: string;
+      getAttribute: (arg0: string) => any;
+      setAttribute: (arg0: string, arg1: string) => void;
+    }) => {
+      if (node.tagName === "A" && node.getAttribute("target")) {
+        node.setAttribute("rel", "noopener noreferrer");
+      }
+    },
+  );
+});
+
+onUnmounted(() => {
+  cleanup();
+});
+
+watch(
+  () => serverData.value?.status,
+  (newStatus) => {
+    if (isFirstMount.value) {
+      isFirstMount.value = false;
+      return;
+    }
+
+    if (newStatus === "installing") {
+      startPolling();
+    } else {
+      stopPolling();
+      server.refresh();
+    }
+  },
+);
+
+definePageMeta({
+  middleware: "auth",
+});
+</script>
+
+<style scoped>
+@keyframes server-action-buttons-anim {
+  0% {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.server-action-buttons-anim {
+  animation: server-action-buttons-anim 0.2s ease-out;
+}
+
+.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;
+  content: "";
+  background-image: linear-gradient(
+      to bottom,
+      rgba(from var(--color-raised-bg) r g b / 0.2),
+      rgb(from var(--color-raised-bg) r g b / 0.8)
+    ),
+    var(--server-bg-image);
+}
+</style>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/backups.vue b/apps/frontend/src/pages/servers/manage/[id]/backups.vue
new file mode 100644
index 000000000..af70fda27
--- /dev/null
+++ b/apps/frontend/src/pages/servers/manage/[id]/backups.vue
@@ -0,0 +1,372 @@
+<template>
+  <div class="contents">
+    <div v-if="data" class="contents">
+      <LazyUiServersBackupCreateModal
+        ref="createBackupModal"
+        :server="server"
+        @backup-created="handleBackupCreated"
+      />
+      <LazyUiServersBackupRenameModal
+        ref="renameBackupModal"
+        :server="server"
+        :current-backup-id="currentBackup"
+        :backup-name="renameBackupName"
+        @backup-renamed="handleBackupRenamed"
+      />
+      <LazyUiServersBackupRestoreModal
+        ref="restoreBackupModal"
+        :server="server"
+        :backup-id="currentBackup"
+        :backup-name="currentBackupDetails?.name ?? ''"
+        :backup-created-at="currentBackupDetails?.created_at ?? ''"
+        @backup-restored="handleBackupRestored"
+      />
+      <LazyUiServersBackupDeleteModal
+        ref="deleteBackupModal"
+        :server="server"
+        :backup-id="currentBackup"
+        :backup-name="currentBackupDetails?.name ?? ''"
+        :backup-created-at="currentBackupDetails?.created_at ?? ''"
+        @backup-deleted="handleBackupDeleted"
+      />
+
+      <LazyUiServersBackupSettingsModal ref="backupSettingsModal" :server="server" />
+
+      <ul class="m-0 flex list-none flex-col gap-4 p-0">
+        <div class="relative w-full overflow-hidden rounded-2xl bg-bg-raised p-6 shadow-md">
+          <div class="flex flex-col items-center justify-between gap-4 sm:flex-row sm:gap-0">
+            <div class="flex flex-col items-baseline gap-2">
+              <div class="text-2xl font-bold text-contrast">
+                {{
+                  data.used_backup_quota === 0
+                    ? "No backups"
+                    : `You've created ${data.used_backup_quota} backup${data.used_backup_quota === 1 ? "" : "s"}`
+                }}
+              </div>
+              <div>
+                {{
+                  data.backup_quota - data.used_backup_quota === 0
+                    ? "You have reached your backup limit. Consider removing old backups to create new ones."
+                    : `You can create ${data.backup_quota - data.used_backup_quota} more backups for your server.`
+                }}
+              </div>
+            </div>
+            <div class="flex w-full flex-col gap-2 sm:w-fit sm:flex-row">
+              <ButtonStyled type="standard">
+                <button @click="showbackupSettingsModal">
+                  <SettingsIcon class="h-5 w-5" />
+                  Auto backups
+                </button>
+              </ButtonStyled>
+              <ButtonStyled type="standard" color="brand">
+                <button
+                  v-tooltip="
+                    isServerRunning && !userPreferences.backupWhileRunning
+                      ? 'Cannot create backup while server is running. You can disable this from your server Options > Preferences.'
+                      : ''
+                  "
+                  class="w-full sm:w-fit"
+                  :disabled="isServerRunning && !userPreferences.backupWhileRunning"
+                  @click="showCreateModel"
+                >
+                  <PlusIcon class="h-5 w-5" />
+                  Create backup
+                </button>
+              </ButtonStyled>
+            </div>
+          </div>
+        </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"
+                  />
+                  <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
+                      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-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>
+              </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: '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 #download> <DownloadIcon /> Download </template>
+                  <template #delete> <TrashIcon /> Delete </template>
+                </UiServersTeleportOverflowMenu>
+              </ButtonStyled>
+            </div>
+          </div>
+        </li>
+      </ul>
+
+      <div
+        class="over-the-top-download-animation"
+        :class="{ 'animation-hidden': !overTheTopDownloadAnimation }"
+      >
+        <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"
+          >
+            <DownloadIcon class="h-20 w-20 text-contrast" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { useStorage } from "@vueuse/core";
+import {
+  PlusIcon,
+  CheckIcon,
+  CalendarIcon,
+  MoreHorizontalIcon,
+  EditIcon,
+  ClipboardCopyIcon,
+  DownloadIcon,
+  TrashIcon,
+  SettingsIcon,
+  BoxIcon,
+} from "@modrinth/assets";
+import { ref, computed } from "vue";
+import type { Server } from "~/composables/pyroServers";
+
+const props = defineProps<{
+  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+  isServerRunning: boolean;
+}>();
+
+const route = useNativeRoute();
+const serverId = route.params.id;
+
+const userPreferences = useStorage(`pyro-server-${serverId}-preferences`, {
+  backupWhileRunning: false,
+});
+
+defineEmits(["onDownload"]);
+
+const data = computed(() => props.server.general);
+const backups = computed(() => {
+  if (!props.server.backups?.data) return [];
+
+  return [...props.server.backups.data].sort((a, b) => {
+    return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
+  });
+});
+
+useHead({
+  title: `Backups - ${data.value?.name ?? "Server"} - Modrinth`,
+});
+
+const overTheTopDownloadAnimation = ref();
+
+const createBackupModal = ref<typeof NewModal>();
+const renameBackupModal = ref<typeof NewModal>();
+const restoreBackupModal = ref<typeof NewModal>();
+const deleteBackupModal = ref<typeof NewModal>();
+const backupSettingsModal = ref<typeof NewModal>();
+
+const renameBackupName = ref("");
+const currentBackup = ref("");
+
+const currentBackupDetails = computed(() => {
+  return backups.value.find((backup) => backup.id === currentBackup.value);
+});
+
+const showCreateModel = () => {
+  createBackupModal.value?.show();
+};
+
+const showbackupSettingsModal = () => {
+  backupSettingsModal.value?.show();
+};
+
+const handleBackupCreated = (payload: { success: boolean; message: string }) => {
+  if (payload.success) {
+    addNotification({ type: "success", text: payload.message });
+  } else {
+    addNotification({ type: "error", text: payload.message });
+  }
+};
+
+const handleBackupRenamed = (payload: { success: boolean; message: string }) => {
+  if (payload.success) {
+    addNotification({ type: "success", text: payload.message });
+  } else {
+    addNotification({ type: "error", text: payload.message });
+  }
+};
+
+const handleBackupRestored = (payload: { success: boolean; message: string }) => {
+  if (payload.success) {
+    addNotification({ type: "success", text: payload.message });
+  } else {
+    addNotification({ type: "error", text: payload.message });
+  }
+};
+
+const handleBackupDeleted = (payload: { success: boolean; message: string }) => {
+  if (payload.success) {
+    addNotification({ type: "success", text: payload.message });
+  } else {
+    addNotification({ type: "error", text: payload.message });
+  }
+};
+
+function triggerDownloadAnimation() {
+  overTheTopDownloadAnimation.value = true;
+  setTimeout(() => (overTheTopDownloadAnimation.value = false), 500);
+}
+
+const initiateDownload = async (backupId: string) => {
+  triggerDownloadAnimation();
+
+  try {
+    const downloadurl: any = await props.server.backups?.download(backupId);
+    if (!downloadurl || !downloadurl.download_url) {
+      throw new Error("Invalid download URL.");
+    }
+
+    let finalDownloadUrl: string = downloadurl.download_url;
+
+    if (!/^https?:\/\//i.test(finalDownloadUrl)) {
+      finalDownloadUrl = `https://${finalDownloadUrl.startsWith("/") ? finalDownloadUrl.substring(1) : finalDownloadUrl}`;
+    }
+
+    const a = document.createElement("a");
+    a.href = finalDownloadUrl;
+    a.setAttribute("download", "");
+    a.click();
+    a.remove();
+  } catch (error) {
+    console.error("Download failed:", error);
+  }
+};
+</script>
+
+<style scoped>
+.over-the-top-download-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: 1;
+
+  &.animation-hidden {
+    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: 1;
+      transition: all 0.2s ease-out;
+      width: 20rem;
+      height: 20rem;
+    }
+  }
+}
+</style>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/content.vue b/apps/frontend/src/pages/servers/manage/[id]/content.vue
new file mode 100644
index 000000000..d0268351a
--- /dev/null
+++ b/apps/frontend/src/pages/servers/manage/[id]/content.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="flex h-full w-full flex-col">
+    <NuxtPage :route="route" :server="props.server" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Server } from "~/composables/pyroServers";
+
+const route = useNativeRoute();
+
+const props = defineProps<{
+  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+}>();
+
+const data = computed(() => props.server.general);
+
+useHead({
+  title: `Content - ${data.value?.name ?? "Server"} - Modrinth`,
+});
+</script>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/content/index.vue b/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
new file mode 100644
index 000000000..4f33c4bd9
--- /dev/null
+++ b/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
@@ -0,0 +1,507 @@
+<template>
+  <NewModal ref="modModal" header="Edit 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>
+          </div>
+        </div>
+        <div>
+          <div v-if="props.server.general?.upstream" class="flex items-center gap-2">
+            <InfoIcon class="hidden sm:block" />
+            <span class="text-sm text-secondary">
+              Your server was created from a modpack. Changing the mod version may cause unexpected
+              issues.
+            </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>
+        </ButtonStyled>
+      </div>
+    </div>
+  </NewModal>
+
+  <div v-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-4 flex items-center justify-between bg-bg py-4">
+        <div class="flex w-full flex-col items-center gap-2 sm:flex-row sm:gap-4">
+          <div class="flex w-full items-center gap-2 sm:gap-4">
+            <div class="relative flex-1 text-sm">
+              <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="!h-9 !min-h-0 w-full border-[1px] border-solid border-button-border pl-9"
+                type="search"
+                name="search"
+                autocomplete="off"
+                placeholder="Search mods..."
+                @input="debouncedSearch"
+              />
+            </div>
+            <ButtonStyled>
+              <UiServersTeleportOverflowMenu
+                position="bottom"
+                direction="left"
+                aria-label="Filter mods"
+                :options="[
+                  { id: 'all', action: () => (filterMethod = 'all') },
+                  { id: 'enabled', action: () => (filterMethod = 'enabled') },
+                  { id: 'disabled', action: () => (filterMethod = 'disabled') },
+                ]"
+              >
+                <span class="whitespace-pre text-sm font-medium">
+                  {{ filterMethodLabel }}
+                </span>
+                <FilterIcon aria-hidden="true" />
+                <DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
+                <template #all> All mods </template>
+                <template #enabled> Only enabled </template>
+                <template #disabled> Only disabled </template>
+              </UiServersTeleportOverflowMenu>
+            </ButtonStyled>
+          </div>
+          <ButtonStyled v-if="hasMods" color="brand" type="outlined">
+            <nuxt-link
+              class="w-full text-nowrap sm:w-fit"
+              :to="`/mods?sid=${props.server.serverId}`"
+            >
+              <PlusIcon />
+              Add content
+            </nuxt-link>
+          </ButtonStyled>
+        </div>
+      </div>
+      <div v-if="hasMods" class="flex flex-col gap-2 transition-all">
+        <div ref="listContainer" class="relative w-full">
+          <div :style="{ position: 'relative', height: `${totalHeight}px` }">
+            <div :style="{ position: 'absolute', top: `${visibleTop}px`, width: '100%' }">
+              <template v-for="mod in visibleItems.items" :key="mod.filename">
+                <div
+                  class="relative mb-2 flex w-full items-center justify-between rounded-xl bg-bg-raised"
+                  :class="mod.disabled ? 'bg-table-alternateRow text-secondary' : ''"
+                  style="height: 64px"
+                >
+                  <NuxtLink
+                    :to="
+                      mod.project_id
+                        ? `/project/${mod.project_id}/version/${mod.version_id}`
+                        : `files?path=mods`
+                    "
+                    class="group flex min-w-0 items-center rounded-xl p-2"
+                  >
+                    <div class="flex min-w-0 items-center gap-2">
+                      <UiAvatar
+                        :src="mod.icon_url"
+                        size="sm"
+                        alt="Server Icon"
+                        :class="mod.disabled ? 'grayscale' : ''"
+                      />
+                      <div class="flex min-w-0 flex-col">
+                        <span class="flex min-w-0 items-center gap-2 text-lg font-bold">
+                          <span class="truncate">{{
+                            mod.name || mod.filename.replace(".disabled", "")
+                          }}</span>
+                          <span
+                            v-if="mod.disabled"
+                            class="hidden rounded-full bg-button-bg p-1 px-2 text-xs text-contrast sm:block"
+                            >Disabled</span
+                          >
+                        </span>
+                        <span class="min-w-0 text-xs text-secondary">{{
+                          mod.version_number || "External mod"
+                        }}</span>
+                      </div>
+                    </div>
+                  </NuxtLink>
+                  <div class="flex items-center gap-2 pr-4 font-semibold text-contrast">
+                    <ButtonStyled v-if="mod.project_id" type="transparent">
+                      <button
+                        v-tooltip="'Edit mod version'"
+                        :disabled="mod.changing"
+                        class="!hidden sm:!block"
+                        @click="beginChangeModVersion(mod)"
+                      >
+                        <template v-if="mod.changing">
+                          <UiServersIconsLoadingIcon />
+                        </template>
+                        <template v-else>
+                          <EditIcon />
+                        </template>
+                      </button>
+                    </ButtonStyled>
+                    <ButtonStyled type="transparent">
+                      <button
+                        v-tooltip="'Delete mod'"
+                        :disabled="mod.changing"
+                        class="!hidden sm:!block"
+                        @click="removeMod(mod)"
+                      >
+                        <TrashIcon />
+                      </button>
+                    </ButtonStyled>
+
+                    <!-- Dropdown for mobile -->
+                    <div class="mr-2 flex items-center sm:hidden">
+                      <UiServersIconsLoadingIcon
+                        v-if="mod.changing"
+                        class="mr-2 h-5 w-5 animate-spin"
+                        style="color: var(--color-base)"
+                      />
+                      <ButtonStyled v-else circular type="transparent">
+                        <UiServersTeleportOverflowMenu
+                          :options="[
+                            {
+                              id: 'edit',
+                              action: () => beginChangeModVersion(mod),
+                              shown: !!(mod.project_id && !mod.changing),
+                            },
+                            {
+                              id: 'delete',
+                              action: () => removeMod(mod),
+                            },
+                          ]"
+                        >
+                          <MoreVerticalIcon aria-hidden="true" />
+                          <template #edit>
+                            <EditIcon class="h-5 w-5" />
+                            <span>Edit</span>
+                          </template>
+                          <template #delete>
+                            <TrashIcon class="h-5 w-5" />
+                            <span>Delete</span>
+                          </template>
+                        </UiServersTeleportOverflowMenu>
+                      </ButtonStyled>
+                    </div>
+
+                    <input
+                      :id="`toggle-${mod.filename}`"
+                      :checked="!mod.disabled"
+                      :disabled="mod.changing"
+                      class="switch stylized-toggle"
+                      type="checkbox"
+                      @change="toggleMod(mod)"
+                    />
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else class="mt-4 flex h-full flex-col items-center justify-center text-center">
+        <PackageClosedIcon class="size-24 text-neutral-500" />
+        <p class="m-0 pb-2 pt-3 text-neutral-200">No mods found!</p>
+        <p class="m-0 pb-3 text-neutral-400">Add some mods to your server to manage them here.</p>
+        <ButtonStyled color="brand" class="mt-8">
+          <nuxt-link :to="`/mods?sid=${props.server.serverId}`">Add content</nuxt-link>
+        </ButtonStyled>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  SearchIcon,
+  EditIcon,
+  TrashIcon,
+  PackageClosedIcon,
+  FilterIcon,
+  DropdownIcon,
+  InfoIcon,
+  XIcon,
+  PlusIcon,
+  MoreVerticalIcon,
+} from "@modrinth/assets";
+import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { ref, computed, watch, onMounted, onUnmounted } from "vue";
+import type { Server } from "~/composables/pyroServers";
+
+const props = defineProps<{
+  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+}>();
+
+interface Mod {
+  name?: string;
+  filename: string;
+  project_id?: string;
+  version_id?: string;
+  version_number?: string;
+  icon_url?: string;
+  disabled: boolean;
+  changing?: boolean;
+}
+
+const ITEM_HEIGHT = 72;
+const BUFFER_SIZE = 5;
+
+const listContainer = ref<HTMLElement | null>(null);
+const windowScrollY = ref(0);
+const windowHeight = ref(0);
+
+const localMods = ref<Mod[]>([]);
+
+const searchInput = ref("");
+const modSearchInput = ref("");
+const filterMethod = ref("all");
+
+const filterMethodLabel = computed(() => {
+  switch (filterMethod.value) {
+    case "disabled":
+      return "Only disabled";
+    case "enabled":
+      return "Only enabled";
+    default:
+      return "All mods";
+  }
+});
+
+const totalHeight = computed(() => {
+  const itemsHeight = filteredMods.value.length * ITEM_HEIGHT;
+  return itemsHeight;
+});
+
+const getVisibleRange = () => {
+  if (!listContainer.value) return { start: 0, end: 0 };
+
+  const containerTop = listContainer.value.getBoundingClientRect().top + window.scrollY;
+  const scrollTop = Math.max(0, windowScrollY.value - containerTop);
+
+  const start = Math.floor(scrollTop / ITEM_HEIGHT);
+  const visibleCount = Math.ceil(windowHeight.value / ITEM_HEIGHT);
+
+  return {
+    start: Math.max(0, start - BUFFER_SIZE),
+    end: Math.min(filteredMods.value.length, start + visibleCount + BUFFER_SIZE * 2),
+  };
+};
+
+const visibleTop = computed(() => {
+  const range = getVisibleRange();
+  return range.start * ITEM_HEIGHT;
+});
+
+const visibleItems = computed(() => {
+  const range = getVisibleRange();
+  const items = filteredMods.value;
+
+  return {
+    items: items.slice(Math.max(0, range.start), Math.min(items.length, range.end)),
+  };
+});
+
+const handleScroll = () => {
+  windowScrollY.value = window.scrollY;
+};
+
+const handleResize = () => {
+  windowHeight.value = window.innerHeight;
+};
+
+onMounted(() => {
+  windowHeight.value = window.innerHeight;
+  window.addEventListener("scroll", handleScroll, { passive: true });
+  window.addEventListener("resize", handleResize, { passive: true });
+  handleScroll();
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", handleScroll);
+  window.removeEventListener("resize", handleResize);
+});
+
+watch(
+  () => props.server.mods?.data,
+  (newMods) => {
+    if (newMods) {
+      localMods.value = [...newMods];
+    }
+  },
+  { immediate: true },
+);
+
+const debounce = <T extends (...args: any[]) => void>(
+  func: T,
+  wait: number,
+): ((...args: Parameters<T>) => void) => {
+  let timeout: ReturnType<typeof setTimeout>;
+  return function (...args: Parameters<T>): void {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+};
+
+const pyroContentSentinel = ref<HTMLElement | null>(null);
+const debouncedSearch = debounce(() => {
+  modSearchInput.value = searchInput.value;
+
+  if (pyroContentSentinel.value) {
+    pyroContentSentinel.value.scrollIntoView({
+      behavior: "smooth",
+      block: "start",
+    });
+  }
+}, 300);
+
+async function toggleMod(mod: Mod) {
+  mod.changing = true;
+
+  const originalFilename = mod.filename;
+  try {
+    const newFilename = mod.filename.endsWith(".disabled")
+      ? mod.filename.replace(".disabled", "")
+      : `${mod.filename}.disabled`;
+
+    const sourcePath = `/mods/${mod.filename}`;
+    const destinationPath = `/mods/${newFilename}`;
+
+    mod.disabled = newFilename.endsWith(".disabled");
+    mod.filename = newFilename;
+
+    await props.server.fs?.moveFileOrFolder(sourcePath, destinationPath);
+
+    await props.server.refresh(["general", "mods"]);
+  } catch (error) {
+    mod.filename = originalFilename;
+    mod.disabled = originalFilename.endsWith(".disabled");
+
+    console.error("Error toggling mod:", error);
+    addNotification({
+      text: `Something went wrong toggling ${mod.name || mod.filename.replace(".disabled", "")}`,
+      type: "error",
+    });
+  }
+
+  mod.changing = false;
+}
+
+async function removeMod(mod: Mod) {
+  mod.changing = true;
+
+  try {
+    await props.server.mods?.remove(`/mods/${mod.filename}`);
+    await props.server.refresh(["general", "mods"]);
+  } catch (error) {
+    console.error("Error removing mod:", error);
+
+    addNotification({
+      text: `couldn't remove ${mod.name || mod.filename}`,
+      type: "error",
+    });
+  }
+
+  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, true);
+  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.mods?.remove(`/mods/${currentMod.value.filename}`);
+    await props.server.mods?.install(currentMod.value.project_id, currentVersion.value.id);
+    await props.server.refresh(["general", "mods"]);
+  } catch (error) {
+    console.error("Error changing mod version:", error);
+  }
+  currentMod.value.changing = false;
+}
+
+const hasMods = computed(() => {
+  return filteredMods.value?.length > 0;
+});
+
+const filteredMods = computed(() => {
+  const mods = modSearchInput.value.trim()
+    ? localMods.value.filter(
+        (mod) =>
+          mod.name?.toLowerCase().includes(modSearchInput.value.toLowerCase()) ||
+          mod.filename.toLowerCase().includes(modSearchInput.value.toLowerCase()),
+      )
+    : localMods.value;
+
+  const statusFilteredMods = (() => {
+    switch (filterMethod.value) {
+      case "disabled":
+        return mods.filter((mod) => mod.disabled);
+      case "enabled":
+        return mods.filter((mod) => !mod.disabled);
+      default:
+        return mods;
+    }
+  })();
+
+  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);
+  });
+});
+</script>
+
+<style scoped>
+.sentinel {
+  position: absolute;
+  top: -1rem;
+  left: 0;
+  right: 0;
+  height: 1px;
+  visibility: hidden;
+}
+
+.stylized-toggle:checked::after {
+  background: var(--color-accent-contrast) !important;
+}
+</style>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/files.vue b/apps/frontend/src/pages/servers/manage/[id]/files.vue
new file mode 100644
index 000000000..94aac0dde
--- /dev/null
+++ b/apps/frontend/src/pages/servers/manage/[id]/files.vue
@@ -0,0 +1,736 @@
+<template>
+  <div data-pyro-file-manager-root class="contents">
+    <LazyUiServersFilesCreateItemModal
+      ref="createItemModal"
+      :type="newItemType"
+      @create="handleCreateNewItem"
+    />
+
+    <LazyUiServersFilesRenameItemModal
+      ref="renameItemModal"
+      :item="selectedItem"
+      @rename="handleRenameItem"
+    />
+
+    <LazyUiServersFilesMoveItemModal
+      ref="moveItemModal"
+      :item="selectedItem"
+      :current-path="currentPath"
+      @move="handleMoveItem"
+    />
+
+    <LazyUiServersFilesDeleteItemModal
+      ref="deleteItemModal"
+      :item="selectedItem"
+      @delete="handleDeleteItem"
+    />
+
+    <div
+      class="relative flex w-full flex-col rounded-2xl border border-solid border-bg-raised"
+      @dragenter.prevent="handleDragEnter"
+      @dragover.prevent="handleDragOver"
+      @dragleave.prevent="handleDragLeave"
+      @drop.prevent="handleDrop"
+    >
+      <div ref="mainContent" class="relative isolate flex w-full flex-col">
+        <UiServersFilesBrowseNavbar
+          v-if="!isEditing"
+          :breadcrumb-segments="breadcrumbSegments"
+          :search-query="searchQuery"
+          :sort-method="sortMethod"
+          @navigate="navigateToSegment"
+          @sort="sortFiles"
+          @create="showCreateModal"
+          @upload="initiateFileUpload"
+          @update:search-query="searchQuery = $event"
+        />
+
+        <UiServersFilesEditingNavbar
+          v-else
+          :file-name="editingFile?.name"
+          :is-image="isEditingImage"
+          :file-path="editingFile?.path"
+          :breadcrumb-segments="breadcrumbSegments"
+          @cancel="cancelEditing"
+          @save="() => saveFileContent(true)"
+          @save-as="saveFileContentAs"
+          @save-restart="saveFileContentRestart"
+          @share="requestShareLink"
+          @navigate="navigateToSegment"
+        />
+
+        <div v-if="isEditing" class="h-full w-full flex-grow">
+          <component
+            :is="VAceEditor"
+            v-if="!isEditingImage"
+            v-model:value="fileContent"
+            lang="json"
+            theme="one_dark"
+            :print-margin="false"
+            style="height: 750px; font-size: 1rem"
+            class="ace_editor ace_hidpi ace-one-dark ace_dark rounded-b-lg"
+            @init="onInit"
+          />
+          <UiServersFilesImageViewer v-else :image-blob="imagePreview" />
+        </div>
+        <div v-else-if="items.length > 0" class="h-full w-full overflow-hidden rounded-b-2xl">
+          <UiServersFileVirtualList
+            :items="filteredItems"
+            @delete="showDeleteModal"
+            @rename="showRenameModal"
+            @download="downloadFile"
+            @move="showMoveModal"
+            @edit="editFile"
+            @contextmenu="showContextMenu"
+            @load-more="handleLoadMore"
+          />
+        </div>
+
+        <div
+          v-else-if="!isLoading && items.length === 0"
+          class="flex h-full w-full items-center justify-center p-20"
+        >
+          <div class="flex flex-col items-center gap-4 text-center">
+            <FolderOpenIcon class="h-16 w-16 text-secondary" />
+            <h3 class="text-2xl font-bold text-contrast">This folder is empty</h3>
+            <p class="m-0 text-sm text-secondary">There are no files or folders.</p>
+          </div>
+        </div>
+
+        <LazyUiServersFileManagerError
+          v-else-if="!isLoading"
+          title="Unable to list files"
+          message="Unfortunately, we were unable to list the files in this folder. If this issue persists, contact support."
+          @refetch="refreshList"
+          @home="navigateToSegment(-1)"
+        />
+
+        <LazyUiServersFileManagerError
+          v-else-if="loadError"
+          title="Unable to fetch files"
+          message="This path is invalid or the server is not responding."
+          @refetch="refreshList"
+          @home="navigateToSegment(-1)"
+        />
+      </div>
+      <div
+        v-if="isDragging"
+        class="absolute inset-0 flex items-center justify-center rounded-xl bg-black bg-opacity-50 text-white"
+      >
+        <div class="text-center">
+          <UploadIcon class="mx-auto h-16 w-16" />
+          <p class="mt-2 text-xl">Drop files here to upload</p>
+        </div>
+      </div>
+    </div>
+
+    <UiServersFilesContextMenu
+      ref="contextMenu"
+      :item="contextMenuInfo.item"
+      :x="contextMenuInfo.x"
+      :y="contextMenuInfo.y"
+      :is-at-bottom="isAtBottom"
+      @rename="showRenameModal"
+      @move="showMoveModal"
+      @download="downloadFile"
+      @delete="showDeleteModal"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useInfiniteScroll } from "@vueuse/core";
+import { UploadIcon, FolderOpenIcon } from "@modrinth/assets";
+import type { Server } from "~/composables/pyroServers";
+
+const props = defineProps<{
+  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+}>();
+
+const route = useRoute();
+const router = useRouter();
+
+const VAceEditor = ref();
+const mainContent = ref<HTMLElement | null>(null);
+const scrollContainer = ref<HTMLElement | null>(null);
+const contextMenu = ref();
+
+const searchQuery = ref("");
+const sortMethod = ref("default");
+
+const maxResults = 100;
+const currentPage = ref(1);
+
+const currentPath = ref(typeof route.query.path === "string" ? route.query.path : "");
+
+const isAtBottom = ref(false);
+const contextMenuInfo = ref<any>({ item: null, x: 0, y: 0 });
+
+const createItemModal = ref();
+const renameItemModal = ref();
+const moveItemModal = ref();
+const deleteItemModal = ref();
+
+const newItemType = ref<"file" | "directory">("file");
+const selectedItem = ref<any>(null);
+const fileContent = ref("");
+
+const isEditing = ref(false);
+const editingFile = ref<any>(null);
+const closeEditor = ref(false);
+const isEditingImage = ref(false);
+const imagePreview = ref();
+
+const isDragging = ref(false);
+const dragCounter = ref(0);
+
+const data = computed(() => props.server.general);
+
+useHead({
+  title: computed(() => `Files - ${data.value?.name ?? "Server"} - Modrinth`),
+});
+
+const fetchDirectoryContents = async (): Promise<{ items: any[]; total: number }> => {
+  const path = Array.isArray(currentPath.value) ? currentPath.value.join("") : currentPath.value;
+  try {
+    const data = await props.server.fs?.listDirContents(path, currentPage.value, maxResults);
+
+    if (!data || !data.items) {
+      throw new Error("Invalid data structure received from server.");
+    }
+
+    if (currentPage.value === 1) {
+      return {
+        items: applyDefaultSort(data.items),
+        total: data.total,
+      };
+    }
+
+    return {
+      items: [...(directoryData.value?.items || []), ...applyDefaultSort(data.items)],
+      total: data.total,
+    };
+  } catch (error) {
+    console.error("Error fetching directory contents:", error);
+    if (error instanceof PyroFetchError && error.statusCode === 400) {
+      return directoryData.value || { items: [], total: 0 };
+    }
+    throw error;
+  }
+};
+
+const {
+  data: directoryData,
+  refresh: refreshData,
+  status,
+  error: loadError,
+} = useLazyAsyncData(() => fetchDirectoryContents(), {
+  watch: [],
+  default: () => ({ items: [], total: 0 }),
+  immediate: true,
+});
+
+const isLoading = computed(() => status.value === "pending");
+
+const items = computed(() => directoryData.value?.items || []);
+
+const refreshList = () => {
+  currentPage.value = 1;
+  refreshData();
+  reset();
+};
+
+const handleCreateNewItem = async (name: string) => {
+  try {
+    const path = `${currentPath.value}/${name}`.replace("//", "/");
+    await props.server.fs?.createFileOrFolder(path, newItemType.value);
+
+    refreshList();
+    addNotification({
+      group: "files",
+      title: "File created",
+      text: "Your file has been created.",
+      type: "success",
+    });
+  } catch (error) {
+    handleCreateError(error);
+  }
+};
+
+const handleRenameItem = async (newName: string) => {
+  try {
+    const path = `${currentPath.value}/${selectedItem.value.name}`.replace("//", "/");
+    await props.server.fs?.renameFileOrFolder(path, newName);
+
+    refreshList();
+
+    if (closeEditor.value) {
+      await props.server.refresh();
+      isEditing.value = false;
+      editingFile.value = null;
+      closeEditor.value = false;
+      router.push({ query: { ...route.query, path: currentPath.value } });
+    }
+
+    addNotification({
+      group: "files",
+      title: "File renamed",
+      text: "Your file has been renamed.",
+      type: "success",
+    });
+  } catch (error) {
+    handleRenameError(error);
+  }
+};
+
+const handleMoveItem = async (destination: string) => {
+  try {
+    await props.server.fs?.moveFileOrFolder(
+      `${currentPath.value}/${selectedItem.value.name}`.replace("//", "/"),
+      `${destination}/${selectedItem.value.name}`.replace("//", "/"),
+    );
+
+    refreshList();
+    addNotification({
+      group: "files",
+      title: "File moved",
+      text: "Your file has been moved.",
+      type: "success",
+    });
+  } catch (error) {
+    console.error("Error moving item:", error);
+  }
+};
+
+const handleDeleteItem = async () => {
+  try {
+    const path = `${currentPath.value}/${selectedItem.value.name}`.replace("//", "/");
+    await props.server.fs?.deleteFileOrFolder(path, selectedItem.value.type === "directory");
+
+    refreshList();
+    addNotification({
+      group: "files",
+      title: "File deleted",
+      text: "Your file has been deleted.",
+      type: "success",
+    });
+  } catch (error) {
+    console.error("Error deleting item:", error);
+  }
+};
+
+const showCreateModal = (type: "file" | "directory") => {
+  newItemType.value = type;
+  createItemModal.value?.show();
+};
+
+const showRenameModal = (item: any) => {
+  selectedItem.value = item;
+  renameItemModal.value?.show(item);
+  contextMenuInfo.value.item = null;
+};
+
+const showMoveModal = (item: any) => {
+  selectedItem.value = item;
+  moveItemModal.value?.show();
+  contextMenuInfo.value.item = null;
+};
+
+const showDeleteModal = (item: any) => {
+  selectedItem.value = item;
+  deleteItemModal.value?.show();
+  contextMenuInfo.value.item = null;
+};
+
+const handleCreateError = (error: any) => {
+  console.error("Error creating item:", error);
+  if (error instanceof PyroFetchError) {
+    if (error.statusCode === 400) {
+      addNotification({
+        group: "files",
+        title: "Error creating item",
+        text: "Invalid file",
+        type: "error",
+      });
+    } else if (error.statusCode === 500) {
+      addNotification({
+        group: "files",
+        title: "Error creating item",
+        text: "File already exists",
+        type: "error",
+      });
+    }
+  }
+};
+
+const handleRenameError = (error: any) => {
+  console.error("Error renaming item:", error);
+  if (error instanceof PyroFetchError) {
+    if (error.statusCode === 400) {
+      addNotification({
+        group: "files",
+        title: "Could not rename item",
+        text: "This item already exists or is invalid.",
+        type: "error",
+      });
+    } else if (error.statusCode === 500) {
+      addNotification({
+        group: "files",
+        title: "Could not rename item",
+        text: "Invalid file",
+        type: "error",
+      });
+    }
+  }
+};
+
+const applyDefaultSort = (items: any[]) => {
+  return items.sort((a: any, b: any) => {
+    if (a.type === "directory" && b.type !== "directory") return -1;
+    if (a.type !== "directory" && b.type === "directory") return 1;
+    if (a.count > b.count) return -1;
+    if (a.count < b.count) return 1;
+    return a.name.localeCompare(b.name);
+  });
+};
+
+const filteredItems = computed(() => {
+  let result = [...items.value];
+
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase();
+    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 "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;
+});
+
+const { reset } = useInfiniteScroll(
+  scrollContainer,
+  async () => {
+    if (status.value === "pending") return;
+
+    try {
+      const totalPages = directoryData.value?.total || 0;
+
+      if (currentPage.value < totalPages) {
+        currentPage.value++;
+        const newData = await fetchDirectoryContents();
+
+        if (newData && newData.items) {
+          directoryData.value = {
+            items: [...directoryData.value.items, ...newData.items],
+            total: newData.total,
+          };
+        }
+      }
+    } catch (error) {
+      console.error("Error during infinite scroll:", error);
+    }
+  },
+  { distance: 1000 },
+);
+
+const handleLoadMore = async () => {
+  if (status.value === "pending") return;
+
+  const totalPages = directoryData.value?.total || 0;
+
+  if (currentPage.value < totalPages) {
+    currentPage.value++;
+    await refreshData();
+  }
+};
+
+const onInit = (editor: any) => {
+  editor.commands.addCommand({
+    name: "saveFile",
+    bindKey: { win: "Ctrl-S", mac: "Command-S" },
+    exec: () => saveFileContent(false),
+  });
+};
+
+const showContextMenu = async (item: any, x: number, y: number) => {
+  contextMenuInfo.value = { item, x, y };
+  selectedItem.value = item;
+  await nextTick();
+  if (!contextMenu.value?.ctxRef) return false;
+  const screenHeight = window.innerHeight;
+  const ctxRect = contextMenu.value.ctxRef.getBoundingClientRect();
+  isAtBottom.value = ctxRect.bottom > screenHeight;
+};
+
+const onAnywhereClicked = (e: MouseEvent) => {
+  if (!(e.target as HTMLElement).closest("#item-context-menu")) {
+    contextMenuInfo.value.item = null;
+  }
+};
+
+const sortFiles = (method: string) => {
+  sortMethod.value = method;
+};
+
+const imageExtensions = ["png", "jpg", "jpeg", "gif", "webp"];
+
+const editFile = async (item: { name: string; type: string; path: string }) => {
+  try {
+    const path = `${currentPath.value}/${item.name}`.replace("//", "/");
+    const content = (await props.server.fs?.downloadFile(path, true)) as any;
+    window.scrollTo(0, 0);
+
+    fileContent.value = await content.text();
+    editingFile.value = item;
+    isEditing.value = true;
+    const extension = item.name.split(".").pop();
+    if (item.type === "file" && extension && imageExtensions.includes(extension)) {
+      isEditingImage.value = true;
+      imagePreview.value = content;
+    }
+    router.push({ query: { ...route.query, path: currentPath.value, editing: item.path } });
+  } catch (error) {
+    console.error("Error fetching file content:", error);
+  }
+};
+
+onMounted(async () => {
+  await import("ace-builds");
+  await import("ace-builds/src-noconflict/mode-json");
+  await import("ace-builds/src-noconflict/theme-one_dark");
+  VAceEditor.value = markRaw((await import("vue3-ace-editor")).VAceEditor);
+  document.addEventListener("click", onAnywhereClicked);
+  window.addEventListener("scroll", onScroll);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("click", onAnywhereClicked);
+  window.removeEventListener("scroll", onScroll);
+});
+
+watch(
+  () => route.query,
+  async (newQuery) => {
+    currentPage.value = 1;
+    searchQuery.value = "";
+    sortMethod.value = "default";
+
+    currentPath.value = Array.isArray(newQuery.path)
+      ? newQuery.path.join("")
+      : newQuery.path || "/";
+
+    if (newQuery.editing) {
+      await editFile({
+        name: newQuery.editing as string,
+        type: "file",
+        path: newQuery.editing as string,
+      });
+    } else {
+      isEditing.value = false;
+      editingFile.value = null;
+    }
+
+    await refreshData();
+    reset();
+  },
+  { immediate: true, deep: true },
+);
+
+const breadcrumbSegments = computed(() => {
+  if (typeof currentPath.value === "string") {
+    return currentPath.value.split("/").filter(Boolean);
+  }
+  return [];
+});
+
+const navigateToSegment = (index: number) => {
+  const newPath = breadcrumbSegments.value.slice(0, index + 1).join("/");
+  router.push({ query: { ...route.query, path: newPath } });
+  if (isEditing.value) {
+    isEditing.value = false;
+    editingFile.value = null;
+    closeEditor.value = false;
+
+    const newQuery = { ...route.query };
+    delete newQuery.editing;
+    router.replace({ query: newQuery });
+  }
+};
+
+// const navigateToPage = () => {
+//   router.push({ query: { path: currentPath.value } });
+// };
+
+const requestShareLink = async () => {
+  try {
+    const response = (await $fetch("https://api.mclo.gs/1/log", {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body: new URLSearchParams({ content: fileContent.value }),
+    })) as any;
+
+    if (response.success) {
+      await navigator.clipboard.writeText(response.url);
+      addNotification({
+        group: "files",
+        title: "Log URL copied",
+        text: "Your log file URL has been copied to your clipboard.",
+        type: "success",
+      });
+    } else {
+      throw new Error(response.error);
+    }
+  } catch (error) {
+    console.error("Error sharing file:", error);
+  }
+};
+
+const handleDragEnter = (event: DragEvent) => {
+  if (isEditing.value) return;
+  event.preventDefault();
+  dragCounter.value++;
+  isDragging.value = true;
+};
+
+const handleDragOver = (event: DragEvent) => {
+  if (isEditing.value) return;
+  event.preventDefault();
+};
+
+const handleDragLeave = (event: DragEvent) => {
+  if (isEditing.value) return;
+  event.preventDefault();
+  dragCounter.value--;
+  if (dragCounter.value === 0) {
+    isDragging.value = false;
+  }
+};
+
+const handleDrop = async (event: DragEvent) => {
+  if (isEditing.value) return;
+  event.preventDefault();
+  isDragging.value = false;
+  dragCounter.value = 0;
+  const files = event.dataTransfer?.files;
+  if (files) {
+    for (let i = 0; i < files.length; i++) {
+      await uploadFile(files[i]);
+    }
+  }
+};
+
+const uploadFile = async (file: File) => {
+  try {
+    const filePath = `${currentPath.value}/${file.name}`.replace("//", "/");
+    await props.server.fs?.uploadFile(filePath, file);
+    refreshList();
+
+    addNotification({
+      group: "files",
+      title: "File uploaded",
+      text: "Your file has been uploaded.",
+      type: "success",
+    });
+  } catch (error) {
+    console.error("Error uploading file:", error);
+  }
+};
+
+const initiateFileUpload = () => {
+  const input = document.createElement("input");
+  input.type = "file";
+  input.onchange = async () => {
+    const file = input.files?.[0];
+    if (file) {
+      await uploadFile(file);
+    }
+  };
+  input.click();
+};
+
+const downloadFile = async (item: any) => {
+  if (item.type === "file") {
+    try {
+      const path = `${currentPath.value}/${item.name}`.replace("//", "/");
+      const fileData = await props.server.fs?.downloadFile(path);
+      if (fileData) {
+        const blob = new Blob([fileData], { type: "application/octet-stream" });
+        const link = document.createElement("a");
+        link.href = window.URL.createObjectURL(blob);
+        link.download = item.name;
+        link.click();
+        window.URL.revokeObjectURL(link.href);
+      } else {
+        throw new Error("File data is undefined");
+      }
+    } catch (error) {
+      console.error("Error downloading file:", error);
+    }
+    contextMenuInfo.value.item = null;
+  }
+};
+
+const saveFileContent = async (exit: boolean = true) => {
+  if (!editingFile.value) return;
+
+  try {
+    await props.server.fs?.updateFile(editingFile.value.path, fileContent.value);
+    if (exit) {
+      await props.server.refresh();
+      isEditing.value = false;
+      editingFile.value = null;
+      router.push({ query: { ...route.query, path: currentPath.value } });
+    }
+
+    addNotification({
+      group: "files",
+      title: "File saved",
+      text: "Your file has been saved.",
+      type: "success",
+    });
+  } catch (error) {
+    console.error("Error saving file content:", error);
+  }
+};
+
+const saveFileContentRestart = async () => {
+  await saveFileContent();
+  await props.server.general?.power("Restart");
+};
+
+const saveFileContentAs = async () => {
+  await saveFileContent(false);
+  closeEditor.value = true;
+  showRenameModal(editingFile.value);
+};
+
+const cancelEditing = () => {
+  isEditing.value = false;
+  editingFile.value = null;
+  fileContent.value = "";
+  isEditingImage.value = false;
+  imagePreview.value = null;
+  router.push({ query: { ...route.query, path: currentPath.value } });
+  const newQuery = { ...route.query };
+  delete newQuery.editing;
+  router.replace({ query: newQuery });
+};
+
+const onScroll = () => {
+  if (contextMenuInfo.value.item) {
+    contextMenuInfo.value.y = Math.max(0, contextMenuInfo.value.y - window.scrollY);
+  }
+};
+</script>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/index.vue b/apps/frontend/src/pages/servers/manage/[id]/index.vue
new file mode 100644
index 000000000..a04ca00ee
--- /dev/null
+++ b/apps/frontend/src/pages/servers/manage/[id]/index.vue
@@ -0,0 +1,710 @@
+<template>
+  <div
+    v-if="isConnected && !isWsAuthIncorrect"
+    class="relative flex select-none flex-col gap-6"
+    data-pyro-server-manager-root
+  >
+    <div
+      v-if="inspectingError"
+      data-pyro-servers-inspecting-error
+      class="flex justify-between rounded-2xl border-2 border-solid border-red bg-bg-red p-4 font-semibold text-contrast"
+    >
+      <div class="flex w-full justify-between gap-2">
+        <div v-if="inspectingError.analysis.problems.length" class="flex flex-row gap-4">
+          <IssuesIcon class="hidden h-8 w-8 text-red sm:block" />
+
+          <div class="flex flex-col gap-2">
+            <div class="font-semibold">
+              {{ serverData?.name }} shut down unexpectedly. We've automatically analyzed the logs
+              and found the following problems:
+            </div>
+
+            <li
+              v-for="problem in inspectingError.analysis.problems"
+              :key="problem.message"
+              class="list-none"
+            >
+              <h4 class="m-0 text-sm font-normal sm:text-lg sm:font-semibold">
+                {{ problem.message }}
+              </h4>
+              <ul class="m-0 ml-6">
+                <li v-for="solution in problem.solutions" :key="solution.message">
+                  <span class="m-0 text-sm font-normal">{{ solution.message }}</span>
+                </li>
+              </ul>
+            </li>
+          </div>
+        </div>
+        <div v-else class="flex flex-row gap-4">
+          <IssuesIcon class="hidden h-8 w-8 text-red sm:block" />
+
+          <div class="flex flex-col gap-2">
+            <div class="font-semibold">{{ serverData?.name }} shut down unexpectedly.</div>
+            <div class="font-normal">
+              We could not find any specific problems, but you can try restarting the server.
+            </div>
+          </div>
+        </div>
+        <ButtonStyled color="red" @click="clearError">
+          <button>
+            <XIcon />
+          </button>
+        </ButtonStyled>
+      </div>
+    </div>
+    <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"
+      >
+        <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>
+        <UiServersPanelTerminal :console-output="consoleOutput" :full-screen="fullScreen">
+          <div class="relative w-full px-4 pt-4">
+            <ul
+              v-if="suggestions.length"
+              id="command-suggestions"
+              ref="suggestionsList"
+              class="mt-1 max-h-60 w-full list-none overflow-auto rounded-md border border-divider bg-bg-raised p-0 shadow-lg"
+              role="listbox"
+            >
+              <li
+                v-for="(suggestion, index) in suggestions"
+                :id="'suggestion-' + index"
+                :key="index"
+                role="option"
+                :aria-selected="index === selectedSuggestionIndex"
+                :class="[
+                  'cursor-pointer px-4 py-2',
+                  index === selectedSuggestionIndex ? 'bg-bg-raised' : 'bg-bg',
+                ]"
+                @click="selectSuggestion(index)"
+                @mousemove="() => (selectedSuggestionIndex = index)"
+              >
+                {{ suggestion }}
+              </li>
+            </ul>
+            <div class="relative flex items-center">
+              <span
+                v-if="bestSuggestion"
+                class="pointer-events-none absolute left-[26px] transform select-none text-gray-400"
+              >
+                <span class="ml-[23.5px] whitespace-pre">{{
+                  " ".repeat(commandInput.length - 1)
+                }}</span>
+                <span> {{ bestSuggestion }} </span>
+                <button
+                  class="text pointer-events-auto ml-2 cursor-pointer rounded-md border-none bg-white text-sm focus:outline-none dark:bg-highlight"
+                  aria-label="Accept suggestion"
+                  style="transform: translateY(-1px)"
+                  @click="acceptSuggestion"
+                >
+                  TAB
+                </button>
+              </span>
+              <div
+                class="pointer-events-none absolute left-0 top-0 flex h-full w-full items-center"
+              >
+                <TerminalSquareIcon class="ml-3 h-5 w-5" />
+              </div>
+              <input
+                v-if="isServerRunning"
+                v-model="commandInput"
+                type="text"
+                placeholder="Send a command"
+                class="w-full rounded-md !pl-10 pt-4 focus:border-none [&&]:border-[1px] [&&]:border-solid [&&]:border-bg-raised [&&]:bg-bg"
+                aria-autocomplete="list"
+                aria-controls="command-suggestions"
+                spellcheck="false"
+                :aria-activedescendant="'suggestion-' + selectedSuggestionIndex"
+                @keydown.tab.prevent="acceptSuggestion"
+                @keydown.down.prevent="selectNextSuggestion"
+                @keydown.up.prevent="selectPrevSuggestion"
+                @keydown.enter.prevent="sendCommand"
+              />
+              <input
+                v-else
+                disabled
+                type="text"
+                placeholder="Send a command"
+                class="w-full rounded-md !pl-10 focus:border-none [&&]:border-[1px] [&&]:border-solid [&&]:border-bg-raised [&&]:bg-bg"
+              />
+            </div>
+          </div>
+        </UiServersPanelTerminal>
+      </div>
+    </div>
+  </div>
+  <UiServersPanelOverviewLoading v-else-if="!isConnected && !isWsAuthIncorrect" />
+  <div v-else-if="isWsAuthIncorrect" class="flex flex-col">
+    <h2>Could not connect to the server.</h2>
+    <p>
+      An error occurred while attempting to connect to your server. Please try refreshing the page.
+      (WebSocket Authentication Failed)
+    </p>
+  </div>
+  <div v-else class="flex flex-col">
+    <h2>Could not connect to the server.</h2>
+    <p>
+      An error occurred while attempting to connect to your server. Please try refreshing the page.
+      (No further information)
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TerminalSquareIcon, XIcon, IssuesIcon } from "@modrinth/assets";
+import { ButtonStyled } from "@modrinth/ui";
+import type { ServerState, Stats } from "~/types/servers";
+import type { Server } from "~/composables/pyroServers";
+
+type ServerProps = {
+  socket: WebSocket | null;
+  isConnected: boolean;
+  isWsAuthIncorrect: boolean;
+  stats: Stats;
+  consoleOutput: string[];
+  serverPowerState: ServerState;
+  isServerRunning: boolean;
+  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+};
+
+const props = defineProps<ServerProps>();
+
+interface ErrorData {
+  id: string;
+  name: string;
+  type: string;
+  version: string;
+  title: string;
+  analysis: {
+    problems: Array<{
+      message: string;
+      counter: number;
+      entry: {
+        level: number;
+        time: string | null;
+        prefix: string;
+        lines: Array<{ number: number; content: string }>;
+      };
+      solutions: Array<{ message: string }>;
+    }>;
+    information: Array<{
+      message: string;
+      counter: number;
+      label: string;
+      value: string;
+      entry: {
+        level: number;
+        time: string | null;
+        prefix: string;
+        lines: Array<{ number: number; content: string }>;
+      };
+    }>;
+  };
+}
+
+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;
+
+  mcError.value = response;
+
+  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;
+};
+
+const clearError = () => {
+  inspectingError.value = null;
+  mcError.value = null;
+};
+
+watch(
+  () => props.serverPowerState,
+  (newVal) => {
+    if (newVal === "crashed") {
+      inspectError();
+    } else {
+      clearError();
+    }
+  },
+);
+
+if (props.serverPowerState === "crashed") {
+  inspectError();
+}
+
+const socket = ref(props.socket);
+
+watch(props, (newAttrs) => {
+  socket.value = newAttrs.socket;
+});
+
+const DYNAMIC_ARG = Symbol("DYNAMIC_ARG");
+
+const commandTree: any = {
+  advancement: {
+    grant: {
+      [DYNAMIC_ARG]: {
+        everything: null,
+        only: {
+          [DYNAMIC_ARG]: null,
+        },
+        from: {
+          [DYNAMIC_ARG]: null,
+        },
+        through: {
+          [DYNAMIC_ARG]: null,
+        },
+        until: {
+          [DYNAMIC_ARG]: null,
+        },
+      },
+    },
+    revoke: {
+      [DYNAMIC_ARG]: {
+        everything: null,
+        only: {
+          [DYNAMIC_ARG]: null,
+        },
+        from: {
+          [DYNAMIC_ARG]: null,
+        },
+        through: {
+          [DYNAMIC_ARG]: null,
+        },
+        until: {
+          [DYNAMIC_ARG]: null,
+        },
+      },
+    },
+  },
+  ban: {
+    [DYNAMIC_ARG]: {
+      [DYNAMIC_ARG]: null,
+      duration: {
+        [DYNAMIC_ARG]: null,
+      },
+    },
+  },
+  ban_ip: null,
+  banlist: {
+    ips: null,
+    players: null,
+    all: null,
+  },
+  bossbar: {
+    add: null,
+    get: null,
+    list: null,
+    remove: null,
+    set: null,
+  },
+  clear: {
+    [DYNAMIC_ARG]: {
+      [DYNAMIC_ARG]: {
+        [DYNAMIC_ARG]: null,
+        reason: null,
+      },
+    },
+  },
+  clone: null,
+  data: {
+    get: null,
+    merge: null,
+    modify: null,
+    remove: null,
+  },
+  datapack: {
+    disable: null,
+    enable: null,
+    list: null,
+    reload: null,
+  },
+  debug: {
+    start: null,
+    stop: null,
+    function: null,
+    memory: null,
+  },
+  defaultgamemode: {
+    survival: null,
+    creative: null,
+    adventure: null,
+    spectator: null,
+  },
+  deop: null,
+  difficulty: {
+    peaceful: null,
+    easy: null,
+    normal: null,
+    hard: null,
+  },
+  effect: {
+    give: {
+      [DYNAMIC_ARG]: {
+        [DYNAMIC_ARG]: {
+          [DYNAMIC_ARG]: {
+            [DYNAMIC_ARG]: {
+              true: null,
+              false: null,
+            },
+          },
+        },
+      },
+    },
+    clear: {
+      [DYNAMIC_ARG]: {
+        [DYNAMIC_ARG]: null,
+      },
+    },
+  },
+  enchant: null,
+  execute: null,
+  experience: {
+    add: null,
+    set: null,
+    query: null,
+  },
+  fill: null,
+  forceload: {
+    add: null,
+    remove: null,
+    query: null,
+  },
+  function: null,
+  gamemode: {
+    survival: {
+      [DYNAMIC_ARG]: null,
+    },
+    creative: {
+      [DYNAMIC_ARG]: null,
+    },
+    adventure: {
+      [DYNAMIC_ARG]: null,
+    },
+    spectator: {
+      [DYNAMIC_ARG]: null,
+    },
+  },
+  gamerule: null,
+  give: {
+    [DYNAMIC_ARG]: {
+      [DYNAMIC_ARG]: {
+        [DYNAMIC_ARG]: null,
+      },
+    },
+  },
+  help: null,
+  kick: null,
+  kill: {
+    [DYNAMIC_ARG]: null,
+  },
+  list: null,
+  locate: {
+    biome: null,
+    poi: null,
+    structure: null,
+  },
+  loot: {
+    give: null,
+    insert: null,
+    replace: null,
+    spawn: null,
+  },
+  me: null,
+  msg: null,
+  op: null,
+  pardon: null,
+  pardon_ip: null,
+  particle: null,
+  playsound: null,
+  recipe: {
+    give: null,
+    take: null,
+  },
+  reload: null,
+  say: null,
+  schedule: {
+    function: null,
+    clear: null,
+  },
+  scoreboard: {
+    objectives: {
+      add: null,
+      remove: null,
+      setdisplay: null,
+      list: null,
+      modify: null,
+    },
+    players: {
+      add: null,
+      remove: null,
+      set: null,
+      get: null,
+      list: null,
+      enable: null,
+      operation: null,
+      reset: null,
+    },
+  },
+  seed: null,
+  setblock: null,
+  setidletimeout: null,
+  setworldspawn: null,
+  spawnpoint: null,
+  spectate: null,
+  spreadplayers: null,
+  stop: null,
+  stopsound: null,
+  summon: null,
+  tag: {
+    add: null,
+    list: null,
+    remove: null,
+  },
+  team: {
+    add: null,
+    empty: null,
+    join: null,
+    leave: null,
+    list: null,
+    modify: null,
+    remove: null,
+  },
+  teleport: {
+    [DYNAMIC_ARG]: {
+      [DYNAMIC_ARG]: {
+        [DYNAMIC_ARG]: {
+          [DYNAMIC_ARG]: null,
+        },
+      },
+    },
+  },
+  tp: {
+    [DYNAMIC_ARG]: {
+      [DYNAMIC_ARG]: {
+        [DYNAMIC_ARG]: null,
+      },
+    },
+  },
+  trigger: null,
+  weather: {
+    clear: {
+      [DYNAMIC_ARG]: null,
+    },
+    rain: {
+      [DYNAMIC_ARG]: null,
+    },
+    thunder: {
+      [DYNAMIC_ARG]: null,
+    },
+  },
+  whitelist: {
+    add: null,
+    list: null,
+    off: null,
+    on: null,
+    reload: null,
+    remove: null,
+  },
+  worldborder: {
+    add: null,
+    center: null,
+    damage: {
+      amount: null,
+      buffer: null,
+    },
+    get: null,
+    set: null,
+    warning: {
+      distance: null,
+      time: null,
+    },
+  },
+  xp: null,
+};
+
+const fullScreen = ref(false);
+const commandInput = ref("");
+const suggestions = ref<string[]>([]);
+const selectedSuggestionIndex = ref(0);
+
+const serverData = computed(() => props.server.general);
+// const serverIP = computed(() => serverData.value?.net.ip ?? "");
+// const serverPort = computed(() => serverData.value?.net.port ?? 0);
+// const serverDomain = computed(() => serverData.value?.net.domain ?? "");
+
+const suggestionsList = ref<HTMLUListElement | null>(null);
+
+useHead({
+  title: `Overview - ${serverData.value?.name ?? "Server"} - Modrinth`,
+});
+
+const bestSuggestion = computed(() => {
+  if (!suggestions.value.length) return "";
+  const inputTokens = commandInput.value.trim().split(/\s+/);
+  let lastInputToken = inputTokens[inputTokens.length - 1] || "";
+  if (inputTokens.length - 1 === 0 && lastInputToken.startsWith("/")) {
+    lastInputToken = lastInputToken.slice(1);
+  }
+  const selectedSuggestion = suggestions.value[selectedSuggestionIndex.value];
+  const suggestionTokens = selectedSuggestion.split(/\s+/);
+  const lastSuggestionToken = suggestionTokens[suggestionTokens.length - 1] || "";
+  if (lastSuggestionToken.toLowerCase().startsWith(lastInputToken.toLowerCase())) {
+    return lastSuggestionToken.slice(lastInputToken.length);
+  }
+  return "";
+});
+
+const getSuggestions = (input: string): string[] => {
+  const trimmedInput = input.trim();
+  const inputWithoutSlash = trimmedInput.startsWith("/") ? trimmedInput.slice(1) : trimmedInput;
+  const tokens = inputWithoutSlash.split(/\s+/);
+  let currentLevel: any = commandTree;
+
+  for (let i = 0; i < tokens.length; i++) {
+    const token = tokens[i].toLowerCase();
+    if (currentLevel?.[token]) {
+      currentLevel = currentLevel[token] as any;
+    } else if (currentLevel?.[DYNAMIC_ARG]) {
+      currentLevel = currentLevel[DYNAMIC_ARG] as any;
+    } else {
+      if (i === tokens.length - 1) {
+        break;
+      }
+      currentLevel = null;
+      break;
+    }
+  }
+
+  if (currentLevel) {
+    const lastToken = tokens[tokens.length - 1]?.toLowerCase() || "";
+    const possibleKeys = Object.keys(currentLevel);
+    if (currentLevel[DYNAMIC_ARG]) {
+      possibleKeys.push("<arg>");
+    }
+    return possibleKeys
+      .filter((key) => key === "<arg>" || key.toLowerCase().startsWith(lastToken))
+      .filter((k) => k !== lastToken.trim())
+      .map((key) => {
+        if (key === "<arg>") {
+          return [...tokens.slice(0, -1), "<arg>"].join(" ");
+        }
+        const newTokens = [...tokens.slice(0, -1), key];
+        return newTokens.join(" ");
+      });
+  }
+
+  return [];
+};
+
+const sendCommand = () => {
+  const cmd = commandInput.value.trim();
+  if (!socket || !cmd) return;
+  try {
+    sendConsoleCommand(cmd);
+    commandInput.value = "";
+    suggestions.value = [];
+    selectedSuggestionIndex.value = 0;
+  } catch (error) {
+    console.error("Error sending command:", error);
+  }
+};
+
+const sendConsoleCommand = (cmd: string) => {
+  try {
+    socket.value?.send(JSON.stringify({ event: "command", cmd }));
+  } catch (error) {
+    console.error("Error sending command:", error);
+  }
+};
+
+watch(
+  () => selectedSuggestionIndex.value,
+  (newVal) => {
+    if (suggestionsList.value) {
+      const selectedSuggestion = suggestionsList.value.querySelector(`#suggestion-${newVal}`);
+      if (selectedSuggestion) {
+        selectedSuggestion.scrollIntoView({ block: "nearest" });
+      }
+    }
+  },
+);
+
+watch(
+  () => commandInput.value,
+  (newVal) => {
+    const trimmed = newVal.trim();
+    if (!trimmed) {
+      suggestions.value = [];
+      return;
+    }
+    suggestions.value = getSuggestions(newVal);
+    selectedSuggestionIndex.value = 0;
+  },
+);
+
+const selectNextSuggestion = () => {
+  if (suggestions.value.length === 0) return;
+  selectedSuggestionIndex.value = (selectedSuggestionIndex.value + 1) % suggestions.value.length;
+};
+
+const selectPrevSuggestion = () => {
+  if (suggestions.value.length === 0) return;
+  selectedSuggestionIndex.value =
+    (selectedSuggestionIndex.value - 1 + suggestions.value.length) % suggestions.value.length;
+};
+
+const acceptSuggestion = () => {
+  if (suggestions.value.filter((s) => s !== "<arg>").length === 0) return;
+  const selected = suggestions.value[selectedSuggestionIndex.value];
+  const currentTokens = commandInput.value.trim().split(" ");
+  const suggestionTokens = selected.split(/\s+/).filter(Boolean);
+
+  // check if last current token is in command tree if so just add to the end
+  if (currentTokens[currentTokens.length - 1].toLowerCase() === suggestionTokens[0].toLowerCase()) {
+    /* empty */
+  } else {
+    const offset =
+      currentTokens.length - 1 === 0 && currentTokens[0].trim().startsWith("/") ? 1 : 0;
+    commandInput.value =
+      commandInput.value +
+      suggestionTokens[suggestionTokens.length - 1].substring(
+        currentTokens[currentTokens.length - 1].length - offset,
+      ) +
+      " ";
+    suggestions.value = getSuggestions(commandInput.value);
+    selectedSuggestionIndex.value = 0;
+  }
+};
+
+const selectSuggestion = (index: number) => {
+  selectedSuggestionIndex.value = index;
+  acceptSuggestion();
+};
+</script>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options.vue b/apps/frontend/src/pages/servers/manage/[id]/options.vue
new file mode 100644
index 000000000..8ae12f174
--- /dev/null
+++ b/apps/frontend/src/pages/servers/manage/[id]/options.vue
@@ -0,0 +1,48 @@
+<template>
+  <UiServersServerSidebar :route="route" :nav-links="navLinks" :server="props.server" />
+</template>
+
+<script setup lang="ts">
+import {
+  InfoIcon,
+  ListIcon,
+  SettingsIcon,
+  TextQuoteIcon,
+  VersionIcon,
+  CardIcon,
+  UserIcon,
+  WrenchIcon,
+} from "@modrinth/assets";
+import type { Server } from "~/composables/pyroServers";
+
+const route = useRoute();
+const serverId = route.params.id as string;
+
+const props = defineProps<{
+  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+}>();
+
+useHead({
+  title: `Options - ${props.server.general?.name ?? "Server"} - Modrinth`,
+});
+
+const navLinks = [
+  { icon: SettingsIcon, label: "General", href: `/servers/manage/${serverId}/options` },
+  { icon: WrenchIcon, label: "Platform", href: `/servers/manage/${serverId}/options/loader` },
+  { icon: TextQuoteIcon, label: "Startup", href: `/servers/manage/${serverId}/options/startup` },
+  { icon: VersionIcon, label: "Network", href: `/servers/manage/${serverId}/options/network` },
+  { icon: ListIcon, label: "Properties", href: `/servers/manage/${serverId}/options/properties` },
+  {
+    icon: UserIcon,
+    label: "Preferences",
+    href: `/servers/manage/${serverId}/options/preferences`,
+  },
+  {
+    icon: CardIcon,
+    label: "Billing",
+    href: `/settings/billing#server-${serverId}`,
+    external: true,
+  },
+  { icon: InfoIcon, label: "Info", href: `/servers/manage/${serverId}/options/info` },
+];
+</script>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/billing.vue b/apps/frontend/src/pages/servers/manage/[id]/options/billing.vue
new file mode 100644
index 000000000..ab22342a4
--- /dev/null
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/billing.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="universal-card">
+    <p>You can manage your server's billing from Settings > Billing and subscriptions.</p>
+    <ButtonStyled>
+      <NuxtLink to="/settings/billing">Go to Billing</NuxtLink>
+    </ButtonStyled>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ButtonStyled } from "@modrinth/ui";
+</script>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/index.vue b/apps/frontend/src/pages/servers/manage/[id]/options/index.vue
new file mode 100644
index 000000000..84f1e05c9
--- /dev/null
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/index.vue
@@ -0,0 +1,322 @@
+<template>
+  <div class="relative h-full w-full overflow-y-auto">
+    <div v-if="data" class="flex h-full w-full flex-col">
+      <div class="gap-2">
+        <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 the name of your server. This name is only visible on Modrinth.</span>
+          </label>
+          <div class="flex flex-col gap-2">
+            <input
+              id="server-name-field"
+              v-model="serverName"
+              class="w-full md:w-[50%]"
+              maxlength="48"
+              minlength="1"
+              @keyup.enter="!serverName && saveGeneral"
+            />
+            <span v-if="!serverName" class="text-sm text-rose-400">
+              Server name must be at least 1 character long.
+            </span>
+            <span v-if="!isValidServerName" class="text-sm text-rose-400">
+              Server name can contain any character.
+            </span>
+          </div>
+        </div>
+        <!-- WIP - disable for now
+        <div class="card flex flex-col gap-4">
+          <label for="server-motd-field" class="flex flex-col gap-2">
+            <span class="text-lg font-bold text-contrast">Server MOTD</span>
+            <span>
+              The message of the day is the message that players see when they log in to the server.
+            </span>
+          </label>
+          <UiServersMOTDEditor :server="props.server" />
+        </div>
+        -->
+
+        <div class="card flex flex-col gap-4">
+          <label for="server-subdomain" class="flex flex-col gap-2">
+            <span class="text-lg font-bold text-contrast">Custom URL</span>
+            <span> Your friends can connect to your server using this URL. </span>
+          </label>
+          <div class="flex w-full items-center gap-2 md:w-[60%]">
+            <input
+              id="server-subdomain"
+              v-model="serverSubdomain"
+              class="h-[50%] w-[63%]"
+              maxlength="32"
+              @keyup.enter="saveGeneral"
+            />
+            .modrinth.gg
+          </div>
+          <div class="flex flex-col text-sm text-rose-400">
+            <span v-if="!isValidLengthSubdomain">
+              Subdomain must be at least 5 characters long.
+            </span>
+            <span v-if="!isValidCharsSubdomain">
+              Subdomain can only contain alphanumeric characters and dashes.
+            </span>
+          </div>
+        </div>
+
+        <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>
+          </label>
+          <div class="flex gap-4">
+            <div
+              v-tooltip="'Upload a custom Icon'"
+              class="group relative flex w-fit cursor-pointer items-center gap-2 rounded-xl bg-table-alternateRow"
+              @dragover.prevent="onDragOver"
+              @dragleave.prevent="onDragLeave"
+              @drop.prevent="onDrop"
+              @click="triggerFileInput"
+            >
+              <input
+                v-if="icon"
+                id="server-icon-field"
+                type="file"
+                accept="image/png,image/jpeg,image/gif,image/webp"
+                hidden
+                @change="uploadFile"
+              />
+              <div
+                class="absolute top-0 hidden size-[6rem] flex-col items-center justify-center rounded-xl bg-button-bg p-2 opacity-80 group-hover:flex"
+              >
+                <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"
+              />
+            </div>
+            <ButtonStyled>
+              <button v-tooltip="'Synchronize icon with installed modpack'" @click="resetIcon">
+                <TransferIcon class="h-6 w-6" />
+                <span>Sync icon</span>
+              </button>
+            </ButtonStyled>
+          </div>
+        </div>
+      </div>
+    </div>
+    <UiServersPyroLoading v-else />
+    <UiServersSaveBanner
+      :is-visible="!!hasUnsavedChanges && !!isValidServerName"
+      :server="props.server"
+      :is-updating="isUpdating"
+      :save="saveGeneral"
+      :reset="resetGeneral"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { EditIcon, TransferIcon } from "@modrinth/assets";
+import ButtonStyled from "@modrinth/ui/src/components/base/ButtonStyled.vue";
+
+import type { Server } from "~/composables/pyroServers";
+
+const props = defineProps<{
+  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+}>();
+
+const data = computed(() => props.server.general);
+const serverName = ref(data.value?.name);
+const serverSubdomain = ref(data.value?.net?.domain ?? "");
+const isValidLengthSubdomain = computed(() => serverSubdomain.value.length >= 5);
+const isValidCharsSubdomain = computed(() => /^[a-zA-Z0-9-]+$/.test(serverSubdomain.value));
+const isValidSubdomain = computed(
+  () => isValidLengthSubdomain.value && isValidCharsSubdomain.value,
+);
+const icon = computed(() => data.value?.image);
+
+const isUpdating = ref(false);
+const hasUnsavedChanges = computed(
+  () =>
+    (serverName.value && serverName.value !== data.value?.name) ||
+    serverSubdomain.value !== data.value?.net?.domain,
+);
+const isValidServerName = computed(() => (serverName.value?.length ?? 0) > 0);
+
+watch(serverName, (oldValue) => {
+  if (!isValidServerName.value) {
+    serverName.value = oldValue;
+  }
+});
+
+const saveGeneral = async () => {
+  if (!isValidServerName.value || !isValidSubdomain.value) return;
+
+  try {
+    isUpdating.value = true;
+    if (serverName.value !== data.value?.name) {
+      await data.value?.updateName(serverName.value ?? "");
+    }
+    if (serverSubdomain.value !== data.value?.net?.domain) {
+      try {
+        // type shit backend makes me do
+        const response = await props.server.network?.checkSubdomainAvailability(
+          serverSubdomain.value,
+        );
+        if (response === undefined) {
+          throw new Error("Failed to check subdomain availability");
+        }
+
+        if (typeof response === "object" && response !== null && "available" in response) {
+          const typedResponse = response as { available: boolean };
+          if (!typedResponse.available) {
+            addNotification({
+              group: "serverOptions",
+              type: "error",
+              title: "Subdomain not available",
+              text: "The subdomain you entered is already in use.",
+            });
+            return;
+          }
+        } else {
+          throw new Error("Invalid response format from availability check");
+        }
+
+        await props.server.network?.changeSubdomain(serverSubdomain.value);
+      } catch (error) {
+        console.error("Error checking subdomain availability:", error);
+        addNotification({
+          group: "serverOptions",
+          type: "error",
+          title: "Error checking availability",
+          text: "Failed to verify if the subdomain is available.",
+        });
+        return;
+      }
+    }
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    await props.server.refresh();
+    addNotification({
+      group: "serverOptions",
+      type: "success",
+      title: "Server settings updated",
+      text: "Your server settings were successfully changed.",
+    });
+  } catch (error) {
+    console.error(error);
+    addNotification({
+      group: "serverOptions",
+      type: "error",
+      title: "Failed to update server settings",
+      text: "An error occurred while attempting to update your server settings.",
+    });
+  } finally {
+    isUpdating.value = false;
+  }
+};
+
+const resetGeneral = () => {
+  serverName.value = data.value?.name || "";
+  serverSubdomain.value = data.value?.net?.domain ?? "";
+};
+
+const uploadFile = async (e: Event) => {
+  const file = (e.target as HTMLInputElement).files?.[0];
+  // down scale the image to 64x64
+  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);
+        } else {
+          reject(new Error("Canvas toBlob failed"));
+        }
+      }, "image/png");
+    };
+    img.onerror = reject;
+  });
+  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.",
+  });
+};
+
+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.",
+    });
+  }
+};
+
+const onDragOver = (e: DragEvent) => {
+  e.preventDefault();
+};
+
+const onDragLeave = (e: DragEvent) => {
+  e.preventDefault();
+};
+
+const onDrop = (e: DragEvent) => {
+  e.preventDefault();
+  uploadFile(e);
+};
+
+const triggerFileInput = () => {
+  const input = document.createElement("input");
+  input.type = "file";
+  input.id = "server-icon-field";
+  input.accept = "image/png,image/jpeg,image/gif,image/webp";
+  input.onchange = uploadFile;
+  input.click();
+};
+</script>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/info.vue b/apps/frontend/src/pages/servers/manage/[id]/options/info.vue
new file mode 100644
index 000000000..b9f969413
--- /dev/null
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/info.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="h-full w-full gap-2 overflow-y-auto">
+    <div class="card">
+      <div class="flex flex-col gap-4">
+        <div class="flex flex-col justify-between gap-4 sm:flex-row">
+          <label class="flex flex-col gap-2">
+            <span class="text-lg font-bold text-contrast">SFTP</span>
+            <span> SFTP allows you to access your server's files from outside of Modrinth. </span>
+          </label>
+          <ButtonStyled>
+            <button
+              v-tooltip="'This button only works with compatible SFTP clients (e.g. WinSCP)'"
+              class="!w-full sm:!w-auto"
+              @click="openSftp"
+            >
+              <ExternalIcon class="h-5 w-5" />
+              Launch SFTP
+            </button>
+          </ButtonStyled>
+        </div>
+
+        <div
+          class="flex w-full flex-row justify-between gap-2 rounded-xl bg-table-alternateRow p-4"
+        >
+          <div class="flex flex-col gap-2">
+            <span class="cursor-pointer font-bold text-contrast">
+              {{ data?.sftp_host }}
+            </span>
+
+            <span class="text-xs uppercase text-secondary">server address</span>
+          </div>
+
+          <ButtonStyled type="transparent">
+            <button
+              v-tooltip="'Copy SFTP server address'"
+              @click="copyToClipboard('Server address', data?.sftp_host)"
+            >
+              <CopyIcon class="h-5 w-5 hover:cursor-pointer" />
+            </button>
+          </ButtonStyled>
+        </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"
+          >
+            <div class="flex items-center justify-between">
+              <span class="font-bold text-contrast">
+                {{ data?.sftp_username }}
+              </span>
+
+              <ButtonStyled type="transparent">
+                <button
+                  v-tooltip="'Copy SFTP username'"
+                  @click="copyToClipboard('Username', data?.sftp_username)"
+                >
+                  <CopyIcon class="h-5 w-5 hover:cursor-pointer" />
+                </button>
+              </ButtonStyled>
+            </div>
+            <span class="text-xs uppercase 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">
+              <span class="font-bold text-contrast">
+                {{
+                  showPassword ? data?.sftp_password : "*".repeat(data?.sftp_password?.length ?? 0)
+                }}
+              </span>
+
+              <div class="flex flex-row items-center gap-1">
+                <ButtonStyled type="transparent">
+                  <button
+                    v-tooltip="'Copy SFTP password'"
+                    @click="copyToClipboard('Password', data?.sftp_password)"
+                  >
+                    <CopyIcon class="h-5 w-5 hover:cursor-pointer" />
+                  </button>
+                </ButtonStyled>
+                <ButtonStyled type="transparent">
+                  <button
+                    v-tooltip="showPassword ? 'Hide password' : 'Show password'"
+                    @click="togglePassword"
+                  >
+                    <EyeIcon v-if="showPassword" class="h-5 w-5 hover:cursor-pointer" />
+                    <EyeOffIcon v-else class="h-5 w-5 hover:cursor-pointer" />
+                  </button>
+                </ButtonStyled>
+              </div>
+            </div>
+            <span class="text-xs uppercase text-secondary">password</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card">
+      <h2 class="text-xl font-bold">Info</h2>
+      <div class="rounded-xl bg-table-alternateRow p-4">
+        <table
+          class="min-w-full border-collapse overflow-hidden rounded-lg border-2 border-gray-300"
+        >
+          <tbody>
+            <tr v-for="property in properties" :key="property.name">
+              <td v-if="property.value !== 'Unknown'" class="py-3">{{ property.name }}</td>
+              <td v-if="property.value !== 'Unknown'" class="px-4">
+                <UiCopyCode :text="property.value" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ButtonStyled } from "@modrinth/ui";
+import { CopyIcon, ExternalIcon, EyeIcon, EyeOffIcon } from "@modrinth/assets";
+import type { Server } from "~/composables/pyroServers";
+
+const route = useNativeRoute();
+const serverId = route.params.id as string;
+
+const props = defineProps<{
+  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+}>();
+
+const data = computed(() => props.server.general);
+const showPassword = ref(false);
+
+const openSftp = () => {
+  const sftpUrl = `sftp://${data.value?.sftp_username}@${data.value?.sftp_host}`;
+  window.open(sftpUrl, "_blank");
+};
+
+const togglePassword = () => {
+  showPassword.value = !showPassword.value;
+};
+
+const copyToClipboard = (name: string, textToCopy?: string) => {
+  navigator.clipboard.writeText(textToCopy || "");
+  addNotification({
+    type: "success",
+    title: `${name} copied to clipboard!`,
+  });
+};
+
+const properties = [
+  { name: "Server ID", value: serverId ?? "Unknown" },
+  { name: "Node", value: data.value?.datacenter ?? "Unknown" },
+  { name: "Kind", value: data.value?.upstream?.kind ?? data.value?.loader ?? "Unknown" },
+  { name: "Project ID", value: data.value?.upstream?.project_id ?? "Unknown" },
+  { name: "Version ID", value: data.value?.upstream?.version_id ?? "Unknown" },
+];
+</script>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/loader.vue b/apps/frontend/src/pages/servers/manage/[id]/options/loader.vue
new file mode 100644
index 000000000..18781fc64
--- /dev/null
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/loader.vue
@@ -0,0 +1,610 @@
+<template>
+  <NewModal ref="editModal" header="Select modpack">
+    <UiServersProjectSelect type="modpack" @select="reinstallNew" />
+  </NewModal>
+
+  <NewModal
+    ref="versionSelectModal"
+    :header="isSecondPhase ? 'Confirm reinstallation' : 'Select version'"
+    @hide="onHide"
+    @show="onShow"
+  >
+    <div class="flex flex-col gap-4 md:w-[600px]">
+      <p
+        :style="{
+          lineHeight: isSecondPhase ? '1.5' : undefined,
+          marginBottom: isSecondPhase ? '-12px' : '0',
+          marginTop: isSecondPhase ? '-4px' : '-2px',
+        }"
+      >
+        {{
+          isSecondPhase
+            ? "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?"
+            : "Choose the version of Minecraft you want to use for this server."
+        }}
+      </p>
+      <div v-if="!isSecondPhase" class="flex flex-col gap-2">
+        <UiServersTeleportDropdownMenu
+          v-model="selectedMCVersion"
+          name="mcVersion"
+          :options="mcVersions"
+          placeholder="Select Minecraft version..."
+        />
+        <UiServersTeleportDropdownMenu
+          v-if="selectedMCVersion && selectedLoader.toLowerCase() !== 'vanilla'"
+          v-model="selectedLoaderVersion"
+          name="loaderVersion"
+          :options="selectedLoaderVersions"
+          placeholder="Select loader version..."
+        />
+        <div class="mt-2 flex items-center gap-2">
+          <input
+            id="hard-reset"
+            :checked="hardReset"
+            class="switch stylized-toggle"
+            type="checkbox"
+            @change="hardReset = ($event.target as HTMLInputElement).checked"
+          />
+          <label for="hard-reset">Clean reinstall</label>
+        </div>
+      </div>
+      <div class="mt-4 flex justify-start gap-4">
+        <ButtonStyled :color="isDangerous ? 'red' : 'brand'">
+          <button :disabled="canInstall" @click="handleReinstall">
+            <RightArrowIcon />
+            {{
+              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 ? "No" : "Cancel" }}
+          </button>
+        </ButtonStyled>
+      </div>
+    </div>
+  </NewModal>
+
+  <NewModal ref="mrpackModal" header="Upload mrpack" @hide="onHide" @show="onShow">
+    <div>
+      <div class="mt-2 flex items-center gap-2">
+        <input
+          id="hard-reset"
+          :checked="hardReset"
+          class="switch stylized-toggle"
+          type="checkbox"
+          @change="hardReset = ($event.target as HTMLInputElement).checked"
+        />
+        <label for="hard-reset">Clean reinstall</label>
+      </div>
+      <input
+        type="file"
+        accept=".mrpack"
+        class="mt-4"
+        :disabled="isLoading"
+        @change="uploadMrpack"
+      />
+      <div class="mt-4 flex justify-start gap-4">
+        <ButtonStyled :color="isDangerous ? 'red' : 'brand'">
+          <button :disabled="!mrpackFile || isLoading" @click="reinstallMrpack">
+            <RightArrowIcon />
+            {{
+              isSecondPhase
+                ? "Erase and install"
+                : loadingServerCheck
+                  ? "Loading..."
+                  : isDangerous
+                    ? "Erase and install"
+                    : "Install"
+            }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button :disabled="isLoading" @click="mrpackModal?.hide">
+            <XIcon />
+            Cancel
+          </button>
+        </ButtonStyled>
+      </div>
+    </div>
+  </NewModal>
+
+  <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 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}`"
+              >
+                <TransferIcon class="size-4" />
+                Change modpack
+              </nuxt-link>
+            </ButtonStyled>
+            <ButtonStyled>
+              <button class="!w-full sm:!w-auto" @click="mrpackModal.show()">
+                <UploadIcon class="size-4" /> Upload .mrpack file
+              </button>
+            </ButtonStyled>
+          </div>
+        </div>
+        <div
+          v-if="data.upstream"
+          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
+                class="mt-2 flex w-full max-w-[24rem] flex-col items-center gap-2 sm:mt-0 sm:flex-row"
+              >
+                <UiServersTeleportDropdownMenu
+                  v-if="versions && Array.isArray(versions) && versions.length > 0"
+                  v-model="version"
+                  :options="options"
+                  placeholder="Change version"
+                  name="version"
+                />
+                <ButtonStyled>
+                  <button
+                    :disabled="
+                      isLoading || (props.server.general?.status === 'installing' && isError)
+                    "
+                    class="!w-full sm:!w-auto"
+                    @click="reinstallCurrent"
+                  >
+                    <DownloadIcon class="size-4" />
+                    Reinstall
+                  </button>
+                </ButtonStyled>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-else class="flex w-full flex-col items-center gap-2 sm:w-fit sm:flex-row">
+          <ButtonStyled>
+            <nuxt-link class="!w-full sm:!w-auto" :to="`/modpacks?sid=${props.server.serverId}`">
+              <DownloadIcon class="size-4" /> Install a modpack
+            </nuxt-link>
+          </ButtonStyled>
+          <span class="hidden sm:block">or</span>
+          <ButtonStyled>
+            <button class="!w-full sm:!w-auto" @click="mrpackModal.show()">
+              <UploadIcon class="size-4" /> Upload .mrpack file
+            </button>
+          </ButtonStyled>
+        </div>
+      </div>
+
+      <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">Mod loader</h2>
+          <p class="m-0">Mod loaders allow you to run mods on your server.</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
+              mod loader.
+            </span>
+          </div>
+        </div>
+        <div
+          class="flex w-full flex-col gap-1 rounded-2xl bg-table-alternateRow p-2"
+          :class="{
+            'pointer-events-none cursor-not-allowed select-none opacity-50':
+              props.server.general?.status === 'installing' && isError,
+          }"
+          :tabindex="props.server.general?.status === 'installing' ? -1 : 0"
+        >
+          <UiServersLoaderSelector :data="data" @select-loader="selectLoader" />
+        </div>
+      </div>
+    </div>
+
+    <UiServersPyroLoading v-else />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ButtonStyled, NewModal } from "@modrinth/ui";
+import {
+  TransferIcon,
+  DownloadIcon,
+  UploadIcon,
+  InfoIcon,
+  RightArrowIcon,
+  XIcon,
+} from "@modrinth/assets";
+import type { Server } from "~/composables/pyroServers";
+
+const route = useNativeRoute();
+const serverId = route.params.id as string;
+
+const props = defineProps<{
+  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+}>();
+
+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);
+const isBackupLimited = computed(() => (props.server.backups?.data?.length || 0) >= 15);
+
+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 editModal = ref();
+const versionSelectModal = ref();
+const mrpackModal = ref();
+
+const canInstall = computed(() => {
+  const conds =
+    !selectedMCVersion.value ||
+    isBackupLimited.value ||
+    isLoading.value ||
+    loadingServerCheck.value ||
+    serverCheckError.value.trim().length > 0;
+
+  if (selectedLoader.value.toLowerCase() === "vanilla") {
+    return conds;
+  }
+
+  return conds || !selectedLoaderVersion.value;
+});
+
+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(() => {
+  /*
+      loaderVersions[
+      selectedLoader.value.toLowerCase() === "neoforge" ? "neo" : selectedLoader.toLowerCase()
+    ]
+      .find((x) => x.id === selectedMCVersion)
+      ?.loaders.map((x) => x.id) || []
+      */
+  let loader = selectedLoader.value.toLowerCase();
+  if (loader === "neoforge") {
+    loader = "neo";
+  }
+  const backwardsCompatibleVersion = loaderVersions[loader].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[loader]
+      .find((x) => x.id === selectedMCVersion.value)
+      ?.loaders.map((x) => x.id) || []
+  );
+});
+
+const data = computed(() => props.server.general);
+watch(
+  () => data.value?.loader,
+  () => {
+    console.log("Loader:", data.value?.loader);
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+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("");
+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 selectLoader = (loader: string) => {
+  selectedLoader.value = loader;
+  versionSelectModal.value.show();
+};
+
+const loadingServerCheck = ref(false);
+const serverCheckError = ref("");
+
+const cachedVersions: Record<string, any> = {};
+
+watch(selectedMCVersion, async () => {
+  if (selectedMCVersion.value.trim().length < 3) return;
+  // const res = await fetch(
+  //   `/loader-versions?loader=minecraft&version=${selectedMCVersion.value}`,
+  // ).then((r) => r.json());
+
+  loadingServerCheck.value = true;
+  const res =
+    cachedVersions[selectedMCVersion.value] ||
+    (await $fetch(`/loader-versions?loader=minecraft&version=${selectedMCVersion.value}`));
+
+  cachedVersions[selectedMCVersion.value] = res;
+
+  loadingServerCheck.value = false;
+
+  if (res.downloads.server) {
+    serverCheckError.value = "";
+  } else {
+    serverCheckError.value =
+      "We couldn't find a server.jar for this version. Please pick another one.";
+  }
+});
+
+const onShow = () => {
+  selectedMCVersion.value = "";
+  selectedLoaderVersion.value = "";
+};
+
+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);
+    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;
+      await props.server.backups?.create(backupName);
+    } 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 {
+    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 reinstallNew = async (project: any, versionNumber: string) => {
+  editModal.value.hide();
+  try {
+    const versions = (await useBaseFetch(`project/${project.project_id}/version`)) as any;
+    const version = versions.find((x: any) => x.version_number === versionNumber);
+
+    if (!version?.id) {
+      throw new Error("Version not found");
+    }
+    await props.server.general?.reinstall(serverId, false, project.project_id, version.id);
+    emit("reinstall");
+    await nextTick();
+    window.scrollTo(0, 0);
+  } catch (error) {
+    handleReinstallError(error);
+  }
+};
+
+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 reinstallMrpack = async () => {
+  if (!mrpackFile.value) {
+    return;
+  }
+
+  const mrpack = new File([mrpackFile.value], mrpackFile.value.name, {
+    type: mrpackFile.value.type,
+  });
+
+  try {
+    isLoading.value = true;
+    await props.server.general?.reinstallFromMrpack(mrpack, hardReset.value);
+    emit("reinstall");
+    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;
+}
+</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
new file mode 100644
index 000000000..ba3a3528a
--- /dev/null
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/network.vue
@@ -0,0 +1,468 @@
+<template>
+  <div class="contents">
+    <NewModal ref="newAllocationModal" header="New allocation">
+      <form class="flex flex-col gap-2 md:w-[600px]" @submit.prevent="addNewAllocation">
+        <label for="new-allocation-name" class="font-semibold text-contrast"> Name </label>
+        <input
+          id="new-allocation-name"
+          ref="newAllocationInput"
+          v-model="newAllocationName"
+          type="text"
+          class="bg-bg-input w-full rounded-lg p-4"
+          maxlength="32"
+          placeholder="e.g. Secondary allocation"
+        />
+        <div class="mb-1 mt-4 flex justify-start gap-4">
+          <ButtonStyled color="brand">
+            <button :disabled="!newAllocationName" type="submit">
+              <PlusIcon /> Create allocation
+            </button>
+          </ButtonStyled>
+          <ButtonStyled>
+            <button @click="newAllocationModal?.hide()">Cancel</button>
+          </ButtonStyled>
+        </div>
+      </form>
+    </NewModal>
+
+    <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
+          id="edit-allocation-name"
+          ref="editAllocationInput"
+          v-model="newAllocationName"
+          type="text"
+          class="bg-bg-input w-full rounded-lg p-4"
+          maxlength="32"
+          placeholder="e.g. Secondary allocation"
+        />
+        <div class="mb-1 mt-4 flex justify-start gap-4">
+          <ButtonStyled color="brand">
+            <button :disabled="!newAllocationName" type="submit">
+              <SaveIcon /> Update Allocation
+            </button>
+          </ButtonStyled>
+          <ButtonStyled>
+            <button @click="editAllocationModal?.hide()">Cancel</button>
+          </ButtonStyled>
+        </div>
+      </form>
+    </NewModal>
+
+    <ConfirmModal
+      ref="confirmDeleteModal"
+      title="Deleting allocation"
+      :description="`You are deleting the allocation ${allocationToDelete}. This cannot be reserved again. Are you sure you want to proceed?`"
+      proceed-label="Delete"
+      @proceed="confirmDeleteAllocation"
+    />
+
+    <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 class="flex h-full flex-col">
+          <!-- Subdomain section -->
+          <div class="card flex flex-col gap-4">
+            <div class="flex w-full flex-col items-center justify-between gap-4 sm:flex-row">
+              <label for="user-domain" class="flex flex-col gap-2">
+                <span class="text-lg font-bold text-contrast">Generated DNS records</span>
+                <span>
+                  Set up your personal domain to connect to your server via custom DNS records.
+                </span>
+              </label>
+
+              <ButtonStyled>
+                <button
+                  class="!w-full sm:!w-auto"
+                  :disabled="userDomain == ''"
+                  @click="exportDnsRecords"
+                >
+                  <UploadIcon />
+                  <span>Export DNS records</span>
+                </button>
+              </ButtonStyled>
+            </div>
+
+            <input
+              id="user-domain"
+              v-model="userDomain"
+              class="w-full md:w-[50%]"
+              maxlength="64"
+              minlength="1"
+              type="text"
+              :placeholder="exampleDomain"
+            />
+
+            <div
+              class="flex max-w-full flex-none overflow-auto rounded-xl bg-table-alternateRow p-4"
+            >
+              <table
+                class="w-full flex-none border-collapse truncate rounded-lg border-2 border-gray-300"
+              >
+                <tbody class="w-full">
+                  <tr v-for="record in dnsRecords" :key="record.content" class="w-full">
+                    <td class="w-1/6 py-3 pr-4 md:w-1/5 md:pr-8 lg:w-1/4 lg:pr-12">
+                      <div class="flex flex-col gap-1" @click="copyText(record.type)">
+                        <span
+                          class="text-md font-bold tracking-wide text-contrast hover:cursor-pointer"
+                        >
+                          {{ record.type }}
+                        </span>
+                        <span class="text-xs uppercase text-secondary">type</span>
+                      </div>
+                    </td>
+                    <td class="w-2/6 py-3 md:w-1/3">
+                      <div class="flex flex-col gap-1" @click="copyText(record.name)">
+                        <span
+                          class="text-md truncate font-bold tracking-wide text-contrast hover:cursor-pointer"
+                        >
+                          {{ record.name }}
+                        </span>
+                        <span class="text-xs uppercase text-secondary">name</span>
+                      </div>
+                    </td>
+                    <td class="w-3/6 py-3 pl-4 md:w-5/12 lg:w-5/12">
+                      <div class="flex flex-col gap-1" @click="copyText(record.content)">
+                        <span
+                          class="text-md w-fit truncate font-bold tracking-wide text-contrast hover:cursor-pointer"
+                        >
+                          {{ record.content }}
+                        </span>
+                        <span class="text-xs uppercase text-secondary">content</span>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <div class="flex items-center gap-2">
+              <InfoIcon class="hidden sm:block" />
+              <span class="text-sm text-secondary">
+                You must own your own domain to use this feature.
+              </span>
+            </div>
+          </div>
+
+          <!-- Allocations section -->
+          <div class="card flex flex-col gap-4">
+            <div class="flex w-full flex-col items-center justify-between gap-4 sm:flex-row">
+              <div class="flex flex-col gap-2">
+                <span class="text-lg font-bold text-contrast">Allocations</span>
+                <span>
+                  Configure additional ports for internet-facing features like map viewers or voice
+                  chat mods.
+                </span>
+              </div>
+
+              <ButtonStyled type="standard" color="brand" @click="showNewAllocationModal">
+                <button class="!w-full sm:!w-auto">
+                  <PlusIcon />
+                  <span>New allocation</span>
+                </button>
+              </ButtonStyled>
+            </div>
+
+            <div class="flex w-full flex-col overflow-hidden rounded-xl bg-table-alternateRow p-4">
+              <!-- Primary allocation -->
+              <div class="flex flex-col justify-between gap-2 sm:flex-row sm:items-center">
+                <span class="text-md font-bold tracking-wide text-contrast">
+                  Primary allocation
+                </span>
+
+                <UiCopyCode :text="`${serverIP}:${serverPrimaryPort}`" />
+              </div>
+            </div>
+
+            <div
+              v-if="allocations?.[0]"
+              class="flex w-full flex-col gap-4 overflow-hidden rounded-xl bg-table-alternateRow p-4"
+            >
+              <div
+                v-for="allocation in allocations"
+                :key="allocation.port"
+                class="border-border flex flex-col justify-between gap-4 sm:flex-row sm:items-center"
+              >
+                <div class="flex flex-row items-center gap-4">
+                  <VersionIcon class="h-7 w-7 flex-none rotate-90" />
+                  <div class="flex w-[20rem] flex-col justify-between sm:flex-row sm:items-center">
+                    <div class="flex flex-col gap-1">
+                      <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>
+                    </div>
+                    <div class="flex flex-col gap-1">
+                      <span
+                        class="text-md w-10 tracking-wide text-secondary sm:font-bold sm:text-contrast"
+                      >
+                        {{ allocation.port }}
+                      </span>
+                      <span class="hidden text-xs uppercase text-secondary sm:block">port</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="flex w-full flex-row items-center gap-2 sm:w-auto">
+                  <ButtonStyled icon-only>
+                    <button
+                      class="!w-full sm:!w-auto"
+                      @click="showEditAllocationModal(allocation.port)"
+                    >
+                      <EditIcon />
+                    </button>
+                  </ButtonStyled>
+                  <ButtonStyled icon-only color="red">
+                    <button
+                      class="!w-full sm:!w-auto"
+                      @click="showConfirmDeleteModal(allocation.port)"
+                    >
+                      <TrashIcon />
+                    </button>
+                  </ButtonStyled>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <UiServersSaveBanner
+        :is-visible="!!hasUnsavedChanges && !!isValidSubdomain"
+        :server="props.server"
+        :is-updating="isUpdating"
+        :save="saveNetwork"
+        :reset="resetNetwork"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  PlusIcon,
+  TrashIcon,
+  EditIcon,
+  VersionIcon,
+  SaveIcon,
+  InfoIcon,
+  UploadIcon,
+} from "@modrinth/assets";
+import { ButtonStyled, NewModal, ConfirmModal } from "@modrinth/ui";
+import { ref, computed, nextTick } from "vue";
+import type { Server } from "~/composables/pyroServers";
+
+const props = defineProps<{
+  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+}>();
+
+const isUpdating = ref(false);
+const data = computed(() => props.server.general);
+
+const serverIP = ref(data?.value?.net?.ip ?? "");
+const serverSubdomain = ref(data?.value?.net?.domain ?? "");
+const serverPrimaryPort = ref(data?.value?.net?.port ?? 0);
+const userDomain = ref("");
+const exampleDomain = "play.example.com";
+
+const network = computed(() => props.server.network);
+const allocations = computed(() => network.value?.allocations);
+
+const newAllocationModal = ref<typeof NewModal>();
+const editAllocationModal = ref<typeof NewModal>();
+const confirmDeleteModal = ref<typeof ConfirmModal>();
+const newAllocationInput = ref<HTMLInputElement | null>(null);
+const editAllocationInput = ref<HTMLInputElement | null>(null);
+const newAllocationName = ref("");
+const newAllocationPort = ref(0);
+const allocationToDelete = ref<number | null>(null);
+
+const hasUnsavedChanges = computed(() => serverSubdomain.value !== data?.value?.net?.domain);
+
+const isValidSubdomain = computed(() => /^[a-zA-Z0-9-]{5,}$/.test(serverSubdomain.value));
+
+const addNewAllocation = async () => {
+  if (!newAllocationName.value) return;
+
+  try {
+    await props.server.network?.reserveAllocation(newAllocationName.value);
+
+    newAllocationModal.value?.hide();
+    newAllocationName.value = "";
+
+    await props.server.refresh();
+
+    addNotification({
+      group: "serverOptions",
+      type: "success",
+      title: "Allocation reserved",
+      text: "Your allocation has been reserved.",
+    });
+  } catch (error) {
+    console.error("Failed to reserve new allocation:", error);
+  }
+};
+
+const showNewAllocationModal = () => {
+  newAllocationName.value = "";
+  newAllocationModal.value?.show();
+  nextTick(() => {
+    setTimeout(() => {
+      newAllocationInput.value?.focus();
+    }, 100);
+  });
+};
+
+const showEditAllocationModal = (port: number) => {
+  newAllocationPort.value = port;
+  editAllocationModal.value?.show();
+  nextTick(() => {
+    setTimeout(() => {
+      editAllocationInput.value?.focus();
+    }, 100);
+  });
+};
+
+const showConfirmDeleteModal = (port: number) => {
+  allocationToDelete.value = port;
+  confirmDeleteModal.value?.show();
+};
+
+const confirmDeleteAllocation = async () => {
+  if (allocationToDelete.value === null) return;
+
+  await props.server.network?.deleteAllocation(allocationToDelete.value);
+
+  await props.server.refresh();
+  addNotification({
+    group: "serverOptions",
+    type: "success",
+    title: "Allocation removed",
+    text: "Your allocation has been removed.",
+  });
+
+  allocationToDelete.value = null;
+};
+
+const editAllocation = async () => {
+  if (!newAllocationName.value) return;
+
+  try {
+    await props.server.network?.updateAllocation(newAllocationPort.value, newAllocationName.value);
+
+    editAllocationModal.value?.hide();
+    newAllocationName.value = "";
+
+    await props.server.refresh();
+
+    addNotification({
+      group: "serverOptions",
+      type: "success",
+      title: "Allocation updated",
+      text: "Your allocation has been updated.",
+    });
+  } catch (error) {
+    console.error("Failed to reserve new allocation:", error);
+  }
+};
+
+const saveNetwork = async () => {
+  if (!isValidSubdomain.value) return;
+
+  try {
+    isUpdating.value = true;
+    const available = await props.server.network?.checkSubdomainAvailability(serverSubdomain.value);
+    if (!available) {
+      addNotification({
+        group: "serverOptions",
+        type: "error",
+        title: "Subdomain not available",
+        text: "The subdomain you entered is already in use.",
+      });
+      return;
+    }
+    if (serverSubdomain.value !== data?.value?.net?.domain) {
+      await props.server.network?.changeSubdomain(serverSubdomain.value);
+    }
+    if (serverPrimaryPort.value !== data?.value?.net?.port) {
+      await props.server.network?.updateAllocation(
+        serverPrimaryPort.value,
+        newAllocationName.value,
+      );
+    }
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    await props.server.refresh();
+    addNotification({
+      group: "serverOptions",
+      type: "success",
+      title: "Server settings updated",
+      text: "Your server settings were successfully changed.",
+    });
+  } catch (error) {
+    console.error(error);
+    addNotification({
+      group: "serverOptions",
+      type: "error",
+      title: "Failed to update server settings",
+      text: "An error occurred while attempting to update your server settings.",
+    });
+  } finally {
+    isUpdating.value = false;
+  }
+};
+
+const resetNetwork = () => {
+  serverSubdomain.value = data?.value?.net?.domain ?? "";
+};
+
+const dnsRecords = computed(() => {
+  const domain = userDomain.value === "" ? exampleDomain : userDomain.value;
+  return [
+    {
+      type: "A",
+      name: `${domain}`,
+      content: data.value?.net?.ip ?? "",
+    },
+    {
+      type: "SRV",
+      name: `_minecraft._tcp.${domain}`,
+      content: `0 10 ${data.value?.net?.port} ${domain}`,
+    },
+  ];
+});
+
+const exportDnsRecords = () => {
+  const records = dnsRecords.value.reduce(
+    (acc, record) => {
+      const type = record.type;
+      if (!acc[type]) {
+        acc[type] = [];
+      }
+      acc[type].push(record);
+      return acc;
+    },
+    {} as Record<string, any[]>,
+  );
+
+  const text = Object.entries(records)
+    .map(([type, records]) => {
+      return `; ${type} Records\n${records.map((record) => `${record.name}.	1	IN	${record.type} ${record.content}${record.type === "SRV" ? "." : ""}`).join("\n")}\n`;
+    })
+    .join("\n");
+  const blob = new Blob([text], { type: "text/plain" });
+  const a = document.createElement("a");
+  a.href = window.URL.createObjectURL(blob);
+  a.download = `${userDomain.value}.txt`;
+  a.click();
+  a.remove();
+};
+
+const copyText = (text: string) => {
+  navigator.clipboard.writeText(text);
+  addNotification({
+    group: "serverOptions",
+    type: "success",
+    title: "Text copied",
+    text: `${text} has been copied to your clipboard`,
+  });
+};
+</script>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/preferences.vue b/apps/frontend/src/pages/servers/manage/[id]/options/preferences.vue
new file mode 100644
index 000000000..f06e93514
--- /dev/null
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/preferences.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="h-full w-full">
+    <div class="h-full w-full gap-2 overflow-y-auto">
+      <div class="card flex flex-col gap-4">
+        <h1 class="m-0 text-lg font-bold text-contrast">Server preferences</h1>
+        <p class="m-0">Preferences apply per server and changes are only saved in your browser.</p>
+        <div
+          v-for="(prefConfig, key) in preferences"
+          :key="key"
+          class="flex items-center justify-between gap-2"
+        >
+          <label :for="`pref-${key}`" class="flex flex-col gap-2">
+            <div class="flex flex-row gap-2">
+              <span class="text-lg font-bold text-contrast">{{ prefConfig.displayName }}</span>
+              <div
+                v-if="prefConfig.implemented === false"
+                class="hidden items-center gap-1 rounded-full bg-table-alternateRow p-1 px-1.5 text-xs font-semibold sm:flex"
+              >
+                Coming Soon
+              </div>
+            </div>
+            <span>{{ prefConfig.description }}</span>
+          </label>
+          <input
+            :id="`pref-${key}`"
+            v-model="newUserPreferences[key]"
+            class="switch stylized-toggle flex-none"
+            type="checkbox"
+            :disabled="prefConfig.implemented === false"
+          />
+        </div>
+      </div>
+    </div>
+    <UiServersSaveBanner
+      :is-visible="hasUnsavedChanges"
+      :server="props.server"
+      :is-updating="false"
+      :save="savePreferences"
+      :reset="resetPreferences"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useStorage } from "@vueuse/core";
+import type { Server } from "~/composables/pyroServers";
+
+const route = useNativeRoute();
+const serverId = route.params.id as string;
+
+const props = defineProps<{
+  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+}>();
+
+const preferences = {
+  ramAsNumber: {
+    displayName: "RAM as bytes",
+    description:
+      "When enabled, RAM will be displayed as bytes instead of a percentage in your server's Overview.",
+    implemented: true,
+  },
+  autoRestart: {
+    displayName: "Auto restart",
+    description: "When enabled, your server will automatically restart if it crashes.",
+    implemented: false,
+  },
+  powerDontAskAgain: {
+    displayName: "Power actions confirmation",
+    description: "When enabled, you will be prompted before stopping and restarting your server.",
+    implemented: true,
+  },
+  backupWhileRunning: {
+    displayName: "Create backups while running",
+    description: "When enabled, backups will be created even if the server is running.",
+    implemented: true,
+  },
+} as const;
+
+type PreferenceKeys = keyof typeof preferences;
+
+type UserPreferences = {
+  [K in PreferenceKeys]: boolean;
+};
+
+const defaultPreferences: UserPreferences = {
+  ramAsNumber: false,
+  autoRestart: false,
+  powerDontAskAgain: false,
+  backupWhileRunning: false,
+};
+
+const userPreferences = useStorage<UserPreferences>(
+  `pyro-server-${serverId}-preferences`,
+  defaultPreferences,
+);
+
+const newUserPreferences = ref<UserPreferences>(JSON.parse(JSON.stringify(userPreferences.value)));
+
+const hasUnsavedChanges = computed(() => {
+  return JSON.stringify(newUserPreferences.value) !== JSON.stringify(userPreferences.value);
+});
+
+const savePreferences = () => {
+  userPreferences.value = { ...newUserPreferences.value };
+  addNotification({
+    group: "serverOptions",
+    type: "success",
+    title: "Preferences saved",
+    text: "Your preferences have been saved.",
+  });
+};
+
+const resetPreferences = () => {
+  newUserPreferences.value = { ...userPreferences.value };
+};
+</script>
+
+<style scoped>
+.stylized-toggle:checked::after {
+  background: var(--color-accent-contrast) !important;
+}
+</style>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/properties.vue b/apps/frontend/src/pages/servers/manage/[id]/options/properties.vue
new file mode 100644
index 000000000..356abd29b
--- /dev/null
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/properties.vue
@@ -0,0 +1,286 @@
+<template>
+  <div class="relative h-full w-full select-none overflow-y-auto">
+    <div
+      v-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">
+        <div class="flex flex-col gap-2">
+          <h2 class="m-0 text-lg font-bold text-contrast">Server properties</h2>
+          <div class="m-0">
+            Edit the Minecraft server properties file. If you're unsure about a specific property,
+            the
+            <NuxtLink
+              class="goto-link !inline-block"
+              to="https://minecraft.wiki/w/Server.properties"
+              external
+            >
+              Minecraft Wiki
+            </NuxtLink>
+            has more detailed information about each property.
+          </div>
+        </div>
+        <div class="flex flex-col gap-4 rounded-2xl bg-table-alternateRow p-4">
+          <div class="relative w-full text-sm">
+            <label for="search-server-properties" class="sr-only">Search server properties</label>
+            <SearchIcon
+              class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2"
+              aria-hidden="true"
+            />
+            <input
+              id="search-server-properties"
+              v-model="searchInput"
+              class="w-full pl-9"
+              type="search"
+              name="search"
+              autocomplete="off"
+              placeholder="Search server properties..."
+            />
+          </div>
+          <div
+            v-for="(property, index) in filteredProperties"
+            :key="index"
+            class="flex flex-row flex-wrap items-center justify-between py-2"
+          >
+            <div class="flex items-center">
+              <span :id="`property-label-${index}`">{{ formatPropertyName(index) }}</span>
+              <span v-if="overrides[index] && overrides[index].info" class="ml-2">
+                <EyeIcon v-tooltip="overrides[index].info" />
+              </span>
+            </div>
+            <div
+              v-if="overrides[index] && overrides[index].type === 'dropdown'"
+              class="mt-2 flex w-full sm:w-[320px] sm:justify-end"
+            >
+              <UiServersTeleportDropdownMenu
+                :id="`server-property-${index}`"
+                v-model="liveProperties[index]"
+                :name="formatPropertyName(index)"
+                :options="overrides[index].options || []"
+                :aria-labelledby="`property-label-${index}`"
+                placeholder="Select..."
+              />
+            </div>
+            <div v-else-if="typeof property === 'boolean'" class="flex justify-end">
+              <input
+                :id="`server-property-${index}`"
+                v-model="liveProperties[index]"
+                class="switch stylized-toggle"
+                type="checkbox"
+                :aria-labelledby="`property-label-${index}`"
+              />
+            </div>
+            <div v-else-if="typeof property === 'number'" class="mt-2 w-full sm:w-[320px]">
+              <input
+                :id="`server-property-${index}`"
+                v-model.number="liveProperties[index]"
+                type="number"
+                class="w-full border p-2"
+                :aria-labelledby="`property-label-${index}`"
+              />
+            </div>
+            <div v-else-if="isComplexProperty(property)" class="mt-2 w-full sm:w-[320px]">
+              <textarea
+                :id="`server-property-${index}`"
+                v-model="liveProperties[index]"
+                class="w-full resize-y rounded-xl border p-2"
+                :aria-labelledby="`property-label-${index}`"
+              ></textarea>
+            </div>
+            <div v-else class="mt-2 flex w-full justify-end sm:w-[320px]">
+              <input
+                :id="`server-property-${index}`"
+                v-model="liveProperties[index]"
+                type="text"
+                class="w-full rounded-xl border p-2"
+                :aria-labelledby="`property-label-${index}`"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else class="card flex h-full w-full items-center justify-center">
+      <p class="text-contrast">
+        The server properties file has not been generated yet. Start up your server to generate it.
+      </p>
+    </div>
+
+    <UiServersSaveBanner
+      :is-visible="hasUnsavedChanges"
+      :server="props.server"
+      :is-updating="isUpdating"
+      restart
+      :save="saveProperties"
+      :reset="resetProperties"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from "vue";
+import { EyeIcon, SearchIcon } from "@modrinth/assets";
+import Fuse from "fuse.js";
+import type { Server } from "~/composables/pyroServers";
+
+const props = defineProps<{
+  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+}>();
+
+const tags = useTags();
+
+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 liveProperties = ref<Record<string, any>>({});
+const originalProperties = ref<Record<string, any>>({});
+
+watch(
+  propsData,
+  (newPropsData) => {
+    if (newPropsData) {
+      liveProperties.value = JSON.parse(JSON.stringify(newPropsData));
+      originalProperties.value = JSON.parse(JSON.stringify(newPropsData));
+    }
+  },
+  { immediate: true },
+);
+
+const hasUnsavedChanges = computed(() => {
+  return Object.keys(liveProperties.value).some(
+    (key) =>
+      JSON.stringify(liveProperties.value[key]) !== JSON.stringify(originalProperties.value[key]),
+  );
+});
+
+const getDifficultyOptions = () => {
+  const pre113Versions = tags.value.gameVersions
+    .filter((v) => {
+      const versionNumbers = v.version.split(".").map(Number);
+      return versionNumbers[0] === 1 && versionNumbers[1] < 13;
+    })
+    .map((v) => v.version);
+  if (data.value?.mc_version && pre113Versions.includes(data.value.mc_version)) {
+    return ["0", "1", "2", "3"];
+  } else {
+    return ["peaceful", "easy", "normal", "hard"];
+  }
+};
+
+const overrides: { [key: string]: { type: string; options?: string[]; info?: string } } = {
+  difficulty: {
+    type: "dropdown",
+    options: getDifficultyOptions(),
+  },
+  gamemode: {
+    type: "dropdown",
+    options: ["survival", "creative", "adventure", "spectator"],
+  },
+};
+
+const fuse = computed(() => {
+  if (!liveProperties.value) return null;
+
+  const propertiesToFuse = Object.entries(liveProperties.value).map(([key, value]) => ({
+    key,
+    value: String(value),
+  }));
+
+  return new Fuse(propertiesToFuse, {
+    keys: ["key", "value"],
+    threshold: 0.2,
+  });
+});
+
+const filteredProperties = computed(() => {
+  if (!searchInput.value?.trim()) {
+    return liveProperties.value;
+  }
+
+  const results = fuse.value?.search(searchInput.value) ?? [];
+
+  return Object.fromEntries(results.map(({ item }) => [item.key, liveProperties.value[item.key]]));
+});
+
+const constructServerProperties = (): string => {
+  const properties = liveProperties.value;
+
+  let fileContent = `#Minecraft server properties\n#${new Date().toUTCString()}\n`;
+
+  for (const [key, value] of Object.entries(properties)) {
+    if (typeof value === "object") {
+      fileContent += `${key}=${JSON.stringify(value)}\n`;
+    } else if (typeof value === "boolean") {
+      fileContent += `${key}=${value ? "true" : "false"}\n`;
+    } else {
+      fileContent += `${key}=${value}\n`;
+    }
+  }
+
+  return fileContent;
+};
+
+const saveProperties = async () => {
+  try {
+    isUpdating.value = true;
+    await props.server.fs?.updateFile("server.properties", constructServerProperties());
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    originalProperties.value = JSON.parse(JSON.stringify(liveProperties.value));
+    await props.server.refresh();
+    addNotification({
+      group: "serverOptions",
+      type: "success",
+      title: "Server properties updated",
+      text: "Your server properties were successfully changed.",
+    });
+  } catch (error) {
+    console.error("Error updating server properties:", error);
+    addNotification({
+      group: "serverOptions",
+      type: "error",
+      title: "Failed to update server properties",
+      text: "An error occurred while attempting to update your server properties.",
+    });
+  } finally {
+    isUpdating.value = false;
+  }
+};
+
+const resetProperties = async () => {
+  liveProperties.value = JSON.parse(JSON.stringify(originalProperties.value));
+  await new Promise((resolve) => setTimeout(resolve, 200));
+};
+
+const formatPropertyName = (propertyName: string): string => {
+  return propertyName
+    .split(/[-.]/)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+};
+
+const isComplexProperty = (property: any): boolean => {
+  return (
+    typeof property === "object" ||
+    (typeof property === "string" &&
+      (property.includes(",") ||
+        property.includes("{") ||
+        property.includes("}") ||
+        property.includes("[") ||
+        property.includes("]") ||
+        property.length > 30))
+  );
+};
+</script>
+
+<style scoped>
+.stylized-toggle:checked::after {
+  background: var(--color-accent-contrast) !important;
+}
+</style>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue b/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue
new file mode 100644
index 000000000..ddf9fc605
--- /dev/null
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue
@@ -0,0 +1,197 @@
+<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">
+        These settings are for advanced users. Changing them can break your server.
+      </div>
+
+      <div class="gap-2">
+        <div class="card flex flex-col gap-4">
+          <div class="flex flex-col justify-between gap-4 sm:flex-row">
+            <label for="startup-command-field" class="flex flex-col gap-2">
+              <span class="text-lg font-bold text-contrast">Startup command</span>
+              <span> The command that runs when your server is started. </span>
+            </label>
+            <ButtonStyled>
+              <button
+                :disabled="invocation === startupSettings?.original_invocation"
+                class="!w-full sm:!w-auto"
+                @click="resetToDefault"
+              >
+                <UpdatedIcon class="h-5 w-5" />
+                Restore default command
+              </button>
+            </ButtonStyled>
+          </div>
+          <textarea
+            id="startup-command-field"
+            v-model="invocation"
+            class="min-h-[270px] w-full resize-y font-[family-name:var(--mono-font)]"
+          />
+        </div>
+
+        <div class="card flex flex-col gap-8">
+          <div class="flex flex-col gap-4">
+            <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.
+              </span>
+            </div>
+            <div class="flex items-center gap-2">
+              <input
+                id="show-all-versions"
+                v-model="showAllVersions"
+                class="switch stylized-toggle flex-none"
+                type="checkbox"
+              />
+              <label for="show-all-versions" class="text-sm">Show all Java versions</label>
+            </div>
+            <UiServersTeleportDropdownMenu
+              :id="'java-version-field'"
+              v-model="jdkVersion"
+              name="java-version"
+              :options="displayedJavaVersions"
+              placeholder="Java Version"
+            />
+          </div>
+          <div class="flex flex-col gap-4">
+            <div class="flex flex-col gap-2">
+              <span class="text-lg font-bold text-contrast">Runtime</span>
+              <span> The Java runtime your server will use. </span>
+            </div>
+            <UiServersTeleportDropdownMenu
+              :id="'runtime-field'"
+              v-model="jdkBuild"
+              name="runtime"
+              :options="['Corretto', 'Temurin', 'GraalVM']"
+              placeholder="Runtime"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <UiServersSaveBanner
+      :is-visible="!!hasUnsavedChanges"
+      :server="props.server"
+      :is-updating="isUpdating"
+      :save="saveStartup"
+      :reset="resetStartup"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UpdatedIcon } from "@modrinth/assets";
+import { ButtonStyled } from "@modrinth/ui";
+import type { Server } from "~/composables/pyroServers";
+
+const props = defineProps<{
+  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+}>();
+
+const data = computed(() => props.server.general);
+const startupSettings = computed(() => props.server.startup);
+const showAllVersions = ref(false);
+
+const jdkVersionMap = [
+  { value: "lts8", label: "Java 8" },
+  { value: "lts11", label: "Java 11" },
+  { value: "lts17", label: "Java 17" },
+  { value: "lts21", label: "Java 21" },
+];
+
+const jdkBuildMap = [
+  { value: "corretto", label: "Corretto" },
+  { value: "temurin", label: "Temurin" },
+  { value: "graal", label: "GraalVM" },
+];
+
+const invocation = ref(startupSettings.value?.invocation);
+const jdkVersion = ref(
+  jdkVersionMap.find((v) => v.value === startupSettings.value?.jdk_version)?.label || "",
+);
+const jdkBuild = ref(
+  jdkBuildMap.find((v) => v.value === startupSettings.value?.jdk_build)?.label || "",
+);
+const isUpdating = ref(false);
+
+const compatibleJavaVersions = computed(() => {
+  const mcVersion = data.value?.mc_version ?? "";
+  if (!mcVersion) return jdkVersionMap.map((v) => v.label);
+
+  const [major, minor] = mcVersion.split(".").map(Number);
+
+  if (major >= 1) {
+    if (minor >= 20) return ["Java 21"];
+    if (minor >= 18) return ["Java 17", "Java 21"];
+    if (minor >= 17) return ["Java 16", "Java 17", "Java 21"];
+    if (minor >= 12) return ["Java 8", "Java 11", "Java 17", "Java 21"];
+    if (minor >= 6) return ["Java 8", "Java 11"];
+  }
+
+  return ["Java 8"];
+});
+
+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;
+    const invocationValue = invocation.value ?? "";
+    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));
+    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({
+      group: "serverOptions",
+      type: "error",
+      title: "Failed to update server arguments",
+      text: "Please try again later.",
+    });
+  } finally {
+    isUpdating.value = false;
+  }
+};
+
+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 || "";
+};
+
+const resetToDefault = () => {
+  invocation.value = startupSettings.value?.original_invocation;
+};
+</script>
+
+<style scoped>
+.stylized-toggle:checked::after {
+  background: var(--color-accent-contrast) !important;
+}
+</style>
diff --git a/apps/frontend/src/pages/servers/manage/index.vue b/apps/frontend/src/pages/servers/manage/index.vue
new file mode 100644
index 000000000..995b5757e
--- /dev/null
+++ b/apps/frontend/src/pages/servers/manage/index.vue
@@ -0,0 +1,154 @@
+<template>
+  <div
+    data-pyro-server-list-root
+    class="experimental-styles-within relative mx-auto flex min-h-screen w-full max-w-[1280px] flex-col px-3"
+  >
+    <div
+      v-if="serverList.length > 0 || isPollingForNewServers"
+      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>
+
+    <LazyUiServersServerManageEmptyState
+      v-if="serverList.length === 0 && !isPollingForNewServers"
+    />
+
+    <template v-else>
+      <ul v-if="filteredData.length > 0" class="m-0 flex flex-col gap-4 p-0">
+        <UiServersServerListing
+          v-for="server in filteredData"
+          :key="server.server_id"
+          :server_id="server.server_id"
+          :name="server.name"
+          :status="server.status"
+          :game="server.game"
+          :loader="server.loader"
+          :loader_version="server.loader_version"
+          :mc_version="server.mc_version"
+          :upstream="server.upstream"
+          :net="server.net"
+        />
+        <LazyUiServersServerListingSkeleton v-if="isPollingForNewServers" />
+      </ul>
+      <div v-else class="flex h-full items-center justify-center">
+        <p class="text-contrast">No servers found.</p>
+      </div>
+    </template>
+
+    <UiServersPoweredByPyro />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import Fuse from "fuse.js";
+import { PlusIcon, SearchIcon } from "@modrinth/assets";
+import { ButtonStyled } from "@modrinth/ui";
+import type { Server } from "~/types/servers";
+
+definePageMeta({
+  middleware: "auth",
+});
+
+useHead({
+  title: "Servers - Modrinth",
+});
+
+interface ServerResponse {
+  servers: Server[];
+}
+
+const route = useRoute();
+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 serverList = computed(() => serverResponse.value?.servers || []);
+
+const searchInput = ref("");
+
+const fuse = computed(() => {
+  if (serverList.value.length === 0) return null;
+  return new Fuse(serverList.value, {
+    keys: ["name", "loader", "mc_version", "game", "state"],
+    includeScore: true,
+    threshold: 0.4,
+  });
+});
+
+const filteredData = computed(() => {
+  if (!searchInput.value.trim()) {
+    return serverList.value;
+  }
+  return fuse.value ? fuse.value.search(searchInput.value).map((result) => result.item) : [];
+});
+
+const previousServerList = ref<Server[]>([]);
+const refreshCount = ref(0);
+
+const checkForNewServers = async () => {
+  await refresh();
+  refreshCount.value += 1;
+  if (JSON.stringify(previousServerList.value) !== JSON.stringify(serverList.value)) {
+    isPollingForNewServers.value = false;
+    clearInterval(intervalId);
+  } else if (refreshCount.value >= 5) {
+    isPollingForNewServers.value = false;
+    clearInterval(intervalId);
+  }
+};
+
+let intervalId: ReturnType<typeof setInterval> | undefined;
+
+onMounted(() => {
+  if (route.query.redirect_status === "succeeded") {
+    isPollingForNewServers.value = true;
+    previousServerList.value = [...serverList.value];
+    intervalId = setInterval(checkForNewServers, 5000);
+  }
+});
+
+onUnmounted(() => {
+  if (intervalId) {
+    clearInterval(intervalId);
+  }
+});
+</script>
diff --git a/apps/frontend/src/pages/settings/billing/charges.vue b/apps/frontend/src/pages/settings/billing/charges.vue
index c63148319..c1195d2a4 100644
--- a/apps/frontend/src/pages/settings/billing/charges.vue
+++ b/apps/frontend/src/pages/settings/billing/charges.vue
@@ -16,6 +16,9 @@
           <div class="flex items-center gap-1">
             <span class="font-bold text-primary">
               <template v-if="charge.product.metadata.type === 'midas'"> Modrinth Plus </template>
+              <template v-else-if="charge.product.metadata.type === 'pyro'">
+                Modrinth Servers
+              </template>
               <template v-else> Unknown product </template>
               <template v-if="charge.subscription_interval">
                 {{ charge.subscription_interval }}
diff --git a/apps/frontend/src/pages/settings/billing/index.vue b/apps/frontend/src/pages/settings/billing/index.vue
index cf53272d1..c785a3607 100644
--- a/apps/frontend/src/pages/settings/billing/index.vue
+++ b/apps/frontend/src/pages/settings/billing/index.vue
@@ -4,7 +4,7 @@
     <p>{{ formatMessage(messages.subscriptionDescription) }}</p>
     <div class="universal-card recessed">
       <ConfirmModal
-        ref="modal_cancel"
+        ref="modalCancel"
         :title="formatMessage(cancelModalMessages.title)"
         :description="formatMessage(cancelModalMessages.description)"
         :proceed-label="formatMessage(cancelModalMessages.action)"
@@ -108,7 +108,7 @@
                   id: 'cancel',
                   action: () => {
                     cancelSubscriptionId = midasSubscription.id;
-                    $refs.modal_cancel.show();
+                    $refs.modalCancel.show();
                   },
                 },
               ]"
@@ -123,7 +123,7 @@
             @click="
               () => {
                 cancelSubscriptionId = midasSubscription.id;
-                $refs.modal_cancel.show();
+                $refs.modalCancel.show();
               }
             "
           >
@@ -152,7 +152,163 @@
         </div>
       </div>
     </div>
+    <div v-if="pyroSubscriptions.length > 0">
+      <div
+        v-for="(subscription, index) in pyroSubscriptions"
+        :key="index"
+        class="universal-card recessed mt-4"
+      >
+        <div class="flex flex-col justify-between gap-4">
+          <div class="flex flex-col gap-4">
+            <LazyUiServersModrinthServersIcon class="flex h-8 w-fit" />
+            <div class="flex flex-col gap-2">
+              <UiServersServerListing
+                v-if="subscription.serverInfo"
+                :server_id="subscription.serverInfo.server_id"
+                :name="subscription.serverInfo.name"
+                :status="subscription.serverInfo.status"
+                :game="subscription.serverInfo.game"
+                :loader="subscription.serverInfo.loader"
+                :loader_version="subscription.serverInfo.loader_version"
+                :mc_version="subscription.serverInfo.mc_version"
+                :upstream="subscription.serverInfo.upstream"
+                :net="subscription.serverInfo.net"
+              />
+              <div v-else class="w-fit">
+                <p>
+                  A linked server couldn't be found with this subscription. It may have been deleted
+                  or suspended. Please contact Modrinth support with the following information:
+                </p>
+                <div class="flex w-full flex-col gap-2">
+                  <CopyCode
+                    class="whitespace-nowrap"
+                    :text="'Server ID: ' + subscription.metadata.id"
+                  />
+                  <CopyCode class="whitespace-nowrap" :text="'Stripe ID: ' + subscription.id" />
+                </div>
+              </div>
+              <h3 class="m-0 mt-4 text-xl font-semibold leading-none text-contrast">
+                {{ getProductSize(getPyroProduct(subscription)) }} Plan
+              </h3>
+              <div class="flex flex-row justify-between">
+                <div class="mt-2 flex flex-col gap-2">
+                  <div class="flex items-center gap-2">
+                    <CheckCircleIcon class="h-5 w-5 text-brand" />
+                    <span> {{ getPyroProduct(subscription)?.metadata?.cpu }} vCores (CPU) </span>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <CheckCircleIcon class="h-5 w-5 text-brand" />
+                    <span>
+                      {{
+                        getPyroProduct(subscription)?.metadata?.ram
+                          ? getPyroProduct(subscription).metadata.ram / 1024 + " GB RAM"
+                          : ""
+                      }}
+                    </span>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <CheckCircleIcon class="h-5 w-5 text-brand" />
+                    <span>
+                      {{
+                        getPyroProduct(subscription)?.metadata?.swap
+                          ? getPyroProduct(subscription).metadata.swap / 1024 + " GB Swap"
+                          : ""
+                      }}
+                    </span>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <CheckCircleIcon class="h-5 w-5 text-brand" />
+                    <span>
+                      {{
+                        getPyroProduct(subscription)?.metadata?.storage
+                          ? getPyroProduct(subscription).metadata.storage / 1024 + " GB SSD"
+                          : ""
+                      }}
+                    </span>
+                  </div>
+                </div>
+                <div class="flex flex-col items-end justify-between">
+                  <div class="flex flex-col items-end gap-2">
+                    <div class="flex text-2xl font-bold text-contrast">
+                      <span class="text-contrast">
+                        {{
+                          formatPrice(
+                            vintl.locale,
+                            getProductPrice(getPyroProduct(subscription), subscription.interval)
+                              .prices.intervals[subscription.interval],
+                            getProductPrice(getPyroProduct(subscription), subscription.interval)
+                              .currency_code,
+                          )
+                        }}
+                      </span>
+                      <span>/{{ subscription.interval.replace("ly", "") }}</span>
+                    </div>
+                    <div v-if="getPyroCharge(subscription)" class="mb-4 flex flex-col items-end">
+                      <span class="text-sm text-secondary">
+                        Since {{ $dayjs(subscription.created).format("MMMM D, YYYY") }}
+                      </span>
+                      <span
+                        v-if="getPyroCharge(subscription).status === 'open'"
+                        class="text-sm text-secondary"
+                      >
+                        Renews {{ $dayjs(getPyroCharge(subscription).due).format("MMMM D, YYYY") }}
+                      </span>
+                      <span
+                        v-else-if="getPyroCharge(subscription).status === 'processing'"
+                        class="text-sm text-orange"
+                      >
+                        Your payment is being processed. Perks will activate once payment is
+                        complete.
+                      </span>
+                      <span
+                        v-else-if="getPyroCharge(subscription).status === 'cancelled'"
+                        class="text-sm text-secondary"
+                      >
+                        Expires {{ $dayjs(getPyroCharge(subscription).due).format("MMMM D, YYYY") }}
+                      </span>
+                      <span
+                        v-else-if="getPyroCharge(subscription).status === 'failed'"
+                        class="text-sm text-red"
+                      >
+                        Your subscription payment failed. Please update your payment method.
+                      </span>
+                    </div>
+                  </div>
+                  <div class="flex gap-2">
+                    <ButtonStyled
+                      v-if="
+                        getPyroCharge(subscription) &&
+                        getPyroCharge(subscription).status !== 'cancelled'
+                      "
+                      type="standard"
+                      @click="showPyroCancelModal(subscription.id)"
+                    >
+                      <button class="text-contrast">
+                        <XIcon />
+                        Cancel
+                      </button>
+                    </ButtonStyled>
+                    <ButtonStyled
+                      v-else-if="
+                        getPyroCharge(subscription) &&
+                        getPyroCharge(subscription).status === 'cancelled'
+                      "
+                      type="standard"
+                      color="green"
+                      @click="resubscribePyro(subscription.id)"
+                    >
+                      <button class="text-contrast">Resubscribe</button>
+                    </ButtonStyled>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </section>
+
   <section class="universal-card">
     <ConfirmModal
       ref="modal_confirm"
@@ -320,8 +476,17 @@
     </div>
   </section>
 </template>
+
 <script setup>
-import { ConfirmModal, NewModal, OverflowMenu, AnimatedLogo, PurchaseModal } from "@modrinth/ui";
+import {
+  ConfirmModal,
+  NewModal,
+  OverflowMenu,
+  AnimatedLogo,
+  PurchaseModal,
+  ButtonStyled,
+  CopyCode,
+} from "@modrinth/ui";
 import {
   PlusIcon,
   XIcon,
@@ -339,7 +504,7 @@ import {
   HistoryIcon,
 } from "@modrinth/assets";
 import { calculateSavings, formatPrice, createStripeElements, getCurrency } from "@modrinth/utils";
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { products } from "~/generated/state.json";
 
 definePageMeta({
@@ -434,6 +599,14 @@ const messages = defineMessages({
     id: "settings.billing.payment_method.card_expiry",
     defaultMessage: "Expires {month}/{year}",
   },
+  pyroSubscriptionTitle: {
+    id: "settings.billing.pyro_subscription.title",
+    defaultMessage: "Modrinth Server Subscriptions",
+  },
+  pyroSubscriptionDescription: {
+    id: "settings.billing.pyro_subscription.description",
+    defaultMessage: "Manage your Modrinth Server subscriptions.",
+  },
 });
 
 const paymentMethodTypes = defineMessages({
@@ -471,7 +644,9 @@ function loadStripe() {
     if (!stripe) {
       stripe = Stripe(config.public.stripePublishableKey);
     }
-  } catch {}
+  } catch (error) {
+    console.error("Error loading Stripe:", error);
+  }
 }
 
 const [
@@ -479,6 +654,8 @@ const [
   { data: charges, refresh: refreshCharges },
   { data: customer, refresh: refreshCustomer },
   { data: subscriptions, refresh: refreshSubscriptions },
+  { data: productsData, refresh: refreshProducts },
+  { data: serversData, refresh: refreshServers },
 ] = await Promise.all([
   useAsyncData("billing/payment_methods", () =>
     useBaseFetch("billing/payment_methods", { internal: true }),
@@ -488,81 +665,51 @@ const [
   useAsyncData("billing/subscriptions", () =>
     useBaseFetch("billing/subscriptions", { internal: true }),
   ),
+  useAsyncData("billing/products", () => useBaseFetch("billing/products", { internal: true })),
+  useAsyncData("servers", () => usePyroFetch("servers")),
 ]);
 
-async function refresh() {
-  await Promise.all([
-    refreshPaymentMethods(),
-    refreshCharges(),
-    refreshCustomer(),
-    refreshSubscriptions(),
-  ]);
-}
-
-const midasProduct = ref(products.find((x) => x.metadata.type === "midas"));
+const midasProduct = ref(products.find((x) => x.metadata?.type === "midas"));
 const midasSubscription = computed(() =>
-  subscriptions.value.find(
-    (x) => x.status === "provisioned" && midasProduct.value.prices.find((y) => y.id === x.price_id),
+  subscriptions.value?.find(
+    (x) =>
+      x.status === "provisioned" && midasProduct.value?.prices?.find((y) => y.id === x.price_id),
   ),
 );
 const midasSubscriptionPrice = computed(() =>
   midasSubscription.value
-    ? midasProduct.value.prices.find((x) => x.id === midasSubscription.value.price_id)
+    ? midasProduct.value?.prices?.find((x) => x.id === midasSubscription.value.price_id)
     : null,
 );
 const midasCharge = computed(() =>
   midasSubscription.value
-    ? charges.value.find((x) => x.subscription_id === midasSubscription.value.id)
+    ? charges.value?.find((x) => x.subscription_id === midasSubscription.value.id)
     : null,
 );
 
+const pyroSubscriptions = computed(() => {
+  const pyroSubs = subscriptions.value?.filter((s) => s?.metadata?.type === "pyro") || [];
+  const servers = serversData.value?.servers || [];
+
+  return pyroSubs.map((subscription) => {
+    const server = servers.find((s) => s.server_id === subscription.metadata.id);
+    return {
+      ...subscription,
+      serverInfo: server,
+    };
+  });
+});
+
 const purchaseModal = ref();
 const country = useUserCountry();
 const price = computed(() =>
-  midasProduct.value.prices.find((x) => x.currency_code === getCurrency(country.value)),
+  midasProduct.value?.prices?.find((x) => x.currency_code === getCurrency(country.value)),
 );
 
-// Initialize subscription with fake data if redirected from checkout
-const route = useRoute();
-const router = useRouter();
-if (route.query.priceId && route.query.plan && route.query.redirect_status) {
-  let status;
-  if (route.query.redirect_status === "succeeded") {
-    status = "active";
-  } else if (route.query.redirect_status === "processing") {
-    status = "payment-processing";
-  } else {
-    status = "payment-failed";
-  }
-
-  subscriptions.value.push({
-    id: "temp",
-    price_id: route.query.priceId,
-    interval: route.query.plan,
-    created: Date.now(),
-    status,
-  });
-
-  charges.value.push({
-    id: "temp",
-    price_id: route.query.priceId,
-    subscription_id: "temp",
-    status: "open",
-    due: Date.now() + (route.query.plan === "yearly" ? 31536000000 : 2629746000),
-    subscription_interval: route.query.plan,
-  });
-
-  await router.replace({ query: {} });
-}
-
 const primaryPaymentMethodId = computed(() => {
-  if (
-    customer.value &&
-    customer.value.invoice_settings &&
-    customer.value.invoice_settings.default_payment_method
-  ) {
+  if (customer.value?.invoice_settings?.default_payment_method) {
     return customer.value.invoice_settings.default_payment_method;
-  } else if (paymentMethods.value && paymentMethods.value[0] && paymentMethods.value[0].id) {
+  } else if (paymentMethods.value?.[0]?.id) {
     return paymentMethods.value[0].id;
   } else {
     return null;
@@ -678,7 +825,7 @@ async function removePaymentMethod(index) {
   stopLoading();
 }
 
-const cancelSubscriptionId = ref();
+const cancelSubscriptionId = ref(null);
 async function cancelSubscription(id, cancelled) {
   startLoading();
   try {
@@ -700,4 +847,79 @@ async function cancelSubscription(id, cancelled) {
   }
   stopLoading();
 }
+
+const getPyroProduct = (subscription) => {
+  if (!subscription || !productsData.value) return null;
+  return productsData.value.find((p) => p.prices?.some((x) => x.id === subscription.price_id));
+};
+
+const getPyroCharge = (subscription) => {
+  if (!subscription || !charges.value) return null;
+  return charges.value.find(
+    (charge) => charge.subscription_id === subscription.id && charge.status !== "succeeded",
+  );
+};
+
+const getProductSize = (product) => {
+  if (!product || !product.metadata) return "Unknown";
+  const ramSize = product.metadata.ram;
+  if (ramSize === 4096) return "Small";
+  if (ramSize === 6144) return "Medium";
+  if (ramSize === 8192) return "Large";
+  return "Custom";
+};
+
+const getProductPrice = (product, interval) => {
+  if (!product || !product.prices) return null;
+  const countryValue = country.value;
+  return (
+    product.prices.find(
+      (p) => p.currency_code === getCurrency(countryValue) && p.prices?.intervals?.[interval],
+    ) ??
+    product.prices.find((p) => p.currency_code === "USD" && p.prices?.intervals?.[interval]) ??
+    product.prices[0]
+  );
+};
+
+const modalCancel = ref(null);
+
+const showPyroCancelModal = (subscriptionId) => {
+  cancelSubscriptionId.value = subscriptionId;
+  if (modalCancel.value) {
+    modalCancel.value.show();
+  } else {
+    console.error("modalCancel ref is undefined");
+  }
+};
+
+const resubscribePyro = async (subscriptionId) => {
+  try {
+    await useBaseFetch(`billing/subscription/${subscriptionId}`, {
+      internal: true,
+      method: "PATCH",
+      body: {
+        cancelled: false,
+      },
+    });
+    await refresh();
+  } catch {
+    data.$notify({
+      group: "main",
+      title: "Error resubscribing",
+      text: "An error occurred while resubscribing to your Modrinth server.",
+      type: "error",
+    });
+  }
+};
+
+const refresh = async () => {
+  await Promise.all([
+    refreshPaymentMethods(),
+    refreshCharges(),
+    refreshCustomer(),
+    refreshSubscriptions(),
+    refreshProducts(),
+    refreshServers(),
+  ]);
+};
 </script>
diff --git a/apps/frontend/src/pages/user/[id].vue b/apps/frontend/src/pages/user/[id].vue
index f830c08ae..40069d039 100644
--- a/apps/frontend/src/pages/user/[id].vue
+++ b/apps/frontend/src/pages/user/[id].vue
@@ -35,7 +35,15 @@
               {{ formatCompactNumber(sumDownloads) }}
               downloads
             </div>
-            <div class="flex items-center gap-2 font-semibold">
+            <div
+              v-tooltip="
+                formatMessage(commonMessages.dateAtTimeTooltip, {
+                  date: new Date(user.created),
+                  time: new Date(user.created),
+                })
+              "
+              class="flex items-center gap-2 font-semibold"
+            >
               <CalendarIcon class="h-6 w-6 text-secondary" />
               Joined
               {{ formatRelativeTime(user.created) }}
@@ -63,6 +71,7 @@
                     action: () => reportUser(user.id),
                     color: 'red',
                     hoverOnly: true,
+                    shown: auth.user?.id !== user.id,
                   },
                   { id: 'copy-id', action: () => copyId() },
                 ]"
@@ -232,6 +241,8 @@
               </nuxt-link>
               <TenMClubBadge v-else-if="badge === '10m-club'" class="h-14 w-14" />
               <EarlyAdopterBadge v-else-if="badge === 'early-adopter'" class="h-14 w-14" />
+              <AlphaTesterBadge v-else-if="badge === 'alpha-tester'" class="h-14 w-14" />
+              <BetaTesterBadge v-else-if="badge === 'beta-tester'" class="h-14 w-14" />
             </div>
           </div>
         </div>
@@ -264,6 +275,8 @@ import ModBadge from "~/assets/images/badges/mod.svg?component";
 import PlusBadge from "~/assets/images/badges/plus.svg?component";
 import TenMClubBadge from "~/assets/images/badges/10m-club.svg?component";
 import EarlyAdopterBadge from "~/assets/images/badges/early-adopter.svg?component";
+import AlphaTesterBadge from "~/assets/images/badges/alpha-tester.svg?component";
+import BetaTesterBadge from "~/assets/images/badges/beta-tester.svg?component";
 
 import ReportIcon from "~/assets/images/utils/report.svg?component";
 import UpToDate from "~/assets/images/illustrations/up_to_date.svg?component";
@@ -455,6 +468,10 @@ const sumDownloads = computed(() => {
   return sum;
 });
 
+const joinDate = computed(() => new Date(user.value.created));
+const MODRINTH_BETA_END_DATE = new Date("2022-02-27T08:00:00.000Z");
+const MODRINTH_ALPHA_END_DATE = new Date("2020-11-30T08:00:00.000Z");
+
 const badges = computed(() => {
   const badges = [];
 
@@ -482,8 +499,10 @@ const badges = computed(() => {
     badges.push("early-adopter");
   }
 
-  if (isPermission(user.value.badges, 1 << 4)) {
+  if (isPermission(user.value.badges, 1 << 4) || joinDate.value < MODRINTH_ALPHA_END_DATE) {
     badges.push("alpha-tester");
+  } else if (isPermission(user.value.badges, 1 << 4) || joinDate.value < MODRINTH_BETA_END_DATE) {
+    badges.push("beta-tester");
   }
 
   if (isPermission(user.value.badges, 1 << 5)) {
@@ -498,7 +517,7 @@ const badges = computed(() => {
 });
 
 async function copyId() {
-  await navigator.clipboard.writeText(project.value.id);
+  await navigator.clipboard.writeText(user.value.id);
 }
 
 const navLinks = computed(() => [
diff --git a/apps/frontend/src/public/Monocraft.ttf b/apps/frontend/src/public/Monocraft.ttf
new file mode 100644
index 000000000..4066b0a98
Binary files /dev/null and b/apps/frontend/src/public/Monocraft.ttf differ
diff --git a/apps/frontend/src/public/promo-frame.html b/apps/frontend/src/public/promo-frame.html
index c0fcf84de..080aa8454 100644
--- a/apps/frontend/src/public/promo-frame.html
+++ b/apps/frontend/src/public/promo-frame.html
@@ -4,11 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Modrinth App Ad</title>
-    <script src="https://cadmus.script.ac/d14pdm1b7fi5kh/script.js"></script>
-    <script
-      src="https://dn0qt3r0xannq.cloudfront.net/modrinth-7JfmkEIXEp/modrinth-longform/prebid-load.js"
-      async
-    ></script>
+    <script src="/inmobi.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>
       * {
@@ -49,73 +46,44 @@
       <div id="modrinth-rail-1"></div>
     </div>
     <script>
-      function getCookie(name) {
-        function escape(s) {
-          return s.replace(/([.*+?\^$(){}|\[\]\/\\])/g, "\\$1");
-        }
+      window.tude = window.tude || { cmd: [] };
 
-        const match = document.cookie.match(RegExp("(?:^|;\\s*)" + escape(name) + "=([^;]*)"));
-        return match ? match[1] : null;
-      }
+      window.Raven = window.Raven || { cmd: [] };
 
-      function initAds(personalized) {
-        window.tude = window.tude || { cmd: [] };
-
-        window.Raven = window.Raven || { cmd: [] };
-
-        window.Raven.cmd.push(({ config }) => {
-          config.setCustom({
-            param1: "app",
-          });
+      window.Raven.cmd.push(({ config }) => {
+        config.setCustom({
+          param1: "app",
         });
+      });
 
-        tude.cmd.push(function () {
-          tude.refreshAdsViaDivMappings([
-            {
-              divId: "modrinth-rail-1",
-              baseDivId: "pb-slot-square-2",
-              targeting: {
-                location: "app",
-              },
+      tude.cmd.push(function () {
+        tude.refreshAdsViaDivMappings([
+          {
+            divId: "modrinth-rail-1",
+            baseDivId: "pb-slot-square-2",
+            targeting: {
+              location: "app",
             },
-          ]);
+          },
+        ]);
+      });
 
-          tude.setPrivacySettings({
-            personalizedAds: personalized ?? true,
-          });
-        });
-      }
-
-      try {
-        if (window.__TAURI_INTERNALS__) {
-          window.__TAURI_INTERNALS__
-            .invoke("plugin:ads|get_ads_personalization", {})
-            .then(initAds)
-            .catch(() => initAds(true));
-        } else {
-          initAds(true);
-        }
-      } catch (err) {
-        initAds(true);
-        console.error(err);
-      }
-
-      window.addEventListener(
-        "message",
-        (event) => {
-          if (event.data.modrinthAdClick && window.__TAURI_INTERNALS__) {
-            window.__TAURI_INTERNALS__.invoke("plugin:ads|record_ads_click", {});
-          }
-
-          if (event.data.modrinthOpenUrl && window.__TAURI_INTERNALS__) {
-            window.__TAURI_INTERNALS__.invoke("plugin:ads|open_link", {
-              path: event.data.modrinthOpenUrl,
-              origin: event.origin,
-            });
-          }
-        },
-        false,
-      );
+      // window.addEventListener(
+      //   "message",
+      //   (event) => {
+      //     if (event.data.modrinthAdClick && window.__TAURI_INTERNALS__) {
+      //       window.__TAURI_INTERNALS__.invoke("plugin:ads|record_ads_click", {});
+      //     }
+      //
+      //     if (event.data.modrinthOpenUrl && window.__TAURI_INTERNALS__) {
+      //       window.__TAURI_INTERNALS__.invoke("plugin:ads|open_link", {
+      //         path: event.data.modrinthOpenUrl,
+      //         origin: event.origin,
+      //       });
+      //     }
+      //   },
+      //   false,
+      // );
 
       window.addEventListener("mousewheel", (event) => {
         if (window.__TAURI_INTERNALS__) {
@@ -135,6 +103,23 @@
           origin: "https://modrinth.com",
         });
       });
+
+      let attempts = 0;
+      function syncAgreeState() {
+        const primaryButton = document.querySelector(
+          ".qc-cmp2-summary-buttons button:last-of-type",
+        );
+
+        if (primaryButton) {
+          primaryButton.click();
+        } else {
+          attempts++;
+          if (attempts < 10) {
+            setTimeout(syncAgreeState, 1000);
+          }
+        }
+      }
+      syncAgreeState();
     </script>
   </body>
 </html>
diff --git a/apps/frontend/src/server/routes/loader-versions.ts b/apps/frontend/src/server/routes/loader-versions.ts
new file mode 100644
index 000000000..989bac2b3
--- /dev/null
+++ b/apps/frontend/src/server/routes/loader-versions.ts
@@ -0,0 +1,36 @@
+const getLoaderVersions = async (loader: string) => {
+  const loaderVersions = await fetch(
+    `https://launcher-meta.modrinth.com/${loader?.toLowerCase()}/v0/manifest.json`,
+  );
+  return loaderVersions.json();
+};
+
+const getLoaderVersion = async (loader: string, version: string) => {
+  const loaderVersion = await fetch(
+    `https://launcher-meta.modrinth.com/${loader?.toLowerCase()}/v0/versions/${version}.json`,
+  );
+  return loaderVersion.json();
+};
+
+export default defineEventHandler(async (e) => {
+  const params = new URLSearchParams(e._path?.split("?")[1] ?? "");
+  if (!params.has("loader"))
+    return new Response(
+      JSON.stringify({
+        error: "Missing loader",
+      }),
+      { status: 400, headers: { "Content-Type": "application/json" } },
+    );
+  const loader = params.get("loader");
+  const version = params.get("version");
+  if (version) {
+    const loaderVersion = await getLoaderVersion(loader!, version);
+    return new Response(JSON.stringify(loaderVersion), {
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+  const loaderVersions = await getLoaderVersions(loader!);
+  return new Response(JSON.stringify(loaderVersions), {
+    headers: { "Content-Type": "application/json" },
+  });
+});
diff --git a/apps/frontend/src/types/servers.ts b/apps/frontend/src/types/servers.ts
new file mode 100644
index 000000000..4b19c0b1b
--- /dev/null
+++ b/apps/frontend/src/types/servers.ts
@@ -0,0 +1,214 @@
+export interface Mod {
+  id: string;
+  filename: string;
+  modrinth_ids: {
+    project_id: string;
+    version_id: string;
+  };
+}
+
+interface License {
+  id: string;
+  name: string;
+  url: string;
+}
+
+interface DonationUrl {
+  id: string;
+  platform: string;
+  url: string;
+}
+
+interface GalleryItem {
+  url: string;
+  featured: boolean;
+  title: string;
+  description: string;
+  created: string;
+  ordering: number;
+}
+
+export interface Project {
+  slug: string;
+  title: string;
+  description: string;
+  categories: string[];
+  client_side: "required" | "optional";
+  server_side: "required" | "optional";
+  body: string;
+  status: "approved" | "pending" | "rejected";
+  requested_status: "approved" | "pending" | "rejected";
+  additional_categories: string[];
+  issues_url: string;
+  source_url: string;
+  wiki_url: string;
+  discord_url: string;
+  donation_urls: DonationUrl[];
+  project_type: "mod" | "resourcepack" | "map" | "plugin";
+  downloads: number;
+  icon_url: string;
+  color: number;
+  thread_id: string;
+  monetization_status: "monetized" | "non-monetized";
+  id: string;
+  team: string;
+  body_url: string | null;
+  moderator_message: string | null;
+  published: string;
+  updated: string;
+  approved: string;
+  queued: string;
+  followers: number;
+  license: License;
+  versions: string[];
+  game_versions: string[];
+  loaders: string[];
+  gallery: GalleryItem[];
+}
+
+export interface ServerBackup {
+  id: string;
+  name: string;
+  created_at: string;
+}
+
+export interface Allocation {
+  name: string;
+  port: number;
+}
+
+export interface Server {
+  server_id: string;
+  name: string;
+  status: string;
+  net: {
+    ip: string;
+    port: number;
+    domain: string;
+    allocations: Allocation[];
+  };
+  game: string;
+  loader: string | null;
+  loader_version: string | null;
+  mc_version: string | null;
+  backup_quota: number;
+  used_backup_quota: number;
+  backups: ServerBackup[];
+  mods: Mod[];
+  project: Project | null;
+  suspension_reason: string | null;
+  image: string | null;
+  upstream?: {
+    kind: "modpack";
+    project_id: string;
+    version_id: string;
+  };
+  motd: string;
+}
+
+export interface Stats {
+  current: {
+    cpu_percent: number;
+    ram_usage_bytes: number;
+    ram_total_bytes: number;
+    storage_usage_bytes: number;
+    storage_total_bytes: number;
+  };
+  past: {
+    cpu_percent: number;
+    ram_usage_bytes: number;
+    ram_total_bytes: number;
+    storage_usage_bytes: number;
+    storage_total_bytes: number;
+  };
+  graph: {
+    cpu: number[];
+    ram: number[];
+  };
+}
+
+export interface WSAuth {
+  url: string;
+  token: string;
+}
+
+export type ServerState = "running" | "stopped" | "crashed";
+// export type WebsocketEventType =
+//   | "log"
+//   | "auth"
+//   | "stats"
+//   | "power-state"
+//   | "auth-expiring"
+//   | "auth-incorrect"
+//   | "installation-result"
+//   | (string & {});
+
+// export interface WSEvent {
+//   event: WebsocketEventType;
+//   message: string;
+//   state: ServerState;
+// }
+
+export interface WSLogEvent {
+  event: "log";
+  message: string;
+}
+
+type CurrentStats = Stats["current"];
+
+export interface WSStatsEvent extends CurrentStats {
+  event: "stats";
+}
+
+export interface WSAuthExpiringEvent {
+  event: "auth-expiring";
+}
+
+export interface WSPowerStateEvent {
+  event: "power-state";
+  state: ServerState;
+}
+
+export interface WSAuthIncorrectEvent {
+  event: "auth-incorrect";
+}
+
+export interface WSInstallationResultOkEvent {
+  event: "installation-result";
+  result: "ok";
+}
+
+export interface WSInstallationResultErrEvent {
+  event: "installation-result";
+  result: "err";
+  reason: string;
+}
+export type WSInstallationResultEvent = WSInstallationResultOkEvent | WSInstallationResultErrEvent;
+
+export interface WSAuthOkEvent {
+  event: "auth-ok";
+}
+
+export interface WSUptimeEvent {
+  event: "uptime";
+  uptime: number; // seconds
+}
+
+export interface WSNewModEvent {
+  event: "new-mod";
+}
+
+export type WSEvent =
+  | WSLogEvent
+  | WSStatsEvent
+  | WSPowerStateEvent
+  | WSAuthExpiringEvent
+  | WSAuthIncorrectEvent
+  | WSInstallationResultEvent
+  | WSAuthOkEvent
+  | WSUptimeEvent
+  | WSNewModEvent;
+
+export interface Servers {
+  servers: Server[];
+}
diff --git a/apps/frontend/src/utils/common-messages.ts b/apps/frontend/src/utils/common-messages.ts
index 8e96ff4aa..b1ded8ac9 100644
--- a/apps/frontend/src/utils/common-messages.ts
+++ b/apps/frontend/src/utils/common-messages.ts
@@ -115,6 +115,10 @@ export const commonMessages = defineMessages({
     id: "label.scopes",
     defaultMessage: "Scopes",
   },
+  serversLabel: {
+    id: "label.servers",
+    defaultMessage: "Servers",
+  },
   settingsLabel: {
     id: "label.settings",
     defaultMessage: "Settings",
diff --git a/apps/frontend/tailwind.config.js b/apps/frontend/tailwind.config.js
index 887315d8b..6b7f1f0cc 100644
--- a/apps/frontend/tailwind.config.js
+++ b/apps/frontend/tailwind.config.js
@@ -67,6 +67,7 @@ module.exports = {
           textHover: "var(--color-button-text-hover)",
           bgActive: "var(--color-button-bg-active)",
           textActive: "var(--color-button-text-active)",
+          border: "var(--color-button-border)",
         },
         toggleHandle: "var(--color-toggle-handle)",
         dropdown: {
diff --git a/apps/labrinth/Cargo.toml b/apps/labrinth/Cargo.toml
index 09dcbf2f1..739f2c897 100644
--- a/apps/labrinth/Cargo.toml
+++ b/apps/labrinth/Cargo.toml
@@ -17,7 +17,7 @@ actix-multipart = "0.6.1"
 actix-cors = "0.7.0"
 actix-ws = "0.2.5"
 actix-files = "0.6.5"
-actix-web-prom = { version = "0.8.0", features = ["process"]}
+actix-web-prom = { version = "0.8.0", features = ["process"] }
 governor = "0.6.3"
 
 tokio = { version = "1.35.1", features = ["sync"] }
@@ -88,7 +88,7 @@ rust_decimal = { version = "1.33.1", features = [
     "serde-with-float",
     "serde-with-str",
 ] }
-redis = { version = "0.27.5", features = ["tokio-comp", "ahash", "r2d2"]}
+redis = { version = "0.27.5", features = ["tokio-comp", "ahash", "r2d2"] }
 deadpool-redis = "0.18.0"
 clickhouse = { version = "0.11.2", features = ["uuid", "time"] }
 uuid = { version = "1.2.2", features = ["v4", "fast-rng", "serde"] }
@@ -97,8 +97,15 @@ maxminddb = "0.24.0"
 flate2 = "1.0.25"
 tar = "0.4.38"
 
-sentry = { version = "0.32.1" }
-sentry-actix = "0.32.1"
+sentry = { version = "0.34.0", default-features = false, features = [
+    "backtrace",
+    "contexts",
+    "debug-images",
+    "panic",
+    "rustls",
+    "reqwest",
+] }
+sentry-actix = "0.34.0"
 
 image = "0.24.6"
 color-thief = "0.2.2"
@@ -111,7 +118,7 @@ lettre = "0.11.3"
 derive-new = "0.6.0"
 rust_iso3166 = "0.1.11"
 
-jemallocator = {version = "0.5.4", optional = true}
+jemallocator = { version = "0.5.4", optional = true }
 
 async-stripe = { version = "0.37.3", features = ["runtime-tokio-hyper-rustls"] }
 rusty-money = "0.4.1"
@@ -121,4 +128,4 @@ json-patch = "*"
 actix-http = "3.4.0"
 
 [features]
-jemalloc = ["jemallocator"]
\ No newline at end of file
+jemalloc = ["jemallocator"]
diff --git a/apps/labrinth/src/auth/validate.rs b/apps/labrinth/src/auth/validate.rs
index e69d19431..8b8769c9d 100644
--- a/apps/labrinth/src/auth/validate.rs
+++ b/apps/labrinth/src/auth/validate.rs
@@ -154,10 +154,15 @@ pub fn extract_authorization_header(
 ) -> Result<&str, AuthenticationError> {
     let headers = req.headers();
     let token_val: Option<&HeaderValue> = headers.get(AUTHORIZATION);
-    token_val
+    let token_val = token_val
         .ok_or_else(|| AuthenticationError::InvalidAuthMethod)?
         .to_str()
-        .map_err(|_| AuthenticationError::InvalidCredentials)
+        .map_err(|_| AuthenticationError::InvalidCredentials)?;
+    Ok(if let Some(token) = token_val.strip_prefix("Bearer ") {
+        token
+    } else {
+        token_val
+    })
 }
 
 pub async fn check_is_moderator_from_headers<'a, 'b, E>(
diff --git a/apps/labrinth/src/queue/analytics.rs b/apps/labrinth/src/queue/analytics.rs
index 117a51fa2..4269edaeb 100644
--- a/apps/labrinth/src/queue/analytics.rs
+++ b/apps/labrinth/src/queue/analytics.rs
@@ -6,7 +6,6 @@ use dashmap::{DashMap, DashSet};
 use redis::cmd;
 use sqlx::PgPool;
 use std::collections::HashMap;
-use std::net::Ipv6Addr;
 
 const DOWNLOADS_NAMESPACE: &str = "downloads";
 const VIEWS_NAMESPACE: &str = "views";
@@ -33,23 +32,8 @@ impl AnalyticsQueue {
         }
     }
 
-    fn strip_ip(ip: Ipv6Addr) -> u64 {
-        if let Some(ip) = ip.to_ipv4_mapped() {
-            let octets = ip.octets();
-            u64::from_be_bytes([
-                octets[0], octets[1], octets[2], octets[3], 0, 0, 0, 0,
-            ])
-        } else {
-            let octets = ip.octets();
-            u64::from_be_bytes([
-                octets[0], octets[1], octets[2], octets[3], octets[4],
-                octets[5], octets[6], octets[7],
-            ])
-        }
-    }
-
     pub fn add_view(&self, page_view: PageView) {
-        let ip_stripped = Self::strip_ip(page_view.ip);
+        let ip_stripped = crate::util::ip::strip_ip(page_view.ip);
 
         self.views_queue
             .entry((ip_stripped, page_view.project_id))
@@ -57,7 +41,7 @@ impl AnalyticsQueue {
             .push(page_view);
     }
     pub fn add_download(&self, download: Download) {
-        let ip_stripped = Self::strip_ip(download.ip);
+        let ip_stripped = crate::util::ip::strip_ip(download.ip);
         self.downloads_queue
             .insert((ip_stripped, download.project_id), download);
     }
diff --git a/apps/labrinth/src/routes/analytics.rs b/apps/labrinth/src/routes/analytics.rs
index 36fe6febc..c8709d9e0 100644
--- a/apps/labrinth/src/routes/analytics.rs
+++ b/apps/labrinth/src/routes/analytics.rs
@@ -13,7 +13,7 @@ use actix_web::{HttpRequest, HttpResponse};
 use serde::Deserialize;
 use sqlx::PgPool;
 use std::collections::HashMap;
-use std::net::{AddrParseError, IpAddr, Ipv4Addr, Ipv6Addr};
+use std::net::Ipv4Addr;
 use std::sync::Arc;
 use url::Url;
 
@@ -39,16 +39,6 @@ pub const FILTERED_HEADERS: &[&str] = &[
     "x-vercel-ip-latitude",
     "x-vercel-ip-country",
 ];
-
-pub fn convert_to_ip_v6(src: &str) -> Result<Ipv6Addr, AddrParseError> {
-    let ip_addr: IpAddr = src.parse()?;
-
-    Ok(match ip_addr {
-        IpAddr::V4(x) => x.to_ipv6_mapped(),
-        IpAddr::V6(x) => x,
-    })
-}
-
 #[derive(Deserialize)]
 pub struct UrlInput {
     url: String,
@@ -101,7 +91,7 @@ pub async fn page_view_ingest(
         })
         .collect::<HashMap<String, String>>();
 
-    let ip = convert_to_ip_v6(
+    let ip = crate::util::ip::convert_to_ip_v6(
         if let Some(header) = headers.get("cf-connecting-ip") {
             header
         } else {
diff --git a/apps/labrinth/src/routes/internal/admin.rs b/apps/labrinth/src/routes/internal/admin.rs
index 411abb12d..68987d1da 100644
--- a/apps/labrinth/src/routes/internal/admin.rs
+++ b/apps/labrinth/src/routes/internal/admin.rs
@@ -108,7 +108,7 @@ pub async fn count_download(
         ApiError::InvalidInput("invalid download URL specified!".to_string())
     })?;
 
-    let ip = crate::routes::analytics::convert_to_ip_v6(&download_body.ip)
+    let ip = crate::util::ip::convert_to_ip_v6(&download_body.ip)
         .unwrap_or_else(|_| Ipv4Addr::new(127, 0, 0, 1).to_ipv6_mapped());
 
     analytics_queue.add_download(Download {
diff --git a/apps/labrinth/src/routes/internal/flows.rs b/apps/labrinth/src/routes/internal/flows.rs
index 31da67cdc..a362066ed 100644
--- a/apps/labrinth/src/routes/internal/flows.rs
+++ b/apps/labrinth/src/routes/internal/flows.rs
@@ -1468,6 +1468,8 @@ pub struct NewAccount {
     pub sign_up_newsletter: Option<bool>,
 }
 
+const NEW_ACCOUNT_LIMITER_NAMESPACE: &str = "new_account_ips";
+
 #[post("create")]
 pub async fn create_account_with_password(
     req: HttpRequest,
@@ -1533,19 +1535,6 @@ pub async fn create_account_with_password(
         ));
     }
 
-    let flow = Flow::ConfirmEmail {
-        user_id,
-        confirm_email: new_account.email.clone(),
-    }
-    .insert(Duration::hours(24), &redis)
-    .await?;
-
-    send_email_verify(
-        new_account.email.clone(),
-        flow,
-        &format!("Welcome to Modrinth, {}!", new_account.username),
-    )?;
-
     crate::database::models::User {
         id: user_id,
         github_id: None,
@@ -1577,6 +1566,49 @@ pub async fn create_account_with_password(
     let session = issue_session(req, user_id, &mut transaction, &redis).await?;
     let res = crate::models::sessions::Session::from(session, true, None);
 
+    // We limit each ip to creating 5 accounts in a six hour period
+    let ip = crate::util::ip::convert_to_ip_v6(&res.ip).map_err(|_| {
+        ApiError::InvalidInput("unable to parse user ip!".to_string())
+    })?;
+    let stripped_ip = crate::util::ip::strip_ip(ip).to_string();
+
+    let mut conn = redis.connect().await?;
+    let uses = if let Some(res) = conn
+        .get(NEW_ACCOUNT_LIMITER_NAMESPACE, &stripped_ip)
+        .await?
+    {
+        res.parse::<u64>().unwrap_or(0)
+    } else {
+        0
+    };
+
+    if uses >= 5 {
+        return Err(ApiError::InvalidInput(
+            "IP has been rate-limited.".to_string(),
+        ));
+    }
+
+    conn.set(
+        NEW_ACCOUNT_LIMITER_NAMESPACE,
+        &stripped_ip,
+        &(uses + 1).to_string(),
+        Some(60 * 60 * 6),
+    )
+    .await?;
+
+    let flow = Flow::ConfirmEmail {
+        user_id,
+        confirm_email: new_account.email.clone(),
+    }
+    .insert(Duration::hours(24), &redis)
+    .await?;
+
+    send_email_verify(
+        new_account.email.clone(),
+        flow,
+        &format!("Welcome to Modrinth, {}!", new_account.username),
+    )?;
+
     if new_account.sign_up_newsletter.unwrap_or(false) {
         sign_up_beehiiv(&new_account.email).await?;
     }
diff --git a/apps/labrinth/src/util/ip.rs b/apps/labrinth/src/util/ip.rs
new file mode 100644
index 000000000..9f4a4ccad
--- /dev/null
+++ b/apps/labrinth/src/util/ip.rs
@@ -0,0 +1,25 @@
+use std::net::{AddrParseError, IpAddr, Ipv6Addr};
+
+pub fn convert_to_ip_v6(src: &str) -> Result<Ipv6Addr, AddrParseError> {
+    let ip_addr: IpAddr = src.parse()?;
+
+    Ok(match ip_addr {
+        IpAddr::V4(x) => x.to_ipv6_mapped(),
+        IpAddr::V6(x) => x,
+    })
+}
+
+pub fn strip_ip(ip: Ipv6Addr) -> u64 {
+    if let Some(ip) = ip.to_ipv4_mapped() {
+        let octets = ip.octets();
+        u64::from_be_bytes([
+            octets[0], octets[1], octets[2], octets[3], 0, 0, 0, 0,
+        ])
+    } else {
+        let octets = ip.octets();
+        u64::from_be_bytes([
+            octets[0], octets[1], octets[2], octets[3], octets[4], octets[5],
+            octets[6], octets[7],
+        ])
+    }
+}
diff --git a/apps/labrinth/src/util/mod.rs b/apps/labrinth/src/util/mod.rs
index b7271c706..94eefffd8 100644
--- a/apps/labrinth/src/util/mod.rs
+++ b/apps/labrinth/src/util/mod.rs
@@ -7,6 +7,7 @@ pub mod env;
 pub mod ext;
 pub mod guards;
 pub mod img;
+pub mod ip;
 pub mod ratelimit;
 pub mod redis;
 pub mod routes;
diff --git a/package.json b/package.json
index 6156dc4aa..be16cf3f9 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "prettier": "^3.3.2",
-    "turbo": "^2.0.6",
+    "turbo": "^2.2.3",
     "vue": "^3.4.31"
   },
   "packageManager": "pnpm@9.4.0",
diff --git a/packages/app-lib/src/config.rs b/packages/app-lib/src/config.rs
index aff704c2a..33fbce280 100644
--- a/packages/app-lib/src/config.rs
+++ b/packages/app-lib/src/config.rs
@@ -1,6 +1,6 @@
 //! Configuration structs
 
-pub const MODRINTH_API_URL: &str = "https://api.modrinth.com/v2/";
-pub const MODRINTH_API_URL_V3: &str = "https://api.modrinth.com/v3/";
+pub const MODRINTH_API_URL: &str = "https://staging-api.modrinth.com/v2/";
+pub const MODRINTH_API_URL_V3: &str = "https://staging-api.modrinth.com/v3/";
 
 pub const META_URL: &str = "https://launcher-meta.modrinth.com/";
diff --git a/packages/assets/external/pyro.svg b/packages/assets/external/pyro.svg
new file mode 100644
index 000000000..066ec90c5
--- /dev/null
+++ b/packages/assets/external/pyro.svg
@@ -0,0 +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
diff --git a/packages/assets/icons/youtube.svg b/packages/assets/external/youtube.svg
similarity index 100%
rename from packages/assets/icons/youtube.svg
rename to packages/assets/external/youtube.svg
diff --git a/packages/assets/icons/cloud.svg b/packages/assets/icons/cloud.svg
new file mode 100644
index 000000000..d1f6d097b
--- /dev/null
+++ b/packages/assets/icons/cloud.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+  <path d="M1 12.5A4.5 4.5 0 0 0 5.5 17H15a4 4 0 0 0 1.866-7.539 3.504 3.504 0 0 0-4.504-4.272A4.5 4.5 0 0 0 4.06 8.235 4.502 4.502 0 0 0 1 12.5Z" />
+</svg>
diff --git a/packages/assets/icons/cog.svg b/packages/assets/icons/cog.svg
new file mode 100644
index 000000000..56499bf7b
--- /dev/null
+++ b/packages/assets/icons/cog.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+  <path fill-rule="evenodd" d="M7.84 1.804A1 1 0 0 1 8.82 1h2.36a1 1 0 0 1 .98.804l.331 1.652a6.993 6.993 0 0 1 1.929 1.115l1.598-.54a1 1 0 0 1 1.186.447l1.18 2.044a1 1 0 0 1-.205 1.251l-1.267 1.113a7.047 7.047 0 0 1 0 2.228l1.267 1.113a1 1 0 0 1 .206 1.25l-1.18 2.045a1 1 0 0 1-1.187.447l-1.598-.54a6.993 6.993 0 0 1-1.929 1.115l-.33 1.652a1 1 0 0 1-.98.804H8.82a1 1 0 0 1-.98-.804l-.331-1.652a6.993 6.993 0 0 1-1.929-1.115l-1.598.54a1 1 0 0 1-1.186-.447l-1.18-2.044a1 1 0 0 1 .205-1.251l1.267-1.114a7.05 7.05 0 0 1 0-2.227L1.821 7.773a1 1 0 0 1-.206-1.25l1.18-2.045a1 1 0 0 1 1.187-.447l1.598.54A6.992 6.992 0 0 1 7.51 3.456l.33-1.652ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" />
+</svg>
diff --git a/packages/assets/icons/cpu.svg b/packages/assets/icons/cpu.svg
new file mode 100644
index 000000000..f95f519b3
--- /dev/null
+++ b/packages/assets/icons/cpu.svg
@@ -0,0 +1,14 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="absolute right-8 top-8 size-8"
+>
+<path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Zm.75-12h9v9h-9v-9Z"
+/>
+</svg>
\ No newline at end of file
diff --git a/packages/assets/icons/cube.svg b/packages/assets/icons/cube.svg
new file mode 100644
index 000000000..9721e1d15
--- /dev/null
+++ b/packages/assets/icons/cube.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+  <path d="M10.362 1.093a.75.75 0 0 0-.724 0L2.523 5.018 10 9.143l7.477-4.125-7.115-3.925ZM18 6.443l-7.25 4v8.25l6.862-3.786A.75.75 0 0 0 18 14.25V6.443ZM9.25 18.693v-8.25l-7.25-4v7.807a.75.75 0 0 0 .388.657l6.862 3.786Z" />
+</svg>
diff --git a/packages/assets/icons/db.svg b/packages/assets/icons/db.svg
new file mode 100644
index 000000000..196cf349e
--- /dev/null
+++ b/packages/assets/icons/db.svg
@@ -0,0 +1,14 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="absolute right-8 top-8 size-8"
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"
+    />
+</svg>
\ No newline at end of file
diff --git a/packages/assets/icons/loader.svg b/packages/assets/icons/loader.svg
new file mode 100644
index 000000000..e274b4d39
--- /dev/null
+++ b/packages/assets/icons/loader.svg
@@ -0,0 +1,18 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    xml:space="preserve"
+    fill-rule="evenodd"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    clip-rule="evenodd"
+    viewBox="0 0 24 24"
+>
+    <path fill="none" d="M0 0h24v24H0z"></path>
+    <path
+        fill="none"
+        stroke="currentColor"
+        stroke-width="23"
+        d="m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8"
+        transform="matrix(.08671 0 0 .0867 -49.8 -56)"
+    ></path>
+</svg>
\ No newline at end of file
diff --git a/packages/assets/icons/package-closed.svg b/packages/assets/icons/package-closed.svg
new file mode 100644
index 000000000..8a39544e6
--- /dev/null
+++ b/packages/assets/icons/package-closed.svg
@@ -0,0 +1 @@
+<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-package"><path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"/><path d="M12 22V12"/><path d="m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7"/><path d="m7.5 4.27 9 5.15"/></svg>
diff --git a/packages/assets/icons/plug.svg b/packages/assets/icons/plug.svg
new file mode 100644
index 000000000..644d2e4c8
--- /dev/null
+++ b/packages/assets/icons/plug.svg
@@ -0,0 +1 @@
+<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-plug"><path d="M12 22v-5"/><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/test.svg b/packages/assets/icons/test.svg
new file mode 100644
index 000000000..4854e5ac9
--- /dev/null
+++ b/packages/assets/icons/test.svg
@@ -0,0 +1,14 @@
+<svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="size-6"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
+            />
+          </svg>
\ No newline at end of file
diff --git a/packages/assets/index.ts b/packages/assets/index.ts
index 1b5c156e2..808f10f12 100644
--- a/packages/assets/index.ts
+++ b/packages/assets/index.ts
@@ -23,7 +23,8 @@ import _PayPalIcon from './external/paypal.svg?component'
 import _RedditIcon from './external/reddit.svg?component'
 import _TwitterIcon from './external/twitter.svg?component'
 import _WindowsIcon from './external/windows.svg?component'
-import _YouTubeIcon from './icons/youtube.svg?component'
+import _YouTubeIcon from './external/youtube.svg?component'
+import _PyroIcon from './external/pyro.svg?component'
 
 // Icons
 import _AlignLeftIcon from './icons/align-left.svg?component'
@@ -111,8 +112,10 @@ import _NewspaperIcon from './icons/newspaper.svg?component'
 import _OmorphiaIcon from './icons/omorphia.svg?component'
 import _OrganizationIcon from './icons/organization.svg?component'
 import _PackageOpenIcon from './icons/package-open.svg?component'
+import _PackageClosedIcon from './icons/package-closed.svg?component'
 import _PaintBrushIcon from './icons/paintbrush.svg?component'
 import _PlayIcon from './icons/play.svg?component'
+import _PlugIcon from './icons/plug.svg?component'
 import _PlusIcon from './icons/plus.svg?component'
 import _RadioButtonIcon from './icons/radio-button.svg?component'
 import _RadioButtonChecked from './icons/radio-button-checked.svg?component'
@@ -160,6 +163,13 @@ import _XIcon from './icons/x.svg?component'
 import _XCircleIcon from './icons/x-circle.svg?component'
 import _ZoomInIcon from './icons/zoom-in.svg?component'
 import _ZoomOutIcon from './icons/zoom-out.svg?component'
+import _CubeIcon from './icons/cube.svg?component'
+import _CloudIcon from './icons/cloud.svg?component'
+import _CogIcon from './icons/cog.svg?component'
+import _CPUIcon from './icons/cpu.svg?component'
+import _DBIcon from './icons/db.svg?component'
+import _LoaderIcon from './icons/loader.svg?component'
+import _ImportIcon from './icons/import.svg?component'
 
 // Editor Icons
 import _BoldIcon from './icons/bold.svg?component'
@@ -208,6 +218,7 @@ export const RedditIcon = _RedditIcon
 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
@@ -293,8 +304,10 @@ export const NewspaperIcon = _NewspaperIcon
 export const OmorphiaIcon = _OmorphiaIcon
 export const OrganizationIcon = _OrganizationIcon
 export const PackageOpenIcon = _PackageOpenIcon
+export const PackageClosedIcon = _PackageClosedIcon
 export const PaintBrushIcon = _PaintBrushIcon
 export const PlayIcon = _PlayIcon
+export const PlugIcon = _PlugIcon
 export const PlusIcon = _PlusIcon
 export const RadioButtonIcon = _RadioButtonIcon
 export const RadioButtonChecked = _RadioButtonChecked
@@ -351,5 +364,12 @@ export const TextQuoteIcon = _TextQuoteIcon
 export const Heading1Icon = _Heading1Icon
 export const Heading2Icon = _Heading2Icon
 export const Heading3Icon = _Heading3Icon
+export const CubeIcon = _CubeIcon
+export const CloudIcon = _CloudIcon
+export const CogIcon = _CogIcon
+export const CPUIcon = _CPUIcon
+export const DBIcon = _DBIcon
+export const LoaderIcon = _LoaderIcon
+export const ImportIcon = _ImportIcon
 export const CardIcon = _CardIcon
 export const SparklesIcon = _SparklesIcon
diff --git a/packages/ui/src/components/base/ButtonStyled.vue b/packages/ui/src/components/base/ButtonStyled.vue
index 9aca5ebdc..973e53264 100644
--- a/packages/ui/src/components/base/ButtonStyled.vue
+++ b/packages/ui/src/components/base/ButtonStyled.vue
@@ -6,9 +6,11 @@ const props = withDefaults(
     color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
     size?: 'standard' | 'large'
     circular?: boolean
-    type?: 'standard' | 'outlined' | 'transparent'
+    type?: 'standard' | 'outlined' | 'transparent' | 'highlight'
     colorFill?: 'auto' | 'background' | 'text' | 'none'
     hoverColorFill?: 'auto' | 'background' | 'text' | 'none'
+    highlightedStyle?: 'main-nav-primary' | 'main-nav-secondary'
+    highlighted?: boolean
   }>(),
   {
     color: 'standard',
@@ -17,23 +19,25 @@ const props = withDefaults(
     type: 'standard',
     colorFill: 'auto',
     hoverColorFill: 'auto',
+    highlightedStyle: 'main-nav-primary',
+    highlighted: false,
   },
 )
 
 const colorVar = computed(() => {
   switch (props.color) {
     case 'brand':
-      return 'var(--color-brand)'
+      return props.type === 'highlight' ? 'var(--color-brand-highlight)' : 'var(--color-brand)'
     case 'red':
-      return 'var(--color-red)'
+      return props.type === 'highlight' ? 'var(--color-red-highlight)' : 'var(--color-red)'
     case 'orange':
-      return 'var(--color-orange)'
+      return props.type === 'highlight' ? 'var(--color-orange-highlight)' : 'var(--color-orange)'
     case 'green':
-      return 'var(--color-green)'
+      return props.type === 'highlight' ? 'var(--color-green-highlight)' : 'var(--color-green)'
     case 'blue':
-      return 'var(--color-blue)'
+      return props.type === 'highlight' ? 'var(--color-blue-highlight)' : 'var(--color-blue)'
     case 'purple':
-      return 'var(--color-purple)'
+      return props.type === 'highlight' ? 'var(--color-purple-highlight)' : 'var(--color-purple)'
     case 'standard':
     default:
       return null
@@ -108,7 +112,11 @@ function setColorFill(
   if (colorVar.value) {
     if (fill === 'background') {
       colors.bg = colorVar.value
-      colors.text = 'var(--color-accent-contrast)'
+      if (props.type === 'highlight') {
+        colors.text = 'var(--color-contrast)'
+      } else {
+        colors.text = 'var(--color-accent-contrast)'
+      }
     } else if (fill === 'text') {
       colors.text = colorVar.value
     }
@@ -117,6 +125,22 @@ function setColorFill(
 }
 
 const colorVariables = computed(() => {
+  if (props.highlighted) {
+    let colors = {
+      bg:
+        props.highlightedStyle === 'main-nav-primary'
+          ? 'var(--color-brand-highlight)'
+          : 'var(--color-button-bg)',
+      text: 'var(--color-contrast)',
+      icon:
+        props.highlightedStyle === 'main-nav-primary'
+          ? 'var(--color-brand)'
+          : 'var(--color-contrast)',
+    }
+    let hoverColors = JSON.parse(JSON.stringify(colors))
+    return `--_bg: ${colors.bg}; --_text: ${colors.text}; --_icon: ${colors.icon}; --_hover-bg: ${hoverColors.bg}; --_hover-text: ${hoverColors.text}; --_hover-icon: ${hoverColors.icon};`
+  }
+
   let colors = {
     bg: 'var(--color-button-bg)',
     text: 'var(--color-base)',
@@ -176,6 +200,10 @@ const colorVariables = computed(() => {
     background-color 0.25s ease-in-out,
     color 0.25s ease-in-out;
 
+  svg:first-child {
+    color: var(--_icon, var(--_text));
+  }
+
   &[disabled],
   &[disabled='true'],
   &.disabled,
diff --git a/packages/ui/src/components/base/PopoutMenu.vue b/packages/ui/src/components/base/PopoutMenu.vue
index 007818291..0fd73860a 100644
--- a/packages/ui/src/components/base/PopoutMenu.vue
+++ b/packages/ui/src/components/base/PopoutMenu.vue
@@ -104,19 +104,30 @@ defineExpose({
 })
 
 const handleClickOutside = (event) => {
+  if (!dropdown.value) return
+
+  const isContextMenuClick = event.button === 2 || event.which === 3
   const elements = document.elementsFromPoint(event.clientX, event.clientY)
   if (
-    dropdown.value.$el !== event.target &&
-    !elements.includes(dropdown.value.$el) &&
-    !dropdown.value.contains(event.target)
+    (dropdown.value !== event.target &&
+      !elements.includes(dropdown.value) &&
+      !dropdown.value.contains(event.target)) ||
+    isContextMenuClick
   ) {
     dropdownVisible.value = false
     emit('close')
   }
 }
 
+const handleKeyDown = (event) => {
+  if (event.key === 'Escape') {
+    hide()
+  }
+}
+
 onMounted(() => {
   window.addEventListener('click', handleClickOutside)
+  window.addEventListener('mouseup', handleClickOutside)
   window.addEventListener('resize', updateDirection)
   window.addEventListener('scroll', updateDirection)
   window.addEventListener('keydown', handleKeyDown)
@@ -125,16 +136,11 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   window.removeEventListener('click', handleClickOutside)
+  window.removeEventListener('mouseup', handleClickOutside)
   window.removeEventListener('resize', updateDirection)
   window.removeEventListener('scroll', updateDirection)
   window.removeEventListener('keydown', handleKeyDown)
 })
-
-function handleKeyDown(event) {
-  if (event.key === 'Escape') {
-    hide()
-  }
-}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/ui/src/components/base/Slider.vue b/packages/ui/src/components/base/Slider.vue
index cc6d4494c..5be478071 100644
--- a/packages/ui/src/components/base/Slider.vue
+++ b/packages/ui/src/components/base/Slider.vue
@@ -140,6 +140,9 @@ const onInput = (value: string) => {
   border-radius: var(--radius-sm);
   height: 0.25rem;
   width: 100%;
+  padding: 0;
+  min-height: 0px;
+  box-shadow: none;
 
   background: linear-gradient(
     to right,
diff --git a/packages/ui/src/components/billing/PurchaseModal.vue b/packages/ui/src/components/billing/PurchaseModal.vue
index 8d70cbea6..411b30022 100644
--- a/packages/ui/src/components/billing/PurchaseModal.vue
+++ b/packages/ui/src/components/billing/PurchaseModal.vue
@@ -3,23 +3,45 @@
     <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-else>Purchase product</template>
       </span>
     </template>
     <div class="flex items-center gap-1 pb-4">
+      <template v-if="product.metadata.type === 'pyro' && !projectId">
+        <span
+          :class="{
+            'text-secondary': purchaseModalStep !== 0,
+            'font-bold': purchaseModalStep === 0,
+          }"
+        >
+          Configure
+          <span class="hidden sm:inline">server</span>
+        </span>
+        <ChevronRightIcon class="h-5 w-5 text-secondary" />
+      </template>
       <span
         :class="{
-          'text-secondary': purchaseModalStep !== 0,
-          'font-bold': purchaseModalStep === 0,
+          'text-secondary':
+            purchaseModalStep !== (product.metadata.type === 'pyro' && !projectId ? 1 : 0),
+          'font-bold':
+            purchaseModalStep === (product.metadata.type === 'pyro' && !projectId ? 1 : 0),
         }"
       >
-        Select plan
+        {{ product.metadata.type === 'pyro' ? 'Billing' : 'Plan' }}
+        <span class="hidden sm:inline">{{
+          product.metadata.type === 'pyro' ? 'interval' : 'selection'
+        }}</span>
       </span>
       <ChevronRightIcon class="h-5 w-5 text-secondary" />
       <span
         :class="{
-          'text-secondary': purchaseModalStep !== 1,
-          'font-bold': purchaseModalStep === 1,
+          'text-secondary':
+            purchaseModalStep !== (product.metadata.type === 'pyro' && !projectId ? 2 : 1),
+          'font-bold':
+            purchaseModalStep === (product.metadata.type === 'pyro' && !projectId ? 2 : 1),
         }"
       >
         Payment
@@ -27,14 +49,126 @@
       <ChevronRightIcon class="h-5 w-5 text-secondary" />
       <span
         :class="{
-          'text-secondary': purchaseModalStep !== 2,
-          'font-bold': purchaseModalStep === 2,
+          'text-secondary':
+            purchaseModalStep !== (product.metadata.type === 'pyro' && !projectId ? 3 : 2),
+          'font-bold':
+            purchaseModalStep === (product.metadata.type === 'pyro' && !projectId ? 3 : 2),
         }"
       >
         Review
       </span>
     </div>
-    <div v-if="purchaseModalStep === 0" class="md:w-[600px]">
+    <div
+      v-if="product.metadata.type === 'pyro' && !projectId && purchaseModalStep === 0"
+      class="md:w-[600px] flex flex-col gap-4"
+    >
+      <div>
+        <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" />
+          <!-- <DropdownSelect
+            v-model="serverLoader"
+            v-tooltip="'Select the mod loader for your server'"
+            name="server-loader"
+            :options="['Vanilla', 'Fabric', 'Forge']"
+            placeholder="Select mod loader..."
+          /> -->
+          <div class="grid lg:grid-cols-5 grid-cols-3 gap-4">
+            <button
+              v-for="loader in ['Vanilla', 'Fabric', 'Forge', 'Quilt', 'NeoForge']"
+              :key="loader"
+              class="!h-24 btn flex !flex-col !items-center !justify-between !pt-4 !pb-3 !w-full"
+              :style="{
+                filter: serverLoader === loader ? 'brightness(1.5)' : '',
+              }"
+              @click="serverLoader = loader"
+            >
+              <UiServersIconsLoaderIcon :loader="loader" class="!h-12 !w-12" />
+              <p class="text-lg font-bold m-0">{{ loader }}</p>
+            </button>
+          </div>
+          <div class="flex items-center gap-2">
+            <InfoIcon class="hidden sm:block" />
+            <span class="text-sm text-secondary">
+              You can change these settings later in your server options.
+            </span>
+          </div>
+        </div>
+      </div>
+      <div v-if="customServer">
+        <div class="flex gap-2 items-center">
+          <p class="my-2 text-lg font-bold">Configure your RAM</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>
+        <div class="flex flex-col gap-4">
+          <div class="flex w-full gap-2 items-center">
+            <Slider
+              v-model="customServerConfig.ramInGb"
+              class="fix-slider"
+              :min="customMinRam"
+              :max="customMaxRam"
+              :step="2"
+              unit="GB"
+            />
+            <div class="font-semibold text-nowrap"></div>
+          </div>
+          <div
+            v-if="customMatchingProduct && !customOutOfStock"
+            class="flex sm:flex-row flex-col gap-4 w-full"
+          >
+            <div class="flex flex-col w-full gap-2">
+              <div class="font-semibold">vCPUs</div>
+              <input v-model="mutatedProduct.metadata.cpu" disabled class="input" />
+            </div>
+            <div class="flex flex-col w-full gap-2">
+              <div class="font-semibold">Storage</div>
+              <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"
+          >
+            <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>
+
+          <div class="flex items-center gap-2">
+            <InfoIcon class="hidden sm:block" />
+            <span class="text-sm text-secondary">
+              Storage and vCPUs are currently not configurable.
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="purchaseModalStep === (mutatedProduct.metadata.type === 'pyro' && !projectId ? 1 : 0)"
+      class="md:w-[600px]"
+    >
       <div>
         <p class="my-2 text-lg font-bold">Choose billing interval</p>
         <div class="flex flex-col gap-4">
@@ -74,14 +208,16 @@
         </div>
 
         <div class="flex items-center gap-2 pt-4">
-          <InfoIcon />
+          <InfoIcon class="hidden sm:block" />
           <span class="text-sm text-secondary">
             Final price and currency will be based on your selected payment method.
           </span>
         </div>
       </div>
     </div>
-    <template v-if="purchaseModalStep === 1">
+    <template
+      v-if="purchaseModalStep === (mutatedProduct.metadata.type === 'pyro' && !projectId ? 2 : 1)"
+    >
       <div
         v-show="loadingPaymentMethodModal !== 2"
         class="flex min-h-[16rem] items-center justify-center md:w-[600px]"
@@ -93,24 +229,48 @@
         <div id="payment-element" class="mt-4"></div>
       </div>
     </template>
-    <div v-if="purchaseModalStep === 2" class="md:w-[650px]">
+    <div
+      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">
+        <p class="my-2 text-lg font-bold text-primary">Server details</p>
+        <div class="flex items-center gap-4">
+          <img
+            v-if="projectImage"
+            :src="projectImage"
+            alt="Project image"
+            class="w-16 h-16 rounded"
+          />
+          <div>
+            <p v-if="projectName" class="font-bold">{{ projectName }}</p>
+            <p>Server name: {{ serverName }}</p>
+            <p v-if="!projectId">Loader: {{ serverLoader }}</p>
+          </div>
+        </div>
+      </div>
       <div>
         <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">Modrinth+ {{ selectedPlan }}</span>
-            <span class="text-secondary">
+            <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) }} /
               {{ selectedPlan }}
             </span>
           </div>
           <div class="flex justify-between">
             <span class="text-secondary">Tax</span>
-            <span class="text-secondary">{{ formatPrice(locale, tax, price.currency_code) }}</span>
+            <span class="text-secondary text-end">{{
+              formatPrice(locale, tax, price.currency_code)
+            }}</span>
           </div>
           <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">
+            <span class="text-lg font-extrabold text-primary text-end">
               {{ formatPrice(locale, price.prices.intervals[selectedPlan], price.currency_code) }}
             </span>
           </div>
@@ -131,7 +291,7 @@
           class="max-w-[20rem]"
           @select="selectPaymentMethod"
         >
-          <!-- TODO: Move this to component to remove duplicated code -->
+          <!-- eslint-disable-next-line vue/no-template-shadow -->
           <template #singleLabel="props">
             <div class="flex items-center gap-2">
               <CardIcon v-if="props.option.type === 'card'" class="h-8 w-8" />
@@ -163,6 +323,7 @@
               </span>
             </div>
           </template>
+          <!-- eslint-disable-next-line vue/no-template-shadow -->
           <template #option="props">
             <div class="flex items-center gap-2">
               <template v-if="props.option.id === 'new'">
@@ -204,10 +365,22 @@
       </div>
       <p class="m-0 mt-9 text-sm text-secondary">
         <strong>By clicking "Subscribe", you are purchasing a recurring subscription.</strong>
+        <br />
         You'll be charged
         {{ formatPrice(locale, price.prices.intervals[selectedPlan], price.currency_code) }} /
-        {{ selectedPlan }} plus applicable taxes starting today, until you cancel. Cancel anytime
-        from your settings page.
+        {{ selectedPlan }} plus applicable taxes starting today, until you cancel.
+        <br />
+        You can cancel anytime from your settings page.
+      </p>
+      <p v-if="mutatedProduct.metadata.type === 'pyro'" class="mb-2 mt-4 text-secondary">
+        <Checkbox v-model="eulaAccepted" :disabled="paymentLoading">
+          <label>
+            I acknowledge that I have read and agree to the
+            <a class="underline" target="_blank" href="https://aka.ms/MinecraftEULA">
+              Minecraft EULA
+            </a>
+          </label>
+        </Checkbox>
       </p>
     </div>
     <div class="input-group push-right pt-4">
@@ -216,17 +389,48 @@
           <XIcon />
           Cancel
         </button>
+        <button
+          class="btn btn-primary"
+          :disabled="
+            paymentLoading ||
+            (mutatedProduct.metadata.type === 'pyro' && !projectId && !serverName) ||
+            customAllowedToContinue
+          "
+          @click="nextStep"
+        >
+          <RightArrowIcon />
+          {{ mutatedProduct.metadata.type === 'pyro' && !projectId ? 'Next' : 'Select' }}
+        </button>
+      </template>
+      <template
+        v-else-if="
+          purchaseModalStep === (mutatedProduct.metadata.type === 'pyro' && !projectId ? 1 : 0)
+        "
+      >
+        <button
+          class="btn"
+          @click="
+            purchaseModalStep =
+              mutatedProduct.metadata.type === 'pyro' && !projectId ? 0 : purchaseModalStep
+          "
+        >
+          Back
+        </button>
         <button class="btn btn-primary" :disabled="paymentLoading" @click="beginPurchaseFlow(true)">
           <RightArrowIcon />
           Select
         </button>
       </template>
-      <template v-else-if="purchaseModalStep === 1">
+      <template
+        v-else-if="
+          purchaseModalStep === (mutatedProduct.metadata.type === 'pyro' && !projectId ? 2 : 1)
+        "
+      >
         <button
           class="btn"
           @click="
             () => {
-              purchaseModalStep = 0
+              purchaseModalStep = mutatedProduct.metadata.type === 'pyro' && !projectId ? 1 : 0
               loadingPaymentMethodModal = 0
               paymentLoading = false
             }
@@ -239,20 +443,34 @@
           Continue
         </button>
       </template>
-      <template v-else-if="purchaseModalStep === 2">
+      <template
+        v-else-if="
+          purchaseModalStep === (mutatedProduct.metadata.type === 'pyro' && !projectId ? 3 : 2)
+        "
+      >
         <button class="btn" @click="$refs.purchaseModal.hide()">
           <XIcon />
           Cancel
         </button>
-        <button class="btn btn-primary" :disabled="paymentLoading" @click="submitPayment">
+        <button
+          v-if="mutatedProduct.metadata.type === 'pyro'"
+          class="btn btn-primary"
+          :disabled="paymentLoading || !eulaAccepted"
+          @click="submitPayment"
+        >
+          <CheckCircleIcon /> Subscribe
+        </button>
+        <!-- Default Subscribe Button, so M+ still works -->
+        <button v-else class="btn btn-primary" :disabled="paymentLoading" @click="submitPayment">
           <CheckCircleIcon /> Subscribe
         </button>
       </template>
     </div>
   </NewModal>
 </template>
+
 <script setup>
-import { ref, computed, nextTick } from 'vue'
+import { ref, computed, nextTick, reactive, watch } from 'vue'
 import NewModal from '../modal/NewModal.vue'
 import {
   CardIcon,
@@ -260,6 +478,7 @@ import {
   ChevronRightIcon,
   CurrencyIcon,
   InfoIcon,
+  IssuesIcon,
   PayPalIcon,
   PlusIcon,
   RadioButtonChecked,
@@ -271,6 +490,8 @@ import AnimatedLogo from '../brand/AnimatedLogo.vue'
 import { getCurrency, calculateSavings, formatPrice, createStripeElements } from '@modrinth/utils'
 import { useVIntl, defineMessages } from '@vintl/vintl'
 import { Multiselect } from 'vue-multiselect'
+import Checkbox from '../base/Checkbox.vue'
+import Slider from '../base/Slider.vue'
 
 const { locale, formatMessage } = useVIntl()
 
@@ -311,6 +532,40 @@ const props = defineProps({
     type: Function,
     required: true,
   },
+  projectName: {
+    type: String,
+    default: null,
+  },
+  projectImage: {
+    type: String,
+    default: null,
+  },
+  projectId: {
+    type: String,
+    default: null,
+  },
+  versionId: {
+    type: String,
+    default: null,
+  },
+  serverName: {
+    type: String,
+    default: null,
+  },
+  customServer: {
+    type: Boolean,
+    required: false,
+  },
+  fetchCapacityStatuses: {
+    type: Function,
+    required: false,
+    default: null,
+  },
+  outOfStockUrl: {
+    type: String,
+    required: false,
+    default: '',
+  },
 })
 
 const messages = defineMessages({
@@ -372,43 +627,19 @@ let stripe = null
 let elements = null
 
 const purchaseModal = ref()
-
-const primaryPaymentMethodId = computed(() => {
-  if (
-    props.customer &&
-    props.customer.invoice_settings &&
-    props.customer.invoice_settings.default_payment_method
-  ) {
-    return props.customer.invoice_settings.default_payment_method
-  } else if (props.paymentMethods && props.paymentMethods[0] && props.paymentMethods[0].id) {
-    return props.paymentMethods[0].id
-  } else {
-    return null
-  }
-})
-
-defineExpose({
-  show: () => {
-    // eslint-disable-next-line no-undef
-    stripe = Stripe(props.publishableKey)
-
-    selectedPlan.value = 'yearly'
-
-    purchaseModalStep.value = 0
-    loadingPaymentMethodModal.value = 0
-    paymentLoading.value = false
-
-    purchaseModal.value.show()
-  },
-})
-
 const purchaseModalStep = ref(0)
 const loadingPaymentMethodModal = ref(0)
+const paymentLoading = ref(false)
 
 const selectedPlan = ref('yearly')
 const currency = computed(() => getCurrency(props.country))
-
-const price = ref(props.product.prices.find((x) => x.currency_code === currency.value))
+const price = computed(() => {
+  return (
+    mutatedProduct.value?.prices?.find((x) => x.currency_code === currency.value) ??
+    mutatedProduct.value?.prices?.find((x) => x.currency_code === 'USD') ??
+    null
+  )
+})
 
 const clientSecret = ref()
 const paymentIntentId = ref()
@@ -416,6 +647,73 @@ const confirmationToken = ref()
 const tax = ref()
 const total = ref()
 
+const serverName = ref(props.serverName || '')
+const serverLoader = ref('Vanilla')
+const eulaAccepted = ref(false)
+
+const mutatedProduct = ref({ ...props.product })
+const customMinRam = ref(0)
+const customMaxRam = ref(0)
+const customMatchingProduct = ref()
+const customOutOfStock = ref(false)
+const customLoading = ref(true)
+const customAllowedToContinue = computed(
+  () =>
+    props.customServer &&
+    (!customMatchingProduct.value || customLoading.value || customOutOfStock.value),
+)
+
+const customServerConfig = reactive({
+  ramInGb: 4,
+  storageGbFormatted: computed(() => `${mutatedProduct.value.metadata.storage / 1024} GB`),
+  ram: computed(() => customServerConfig.ramInGb * 1024),
+})
+
+const updateCustomServerProduct = () => {
+  customMatchingProduct.value = props.product.find(
+    (product) => product.metadata.ram === customServerConfig.ram,
+  )
+
+  if (customMatchingProduct.value) mutatedProduct.value = { ...customMatchingProduct.value }
+}
+
+let updateCustomServerStockTimeout = null
+const updateCustomServerStock = async () => {
+  if (updateCustomServerStockTimeout) {
+    clearTimeout(updateCustomServerStockTimeout)
+    customLoading.value = true
+  }
+
+  updateCustomServerStockTimeout = setTimeout(async () => {
+    if (props.fetchCapacityStatuses) {
+      const capacityStatus = await props.fetchCapacityStatuses(mutatedProduct.value)
+      if (capacityStatus.custom?.available === 0) {
+        customOutOfStock.value = true
+      } else {
+        customOutOfStock.value = false
+      }
+      customLoading.value = false
+    } else {
+      console.error('No fetchCapacityStatuses function provided.')
+      customOutOfStock.value = true
+    }
+  }, 300)
+}
+
+if (props.customServer) {
+  const ramValues = props.product.map((product) => product.metadata.ram / 1024)
+  customMinRam.value = Math.min(...ramValues)
+  customMaxRam.value = Math.max(...ramValues)
+
+  const updateProductAndStock = () => {
+    updateCustomServerProduct()
+    updateCustomServerStock()
+  }
+
+  updateProductAndStock()
+  watch(() => customServerConfig.ram, updateProductAndStock)
+}
+
 const selectedPaymentMethod = ref()
 const inputtedPaymentMethod = ref()
 const selectablePaymentMethods = computed(() => {
@@ -433,7 +731,52 @@ const selectablePaymentMethods = computed(() => {
   return values
 })
 
-const paymentLoading = ref(false)
+const primaryPaymentMethodId = computed(() => {
+  if (
+    props.customer &&
+    props.customer.invoice_settings &&
+    props.customer.invoice_settings.default_payment_method
+  ) {
+    return props.customer.invoice_settings.default_payment_method
+  } else if (props.paymentMethods && props.paymentMethods[0] && props.paymentMethods[0].id) {
+    return props.paymentMethods[0].id
+  } else {
+    return null
+  }
+})
+
+const metadata = computed(() => {
+  if (mutatedProduct.value.metadata.type === 'pyro') {
+    return {
+      type: 'pyro',
+      server_name: serverName.value,
+      source:
+        props.projectId && props.versionId
+          ? {
+              project_id: props.projectId,
+              version_id: props.versionId,
+            }
+          : {
+              loader: serverLoader.value,
+              loader_version: '',
+              game_version: 'latest',
+            },
+    }
+  }
+  return null
+})
+
+function nextStep() {
+  if (
+    mutatedProduct.value.metadata.type === 'pyro' &&
+    !props.projectId &&
+    purchaseModalStep.value === 0
+  ) {
+    purchaseModalStep.value = 1
+  } else {
+    beginPurchaseFlow(true)
+  }
+}
 
 async function beginPurchaseFlow(skip = false) {
   if (!props.customer) {
@@ -446,11 +789,13 @@ async function beginPurchaseFlow(skip = false) {
     paymentLoading.value = true
     await refreshPayment(null, primaryPaymentMethodId.value)
     paymentLoading.value = false
-    purchaseModalStep.value = 2
+    purchaseModalStep.value =
+      mutatedProduct.value.metadata.type === 'pyro' && !props.projectId ? 3 : 2
   } else {
     try {
       loadingPaymentMethodModal.value = 0
-      purchaseModalStep.value = 1
+      purchaseModalStep.value =
+        mutatedProduct.value.metadata.type === 'pyro' && !props.projectId ? 2 : 1
 
       await nextTick()
 
@@ -486,7 +831,6 @@ async function createConfirmationToken() {
 
   if (error) {
     props.onError(error)
-
     return
   }
 
@@ -509,7 +853,8 @@ async function validatePayment() {
 
   loadingPaymentMethodModal.value = 0
   confirmationToken.value = await createConfirmationToken()
-  purchaseModalStep.value = 2
+  purchaseModalStep.value =
+    mutatedProduct.value.metadata.type === 'pyro' && !props.projectId ? 3 : 2
   paymentLoading.value = false
 }
 
@@ -542,10 +887,11 @@ async function refreshPayment(confirmationId, paymentMethodId) {
     const result = await props.sendBillingRequest({
       charge: {
         type: 'new',
-        product_id: props.product.id,
+        product_id: mutatedProduct.value.id,
         interval: selectedPlan.value,
       },
       existing_payment_intent: paymentIntentId.value,
+      metadata: metadata.value,
       ...base,
     })
 
@@ -554,7 +900,7 @@ async function refreshPayment(confirmationId, paymentMethodId) {
       clientSecret.value = result.client_secret
     }
 
-    price.value = props.product.prices.find((x) => x.id === result.price_id)
+    price.value = mutatedProduct.value.prices.find((x) => x.id === result.price_id)
     currency.value = price.value.currency_code
     tax.value = result.tax
     total.value = result.total
@@ -585,5 +931,22 @@ async function submitPayment() {
   }
   paymentLoading.value = false
 }
+
+defineExpose({
+  show: () => {
+    // eslint-disable-next-line no-undef
+    stripe = Stripe(props.publishableKey)
+
+    selectedPlan.value = 'yearly'
+    serverName.value = props.serverName || ''
+    serverLoader.value = 'Vanilla'
+
+    purchaseModalStep.value = 0
+    loadingPaymentMethodModal.value = 0
+    paymentLoading.value = false
+
+    purchaseModal.value.show()
+  },
+})
 </script>
 <style scoped lang="scss"></style>
diff --git a/packages/ui/src/components/modal/Modal.vue b/packages/ui/src/components/modal/Modal.vue
index 6f3bea13a..7f034d7ee 100644
--- a/packages/ui/src/components/modal/Modal.vue
+++ b/packages/ui/src/components/modal/Modal.vue
@@ -148,8 +148,9 @@ defineExpose({
     position: fixed;
     box-shadow: var(--shadow-raised), var(--shadow-inset);
     border-radius: var(--radius-lg);
+    background-color: var(--color-raised-bg);
     max-height: calc(100% - 2 * var(--gap-lg));
-    overflow-y: auto;
+    overflow-y: visible;
     width: 600px;
     pointer-events: auto;
 
@@ -166,10 +167,6 @@ defineExpose({
       }
     }
 
-    .content {
-      background-color: var(--color-raised-bg);
-    }
-
     transform: translateY(50vh);
     visibility: hidden;
     opacity: 0;
diff --git a/packages/ui/src/components/modal/NewModal.vue b/packages/ui/src/components/modal/NewModal.vue
index ed7c7a0a3..5847162dd 100644
--- a/packages/ui/src/components/modal/NewModal.vue
+++ b/packages/ui/src/components/modal/NewModal.vue
@@ -59,6 +59,7 @@ const props = withDefaults(
     warnOnClose?: boolean
     header?: string
     onHide?: () => void
+    onShow?: () => void
   }>(),
   {
     type: true,
@@ -67,14 +68,29 @@ const props = withDefaults(
     closeOnEsc: true,
     warnOnClose: false,
     onHide: () => {},
+    onShow: () => {},
   },
 )
 
 const open = ref(false)
 const visible = ref(false)
 
+// make modal opening not shift page when there's a vertical scrollbar
+function addBodyPadding() {
+  const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth
+  if (scrollBarWidth > 0) {
+    document.body.style.paddingRight = `${scrollBarWidth}px`
+  } else {
+    document.body.style.paddingRight = ''
+  }
+}
+
 function show(event?: MouseEvent) {
+  props.onShow()
   open.value = true
+
+  addBodyPadding()
+  document.body.style.overflow = 'hidden'
   window.addEventListener('mousedown', updateMousePosition)
   window.addEventListener('keydown', handleKeyDown)
   if (event) {
@@ -91,6 +107,8 @@ function show(event?: MouseEvent) {
 function hide() {
   props.onHide()
   visible.value = false
+  document.body.style.overflow = ''
+  document.body.style.paddingRight = ''
   window.removeEventListener('mousedown', updateMousePosition)
   window.removeEventListener('keydown', handleKeyDown)
   setTimeout(() => {
@@ -143,12 +161,6 @@ function handleKeyDown(event: KeyboardEvent) {
   opacity: 0;
   transition: all 0.2s ease-out;
   background: linear-gradient(to bottom, rgba(29, 48, 43, 0.52) 0%, rgba(14, 21, 26, 0.95) 100%);
-  //transform: translate(
-  //    calc((-50vw + var(--_mouse-x, 50vw) * 1px) / 2),
-  //    calc((-50vh + var(--_mouse-y, 50vh) * 1px) / 2)
-  //  )
-  //  scaleX(0.8) scaleY(0.5);
-  border-radius: 180px;
   filter: blur(5px);
 
   @media (prefers-reduced-motion) {
@@ -159,8 +171,6 @@ function handleKeyDown(event: KeyboardEvent) {
     opacity: 1;
     visibility: visible;
     backdrop-filter: blur(5px);
-    transform: translate(0, 0) scaleX(1) scaleY(1);
-    border-radius: 0px;
   }
 
   &.noblur {
diff --git a/packages/utils/index.d.ts b/packages/utils/index.d.ts
index 99cbfbefb..905304bdd 100644
--- a/packages/utils/index.d.ts
+++ b/packages/utils/index.d.ts
@@ -1,6 +1,10 @@
 export const BASE62_CHARS = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
 type Base62Char = (typeof BASE62_CHARS)[number]
 
+export function formatPrice(locale: string, price: number, currency: string): string
+
+export function getCurrency(userCountry: string): string
+
 declare global {
   type ModrinthId = `${Base62Char}`[]
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f5bb63ba5..fd7108d0b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,8 +17,8 @@ importers:
         specifier: ^3.3.2
         version: 3.3.3
       turbo:
-        specifier: ^2.0.6
-        version: 2.2.1
+        specifier: ^2.2.3
+        version: 2.2.3
       vue:
         specifier: ^3.4.31
         version: 3.5.12(typescript@5.6.3)
@@ -79,7 +79,7 @@ importers:
         version: 1.11.13
       floating-vue:
         specifier: ^5.2.2
-        version: 5.2.2(@nuxt/kit@3.13.2(magicast@0.3.5))(vue@3.5.12(typescript@5.6.3))
+        version: 5.2.2(@nuxt/kit@3.14.159(magicast@0.3.5)(rollup@4.24.0))(vue@3.5.12(typescript@5.6.3))
       ofetch:
         specifier: ^1.3.4
         version: 1.4.1
@@ -107,25 +107,25 @@ importers:
     devDependencies:
       '@eslint/compat':
         specifier: ^1.1.1
-        version: 1.2.0(eslint@9.12.0(jiti@2.3.3))
+        version: 1.2.3(eslint@9.15.0(jiti@2.4.0))
       '@nuxt/eslint-config':
         specifier: ^0.5.6
-        version: 0.5.7(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
+        version: 0.5.7(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
       '@vitejs/plugin-vue':
         specifier: ^5.0.4
-        version: 5.1.4(vite@5.4.9(@types/node@20.16.11)(sass@1.79.5)(terser@5.34.1))(vue@3.5.12(typescript@5.6.3))
+        version: 5.1.4(vite@5.4.9(@types/node@22.9.0)(sass@1.79.5)(terser@5.34.1))(vue@3.5.12(typescript@5.6.3))
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.20(postcss@8.4.47)
       eslint:
         specifier: ^9.9.1
-        version: 9.12.0(jiti@2.3.3)
+        version: 9.15.0(jiti@2.4.0)
       eslint-config-custom:
         specifier: workspace:*
         version: link:../../packages/eslint-config-custom
       eslint-plugin-turbo:
         specifier: ^2.1.1
-        version: 2.1.3(eslint@9.12.0(jiti@2.3.3))
+        version: 2.3.0(eslint@9.15.0(jiti@2.4.0))
       postcss:
         specifier: ^8.4.39
         version: 8.4.47
@@ -146,7 +146,7 @@ importers:
         version: 5.6.3
       vite:
         specifier: ^5.2.8
-        version: 5.4.9(@types/node@20.16.11)(sass@1.79.5)(terser@5.34.1)
+        version: 5.4.9(@types/node@22.9.0)(sass@1.79.5)(terser@5.34.1)
       vue-tsc:
         specifier: ^2.1.6
         version: 2.1.6(typescript@5.6.3)
@@ -166,19 +166,19 @@ importers:
         version: 0.9.4(prettier@3.3.3)(typescript@5.6.3)
       '@astrojs/starlight':
         specifier: ^0.26.3
-        version: 0.26.4(astro@4.16.6(@types/node@20.16.11)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3))
+        version: 0.26.4(astro@4.16.6(@types/node@22.9.0)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3))
       '@modrinth/assets':
         specifier: workspace:*
         version: link:../../packages/assets
       astro:
         specifier: ^4.10.2
-        version: 4.16.6(@types/node@20.16.11)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3)
+        version: 4.16.6(@types/node@22.9.0)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3)
       sharp:
         specifier: ^0.32.5
         version: 0.32.6
       starlight-openapi:
         specifier: ^0.7.0
-        version: 0.7.0(@astrojs/markdown-remark@5.3.0)(@astrojs/starlight@0.26.4(astro@4.16.6(@types/node@20.16.11)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3)))(astro@4.16.6(@types/node@20.16.11)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3))(openapi-types@12.1.3)
+        version: 0.7.0(@astrojs/markdown-remark@5.3.0)(@astrojs/starlight@0.26.4(astro@4.16.6(@types/node@22.9.0)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3)))(astro@4.16.6(@types/node@22.9.0)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3))(openapi-types@12.1.3)
       typescript:
         specifier: ^5.5.4
         version: 5.6.3
@@ -200,12 +200,27 @@ importers:
       '@modrinth/utils':
         specifier: workspace:*
         version: link:../../packages/utils
+      '@pinia/nuxt':
+        specifier: ^0.5.1
+        version: 0.5.5(magicast@0.3.5)(rollup@4.24.0)(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))
       '@vintl/vintl':
         specifier: ^4.4.1
         version: 4.4.1(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))
+      '@vueuse/core':
+        specifier: ^11.1.0
+        version: 11.2.0(vue@3.5.12(typescript@5.6.3))
+      ace-builds:
+        specifier: ^1.36.2
+        version: 1.36.5
+      ansi-to-html:
+        specifier: ^0.7.2
+        version: 0.7.2
       dayjs:
         specifier: ^1.11.7
         version: 1.11.13
+      dompurify:
+        specifier: ^3.1.7
+        version: 3.2.0
       floating-vue:
         specifier: 2.0.0-beta.20
         version: 2.0.0-beta.20(vue@3.5.12(typescript@5.6.3))
@@ -230,6 +245,9 @@ importers:
       pathe:
         specifier: ^1.1.2
         version: 1.1.2
+      pinia:
+        specifier: ^2.1.7
+        version: 2.2.6(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))
       qrcode.vue:
         specifier: ^3.4.0
         version: 3.5.0(vue@3.5.12(typescript@5.6.3))
@@ -237,8 +255,14 @@ importers:
         specifier: ^7.5.4
         version: 7.6.3
       vue-multiselect:
-        specifier: 3.0.0
-        version: 3.0.0
+        specifier: 3.0.0-alpha.2
+        version: 3.0.0-alpha.2
+      vue-typed-virtual-list:
+        specifier: ^1.0.10
+        version: 1.0.10(vue@3.5.12(typescript@5.6.3))
+      vue3-ace-editor:
+        specifier: ^2.2.4
+        version: 2.2.4(ace-builds@1.36.5)(vue@3.5.12(typescript@5.6.3))
       vue3-apexcharts:
         specifier: ^1.5.2
         version: 1.7.0(apexcharts@3.54.1)(vue@3.5.12(typescript@5.6.3))
@@ -255,6 +279,9 @@ importers:
       '@nuxtjs/turnstile':
         specifier: ^0.8.0
         version: 0.8.0(magicast@0.3.5)(rollup@4.24.0)
+      '@types/dompurify':
+        specifier: ^3.0.5
+        version: 3.0.5
       '@types/node':
         specifier: ^20.1.0
         version: 20.16.11
@@ -326,22 +353,22 @@ importers:
     devDependencies:
       '@nuxtjs/eslint-config-typescript':
         specifier: ^12.1.0
-        version: 12.1.0(eslint-plugin-import-x@4.3.1(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
+        version: 12.1.0(eslint-plugin-import-x@4.4.2(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
       '@vue/eslint-config-typescript':
         specifier: ^13.0.0
-        version: 13.0.0(eslint-plugin-vue@9.29.0(eslint@9.12.0(jiti@2.3.3)))(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
+        version: 13.0.0(eslint-plugin-vue@9.31.0(eslint@9.15.0(jiti@2.4.0)))(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
       eslint-config-prettier:
         specifier: ^9.1.0
-        version: 9.1.0(eslint@9.12.0(jiti@2.3.3))
+        version: 9.1.0(eslint@9.15.0(jiti@2.4.0))
       eslint-config-turbo:
         specifier: ^2.0.7
-        version: 2.1.3(eslint@9.12.0(jiti@2.3.3))
+        version: 2.3.0(eslint@9.15.0(jiti@2.4.0))
       eslint-plugin-prettier:
         specifier: ^5.2.1
-        version: 5.2.1(eslint-config-prettier@9.1.0(eslint@9.12.0(jiti@2.3.3)))(eslint@9.12.0(jiti@2.3.3))(prettier@3.3.3)
+        version: 5.2.1(eslint-config-prettier@9.1.0(eslint@9.15.0(jiti@2.4.0)))(eslint@9.15.0(jiti@2.4.0))(prettier@3.3.3)
       eslint-plugin-unicorn:
         specifier: ^54.0.0
-        version: 54.0.0(eslint@9.12.0(jiti@2.3.3))
+        version: 54.0.0(eslint@9.15.0(jiti@2.4.0))
       typescript:
         specifier: ^5.5.3
         version: 5.6.3
@@ -386,7 +413,7 @@ importers:
         version: 1.11.13
       floating-vue:
         specifier: 2.0.0-beta.24
-        version: 2.0.0-beta.24(@nuxt/kit@3.13.2(magicast@0.3.5))(vue@3.5.12(typescript@5.6.3))
+        version: 2.0.0-beta.24(@nuxt/kit@3.14.159(magicast@0.3.5)(rollup@4.24.0))(vue@3.5.12(typescript@5.6.3))
       highlight.js:
         specifier: ^11.9.0
         version: 11.10.0
@@ -414,7 +441,7 @@ importers:
         version: 6.2.15(@vue/compiler-core@3.5.12)(vue@3.5.12(typescript@5.6.3))
       '@vintl/unplugin':
         specifier: ^1.5.1
-        version: 1.5.2(@vue/compiler-core@3.5.12)(vue@3.5.12(typescript@5.6.3))
+        version: 1.5.2(@vue/compiler-core@3.5.12)(rollup@4.24.0)(vue@3.5.12(typescript@5.6.3))
       '@vintl/vintl':
         specifier: ^4.4.1
         version: 4.4.1(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))
@@ -550,6 +577,10 @@ packages:
     resolution: {integrity: sha512-0xZJFNE5XMpENsgfHYTw8FbX4kv53mFLn2i3XPoq69LyhYSCBJtitaHx9QnsVTrsogI4Z3+HtEfZ2/GFPOtf5g==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/code-frame@7.26.2':
+    resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/compat-data@7.25.8':
     resolution: {integrity: sha512-ZsysZyXY4Tlx+Q53XdnOFmqwfB9QDTHYxaZYajWRoBLuLEAwI2UIbtxOjWh/cFaa9IKUlcB+DDuoskLuKu56JA==}
     engines: {node: '>=6.9.0'}
@@ -620,6 +651,10 @@ packages:
     resolution: {integrity: sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-identifier@7.25.9':
+    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-option@7.25.7':
     resolution: {integrity: sha512-ytbPLsm+GjArDYXJ8Ydr1c/KJuutjF2besPNbIZnZ6MKUxi/uTA22t2ymmA4WFjZFpjiAMO0xuuJPqK2nvDVfQ==}
     engines: {node: '>=6.9.0'}
@@ -1206,12 +1241,22 @@ packages:
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
 
+  '@eslint-community/eslint-utils@4.4.1':
+    resolution: {integrity: sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
   '@eslint-community/regexpp@4.11.1':
     resolution: {integrity: sha512-m4DVN9ZqskZoLU5GlWZadwDnYo3vAEydiUayB9widCl9ffWx2IvPnp6n3on5rJmziJSw9Bv+Z3ChDVdMwXCY8Q==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint/compat@1.2.0':
-    resolution: {integrity: sha512-CkPWddN7J9JPrQedEr2X7AjK9y1jaMJtxZ4A/+jTMFA2+n5BWhcKHW/EbJyARqg2zzQfgtWUtVmG3hrG6+nGpg==}
+  '@eslint-community/regexpp@4.12.1':
+    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  '@eslint/compat@1.2.3':
+    resolution: {integrity: sha512-wlZhwlDFxkxIZ571aH0FoK4h4Vwx7P3HJx62Gp8hTc10bfpwT2x0nULuAHmQSJBOWPgPeVf+9YtnD4j50zVHmA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^9.10.0
@@ -1219,36 +1264,36 @@ packages:
       eslint:
         optional: true
 
-  '@eslint/config-array@0.18.0':
-    resolution: {integrity: sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==}
+  '@eslint/config-array@0.19.0':
+    resolution: {integrity: sha512-zdHg2FPIFNKPdcHWtiNT+jEFCHYVplAXRDlQDyqy0zGx/q2parwh7brGJSiTxRk/TSMkbM//zt/f5CHgyTyaSQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/core@0.6.0':
-    resolution: {integrity: sha512-8I2Q8ykA4J0x0o7cg67FPVnehcqWTBehu/lmY+bolPFHGjh49YzGBMXTvpqVgEbBdvNCSxj6iFgiIyHzf03lzg==}
+  '@eslint/core@0.9.0':
+    resolution: {integrity: sha512-7ATR9F0e4W85D/0w7cU0SNj7qkAexMG+bAHEZOjo9akvGuhHE2m7umzWzfnpa0XAg5Kxc1BWmtPMV67jJ+9VUg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/eslintrc@2.1.4':
     resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  '@eslint/eslintrc@3.1.0':
-    resolution: {integrity: sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==}
+  '@eslint/eslintrc@3.2.0':
+    resolution: {integrity: sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/js@8.57.1':
     resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  '@eslint/js@9.12.0':
-    resolution: {integrity: sha512-eohesHH8WFRUprDNyEREgqP6beG6htMeUYeCpkEgBCieCMme5r9zFWjzAJp//9S+Kub4rqE+jXe9Cp1a7IYIIA==}
+  '@eslint/js@9.15.0':
+    resolution: {integrity: sha512-tMTqrY+EzbXmKJR5ToI8lxu7jaN5EdmrBFJpQk5JmSlyLsx6o4t27r883K5xsLuCYCpfKBCGswMSWXsM+jB7lg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/object-schema@2.1.4':
     resolution: {integrity: sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/plugin-kit@0.2.0':
-    resolution: {integrity: sha512-vH9PiIMMwvhCx31Af3HiGzsVNULDbyVkHXwlemn/B0TFj/00ho3y55efXrUZTfQipxoHC5u4xq6zblww1zm1Ig==}
+  '@eslint/plugin-kit@0.2.3':
+    resolution: {integrity: sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@expressive-code/core@0.35.6':
@@ -1312,6 +1357,36 @@ packages:
       vue:
         optional: true
 
+  '@formatjs/cli-lib@6.6.3':
+    resolution: {integrity: sha512-BXKMmZxtzrdLDBDd0UAp8915x6TsHPziEfrvP21e/lTFCel+J1IOaD8EtGCJoLW0rZksWlUKLX+E2tALZr31DQ==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      '@glimmer/env': ^0.1.7
+      '@glimmer/reference': ^0.91.1 || ^0.92.0
+      '@glimmer/syntax': ^0.92.0
+      '@glimmer/validator': ^0.92.0
+      '@vue/compiler-core': ^3.4.0
+      content-tag: ^2.0.1
+      ember-template-recast: ^6.1.4
+      vue: ^3.4.0
+    peerDependenciesMeta:
+      '@glimmer/env':
+        optional: true
+      '@glimmer/reference':
+        optional: true
+      '@glimmer/syntax':
+        optional: true
+      '@glimmer/validator':
+        optional: true
+      '@vue/compiler-core':
+        optional: true
+      content-tag:
+        optional: true
+      ember-template-recast:
+        optional: true
+      vue:
+        optional: true
+
   '@formatjs/cli@6.2.15':
     resolution: {integrity: sha512-s31YblAseSVqgFvY2EoIZaaEycifR/CadvMj1WcNvFvHK+2Xn02OuSX1jiKM/Nx29hX2x8k0raFJ6PtnXZgjtQ==}
     engines: {node: '>= 16'}
@@ -1349,15 +1424,27 @@ packages:
   '@formatjs/ecma402-abstract@2.2.0':
     resolution: {integrity: sha512-IpM+ev1E4QLtstniOE29W1rqH9eTdx5hQdNL8pzrflMj/gogfaoONZqL83LUeQScHAvyMbpqP5C9MzNf+fFwhQ==}
 
+  '@formatjs/ecma402-abstract@2.2.3':
+    resolution: {integrity: sha512-aElGmleuReGnk2wtYOzYFmNWYoiWWmf1pPPCYg0oiIQSJj0mjc4eUfzUXaSOJ4S8WzI/cLqnCTWjqz904FT2OQ==}
+
   '@formatjs/fast-memoize@2.2.1':
     resolution: {integrity: sha512-XS2RcOSyWxmUB7BUjj3mlPH0exsUzlf6QfhhijgI941WaJhVxXQ6mEWkdUFIdnKi3TuTYxRdelsgv3mjieIGIA==}
 
+  '@formatjs/fast-memoize@2.2.3':
+    resolution: {integrity: sha512-3jeJ+HyOfu8osl3GNSL4vVHUuWFXR03Iz9jjgI7RwjG6ysu/Ymdr0JRCPHfF5yGbTE6JCrd63EpvX1/WybYRbA==}
+
   '@formatjs/icu-messageformat-parser@2.7.10':
     resolution: {integrity: sha512-wlQfqCZ7PURkUNL2+8VTEFavPovtADU/isSKLFvDbdFmV7QPZIYqFMkhklaDYgMyLSBJa/h2MVQ2aFvoEJhxgg==}
 
+  '@formatjs/icu-messageformat-parser@2.9.3':
+    resolution: {integrity: sha512-9L99QsH14XjOCIp4TmbT8wxuffJxGK8uLNO1zNhLtcZaVXvv626N0s4A2qgRCKG3dfYWx9psvGlFmvyVBa6u/w==}
+
   '@formatjs/icu-skeleton-parser@1.8.4':
     resolution: {integrity: sha512-LMQ1+Wk1QSzU4zpd5aSu7+w5oeYhupRwZnMQckLPRYhSjf2/8JWQ882BauY9NyHxs5igpuQIXZDgfkaH3PoATg==}
 
+  '@formatjs/icu-skeleton-parser@1.8.7':
+    resolution: {integrity: sha512-fI+6SmS2g7h3srfAKSWa5dwreU5zNEfon2uFo99OToiLF6yxGE+WikvFSbsvMAYkscucvVmTYNlWlaDPp0n5HA==}
+
   '@formatjs/intl-displaynames@6.6.10':
     resolution: {integrity: sha512-tUz5qT61og1WwMM0K1/p46J69gLl1YJbty8xhtbigDA9LhbBmW2ShDg4ld+aqJTwCq4WK3Sj0VlFCKvFYeY3rQ==}
 
@@ -1373,6 +1460,9 @@ packages:
   '@formatjs/intl-localematcher@0.5.5':
     resolution: {integrity: sha512-t5tOGMgZ/i5+ALl2/offNqAQq/lfUnKLEw0mXQI4N4bqpedhrSE+fyKLpwnd22sK0dif6AV+ufQcTsKShB9J1g==}
 
+  '@formatjs/intl-localematcher@0.5.7':
+    resolution: {integrity: sha512-GGFtfHGQVFe/niOZp24Kal5b2i36eE2bNL0xi9Sg/yd0TR8aLjcteApZdHmismP5QQax1cMnZM9yWySUUjJteA==}
+
   '@formatjs/intl@2.10.8':
     resolution: {integrity: sha512-eY8r8RMmrRTTkLdbNBOZLFGXN3OnrEmInaNt8s4msIVfo+xuLqAqvB3W1jevj0I9QjU6ueIP7tEk+1rj6Xbv5A==}
     peerDependencies:
@@ -1389,12 +1479,20 @@ packages:
       ts-jest:
         optional: true
 
-  '@humanfs/core@0.19.0':
-    resolution: {integrity: sha512-2cbWIHbZVEweE853g8jymffCA+NCMiuqeECeBBLm8dg2oFdjuGJhgN4UAbI+6v0CKbbhvtXA4qV8YR5Ji86nmw==}
+  '@formatjs/ts-transformer@3.13.22':
+    resolution: {integrity: sha512-+Zfz0wZ6wkdQE2zePiIQWIf4dVWeJGFXjkZxoCwzqxXdDrRhyAsQm91kbdFRIcVrjILA6KV0gOz8X7OBbLP4fQ==}
+    peerDependencies:
+      ts-jest: '>=27'
+    peerDependenciesMeta:
+      ts-jest:
+        optional: true
+
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
 
-  '@humanfs/node@0.16.5':
-    resolution: {integrity: sha512-KSPA4umqSG4LHYRodq31VDwKAvaTF4xmVlzM8Aeh4PlU1JQ3IG0wiA8C25d3RQ9nJyM3mBHyI53K06VVL/oFFg==}
+  '@humanfs/node@0.16.6':
+    resolution: {integrity: sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==}
     engines: {node: '>=18.18.0'}
 
   '@humanwhocodes/config-array@0.13.0':
@@ -1418,6 +1516,10 @@ packages:
     resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
     engines: {node: '>=18.18'}
 
+  '@humanwhocodes/retry@0.4.1':
+    resolution: {integrity: sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==}
+    engines: {node: '>=18.18'}
+
   '@img/sharp-darwin-arm64@0.33.5':
     resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -1651,10 +1753,18 @@ packages:
     resolution: {integrity: sha512-KvRw21zU//wdz25IeE1E5m/aFSzhJloBRAQtv+evcFeZvuroIxpIQuUqhbzuwznaUwpiWbmwlcsp5uOWmi4vwA==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
+  '@nuxt/kit@3.14.159':
+    resolution: {integrity: sha512-ZqxsCI1NKV/gjfEUUZjMcr82sg0MKYZOuyB6bu9QY5Zr7NGpfIZY/z5Z822AKTmFxKGChnuz9M0UaS4ze6p42g==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
   '@nuxt/schema@3.13.2':
     resolution: {integrity: sha512-CCZgpm+MkqtOMDEgF9SWgGPBXlQ01hV/6+2reDEpJuqFPGzV8HYKPBcIFvn7/z5ahtgutHLzjP71Na+hYcqSpw==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
+  '@nuxt/schema@3.14.159':
+    resolution: {integrity: sha512-ggXA3F2f9udQoEy5WwrY6bTMvpDaErUYRLSEzdMqqCqjOQ5manfFgfuScGj3ooZiXLIX2TGLVTzcll4nnpDlnQ==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
   '@nuxt/telemetry@2.6.0':
     resolution: {integrity: sha512-h4YJ1d32cU7tDKjjhjtIIEck4WF/w3DTQBT348E9Pz85YLttnLqktLM0Ez9Xc2LzCeUgBDQv1el7Ob/zT3KUqg==}
     hasBin: true
@@ -1791,6 +1901,9 @@ packages:
     resolution: {integrity: sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==}
     engines: {node: '>= 10.0.0'}
 
+  '@pinia/nuxt@0.5.5':
+    resolution: {integrity: sha512-wjxS7YqIesh4OLK+qE3ZjhdOJ5pYZQ+VlEmZNtTwzQn1Kavei/khovx7mzXVXNA/mvSPXVhb9xBzhyS3XMURtw==}
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -1893,6 +2006,15 @@ packages:
       rollup:
         optional: true
 
+  '@rollup/pluginutils@5.1.3':
+    resolution: {integrity: sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==}
+    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.24.0':
     resolution: {integrity: sha512-Q6HJd7Y6xdB48x8ZNVDOqsbh2uByBhgK8PiQgPhwkIw/HC/YX5Ghq2mQY5sRMZWHb3VsFkWooUVOZHKr7DmDIA==}
     cpu: [arm]
@@ -2033,8 +2155,8 @@ packages:
     resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==}
     engines: {node: '>=18'}
 
-  '@stylistic/eslint-plugin@2.9.0':
-    resolution: {integrity: sha512-OrDyFAYjBT61122MIY1a3SfEgy3YCMgt2vL4eoPmvTwDBwyQhAXurxNQznlRD/jESNfYWfID8Ej+31LljvF7Xg==}
+  '@stylistic/eslint-plugin@2.10.1':
+    resolution: {integrity: sha512-U+4yzNXElTf9q0kEfnloI9XbOyD4cnEQCxjUI94q0+W++0GAEQvJ/slwEj9lwjDHfGADRSr+Tco/z0XJvmDfCQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: '>=8.40.0'
@@ -2147,12 +2269,18 @@ packages:
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
+  '@types/dompurify@3.0.5':
+    resolution: {integrity: sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==}
+
   '@types/estree-jsx@1.0.5':
     resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
 
   '@types/estree@1.0.6':
     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
+  '@types/fs-extra@11.0.4':
+    resolution: {integrity: sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==}
+
   '@types/fs-extra@9.0.13':
     resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==}
 
@@ -2168,9 +2296,15 @@ packages:
   '@types/json-stable-stringify@1.0.36':
     resolution: {integrity: sha512-b7bq23s4fgBB76n34m2b3RBf6M369B0Z9uRR8aHTMd8kZISRkmDEpPD8hhpYvDFzr3bJCPES96cm3Q6qRNDbQw==}
 
+  '@types/json-stable-stringify@1.1.0':
+    resolution: {integrity: sha512-ESTsHWB72QQq+pjUFIbEz9uSCZppD31YrVkbt2rnUciTYEvcwN6uZIhX5JZeBHqRlFJ41x/7MewCs7E2Qux6Cg==}
+
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
+  '@types/jsonfile@6.1.4':
+    resolution: {integrity: sha512-D5qGUYwjvnNNextdU59/+fI+spnwtTFmyQP0h+PfIOSkNfpU6AOICUOkm4i0OnSk+NyjdPJrxCDro0sJsWlRpQ==}
+
   '@types/linkify-it@5.0.0':
     resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
 
@@ -2201,6 +2335,9 @@ packages:
   '@types/node@20.16.11':
     resolution: {integrity: sha512-y+cTCACu92FyA5fgQSAI8A1H429g7aSK2HsO7K4XYUWc4dY5IUz55JSDIYT6/VsOLfGy8vmvQYC2hfb0iF16Uw==}
 
+  '@types/node@22.9.0':
+    resolution: {integrity: sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==}
+
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
 
@@ -2213,12 +2350,21 @@ packages:
   '@types/semver@7.5.8':
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@types/unist@2.0.11':
     resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
 
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
+  '@types/web-bluetooth@0.0.16':
+    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
+
+  '@types/web-bluetooth@0.0.20':
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+
   '@typescript-eslint/eslint-plugin@6.21.0':
     resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -2241,8 +2387,8 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/eslint-plugin@8.9.0':
-    resolution: {integrity: sha512-Y1n621OCy4m7/vTXNlCbMVp87zSd7NH0L9cXD8aIpOaNlzeWxIK4+Q19A68gSmTNRZn92UjocVUWDthGxtqHFg==}
+  '@typescript-eslint/eslint-plugin@8.14.0':
+    resolution: {integrity: sha512-tqp8H7UWFaZj0yNO6bycd5YjMwxa6wIHOLZvWPkidwbgLCsBMetQoGj7DPuAlWa2yGO3H48xmPwjhsSPPCGU5w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
@@ -2272,8 +2418,8 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/parser@8.9.0':
-    resolution: {integrity: sha512-U+BLn2rqTTHnc4FL3FJjxaXptTxmf9sNftJK62XLz4+GxG3hLHm/SUNaaXP5Y4uTiuYoL5YLy4JBCJe3+t8awQ==}
+  '@typescript-eslint/parser@8.14.0':
+    resolution: {integrity: sha512-2p82Yn9juUJq0XynBXtFCyrBDb6/dJombnz6vbo6mgQEtWHfvHbQuEa9kAOVIt1c9YFwi7H6WxtPj1kg+80+RA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -2290,8 +2436,8 @@ packages:
     resolution: {integrity: sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
-  '@typescript-eslint/scope-manager@8.9.0':
-    resolution: {integrity: sha512-bZu9bUud9ym1cabmOYH9S6TnbWRzpklVmwqICeOulTCZ9ue2/pczWzQvt/cGj2r2o1RdKoZbuEMalJJSYw3pHQ==}
+  '@typescript-eslint/scope-manager@8.14.0':
+    resolution: {integrity: sha512-aBbBrnW9ARIDn92Zbo7rguLnqQ/pOrUguVpbUwzOhkFg2npFDwTgPGqFqE0H5feXcOoJOfX3SxlJaKEVtq54dw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@typescript-eslint/type-utils@6.21.0':
@@ -2314,8 +2460,8 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/type-utils@8.9.0':
-    resolution: {integrity: sha512-JD+/pCqlKqAk5961vxCluK+clkppHY07IbV3vett97KOV+8C6l+CPEPwpUuiMwgbOz/qrN3Ke4zzjqbT+ls+1Q==}
+  '@typescript-eslint/type-utils@8.14.0':
+    resolution: {integrity: sha512-Xcz9qOtZuGusVOH5Uk07NGs39wrKkf3AxlkK79RBK6aJC1l03CobXjJbwBPSidetAOV+5rEVuiT1VSBUOAsanQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '*'
@@ -2331,8 +2477,8 @@ packages:
     resolution: {integrity: sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
-  '@typescript-eslint/types@8.9.0':
-    resolution: {integrity: sha512-SjgkvdYyt1FAPhU9c6FiYCXrldwYYlIQLkuc+LfAhCna6ggp96ACncdtlbn8FmnG72tUkXclrDExOpEYf1nfJQ==}
+  '@typescript-eslint/types@8.14.0':
+    resolution: {integrity: sha512-yjeB9fnO/opvLJFAsPNYlKPnEM8+z4og09Pk504dkqonT02AyL5Z9SSqlE0XqezS93v6CXn49VHvB2G7XSsl0g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@typescript-eslint/typescript-estree@6.21.0':
@@ -2353,8 +2499,8 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/typescript-estree@8.9.0':
-    resolution: {integrity: sha512-9iJYTgKLDG6+iqegehc5+EqE6sqaee7kb8vWpmHZ86EqwDjmlqNNHeqDVqb9duh+BY6WCNHfIGvuVU3Tf9Db0g==}
+  '@typescript-eslint/typescript-estree@8.14.0':
+    resolution: {integrity: sha512-OPXPLYKGZi9XS/49rdaCbR5j/S14HazviBlUQFvSKz3npr3NikF+mrgK7CFVur6XEt95DZp/cmke9d5i3vtVnQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '*'
@@ -2374,8 +2520,8 @@ packages:
     peerDependencies:
       eslint: ^8.56.0
 
-  '@typescript-eslint/utils@8.9.0':
-    resolution: {integrity: sha512-PKgMmaSo/Yg/F7kIZvrgrWa1+Vwn036CdNUvYFEkYbPwOH4i8xvkaRlu148W3vtheWK9ckKRIz7PBP5oUlkrvQ==}
+  '@typescript-eslint/utils@8.14.0':
+    resolution: {integrity: sha512-OGqj6uB8THhrHj0Fk27DcHPojW7zKwKkPmHXHvQ58pLYp4hy8CSUdTKykKeh+5vFqTTVmjz0zCOOPKRovdsgHA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -2388,8 +2534,8 @@ packages:
     resolution: {integrity: sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
-  '@typescript-eslint/visitor-keys@8.9.0':
-    resolution: {integrity: sha512-Ht4y38ubk4L5/U8xKUBfKNYGmvKvA1CANoxiTRMM+tOLk3lbF3DvzZCxJCRSE+2GdCMSh6zq9VZJc3asc1XuAA==}
+  '@typescript-eslint/visitor-keys@8.14.0':
+    resolution: {integrity: sha512-vG0XZo8AdTH9OE6VFRwAZldNc7qtJ/6NLGWak+BtENuEUXGZgFpihILPiBvKXvJ2nFu27XNGC6rKiwuaoMbYzQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@ungap/structured-clone@1.2.0':
@@ -2598,6 +2744,24 @@ packages:
   '@vue/tsconfig@0.5.1':
     resolution: {integrity: sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==}
 
+  '@vueuse/core@11.2.0':
+    resolution: {integrity: sha512-JIUwRcOqOWzcdu1dGlfW04kaJhW3EXnnjJJfLTtddJanymTL7lF1C0+dVVZ/siLfc73mWn+cGP1PE1PKPruRSA==}
+
+  '@vueuse/core@9.13.0':
+    resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
+
+  '@vueuse/metadata@11.2.0':
+    resolution: {integrity: sha512-L0ZmtRmNx+ZW95DmrgD6vn484gSpVeRbgpWevFKXwqqQxW9hnSi2Ppuh2BzMjnbv4aJRiIw8tQatXT9uOB23dQ==}
+
+  '@vueuse/metadata@9.13.0':
+    resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
+
+  '@vueuse/shared@11.2.0':
+    resolution: {integrity: sha512-VxFjie0EanOudYSgMErxXfq6fo8vhr5ICI+BuE3I9FnX7ePllEsVrRQ7O6Q1TLgApeLuPKcHQxAXpP+KnlrJsg==}
+
+  '@vueuse/shared@9.13.0':
+    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
+
   '@yr/monotone-cubic-spline@1.0.3':
     resolution: {integrity: sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==}
 
@@ -2608,6 +2772,9 @@ packages:
     resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
     engines: {node: '>=6.5'}
 
+  ace-builds@1.36.5:
+    resolution: {integrity: sha512-mZ5KVanRT6nLRDLqtG/1YQQLX/gZVC/v526cm1Ru/MTSlrbweSmqv2ZT0d2GaHpJq035MwCMIrj+LgDAUnDXrg==}
+
   acorn-import-attributes@1.9.5:
     resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
     peerDependencies:
@@ -2628,6 +2795,11 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  acorn@8.14.0:
+    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
   agent-base@6.0.2:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
@@ -2677,6 +2849,11 @@ packages:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
 
+  ansi-to-html@0.7.2:
+    resolution: {integrity: sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g==}
+    engines: {node: '>=8.0.0'}
+    hasBin: true
+
   any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
 
@@ -2869,6 +3046,11 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
+  browserslist@4.24.2:
+    resolution: {integrity: sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
   buffer-crc32@1.0.0:
     resolution: {integrity: sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==}
     engines: {node: '>=8.0.0'}
@@ -2901,6 +3083,14 @@ packages:
       magicast:
         optional: true
 
+  c12@2.0.1:
+    resolution: {integrity: sha512-Z4JgsKXHG37C6PYUtIxCfLJZvo6FyhHJoClwwb9ftUkLpPSkuYqn6Tr+vnaN8hymm0kIbcg6Ey3kv/Q71k5w/A==}
+    peerDependencies:
+      magicast: ^0.3.5
+    peerDependenciesMeta:
+      magicast:
+        optional: true
+
   cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
@@ -2930,6 +3120,9 @@ packages:
   caniuse-lite@1.0.30001668:
     resolution: {integrity: sha512-nWLrdxqCdblixUO+27JtGJJE/txpJlyUy5YN1u53wLZkP0emYCo5zgS6QYft7VUYR42LGgi/S5hdLZTrnyIddw==}
 
+  caniuse-lite@1.0.30001680:
+    resolution: {integrity: sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==}
+
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
@@ -2980,6 +3173,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==}
 
@@ -3055,6 +3252,10 @@ packages:
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
+  commander@12.1.0:
+    resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
+    engines: {node: '>=18'}
+
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
@@ -3117,8 +3318,8 @@ packages:
     resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
     engines: {node: '>=12.13'}
 
-  core-js-compat@3.38.1:
-    resolution: {integrity: sha512-JRH6gfXxGmrzF3tZ57lFx97YARxCXPaMzPo6jELZhv88pBH5VXpQ+y0znKGlFnzuaihqhLbefxSJxWJMPtfDzw==}
+  core-js-compat@3.39.0:
+    resolution: {integrity: sha512-VgEUx3VwlExr5no0tXlBt+silBvhTryPwCXRI2Id1PN8WTKu7MreethvddqOubrYxkFdv/RnYrqlv1sFNAUelw==}
 
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
@@ -3150,6 +3351,10 @@ packages:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
 
+  cross-spawn@7.0.5:
+    resolution: {integrity: sha512-ZVJrKKYunU38/76t0RMOulHOnUcbU9GbpWKAOZ0mhjr7CX6FVrH+4FrAapSOekrgFQ3f/8gwMEuIft0aKq6Hug==}
+    engines: {node: '>= 8'}
+
   crossws@0.2.4:
     resolution: {integrity: sha512-DAxroI2uSOgUKLz00NX6A8U/8EE3SZHmIND+10jkVSaypvyt57J5JEOxAQOL6lQxyzi/wZbTIwssU1uy69h5Vg==}
     peerDependencies:
@@ -3254,6 +3459,9 @@ packages:
   de-indent@1.0.2:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
 
+  debounce@1.2.1:
+    resolution: {integrity: sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==}
+
   debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -3405,6 +3613,9 @@ packages:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
+  dompurify@3.2.0:
+    resolution: {integrity: sha512-AMdOzK44oFWqHEi0wpOqix/fUNY707OmoeFDnbi3Q5I8uOpy21ufUA5cDJPr0bosxrflOVD/H2DMSvuGKJGfmQ==}
+
   domutils@3.1.0:
     resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
 
@@ -3436,6 +3647,9 @@ packages:
   electron-to-chromium@1.5.38:
     resolution: {integrity: sha512-VbeVexmZ1IFh+5EfrYz1I0HTzHVIlJa112UEWhciPyeOcKJGeTv6N8WnG4wsQB81DGCaVEGhpSb6o6a8WYFXXg==}
 
+  electron-to-chromium@1.5.62:
+    resolution: {integrity: sha512-t8c+zLmJHa9dJy96yBZRXGQYoiCEnHYgFwn1asvSPZSUdVxnB62A4RASd7k41ytG3ErFBA0TpHlKg9D9SQBmLg==}
+
   emmet@2.4.11:
     resolution: {integrity: sha512-23QPJB3moh/U9sT4rQzGgeyyGIrcM+GH5uVYg2C6wZIxAIJq7Ng3QLT79tl8FUwDXhyq9SusfknOrofAKqvgyQ==}
 
@@ -3463,6 +3677,9 @@ packages:
     resolution: {integrity: sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==}
     engines: {node: '>=10.13.0'}
 
+  entities@2.2.0:
+    resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
+
   entities@3.0.1:
     resolution: {integrity: sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==}
     engines: {node: '>=0.12'}
@@ -3480,8 +3697,8 @@ packages:
   errx@0.1.0:
     resolution: {integrity: sha512-fZmsRiDNv07K6s2KkKFTiD2aIvECa7++PKyD5NC32tpRw46qZA3sOz+aM+/V9V0GDHxVTKLziveV4JhzBHDp9Q==}
 
-  es-abstract@1.23.3:
-    resolution: {integrity: sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==}
+  es-abstract@1.23.5:
+    resolution: {integrity: sha512-vlmniQ0WNPwXqA0BnmwV3Ng7HxiGlh6r5U6JcTMNx8OilcAGqVJBHJcPjqOMaczU9fRuRK5Px2BdVyPRnKMMVQ==}
     engines: {node: '>= 0.4'}
 
   es-define-property@1.0.0:
@@ -3570,8 +3787,8 @@ packages:
       eslint-plugin-n: '^15.0.0 || ^16.0.0 '
       eslint-plugin-promise: ^6.0.0
 
-  eslint-config-turbo@2.1.3:
-    resolution: {integrity: sha512-smdkhd01V/e/I4EjJxaZA1kxZ1vdFCHpyryolxLtRBP0bZTrHDYh1H6NAyZ3Fy1jkhsQzXw+L+6m17ygROvNFw==}
+  eslint-config-turbo@2.3.0:
+    resolution: {integrity: sha512-Nm9WZgNoUIJw4bpYQugGCDjzYy1TlUD4sQ/nGblL+HdNqJWCj5NqXbJ1k+TBfYedhr65dlGoAFPYUOfjUOmKVg==}
     peerDependencies:
       eslint: '>6.6.0'
 
@@ -3627,8 +3844,8 @@ packages:
     peerDependencies:
       eslint: '>=4.19.1'
 
-  eslint-plugin-import-x@4.3.1:
-    resolution: {integrity: sha512-5TriWkXulDl486XnYYRgsL+VQoS/7mhN/2ci02iLCuL7gdhbiWxnsuL/NTcaKY9fpMgsMFjWZBtIGW7pb+RX0g==}
+  eslint-plugin-import-x@4.4.2:
+    resolution: {integrity: sha512-mDRXPSLQ0UQZQw91QdG4/qZT6hgeW2MJTczAbgPseUZuPEtIjjdPOolXroRkulnOn3fzj6gNgvk+wchMJiHElg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -3643,8 +3860,8 @@ packages:
       '@typescript-eslint/parser':
         optional: true
 
-  eslint-plugin-jsdoc@50.4.1:
-    resolution: {integrity: sha512-OXIq+JJQPCLAKL473/esioFOwbXyRE5MAQ4HbZjcp3e+K3zdxt2uDpGs3FR+WezUXNStzEtTfgx15T+JFrVwBA==}
+  eslint-plugin-jsdoc@50.5.0:
+    resolution: {integrity: sha512-xTkshfZrUbiSHXBwZ/9d5ulZ2OcHXxSvm/NPo494H/hadLRJwOq5PMV0EUpMqsb9V+kQo+9BAgi6Z7aJtdBp2A==}
     engines: {node: '>=18'}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
@@ -3681,14 +3898,14 @@ packages:
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
 
-  eslint-plugin-regexp@2.6.0:
-    resolution: {integrity: sha512-FCL851+kislsTEQEMioAlpDuK5+E5vs0hi1bF8cFlPlHcEjeRhuAzEsGikXRreE+0j4WhW2uO54MqTjXtYOi3A==}
+  eslint-plugin-regexp@2.7.0:
+    resolution: {integrity: sha512-U8oZI77SBtH8U3ulZ05iu0qEzIizyEDXd+BWHvyVxTOjGwcDcvy/kEpgFG4DYca2ByRLiVPFZ2GeH7j1pdvZTA==}
     engines: {node: ^18 || >=20}
     peerDependencies:
       eslint: '>=8.44.0'
 
-  eslint-plugin-turbo@2.1.3:
-    resolution: {integrity: sha512-I9vPArzyOSYa6bm0iMCgD07MgdExc1VK2wGuVz21g4BUdj83w7mDKyCXR2rwOtCEW+wemFwgxanJ81imQZijNg==}
+  eslint-plugin-turbo@2.3.0:
+    resolution: {integrity: sha512-2iVUoIhrjp6kI8p0J4NewKPpXaKrHvL4K4eRnNXbqZvP/7xsm4Of+33B3b7m7OsS0UgX8HHOjlB9bEjigKMkMA==}
     peerDependencies:
       eslint: '>6.6.0'
 
@@ -3710,8 +3927,8 @@ packages:
     peerDependencies:
       eslint: '>=8.56.0'
 
-  eslint-plugin-vue@9.29.0:
-    resolution: {integrity: sha512-hamyjrBhNH6Li6R1h1VF9KHfshJlKgKEg3ARbGTn72CMNDSMhWbgC7NdkRDEh25AFW+4SDATzyNM+3gWuZii8g==}
+  eslint-plugin-vue@9.31.0:
+    resolution: {integrity: sha512-aYMUCgivhz1o4tLkRHj5oq9YgYPM4/EJc0M7TAKRLCUA5OYxRLAhYEVD2nLtTwLyixEFI+/QXSvKU9ESZFgqjQ==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
@@ -3720,8 +3937,8 @@ packages:
     resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  eslint-scope@8.1.0:
-    resolution: {integrity: sha512-14dSvlhaVhKKsa9Fx1l8A17s7ah7Ef7wCakJ10LYk6+GYmP9yDti2oq2SEwcyndt6knfcZyhyxwY3i9yL78EQw==}
+  eslint-scope@8.2.0:
+    resolution: {integrity: sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   eslint-utils@2.1.0:
@@ -3746,8 +3963,8 @@ packages:
     resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  eslint-visitor-keys@4.1.0:
-    resolution: {integrity: sha512-Q7lok0mqMUSf5a/AdAZkA5a/gHcO6snwQClVNNvFKCAVlxXucdU8pKydU5ZVZjBx5xr37vGbFFWtLQYreLzrZg==}
+  eslint-visitor-keys@4.2.0:
+    resolution: {integrity: sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   eslint@8.57.1:
@@ -3756,8 +3973,8 @@ packages:
     deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
     hasBin: true
 
-  eslint@9.12.0:
-    resolution: {integrity: sha512-UVIOlTEWxwIopRL1wgSQYdnVDcEvs2wyaO6DGo5mXqe3r16IoCNWkR29iHhyaP4cICWjbgbmFUGAhh0GJRuGZw==}
+  eslint@9.15.0:
+    resolution: {integrity: sha512-7CrWySmIibCgT1Os28lUU6upBshZ+GxybLOrmRzi08kS8MBuO8QA7pXEgYgY5W8vK3e74xv0lpjo9DbaGU9Rkw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
     peerDependencies:
@@ -3766,8 +3983,8 @@ packages:
       jiti:
         optional: true
 
-  espree@10.2.0:
-    resolution: {integrity: sha512-upbkBJbckcCNBDBDXEbuhjbP68n+scUd3k/U2EkyM9nw+I/jPiL4cLF/Al06CF96wRltFda16sxDFrxsI1v0/g==}
+  espree@10.3.0:
+    resolution: {integrity: sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   espree@9.6.1:
@@ -4113,8 +4330,8 @@ packages:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
 
-  globals@15.11.0:
-    resolution: {integrity: sha512-yeyNSjdbyVaWurlwCpcA6XNBrHTMIeDdj0/hnvX/OLJ9ekOXYbLsLinH/MucQyGvNnXhidTdNhTtJaffL2sMfw==}
+  globals@15.12.0:
+    resolution: {integrity: sha512-1+gLErljJFhbOVyaetcwJiJ4+eLe45S2E7P5UiZ9xGfeq3ATQf5DOv9G7MH3gGbKQLkzmNh2DxfZwLdw+j6oTQ==}
     engines: {node: '>=18'}
 
   globalthis@1.0.4:
@@ -4311,6 +4528,10 @@ packages:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
 
+  ignore@6.0.2:
+    resolution: {integrity: sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==}
+    engines: {node: '>= 4'}
+
   image-meta@0.2.1:
     resolution: {integrity: sha512-K6acvFaelNxx8wc2VjbIzXKDVB0Khs0QT35U6NkGfTdCmjLNcO2945m7RFNR9/RPVFm48hq7QPzK8uGH18HCGw==}
 
@@ -4578,6 +4799,10 @@ packages:
     resolution: {integrity: sha512-EX4oNDwcXSivPrw2qKH2LB5PoFxEvgtv2JgwW0bU858HoLQ+kutSvjLMUqBd0PeJYEinLWhoI9Ol0eYMqj/wNQ==}
     hasBin: true
 
+  jiti@2.4.0:
+    resolution: {integrity: sha512-H5UpaUI+aHOqZXlYOaFP/8AzKsg+guWu+Pr3Y8i7+Y3zr1aXAvCvTAQ1RxSc6oVD8R8c7brgNtTVP91E7upH/g==}
+    hasBin: true
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -5071,6 +5296,9 @@ packages:
   mlly@1.7.2:
     resolution: {integrity: sha512-tN3dvVHYVz4DhSXinXIk7u9syPYaJvio118uomkovAtWBT+RdbP6Lfh/5Lvo519YMmwBafwlh20IPTXIStscpA==}
 
+  mlly@1.7.3:
+    resolution: {integrity: sha512-xUsx5n/mN0uQf4V548PKQ+YShA4/IW0KI1dZhrNrPCLG+xizETbHTkOa1f8/xut9JRPp8kQuMnz0oqwkTiLo/A==}
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -5222,8 +5450,8 @@ packages:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
 
-  object-inspect@1.13.2:
-    resolution: {integrity: sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==}
+  object-inspect@1.13.3:
+    resolution: {integrity: sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==}
     engines: {node: '>= 0.4'}
 
   object-keys@1.1.1:
@@ -5447,6 +5675,18 @@ packages:
       typescript:
         optional: true
 
+  pinia@2.2.6:
+    resolution: {integrity: sha512-vIsR8JkDN5Ga2vAxqOE2cJj4VtsHnzpR1Fz30kClxlh0yCHfec6uoMeM3e/ddqmwFUejK3NlrcQa/shnpyT4hA==}
+    peerDependencies:
+      '@vue/composition-api': ^1.4.0
+      typescript: '>=4.4.4'
+      vue: ^2.6.14 || ^3.5.11
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      typescript:
+        optional: true
+
   pirates@4.0.6:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
@@ -5961,6 +6201,9 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
+  resize-observer-polyfill@1.5.1:
+    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
+
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -6238,6 +6481,9 @@ packages:
   std-env@3.7.0:
     resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==}
 
+  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'}
@@ -6485,8 +6731,8 @@ packages:
   trough@2.2.0:
     resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
 
-  ts-api-utils@1.3.0:
-    resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
+  ts-api-utils@1.4.0:
+    resolution: {integrity: sha512-032cPxaEKwM+GT3vA5JXNzIaizx388rhsSW79vGRNGXfRRAdEAn2mvk36PvK5HnOchyWZ7afLEXqYCvPCrzuzQ==}
     engines: {node: '>=16'}
     peerDependencies:
       typescript: '>=4.2.0'
@@ -6510,41 +6756,44 @@ packages:
   tslib@2.8.0:
     resolution: {integrity: sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==}
 
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
   tunnel-agent@0.6.0:
     resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
 
-  turbo-darwin-64@2.2.1:
-    resolution: {integrity: sha512-jltMdSQ+7rQDVaorjW729PCw6fwAn1MgZSdoa0Gil7GZCOF3SnR/ok0uJw6G5mdm6F5XM8ZTlz+mdGzBLuBRaA==}
+  turbo-darwin-64@2.2.3:
+    resolution: {integrity: sha512-Rcm10CuMKQGcdIBS3R/9PMeuYnv6beYIHqfZFeKWVYEWH69sauj4INs83zKMTUiZJ3/hWGZ4jet9AOwhsssLyg==}
     cpu: [x64]
     os: [darwin]
 
-  turbo-darwin-arm64@2.2.1:
-    resolution: {integrity: sha512-RHW0c1NonsJXXlutlZeunmhLanf0/WbeizFfYgWuTEaJE4MbbhyD/RG4Fm/7iob5kxQ4Es2TzfDPqyMqpIO0GA==}
+  turbo-darwin-arm64@2.2.3:
+    resolution: {integrity: sha512-+EIMHkuLFqUdJYsA3roj66t9+9IciCajgj+DVek+QezEdOJKcRxlvDOS2BUaeN8kEzVSsNiAGnoysFWYw4K0HA==}
     cpu: [arm64]
     os: [darwin]
 
-  turbo-linux-64@2.2.1:
-    resolution: {integrity: sha512-RasrjV+i2B90hoR8r6B2Btf2/ebNT5MJbhkpY0G1EN06E1IkjCKfAXj/1Dwmjy9+Zo0NC2r69L3HxRrtpar8jQ==}
+  turbo-linux-64@2.2.3:
+    resolution: {integrity: sha512-UBhJCYnqtaeOBQLmLo8BAisWbc9v9daL9G8upLR+XGj6vuN/Nz6qUAhverN4Pyej1g4Nt1BhROnj6GLOPYyqxQ==}
     cpu: [x64]
     os: [linux]
 
-  turbo-linux-arm64@2.2.1:
-    resolution: {integrity: sha512-LNkUUJuu1gNkhlo7Ky/zilXEiajLoGlWLiKT1XV5neEf+x1s+aU9Hzd/+HhSVMiyI8l7z6zLbrM1a6+v4co/SQ==}
+  turbo-linux-arm64@2.2.3:
+    resolution: {integrity: sha512-hJYT9dN06XCQ3jBka/EWvvAETnHRs3xuO/rb5bESmDfG+d9yQjeTMlhRXKrr4eyIMt6cLDt1LBfyi+6CQ+VAwQ==}
     cpu: [arm64]
     os: [linux]
 
-  turbo-windows-64@2.2.1:
-    resolution: {integrity: sha512-Mn5tlFrLzlQ6tW6wTWNlyT1osXuDUg0VT1VAjRpmRXlK2Zi3oKVVG0rs0nkkq4rmuheryD1xyuGPN9nFKbAn/A==}
+  turbo-windows-64@2.2.3:
+    resolution: {integrity: sha512-NPrjacrZypMBF31b4HE4ROg4P3nhMBPHKS5WTpMwf7wydZ8uvdEHpESVNMOtqhlp857zbnKYgP+yJF30H3N2dQ==}
     cpu: [x64]
     os: [win32]
 
-  turbo-windows-arm64@2.2.1:
-    resolution: {integrity: sha512-bvYOJ3SMN00yiem+uAqwRMbUMau/KiMzJYxnD0YkFo6INc08z8gZi5g0GLZAR7g/L3JegktX3UQW2cJvryjvLg==}
+  turbo-windows-arm64@2.2.3:
+    resolution: {integrity: sha512-fnNrYBCqn6zgKPKLHu4sOkihBI/+0oYFr075duRxqUZ+1aLWTAGfHZLgjVeLh3zR37CVzuerGIPWAEkNhkWEIw==}
     cpu: [arm64]
     os: [win32]
 
-  turbo@2.2.1:
-    resolution: {integrity: sha512-clZFkh6U6NpsLKBVZYRjlZjRTfju1Z5STqvFVaOGu5443uM75alJe1nCYH9pQ9YJoiOvXAqA2rDHWN5kLS9JMg==}
+  turbo@2.2.3:
+    resolution: {integrity: sha512-5lDvSqIxCYJ/BAd6rQGK/AzFRhBkbu4JHVMLmGh/hCb7U3CqSnr5Tjwfy9vc+/5wG2DJ6wttgAaA7MoCgvBKZQ==}
     hasBin: true
 
   type-check@0.4.0:
@@ -6649,6 +6898,9 @@ packages:
   unimport@3.13.1:
     resolution: {integrity: sha512-nNrVzcs93yrZQOW77qnyOVHtb68LegvhYFwxFMfuuWScmwQmyVCG/NBuN8tYsaGzgQUVYv34E/af+Cc9u4og4A==}
 
+  unimport@3.13.2:
+    resolution: {integrity: sha512-VKAepeIb6BWLtBl4tmyHY1/7rJgz3ynmZrWf8cU1a+v5Uv/k1gyyAEeGBnYcrwy8bxG5sflxEx4a9VQUqOVHUA==}
+
   unist-util-find-after@5.0.0:
     resolution: {integrity: sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==}
 
@@ -6700,6 +6952,10 @@ packages:
       webpack-sources:
         optional: true
 
+  unplugin@1.16.0:
+    resolution: {integrity: sha512-5liCNPuJW8dqh3+DM6uNM2EI3MLLpCKp/KY+9pB5M2S2SR2qvvDHhKgBOaTWEbZTAws3CXfB0rKTIolWKL05VQ==}
+    engines: {node: '>=14.0.0'}
+
   unstorage@1.12.0:
     resolution: {integrity: sha512-ARZYTXiC+e8z3lRM7/qY9oyaOkaozCeNd2xoz7sYK9fv7OLGhVsf+BZbmASqiK/HTZ7T6eAlnVq9JynZppyk3w==}
     peerDependencies:
@@ -7028,6 +7284,10 @@ packages:
     resolution: {integrity: sha512-uupKdINgz7j83lQToCL7KkgQQxvG43el++hsR39YT9pCe1DwzUGmKzPxjVP6rqskXed5P6DtUASYAlCliW740Q==}
     engines: {node: '>= 14.18.1', npm: '>= 6.14.15'}
 
+  vue-multiselect@3.0.0-alpha.2:
+    resolution: {integrity: sha512-Xp9fGJECns45v+v8jXbCIsAkCybYkEg0lNwr7Z6HDUSMyx2TEIK2giipPE+qXiShEc1Ipn+ZtttH2iq9hwXP4Q==}
+    engines: {node: '>= 4.0.0', npm: '>= 3.0.0'}
+
   vue-observe-visibility@2.0.0-alpha.1:
     resolution: {integrity: sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==}
     peerDependencies:
@@ -7059,11 +7319,22 @@ packages:
     peerDependencies:
       typescript: '>=5.0.0'
 
+  vue-typed-virtual-list@1.0.10:
+    resolution: {integrity: sha512-StYs56ypKBY4Lu7Cz3Rnyywajxi3NgCxCcWuMJB2wfJ5qvicPw6YPV3sFUy1d1Cjm+AFCB0cZI7ymvgx8IvPIg==}
+    peerDependencies:
+      vue: ^3.2.45
+
   vue-virtual-scroller@2.0.0-beta.8:
     resolution: {integrity: sha512-b8/f5NQ5nIEBRTNi6GcPItE4s7kxNHw2AIHLtDp+2QvqdTjVN0FgONwX9cr53jWRgnu+HRLPaWDOR2JPI5MTfQ==}
     peerDependencies:
       vue: ^3.2.0
 
+  vue3-ace-editor@2.2.4:
+    resolution: {integrity: sha512-FZkEyfpbH068BwjhMyNROxfEI8135Sc+x8ouxkMdCNkuj/Tuw83VP/gStFQqZHqljyX9/VfMTCdTqtOnJZGN8g==}
+    peerDependencies:
+      ace-builds: '*'
+      vue: ^3
+
   vue3-apexcharts@1.7.0:
     resolution: {integrity: sha512-BmWoS8+x5XLCtk2ml7rLVO+QU+fjgQUUCjUXSFW9cNQpCMa5Z0eRPvZjvYLt5aDKNREtuZoidlG9WRjZ/Af7lA==}
     peerDependencies:
@@ -7312,12 +7583,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/mdx@3.1.8(astro@4.16.6(@types/node@20.16.11)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3))':
+  '@astrojs/mdx@3.1.8(astro@4.16.6(@types/node@22.9.0)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3))':
     dependencies:
       '@astrojs/markdown-remark': 5.3.0
       '@mdx-js/mdx': 3.1.0(acorn@8.13.0)
       acorn: 8.13.0
-      astro: 4.16.6(@types/node@20.16.11)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3)
+      astro: 4.16.6(@types/node@22.9.0)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3)
       es-module-lexer: 1.5.4
       estree-util-visit: 2.0.0
       gray-matter: 4.0.3
@@ -7342,15 +7613,15 @@ snapshots:
       stream-replace-string: 2.0.0
       zod: 3.23.8
 
-  '@astrojs/starlight@0.26.4(astro@4.16.6(@types/node@20.16.11)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3))':
+  '@astrojs/starlight@0.26.4(astro@4.16.6(@types/node@22.9.0)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3))':
     dependencies:
-      '@astrojs/mdx': 3.1.8(astro@4.16.6(@types/node@20.16.11)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3))
+      '@astrojs/mdx': 3.1.8(astro@4.16.6(@types/node@22.9.0)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3))
       '@astrojs/sitemap': 3.2.1
       '@pagefind/default-ui': 1.1.1
       '@types/hast': 3.0.4
       '@types/mdast': 4.0.4
-      astro: 4.16.6(@types/node@20.16.11)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3)
-      astro-expressive-code: 0.35.6(astro@4.16.6(@types/node@20.16.11)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3))
+      astro: 4.16.6(@types/node@22.9.0)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3)
+      astro-expressive-code: 0.35.6(astro@4.16.6(@types/node@22.9.0)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3))
       bcp-47: 2.1.0
       hast-util-from-html: 2.0.3
       hast-util-select: 6.0.3
@@ -7390,6 +7661,12 @@ snapshots:
       '@babel/highlight': 7.25.7
       picocolors: 1.1.1
 
+  '@babel/code-frame@7.26.2':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.25.9
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
   '@babel/compat-data@7.25.8': {}
 
   '@babel/core@7.25.8':
@@ -7463,7 +7740,7 @@ snapshots:
       '@babel/core': 7.25.8
       '@babel/helper-module-imports': 7.25.7
       '@babel/helper-simple-access': 7.25.7
-      '@babel/helper-validator-identifier': 7.25.7
+      '@babel/helper-validator-identifier': 7.25.9
       '@babel/traverse': 7.25.7
     transitivePeerDependencies:
       - supports-color
@@ -7501,6 +7778,8 @@ snapshots:
 
   '@babel/helper-validator-identifier@7.25.7': {}
 
+  '@babel/helper-validator-identifier@7.25.9': {}
+
   '@babel/helper-validator-option@7.25.7': {}
 
   '@babel/helpers@7.25.7':
@@ -7510,7 +7789,7 @@ snapshots:
 
   '@babel/highlight@7.25.7':
     dependencies:
-      '@babel/helper-validator-identifier': 7.25.7
+      '@babel/helper-validator-identifier': 7.25.9
       chalk: 2.4.2
       js-tokens: 4.0.0
       picocolors: 1.1.1
@@ -7719,7 +7998,7 @@ snapshots:
 
   '@emnapi/runtime@1.3.1':
     dependencies:
-      tslib: 2.8.0
+      tslib: 2.8.1
     optional: true
 
   '@es-joy/jsdoccomment@0.49.0':
@@ -7943,18 +8222,20 @@ snapshots:
       eslint: 8.57.1
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/eslint-utils@4.4.0(eslint@9.12.0(jiti@2.3.3))':
+  '@eslint-community/eslint-utils@4.4.1(eslint@9.15.0(jiti@2.4.0))':
     dependencies:
-      eslint: 9.12.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.11.1': {}
 
-  '@eslint/compat@1.2.0(eslint@9.12.0(jiti@2.3.3))':
-    optionalDependencies:
-      eslint: 9.12.0(jiti@2.3.3)
+  '@eslint-community/regexpp@4.12.1': {}
 
-  '@eslint/config-array@0.18.0':
+  '@eslint/compat@1.2.3(eslint@9.15.0(jiti@2.4.0))':
+    optionalDependencies:
+      eslint: 9.15.0(jiti@2.4.0)
+
+  '@eslint/config-array@0.19.0':
     dependencies:
       '@eslint/object-schema': 2.1.4
       debug: 4.3.7
@@ -7962,7 +8243,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/core@0.6.0': {}
+  '@eslint/core@0.9.0': {}
 
   '@eslint/eslintrc@2.1.4':
     dependencies:
@@ -7978,11 +8259,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/eslintrc@3.1.0':
+  '@eslint/eslintrc@3.2.0':
     dependencies:
       ajv: 6.12.6
       debug: 4.3.7
-      espree: 10.2.0
+      espree: 10.3.0
       globals: 14.0.0
       ignore: 5.3.2
       import-fresh: 3.3.0
@@ -7994,11 +8275,11 @@ snapshots:
 
   '@eslint/js@8.57.1': {}
 
-  '@eslint/js@9.12.0': {}
+  '@eslint/js@9.15.0': {}
 
   '@eslint/object-schema@2.1.4': {}
 
-  '@eslint/plugin-kit@0.2.0':
+  '@eslint/plugin-kit@0.2.3':
     dependencies:
       levn: 0.4.1
 
@@ -8060,7 +8341,30 @@ snapshots:
       fs-extra: 10.1.0
       json-stable-stringify: 1.1.1
       loud-rejection: 2.2.0
-      tslib: 2.8.0
+      tslib: 2.8.1
+      typescript: 5.6.3
+    optionalDependencies:
+      '@vue/compiler-core': 3.5.12
+      vue: 3.5.12(typescript@5.6.3)
+    transitivePeerDependencies:
+      - ts-jest
+
+  '@formatjs/cli-lib@6.6.3(@vue/compiler-core@3.5.12)(vue@3.5.12(typescript@5.6.3))':
+    dependencies:
+      '@formatjs/icu-messageformat-parser': 2.9.3
+      '@formatjs/icu-skeleton-parser': 1.8.7
+      '@formatjs/ts-transformer': 3.13.22
+      '@types/estree': 1.0.6
+      '@types/fs-extra': 11.0.4
+      '@types/json-stable-stringify': 1.1.0
+      '@types/node': 22.9.0
+      chalk: 4.1.2
+      commander: 12.1.0
+      fast-glob: 3.3.2
+      fs-extra: 11.2.0
+      json-stable-stringify: 1.1.1
+      loud-rejection: 2.2.0
+      tslib: 2.8.1
       typescript: 5.6.3
     optionalDependencies:
       '@vue/compiler-core': 3.5.12
@@ -8084,21 +8388,42 @@ snapshots:
       '@formatjs/intl-localematcher': 0.5.5
       tslib: 2.8.0
 
+  '@formatjs/ecma402-abstract@2.2.3':
+    dependencies:
+      '@formatjs/fast-memoize': 2.2.3
+      '@formatjs/intl-localematcher': 0.5.7
+      tslib: 2.8.1
+
   '@formatjs/fast-memoize@2.2.1':
     dependencies:
       tslib: 2.8.0
 
+  '@formatjs/fast-memoize@2.2.3':
+    dependencies:
+      tslib: 2.8.1
+
   '@formatjs/icu-messageformat-parser@2.7.10':
     dependencies:
       '@formatjs/ecma402-abstract': 2.2.0
       '@formatjs/icu-skeleton-parser': 1.8.4
       tslib: 2.8.0
 
+  '@formatjs/icu-messageformat-parser@2.9.3':
+    dependencies:
+      '@formatjs/ecma402-abstract': 2.2.3
+      '@formatjs/icu-skeleton-parser': 1.8.7
+      tslib: 2.8.1
+
   '@formatjs/icu-skeleton-parser@1.8.4':
     dependencies:
       '@formatjs/ecma402-abstract': 2.2.0
       tslib: 2.8.0
 
+  '@formatjs/icu-skeleton-parser@1.8.7':
+    dependencies:
+      '@formatjs/ecma402-abstract': 2.2.3
+      tslib: 2.8.1
+
   '@formatjs/intl-displaynames@6.6.10':
     dependencies:
       '@formatjs/ecma402-abstract': 2.2.0
@@ -8123,6 +8448,10 @@ snapshots:
     dependencies:
       tslib: 2.8.0
 
+  '@formatjs/intl-localematcher@0.5.7':
+    dependencies:
+      tslib: 2.8.1
+
   '@formatjs/intl@2.10.8(typescript@5.6.3)':
     dependencies:
       '@formatjs/ecma402-abstract': 2.2.0
@@ -8142,14 +8471,24 @@ snapshots:
       '@types/node': 18.19.55
       chalk: 4.1.2
       json-stable-stringify: 1.1.1
-      tslib: 2.8.0
+      tslib: 2.8.1
       typescript: 5.6.3
 
-  '@humanfs/core@0.19.0': {}
-
-  '@humanfs/node@0.16.5':
+  '@formatjs/ts-transformer@3.13.22':
     dependencies:
-      '@humanfs/core': 0.19.0
+      '@formatjs/icu-messageformat-parser': 2.9.3
+      '@types/json-stable-stringify': 1.1.0
+      '@types/node': 22.9.0
+      chalk: 4.1.2
+      json-stable-stringify: 1.1.1
+      tslib: 2.8.1
+      typescript: 5.6.3
+
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.6':
+    dependencies:
+      '@humanfs/core': 0.19.1
       '@humanwhocodes/retry': 0.3.1
 
   '@humanwhocodes/config-array@0.13.0':
@@ -8168,6 +8507,8 @@ snapshots:
 
   '@humanwhocodes/retry@0.3.1': {}
 
+  '@humanwhocodes/retry@0.4.1': {}
+
   '@img/sharp-darwin-arm64@0.33.5':
     optionalDependencies:
       '@img/sharp-libvips-darwin-arm64': 1.0.4
@@ -8466,34 +8807,34 @@ snapshots:
       - vue
       - webpack-sources
 
-  '@nuxt/eslint-config@0.5.7(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@nuxt/eslint-config@0.5.7(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
-      '@eslint/js': 9.12.0
-      '@nuxt/eslint-plugin': 0.5.7(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
-      '@stylistic/eslint-plugin': 2.9.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
-      '@typescript-eslint/eslint-plugin': 8.9.0(@typescript-eslint/parser@8.9.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
-      '@typescript-eslint/parser': 8.9.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
-      eslint: 9.12.0(jiti@2.3.3)
-      eslint-config-flat-gitignore: 0.3.0(eslint@9.12.0(jiti@2.3.3))
+      '@eslint/js': 9.15.0
+      '@nuxt/eslint-plugin': 0.5.7(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      '@stylistic/eslint-plugin': 2.10.1(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      '@typescript-eslint/eslint-plugin': 8.14.0(@typescript-eslint/parser@8.14.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      '@typescript-eslint/parser': 8.14.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      eslint: 9.15.0(jiti@2.4.0)
+      eslint-config-flat-gitignore: 0.3.0(eslint@9.15.0(jiti@2.4.0))
       eslint-flat-config-utils: 0.4.0
-      eslint-plugin-import-x: 4.3.1(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
-      eslint-plugin-jsdoc: 50.4.1(eslint@9.12.0(jiti@2.3.3))
-      eslint-plugin-regexp: 2.6.0(eslint@9.12.0(jiti@2.3.3))
-      eslint-plugin-unicorn: 55.0.0(eslint@9.12.0(jiti@2.3.3))
-      eslint-plugin-vue: 9.29.0(eslint@9.12.0(jiti@2.3.3))
-      globals: 15.11.0
+      eslint-plugin-import-x: 4.4.2(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      eslint-plugin-jsdoc: 50.5.0(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-regexp: 2.7.0(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-unicorn: 55.0.0(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-vue: 9.31.0(eslint@9.15.0(jiti@2.4.0))
+      globals: 15.12.0
       local-pkg: 0.5.0
       pathe: 1.1.2
-      vue-eslint-parser: 9.4.3(eslint@9.12.0(jiti@2.3.3))
+      vue-eslint-parser: 9.4.3(eslint@9.15.0(jiti@2.4.0))
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  '@nuxt/eslint-plugin@0.5.7(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@nuxt/eslint-plugin@0.5.7(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
-      '@typescript-eslint/types': 8.9.0
-      '@typescript-eslint/utils': 8.9.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
-      eslint: 9.12.0(jiti@2.3.3)
+      '@typescript-eslint/types': 8.14.0
+      '@typescript-eslint/utils': 8.14.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      eslint: 9.15.0(jiti@2.4.0)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -8526,6 +8867,34 @@ snapshots:
       - supports-color
       - webpack-sources
 
+  '@nuxt/kit@3.14.159(magicast@0.3.5)(rollup@4.24.0)':
+    dependencies:
+      '@nuxt/schema': 3.14.159(magicast@0.3.5)(rollup@4.24.0)
+      c12: 2.0.1(magicast@0.3.5)
+      consola: 3.2.3
+      defu: 6.1.4
+      destr: 2.0.3
+      globby: 14.0.2
+      hash-sum: 2.0.0
+      ignore: 6.0.2
+      jiti: 2.4.0
+      klona: 2.0.6
+      knitwork: 1.1.0
+      mlly: 1.7.3
+      pathe: 1.1.2
+      pkg-types: 1.2.1
+      scule: 1.3.0
+      semver: 7.6.3
+      ufo: 1.5.4
+      unctx: 2.3.1
+      unimport: 3.13.2(rollup@4.24.0)
+      untyped: 1.5.1
+    transitivePeerDependencies:
+      - magicast
+      - rollup
+      - supports-color
+      - webpack-sources
+
   '@nuxt/schema@3.13.2(rollup@4.24.0)':
     dependencies:
       compatx: 0.1.8
@@ -8545,10 +8914,30 @@ snapshots:
       - supports-color
       - webpack-sources
 
+  '@nuxt/schema@3.14.159(magicast@0.3.5)(rollup@4.24.0)':
+    dependencies:
+      c12: 2.0.1(magicast@0.3.5)
+      compatx: 0.1.8
+      consola: 3.2.3
+      defu: 6.1.4
+      hookable: 5.5.3
+      pathe: 1.1.2
+      pkg-types: 1.2.1
+      scule: 1.3.0
+      std-env: 3.8.0
+      ufo: 1.5.4
+      uncrypto: 0.1.3
+      unimport: 3.13.2(rollup@4.24.0)
+      untyped: 1.5.1
+    transitivePeerDependencies:
+      - magicast
+      - rollup
+      - supports-color
+
   '@nuxt/telemetry@2.6.0(magicast@0.3.5)(rollup@4.24.0)':
     dependencies:
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.0)
-      ci-info: 4.0.0
+      ci-info: 4.1.0
       consola: 3.2.3
       create-require: 1.1.1
       defu: 6.1.4
@@ -8630,15 +9019,15 @@ snapshots:
       - vue-tsc
       - webpack-sources
 
-  '@nuxtjs/eslint-config-typescript@12.1.0(eslint-plugin-import-x@4.3.1(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@nuxtjs/eslint-config-typescript@12.1.0(eslint-plugin-import-x@4.4.2(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
-      '@nuxtjs/eslint-config': 12.0.0(@typescript-eslint/parser@6.21.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@9.12.0(jiti@2.3.3))
-      '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
-      '@typescript-eslint/parser': 6.21.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
-      eslint: 9.12.0(jiti@2.3.3)
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@6.21.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint-plugin-import-x@4.3.1(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint-plugin-import@2.31.0)(eslint@9.12.0(jiti@2.3.3))
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.12.0(jiti@2.3.3))
-      eslint-plugin-vue: 9.29.0(eslint@9.12.0(jiti@2.3.3))
+      '@nuxtjs/eslint-config': 12.0.0(@typescript-eslint/parser@6.21.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@9.15.0(jiti@2.4.0))
+      '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      '@typescript-eslint/parser': 6.21.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      eslint: 9.15.0(jiti@2.4.0)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@6.21.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint-plugin-import-x@4.4.2(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint-plugin-import@2.31.0)(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-vue: 9.31.0(eslint@9.15.0(jiti@2.4.0))
     transitivePeerDependencies:
       - eslint-import-resolver-node
       - eslint-import-resolver-webpack
@@ -8646,16 +9035,16 @@ snapshots:
       - supports-color
       - typescript
 
-  '@nuxtjs/eslint-config@12.0.0(@typescript-eslint/parser@6.21.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@9.12.0(jiti@2.3.3))':
+  '@nuxtjs/eslint-config@12.0.0(@typescript-eslint/parser@6.21.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@9.15.0(jiti@2.4.0))':
     dependencies:
-      eslint: 9.12.0(jiti@2.3.3)
-      eslint-config-standard: 17.1.0(eslint-plugin-import@2.31.0)(eslint-plugin-n@15.7.0(eslint@9.12.0(jiti@2.3.3)))(eslint-plugin-promise@6.6.0(eslint@9.12.0(jiti@2.3.3)))(eslint@9.12.0(jiti@2.3.3))
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@9.12.0(jiti@2.3.3))
-      eslint-plugin-n: 15.7.0(eslint@9.12.0(jiti@2.3.3))
-      eslint-plugin-node: 11.1.0(eslint@9.12.0(jiti@2.3.3))
-      eslint-plugin-promise: 6.6.0(eslint@9.12.0(jiti@2.3.3))
-      eslint-plugin-unicorn: 44.0.2(eslint@9.12.0(jiti@2.3.3))
-      eslint-plugin-vue: 9.29.0(eslint@9.12.0(jiti@2.3.3))
+      eslint: 9.15.0(jiti@2.4.0)
+      eslint-config-standard: 17.1.0(eslint-plugin-import@2.31.0)(eslint-plugin-n@15.7.0(eslint@9.15.0(jiti@2.4.0)))(eslint-plugin-promise@6.6.0(eslint@9.15.0(jiti@2.4.0)))(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-n: 15.7.0(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-node: 11.1.0(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-promise: 6.6.0(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-unicorn: 44.0.2(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-vue: 9.31.0(eslint@9.15.0(jiti@2.4.0))
       local-pkg: 0.4.3
     transitivePeerDependencies:
       - '@typescript-eslint/parser'
@@ -8754,6 +9143,19 @@ snapshots:
       '@parcel/watcher-win32-ia32': 2.4.1
       '@parcel/watcher-win32-x64': 2.4.1
 
+  '@pinia/nuxt@0.5.5(magicast@0.3.5)(rollup@4.24.0)(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))':
+    dependencies:
+      '@nuxt/kit': 3.14.159(magicast@0.3.5)(rollup@4.24.0)
+      pinia: 2.2.6(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - magicast
+      - rollup
+      - supports-color
+      - typescript
+      - vue
+      - webpack-sources
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -8858,6 +9260,14 @@ snapshots:
     optionalDependencies:
       rollup: 4.24.0
 
+  '@rollup/pluginutils@5.1.3(rollup@4.24.0)':
+    dependencies:
+      '@types/estree': 1.0.6
+      estree-walker: 2.0.2
+      picomatch: 4.0.2
+    optionalDependencies:
+      rollup: 4.24.0
+
   '@rollup/rollup-android-arm-eabi@4.24.0':
     optional: true
 
@@ -8992,12 +9402,12 @@ snapshots:
 
   '@sindresorhus/merge-streams@2.3.0': {}
 
-  '@stylistic/eslint-plugin@2.9.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@stylistic/eslint-plugin@2.10.1(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
-      '@typescript-eslint/utils': 8.9.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
-      eslint: 9.12.0(jiti@2.3.3)
-      eslint-visitor-keys: 4.1.0
-      espree: 10.2.0
+      '@typescript-eslint/utils': 8.14.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      eslint: 9.15.0(jiti@2.4.0)
+      eslint-visitor-keys: 4.2.0
+      espree: 10.3.0
       estraverse: 5.3.0
       picomatch: 4.0.2
     transitivePeerDependencies:
@@ -9102,12 +9512,21 @@ snapshots:
     dependencies:
       '@types/ms': 0.7.34
 
+  '@types/dompurify@3.0.5':
+    dependencies:
+      '@types/trusted-types': 2.0.7
+
   '@types/estree-jsx@1.0.5':
     dependencies:
       '@types/estree': 1.0.6
 
   '@types/estree@1.0.6': {}
 
+  '@types/fs-extra@11.0.4':
+    dependencies:
+      '@types/jsonfile': 6.1.4
+      '@types/node': 22.9.0
+
   '@types/fs-extra@9.0.13':
     dependencies:
       '@types/node': 18.19.55
@@ -9124,8 +9543,14 @@ snapshots:
 
   '@types/json-stable-stringify@1.0.36': {}
 
+  '@types/json-stable-stringify@1.1.0': {}
+
   '@types/json5@0.0.29': {}
 
+  '@types/jsonfile@6.1.4':
+    dependencies:
+      '@types/node': 22.9.0
+
   '@types/linkify-it@5.0.0': {}
 
   '@types/markdown-it@14.1.2':
@@ -9157,6 +9582,10 @@ snapshots:
     dependencies:
       undici-types: 6.19.8
 
+  '@types/node@22.9.0':
+    dependencies:
+      undici-types: 6.19.8
+
   '@types/normalize-package-data@2.4.4': {}
 
   '@types/resolve@1.20.2': {}
@@ -9167,100 +9596,106 @@ snapshots:
 
   '@types/semver@7.5.8': {}
 
+  '@types/trusted-types@2.0.7': {}
+
   '@types/unist@2.0.11': {}
 
   '@types/unist@3.0.3': {}
 
-  '@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@types/web-bluetooth@0.0.16': {}
+
+  '@types/web-bluetooth@0.0.20': {}
+
+  '@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
-      '@eslint-community/regexpp': 4.11.1
-      '@typescript-eslint/parser': 6.21.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 6.21.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
       '@typescript-eslint/scope-manager': 6.21.0
-      '@typescript-eslint/type-utils': 6.21.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
-      '@typescript-eslint/utils': 6.21.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
+      '@typescript-eslint/type-utils': 6.21.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      '@typescript-eslint/utils': 6.21.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
       '@typescript-eslint/visitor-keys': 6.21.0
       debug: 4.3.7
-      eslint: 9.12.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
       graphemer: 1.4.0
       ignore: 5.3.2
       natural-compare: 1.4.0
       semver: 7.6.3
-      ts-api-utils: 1.3.0(typescript@5.6.3)
+      ts-api-utils: 1.4.0(typescript@5.6.3)
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
-      '@eslint-community/regexpp': 4.11.1
-      '@typescript-eslint/parser': 7.18.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 7.18.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
       '@typescript-eslint/scope-manager': 7.18.0
-      '@typescript-eslint/type-utils': 7.18.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
-      '@typescript-eslint/utils': 7.18.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
+      '@typescript-eslint/type-utils': 7.18.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      '@typescript-eslint/utils': 7.18.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
       '@typescript-eslint/visitor-keys': 7.18.0
-      eslint: 9.12.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
       graphemer: 1.4.0
       ignore: 5.3.2
       natural-compare: 1.4.0
-      ts-api-utils: 1.3.0(typescript@5.6.3)
+      ts-api-utils: 1.4.0(typescript@5.6.3)
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/eslint-plugin@8.9.0(@typescript-eslint/parser@8.9.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@typescript-eslint/eslint-plugin@8.14.0(@typescript-eslint/parser@8.14.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
-      '@eslint-community/regexpp': 4.11.1
-      '@typescript-eslint/parser': 8.9.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
-      '@typescript-eslint/scope-manager': 8.9.0
-      '@typescript-eslint/type-utils': 8.9.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.9.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
-      '@typescript-eslint/visitor-keys': 8.9.0
-      eslint: 9.12.0(jiti@2.3.3)
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 8.14.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      '@typescript-eslint/scope-manager': 8.14.0
+      '@typescript-eslint/type-utils': 8.14.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.14.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      '@typescript-eslint/visitor-keys': 8.14.0
+      eslint: 9.15.0(jiti@2.4.0)
       graphemer: 1.4.0
       ignore: 5.3.2
       natural-compare: 1.4.0
-      ts-api-utils: 1.3.0(typescript@5.6.3)
+      ts-api-utils: 1.4.0(typescript@5.6.3)
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@6.21.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@typescript-eslint/parser@6.21.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 6.21.0
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.6.3)
       '@typescript-eslint/visitor-keys': 6.21.0
       debug: 4.3.7
-      eslint: 9.12.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@7.18.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@typescript-eslint/parser@7.18.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 7.18.0
       '@typescript-eslint/types': 7.18.0
       '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.6.3)
       '@typescript-eslint/visitor-keys': 7.18.0
       debug: 4.3.7
-      eslint: 9.12.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.9.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@typescript-eslint/parser@8.14.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.9.0
-      '@typescript-eslint/types': 8.9.0
-      '@typescript-eslint/typescript-estree': 8.9.0(typescript@5.6.3)
-      '@typescript-eslint/visitor-keys': 8.9.0
+      '@typescript-eslint/scope-manager': 8.14.0
+      '@typescript-eslint/types': 8.14.0
+      '@typescript-eslint/typescript-estree': 8.14.0(typescript@5.6.3)
+      '@typescript-eslint/visitor-keys': 8.14.0
       debug: 4.3.7
-      eslint: 9.12.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
@@ -9276,41 +9711,41 @@ snapshots:
       '@typescript-eslint/types': 7.18.0
       '@typescript-eslint/visitor-keys': 7.18.0
 
-  '@typescript-eslint/scope-manager@8.9.0':
+  '@typescript-eslint/scope-manager@8.14.0':
     dependencies:
-      '@typescript-eslint/types': 8.9.0
-      '@typescript-eslint/visitor-keys': 8.9.0
+      '@typescript-eslint/types': 8.14.0
+      '@typescript-eslint/visitor-keys': 8.14.0
 
-  '@typescript-eslint/type-utils@6.21.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@typescript-eslint/type-utils@6.21.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
       '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.6.3)
-      '@typescript-eslint/utils': 6.21.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
+      '@typescript-eslint/utils': 6.21.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
       debug: 4.3.7
-      eslint: 9.12.0(jiti@2.3.3)
-      ts-api-utils: 1.3.0(typescript@5.6.3)
+      eslint: 9.15.0(jiti@2.4.0)
+      ts-api-utils: 1.4.0(typescript@5.6.3)
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/type-utils@7.18.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@typescript-eslint/type-utils@7.18.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
       '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.6.3)
-      '@typescript-eslint/utils': 7.18.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
+      '@typescript-eslint/utils': 7.18.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
       debug: 4.3.7
-      eslint: 9.12.0(jiti@2.3.3)
-      ts-api-utils: 1.3.0(typescript@5.6.3)
+      eslint: 9.15.0(jiti@2.4.0)
+      ts-api-utils: 1.4.0(typescript@5.6.3)
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/type-utils@8.9.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@typescript-eslint/type-utils@8.14.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 8.9.0(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.9.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
+      '@typescript-eslint/typescript-estree': 8.14.0(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.14.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
       debug: 4.3.7
-      ts-api-utils: 1.3.0(typescript@5.6.3)
+      ts-api-utils: 1.4.0(typescript@5.6.3)
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
@@ -9321,7 +9756,7 @@ snapshots:
 
   '@typescript-eslint/types@7.18.0': {}
 
-  '@typescript-eslint/types@8.9.0': {}
+  '@typescript-eslint/types@8.14.0': {}
 
   '@typescript-eslint/typescript-estree@6.21.0(typescript@5.6.3)':
     dependencies:
@@ -9332,7 +9767,7 @@ snapshots:
       is-glob: 4.0.3
       minimatch: 9.0.3
       semver: 7.6.3
-      ts-api-utils: 1.3.0(typescript@5.6.3)
+      ts-api-utils: 1.4.0(typescript@5.6.3)
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
@@ -9347,59 +9782,59 @@ snapshots:
       is-glob: 4.0.3
       minimatch: 9.0.5
       semver: 7.6.3
-      ts-api-utils: 1.3.0(typescript@5.6.3)
+      ts-api-utils: 1.4.0(typescript@5.6.3)
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/typescript-estree@8.9.0(typescript@5.6.3)':
+  '@typescript-eslint/typescript-estree@8.14.0(typescript@5.6.3)':
     dependencies:
-      '@typescript-eslint/types': 8.9.0
-      '@typescript-eslint/visitor-keys': 8.9.0
+      '@typescript-eslint/types': 8.14.0
+      '@typescript-eslint/visitor-keys': 8.14.0
       debug: 4.3.7
       fast-glob: 3.3.2
       is-glob: 4.0.3
       minimatch: 9.0.5
       semver: 7.6.3
-      ts-api-utils: 1.3.0(typescript@5.6.3)
+      ts-api-utils: 1.4.0(typescript@5.6.3)
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@6.21.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@typescript-eslint/utils@6.21.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0(jiti@2.3.3))
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.4.0))
       '@types/json-schema': 7.0.15
       '@types/semver': 7.5.8
       '@typescript-eslint/scope-manager': 6.21.0
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.6.3)
-      eslint: 9.12.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
       semver: 7.6.3
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  '@typescript-eslint/utils@7.18.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@typescript-eslint/utils@7.18.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0(jiti@2.3.3))
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.4.0))
       '@typescript-eslint/scope-manager': 7.18.0
       '@typescript-eslint/types': 7.18.0
       '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.6.3)
-      eslint: 9.12.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  '@typescript-eslint/utils@8.9.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@typescript-eslint/utils@8.14.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0(jiti@2.3.3))
-      '@typescript-eslint/scope-manager': 8.9.0
-      '@typescript-eslint/types': 8.9.0
-      '@typescript-eslint/typescript-estree': 8.9.0(typescript@5.6.3)
-      eslint: 9.12.0(jiti@2.3.3)
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.4.0))
+      '@typescript-eslint/scope-manager': 8.14.0
+      '@typescript-eslint/types': 8.14.0
+      '@typescript-eslint/typescript-estree': 8.14.0(typescript@5.6.3)
+      eslint: 9.15.0(jiti@2.4.0)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -9414,9 +9849,9 @@ snapshots:
       '@typescript-eslint/types': 7.18.0
       eslint-visitor-keys: 3.4.3
 
-  '@typescript-eslint/visitor-keys@8.9.0':
+  '@typescript-eslint/visitor-keys@8.14.0':
     dependencies:
-      '@typescript-eslint/types': 8.9.0
+      '@typescript-eslint/types': 8.14.0
       eslint-visitor-keys: 3.4.3
 
   '@ungap/structured-clone@1.2.0': {}
@@ -9512,15 +9947,17 @@ snapshots:
       - webpack
       - webpack-sources
 
-  '@vintl/unplugin@1.5.2(@vue/compiler-core@3.5.12)(vue@3.5.12(typescript@5.6.3))':
+  '@vintl/unplugin@1.5.2(@vue/compiler-core@3.5.12)(rollup@4.24.0)(vue@3.5.12(typescript@5.6.3))':
     dependencies:
-      '@formatjs/cli-lib': 6.4.5(@vue/compiler-core@3.5.12)(vue@3.5.12(typescript@5.6.3))
-      '@formatjs/icu-messageformat-parser': 2.7.10
-      '@rollup/pluginutils': 5.1.2(rollup@4.24.0)
+      '@formatjs/cli-lib': 6.6.3(@vue/compiler-core@3.5.12)(vue@3.5.12(typescript@5.6.3))
+      '@formatjs/icu-messageformat-parser': 2.9.3
+      '@rollup/pluginutils': 5.1.3(rollup@4.24.0)
       glob: 10.4.5
       import-meta-resolve: 4.1.0
       pathe: 1.1.2
-      unplugin: 1.14.1
+      unplugin: 1.16.0
+    optionalDependencies:
+      rollup: 4.24.0
     transitivePeerDependencies:
       - '@glimmer/env'
       - '@glimmer/reference'
@@ -9531,7 +9968,6 @@ snapshots:
       - ember-template-recast
       - ts-jest
       - vue
-      - webpack-sources
 
   '@vintl/unplugin@2.0.0(@vue/compiler-core@3.5.12)(rollup@4.24.0)(vite@5.4.9(@types/node@20.16.11)(sass@1.79.5)(terser@5.34.1))(vue@3.5.12(typescript@5.6.3))':
     dependencies:
@@ -9583,6 +10019,11 @@ snapshots:
       vite: 5.4.9(@types/node@20.16.11)(sass@1.79.5)(terser@5.34.1)
       vue: 3.5.12(typescript@5.6.3)
 
+  '@vitejs/plugin-vue@5.1.4(vite@5.4.9(@types/node@22.9.0)(sass@1.79.5)(terser@5.34.1))(vue@3.5.12(typescript@5.6.3))':
+    dependencies:
+      vite: 5.4.9(@types/node@22.9.0)(sass@1.79.5)(terser@5.34.1)
+      vue: 3.5.12(typescript@5.6.3)
+
   '@volar/kit@2.4.6(typescript@5.6.3)':
     dependencies:
       '@volar/language-service': 2.4.6
@@ -9739,13 +10180,13 @@ snapshots:
     dependencies:
       rfdc: 1.4.1
 
-  '@vue/eslint-config-typescript@13.0.0(eslint-plugin-vue@9.29.0(eslint@9.12.0(jiti@2.3.3)))(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@vue/eslint-config-typescript@13.0.0(eslint-plugin-vue@9.31.0(eslint@9.15.0(jiti@2.4.0)))(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
-      '@typescript-eslint/eslint-plugin': 7.18.0(@typescript-eslint/parser@7.18.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
-      '@typescript-eslint/parser': 7.18.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
-      eslint: 9.12.0(jiti@2.3.3)
-      eslint-plugin-vue: 9.29.0(eslint@9.12.0(jiti@2.3.3))
-      vue-eslint-parser: 9.4.3(eslint@9.12.0(jiti@2.3.3))
+      '@typescript-eslint/eslint-plugin': 7.18.0(@typescript-eslint/parser@7.18.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      '@typescript-eslint/parser': 7.18.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      eslint: 9.15.0(jiti@2.4.0)
+      eslint-plugin-vue: 9.31.0(eslint@9.15.0(jiti@2.4.0))
+      vue-eslint-parser: 9.4.3(eslint@9.15.0(jiti@2.4.0))
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
@@ -9790,6 +10231,44 @@ snapshots:
 
   '@vue/tsconfig@0.5.1': {}
 
+  '@vueuse/core@11.2.0(vue@3.5.12(typescript@5.6.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 11.2.0
+      '@vueuse/shared': 11.2.0(vue@3.5.12(typescript@5.6.3))
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/core@9.13.0(vue@3.5.12(typescript@5.6.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.16
+      '@vueuse/metadata': 9.13.0
+      '@vueuse/shared': 9.13.0(vue@3.5.12(typescript@5.6.3))
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/metadata@11.2.0': {}
+
+  '@vueuse/metadata@9.13.0': {}
+
+  '@vueuse/shared@11.2.0(vue@3.5.12(typescript@5.6.3))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/shared@9.13.0(vue@3.5.12(typescript@5.6.3))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@yr/monotone-cubic-spline@1.0.3': {}
 
   abbrev@1.1.1: {}
@@ -9798,6 +10277,8 @@ snapshots:
     dependencies:
       event-target-shim: 5.0.1
 
+  ace-builds@1.36.5: {}
+
   acorn-import-attributes@1.9.5(acorn@8.12.1):
     dependencies:
       acorn: 8.12.1
@@ -9810,10 +10291,16 @@ snapshots:
     dependencies:
       acorn: 8.13.0
 
+  acorn-jsx@5.3.2(acorn@8.14.0):
+    dependencies:
+      acorn: 8.14.0
+
   acorn@8.12.1: {}
 
   acorn@8.13.0: {}
 
+  acorn@8.14.0: {}
+
   agent-base@6.0.2:
     dependencies:
       debug: 4.3.7
@@ -9862,6 +10349,10 @@ snapshots:
 
   ansi-styles@6.2.1: {}
 
+  ansi-to-html@0.7.2:
+    dependencies:
+      entities: 2.2.0
+
   any-promise@1.3.0: {}
 
   anymatch@3.1.3:
@@ -9929,7 +10420,7 @@ snapshots:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
       es-object-atoms: 1.0.0
       get-intrinsic: 1.2.4
       is-string: 1.0.7
@@ -9942,7 +10433,7 @@ snapshots:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
       es-errors: 1.3.0
       es-object-atoms: 1.0.0
       es-shim-unscopables: 1.0.2
@@ -9951,14 +10442,14 @@ snapshots:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
       es-shim-unscopables: 1.0.2
 
   array.prototype.flatmap@1.3.2:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
       es-shim-unscopables: 1.0.2
 
   arraybuffer.prototype.slice@1.0.3:
@@ -9966,7 +10457,7 @@ snapshots:
       array-buffer-byte-length: 1.0.1
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
       es-errors: 1.3.0
       get-intrinsic: 1.2.4
       is-array-buffer: 3.0.4
@@ -9984,12 +10475,12 @@ snapshots:
 
   astring@1.9.0: {}
 
-  astro-expressive-code@0.35.6(astro@4.16.6(@types/node@20.16.11)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3)):
+  astro-expressive-code@0.35.6(astro@4.16.6(@types/node@22.9.0)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3)):
     dependencies:
-      astro: 4.16.6(@types/node@20.16.11)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3)
+      astro: 4.16.6(@types/node@22.9.0)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3)
       rehype-expressive-code: 0.35.6
 
-  astro@4.16.6(@types/node@20.16.11)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3):
+  astro@4.16.6(@types/node@22.9.0)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3):
     dependencies:
       '@astrojs/compiler': 2.10.3
       '@astrojs/internal-helpers': 0.4.1
@@ -10045,8 +10536,8 @@ snapshots:
       tsconfck: 3.1.4(typescript@5.6.3)
       unist-util-visit: 5.0.0
       vfile: 6.0.3
-      vite: 5.4.9(@types/node@20.16.11)(sass@1.79.5)(terser@5.34.1)
-      vitefu: 1.0.3(vite@5.4.9(@types/node@20.16.11)(sass@1.79.5)(terser@5.34.1))
+      vite: 5.4.9(@types/node@22.9.0)(sass@1.79.5)(terser@5.34.1)
+      vitefu: 1.0.3(vite@5.4.9(@types/node@22.9.0)(sass@1.79.5)(terser@5.34.1))
       which-pm: 3.0.0
       xxhash-wasm: 1.0.2
       yargs-parser: 21.1.1
@@ -10176,6 +10667,13 @@ snapshots:
       node-releases: 2.0.18
       update-browserslist-db: 1.1.1(browserslist@4.24.0)
 
+  browserslist@4.24.2:
+    dependencies:
+      caniuse-lite: 1.0.30001680
+      electron-to-chromium: 1.5.62
+      node-releases: 2.0.18
+      update-browserslist-db: 1.1.1(browserslist@4.24.2)
+
   buffer-crc32@1.0.0: {}
 
   buffer-from@1.1.2: {}
@@ -10217,6 +10715,23 @@ snapshots:
     optionalDependencies:
       magicast: 0.3.5
 
+  c12@2.0.1(magicast@0.3.5):
+    dependencies:
+      chokidar: 4.0.1
+      confbox: 0.1.8
+      defu: 6.1.4
+      dotenv: 16.4.5
+      giget: 1.2.3
+      jiti: 2.4.0
+      mlly: 1.7.3
+      ohash: 1.1.4
+      pathe: 1.1.2
+      perfect-debounce: 1.0.0
+      pkg-types: 1.2.1
+      rc9: 2.1.2
+    optionalDependencies:
+      magicast: 0.3.5
+
   cac@6.7.14: {}
 
   call-bind@1.0.7:
@@ -10237,13 +10752,15 @@ snapshots:
 
   caniuse-api@3.0.0:
     dependencies:
-      browserslist: 4.24.0
-      caniuse-lite: 1.0.30001668
+      browserslist: 4.24.2
+      caniuse-lite: 1.0.30001680
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
 
   caniuse-lite@1.0.30001668: {}
 
+  caniuse-lite@1.0.30001680: {}
+
   ccount@2.0.1: {}
 
   chalk@2.4.2:
@@ -10291,6 +10808,8 @@ snapshots:
 
   ci-info@4.0.0: {}
 
+  ci-info@4.1.0: {}
+
   citty@0.1.6:
     dependencies:
       consola: 3.2.3
@@ -10357,6 +10876,8 @@ snapshots:
 
   comma-separated-tokens@2.0.3: {}
 
+  commander@12.1.0: {}
+
   commander@2.20.3: {}
 
   commander@4.1.1: {}
@@ -10401,9 +10922,9 @@ snapshots:
     dependencies:
       is-what: 4.1.16
 
-  core-js-compat@3.38.1:
+  core-js-compat@3.39.0:
     dependencies:
-      browserslist: 4.24.0
+      browserslist: 4.24.2
 
   core-util-is@1.0.3: {}
 
@@ -10428,6 +10949,12 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  cross-spawn@7.0.5:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
   crossws@0.2.4: {}
 
   crossws@0.3.1:
@@ -10466,7 +10993,7 @@ snapshots:
 
   cssnano-preset-default@7.0.6(postcss@8.4.47):
     dependencies:
-      browserslist: 4.24.0
+      browserslist: 4.24.2
       css-declaration-sorter: 7.2.0(postcss@8.4.47)
       cssnano-utils: 5.0.0(postcss@8.4.47)
       postcss: 8.4.47
@@ -10542,6 +11069,8 @@ snapshots:
 
   de-indent@1.0.2: {}
 
+  debounce@1.2.1: {}
+
   debug@2.6.9:
     dependencies:
       ms: 2.0.0
@@ -10653,6 +11182,8 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
+  dompurify@3.2.0: {}
+
   domutils@3.1.0:
     dependencies:
       dom-serializer: 2.0.0
@@ -10677,6 +11208,8 @@ snapshots:
 
   electron-to-chromium@1.5.38: {}
 
+  electron-to-chromium@1.5.62: {}
+
   emmet@2.4.11:
     dependencies:
       '@emmetio/abbreviation': 2.3.3
@@ -10701,6 +11234,8 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.2.1
 
+  entities@2.2.0: {}
+
   entities@3.0.1: {}
 
   entities@4.5.0: {}
@@ -10713,7 +11248,7 @@ snapshots:
 
   errx@0.1.0: {}
 
-  es-abstract@1.23.3:
+  es-abstract@1.23.5:
     dependencies:
       array-buffer-byte-length: 1.0.1
       arraybuffer.prototype.slice: 1.0.3
@@ -10746,7 +11281,7 @@ snapshots:
       is-string: 1.0.7
       is-typed-array: 1.1.13
       is-weakref: 1.0.2
-      object-inspect: 1.13.2
+      object-inspect: 1.13.3
       object-keys: 1.1.1
       object.assign: 4.1.5
       regexp.prototype.flags: 1.5.3
@@ -10893,27 +11428,27 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-config-flat-gitignore@0.3.0(eslint@9.12.0(jiti@2.3.3)):
+  eslint-config-flat-gitignore@0.3.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      '@eslint/compat': 1.2.0(eslint@9.12.0(jiti@2.3.3))
-      eslint: 9.12.0(jiti@2.3.3)
+      '@eslint/compat': 1.2.3(eslint@9.15.0(jiti@2.4.0))
+      eslint: 9.15.0(jiti@2.4.0)
       find-up-simple: 1.0.0
 
-  eslint-config-prettier@9.1.0(eslint@9.12.0(jiti@2.3.3)):
+  eslint-config-prettier@9.1.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      eslint: 9.12.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
 
-  eslint-config-standard@17.1.0(eslint-plugin-import@2.31.0)(eslint-plugin-n@15.7.0(eslint@9.12.0(jiti@2.3.3)))(eslint-plugin-promise@6.6.0(eslint@9.12.0(jiti@2.3.3)))(eslint@9.12.0(jiti@2.3.3)):
+  eslint-config-standard@17.1.0(eslint-plugin-import@2.31.0)(eslint-plugin-n@15.7.0(eslint@9.15.0(jiti@2.4.0)))(eslint-plugin-promise@6.6.0(eslint@9.15.0(jiti@2.4.0)))(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      eslint: 9.12.0(jiti@2.3.3)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.12.0(jiti@2.3.3))
-      eslint-plugin-n: 15.7.0(eslint@9.12.0(jiti@2.3.3))
-      eslint-plugin-promise: 6.6.0(eslint@9.12.0(jiti@2.3.3))
+      eslint: 9.15.0(jiti@2.4.0)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-n: 15.7.0(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-promise: 6.6.0(eslint@9.15.0(jiti@2.4.0))
 
-  eslint-config-turbo@2.1.3(eslint@9.12.0(jiti@2.3.3)):
+  eslint-config-turbo@2.3.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      eslint: 9.12.0(jiti@2.3.3)
-      eslint-plugin-turbo: 2.1.3(eslint@9.12.0(jiti@2.3.3))
+      eslint: 9.15.0(jiti@2.4.0)
+      eslint-plugin-turbo: 2.3.0(eslint@9.15.0(jiti@2.4.0))
 
   eslint-flat-config-utils@0.4.0:
     dependencies:
@@ -10927,77 +11462,76 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@6.21.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint-plugin-import-x@4.3.1(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint-plugin-import@2.31.0)(eslint@9.12.0(jiti@2.3.3)):
+  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@6.21.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint-plugin-import-x@4.4.2(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint-plugin-import@2.31.0)(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.3.7
       enhanced-resolve: 5.17.1
-      eslint: 9.12.0(jiti@2.3.3)
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@9.12.0(jiti@2.3.3))
+      eslint: 9.15.0(jiti@2.4.0)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@9.15.0(jiti@2.4.0))
       fast-glob: 3.3.2
       get-tsconfig: 4.8.1
       is-bun-module: 1.2.1
       is-glob: 4.0.3
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.12.0(jiti@2.3.3))
-      eslint-plugin-import-x: 4.3.1(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-import-x: 4.4.2(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
     transitivePeerDependencies:
       - '@typescript-eslint/parser'
       - eslint-import-resolver-node
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@6.21.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@9.12.0(jiti@2.3.3)):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@6.21.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 6.21.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
-      eslint: 9.12.0(jiti@2.3.3)
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@6.21.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint-plugin-import-x@4.3.1(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint-plugin-import@2.31.0)(eslint@9.12.0(jiti@2.3.3))
+      '@typescript-eslint/parser': 6.21.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      eslint: 9.15.0(jiti@2.4.0)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@6.21.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint-plugin-import-x@4.4.2(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint-plugin-import@2.31.0)(eslint@9.15.0(jiti@2.4.0))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@7.18.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint@9.12.0(jiti@2.3.3)):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@7.18.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 7.18.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
-      eslint: 9.12.0(jiti@2.3.3)
+      '@typescript-eslint/parser': 7.18.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      eslint: 9.15.0(jiti@2.4.0)
       eslint-import-resolver-node: 0.3.9
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-es@3.0.1(eslint@9.12.0(jiti@2.3.3)):
+  eslint-plugin-es@3.0.1(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      eslint: 9.12.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
       eslint-utils: 2.1.0
       regexpp: 3.2.0
 
-  eslint-plugin-es@4.1.0(eslint@9.12.0(jiti@2.3.3)):
+  eslint-plugin-es@4.1.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      eslint: 9.12.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
       eslint-utils: 2.1.0
       regexpp: 3.2.0
 
-  eslint-plugin-import-x@4.3.1(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3):
+  eslint-plugin-import-x@4.4.2(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3):
     dependencies:
-      '@typescript-eslint/utils': 8.9.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.14.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
       debug: 4.3.7
       doctrine: 3.0.0
-      eslint: 9.12.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
       eslint-import-resolver-node: 0.3.9
       get-tsconfig: 4.8.1
       is-glob: 4.0.3
       minimatch: 9.0.5
       semver: 7.6.3
       stable-hash: 0.0.4
-      tslib: 2.8.0
+      tslib: 2.8.1
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@9.12.0(jiti@2.3.3)):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -11006,9 +11540,9 @@ snapshots:
       array.prototype.flatmap: 1.3.2
       debug: 3.2.7
       doctrine: 2.1.0
-      eslint: 9.12.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.18.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint@9.12.0(jiti@2.3.3))
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.18.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint@9.15.0(jiti@2.4.0))
       hasown: 2.0.2
       is-core-module: 2.15.1
       is-glob: 4.0.3
@@ -11020,13 +11554,13 @@ snapshots:
       string.prototype.trimend: 1.0.8
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 6.21.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
+      '@typescript-eslint/parser': 6.21.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.18.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.12.0(jiti@2.3.3)):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.18.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -11035,9 +11569,9 @@ snapshots:
       array.prototype.flatmap: 1.3.2
       debug: 3.2.7
       doctrine: 2.1.0
-      eslint: 9.12.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.18.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint@9.12.0(jiti@2.3.3))
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.18.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint@9.15.0(jiti@2.4.0))
       hasown: 2.0.2
       is-core-module: 2.15.1
       is-glob: 4.0.3
@@ -11049,21 +11583,21 @@ snapshots:
       string.prototype.trimend: 1.0.8
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 7.18.0(eslint@9.12.0(jiti@2.3.3))(typescript@5.6.3)
+      '@typescript-eslint/parser': 7.18.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-jsdoc@50.4.1(eslint@9.12.0(jiti@2.3.3)):
+  eslint-plugin-jsdoc@50.5.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
       '@es-joy/jsdoccomment': 0.49.0
       are-docs-informative: 0.0.2
       comment-parser: 1.4.1
       debug: 4.3.7
       escape-string-regexp: 4.0.0
-      eslint: 9.12.0(jiti@2.3.3)
-      espree: 10.2.0
+      eslint: 9.15.0(jiti@2.4.0)
+      espree: 10.3.0
       esquery: 1.6.0
       parse-imports: 2.2.1
       semver: 7.6.3
@@ -11072,64 +11606,64 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-n@15.7.0(eslint@9.12.0(jiti@2.3.3)):
+  eslint-plugin-n@15.7.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
       builtins: 5.1.0
-      eslint: 9.12.0(jiti@2.3.3)
-      eslint-plugin-es: 4.1.0(eslint@9.12.0(jiti@2.3.3))
-      eslint-utils: 3.0.0(eslint@9.12.0(jiti@2.3.3))
+      eslint: 9.15.0(jiti@2.4.0)
+      eslint-plugin-es: 4.1.0(eslint@9.15.0(jiti@2.4.0))
+      eslint-utils: 3.0.0(eslint@9.15.0(jiti@2.4.0))
       ignore: 5.3.2
       is-core-module: 2.15.1
       minimatch: 3.1.2
       resolve: 1.22.8
       semver: 7.6.3
 
-  eslint-plugin-node@11.1.0(eslint@9.12.0(jiti@2.3.3)):
+  eslint-plugin-node@11.1.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      eslint: 9.12.0(jiti@2.3.3)
-      eslint-plugin-es: 3.0.1(eslint@9.12.0(jiti@2.3.3))
+      eslint: 9.15.0(jiti@2.4.0)
+      eslint-plugin-es: 3.0.1(eslint@9.15.0(jiti@2.4.0))
       eslint-utils: 2.1.0
       ignore: 5.3.2
       minimatch: 3.1.2
       resolve: 1.22.8
       semver: 6.3.1
 
-  eslint-plugin-prettier@5.2.1(eslint-config-prettier@9.1.0(eslint@9.12.0(jiti@2.3.3)))(eslint@9.12.0(jiti@2.3.3))(prettier@3.3.3):
+  eslint-plugin-prettier@5.2.1(eslint-config-prettier@9.1.0(eslint@9.15.0(jiti@2.4.0)))(eslint@9.15.0(jiti@2.4.0))(prettier@3.3.3):
     dependencies:
-      eslint: 9.12.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
       prettier: 3.3.3
       prettier-linter-helpers: 1.0.0
       synckit: 0.9.2
     optionalDependencies:
-      eslint-config-prettier: 9.1.0(eslint@9.12.0(jiti@2.3.3))
+      eslint-config-prettier: 9.1.0(eslint@9.15.0(jiti@2.4.0))
 
-  eslint-plugin-promise@6.6.0(eslint@9.12.0(jiti@2.3.3)):
+  eslint-plugin-promise@6.6.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      eslint: 9.12.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
 
-  eslint-plugin-regexp@2.6.0(eslint@9.12.0(jiti@2.3.3)):
+  eslint-plugin-regexp@2.7.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0(jiti@2.3.3))
-      '@eslint-community/regexpp': 4.11.1
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.4.0))
+      '@eslint-community/regexpp': 4.12.1
       comment-parser: 1.4.1
-      eslint: 9.12.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
       jsdoc-type-pratt-parser: 4.1.0
       refa: 0.12.1
       regexp-ast-analysis: 0.7.1
       scslre: 0.3.0
 
-  eslint-plugin-turbo@2.1.3(eslint@9.12.0(jiti@2.3.3)):
+  eslint-plugin-turbo@2.3.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
       dotenv: 16.0.3
-      eslint: 9.12.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
 
-  eslint-plugin-unicorn@44.0.2(eslint@9.12.0(jiti@2.3.3)):
+  eslint-plugin-unicorn@44.0.2(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      '@babel/helper-validator-identifier': 7.25.7
+      '@babel/helper-validator-identifier': 7.25.9
       ci-info: 3.9.0
       clean-regexp: 1.0.0
-      eslint: 9.12.0(jiti@2.3.3)
-      eslint-utils: 3.0.0(eslint@9.12.0(jiti@2.3.3))
+      eslint: 9.15.0(jiti@2.4.0)
+      eslint-utils: 3.0.0(eslint@9.15.0(jiti@2.4.0))
       esquery: 1.6.0
       indent-string: 4.0.0
       is-builtin-module: 3.2.1
@@ -11141,15 +11675,15 @@ snapshots:
       semver: 7.6.3
       strip-indent: 3.0.0
 
-  eslint-plugin-unicorn@54.0.0(eslint@9.12.0(jiti@2.3.3)):
+  eslint-plugin-unicorn@54.0.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      '@babel/helper-validator-identifier': 7.25.7
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0(jiti@2.3.3))
-      '@eslint/eslintrc': 3.1.0
-      ci-info: 4.0.0
+      '@babel/helper-validator-identifier': 7.25.9
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.4.0))
+      '@eslint/eslintrc': 3.2.0
+      ci-info: 4.1.0
       clean-regexp: 1.0.0
-      core-js-compat: 3.38.1
-      eslint: 9.12.0(jiti@2.3.3)
+      core-js-compat: 3.39.0
+      eslint: 9.15.0(jiti@2.4.0)
       esquery: 1.6.0
       indent-string: 4.0.0
       is-builtin-module: 3.2.1
@@ -11163,16 +11697,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-unicorn@55.0.0(eslint@9.12.0(jiti@2.3.3)):
+  eslint-plugin-unicorn@55.0.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      '@babel/helper-validator-identifier': 7.25.7
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0(jiti@2.3.3))
-      ci-info: 4.0.0
+      '@babel/helper-validator-identifier': 7.25.9
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.4.0))
+      ci-info: 4.1.0
       clean-regexp: 1.0.0
-      core-js-compat: 3.38.1
-      eslint: 9.12.0(jiti@2.3.3)
+      core-js-compat: 3.39.0
+      eslint: 9.15.0(jiti@2.4.0)
       esquery: 1.6.0
-      globals: 15.11.0
+      globals: 15.12.0
       indent-string: 4.0.0
       is-builtin-module: 3.2.1
       jsesc: 3.0.2
@@ -11183,16 +11717,16 @@ snapshots:
       semver: 7.6.3
       strip-indent: 3.0.0
 
-  eslint-plugin-vue@9.29.0(eslint@9.12.0(jiti@2.3.3)):
+  eslint-plugin-vue@9.31.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0(jiti@2.3.3))
-      eslint: 9.12.0(jiti@2.3.3)
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.4.0))
+      eslint: 9.15.0(jiti@2.4.0)
       globals: 13.24.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.1.2
       semver: 7.6.3
-      vue-eslint-parser: 9.4.3(eslint@9.12.0(jiti@2.3.3))
+      vue-eslint-parser: 9.4.3(eslint@9.15.0(jiti@2.4.0))
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
@@ -11202,7 +11736,7 @@ snapshots:
       esrecurse: 4.3.0
       estraverse: 5.3.0
 
-  eslint-scope@8.1.0:
+  eslint-scope@8.2.0:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
@@ -11211,9 +11745,9 @@ snapshots:
     dependencies:
       eslint-visitor-keys: 1.3.0
 
-  eslint-utils@3.0.0(eslint@9.12.0(jiti@2.3.3)):
+  eslint-utils@3.0.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      eslint: 9.12.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
       eslint-visitor-keys: 2.1.0
 
   eslint-visitor-keys@1.3.0: {}
@@ -11222,7 +11756,7 @@ snapshots:
 
   eslint-visitor-keys@3.4.3: {}
 
-  eslint-visitor-keys@4.1.0: {}
+  eslint-visitor-keys@4.2.0: {}
 
   eslint@8.57.1:
     dependencies:
@@ -11267,28 +11801,28 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint@9.12.0(jiti@2.3.3):
+  eslint@9.15.0(jiti@2.4.0):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0(jiti@2.3.3))
-      '@eslint-community/regexpp': 4.11.1
-      '@eslint/config-array': 0.18.0
-      '@eslint/core': 0.6.0
-      '@eslint/eslintrc': 3.1.0
-      '@eslint/js': 9.12.0
-      '@eslint/plugin-kit': 0.2.0
-      '@humanfs/node': 0.16.5
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.4.0))
+      '@eslint-community/regexpp': 4.12.1
+      '@eslint/config-array': 0.19.0
+      '@eslint/core': 0.9.0
+      '@eslint/eslintrc': 3.2.0
+      '@eslint/js': 9.15.0
+      '@eslint/plugin-kit': 0.2.3
+      '@humanfs/node': 0.16.6
       '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.3.1
+      '@humanwhocodes/retry': 0.4.1
       '@types/estree': 1.0.6
       '@types/json-schema': 7.0.15
       ajv: 6.12.6
       chalk: 4.1.2
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.5
       debug: 4.3.7
       escape-string-regexp: 4.0.0
-      eslint-scope: 8.1.0
-      eslint-visitor-keys: 4.1.0
-      espree: 10.2.0
+      eslint-scope: 8.2.0
+      eslint-visitor-keys: 4.2.0
+      espree: 10.3.0
       esquery: 1.6.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
@@ -11303,17 +11837,16 @@ snapshots:
       minimatch: 3.1.2
       natural-compare: 1.4.0
       optionator: 0.9.4
-      text-table: 0.2.0
     optionalDependencies:
-      jiti: 2.3.3
+      jiti: 2.4.0
     transitivePeerDependencies:
       - supports-color
 
-  espree@10.2.0:
+  espree@10.3.0:
     dependencies:
-      acorn: 8.12.1
-      acorn-jsx: 5.3.2(acorn@8.12.1)
-      eslint-visitor-keys: 4.1.0
+      acorn: 8.14.0
+      acorn-jsx: 5.3.2(acorn@8.14.0)
+      eslint-visitor-keys: 4.2.0
 
   espree@9.6.1:
     dependencies:
@@ -11392,7 +11925,7 @@ snapshots:
 
   execa@8.0.1:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.5
       get-stream: 8.0.1
       human-signals: 5.0.0
       is-stream: 3.0.0
@@ -11508,21 +12041,21 @@ snapshots:
       vue: 3.5.12(typescript@5.6.3)
       vue-resize: 2.0.0-alpha.1(vue@3.5.12(typescript@5.6.3))
 
-  floating-vue@2.0.0-beta.24(@nuxt/kit@3.13.2(magicast@0.3.5))(vue@3.5.12(typescript@5.6.3)):
+  floating-vue@2.0.0-beta.24(@nuxt/kit@3.14.159(magicast@0.3.5)(rollup@4.24.0))(vue@3.5.12(typescript@5.6.3)):
     dependencies:
       '@floating-ui/dom': 1.1.1
       vue: 3.5.12(typescript@5.6.3)
       vue-resize: 2.0.0-alpha.1(vue@3.5.12(typescript@5.6.3))
     optionalDependencies:
-      '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.0)
+      '@nuxt/kit': 3.14.159(magicast@0.3.5)(rollup@4.24.0)
 
-  floating-vue@5.2.2(@nuxt/kit@3.13.2(magicast@0.3.5))(vue@3.5.12(typescript@5.6.3)):
+  floating-vue@5.2.2(@nuxt/kit@3.14.159(magicast@0.3.5)(rollup@4.24.0))(vue@3.5.12(typescript@5.6.3)):
     dependencies:
       '@floating-ui/dom': 1.1.1
       vue: 3.5.12(typescript@5.6.3)
       vue-resize: 2.0.0-alpha.1(vue@3.5.12(typescript@5.6.3))
     optionalDependencies:
-      '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.0)
+      '@nuxt/kit': 3.14.159(magicast@0.3.5)(rollup@4.24.0)
 
   for-each@0.3.3:
     dependencies:
@@ -11566,7 +12099,7 @@ snapshots:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
       functions-have-names: 1.2.3
 
   functions-have-names@1.2.3: {}
@@ -11687,7 +12220,7 @@ snapshots:
 
   globals@14.0.0: {}
 
-  globals@15.11.0: {}
+  globals@15.12.0: {}
 
   globalthis@1.0.4:
     dependencies:
@@ -12014,6 +12547,8 @@ snapshots:
 
   ignore@5.3.2: {}
 
+  ignore@6.0.2: {}
+
   image-meta@0.2.1: {}
 
   immediate@3.0.6: {}
@@ -12255,6 +12790,8 @@ snapshots:
 
   jiti@2.3.3: {}
 
+  jiti@2.4.0: {}
+
   js-tokens@4.0.0: {}
 
   js-tokens@9.0.0: {}
@@ -12407,7 +12944,7 @@ snapshots:
 
   local-pkg@0.5.0:
     dependencies:
-      mlly: 1.7.2
+      mlly: 1.7.3
       pkg-types: 1.2.1
 
   locate-path@5.0.0:
@@ -13021,6 +13558,13 @@ snapshots:
       pkg-types: 1.2.1
       ufo: 1.5.4
 
+  mlly@1.7.3:
+    dependencies:
+      acorn: 8.14.0
+      pathe: 1.1.2
+      pkg-types: 1.2.1
+      ufo: 1.5.4
+
   mri@1.2.0: {}
 
   mrmime@2.0.0: {}
@@ -13325,7 +13869,7 @@ snapshots:
 
   object-hash@3.0.0: {}
 
-  object-inspect@1.13.2: {}
+  object-inspect@1.13.3: {}
 
   object-keys@1.1.1: {}
 
@@ -13340,14 +13884,14 @@ snapshots:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
       es-object-atoms: 1.0.0
 
   object.groupby@1.0.3:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
 
   object.values@1.2.0:
     dependencies:
@@ -13498,7 +14042,7 @@ snapshots:
 
   parse-json@5.2.0:
     dependencies:
-      '@babel/code-frame': 7.25.7
+      '@babel/code-frame': 7.26.2
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
@@ -13571,6 +14115,14 @@ snapshots:
     optionalDependencies:
       typescript: 5.6.3
 
+  pinia@2.2.6(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.12(typescript@5.6.3)
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.3))
+    optionalDependencies:
+      typescript: 5.6.3
+
   pirates@4.0.6: {}
 
   pkg-dir@4.2.0:
@@ -13595,7 +14147,7 @@ snapshots:
 
   postcss-colormin@7.0.2(postcss@8.4.47):
     dependencies:
-      browserslist: 4.24.0
+      browserslist: 4.24.2
       caniuse-api: 3.0.0
       colord: 2.9.3
       postcss: 8.4.47
@@ -13603,7 +14155,7 @@ snapshots:
 
   postcss-convert-values@7.0.4(postcss@8.4.47):
     dependencies:
-      browserslist: 4.24.0
+      browserslist: 4.24.2
       postcss: 8.4.47
       postcss-value-parser: 4.2.0
 
@@ -13651,7 +14203,7 @@ snapshots:
 
   postcss-merge-rules@7.0.4(postcss@8.4.47):
     dependencies:
-      browserslist: 4.24.0
+      browserslist: 4.24.2
       caniuse-api: 3.0.0
       cssnano-utils: 5.0.0(postcss@8.4.47)
       postcss: 8.4.47
@@ -13671,7 +14223,7 @@ snapshots:
 
   postcss-minify-params@7.0.2(postcss@8.4.47):
     dependencies:
-      browserslist: 4.24.0
+      browserslist: 4.24.2
       cssnano-utils: 5.0.0(postcss@8.4.47)
       postcss: 8.4.47
       postcss-value-parser: 4.2.0
@@ -13718,7 +14270,7 @@ snapshots:
 
   postcss-normalize-unicode@7.0.2(postcss@8.4.47):
     dependencies:
-      browserslist: 4.24.0
+      browserslist: 4.24.2
       postcss: 8.4.47
       postcss-value-parser: 4.2.0
 
@@ -13740,7 +14292,7 @@ snapshots:
 
   postcss-reduce-initial@7.0.2(postcss@8.4.47):
     dependencies:
-      browserslist: 4.24.0
+      browserslist: 4.24.2
       caniuse-api: 3.0.0
       postcss: 8.4.47
 
@@ -13960,7 +14512,7 @@ snapshots:
 
   refa@0.12.1:
     dependencies:
-      '@eslint-community/regexpp': 4.11.1
+      '@eslint-community/regexpp': 4.12.1
 
   regenerator-runtime@0.14.1: {}
 
@@ -13968,7 +14520,7 @@ snapshots:
 
   regexp-ast-analysis@0.7.1:
     dependencies:
-      '@eslint-community/regexpp': 4.11.1
+      '@eslint-community/regexpp': 4.12.1
       refa: 0.12.1
 
   regexp-tree@0.1.27: {}
@@ -14093,6 +14645,8 @@ snapshots:
 
   require-from-string@2.0.2: {}
 
+  resize-observer-polyfill@1.5.1: {}
+
   resolve-from@4.0.0: {}
 
   resolve-from@5.0.0: {}
@@ -14212,7 +14766,7 @@ snapshots:
 
   scslre@0.3.0:
     dependencies:
-      '@eslint-community/regexpp': 4.11.1
+      '@eslint-community/regexpp': 4.12.1
       refa: 0.12.1
       regexp-ast-analysis: 0.7.1
 
@@ -14346,7 +14900,7 @@ snapshots:
       call-bind: 1.0.7
       es-errors: 1.3.0
       get-intrinsic: 1.2.4
-      object-inspect: 1.13.2
+      object-inspect: 1.13.3
 
   signal-exit@3.0.7: {}
 
@@ -14435,12 +14989,12 @@ snapshots:
 
   standard-as-callback@2.1.0: {}
 
-  starlight-openapi@0.7.0(@astrojs/markdown-remark@5.3.0)(@astrojs/starlight@0.26.4(astro@4.16.6(@types/node@20.16.11)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3)))(astro@4.16.6(@types/node@20.16.11)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3))(openapi-types@12.1.3):
+  starlight-openapi@0.7.0(@astrojs/markdown-remark@5.3.0)(@astrojs/starlight@0.26.4(astro@4.16.6(@types/node@22.9.0)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3)))(astro@4.16.6(@types/node@22.9.0)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3))(openapi-types@12.1.3):
     dependencies:
       '@astrojs/markdown-remark': 5.3.0
-      '@astrojs/starlight': 0.26.4(astro@4.16.6(@types/node@20.16.11)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3))
+      '@astrojs/starlight': 0.26.4(astro@4.16.6(@types/node@22.9.0)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3))
       '@readme/openapi-parser': 2.5.0(openapi-types@12.1.3)
-      astro: 4.16.6(@types/node@20.16.11)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3)
+      astro: 4.16.6(@types/node@22.9.0)(rollup@4.24.0)(sass@1.79.5)(terser@5.34.1)(typescript@5.6.3)
       github-slugger: 2.0.0
     transitivePeerDependencies:
       - openapi-types
@@ -14449,6 +15003,8 @@ snapshots:
 
   std-env@3.7.0: {}
 
+  std-env@3.8.0: {}
+
   stdin-discarder@0.2.2: {}
 
   stream-replace-string@2.0.0: {}
@@ -14483,7 +15039,7 @@ snapshots:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
       es-object-atoms: 1.0.0
 
   string.prototype.trimend@1.0.8:
@@ -14549,7 +15105,7 @@ snapshots:
 
   stylehacks@7.0.4(postcss@8.4.47):
     dependencies:
-      browserslist: 4.24.0
+      browserslist: 4.24.2
       postcss: 8.4.47
       postcss-selector-parser: 6.1.2
 
@@ -14625,7 +15181,7 @@ snapshots:
   synckit@0.9.2:
     dependencies:
       '@pkgr/core': 0.1.1
-      tslib: 2.8.0
+      tslib: 2.8.1
 
   system-architecture@0.1.0: {}
 
@@ -14745,7 +15301,7 @@ snapshots:
 
   trough@2.2.0: {}
 
-  ts-api-utils@1.3.0(typescript@5.6.3):
+  ts-api-utils@1.4.0(typescript@5.6.3):
     dependencies:
       typescript: 5.6.3
 
@@ -14764,36 +15320,38 @@ snapshots:
 
   tslib@2.8.0: {}
 
+  tslib@2.8.1: {}
+
   tunnel-agent@0.6.0:
     dependencies:
       safe-buffer: 5.2.1
 
-  turbo-darwin-64@2.2.1:
+  turbo-darwin-64@2.2.3:
     optional: true
 
-  turbo-darwin-arm64@2.2.1:
+  turbo-darwin-arm64@2.2.3:
     optional: true
 
-  turbo-linux-64@2.2.1:
+  turbo-linux-64@2.2.3:
     optional: true
 
-  turbo-linux-arm64@2.2.1:
+  turbo-linux-arm64@2.2.3:
     optional: true
 
-  turbo-windows-64@2.2.1:
+  turbo-windows-64@2.2.3:
     optional: true
 
-  turbo-windows-arm64@2.2.1:
+  turbo-windows-arm64@2.2.3:
     optional: true
 
-  turbo@2.2.1:
+  turbo@2.2.3:
     optionalDependencies:
-      turbo-darwin-64: 2.2.1
-      turbo-darwin-arm64: 2.2.1
-      turbo-linux-64: 2.2.1
-      turbo-linux-arm64: 2.2.1
-      turbo-windows-64: 2.2.1
-      turbo-windows-arm64: 2.2.1
+      turbo-darwin-64: 2.2.3
+      turbo-darwin-arm64: 2.2.3
+      turbo-linux-64: 2.2.3
+      turbo-linux-arm64: 2.2.3
+      turbo-windows-64: 2.2.3
+      turbo-windows-arm64: 2.2.3
 
   type-check@0.4.0:
     dependencies:
@@ -14931,6 +15489,24 @@ snapshots:
       - rollup
       - webpack-sources
 
+  unimport@3.13.2(rollup@4.24.0):
+    dependencies:
+      '@rollup/pluginutils': 5.1.3(rollup@4.24.0)
+      acorn: 8.14.0
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      fast-glob: 3.3.2
+      local-pkg: 0.5.0
+      magic-string: 0.30.12
+      mlly: 1.7.3
+      pathe: 1.1.2
+      pkg-types: 1.2.1
+      scule: 1.3.0
+      strip-literal: 2.1.0
+      unplugin: 1.16.0
+    transitivePeerDependencies:
+      - rollup
+
   unist-util-find-after@5.0.0:
     dependencies:
       '@types/unist': 3.0.3
@@ -15007,6 +15583,11 @@ snapshots:
       acorn: 8.12.1
       webpack-virtual-modules: 0.6.2
 
+  unplugin@1.16.0:
+    dependencies:
+      acorn: 8.14.0
+      webpack-virtual-modules: 0.6.2
+
   unstorage@1.12.0(ioredis@5.4.1):
     dependencies:
       anymatch: 3.1.3
@@ -15059,6 +15640,12 @@ snapshots:
       escalade: 3.2.0
       picocolors: 1.1.0
 
+  update-browserslist-db@1.1.1(browserslist@4.24.2):
+    dependencies:
+      browserslist: 4.24.2
+      escalade: 3.2.0
+      picocolors: 1.1.0
+
   uqr@0.1.2: {}
 
   uri-js@4.4.1:
@@ -15182,9 +15769,20 @@ snapshots:
       sass: 1.79.5
       terser: 5.34.1
 
-  vitefu@1.0.3(vite@5.4.9(@types/node@20.16.11)(sass@1.79.5)(terser@5.34.1)):
+  vite@5.4.9(@types/node@22.9.0)(sass@1.79.5)(terser@5.34.1):
+    dependencies:
+      esbuild: 0.21.5
+      postcss: 8.4.47
+      rollup: 4.24.0
     optionalDependencies:
-      vite: 5.4.9(@types/node@20.16.11)(sass@1.79.5)(terser@5.34.1)
+      '@types/node': 22.9.0
+      fsevents: 2.3.3
+      sass: 1.79.5
+      terser: 5.34.1
+
+  vitefu@1.0.3(vite@5.4.9(@types/node@22.9.0)(sass@1.79.5)(terser@5.34.1)):
+    optionalDependencies:
+      vite: 5.4.9(@types/node@22.9.0)(sass@1.79.5)(terser@5.34.1)
 
   volar-service-css@0.0.61(@volar/language-service@2.4.6):
     dependencies:
@@ -15314,10 +15912,10 @@ snapshots:
 
   vue-devtools-stub@0.1.0: {}
 
-  vue-eslint-parser@9.4.3(eslint@9.12.0(jiti@2.3.3)):
+  vue-eslint-parser@9.4.3(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
       debug: 4.3.7
-      eslint: 9.12.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
@@ -15329,6 +15927,8 @@ snapshots:
 
   vue-multiselect@3.0.0: {}
 
+  vue-multiselect@3.0.0-alpha.2: {}
+
   vue-observe-visibility@2.0.0-alpha.1(vue@3.5.12(typescript@5.6.3)):
     dependencies:
       vue: 3.5.12(typescript@5.6.3)
@@ -15358,6 +15958,14 @@ snapshots:
       semver: 7.6.3
       typescript: 5.6.3
 
+  vue-typed-virtual-list@1.0.10(vue@3.5.12(typescript@5.6.3)):
+    dependencies:
+      '@vueuse/core': 9.13.0(vue@3.5.12(typescript@5.6.3))
+      debounce: 1.2.1
+      vue: 3.5.12(typescript@5.6.3)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   vue-virtual-scroller@2.0.0-beta.8(vue@3.5.12(typescript@5.6.3)):
     dependencies:
       mitt: 2.1.0
@@ -15365,6 +15973,12 @@ snapshots:
       vue-observe-visibility: 2.0.0-alpha.1(vue@3.5.12(typescript@5.6.3))
       vue-resize: 2.0.0-alpha.1(vue@3.5.12(typescript@5.6.3))
 
+  vue3-ace-editor@2.2.4(ace-builds@1.36.5)(vue@3.5.12(typescript@5.6.3)):
+    dependencies:
+      ace-builds: 1.36.5
+      resize-observer-polyfill: 1.5.1
+      vue: 3.5.12(typescript@5.6.3)
+
   vue3-apexcharts@1.7.0(apexcharts@3.54.1)(vue@3.5.12(typescript@5.6.3)):
     dependencies:
       apexcharts: 3.54.1
diff --git a/turbo.json b/turbo.json
index 73dd66fc0..71cd9ce3b 100644
--- a/turbo.json
+++ b/turbo.json
@@ -16,13 +16,15 @@
         "CF_PAGES_*",
         "HEROKU_APP_NAME",
         "STRIPE_PUBLISHABLE_KEY",
+        "PYRO_BASE_URL",
+        "PROD_OVERRIDE",
+        "PYRO_MASTER_KEY",
+        "PORT",
         "SQLX_OFFLINE"
       ]
     },
     "lint": {
-      "env": [
-        "SQLX_OFFLINE"
-      ]
+      "env": ["SQLX_OFFLINE"]
     },
     "dev": {
       "cache": false,
@@ -31,10 +33,7 @@
       "env": ["DISPLAY", "WEBKIT_DISABLE_DMABUF_RENDERER"]
     },
     "test": {
-      "env": [
-        "SQLX_OFFLINE",
-        "DATABASE_URL"
-      ]
+      "env": ["SQLX_OFFLINE", "DATABASE_URL"]
     },
     "fix": {
       "cache": false