Fix lint checks

Merge branch 'main' into app-users-orgs-and-more
2025-04-26 23:27:15 +02:00 · 2025-04-26 23:22:34 +02:00 · 2025-03-03 12:48:04 -08:00 · 2025-02-21 14:18:56 -08:00 · 2025-02-21 14:17:28 -08:00 · 2025-02-21 14:17:28 -08:00
348 changed files with 6502 additions and 8279 deletions
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -345,7 +345,7 @@ dependencies = [
 "getrandom 0.2.15",
 "once_cell",
 "version_check",
- "zerocopy 0.7.35",
+ "zerocopy",
 ]

 [[package]]
@@ -481,7 +481,6 @@ version = "0.1.0"
 dependencies = [
 "chrono",
 "either",
- "lazy_static",
 "rand 0.8.5",
 "serde",
 "serde_bytes",
@@ -616,7 +615,7 @@ dependencies = [
 "futures-lite 2.3.0",
 "parking",
 "polling",
- "rustix 0.38.37",
+ "rustix",
 "slab",
 "tracing",
 "windows-sys 0.59.0",
@@ -648,7 +647,7 @@ dependencies = [
 "cfg-if",
 "event-listener 5.3.1",
 "futures-lite 2.3.0",
- "rustix 0.38.37",
+ "rustix",
 "tracing",
 ]

@@ -675,7 +674,7 @@ dependencies = [
 "cfg-if",
 "futures-core",
 "futures-io",
- "rustix 0.38.37",
+ "rustix",
 "signal-hook-registry",
 "slab",
 "windows-sys 0.59.0",
@@ -762,17 +761,6 @@ dependencies = [
 "webpki-roots 0.26.6",
 ]

-[[package]]
-name = "async-walkdir"
-version = "2.1.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "37672978ae0febce7516ae0a85b53e6185159a9a28787391eb63fc44ec36037d"
-dependencies = [
- "async-fs",
- "futures-lite 2.3.0",
- "thiserror 2.0.7",
-]
-
 [[package]]
 name = "async_zip"
 version = "0.0.17"
@@ -1821,12 +1809,6 @@ dependencies = [
 "cfg-if",
 ]

-[[package]]
-name = "critical-section"
-version = "1.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "790eea4361631c5e7d22598ecd5723ff611904e3344ce8720784c93e3d83d40b"
-
 [[package]]
 name = "crossbeam-channel"
 version = "0.5.13"
@@ -2481,9 +2463,9 @@ dependencies = [

 [[package]]
 name = "either"
-version = "1.15.0"
+version = "1.13.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "48c757948c5ede0e46177b7add2e67155f70e33c07fea8284df6576da70b3719"
+checksum = "60b1af1c220855b6ceac025d3f6ecdd2b7c4894bfe9cd9bda4fbb4bc7c0d4cf0"
 dependencies = [
 "serde",
 ]
@@ -2571,18 +2553,6 @@ version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a3d8a32ae18130a3c84dd492d4215c3d913c3b07c6b63c2eb3eb7ff1101ab7bf"

-[[package]]
-name = "enum-as-inner"
-version = "0.6.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a1e6a265c649f3f5979b601d26f1d05ada116434c87741c9493cb56218f76cbc"
-dependencies = [
- "heck 0.5.0",
- "proc-macro2",
- "quote",
- "syn 2.0.90",
-]
-
 [[package]]
 name = "enumflags2"
 version = "0.7.10"
@@ -2604,28 +2574,6 @@ dependencies = [
 "syn 2.0.90",
 ]

-[[package]]
-name = "enumset"
-version = "1.1.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d07a4b049558765cef5f0c1a273c3fc57084d768b44d2f98127aef4cceb17293"
-dependencies = [
- "enumset_derive",
- "serde",
-]
-
-[[package]]
-name = "enumset_derive"
-version = "0.10.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "59c3b24c345d8c314966bdc1832f6c2635bfcce8e7cf363bd115987bba2ee242"
-dependencies = [
- "darling 0.20.10",
- "proc-macro2",
- "quote",
- "syn 2.0.90",
-]
-
 [[package]]
 name = "env_filter"
 version = "0.1.3"
@@ -2663,12 +2611,12 @@ dependencies = [

 [[package]]
 name = "errno"
-version = "0.3.11"
+version = "0.3.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "976dd42dc7e85965fe702eb8164f21f450704bdde31faefd6471dba214cb594e"
+checksum = "534c5cf6194dfab3db3242765c03bbe257cf92f22b38f6bc0c58d59108a820ba"
 dependencies = [
 "libc",
- "windows-sys 0.59.0",
+ "windows-sys 0.52.0",
 ]

 [[package]]
@@ -2881,17 +2829,6 @@ dependencies = [
 "percent-encoding",
 ]

-[[package]]
-name = "fs4"
-version = "0.13.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8640e34b88f7652208ce9e88b1a37a2ae95227d84abec377ccd3c5cfeb141ed4"
-dependencies = [
- "rustix 1.0.5",
- "tokio",
- "windows-sys 0.59.0",
-]
-
 [[package]]
 name = "fsevent-sys"
 version = "4.1.0"
@@ -3153,19 +3090,6 @@ dependencies = [
 "x11",
 ]

-[[package]]
-name = "generator"
-version = "0.8.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cc6bd114ceda131d3b1d665eba35788690ad37f5916457286b32ab6fd3c438dd"
-dependencies = [
- "cfg-if",
- "libc",
- "log",
- "rustversion",
- "windows 0.58.0",
-]
-
 [[package]]
 name = "generic-array"
 version = "0.14.7"
@@ -3183,7 +3107,7 @@ version = "0.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "dc3655aa6818d65bc620d6911f05aa7b6aeb596291e1e9f79e52df85583d1e30"
 dependencies = [
- "rustix 0.38.37",
+ "rustix",
 "windows-targets 0.52.6",
 ]

@@ -3211,18 +3135,6 @@ dependencies = [
 "wasm-bindgen",
 ]

-[[package]]
-name = "getrandom"
-version = "0.3.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "73fea8450eea4bac3940448fb7ae50d91f034f941199fcd9d909a5a07aa455f0"
-dependencies = [
- "cfg-if",
- "libc",
- "r-efi",
- "wasi 0.14.2+wasi-0.2.4",
-]
-
 [[package]]
 name = "gif"
 version = "0.13.1"
@@ -3532,54 +3444,6 @@ version = "0.4.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7f24254aa9a54b5c858eaee2f5bccdb46aaf0e486a595ed5fd8f86ba55232a70"

-[[package]]
-name = "hickory-proto"
-version = "0.25.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6d844af74f7b799e41c78221be863bade11c430d46042c3b49ca8ae0c6d27287"
-dependencies = [
- "async-recursion",
- "async-trait",
- "cfg-if",
- "critical-section",
- "data-encoding",
- "enum-as-inner",
- "futures-channel",
- "futures-io",
- "futures-util",
- "idna 1.0.3",
- "ipnet",
- "once_cell",
- "rand 0.9.0",
- "ring 0.17.8",
- "thiserror 2.0.7",
- "tinyvec",
- "tokio",
- "tracing",
- "url",
-]
-
-[[package]]
-name = "hickory-resolver"
-version = "0.25.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a128410b38d6f931fcc6ca5c107a3b02cabd6c05967841269a4ad65d23c44331"
-dependencies = [
- "cfg-if",
- "futures-util",
- "hickory-proto",
- "ipconfig",
- "moka",
- "once_cell",
- "parking_lot",
- "rand 0.9.0",
- "resolv-conf",
- "smallvec",
- "thiserror 2.0.7",
- "tokio",
- "tracing",
-]
-
 [[package]]
 name = "hkdf"
 version = "0.12.4"
@@ -4053,23 +3917,24 @@ dependencies = [

 [[package]]
 name = "idna"
-version = "1.0.3"
+version = "0.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "686f825264d630750a544639377bae737628043f20d38bbc029e8f29ea968a7e"
+checksum = "634d9b1461af396cad843f47fdba5597a4f9e6ddd4bfb6ff5d85028c25cb12f6"
 dependencies = [
- "idna_adapter",
- "smallvec",
- "utf8_iter",
+ "unicode-bidi",
+ "unicode-normalization",
 ]

 [[package]]
-name = "idna_adapter"
-version = "1.2.0"
+name = "idna"
+version = "1.0.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "daca1df1c957320b2cf139ac61e7bd64fed304c5040df000a745aa1de3b4ef71"
+checksum = "bd69211b9b519e98303c015e21a007e293db403b6c85b9b124e133d25e242cdd"
 dependencies = [
 "icu_normalizer",
 "icu_properties",
+ "smallvec",
+ "utf8_iter",
 ]

 [[package]]
@@ -4180,7 +4045,7 @@ dependencies = [
 "log",
 "num-format",
 "once_cell",
- "quick-xml 0.37.4",
+ "quick-xml 0.37.2",
 "rgb",
 "str_stack",
 ]
@@ -4223,18 +4088,6 @@ dependencies = [
 "cfg-if",
 ]

-[[package]]
-name = "ipconfig"
-version = "0.3.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b58db92f96b720de98181bbbe63c831e87005ab460c1bf306eb2622b4707997f"
-dependencies = [
- "socket2",
- "widestring",
- "windows-sys 0.48.0",
- "winreg 0.50.0",
-]
-
 [[package]]
 name = "ipnet"
 version = "2.10.0"
@@ -4634,7 +4487,7 @@ dependencies = [
 "futures-util",
 "hostname",
 "httpdate",
- "idna 1.0.3",
+ "idna 1.0.2",
 "mime",
 "native-tls",
 "nom",
@@ -4671,9 +4524,9 @@ dependencies = [

 [[package]]
 name = "libc"
-version = "0.2.172"
+version = "0.2.159"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d750af042f7ef4f724306de029d18836c26c1765a54a6a3f094cbd23a7267ffa"
+checksum = "561d97a539a36e26a9a5fad1ea11a3039a67714694aaa379433e580854bc3dc5"

 [[package]]
 name = "libdbus-sys"
@@ -4745,12 +4598,6 @@ version = "0.4.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "78b3ae25bc7c8c38cec158d1f2757ee79e9b3740fbc7ccf0e59e4b08d793fa89"

-[[package]]
-name = "linux-raw-sys"
-version = "0.9.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cd945864f07fe9f5371a27ad7b52a172b4b499999f1d97574c9fa68373937e12"
-
 [[package]]
 name = "litemap"
 version = "0.7.3"
@@ -4790,19 +4637,6 @@ version = "0.4.22"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a7a70ba024b9dc04c27ea2f0c0548feb474ec5c54bba33a7f72f873a39d07b24"

-[[package]]
-name = "loom"
-version = "0.7.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "419e0dc8046cb947daa77eb95ae174acfbddb7673b4151f56d1eed8e93fbfaca"
-dependencies = [
- "cfg-if",
- "generator",
- "scoped-tls",
- "tracing",
- "tracing-subscriber",
-]
-
 [[package]]
 name = "lru-cache"
 version = "0.1.2"
@@ -5080,25 +4914,6 @@ dependencies = [
 "windows-sys 0.52.0",
 ]

-[[package]]
-name = "moka"
-version = "0.12.10"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a9321642ca94a4282428e6ea4af8cc2ca4eac48ac7a6a4ea8f33f76d0ce70926"
-dependencies = [
- "crossbeam-channel",
- "crossbeam-epoch",
- "crossbeam-utils",
- "loom",
- "parking_lot",
- "portable-atomic",
- "rustc_version",
- "smallvec",
- "tagptr",
- "thiserror 1.0.64",
- "uuid 1.12.0",
-]
-
 [[package]]
 name = "muda"
 version = "0.15.1"
@@ -5700,7 +5515,6 @@ version = "1.20.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "82881c4be219ab5faaf2ad5e5e5ecdff8c66bd7402ca3160975c93b24961afd1"
 dependencies = [
- "critical-section",
 "portable-atomic",
 ]

@@ -6241,7 +6055,7 @@ dependencies = [
 "concurrent-queue",
 "hermit-abi 0.4.0",
 "pin-project-lite",
- "rustix 0.38.37",
+ "rustix",
 "tracing",
 "windows-sys 0.59.0",
 ]
@@ -6279,7 +6093,7 @@ version = "0.2.20"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "77957b295656769bb8ad2b6a6b09d897d94f05c41b069aede1fcdaa675eaea04"
 dependencies = [
- "zerocopy 0.7.35",
+ "zerocopy",
 ]

 [[package]]
@@ -6388,7 +6202,7 @@ dependencies = [
 "hex",
 "lazy_static",
 "procfs-core",
- "rustix 0.38.37",
+ "rustix",
 ]

 [[package]]
@@ -6494,31 +6308,6 @@ dependencies = [
 "bytemuck",
 ]

-[[package]]
-name = "quartz_nbt"
-version = "0.2.9"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "daf389329ba2dad9c6d898b7955a64e58c89dd52d04f4e2753b9d86eb5f49821"
-dependencies = [
- "anyhow",
- "byteorder",
- "cesu8",
- "flate2",
- "quartz_nbt_macros",
- "serde",
-]
-
-[[package]]
-name = "quartz_nbt_macros"
-version = "0.1.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "289baa0c8a4d1f840d2de528a7f8c29e0e9af48b3018172b3edad4f716e8daed"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn 1.0.109",
-]
-
 [[package]]
 name = "quick-error"
 version = "2.0.1"
@@ -6564,12 +6353,11 @@ dependencies = [

 [[package]]
 name = "quick-xml"
-version = "0.37.4"
+version = "0.37.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a4ce8c88de324ff838700f36fb6ab86c96df0e3c4ab6ef3a9b2044465cce1369"
+checksum = "165859e9e55f79d67b96c5d96f4e88b6f2695a1972849c15a6a3f5c59fc2c003"
 dependencies = [
 "memchr",
- "tokio",
 ]

 [[package]]
@@ -6635,12 +6423,6 @@ version = "0.5.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "640c9bd8497b02465aeef5375144c26062e0dcd5939dfcbb0f5db76cb8c17c73"

-[[package]]
-name = "r-efi"
-version = "5.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "74765f6d916ee2faa39bc8e68e4f3ed8949b48cccdac59983d287a7cb71ce9c5"
-
 [[package]]
 name = "r2d2"
 version = "0.8.10"
@@ -6683,17 +6465,6 @@ dependencies = [
 "rand_core 0.6.4",
 ]

-[[package]]
-name = "rand"
-version = "0.9.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3779b94aeb87e8bd4e834cee3650289ee9e0d5677f976ecdb6d219e5f4f6cd94"
-dependencies = [
- "rand_chacha 0.9.0",
- "rand_core 0.9.3",
- "zerocopy 0.8.24",
-]
-
 [[package]]
 name = "rand_chacha"
 version = "0.2.2"
@@ -6714,16 +6485,6 @@ dependencies = [
 "rand_core 0.6.4",
 ]

-[[package]]
-name = "rand_chacha"
-version = "0.9.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d3022b5f1df60f26e1ffddd6c66e8aa15de382ae63b3a0c1bfc0e4d3e3f325cb"
-dependencies = [
- "ppv-lite86",
- "rand_core 0.9.3",
-]
-
 [[package]]
 name = "rand_core"
 version = "0.5.1"
@@ -6742,15 +6503,6 @@ dependencies = [
 "getrandom 0.2.15",
 ]

-[[package]]
-name = "rand_core"
-version = "0.9.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "99d9a13982dcf210057a8a78572b2217b667c3beacbf3a0d8b454f6f82837d38"
-dependencies = [
- "getrandom 0.3.2",
-]
-
 [[package]]
 name = "rand_hc"
 version = "0.2.0"
@@ -7017,15 +6769,6 @@ dependencies = [
 "windows-registry 0.2.0",
 ]

-[[package]]
-name = "resolv-conf"
-version = "0.7.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "48375394603e3dd4b2d64371f7148fd8c7baa2680e28741f2cb8d23b59e3d4c4"
-dependencies = [
- "hostname",
-]
-
 [[package]]
 name = "result"
 version = "1.0.0"
@@ -7275,23 +7018,10 @@ dependencies = [
 "bitflags 2.6.0",
 "errno",
 "libc",
- "linux-raw-sys 0.4.14",
+ "linux-raw-sys",
 "windows-sys 0.52.0",
 ]

-[[package]]
-name = "rustix"
-version = "1.0.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d97817398dd4bb2e6da002002db259209759911da105da92bec29ccb12cf58bf"
-dependencies = [
- "bitflags 2.6.0",
- "errno",
- "libc",
- "linux-raw-sys 0.9.4",
- "windows-sys 0.59.0",
-]
-
 [[package]]
 name = "rustls"
 version = "0.20.9"
@@ -8756,12 +8486,6 @@ dependencies = [
 "version-compare",
 ]

-[[package]]
-name = "tagptr"
-version = "0.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7b2093cf4c8eb1e67749a6762251bc9cd836b6fc171623bd0a9d324d37af2417"
-
 [[package]]
 name = "tao"
 version = "0.30.8"
@@ -9230,7 +8954,7 @@ dependencies = [
 "cfg-if",
 "fastrand 2.1.1",
 "once_cell",
- "rustix 0.38.37",
+ "rustix",
 "windows-sys 0.59.0",
 ]

@@ -9258,13 +8982,11 @@ dependencies = [

 [[package]]
 name = "theseus"
-version = "0.9.5"
+version = "0.9.3"
 dependencies = [
 "ariadne",
- "async-compression",
 "async-recursion",
 "async-tungstenite",
- "async-walkdir",
 "async_zip",
 "base64 0.22.1",
 "byteorder",
@@ -9276,19 +8998,14 @@ dependencies = [
 "discord-rich-presence",
 "dunce",
 "either",
- "enumset",
 "flate2",
- "fs4",
 "futures",
- "hickory-resolver",
 "indicatif",
 "lazy_static",
 "notify",
 "notify-debouncer-mini",
 "p256",
 "paste",
- "quartz_nbt",
- "quick-xml 0.37.4",
 "rand 0.8.5",
 "regex",
 "reqwest 0.12.7",
@@ -9304,7 +9021,6 @@ dependencies = [
 "tempfile",
 "thiserror 1.0.64",
 "tokio",
- "tokio-util",
 "tracing",
 "tracing-error",
 "tracing-subscriber",
@@ -9317,14 +9033,12 @@ dependencies = [

 [[package]]
 name = "theseus_gui"
-version = "0.9.5"
+version = "0.9.3"
 dependencies = [
 "chrono",
 "cocoa 0.25.0",
 "daedalus",
 "dashmap 6.1.0",
- "either",
- "enumset",
 "native-dialog",
 "objc",
 "opener",
@@ -9349,7 +9063,6 @@ dependencies = [
 "tracing",
 "tracing-error",
 "url",
- "urlencoding",
 "uuid 1.12.0",
 "window-shadows",
 ]
@@ -9358,7 +9071,6 @@ dependencies = [
 name = "theseus_playground"
 version = "0.0.0"
 dependencies = [
- "enumset",
 "theseus",
 "tokio",
 "tracing",
@@ -9602,9 +9314,9 @@ dependencies = [

 [[package]]
 name = "tokio-util"
-version = "0.7.14"
+version = "0.7.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6b9590b93e6fcc1739458317cccd391ad3955e2bde8913edf6f95f9e65a8f034"
+checksum = "61e7c3654c13bcd040d4a03abee2c75b1d14a37b423cf5a813ceae1cc903ec6a"
 dependencies = [
 "bytes",
 "futures-core",
@@ -10069,12 +9781,12 @@ dependencies = [

 [[package]]
 name = "url"
-version = "2.5.4"
+version = "2.5.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "32f8b686cadd1473f4bd0117a5d28d36b1ade384ea9b5069a1c40aefed7fda60"
+checksum = "22784dbdf76fdde8af1aeda5622b546b422b6fc585325248a2bf9f5e41e94d6c"
 dependencies = [
 "form_urlencoded",
- "idna 1.0.3",
+ "idna 0.5.0",
 "percent-encoding",
 "serde",
 ]
@@ -10288,15 +10000,6 @@ version = "0.11.0+wasi-snapshot-preview1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423"

-[[package]]
-name = "wasi"
-version = "0.14.2+wasi-0.2.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9683f9a5a998d873c0d21fcbe3c083009670149a8fab228644b8bd36b2c48cb3"
-dependencies = [
- "wit-bindgen-rt",
-]
-
 [[package]]
 name = "wasite"
 version = "0.1.0"
@@ -10391,7 +10094,7 @@ checksum = "056535ced7a150d45159d3a8dc30f91a2e2d588ca0b23f70e56033622b8016f6"
 dependencies = [
 "cc",
 "downcast-rs",
- "rustix 0.38.37",
+ "rustix",
 "scoped-tls",
 "smallvec",
 "wayland-sys",
@@ -10404,7 +10107,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b66249d3fc69f76fd74c82cc319300faa554e9d865dab1f7cd66cc20db10b280"
 dependencies = [
 "bitflags 2.6.0",
- "rustix 0.38.37",
+ "rustix",
 "wayland-backend",
 "wayland-scanner",
 ]
@@ -10619,7 +10322,7 @@ dependencies = [
 "either",
 "home",
 "once_cell",
- "rustix 0.38.37",
+ "rustix",
 ]

 [[package]]
@@ -10633,12 +10336,6 @@ dependencies = [
 "web-sys",
 ]

-[[package]]
-name = "widestring"
-version = "1.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dd7cf3379ca1aac9eea11fba24fd7e315d621f8dfe35c8d7d2be8b793726e07d"
-
 [[package]]
 name = "winapi"
 version = "0.3.9"
@@ -11071,15 +10768,6 @@ dependencies = [
 "windows-sys 0.48.0",
 ]

-[[package]]
-name = "wit-bindgen-rt"
-version = "0.39.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6f42320e61fe2cfd34354ecb597f86f413484a798ba44a8ca1165c58d42da6c1"
-dependencies = [
- "bitflags 2.6.0",
-]
-
 [[package]]
 name = "woothee"
 version = "0.13.0"
@@ -11181,8 +10869,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8da84f1a25939b27f6820d92aed108f83ff920fdf11a7b19366c27c4cda81d4f"
 dependencies = [
 "libc",
- "linux-raw-sys 0.4.14",
- "rustix 0.38.37",
+ "linux-raw-sys",
+ "rustix",
 ]

 [[package]]
@@ -11397,16 +11085,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1b9b4fd18abc82b8136838da5d50bae7bdea537c574d8dc1a34ed098d6c166f0"
 dependencies = [
 "byteorder",
- "zerocopy-derive 0.7.35",
-]
-
-[[package]]
-name = "zerocopy"
-version = "0.8.24"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2586fea28e186957ef732a5f8b3be2da217d65c5969d4b1e17f973ebbe876879"
-dependencies = [
- "zerocopy-derive 0.8.24",
+ "zerocopy-derive",
 ]

 [[package]]
@@ -11420,17 +11099,6 @@ dependencies = [
 "syn 2.0.90",
 ]

-[[package]]
-name = "zerocopy-derive"
-version = "0.8.24"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a996a8f63c5c4448cd959ac1bab0aaa3306ccfd060472f85943ee0750f0169be"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn 2.0.90",
-]
-
 [[package]]
 name = "zerofrom"
 version = "0.1.4"
--- a/apps/app-frontend/package.json
+++ b/apps/app-frontend/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@modrinth/app-frontend",
  "private": true,
-  "version": "0.9.5",
+  "version": "0.9.3",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -16,7 +16,6 @@
    "@modrinth/ui": "workspace:*",
    "@modrinth/utils": "workspace:*",
    "@sentry/vue": "^8.27.0",
-    "@geometrically/minecraft-motd-parser": "^1.1.4",
    "@tauri-apps/api": "^2.1.1",
    "@tauri-apps/plugin-dialog": "^2.2.0",
    "@tauri-apps/plugin-os": "^2.2.0",
@@ -51,8 +50,7 @@
    "tsconfig": "workspace:*",
    "typescript": "^5.5.4",
    "vite": "^5.4.6",
-    "vue-tsc": "^2.1.6",
-    "@taijased/vue-render-tracker": "^1.0.7"
+    "vue-tsc": "^2.1.6"
  },
  "packageManager": "pnpm@9.4.0",
  "web-types": "../../web-types.json"
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -2,6 +2,7 @@
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'
 import {
+  UserIcon,
  ArrowBigUpDashIcon,
  CompassIcon,
  DownloadIcon,
@@ -16,7 +17,6 @@ import {
  RestoreIcon,
  RightArrowIcon,
  SettingsIcon,
-  WorldIcon,
  XIcon,
 } from '@modrinth/assets'
 import { Avatar, Button, ButtonStyled, Notifications, OverflowMenu } from '@modrinth/ui'
@@ -24,7 +24,7 @@ import { useLoading, useTheming } from '@/store/state'
 import ModrinthAppLogo from '@/assets/modrinth_app.svg?component'
 import AccountsCard from '@/components/ui/AccountsCard.vue'
 import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
-import { get } from '@/helpers/settings.ts'
+import { get } from '@/helpers/settings'
 import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
 import RunningAppBar from '@/components/ui/RunningAppBar.vue'
 import SplashScreen from '@/components/ui/SplashScreen.vue'
@@ -167,17 +167,11 @@ async function setupApp() {
    `https://api.modrinth.com/appCriticalAnnouncement.json?version=${version}`,
    'criticalAnnouncements',
    true,
-  )
-    .then((res) => {
-      if (res && res.header && res.body) {
-        criticalErrorMessage.value = res
-      }
-    })
-    .catch(() => {
-      console.log(
-        `No critical announcement found at https://api.modrinth.com/appCriticalAnnouncement.json?version=${version}`,
-      )
-    })
+  ).then((res) => {
+    if (res && res.header && res.body) {
+      criticalErrorMessage.value = res
+    }
+  })

  useFetch(`https://modrinth.com/blog/news.json`, 'news', true).then((res) => {
    if (res && res.articles) {
@@ -240,6 +234,9 @@ async function fetchCredentials() {
  credentials.value = creds
 }

+const profileMenu = ref()
+const isProfileMenuOpen = computed(() => profileMenu.value?.isOpen)
+
 async function signIn() {
  await login().catch(handleError)
  await fetchCredentials()
@@ -366,7 +363,7 @@ function handleAuxClick(e) {
 <template>
  <SplashScreen v-if="!stateFailed" ref="splashScreen" data-tauri-drag-region />
  <div id="teleports"></div>
-  <div v-if="stateInitialized" class="app-grid-layout experimental-styles-within relative">
+  <div v-if="stateInitialized" class="app-grid-layout relative">
    <Suspense>
      <AppSettingsModal ref="settingsModal" />
    </Suspense>
@@ -379,9 +376,6 @@ function handleAuxClick(e) {
      <NavButton v-tooltip.right="'Home'" to="/">
        <HomeIcon />
      </NavButton>
-      <NavButton v-if="themeStore.featureFlags.worlds_tab" v-tooltip.right="'Worlds'" to="/worlds">
-        <WorldIcon />
-      </NavButton>
      <NavButton
        v-tooltip.right="'Discover content'"
        to="/browse/modpack"
@@ -420,26 +414,34 @@ function handleAuxClick(e) {
      <NavButton v-tooltip.right="'Settings'" :to="() => $refs.settingsModal.show()">
        <SettingsIcon />
      </NavButton>
-      <ButtonStyled v-if="credentials" type="transparent" circular>
-        <OverflowMenu
-          :options="[
-            {
-              id: 'sign-out',
-              action: () => logOut(),
-              color: 'danger',
-            },
-          ]"
-          direction="left"
-        >
-          <Avatar
-            :src="credentials.user.avatar_url"
-            :alt="credentials.user.username"
-            size="32px"
-            circle
-          />
-          <template #sign-out> <LogOutIcon /> Sign out </template>
-        </OverflowMenu>
-      </ButtonStyled>
+      <OverflowMenu
+        v-if="credentials"
+        ref="profileMenu"
+        placement="right-end"
+        class="w-12 h-12 border-none cursor-pointer rounded-full flex items-center justify-center text-2xl transition-all button-animation"
+        :class="isProfileMenuOpen ? 'bg-button-bg' : 'bg-transparent hover:bg-button-bg'"
+        :options="[
+          {
+            id: 'profile',
+            action: () => router.push(`/user/${credentials.user.id}`),
+          },
+          {
+            id: 'sign-out',
+            action: () => logOut(),
+            color: 'danger',
+          },
+        ]"
+        direction="left"
+      >
+        <Avatar
+          :src="credentials.user.avatar_url"
+          :alt="credentials.user.username"
+          size="32px"
+          circle
+        />
+        <template #profile> <UserIcon /> Profile </template>
+        <template #sign-out> <LogOutIcon /> Sign out </template>
+      </OverflowMenu>
      <NavButton v-else v-tooltip.right="'Sign in'" :to="() => signIn()">
        <LogInIcon />
        <template #label>Sign in</template>
@@ -708,6 +710,9 @@ function handleAuxClick(e) {

 .app-grid-navbar {
  grid-area: nav;
+
+  // Fixes SVG scaling issues
+  filter: brightness(1.00001);
 }

 .app-grid-statusbar {
@@ -791,6 +796,7 @@ function handleAuxClick(e) {
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
+  scrollbar-gutter: stable;
 }

 .app-contents::before {
--- a/apps/app-frontend/src/assets/font/minecraft_font.ttf
+++ b/apps/app-frontend/src/assets/font/minecraft_font.ttf
--- a/apps/app-frontend/src/assets/stylesheets/global.scss
+++ b/apps/app-frontend/src/assets/stylesheets/global.scss
@@ -2,44 +2,8 @@
@tailwind components;
@tailwind utilities;

-@font-face {
-  font-family: 'bundled-minecraft-font-mrapp';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url('https://cdn-raw.modrinth.com/fonts/minecraft/regular.otf') format('opentype');
-}
-
-@font-face {
-  font-family: 'bundled-minecraft-font-mrapp';
-  font-style: italic;
-  font-display: swap;
-  font-weight: 400;
-  src: url('https://cdn-raw.modrinth.com/fonts/minecraft/italic.otf') format('opentype');
-}
-
-@font-face {
-  font-family: 'bundled-minecraft-font-mrapp';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 600;
-  src: url('https://cdn-raw.modrinth.com/fonts/minecraft/bold.otf') format('opentype');
-}
-
-@font-face {
-  font-family: 'bundled-minecraft-font-mrapp';
-  font-style: italic;
-  font-display: swap;
-  font-weight: 600;
-  src: url('https://cdn-raw.modrinth.com/fonts/minecraft/bold-italic.otf') format('opentype');
-}
-
-.font-minecraft {
-  font-family: 'bundled-minecraft-font-mrapp', monospace;
-}
-
 :root {
-  font-family: var(--font-standard, sans-serif), sans-serif;
+  font-family: var(--font-standard);
  color-scheme: dark;
  --view-width: calc(100% - 5rem);
  --expanded-view-width: calc(100% - 13rem);
--- a/apps/app-frontend/src/components/RowDisplay.vue
+++ b/apps/app-frontend/src/components/RowDisplay.vue
@@ -10,6 +10,7 @@ import {
  StopCircleIcon,
  ExternalIcon,
  EyeIcon,
+  ChevronRightIcon,
 } from '@modrinth/assets'
 import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
 import Instance from '@/components/ui/Instance.vue'
@@ -25,7 +26,6 @@ import { trackEvent } from '@/helpers/analytics'
 import { handleSevereError } from '@/store/error.js'
 import { install as installVersion } from '@/store/install.js'
 import { openUrl } from '@tauri-apps/plugin-opener'
-import { HeadingLink } from '@modrinth/ui'

 const router = useRouter()

@@ -44,9 +44,7 @@ const props = defineProps({
 })

 const actualInstances = computed(() =>
-  props.instances.filter(
-    (x) => (x && x.instances && x.instances[0] && x.show === undefined) || x.show,
-  ),
+  props.instances.filter((x) => x && x.instances && x.instances[0]),
 )

 const modsRow = ref(null)
@@ -183,34 +181,31 @@ const maxInstancesPerRow = ref(1)
 const maxProjectsPerRow = ref(1)

 const calculateCardsPerRow = () => {
-  if (rows.value.length === 0) {
-    return
-  }
+  if (rows.value && rows.value[0]) {
+    // Calculate how many cards fit in one row
+    const containerWidth = rows.value[0].clientWidth
+    // Convert container width from pixels to rem
+    const containerWidthInRem =
+      containerWidth / parseFloat(getComputedStyle(document.documentElement).fontSize)

-  // Calculate how many cards fit in one row
-  const containerWidth = rows.value[0].clientWidth
-  // Convert container width from pixels to rem
-  const containerWidthInRem =
-    containerWidth / parseFloat(getComputedStyle(document.documentElement).fontSize)
+    maxInstancesPerCompactRow.value = Math.floor((containerWidthInRem + 0.75) / 18.75)
+    maxInstancesPerRow.value = Math.floor((containerWidthInRem + 0.75) / 20.75)
+    maxProjectsPerRow.value = Math.floor((containerWidthInRem + 0.75) / 18.75)

-  maxInstancesPerCompactRow.value = Math.floor((containerWidthInRem + 0.75) / 18.75)
-  maxInstancesPerRow.value = Math.floor((containerWidthInRem + 0.75) / 20.75)
-  maxProjectsPerRow.value = Math.floor((containerWidthInRem + 0.75) / 18.75)
-
-  if (maxInstancesPerRow.value < 5) {
-    maxInstancesPerRow.value *= 2
-  }
-  if (maxInstancesPerCompactRow.value < 5) {
-    maxInstancesPerCompactRow.value *= 2
-  }
-  if (maxProjectsPerRow.value < 3) {
-    maxProjectsPerRow.value *= 2
+    if (maxInstancesPerRow.value < 5) {
+      maxInstancesPerRow.value *= 2
+    }
+    if (maxInstancesPerCompactRow.value < 5) {
+      maxInstancesPerCompactRow.value *= 2
+    }
+    if (maxProjectsPerRow.value < 3) {
+      maxProjectsPerRow.value *= 2
+    }
  }
 }

 const rowContainer = ref(null)
 const resizeObserver = ref(null)
-
 onMounted(() => {
  calculateCardsPerRow()
  resizeObserver.value = new ResizeObserver(calculateCardsPerRow)
@@ -238,10 +233,17 @@ onUnmounted(() => {
    @proceed="deleteProfile"
  />
  <div ref="rowContainer" class="flex flex-col gap-4">
-    <div v-for="row in actualInstances" ref="rows" :key="row.label" class="row">
-      <HeadingLink class="mt-1" :to="row.route">
+    <div v-for="(row, rowIndex) in actualInstances" ref="rows" :key="row.label" class="row">
+      <router-link
+        class="flex mb-3 leading-none items-center gap-1 text-primary text-lg font-bold hover:underline group"
+        :class="{ 'mt-1': rowIndex > 0 }"
+        :to="row.route"
+      >
        {{ row.label }}
-      </HeadingLink>
+        <ChevronRightIcon
+          class="h-5 w-5 stroke-[3px] group-hover:translate-x-1 transition-transform group-hover:text-brand"
+        />
+      </router-link>
      <section
        v-if="row.instance"
        ref="modsRow"
--- a/apps/app-frontend/src/components/ui/Breadcrumbs.vue
+++ b/apps/app-frontend/src/components/ui/Breadcrumbs.vue
@@ -19,7 +19,6 @@
          path: breadcrumb.link.replace('{id}', encodeURIComponent($route.params.id)),
          query: breadcrumb.query,
        }"
-        class="text-primary"
        >{{
          breadcrumb.name.charAt(0) === '?'
            ? breadcrumbData.getName(breadcrumb.name.slice(1))
--- a/apps/app-frontend/src/components/ui/ErrorModal.vue
+++ b/apps/app-frontend/src/components/ui/ErrorModal.vue
@@ -14,7 +14,7 @@ import { ref, computed } from 'vue'
 import { login as login_flow, set_default_user } from '@/helpers/auth.js'
 import { handleError } from '@/store/notifications.js'
 import { handleSevereError } from '@/store/error.js'
-import { cancel_directory_change } from '@/helpers/settings.ts'
+import { cancel_directory_change } from '@/helpers/settings.js'
 import { install } from '@/helpers/profile.js'
 import { trackEvent } from '@/helpers/analytics'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
--- a/apps/app-frontend/src/components/ui/Instance.vue
+++ b/apps/app-frontend/src/components/ui/Instance.vue
@@ -2,14 +2,14 @@
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import {
-  DownloadIcon,
-  GameIcon,
-  PlayIcon,
  SpinnerIcon,
-  StopCircleIcon,
+  GameIcon,
  TimerIcon,
+  StopCircleIcon,
+  PlayIcon,
+  DownloadIcon,
 } from '@modrinth/assets'
-import { Avatar, ButtonStyled } from '@modrinth/ui'
+import { ButtonStyled, Avatar, SmartClickable } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { finish_install, kill, run } from '@/helpers/profile'
 import { get_by_profile_path } from '@/helpers/process'
@@ -134,22 +134,26 @@ onUnmounted(() => unlisten())
 </script>

 <template>
-  <template v-if="compact">
-    <div
-      class="card-shadow grid grid-cols-[auto_1fr_auto] bg-bg-raised rounded-xl p-3 pl-4 gap-2 cursor-pointer hover:brightness-90 transition-all"
-      @click="seeInstance"
-      @mouseenter="checkProcess"
-    >
+  <SmartClickable class="card-shadow bg-bg-raised rounded-xl" @mouseenter="checkProcess">
+    <template #clickable>
+      <router-link
+        class="no-click-animation"
+        :to="`/instance/${encodeURIComponent(instance.path)}/`"
+      />
+    </template>
+    <div v-if="compact" class="grid grid-cols-[auto_1fr_auto] p-3 pl-4 gap-2">
      <Avatar
        size="48px"
        :src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
        :tint-by="instance.path"
        alt="Mod card"
      />
-      <div class="h-full flex items-center font-bold text-contrast leading-normal">
+      <div
+        class="h-full flex items-center font-bold text-contrast leading-normal smart-clickable:underline-on-hover"
+      >
        <span class="line-clamp-2">{{ instance.name }}</span>
      </div>
-      <div class="flex items-center">
+      <div class="flex items-center smart-clickable:allow-pointer-events">
        <ButtonStyled v-if="playing" color="red" circular @mousehover="checkProcess">
          <button v-tooltip="'Stop'" @click="(e) => stop(e, 'InstanceCard')">
            <StopCircleIcon />
@@ -176,13 +180,7 @@ onUnmounted(() => unlisten())
        <span class="text-sm"> Played {{ dayjs(instance.last_played).fromNow() }} </span>
      </div>
    </div>
-  </template>
-  <div v-else>
-    <div
-      class="button-base bg-bg-raised p-4 rounded-xl flex gap-3 group"
-      @click="seeInstance"
-      @mouseenter="checkProcess"
-    >
+    <div v-else class="p-4 rounded-xl flex gap-3 group" @mouseenter="checkProcess">
      <div class="relative flex items-center justify-center">
        <Avatar
          size="48px"
@@ -231,7 +229,9 @@ onUnmounted(() => unlisten())
        </div>
      </div>
      <div class="flex flex-col gap-1">
-        <p class="m-0 text-md font-bold text-contrast leading-tight line-clamp-1">
+        <p
+          class="m-0 text-md font-bold text-contrast leading-tight line-clamp-1 smart-clickable:underline-on-hover"
+        >
          {{ instance.name }}
        </p>
        <div class="flex items-center col-span-3 gap-1 text-secondary font-semibold mt-auto">
@@ -242,5 +242,5 @@ onUnmounted(() => unlisten())
        </div>
      </div>
    </div>
-  </div>
+  </SmartClickable>
 </template>
--- a/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
+++ b/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <ModalWrapper ref="modal" header="Creating an instance">
+  <ModalWrapper ref="modal" header="Create instance">
    <div class="modal-header">
      <Chips v-model="creationType" :items="['custom', 'from file', 'import from launcher']" />
    </div>
--- a/apps/app-frontend/src/components/ui/InstanceIndicator.vue
+++ b/apps/app-frontend/src/components/ui/InstanceIndicator.vue
@@ -3,23 +3,18 @@ import { convertFileSrc } from '@tauri-apps/api/core'
 import { formatCategory } from '@modrinth/utils'
 import { GameIcon, LeftArrowIcon } from '@modrinth/assets'
 import { Avatar, ButtonStyled } from '@modrinth/ui'
-
-type Instance = {
-  game_version: string
-  loader: string
-  path: string
-  install_stage: string
-  icon_path?: string
-  name: string
-}
+import type { GameInstance } from '@/helpers/types'

 defineProps<{
-  instance: Instance
+  instance?: GameInstance
 }>()
 </script>

 <template>
-  <div class="flex justify-between items-center border-0 border-b border-solid border-divider pb-4">
+  <div
+    v-if="instance"
+    class="flex justify-between items-center border-0 border-b border-solid border-divider pb-4"
+  >
    <router-link
      :to="`/instance/${encodeURIComponent(instance.path)}`"
      tabindex="-1"
@@ -49,5 +44,3 @@ defineProps<{
    </ButtonStyled>
  </div>
 </template>
-
-<style scoped lang="scss"></style>
--- a/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
+++ b/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
@@ -70,7 +70,7 @@ const onHide = () => {
              v-for="version in filteredVersions"
              :key="version.id"
              class="table-row with-columns selectable"
-              @click="$router.push(`/project/${version.project_id}/version/${version.id}`)"
+              @click="$router.push(`/project/${$route.params.id}/version/${version.id}`)"
            >
              <div class="table-cell table-text">
                <Button
--- a/apps/app-frontend/src/components/ui/NavButton.vue
+++ b/apps/app-frontend/src/components/ui/NavButton.vue
@@ -7,7 +7,7 @@
      'router-link-active': isPrimary && isPrimary(route),
      'subpage-active': isSubpage && isSubpage(route),
    }"
-    class="w-12 h-12 text-primary rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
+    class="w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
  >
    <slot />
  </RouterLink>
--- a/apps/app-frontend/src/components/ui/ProjectCard.vue
+++ b/apps/app-frontend/src/components/ui/ProjectCard.vue
@@ -1,16 +1,13 @@
 <script setup>
-import { Avatar, TagItem } from '@modrinth/ui'
+import { Avatar, SmartClickable, TagItem } from '@modrinth/ui'
 import { DownloadIcon, HeartIcon, TagIcon } from '@modrinth/assets'
 import { formatNumber, formatCategory } from '@modrinth/utils'
 import { computed } from 'vue'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import { useRouter } from 'vue-router'

 dayjs.extend(relativeTime)

-const router = useRouter()
-
 const props = defineProps({
  project: {
    type: Object,
@@ -40,29 +37,15 @@ const toColor = computed(() => {
  const r = (color >>> 16) & 0xff
  return 'rgba(' + [r, g, b, 1].join(',') + ')'
 })
-
-const toTransparent = computed(() => {
-  let color = props.project.color
-
-  color >>>= 0
-  const b = color & 0xff
-  const g = (color >>> 8) & 0xff
-  const r = (color >>> 16) & 0xff
-  return (
-    'linear-gradient(rgba(' +
-    [r, g, b, 0.03].join(',') +
-    '), 65%, rgba(' +
-    [r, g, b, 0.3].join(',') +
-    '))'
-  )
-})
 </script>

 <template>
-  <div
+  <SmartClickable
    class="card-shadow bg-bg-raised rounded-xl overflow-clip cursor-pointer hover:brightness-90 transition-all"
-    @click="router.push(`/project/${project.slug}`)"
  >
+    <template #clickable>
+      <router-link class="no-click-animation" :to="`/project/${project.slug}`" />
+    </template>
    <div
      class="w-full aspect-[2/1] bg-cover bg-center bg-no-repeat"
      :style="{
@@ -73,21 +56,13 @@ const toTransparent = computed(() => {
          'https://launcher-files.modrinth.com/assets/maze-bg.png'
        })`,
      }"
-    >
-      <div
-        class="badges-wrapper"
-        :class="{
-          'no-image': !project.featured_gallery && !project.gallery[0],
-        }"
-        :style="{
-          background: !project.featured_gallery && !project.gallery[0] ? toTransparent : null,
-        }"
-      ></div>
-    </div>
+    ></div>
    <div class="flex flex-col justify-center gap-2 px-4 py-3">
      <div class="flex gap-2 items-center">
        <Avatar size="48px" :src="project.icon_url" />
-        <div class="h-full flex items-center font-bold text-contrast leading-normal">
+        <div
+          class="h-full flex items-center font-bold text-contrast leading-normal smart-clickable:underline-on-hover"
+        >
          <span class="line-clamp-2">{{ project.title }}</span>
        </div>
      </div>
@@ -115,7 +90,7 @@ const toTransparent = computed(() => {
        </div>
      </div>
    </div>
-  </div>
+  </SmartClickable>
 </template>

 <style scoped lang="scss"></style>
--- a/apps/app-frontend/src/components/ui/ProjectCardActions.vue
+++ b/apps/app-frontend/src/components/ui/ProjectCardActions.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import {
+  VersionIcon,
+  ImageIcon,
+  BookmarkIcon,
+  DownloadIcon,
+  HeartIcon,
+  MoreVerticalIcon,
+  ExternalIcon,
+  LinkIcon,
+  ReportIcon,
+  SpinnerIcon,
+  CheckIcon,
+} from '@modrinth/assets'
+import { ButtonStyled, commonMessages, OverflowMenu } from '@modrinth/ui'
+import type { GameInstance } from '@/helpers/types'
+import { computed, ref, type Ref } from 'vue'
+import { install as installVersion } from '@/store/install'
+import { useVIntl, defineMessages } from '@vintl/vintl'
+import { isSearchResult, type Project, type SearchResult } from '@modrinth/utils'
+import type { InstanceContentMap } from '@/composables/instance-context.ts'
+
+const { formatMessage } = useVIntl()
+
+const props = defineProps<{
+  project: Project | SearchResult
+  instance?: GameInstance
+  instanceContent?: InstanceContentMap
+}>()
+
+const installing = ref(false)
+
+const installed: Ref<boolean> = ref(false)
+
+function checkInstallStatus() {
+  if (props.instanceContent) {
+    installed.value = Object.values(props.instanceContent).some(
+      (content) => content.metadata?.project_id === projectId.value,
+    )
+  }
+}
+
+async function install(toInstance: boolean) {
+  if (toInstance) {
+    installing.value = true
+  }
+  await installVersion(
+    projectId.value,
+    null,
+    props.instance && toInstance ? props.instance.path : null,
+    'SearchCard',
+    () => {
+      if (toInstance) {
+        installing.value = false
+        installed.value = true
+      }
+    },
+  )
+}
+
+const modpack = computed(() => props.project.project_type === 'modpack')
+
+const projectWebUrl = computed(
+  () => `https://modrinth.com/${props.project.project_type}/${props.project.slug}`,
+)
+
+const tooltip = defineMessages({
+  installing: {
+    id: 'project.card.actions.installing.tooltip',
+    defaultMessage: 'This project is being installed',
+  },
+  installed: {
+    id: 'project.card.actions.installed.tooltip',
+    defaultMessage: 'This project is already installed',
+  },
+})
+
+const messages = defineMessages({
+  viewVersions: {
+    id: 'project.card.actions.view-versions',
+    defaultMessage: 'View versions',
+  },
+  viewGallery: {
+    id: 'project.card.actions.view-gallery',
+    defaultMessage: 'View gallery',
+  },
+})
+
+const projectId = computed(() =>
+  isSearchResult(props.project) ? props.project.project_id : props.project.id,
+)
+
+const copyText = (text: string) => {
+  navigator.clipboard.writeText(text)
+}
+
+checkInstallStatus()
+</script>
+
+<template>
+  <ButtonStyled color="brand">
+    <button
+      v-tooltip="
+        installing
+          ? formatMessage(tooltip.installing)
+          : installed
+            ? formatMessage(tooltip.installed)
+            : null
+      "
+      :disabled="installing || installed"
+      @click="() => install(true)"
+    >
+      <SpinnerIcon v-if="installing" />
+      <CheckIcon v-else-if="installed" />
+      <DownloadIcon v-else />
+      {{
+        formatMessage(
+          installing
+            ? commonMessages.installingButton
+            : installed
+              ? commonMessages.installedButton
+              : commonMessages.installButton,
+        )
+      }}
+    </button>
+  </ButtonStyled>
+  <!-- TODO: Add in later -->
+  <ButtonStyled v-if="false" circular>
+    <button v-tooltip="'Follow'">
+      <HeartIcon />
+    </button>
+  </ButtonStyled>
+  <ButtonStyled v-if="false" circular>
+    <button v-tooltip="'Save'">
+      <BookmarkIcon />
+    </button>
+  </ButtonStyled>
+  <ButtonStyled circular type="transparent">
+    <OverflowMenu
+      :options="[
+        {
+          id: 'install-elsewhere',
+          color: 'primary',
+          action: () => install(false),
+          shown: !!instance && !modpack,
+        },
+        {
+          divider: true,
+          shown: !!instance && !modpack,
+        },
+        {
+          id: 'versions',
+          link: `/project/${projectId}/versions`,
+        },
+        {
+          id: 'gallery',
+          link: `/project/${projectId}/gallery`,
+          shown: (project.gallery?.length ?? 0) > 0,
+        },
+        {
+          id: 'open-link',
+          link: projectWebUrl,
+        },
+        {
+          id: 'copy-link',
+          action: () => copyText(projectWebUrl),
+        },
+        {
+          divider: true,
+        },
+        {
+          id: 'report',
+          color: 'red',
+          hoverFilled: true,
+          action: () => {},
+        },
+      ]"
+    >
+      <MoreVerticalIcon />
+      <template #install-elsewhere>
+        <DownloadIcon /> {{ formatMessage(commonMessages.installToButton) }}
+      </template>
+      <template #versions> <VersionIcon /> {{ formatMessage(messages.viewVersions) }} </template>
+      <template #gallery> <ImageIcon /> {{ formatMessage(messages.viewGallery) }} </template>
+      <template #open-link>
+        <ExternalIcon /> {{ formatMessage(commonMessages.openInBrowserButton) }}
+      </template>
+      <template #copy-link>
+        <LinkIcon /> {{ formatMessage(commonMessages.copyLinkButton) }}
+      </template>
+      <template #report> <ReportIcon /> {{ formatMessage(commonMessages.reportButton) }} </template>
+    </OverflowMenu>
+  </ButtonStyled>
+</template>
--- a/apps/app-frontend/src/components/ui/RunningAppBar.vue
+++ b/apps/app-frontend/src/components/ui/RunningAppBar.vue
@@ -14,10 +14,7 @@
    <div v-if="selectedProcess" class="status">
      <span class="circle running" />
      <div ref="profileButton" class="running-text">
-        <router-link
-          class="text-primary"
-          :to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`"
-        >
+        <router-link :to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`">
          {{ selectedProcess.profile.name }}
        </router-link>
        <div
--- a/apps/app-frontend/src/components/ui/SearchCard.vue
+++ b/apps/app-frontend/src/components/ui/SearchCard.vue
@@ -1,160 +1,72 @@
 <template>
-  <div
-    class="card-shadow p-4 bg-bg-raised rounded-xl flex gap-3 group cursor-pointer hover:brightness-90 transition-all"
-    @click="
-      () => {
-        emit('open')
-        $router.push({
-          path: `/project/${project.project_id ?? project.id}`,
+  <NewProjectCard
+    :project="project"
+    :link="
+      asLink(
+        {
+          path: `/project/${projectId}`,
          query: { i: props.instance ? props.instance.path : undefined },
-        })
-      }
+        },
+        () => emit('open'),
+      )
+    "
+    :experimental-colors="themeStore.featureFlags.project_card_background"
+    :creator-link="
+      creator
+        ? asLink(
+            {
+              path: `/user/${creator}`,
+              query: { i: props.instance ? props.instance.path : undefined },
+            },
+            () => emit('open'),
+          )
+        : undefined
    "
  >
-    <div class="icon w-[96px] h-[96px] relative">
-      <Avatar :src="project.icon_url" size="96px" class="search-icon origin-top transition-all" />
-    </div>
-    <div class="flex flex-col gap-2 overflow-hidden">
-      <div class="gap-2 overflow-hidden no-wrap text-ellipsis">
-        <span class="text-lg font-extrabold text-contrast m-0 leading-none">
-          {{ project.title }}
-        </span>
-        <span v-if="project.author" class="text-secondary"> by {{ project.author }}</span>
-      </div>
-      <div class="m-0 line-clamp-2">
-        {{ project.description }}
-      </div>
-      <div v-if="categories.length > 0" class="mt-auto flex items-center gap-1 no-wrap">
-        <TagsIcon class="h-4 w-4 shrink-0" />
-        <div
-          v-if="project.project_type === 'mod' || project.project_type === 'modpack'"
-          class="text-sm font-semibold text-secondary flex gap-1 px-[0.375rem] py-0.5 bg-button-bg rounded-full"
+    <template #actions>
+      <ButtonStyled color="brand">
+        <button
+          :disabled="installed || installing"
+          class="shrink-0 no-wrap"
+          @click.stop="install()"
        >
-          <template v-if="project.client_side === 'optional' && project.server_side === 'optional'">
-            Client or server
+          <template v-if="!installed">
+            <DownloadIcon />
          </template>
-          <template
-            v-else-if="
-              (project.client_side === 'optional' || project.client_side === 'required') &&
-              (project.server_side === 'optional' || project.server_side === 'unsupported')
-            "
-          >
-            Client
-          </template>
-          <template
-            v-else-if="
-              (project.server_side === 'optional' || project.server_side === 'required') &&
-              (project.client_side === 'optional' || project.client_side === 'unsupported')
-            "
-          >
-            Server
-          </template>
-          <template
-            v-else-if="
-              project.client_side === 'unsupported' && project.server_side === 'unsupported'
-            "
-          >
-            Unsupported
-          </template>
-          <template
-            v-else-if="project.client_side === 'required' && project.server_side === 'required'"
-          >
-            Client and server
-          </template>
-        </div>
-        <div
-          v-for="tag in categories"
-          :key="tag"
-          class="text-sm font-semibold text-secondary flex gap-1 px-[0.375rem] py-0.5 bg-button-bg rounded-full"
-        >
-          {{ formatCategory(tag.name) }}
-        </div>
-      </div>
-    </div>
-    <div class="flex flex-col gap-2 items-end shrink-0 ml-auto">
-      <div class="flex items-center gap-2">
-        <DownloadIcon class="shrink-0" />
-        <span>
-          {{ formatNumber(project.downloads) }}
-          <span class="text-secondary">downloads</span>
-        </span>
-      </div>
-      <div class="flex items-center gap-2">
-        <HeartIcon class="shrink-0" />
-        <span>
-          {{ formatNumber(project.follows ?? project.followers) }}
-          <span class="text-secondary">followers</span>
-        </span>
-      </div>
-      <div class="mt-auto relative">
-        <div class="absolute bottom-0 right-0 w-fit">
-          <ButtonStyled color="brand" type="outlined">
-            <button
-              :disabled="installed || installing"
-              class="shrink-0 no-wrap"
-              @click.stop="install()"
-            >
-              <template v-if="!installed">
-                <DownloadIcon v-if="modpack || instance" />
-                <PlusIcon v-else />
-              </template>
-              <CheckIcon v-else />
-              {{
-                installing
-                  ? 'Installing'
-                  : installed
-                    ? 'Installed'
-                    : modpack || instance
-                      ? 'Install'
-                      : 'Add to an instance'
-              }}
-            </button>
-          </ButtonStyled>
-        </div>
-      </div>
-    </div>
-  </div>
+          <CheckIcon v-else />
+          {{ installing ? 'Installing' : installed ? 'Installed' : 'Install' }}
+        </button>
+      </ButtonStyled>
+    </template>
+  </NewProjectCard>
 </template>

-<script setup>
-import { TagsIcon, DownloadIcon, HeartIcon, PlusIcon, CheckIcon } from '@modrinth/assets'
-import { ButtonStyled, Avatar } from '@modrinth/ui'
-import { formatNumber, formatCategory } from '@modrinth/utils'
+<script setup lang="ts">
+import { DownloadIcon, CheckIcon } from '@modrinth/assets'
+import { ButtonStyled, NewProjectCard, asLink } from '@modrinth/ui'
+import type { Project, SearchResult } from '@modrinth/utils'
+import { isSearchResult } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { ref, computed } from 'vue'
 import { install as installVersion } from '@/store/install.js'
-import { useRouter } from 'vue-router'
+import { useTheming } from '@/store/state.js'
+import type { GameInstance } from '@/helpers/types'
 dayjs.extend(relativeTime)

-const router = useRouter()
+const themeStore = useTheming()

-const props = defineProps({
-  backgroundImage: {
-    type: String,
-    default: null,
+const props = withDefaults(
+  defineProps<{
+    project: Project | SearchResult
+    instance?: GameInstance
+    installed?: boolean
+  }>(),
+  {
+    instance: undefined,
+    installed: false,
  },
-  project: {
-    type: Object,
-    required: true,
-  },
-  categories: {
-    type: Array,
-    required: true,
-  },
-  instance: {
-    type: Object,
-    default: null,
-  },
-  featured: {
-    type: Boolean,
-    default: false,
-  },
-  installed: {
-    type: Boolean,
-    default: false,
-  },
-})
+)

 const emit = defineEmits(['open', 'install'])

@@ -163,19 +75,19 @@ const installing = ref(false)
 async function install() {
  installing.value = true
  await installVersion(
-    props.project.project_id ?? props.project.id,
+    projectId.value,
    null,
    props.instance ? props.instance.path : null,
    'SearchCard',
    () => {
      installing.value = false
-      emit('install', props.project.project_id ?? props.project.id)
-    },
-    (profile) => {
-      router.push(`/instance/${profile}`)
+      emit('install', projectId.value)
    },
  )
 }

-const modpack = computed(() => props.project.project_type === 'modpack')
+const projectId = computed(() =>
+  isSearchResult(props.project) ? props.project.project_id : props.project.id,
+)
+const creator = computed(() => (isSearchResult(props.project) ? props.project.author : undefined))
 </script>
--- a/apps/app-frontend/src/components/ui/install_flow/InstallConfirmModal.vue
+++ b/apps/app-frontend/src/components/ui/install_flow/InstallConfirmModal.vue
@@ -13,17 +13,15 @@ const confirmModal = ref(null)
 const installing = ref(false)

 const onInstall = ref(() => {})
-const onCreateInstance = ref(() => {})

 defineExpose({
-  show: (projectVal, versionIdVal, callback, createInstanceCallback) => {
+  show: (projectVal, versionIdVal, callback) => {
    project.value = projectVal
    versionId.value = versionIdVal
    installing.value = false
    confirmModal.value.show()

    onInstall.value = callback
-    onCreateInstance.value = createInstanceCallback

    trackEvent('PackInstallStart')
  },
@@ -38,7 +36,6 @@ async function install() {
    versionId.value,
    project.value.title,
    project.value.icon_url,
-    onCreateInstance.value,
  ).catch(handleError)
  trackEvent('PackInstall', {
    id: project.value.id,
--- a/apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue
@@ -3,7 +3,7 @@ import { Checkbox } from '@modrinth/ui'
 import { computed, ref, watch } from 'vue'
 import { handleError } from '@/store/notifications'
 import { defineMessages, useVIntl } from '@vintl/vintl'
-import { get } from '@/helpers/settings.ts'
+import { get } from '@/helpers/settings'
 import { edit } from '@/helpers/profile'
 import type { InstanceSettingsTabProps, AppSettings, Hooks } from '../../../helpers/types'

--- a/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue
@@ -7,7 +7,7 @@ import { handleError } from '@/store/notifications'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import JavaSelector from '@/components/ui/JavaSelector.vue'
 import { get_max_memory } from '@/helpers/jre'
-import { get } from '@/helpers/settings.ts'
+import { get } from '@/helpers/settings'
 import type { InstanceSettingsTabProps, AppSettings, MemorySettings } from '../../../helpers/types'

 const { formatMessage } = useVIntl()
--- a/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue
@@ -3,7 +3,7 @@ import { Checkbox, Toggle } from '@modrinth/ui'
 import { computed, ref, type Ref, watch } from 'vue'
 import { handleError } from '@/store/notifications'
 import { defineMessages, useVIntl } from '@vintl/vintl'
-import { get } from '@/helpers/settings.ts'
+import { get } from '@/helpers/settings'
 import { edit } from '@/helpers/profile'
 import type { AppSettings, InstanceSettingsTabProps } from '../../../helpers/types'

--- a/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
@@ -22,7 +22,7 @@ import { version as getOsVersion, platform as getOsPlatform } from '@tauri-apps/
 import { useTheming } from '@/store/state'
 import FeatureFlagSettings from '@/components/ui/settings/FeatureFlagSettings.vue'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { get, set } from '@/helpers/settings.ts'
+import { get, set } from '@/helpers/settings'

 const themeStore = useTheming()

@@ -116,10 +116,6 @@ function devModeCount() {
    themeStore.devMode = !themeStore.devMode
    settings.value.developer_mode = !!themeStore.devMode
    devModeCounter.value = 0
-
-    if (!themeStore.devMode && tabs[modal.value.selectedTab].developerOnly) {
-      modal.value.setTab(0)
-    }
  }
 }
 </script>
--- a/apps/app-frontend/src/components/ui/modal/ConfirmModalWrapper.vue
+++ b/apps/app-frontend/src/components/ui/modal/ConfirmModalWrapper.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import { ConfirmModal } from '@modrinth/ui'
 import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
-import { useTheming } from '@/store/theme.ts'
+import { useTheming } from '@/store/theme.js'

 const themeStore = useTheming()

@@ -41,10 +41,6 @@ const props = defineProps({
    type: Boolean,
    default: true,
  },
-  markdown: {
-    type: Boolean,
-    default: true,
-  },
 })

 const emit = defineEmits(['proceed'])
@@ -84,7 +80,6 @@ function proceed() {
    :on-hide="onModalHide"
    :noblur="!themeStore.advancedRendering"
    :danger="danger"
-    :markdown="markdown"
    @proceed="proceed"
  />
 </template>
--- a/apps/app-frontend/src/components/ui/modal/InstanceModalTitlePrefix.vue
+++ b/apps/app-frontend/src/components/ui/modal/InstanceModalTitlePrefix.vue
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { ChevronRightIcon } from '@modrinth/assets'
-import { Avatar } from '@modrinth/ui'
-import { convertFileSrc } from '@tauri-apps/api/core'
-import type { GameInstance } from '@/helpers/types'
-
-defineProps<{
-  instance: GameInstance
-}>()
-</script>
-<template>
-  <span class="flex items-center gap-2 text-lg font-semibold text-primary">
-    <Avatar
-      :src="instance.icon_path ? convertFileSrc(instance.icon_path) : undefined"
-      size="24px"
-      :tint-by="instance.path"
-    />
-    {{ instance.name }} <ChevronRightIcon />
-  </span>
-</template>
--- a/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
+++ b/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import { NewModal as Modal } from '@modrinth/ui'
 import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
-import { useTheming } from '@/store/theme.ts'
+import { useTheming } from '@/store/theme.js'

 const themeStore = useTheming()

--- a/apps/app-frontend/src/components/ui/modal/ShareModalWrapper.vue
+++ b/apps/app-frontend/src/components/ui/modal/ShareModalWrapper.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import { ShareModal } from '@modrinth/ui'
 import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
-import { useTheming } from '@/store/theme.ts'
+import { useTheming } from '@/store/theme.js'

 const themeStore = useTheming()

--- a/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { TeleportDropdownMenu, ThemeSelector, Toggle } from '@modrinth/ui'
 import { useTheming } from '@/store/state'
-import { get, set } from '@/helpers/settings.ts'
+import { get, set } from '@/helpers/settings'
 import { ref, watch } from 'vue'
 import { getOS } from '@/helpers/utils'
-import type { ColorTheme } from '@/store/theme.ts'

 const themeStore = useTheming()

@@ -25,13 +24,13 @@ watch(

  <ThemeSelector
    :update-color-theme="
-      (theme: ColorTheme) => {
+      (theme) => {
        themeStore.setThemeState(theme)
        settings.theme = theme
      }
    "
    :current-theme="settings.theme"
-    :theme-options="themeStore.getThemeOptions()"
+    :theme-options="themeStore.themeOptions"
    system-theme-color="system"
  />

@@ -81,28 +80,10 @@ watch(
      id="opening-page"
      v-model="settings.default_page"
      name="Opening page dropdown"
-      class="w-40"
      :options="['Home', 'Library']"
    />
  </div>

-  <div class="mt-4 flex items-center justify-between">
-    <div>
-      <h2 class="m-0 text-lg font-extrabold text-contrast">Jump back into worlds</h2>
-      <p class="m-0 mt-1">Includes recent worlds in the "Jump back in" section on the Home page.</p>
-    </div>
-    <Toggle
-      :model-value="themeStore.getFeatureFlag('worlds_in_home')"
-      @update:model-value="
-        () => {
-          const newValue = !themeStore.getFeatureFlag('worlds_in_home')
-          themeStore.featureFlags['worlds_in_home'] = newValue
-          settings.feature_flags['worlds_in_home'] = newValue
-        }
-      "
-    />
-  </div>
-
  <div class="mt-4 flex items-center justify-between">
    <div>
      <h2 class="m-0 text-lg font-extrabold text-contrast">Toggle sidebar</h2>
--- a/apps/app-frontend/src/components/ui/settings/DefaultInstanceSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/DefaultInstanceSettings.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { get, set } from '@/helpers/settings.ts'
+import { get, set } from '@/helpers/settings'
 import { ref, watch } from 'vue'
 import { get_max_memory } from '@/helpers/jre'
 import { handleError } from '@/store/notifications'
--- a/apps/app-frontend/src/components/ui/settings/FeatureFlagSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/FeatureFlagSettings.vue
@@ -1,16 +1,22 @@
 <script setup lang="ts">
-import { Toggle } from '@modrinth/ui'
+import { ButtonStyled, Toggle } from '@modrinth/ui'
 import { useTheming } from '@/store/state'
-import { ref, watch } from 'vue'
-import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
-import { DEFAULT_FEATURE_FLAGS, type FeatureFlag } from '@/store/theme.ts'
+import { ref, type Ref, watch } from 'vue'
+import { get, set } from '@/helpers/settings'
+import { DEFAULT_FEATURE_FLAGS } from '@/store/theme'
+
+type FeatureFlag = keyof typeof DEFAULT_FEATURE_FLAGS

 const themeStore = useTheming()

-const settings = ref(await getSettings())
-const options = ref<FeatureFlag[]>(Object.keys(DEFAULT_FEATURE_FLAGS))
+const settings = ref(await get())
+const options: Ref<FeatureFlag[]> = ref(Object.keys(DEFAULT_FEATURE_FLAGS) as FeatureFlag[])

-function setFeatureFlag(key: string, value: boolean) {
+function getStoreValue(key: FeatureFlag) {
+  return themeStore.featureFlags[key] ?? false
+}
+
+function setStoreValue(key: FeatureFlag, value: boolean) {
  themeStore.featureFlags[key] = value
  settings.value.feature_flags[key] = value
 }
@@ -18,23 +24,45 @@ function setFeatureFlag(key: string, value: boolean) {
 watch(
  settings,
  async () => {
-    await setSettings(settings.value)
+    await set(settings.value)
  },
  { deep: true },
 )
 </script>
 <template>
-  <div v-for="option in options" :key="option" class="mt-4 flex items-center justify-between">
+  <h2 class="m-0 text-lg font-extrabold text-contrast">Feature flags</h2>
+  <p class="mt-1 mb-0 leading-tight text-secondary">
+    These are developer tools that are not intended to be used by end users except for debugging
+    purposes.
+  </p>
+  <p class="my-3 font-bold">Do not report bugs or issues if you have any feature flags enabled.</p>
+  <div
+    v-for="option in options"
+    :key="option"
+    class="mt-2 px-4 py-3 flex items-center justify-between bg-bg rounded-2xl"
+  >
    <div>
-      <h2 class="m-0 text-lg font-extrabold text-contrast capitalize">
-        {{ option.replaceAll('_', ' ') }}
+      <h2 class="m-0 text-base font-bold text-primary capitalize">
+        {{ option.replace(new RegExp('_', 'g'), ' ') }}
      </h2>
+      <p class="m-0 text-sm text-secondary">Default: {{ DEFAULT_FEATURE_FLAGS[option] }}</p>
    </div>

-    <Toggle
-      id="advanced-rendering"
-      :model-value="themeStore.getFeatureFlag(option)"
-      @update:model-value="() => setFeatureFlag(option, !themeStore.getFeatureFlag(option))"
-    />
+    <div class="flex items-center gap-1">
+      <ButtonStyled type="transparent">
+        <button
+          class="text-sm"
+          :disabled="getStoreValue(option) === DEFAULT_FEATURE_FLAGS[option]"
+          @click="() => setStoreValue(option, !themeStore.featureFlags[option])"
+        >
+          Reset to default
+        </button>
+      </ButtonStyled>
+      <Toggle
+        id="advanced-rendering"
+        :model-value="getStoreValue(option)"
+        @update:model-value="() => setStoreValue(option, !themeStore.featureFlags[option])"
+      />
+    </div>
  </div>
 </template>
--- a/apps/app-frontend/src/components/ui/settings/PrivacySettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/PrivacySettings.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import { get, set } from '@/helpers/settings.ts'
+import { get, set } from '@/helpers/settings'
 import { Toggle } from '@modrinth/ui'
 import { optInAnalytics, optOutAnalytics } from '@/helpers/analytics'

--- a/apps/app-frontend/src/components/ui/settings/ResourceManagementSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/ResourceManagementSettings.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { Button, Slider } from '@modrinth/ui'
 import { ref, watch } from 'vue'
-import { get, set } from '@/helpers/settings.ts'
+import { get, set } from '@/helpers/settings.js'
 import { purge_cache_types } from '@/helpers/cache.js'
 import { handleError } from '@/store/notifications.js'
 import { BoxIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
--- a/apps/app-frontend/src/components/ui/world/InstanceItem.vue
+++ b/apps/app-frontend/src/components/ui/world/InstanceItem.vue
@@ -1,220 +0,0 @@
-<script setup lang="ts">
-import dayjs from 'dayjs'
-import {
-  EyeIcon,
-  FolderOpenIcon,
-  MoreVerticalIcon,
-  PlayIcon,
-  SpinnerIcon,
-  StopCircleIcon,
-} from '@modrinth/assets'
-import { Avatar, ButtonStyled, commonMessages, OverflowMenu, SmartClickable } from '@modrinth/ui'
-import { useVIntl } from '@vintl/vintl'
-import { computed, nextTick, ref, onMounted, onUnmounted } from 'vue'
-import { showProfileInFolder } from '@/helpers/utils'
-import { convertFileSrc } from '@tauri-apps/api/core'
-import { useRouter } from 'vue-router'
-import type { GameInstance } from '@/helpers/types'
-import { get_project } from '@/helpers/cache'
-import { capitalizeString } from '@modrinth/utils'
-import { kill, run } from '@/helpers/profile'
-import { handleSevereError } from '@/store/error'
-import { trackEvent } from '@/helpers/analytics'
-import { get_by_profile_path } from '@/helpers/process'
-import { handleError } from '@/store/notifications'
-import { process_listener } from '@/helpers/events'
-
-const { formatMessage } = useVIntl()
-
-const router = useRouter()
-
-const emit = defineEmits<{
-  (e: 'play' | 'stop'): void
-}>()
-
-const props = defineProps<{
-  instance: GameInstance
-}>()
-
-const loadingModpack = ref(!!props.instance.linked_data)
-
-const modpack = ref()
-
-if (props.instance.linked_data) {
-  nextTick().then(async () => {
-    modpack.value = await get_project(props.instance.linked_data?.project_id, 'must_revalidate')
-    loadingModpack.value = false
-  })
-}
-
-const instanceIcon = computed(() => props.instance.icon_path)
-
-const loader = computed(() => {
-  if (props.instance.loader === 'vanilla') {
-    return 'Minecraft'
-  } else if (props.instance.loader === 'neoforge') {
-    return 'NeoForge'
-  } else {
-    return capitalizeString(props.instance.loader)
-  }
-})
-
-const loading = ref(false)
-const playing = ref(false)
-
-const play = async (event: MouseEvent) => {
-  event?.stopPropagation()
-  loading.value = true
-  await run(props.instance.path)
-    .catch((err) => handleSevereError(err, { profilePath: props.instance.path }))
-    .finally(() => {
-      trackEvent('InstancePlay', {
-        loader: props.instance.loader,
-        game_version: props.instance.game_version,
-        source: 'InstanceItem',
-      })
-    })
-  emit('play')
-  loading.value = false
-}
-
-const stop = async (event: MouseEvent) => {
-  event?.stopPropagation()
-  loading.value = true
-  await kill(props.instance.path).catch(handleError)
-  trackEvent('InstanceStop', {
-    loader: props.instance.loader,
-    game_version: props.instance.game_version,
-    source: 'InstanceItem',
-  })
-  emit('stop')
-  loading.value = false
-}
-
-const unlistenProcesses = await process_listener(async () => {
-  await checkProcess()
-})
-
-const checkProcess = async () => {
-  const runningProcesses = await get_by_profile_path(props.instance.path).catch(handleError)
-
-  playing.value = runningProcesses.length > 0
-}
-
-onMounted(() => {
-  checkProcess()
-})
-
-onUnmounted(() => {
-  unlistenProcesses()
-})
-</script>
-<template>
-  <SmartClickable>
-    <template #clickable>
-      <router-link
-        class="no-click-animation"
-        :to="`/instance/${encodeURIComponent(instance.path)}`"
-      />
-    </template>
-    <div
-      class="grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised rounded-xl smart-clickable:highlight-on-hover"
-    >
-      <Avatar
-        :src="instanceIcon ? convertFileSrc(instanceIcon) : undefined"
-        :tint-by="instance.path"
-        size="48px"
-      />
-      <div class="flex flex-col col-span-2 justify-between h-full">
-        <div class="flex items-center gap-2">
-          <div class="text-lg text-contrast font-bold truncate smart-clickable:underline-on-hover">
-            {{ instance.name }}
-          </div>
-        </div>
-        <div class="flex items-center gap-2 text-sm text-secondary">
-          <div
-            v-tooltip="
-              instance.last_played
-                ? dayjs(instance.last_played).format('MMMM D, YYYY [at] h:mm A')
-                : null
-            "
-            class="w-fit shrink-0"
-            :class="{ 'cursor-help smart-clickable:allow-pointer-events': instance.last_played }"
-          >
-            <template v-if="instance.last_played">
-              {{
-                formatMessage(commonMessages.playedLabel, {
-                  time: dayjs(instance.last_played).fromNow(),
-                })
-              }}
-            </template>
-            <template v-else> Not played yet </template>
-          </div>
-          •
-          <span v-if="modpack" class="flex items-center gap-1 truncate text-secondary">
-            <router-link
-              class="inline-flex items-center gap-1 truncate hover:underline text-secondary smart-clickable:allow-pointer-events"
-              :to="`/project/${modpack.id}`"
-            >
-              <Avatar :src="modpack.icon_url" size="16px" class="shrink-0" />
-              <span class="truncate">{{ modpack.title }}</span>
-            </router-link>
-            ({{ loader }} {{ instance.game_version }})
-          </span>
-          <span v-else-if="loadingModpack" class="flex items-center gap-1 truncate text-secondary">
-            <SpinnerIcon class="animate-spin shrink-0" />
-            <span class="truncate">Loading modpack...</span>
-          </span>
-          <span v-else class="flex items-center gap-1 truncate text-secondary">
-            {{ loader }}
-            {{ instance.game_version }}
-          </span>
-        </div>
-      </div>
-      <div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
-        <ButtonStyled v-if="playing && !loading" color="red">
-          <button @click="stop">
-            <StopCircleIcon aria-hidden="true" />
-            {{ formatMessage(commonMessages.stopButton) }}
-          </button>
-        </ButtonStyled>
-        <ButtonStyled v-else>
-          <button
-            v-tooltip="playing ? 'Instance is already open' : null"
-            :disabled="playing || loading"
-            @click="play"
-          >
-            <SpinnerIcon v-if="loading" class="animate-spin" />
-            <PlayIcon v-else aria-hidden="true" />
-            {{ formatMessage(commonMessages.playButton) }}
-          </button>
-        </ButtonStyled>
-        <ButtonStyled circular type="transparent">
-          <OverflowMenu
-            :options="[
-              {
-                id: 'open-instance',
-                shown: !!instance.path,
-                action: () => router.push(encodeURI(`/instance/${instance.path}`)),
-              },
-              {
-                id: 'open-folder',
-                action: () => showProfileInFolder(instance.path),
-              },
-            ]"
-          >
-            <MoreVerticalIcon aria-hidden="true" />
-            <template #open-instance>
-              <EyeIcon aria-hidden="true" />
-              View instance
-            </template>
-            <template #open-folder>
-              <FolderOpenIcon aria-hidden="true" />
-              {{ formatMessage(commonMessages.openFolderButton) }}
-            </template>
-          </OverflowMenu>
-        </ButtonStyled>
-      </div>
-    </div>
-  </SmartClickable>
-</template>
--- a/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
+++ b/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
@@ -1,304 +0,0 @@
-<script setup lang="ts">
-import {
-  type ServerWorld,
-  type ServerData,
-  type WorldWithProfile,
-  get_recent_worlds,
-  getWorldIdentifier,
-  get_profile_protocol_version,
-  refreshServerData,
-  start_join_server,
-  start_join_singleplayer_world,
-} from '@/helpers/worlds.ts'
-import { HeadingLink, GAME_MODES } from '@modrinth/ui'
-import WorldItem from '@/components/ui/world/WorldItem.vue'
-import InstanceItem from '@/components/ui/world/InstanceItem.vue'
-import { watch, onMounted, onUnmounted, ref, computed } from 'vue'
-import type { Dayjs } from 'dayjs'
-import dayjs from 'dayjs'
-import { useTheming } from '@/store/theme.ts'
-import { kill, run } from '@/helpers/profile'
-import { handleError } from '@/store/notifications'
-import { trackEvent } from '@/helpers/analytics'
-import { process_listener, profile_listener } from '@/helpers/events'
-import { get_all } from '@/helpers/process'
-import type { GameInstance } from '@/helpers/types'
-import { handleSevereError } from '@/store/error'
-
-const props = defineProps<{
-  recentInstances: GameInstance[]
-}>()
-
-const theme = useTheming()
-
-const jumpBackInItems = ref<JumpBackInItem[]>([])
-const serverData = ref<Record<string, ServerData>>({})
-const protocolVersions = ref<Record<string, number | null>>({})
-
-const MIN_JUMP_BACK_IN = 3
-const MAX_JUMP_BACK_IN = 6
-const TWO_WEEKS_AGO = dayjs().subtract(14, 'day')
-
-type BaseJumpBackInItem = {
-  last_played: Dayjs
-  instance: GameInstance
-}
-
-type InstanceJumpBackInItem = BaseJumpBackInItem & {
-  type: 'instance'
-}
-
-type WorldJumpBackInItem = BaseJumpBackInItem & {
-  type: 'world'
-  world: WorldWithProfile
-}
-
-type JumpBackInItem = InstanceJumpBackInItem | WorldJumpBackInItem
-
-const showWorlds = computed(() => theme.getFeatureFlag('worlds_in_home'))
-
-watch([() => props.recentInstances, () => showWorlds.value], async () => {
-  await populateJumpBackIn().catch(() => {
-    console.error('Failed to populate jump back in')
-  })
-})
-
-await populateJumpBackIn().catch(() => {
-  console.error('Failed to populate jump back in')
-})
-
-async function populateJumpBackIn() {
-  console.info('Repopulating jump back in...')
-
-  const worldItems: WorldJumpBackInItem[] = []
-
-  if (showWorlds.value) {
-    const worlds = await get_recent_worlds(MAX_JUMP_BACK_IN, ['normal', 'favorite'])
-
-    worlds.forEach((world) => {
-      const instance = props.recentInstances.find((instance) => instance.path === world.profile)
-
-      if (!instance || !world.last_played) {
-        return
-      }
-
-      worldItems.push({
-        type: 'world',
-        last_played: dayjs(world.last_played),
-        world: world,
-        instance: instance,
-      })
-    })
-
-    const servers: {
-      instancePath: string
-      address: string
-    }[] = worldItems
-      .filter((item) => item.world.type === 'server' && item.instance)
-      .map((item) => ({
-        instancePath: item.instance.path,
-        address: (item.world as ServerWorld).address,
-      }))
-
-    // fetch protocol versions for all unique MC versions with server worlds
-    const uniqueServerInstances = new Set<string>(servers.map((x) => x.instancePath))
-    await Promise.all(
-      [...uniqueServerInstances].map((path) =>
-        get_profile_protocol_version(path)
-          .then((protoVer) => (protocolVersions.value[path] = protoVer))
-          .catch(() => {
-            console.error(`Failed to get profile protocol for: ${path} `)
-          }),
-      ),
-    )
-
-    // initialize server data
-    servers.forEach(({ address }) => {
-      if (!serverData.value[address]) {
-        serverData.value[address] = {
-          refreshing: true,
-        }
-      }
-    })
-
-    // fetch each server's data
-    Promise.all(
-      servers.map(({ instancePath, address }) =>
-        refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address),
-      ),
-    )
-  }
-
-  const instanceItems: InstanceJumpBackInItem[] = []
-  for (const instance of props.recentInstances) {
-    const worldItem = worldItems.find((item) => item.instance.path === instance.path)
-    if ((worldItem && worldItem.last_played.isAfter(TWO_WEEKS_AGO)) || !instance.last_played) {
-      continue
-    }
-
-    instanceItems.push({
-      type: 'instance',
-      last_played: dayjs(instance.last_played),
-      instance: instance,
-    })
-  }
-
-  const items: JumpBackInItem[] = [...worldItems, ...instanceItems]
-  items.sort((a, b) => dayjs(b.last_played).diff(dayjs(a.last_played)))
-  jumpBackInItems.value = items
-    .filter((item, index) => index < MIN_JUMP_BACK_IN || item.last_played.isAfter(TWO_WEEKS_AGO))
-    .slice(0, MAX_JUMP_BACK_IN)
-}
-
-async function refreshServer(address: string, instancePath: string) {
-  await refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address)
-}
-
-async function joinWorld(world: WorldWithProfile) {
-  console.log(`Joining world ${getWorldIdentifier(world)}`)
-  if (world.type === 'server') {
-    await start_join_server(world.profile, world.address).catch(handleError)
-  } else if (world.type === 'singleplayer') {
-    await start_join_singleplayer_world(world.profile, world.path).catch(handleError)
-  }
-}
-
-async function playInstance(instance: GameInstance) {
-  await run(instance.path)
-    .catch((err) => handleSevereError(err, { profilePath: instance.path }))
-    .finally(() => {
-      trackEvent('InstancePlay', {
-        loader: instance.loader,
-        game_version: instance.game_version,
-        source: 'WorldItem',
-      })
-    })
-}
-
-async function stopInstance(path: string) {
-  await kill(path).catch(handleError)
-  trackEvent('InstanceStop', {
-    source: 'RecentWorldsList',
-  })
-}
-
-const currentProfile = ref<string>()
-const currentWorld = ref<string>()
-
-const unlistenProcesses = await process_listener(async () => {
-  await checkProcesses()
-})
-
-const unlistenProfiles = await profile_listener(async () => {
-  await populateJumpBackIn().catch(() => {
-    console.error('Failed to populate jump back in')
-  })
-})
-
-const runningInstances = ref<string[]>([])
-
-type ProcessMetadata = {
-  uuid: string
-  profile_path: string
-  start_time: string
-}
-
-const checkProcesses = async () => {
-  const runningProcesses: ProcessMetadata[] = await get_all().catch(handleError)
-
-  const runningPaths = runningProcesses.map((x) => x.profile_path)
-
-  const stoppedInstances = runningInstances.value.filter((x) => !runningPaths.includes(x))
-  if (currentProfile.value && stoppedInstances.includes(currentProfile.value)) {
-    currentProfile.value = undefined
-    currentWorld.value = undefined
-  }
-
-  runningInstances.value = runningPaths
-}
-
-onMounted(() => {
-  checkProcesses()
-})
-
-onUnmounted(() => {
-  unlistenProcesses()
-  unlistenProfiles()
-})
-</script>
-
-<template>
-  <div v-if="jumpBackInItems.length > 0" class="flex flex-col gap-2">
-    <HeadingLink v-if="theme.getFeatureFlag('worlds_tab')" to="/worlds" class="mt-1">
-      Jump back in
-    </HeadingLink>
-    <span
-      v-else
-      class="flex mt-1 mb-3 leading-none items-center gap-1 text-primary text-lg font-bold"
-    >
-      Jump back in
-    </span>
-    <div class="grid-when-huge flex flex-col w-full gap-2">
-      <template
-        v-for="item in jumpBackInItems"
-        :key="`${item.instance.path}-${item.type === 'world' ? getWorldIdentifier(item.world) : 'instance'}`"
-      >
-        <WorldItem
-          v-if="item.type === 'world'"
-          :world="item.world"
-          :playing-instance="runningInstances.includes(item.instance.path)"
-          :playing-world="
-            currentProfile === item.instance.path && currentWorld === getWorldIdentifier(item.world)
-          "
-          :refreshing="
-            item.world.type === 'server'
-              ? serverData[item.world.address].refreshing && !serverData[item.world.address].status
-              : undefined
-          "
-          supports-quick-play
-          :server-status="
-            item.world.type === 'server' ? serverData[item.world.address].status : undefined
-          "
-          :rendered-motd="
-            item.world.type === 'server' ? serverData[item.world.address].renderedMotd : undefined
-          "
-          :current-protocol="protocolVersions[item.instance.path]"
-          :game-mode="
-            item.world.type === 'singleplayer' ? GAME_MODES[item.world.game_mode] : undefined
-          "
-          :instance-path="item.instance.path"
-          :instance-name="item.instance.name"
-          :instance-icon="item.instance.icon_path"
-          @refresh="
-            () =>
-              item.world.type === 'server'
-                ? refreshServer(item.world.address, item.instance.path)
-                : {}
-          "
-          @update="() => populateJumpBackIn()"
-          @play="
-            () => {
-              currentProfile = item.instance.path
-              currentWorld = getWorldIdentifier(item.world)
-              joinWorld(item.world)
-            }
-          "
-          @play-instance="
-            () => {
-              currentProfile = item.instance.path
-              playInstance(item.instance)
-            }
-          "
-          @stop="() => stopInstance(item.instance.path)"
-        />
-        <InstanceItem v-else :instance="item.instance" />
-      </template>
-    </div>
-  </div>
-</template>
-<style scoped lang="scss">
-.grid-when-huge {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(670px, 1fr));
-}
-</style>
--- a/apps/app-frontend/src/components/ui/world/WorldItem.vue
+++ b/apps/app-frontend/src/components/ui/world/WorldItem.vue
@@ -1,516 +0,0 @@
-<script setup lang="ts">
-import dayjs from 'dayjs'
-import type { ServerStatus, ServerWorld, World } from '@/helpers/worlds.ts'
-import {
-  set_world_display_status,
-  getWorldIdentifier,
-  showWorldInFolder,
-} from '@/helpers/worlds.ts'
-import { formatNumber } from '@modrinth/utils'
-import {
-  IssuesIcon,
-  EyeIcon,
-  ClipboardCopyIcon,
-  EditIcon,
-  FolderOpenIcon,
-  MoreVerticalIcon,
-  NoSignalIcon,
-  PlayIcon,
-  SignalIcon,
-  SkullIcon,
-  SpinnerIcon,
-  StopCircleIcon,
-  TrashIcon,
-  UpdatedIcon,
-  UserIcon,
-  XIcon,
-} from '@modrinth/assets'
-import { Avatar, ButtonStyled, commonMessages, OverflowMenu, SmartClickable } from '@modrinth/ui'
-import type { MessageDescriptor } from '@vintl/vintl'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import type { Component } from 'vue'
-import { computed } from 'vue'
-import { copyToClipboard } from '@/helpers/utils'
-import { convertFileSrc } from '@tauri-apps/api/core'
-import { useRouter } from 'vue-router'
-import { Tooltip } from 'floating-vue'
-
-const { formatMessage } = useVIntl()
-
-const router = useRouter()
-
-const emit = defineEmits<{
-  (e: 'play' | 'play-instance' | 'update' | 'stop' | 'refresh' | 'edit' | 'delete'): void
-}>()
-
-const props = withDefaults(
-  defineProps<{
-    world: World
-    playingInstance?: boolean
-    playingWorld?: boolean
-    startingInstance?: boolean
-    supportsQuickPlay?: boolean
-    currentProtocol?: number | null
-    highlighted?: boolean
-
-    // Server only
-    refreshing?: boolean
-    serverStatus?: ServerStatus
-    renderedMotd?: string
-
-    // Singleplayer only
-    gameMode?: {
-      icon: Component
-      message: MessageDescriptor
-    }
-
-    // Instance
-    instancePath?: string
-    instanceName?: string
-    instanceIcon?: string
-  }>(),
-  {
-    playingInstance: false,
-    playingWorld: false,
-    startingInstance: false,
-    supportsQuickPlay: false,
-    currentProtocol: null,
-
-    refreshing: false,
-    serverStatus: undefined,
-    renderedMotd: undefined,
-
-    gameMode: undefined,
-
-    instancePath: undefined,
-    instanceName: undefined,
-    instanceIcon: undefined,
-  },
-)
-
-const playingOtherWorld = computed(() => props.playingInstance && !props.playingWorld)
-const hasPlayersTooltip = computed(
-  () => !!props.serverStatus?.players?.sample && props.serverStatus.players?.sample?.length > 0,
-)
-const serverIncompatible = computed(
-  () =>
-    !!props.serverStatus &&
-    !!props.serverStatus.version?.protocol &&
-    !!props.currentProtocol &&
-    props.serverStatus.version.protocol !== props.currentProtocol,
-)
-
-function getPingLevel(ping: number) {
-  if (ping < 150) {
-    return 5
-  } else if (ping < 300) {
-    return 4
-  } else if (ping < 600) {
-    return 3
-  } else if (ping < 1000) {
-    return 2
-  } else {
-    return 1
-  }
-}
-
-const locked = computed(() => props.world.type === 'singleplayer' && props.world.locked)
-
-const messages = defineMessages({
-  hardcore: {
-    id: 'instance.worlds.hardcore',
-    defaultMessage: 'Hardcore mode',
-  },
-  cantConnect: {
-    id: 'instance.worlds.cant_connect',
-    defaultMessage: "Can't connect to server",
-  },
-  aMinecraftServer: {
-    id: 'instance.worlds.a_minecraft_server',
-    defaultMessage: 'A Minecraft Server',
-  },
-  noQuickPlay: {
-    id: 'instance.worlds.no_quick_play',
-    defaultMessage: 'You can only jump straight into worlds on Minecraft 1.20+',
-  },
-  gameAlreadyOpen: {
-    id: 'instance.worlds.game_already_open',
-    defaultMessage: 'Instance is already open',
-  },
-  copyAddress: {
-    id: 'instance.worlds.copy_address',
-    defaultMessage: 'Copy address',
-  },
-  viewInstance: {
-    id: 'instance.worlds.view_instance',
-    defaultMessage: 'View instance',
-  },
-  playAnyway: {
-    id: 'instance.worlds.play_anyway',
-    defaultMessage: 'Play anyway',
-  },
-  playInstance: {
-    id: 'instance.worlds.play_instance',
-    defaultMessage: 'Play instance',
-  },
-  worldInUse: {
-    id: 'instance.worlds.world_in_use',
-    defaultMessage: 'World is in use',
-  },
-  dontShowOnHome: {
-    id: 'instance.worlds.dont_show_on_home',
-    defaultMessage: `Don't show on Home`,
-  },
-})
-</script>
-<template>
-  <SmartClickable>
-    <template v-if="instancePath" #clickable>
-      <router-link
-        class="no-click-animation"
-        :to="`/instance/${encodeURIComponent(instancePath)}/worlds?highlight=${encodeURIComponent(getWorldIdentifier(world))}`"
-      />
-    </template>
-    <div
-      class="grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised smart-clickable:highlight-on-hover rounded-xl"
-      :class="{
-        'world-item-highlighted': highlighted,
-      }"
-    >
-      <Avatar
-        :src="
-          world.type === 'server' && serverStatus ? serverStatus.favicon ?? world.icon : world.icon
-        "
-        size="48px"
-      />
-      <div class="flex flex-col justify-between h-full">
-        <div class="flex items-center gap-2">
-          <div class="text-lg text-contrast font-bold truncate smart-clickable:underline-on-hover">
-            {{ world.name }}
-          </div>
-          <div
-            v-if="world.type === 'singleplayer'"
-            class="text-sm text-secondary flex items-center gap-1 font-semibold"
-          >
-            <UserIcon
-              aria-hidden="true"
-              class="h-4 w-4 text-secondary shrink-0"
-              stroke-width="3px"
-            />
-            {{ formatMessage(commonMessages.singleplayerLabel) }}
-          </div>
-          <div
-            v-else-if="world.type === 'server'"
-            class="text-sm text-secondary flex items-center gap-1 font-semibold flex-nowrap whitespace-nowrap"
-          >
-            <template v-if="refreshing">
-              <SpinnerIcon aria-hidden="true" class="animate-spin shrink-0" />
-              Loading...
-            </template>
-            <template v-else-if="serverStatus">
-              <template v-if="serverIncompatible">
-                <IssuesIcon class="shrink-0 text-orange" aria-hidden="true" />
-                <span class="text-orange">
-                  Incompatible version {{ serverStatus.version?.name }}
-                </span>
-              </template>
-              <template v-else>
-                <SignalIcon
-                  v-tooltip="serverStatus ? `${serverStatus.ping}ms` : null"
-                  aria-hidden="true"
-                  :style="`--_signal-${getPingLevel(serverStatus.ping || 0)}: var(--color-green)`"
-                  stroke-width="3px"
-                  class="shrink-0"
-                  :class="{
-                    'smart-clickable:allow-pointer-events': serverStatus,
-                  }"
-                />
-                <Tooltip :disabled="!hasPlayersTooltip">
-                  <span :class="{ 'cursor-help': hasPlayersTooltip }">
-                    {{ formatNumber(serverStatus.players?.online, false) }} online
-                  </span>
-                  <template #popper>
-                    <div class="flex flex-col gap-1">
-                      <span v-for="player in serverStatus.players?.sample" :key="player.name">
-                        {{ player.name }}
-                      </span>
-                    </div>
-                  </template>
-                </Tooltip>
-              </template>
-            </template>
-            <template v-else>
-              <NoSignalIcon aria-hidden="true" stroke-width="3px" class="shrink-0" /> Offline
-            </template>
-          </div>
-        </div>
-        <div class="flex items-center gap-2 text-sm text-secondary">
-          <div
-            v-tooltip="
-              world.last_played ? dayjs(world.last_played).format('MMMM D, YYYY [at] h:mm A') : null
-            "
-            class="w-fit shrink-0"
-            :class="{ 'cursor-help smart-clickable:allow-pointer-events': world.last_played }"
-          >
-            <template v-if="world.last_played">
-              {{
-                formatMessage(commonMessages.playedLabel, {
-                  time: dayjs(world.last_played).fromNow(),
-                })
-              }}
-            </template>
-            <template v-else> Not played yet </template>
-          </div>
-          <template v-if="instancePath">
-            •
-            <router-link
-              class="flex items-center gap-1 truncate hover:underline text-secondary smart-clickable:allow-pointer-events"
-              :to="`/instance/${instancePath}`"
-            >
-              <Avatar
-                :src="instanceIcon ? convertFileSrc(instanceIcon) : undefined"
-                size="16px"
-                :tint-by="instancePath"
-                class="shrink-0"
-              />
-              <span class="truncate">{{ instanceName }}</span>
-            </router-link>
-          </template>
-        </div>
-      </div>
-      <div
-        class="font-semibold flex items-center gap-1 justify-center text-center"
-        :class="world.type === 'singleplayer' && world.hardcore ? `text-red` : 'text-secondary'"
-      >
-        <template v-if="world.type === 'server'">
-          <template v-if="refreshing">
-            <SpinnerIcon aria-hidden="true" class="animate-spin" />
-            {{ formatMessage(commonMessages.loadingLabel) }}
-          </template>
-          <div
-            v-else-if="renderedMotd"
-            class="motd-renderer font-normal font-minecraft line-clamp-2 text-secondary leading-5"
-            v-html="renderedMotd"
-          />
-          <div v-else-if="!serverStatus" class="font-normal font-minecraft text-red leading-5">
-            {{ formatMessage(messages.cantConnect) }}
-          </div>
-          <div v-else class="font-normal font-minecraft text-secondary leading-5">
-            {{ formatMessage(messages.aMinecraftServer) }}
-          </div>
-        </template>
-        <template v-else-if="world.type === 'singleplayer' && gameMode">
-          <template v-if="world.hardcore">
-            <SkullIcon aria-hidden="true" class="h-4 w-4 shrink-0" />
-            {{ formatMessage(messages.hardcore) }}
-          </template>
-          <template v-else>
-            <component :is="gameMode.icon" aria-hidden="true" class="h-4 w-4 shrink-0" />
-            {{ formatMessage(gameMode.message) }}
-          </template>
-        </template>
-      </div>
-      <div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
-        <template v-if="world.type === 'singleplayer' || serverStatus">
-          <ButtonStyled
-            v-if="(playingWorld || (locked && playingInstance)) && !startingInstance"
-            color="red"
-          >
-            <button @click="emit('stop')">
-              <StopCircleIcon aria-hidden="true" />
-              {{ formatMessage(commonMessages.stopButton) }}
-            </button>
-          </ButtonStyled>
-          <ButtonStyled v-else>
-            <button
-              v-tooltip="
-                serverIncompatible
-                  ? 'Server is incompatible'
-                  : !supportsQuickPlay
-                    ? formatMessage(messages.noQuickPlay)
-                    : playingOtherWorld || locked
-                      ? formatMessage(messages.gameAlreadyOpen)
-                      : null
-              "
-              :disabled="!supportsQuickPlay || playingOtherWorld || startingInstance"
-              @click="emit('play')"
-            >
-              <SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
-              <PlayIcon v-else aria-hidden="true" />
-              {{ formatMessage(commonMessages.playButton) }}
-            </button>
-          </ButtonStyled>
-        </template>
-        <ButtonStyled v-else>
-          <button class="invisible">
-            <PlayIcon aria-hidden="true" />
-            {{ formatMessage(commonMessages.playButton) }}
-          </button>
-        </ButtonStyled>
-        <ButtonStyled circular type="transparent">
-          <OverflowMenu
-            :options="[
-              {
-                id: 'play-instance',
-                shown: !!instancePath,
-                disabled: playingInstance,
-                action: () => emit('play-instance'),
-              },
-              {
-                id: 'play-anyway',
-                shown: serverIncompatible && !playingInstance && supportsQuickPlay,
-                action: () => emit('play'),
-              },
-              {
-                id: 'open-instance',
-                shown: !!instancePath,
-                action: () => router.push(encodeURI(`/instance/${instancePath}`)),
-              },
-              {
-                id: 'refresh',
-                shown: world.type === 'server',
-                action: () => emit('refresh'),
-              },
-              {
-                id: 'copy-address',
-                shown: world.type === 'server',
-                action: () => copyToClipboard((world as ServerWorld).address),
-              },
-              {
-                id: 'edit',
-                action: () => emit('edit'),
-                shown: !instancePath,
-                disabled: locked,
-                tooltip: locked ? formatMessage(messages.worldInUse) : undefined,
-              },
-              {
-                id: 'open-folder',
-                shown: world.type === 'singleplayer',
-                action: () =>
-                  world.type === 'singleplayer' ? showWorldInFolder(instancePath, world.path) : {},
-              },
-              {
-                divider: true,
-                shown: !!instancePath,
-              },
-              {
-                id: 'dont-show-on-home',
-                shown: !!instancePath,
-                action: () => {
-                  set_world_display_status(
-                    instancePath,
-                    world.type,
-                    getWorldIdentifier(world),
-                    'hidden',
-                  ).then(() => {
-                    emit('update')
-                  })
-                },
-              },
-              {
-                divider: true,
-                shown: !instancePath,
-              },
-              {
-                id: 'delete',
-                color: 'red',
-                hoverFilled: true,
-                action: () => emit('delete'),
-                shown: !instancePath,
-                disabled: locked,
-                tooltip: locked ? formatMessage(messages.worldInUse) : undefined,
-              },
-            ]"
-          >
-            <MoreVerticalIcon aria-hidden="true" />
-            <template #play-instance>
-              <PlayIcon aria-hidden="true" />
-              {{ formatMessage(messages.playInstance) }}
-            </template>
-            <template #play-anyway>
-              <PlayIcon aria-hidden="true" />
-              {{ formatMessage(messages.playAnyway) }}
-            </template>
-            <template #open-instance>
-              <EyeIcon aria-hidden="true" />
-              {{ formatMessage(messages.viewInstance) }}
-            </template>
-            <template #edit>
-              <EditIcon aria-hidden="true" /> {{ formatMessage(commonMessages.editButton) }}
-            </template>
-            <template #open-folder>
-              <FolderOpenIcon aria-hidden="true" />
-              {{ formatMessage(commonMessages.openFolderButton) }}
-            </template>
-            <template #copy-address>
-              <ClipboardCopyIcon aria-hidden="true" /> {{ formatMessage(messages.copyAddress) }}
-            </template>
-            <template #refresh>
-              <UpdatedIcon aria-hidden="true" /> {{ formatMessage(commonMessages.refreshButton) }}
-            </template>
-            <template #dont-show-on-home>
-              <XIcon aria-hidden="true" />
-              {{ formatMessage(messages.dontShowOnHome) }}
-            </template>
-            <template #delete>
-              <TrashIcon aria-hidden="true" />
-              {{
-                formatMessage(
-                  world.type === 'server'
-                    ? commonMessages.removeButton
-                    : commonMessages.deleteLabel,
-                )
-              }}
-            </template>
-          </OverflowMenu>
-        </ButtonStyled>
-      </div>
-    </div>
-  </SmartClickable>
-</template>
-<style scoped lang="scss">
-.world-item-highlighted {
-  position: relative;
-  animation: fade-highlight 4s ease-out;
-  filter: brightness(1);
-
-  &::before {
-    @apply rounded-xl inset-0 absolute;
-
-    animation: fade-opacity 4s ease-out;
-
-    content: '';
-    box-shadow: 0 0 8px 2px var(--color-brand);
-    border: 1.5px solid var(--color-brand);
-    opacity: 0;
-  }
-}
-
-@keyframes fade-highlight {
-  0% {
-    filter: brightness(1.25);
-  }
-  75% {
-    filter: brightness(1.25);
-  }
-  100% {
-    filter: brightness(1);
-  }
-}
-
-@keyframes fade-opacity {
-  0% {
-    opacity: 0.5;
-  }
-  75% {
-    opacity: 0.5;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-.light-mode .motd-renderer {
-  filter: brightness(0.75);
-}
-</style>
--- a/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue
@@ -1,115 +0,0 @@
-<script setup lang="ts">
-import { PlayIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, commonMessages } from '@modrinth/ui'
-import { ref } from 'vue'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import type { GameInstance } from '@/helpers/types'
-import InstanceModalTitlePrefix from '@/components/ui/modal/InstanceModalTitlePrefix.vue'
-import { add_server_to_profile, type ServerPackStatus, type ServerWorld } from '@/helpers/worlds.ts'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { handleError } from '@/store/notifications'
-import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
-
-const { formatMessage } = useVIntl()
-
-const emit = defineEmits<{
-  submit: [server: ServerWorld, play: boolean]
-}>()
-
-const props = defineProps<{
-  instance: GameInstance
-}>()
-
-const modal = ref()
-
-const name = ref()
-const address = ref()
-const resourcePack = ref<ServerPackStatus>('enabled')
-
-async function addServer(play: boolean) {
-  const serverName = name.value ? name.value : address.value
-  const resourcePackStatus = resourcePack.value
-  const index =
-    (await add_server_to_profile(
-      props.instance.path,
-      serverName,
-      address.value,
-      resourcePackStatus,
-    ).catch(handleError)) ?? 0
-  emit(
-    'submit',
-    {
-      name: serverName,
-      type: 'server',
-      index,
-      address: address.value,
-      pack_status: resourcePackStatus,
-    },
-    play,
-  )
-  hide()
-}
-
-function show() {
-  name.value = ''
-  address.value = ''
-  resourcePack.value = 'enabled'
-  modal.value.show()
-}
-
-function hide() {
-  modal.value.hide()
-}
-
-const messages = defineMessages({
-  title: {
-    id: 'instance.add-server.title',
-    defaultMessage: 'Add a server',
-  },
-  addServer: {
-    id: 'instance.add-server.add-server',
-    defaultMessage: 'Add server',
-  },
-  addAndPlay: {
-    id: 'instance.add-server.add-and-play',
-    defaultMessage: 'Add and play',
-  },
-})
-
-defineExpose({ show, hide })
-</script>
-<template>
-  <ModalWrapper ref="modal">
-    <template #title>
-      <span class="flex items-center gap-2 text-lg font-semibold text-primary">
-        <InstanceModalTitlePrefix :instance="instance" />
-        <span class="font-extrabold text-contrast">{{ formatMessage(messages.title) }}</span>
-      </span>
-    </template>
-    <ServerModalBody
-      v-model:name="name"
-      v-model:address="address"
-      v-model:resource-pack="resourcePack"
-    />
-    <div class="flex gap-2 mt-4">
-      <ButtonStyled color="brand">
-        <button :disabled="!address" @click="addServer(true)">
-          <PlayIcon />
-          {{ formatMessage(messages.addAndPlay) }}
-        </button>
-      </ButtonStyled>
-      <ButtonStyled>
-        <button :disabled="!address" @click="addServer(false)">
-          <PlusIcon />
-          {{ formatMessage(messages.addServer) }}
-        </button>
-      </ButtonStyled>
-      <ButtonStyled>
-        <button @click="hide()">
-          <XIcon />
-          {{ formatMessage(commonMessages.cancelButton) }}
-        </button>
-      </ButtonStyled>
-    </div>
-  </ModalWrapper>
-</template>
--- a/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
@@ -1,118 +0,0 @@
-<script setup lang="ts">
-import { SaveIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, commonMessages } from '@modrinth/ui'
-import { computed, ref } from 'vue'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import type { GameInstance } from '@/helpers/types'
-import {
-  type ServerPackStatus,
-  edit_server_in_profile,
-  type ServerWorld,
-  set_world_display_status,
-  type DisplayStatus,
-} from '@/helpers/worlds.ts'
-import { defineMessage, useVIntl } from '@vintl/vintl'
-import { handleError } from '@/store/notifications'
-import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
-import HideFromHomeOption from '@/components/ui/world/modal/HideFromHomeOption.vue'
-
-const { formatMessage } = useVIntl()
-
-const emit = defineEmits<{
-  submit: [server: ServerWorld]
-}>()
-
-const props = defineProps<{
-  instance: GameInstance
-}>()
-
-const modal = ref()
-
-const name = ref<string>('')
-const address = ref<string>('')
-const resourcePack = ref<ServerPackStatus>('enabled')
-const index = ref<number>(0)
-const displayStatus = ref<DisplayStatus>('normal')
-const hideFromHome = ref(false)
-
-const newDisplayStatus = computed(() => (hideFromHome.value ? 'hidden' : 'normal'))
-
-async function saveServer() {
-  const serverName = name.value ? name.value : address.value
-  const resourcePackStatus = resourcePack.value
-  await edit_server_in_profile(
-    props.instance.path,
-    index.value,
-    serverName,
-    address.value,
-    resourcePackStatus,
-  ).catch(handleError)
-
-  if (newDisplayStatus.value !== displayStatus.value) {
-    await set_world_display_status(
-      props.instance.path,
-      'server',
-      address.value,
-      newDisplayStatus.value,
-    )
-  }
-
-  emit('submit', {
-    name: serverName,
-    type: 'server',
-    index: index.value,
-    address: address.value,
-    pack_status: resourcePackStatus,
-    display_status: newDisplayStatus.value,
-  })
-  hide()
-}
-
-function show(server: ServerWorld) {
-  name.value = server.name
-  address.value = server.address
-  resourcePack.value = server.pack_status
-  index.value = server.index
-  displayStatus.value = server.display_status
-  hideFromHome.value = server.display_status === 'hidden'
-  modal.value.show()
-}
-
-function hide() {
-  modal.value.hide()
-}
-
-defineExpose({ show })
-
-const titleMessage = defineMessage({
-  id: 'instance.edit-server.title',
-  defaultMessage: 'Edit server',
-})
-</script>
-<template>
-  <ModalWrapper ref="modal">
-    <template #title>
-      <span class="font-extrabold text-lg text-contrast">{{ formatMessage(titleMessage) }}</span>
-    </template>
-    <ServerModalBody
-      v-model:name="name"
-      v-model:address="address"
-      v-model:resource-pack="resourcePack"
-    />
-    <HideFromHomeOption v-model="hideFromHome" class="mt-3" />
-    <div class="flex gap-2 mt-4">
-      <ButtonStyled color="brand">
-        <button :disabled="!address" @click="saveServer">
-          <SaveIcon />
-          {{ formatMessage(commonMessages.saveChangesButton) }}
-        </button>
-      </ButtonStyled>
-      <ButtonStyled>
-        <button @click="hide()">
-          <XIcon />
-          {{ formatMessage(commonMessages.cancelButton) }}
-        </button>
-      </ButtonStyled>
-    </div>
-  </ModalWrapper>
-</template>
--- a/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
@@ -1,128 +0,0 @@
-<script setup lang="ts">
-import { ChevronRightIcon, SaveIcon, XIcon, UndoIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, commonMessages } from '@modrinth/ui'
-import { computed, ref } from 'vue'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import type { GameInstance } from '@/helpers/types'
-import type { DisplayStatus, SingleplayerWorld } from '@/helpers/worlds.ts'
-import { set_world_display_status, rename_world, reset_world_icon } from '@/helpers/worlds.ts'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { handleError } from '@/store/notifications'
-import HideFromHomeOption from '@/components/ui/world/modal/HideFromHomeOption.vue'
-
-const { formatMessage } = useVIntl()
-
-const emit = defineEmits<{
-  submit: [path: string, name: string, removeIcon: boolean, displayStatus: DisplayStatus]
-}>()
-
-const props = defineProps<{
-  instance: GameInstance
-}>()
-
-const modal = ref()
-
-const icon = ref()
-const name = ref()
-const path = ref()
-const removeIcon = ref(false)
-const displayStatus = ref<DisplayStatus>('normal')
-const hideFromHome = ref(false)
-
-const newDisplayStatus = computed(() => (hideFromHome.value ? 'hidden' : 'normal'))
-
-async function saveWorld() {
-  await rename_world(props.instance.path, path.value, name.value).catch(handleError)
-
-  if (removeIcon.value) {
-    await reset_world_icon(props.instance.path, path.value).catch(handleError)
-  }
-  if (newDisplayStatus.value !== displayStatus.value) {
-    await set_world_display_status(
-      props.instance.path,
-      'singleplayer',
-      path.value,
-      newDisplayStatus.value,
-    )
-  }
-
-  emit('submit', path.value, name.value, removeIcon.value, newDisplayStatus.value)
-  hide()
-}
-
-function show(world: SingleplayerWorld) {
-  name.value = world.name
-  path.value = world.path
-  icon.value = world.icon
-  displayStatus.value = world.display_status
-  hideFromHome.value = world.display_status === 'hidden'
-  modal.value.show()
-}
-
-function hide() {
-  modal.value.hide()
-}
-
-defineExpose({ show })
-
-const messages = defineMessages({
-  title: {
-    id: 'instance.edit-world.title',
-    defaultMessage: 'Edit world',
-  },
-  name: {
-    id: 'instance.edit-world.name',
-    defaultMessage: 'Name',
-  },
-  placeholderName: {
-    id: 'instance.edit-world.placeholder-name',
-    defaultMessage: 'Minecraft World',
-  },
-  resetIcon: {
-    id: 'instance.edit-world.reset-icon',
-    defaultMessage: 'Reset icon',
-  },
-})
-</script>
-<template>
-  <ModalWrapper ref="modal">
-    <template #title>
-      <Avatar :src="removeIcon || !icon ? undefined : icon" size="24px" />
-      {{ instance.name }} <ChevronRightIcon />
-      <span class="font-extrabold text-lg text-contrast">{{ formatMessage(messages.title) }}</span>
-    </template>
-    <div class="w-[450px]">
-      <h2 class="text-lg font-extrabold text-contrast mt-0 mb-1">
-        {{ formatMessage(messages.name) }}
-      </h2>
-      <input
-        v-model="name"
-        type="text"
-        :placeholder="formatMessage(messages.placeholderName)"
-        class="w-full"
-        autocomplete="off"
-      />
-      <HideFromHomeOption v-model="hideFromHome" class="mt-3" />
-    </div>
-    <div class="flex gap-2 mt-4">
-      <ButtonStyled color="brand">
-        <button @click="saveWorld">
-          <SaveIcon />
-          {{ formatMessage(commonMessages.saveChangesButton) }}
-        </button>
-      </ButtonStyled>
-      <ButtonStyled>
-        <button :disabled="removeIcon || !icon" @click="removeIcon = true">
-          <UndoIcon />
-          {{ formatMessage(messages.resetIcon) }}
-        </button>
-      </ButtonStyled>
-      <ButtonStyled>
-        <button @click="hide()">
-          <XIcon />
-          {{ formatMessage(commonMessages.cancelButton) }}
-        </button>
-      </ButtonStyled>
-    </div>
-  </ModalWrapper>
-</template>
--- a/apps/app-frontend/src/components/ui/world/modal/HideFromHomeOption.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/HideFromHomeOption.vue
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import { defineMessage, useVIntl } from '@vintl/vintl'
-import { computed } from 'vue'
-import { Checkbox } from '@modrinth/ui'
-
-const { formatMessage } = useVIntl()
-const value = defineModel<boolean>({ required: true })
-
-const labelMessage = defineMessage({
-  id: 'instance.edit-world.hide-from-home',
-  defaultMessage: `Hide from the Home page`,
-})
-
-const label = computed(() => formatMessage(labelMessage))
-</script>
-<template>
-  <Checkbox v-model="value" :label="label" />
-</template>
--- a/apps/app-frontend/src/components/ui/world/modal/ServerModalBody.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/ServerModalBody.vue
@@ -1,86 +0,0 @@
-<script setup lang="ts">
-import { TeleportDropdownMenu } from '@modrinth/ui'
-import type { ServerPackStatus } from '@/helpers/worlds.ts'
-import { type MessageDescriptor, defineMessages, useVIntl } from '@vintl/vintl'
-
-const { formatMessage } = useVIntl()
-
-const name = defineModel<string>('name')
-const address = defineModel<string>('address')
-const resourcePack = defineModel<ServerPackStatus>('resourcePack')
-
-const resourcePackOptions: ServerPackStatus[] = ['enabled', 'prompt', 'disabled']
-
-const resourcePackOptionMessages: Record<ServerPackStatus, MessageDescriptor> = defineMessages({
-  enabled: {
-    id: 'instance.add-server.resource-pack.enabled',
-    defaultMessage: 'Enabled',
-  },
-  prompt: {
-    id: 'instance.add-server.resource-pack.prompt',
-    defaultMessage: 'Prompt',
-  },
-  disabled: {
-    id: 'instance.add-server.resource-pack.disabled',
-    defaultMessage: 'Disabled',
-  },
-})
-
-const messages = defineMessages({
-  name: {
-    id: 'instance.server-modal.name',
-    defaultMessage: 'Name',
-  },
-  address: {
-    id: 'instance.server-modal.address',
-    defaultMessage: 'Address',
-  },
-  resourcePack: {
-    id: 'instance.server-modal.resource-pack',
-    defaultMessage: 'Resource pack',
-  },
-  placeholderName: {
-    id: 'instance.server-modal.placeholder-name',
-    defaultMessage: 'Minecraft Server',
-  },
-})
-
-defineExpose({ resourcePackOptions })
-</script>
-<template>
-  <div class="w-[450px]">
-    <h2 class="text-lg font-extrabold text-contrast mt-0 mb-1">
-      {{ formatMessage(messages.name) }}
-    </h2>
-    <input
-      v-model="name"
-      type="text"
-      :placeholder="formatMessage(messages.placeholderName)"
-      class="w-full"
-      autocomplete="off"
-    />
-    <h2 class="text-lg font-extrabold text-contrast mt-3 mb-1">
-      {{ formatMessage(messages.address) }}
-    </h2>
-    <input
-      v-model="address"
-      type="text"
-      placeholder="example.modrinth.gg"
-      class="w-full"
-      autocomplete="off"
-    />
-    <h2 class="text-lg font-extrabold text-contrast mt-3 mb-1">
-      {{ formatMessage(messages.resourcePack) }}
-    </h2>
-    <div>
-      <TeleportDropdownMenu
-        v-model="resourcePack"
-        :options="resourcePackOptions"
-        name="Server resource pack"
-        :display-name="
-          (option: ServerPackStatus) => formatMessage(resourcePackOptionMessages[option])
-        "
-      />
-    </div>
-  </div>
-</template>
--- a/apps/app-frontend/src/composables/instance-context.ts
+++ b/apps/app-frontend/src/composables/instance-context.ts
@@ -0,0 +1,41 @@
+import { useRoute } from 'vue-router'
+import { ref, computed, type Ref, watch } from 'vue'
+import { handleError } from '@/store/notifications'
+import { get as getInstance, get_projects as getInstanceProjects } from '@/helpers/profile'
+import type { GameInstance, InstanceContent } from '@/helpers/types'
+
+export type InstanceContentMap = Record<string, InstanceContent>
+
+export async function useInstanceContext() {
+  const route = useRoute()
+
+  const instance: Ref<GameInstance | undefined> = ref()
+  const instanceContent: Ref<InstanceContentMap | undefined> = ref()
+
+  await loadInstance()
+
+  watch(route, () => {
+    loadInstance()
+  })
+
+  async function loadInstance() {
+    ;[instance.value, instanceContent.value] = await Promise.all([
+      route.query.i ? getInstance(route.query.i).catch(handleError) : Promise.resolve(),
+      route.query.i ? getInstanceProjects(route.query.i).catch(handleError) : Promise.resolve(),
+    ])
+  }
+
+  const instanceQueryAppendage = computed(() => {
+    if (instance.value) {
+      return `?i=${instance.value.path}`
+    } else {
+      return ''
+    }
+  })
+
+  return {
+    instance,
+    instanceContent,
+    instanceQueryAppendage,
+  }
+}
--- a/apps/app-frontend/src/helpers/analytics.js
+++ b/apps/app-frontend/src/helpers/analytics.js
@@ -1,9 +1,8 @@
 import { posthog } from 'posthog-js'

 export const initAnalytics = () => {
-  posthog.init('phc_9Iqi6lFs9sr5BSqh9RRNRSJ0mATS9PSgirDiX3iOYJ', {
+  posthog.init('phc_hm2ihMpTAoE86xIm7XzsCB8RPiTRKivViK5biiHedm', {
    persistence: 'localStorage',
-    api_host: 'https://posthog.modrinth.com',
  })
 }

--- a/apps/app-frontend/src/helpers/events.js
+++ b/apps/app-frontend/src/helpers/events.js
@@ -62,7 +62,7 @@ export async function process_listener(callback) {
    ProfilePayload {
        uuid: unique identification of the process in the state (currently identified by path, but that will change)
        name: name of the profile
-        profile_path: relative path toprofile_listener profile (used for path identification)
+        profile_path: relative path to profile (used for path identification)
        path: path to profile (used for opening the profile in the OS file explorer)
        event: event type ("Created", "Added", "Edited", "Removed")
    }
--- a/apps/app-frontend/src/helpers/pack.js
+++ b/apps/app-frontend/src/helpers/pack.js
@@ -7,13 +7,7 @@ import { invoke } from '@tauri-apps/api/core'
 import { create } from './profile'

 // Installs pack from a version ID
-export async function create_profile_and_install(
-  projectId,
-  versionId,
-  packTitle,
-  iconUrl,
-  createInstanceCallback = () => {},
-) {
+export async function create_profile_and_install(projectId, versionId, packTitle, iconUrl) {
  const location = {
    type: 'fromVersionId',
    project_id: projectId,
@@ -30,7 +24,6 @@ export async function create_profile_and_install(
    null,
    true,
  )
-  createInstanceCallback(profile)

  return await invoke('plugin:pack|pack_install', { location, profile })
 }
--- a/apps/app-frontend/src/helpers/settings.js
+++ b/apps/app-frontend/src/helpers/settings.js
@@ -0,0 +1,43 @@
+/**
+ * All theseus API calls return serialized values (both return values and errors);
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
+ *  and deserialized into a usable JS object.
+ */
+import { invoke } from '@tauri-apps/api/core'
+
+// Settings object
+/*
+
+Settings {
+    "memory": MemorySettings,
+    "game_resolution": [int int],
+    "custom_java_args": [String ...],
+    "custom_env_args" : [(string, string) ... ]>,
+    "java_globals": Hash of (string, Path),
+    "default_user": Uuid string (can be null),
+    "hooks": Hooks,
+    "max_concurrent_downloads": uint,
+    "version": u32,
+    "collapsed_navigation": bool,
+}
+
+Memorysettings {
+    "min": u32, can be null,
+    "max": u32,
+}
+
+*/
+
+// Get full settings object
+export async function get() {
+  return await invoke('plugin:settings|settings_get')
+}
+
+// Set full settings object
+export async function set(settings) {
+  return await invoke('plugin:settings|settings_set', { settings })
+}
+
+export async function cancel_directory_change() {
+  return await invoke('plugin:settings|cancel_directory_change')
+}
--- a/apps/app-frontend/src/helpers/settings.ts
+++ b/apps/app-frontend/src/helpers/settings.ts
@@ -1,78 +0,0 @@
-/**
- * All theseus API calls return serialized values (both return values and errors);
- * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
- *  and deserialized into a usable JS object.
- */
-import { invoke } from '@tauri-apps/api/core'
-import type { ColorTheme, FeatureFlag } from '@/store/theme.ts'
-import type { Hooks, MemorySettings, WindowSize } from '@/helpers/types'
-
-// Settings object
-/*
-
-Settings {
-    "memory": MemorySettings,
-    "game_resolution": [int int],
-    "custom_java_args": [String ...],
-    "custom_env_args" : [(string, string) ... ]>,
-    "java_globals": Hash of (string, Path),
-    "default_user": Uuid string (can be null),
-    "hooks": Hooks,
-    "max_concurrent_downloads": uint,
-    "version": u32,
-    "collapsed_navigation": bool,
-}
-
-Memorysettings {
-    "min": u32, can be null,
-    "max": u32,
-}
-
-*/
-
-export type AppSettings = {
-  max_concurrent_downloads: number
-  max_concurrent_writes: number
-
-  theme: ColorTheme
-  default_page: 'home' | 'library'
-  collapsed_navigation: boolean
-  advanced_rendering: boolean
-  native_decorations: boolean
-  toggle_sidebar: boolean
-
-  telemetry: boolean
-  discord_rpc: boolean
-  personalized_ads: boolean
-
-  onboarded: boolean
-
-  extra_launch_args: string[]
-  custom_env_vars: [string, string][]
-  memory: MemorySettings
-  force_fullscreen: boolean
-  game_resolution: WindowSize
-  hide_on_process_start: boolean
-  hooks: Hooks
-
-  custom_dir?: string | null
-  prev_custom_dir?: string | null
-  migrated: boolean
-
-  developer_mode: boolean
-  feature_flags: Record<FeatureFlag, boolean>
-}
-
-// Get full settings object
-export async function get() {
-  return (await invoke('plugin:settings|settings_get')) as AppSettings
-}
-
-// Set full settings object
-export async function set(settings: AppSettings) {
-  return await invoke('plugin:settings|settings_set', { settings })
-}
-
-export async function cancel_directory_change(): Promise<void> {
-  return await invoke('plugin:settings|cancel_directory_change')
-}
--- a/apps/app-frontend/src/helpers/types.d.ts
+++ b/apps/app-frontend/src/helpers/types.d.ts
@@ -32,6 +32,18 @@ type GameInstance = {
  hooks: Hooks
 }

+type InstanceContent = {
+  hash: string
+  file_name: string
+  size: number
+  metadata?: {
+    project_id: ModrinthId
+    version_id: ModrinthId
+  }
+  update_version_id: string
+  project_type: 'mod' | 'resourcepack' | 'datapack' | 'shaderpack'
+}
+
 type InstallStage =
  | 'installed'
  | 'minecraft_installing'
@@ -48,32 +60,6 @@ type LinkedData = {

 type InstanceLoader = 'vanilla' | 'forge' | 'fabric' | 'quilt' | 'neoforge'

-type ContentFile = {
-  hash: string
-  file_name: string
-  size: number
-  metadata?: FileMetadata
-  update_version_id?: string
-  project_type: ContentFileProjectType
-}
-
-type FileMetadata = {
-  project_id: string
-  version_id: string
-}
-
-type ContentFileProjectType = 'mod' | 'datapack' | 'resourcepack' | 'shaderpack'
-
-type CacheBehaviour =
-  // Serve expired data. If fetch fails / launcher is offline, errors are ignored
-  | 'stale_while_revalidate_skip_offline'
-  // Serve expired data, revalidate in background
-  | 'stale_while_revalidate'
-  // Must revalidate if data is expired
-  | 'must_revalidate'
-  // Ignore cache- always fetch updated data from origin
-  | 'bypass'
-
 type MemorySettings = {
  maximum: number
 }
@@ -114,7 +100,6 @@ type AppSettings = {
  collapsed_navigation: boolean
  advanced_rendering: boolean
  native_decorations: boolean
-  worlds_in_home: boolean

  telemetry: boolean
  discord_rpc: boolean
--- a/apps/app-frontend/src/helpers/utils.js
+++ b/apps/app-frontend/src/helpers/utils.js
@@ -37,13 +37,6 @@ export async function restartApp() {
  return await invoke('restart_app')
 }

-/**
- * @deprecated This method is no longer needed, and just returns its parameter
- */
-export function sanitizePotentialFileUrl(url) {
-  return url
-}
-
 export const releaseColor = (releaseType) => {
  switch (releaseType) {
    case 'release':
@@ -56,7 +49,3 @@ export const releaseColor = (releaseType) => {
      return ''
  }
 }
-
-export async function copyToClipboard(text) {
-  await navigator.clipboard.writeText(text)
-}
--- a/apps/app-frontend/src/helpers/worlds.ts
+++ b/apps/app-frontend/src/helpers/worlds.ts
@@ -1,327 +0,0 @@
-import { invoke } from '@tauri-apps/api/core'
-import { get_full_path } from '@/helpers/profile'
-import { openPath } from '@/helpers/utils'
-import { autoToHTML } from '@geometrically/minecraft-motd-parser'
-import dayjs from 'dayjs'
-import type { GameVersion } from '@modrinth/ui'
-
-type BaseWorld = {
-  name: string
-  last_played?: string
-  icon?: string
-  display_status: DisplayStatus
-  type: WorldType
-}
-
-export type WorldType = 'singleplayer' | 'server'
-export type DisplayStatus = 'normal' | 'hidden' | 'favorite'
-
-export type SingleplayerWorld = BaseWorld & {
-  type: 'singleplayer'
-  path: string
-  game_mode: SingleplayerGameMode
-  hardcore: boolean
-  locked: boolean
-}
-
-export type ServerWorld = BaseWorld & {
-  type: 'server'
-  index: number
-  address: string
-  pack_status: ServerPackStatus
-}
-
-export type World = SingleplayerWorld | ServerWorld
-
-export type WorldWithProfile = {
-  profile: string
-} & World
-
-export type SingleplayerGameMode = 'survival' | 'creative' | 'adventure' | 'spectator'
-export type ServerPackStatus = 'enabled' | 'disabled' | 'prompt'
-
-export type ServerStatus = {
-  // https://minecraft.wiki/w/Text_component_format
-  description?: string | Chat
-  players?: {
-    max: number
-    online: number
-    sample: { name: string; id: string }[]
-  }
-  version?: {
-    name: string
-    protocol: number
-  }
-  favicon?: string
-  enforces_secure_chat: boolean
-  ping?: number
-}
-
-export interface Chat {
-  text: string
-  bold: boolean
-  italic: boolean
-  underlined: boolean
-  strikethrough: boolean
-  obfuscated: boolean
-  color?: string
-  extra: Chat[]
-}
-
-export type ServerData = {
-  refreshing: boolean
-  status?: ServerStatus
-  rawMotd?: string | Chat
-  renderedMotd?: string
-}
-
-export async function get_recent_worlds(
-  limit: number,
-  displayStatuses?: DisplayStatus[],
-): Promise<WorldWithProfile[]> {
-  return await invoke('plugin:worlds|get_recent_worlds', { limit, displayStatuses })
-}
-
-export async function get_profile_worlds(path: string): Promise<World[]> {
-  return await invoke('plugin:worlds|get_profile_worlds', { path })
-}
-
-export async function get_singleplayer_world(
-  instance: string,
-  world: string,
-): Promise<SingleplayerWorld> {
-  return await invoke('plugin:worlds|get_singleplayer_world', { instance, world })
-}
-
-export async function set_world_display_status(
-  instance: string,
-  worldType: WorldType,
-  worldId: string,
-  displayStatus: DisplayStatus,
-): Promise<void> {
-  return await invoke('plugin:worlds|set_world_display_status', {
-    instance,
-    worldType,
-    worldId,
-    displayStatus,
-  })
-}
-
-export async function rename_world(
-  instance: string,
-  world: string,
-  newName: string,
-): Promise<void> {
-  return await invoke('plugin:worlds|rename_world', { instance, world, newName })
-}
-
-export async function reset_world_icon(instance: string, world: string): Promise<void> {
-  return await invoke('plugin:worlds|reset_world_icon', { instance, world })
-}
-
-export async function backup_world(instance: string, world: string): Promise<number> {
-  return await invoke('plugin:worlds|backup_world', { instance, world })
-}
-
-export async function delete_world(instance: string, world: string): Promise<void> {
-  return await invoke('plugin:worlds|delete_world', { instance, world })
-}
-
-export async function add_server_to_profile(
-  path: string,
-  name: string,
-  address: string,
-  packStatus: ServerPackStatus,
-): Promise<number> {
-  return await invoke('plugin:worlds|add_server_to_profile', { path, name, address, packStatus })
-}
-
-export async function edit_server_in_profile(
-  path: string,
-  index: number,
-  name: string,
-  address: string,
-  packStatus: ServerPackStatus,
-): Promise<void> {
-  return await invoke('plugin:worlds|edit_server_in_profile', {
-    path,
-    index,
-    name,
-    address,
-    packStatus,
-  })
-}
-
-export async function remove_server_from_profile(path: string, index: number): Promise<void> {
-  return await invoke('plugin:worlds|remove_server_from_profile', { path, index })
-}
-
-export async function get_profile_protocol_version(path: string): Promise<number | null> {
-  return await invoke('plugin:worlds|get_profile_protocol_version', { path })
-}
-
-export async function get_server_status(
-  address: string,
-  protocolVersion: number | null = null,
-): Promise<ServerStatus> {
-  return await invoke('plugin:worlds|get_server_status', { address, protocolVersion })
-}
-
-export async function start_join_singleplayer_world(path: string, world: string): Promise<unknown> {
-  return await invoke('plugin:worlds|start_join_singleplayer_world', { path, world })
-}
-
-export async function start_join_server(path: string, address: string): Promise<unknown> {
-  return await invoke('plugin:worlds|start_join_server', { path, address })
-}
-
-export async function showWorldInFolder(instancePath: string, worldPath: string) {
-  const fullPath = await get_full_path(instancePath)
-  return await openPath(fullPath + '/saves/' + worldPath)
-}
-
-export function getWorldIdentifier(world: World) {
-  return world.type === 'singleplayer' ? world.path : world.address
-}
-
-export function sortWorlds(worlds: World[]) {
-  worlds.sort((a, b) => {
-    if (!a.last_played) {
-      return 1
-    }
-    if (!b.last_played) {
-      return -1
-    }
-    return dayjs(b.last_played).diff(dayjs(a.last_played))
-  })
-}
-
-export function isSingleplayerWorld(world: World): world is SingleplayerWorld {
-  return world.type === 'singleplayer'
-}
-
-export function isServerWorld(world: World): world is ServerWorld {
-  return world.type === 'server'
-}
-
-export async function refreshServerData(
-  serverData: ServerData,
-  protocolVersion: number | null,
-  address: string,
-): Promise<void> {
-  serverData.refreshing = true
-  await get_server_status(address, protocolVersion)
-    .then((status) => {
-      serverData.status = status
-      if (status.description) {
-        serverData.rawMotd = status.description
-        serverData.renderedMotd = autoToHTML(status.description)
-      }
-    })
-    .catch((err) => {
-      console.error(`Refreshing addr: ${address}`, err)
-    })
-    .finally(() => {
-      serverData.refreshing = false
-    })
-}
-
-export async function refreshServers(
-  worlds: World[],
-  serverData: Record<string, ServerData>,
-  protocolVersion: number | null,
-) {
-  const servers = worlds.filter(isServerWorld)
-  servers.forEach((server) => {
-    if (!serverData[server.address]) {
-      serverData[server.address] = {
-        refreshing: true,
-      }
-    } else {
-      serverData[server.address].refreshing = true
-    }
-  })
-
-  // noinspection ES6MissingAwait - handled with .then by refreshServerData already
-  Promise.all(
-    Object.keys(serverData).map((address) =>
-      refreshServerData(serverData[address], protocolVersion, address),
-    ),
-  )
-}
-
-export async function refreshWorld(worlds: World[], instancePath: string, worldPath: string) {
-  const index = worlds.findIndex((w) => w.type === 'singleplayer' && w.path === worldPath)
-  const newWorld = await get_singleplayer_world(instancePath, worldPath)
-  if (index !== -1) {
-    worlds[index] = newWorld
-  } else {
-    console.info(`Adding new world at path: ${worldPath}.`)
-    worlds.push(newWorld)
-  }
-  sortWorlds(worlds)
-}
-
-export async function handleDefaultProfileUpdateEvent(
-  worlds: World[],
-  instancePath: string,
-  e: ProfileEvent,
-) {
-  if (e.event === 'world_updated') {
-    await refreshWorld(worlds, instancePath, e.world)
-  }
-
-  if (e.event === 'server_joined') {
-    const world = worlds.find(
-      (w) =>
-        w.type === 'server' &&
-        (w.address === `${e.host}:${e.port}` || (e.port == 25565 && w.address == e.host)),
-    )
-    if (world) {
-      world.last_played = e.timestamp
-      sortWorlds(worlds)
-    } else {
-      console.error(`Could not find world for server join event: ${e.host}:${e.port}`)
-    }
-  }
-}
-
-export async function refreshWorlds(instancePath: string): Promise<World[]> {
-  const worlds = await get_profile_worlds(instancePath).catch((err) => {
-    console.error(`Error refreshing worlds for instance: ${instancePath}`, err)
-  })
-  if (worlds) {
-    sortWorlds(worlds)
-  }
-
-  return worlds ?? []
-}
-
-const FIRST_QUICK_PLAY_VERSION = '23w14a'
-
-export function hasQuickPlaySupport(gameVersions: GameVersion[], currentVersion: string) {
-  if (!gameVersions.length) {
-    return false
-  }
-
-  const versionIndex = gameVersions.findIndex((v) => v.version === currentVersion)
-  const targetIndex = gameVersions.findIndex((v) => v.version === FIRST_QUICK_PLAY_VERSION)
-
-  return versionIndex !== -1 && targetIndex !== -1 && versionIndex <= targetIndex
-}
-
-export type ProfileEvent = { profile_path_id: string } & (
-  | {
-      event: 'servers_updated'
-    }
-  | {
-      event: 'world_updated'
-      world: string
-    }
-  | {
-      event: 'server_joined'
-      host: string
-      port: number
-      timestamp: string
-    }
-)
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -20,57 +20,12 @@
  "app.settings.tabs.resource-management": {
    "message": "Resource management"
  },
-  "instance.add-server.add-and-play": {
-    "message": "Add and play"
-  },
-  "instance.add-server.add-server": {
-    "message": "Add server"
-  },
-  "instance.add-server.resource-pack.disabled": {
-    "message": "Disabled"
-  },
-  "instance.add-server.resource-pack.enabled": {
-    "message": "Enabled"
-  },
-  "instance.add-server.resource-pack.prompt": {
-    "message": "Prompt"
-  },
-  "instance.add-server.title": {
-    "message": "Add a server"
-  },
-  "instance.edit-server.title": {
-    "message": "Edit server"
-  },
-  "instance.edit-world.name": {
-    "message": "Name"
-  },
-  "instance.edit-world.placeholder-name": {
-    "message": "Minecraft World"
-  },
-  "instance.edit-world.reset-icon": {
-    "message": "Reset icon"
-  },
-  "instance.edit-world.title": {
-    "message": "Edit world"
-  },
  "instance.filter.disabled": {
    "message": "Disabled projects"
  },
  "instance.filter.updates-available": {
    "message": "Updates available"
  },
-  "instance.server-modal.address": {
-    "message": "Address"
-  },
-  "instance.server-modal.name": {
-    "message": "Name"
-  },
-  "instance.server-modal.placeholder-name": {
-    "message": "Minecraft Server"
-  },
-  "instance.server-modal.resource-pack": {
-    "message": "Resource pack"
-  },
  "instance.settings.tabs.general": {
    "message": "General"
  },
@@ -353,41 +308,17 @@
  "instance.settings.title": {
    "message": "Settings"
  },
-  "instance.worlds.a_minecraft_server": {
-    "message": "A Minecraft Server"
+  "project.card.actions.installed.tooltip": {
+    "message": "This project is already installed"
  },
-  "instance.worlds.cant_connect": {
-    "message": "Can't connect to server"
+  "project.card.actions.installing.tooltip": {
+    "message": "This project is being installed"
  },
-  "instance.worlds.copy_address": {
-    "message": "Copy address"
+  "project.card.actions.view-gallery": {
+    "message": "View gallery"
  },
-  "instance.worlds.filter.available": {
-    "message": "Available"
-  },
-  "instance.worlds.game_already_open": {
-    "message": "Instance is already open"
-  },
-  "instance.worlds.hardcore": {
-    "message": "Hardcore mode"
-  },
-  "instance.worlds.no_quick_play": {
-    "message": "You can only jump straight into worlds on Minecraft 1.20+"
-  },
-  "instance.worlds.play_anyway": {
-    "message": "Play anyway"
-  },
-  "instance.worlds.type.server": {
-    "message": "Server"
-  },
-  "instance.worlds.type.singleplayer": {
-    "message": "Singleplayer"
-  },
-  "instance.worlds.view_instance": {
-    "message": "View instance"
-  },
-  "instance.worlds.world_in_use": {
-    "message": "World is in use"
+  "project.card.actions.view-versions": {
+    "message": "View versions"
  },
  "search.filter.locked.instance": {
    "message": "Provided by the instance"
--- a/apps/app-frontend/src/main.js
+++ b/apps/app-frontend/src/main.js
@@ -6,7 +6,6 @@ import FloatingVue from 'floating-vue'
 import 'floating-vue/dist/style.css'
 import { createPlugin } from '@vintl/vintl/plugin'
 import * as Sentry from '@sentry/vue'
-import { VueScanPlugin } from '@taijased/vue-render-tracker'

 const VIntlPlugin = createPlugin({
  controllerOpts: {
@@ -25,13 +24,6 @@ const VIntlPlugin = createPlugin({
  injectInto: [],
 })

-const vueScan = new VueScanPlugin({
-  enabled: false, // Enable or disable the tracker
-  showOverlay: true, // Show overlay to visualize renders
-  log: false, // Log render events to the console
-  playSound: false, // Play sound on each render
-})
-
 const pinia = createPinia()

 let app = createApp(App)
@@ -43,7 +35,6 @@ Sentry.init({
  tracesSampleRate: 0.1,
 })

-app.use(vueScan)
 app.use(router)
 app.use(pinia)
 app.use(FloatingVue, {
--- a/apps/app-frontend/src/pages/Browse.vue
+++ b/apps/app-frontend/src/pages/Browse.vue
@@ -2,7 +2,14 @@
 import { computed, nextTick, ref, shallowRef, watch } from 'vue'
 import type { Ref } from 'vue'
 import { SearchIcon, XIcon, ClipboardCopyIcon, GlobeIcon, ExternalIcon } from '@modrinth/assets'
-import type { Category, GameVersion, Platform, ProjectType, SortType, Tags } from '@modrinth/ui'
+import type {
+  CategoryTag,
+  GameVersionTag,
+  PlatformTag,
+  ProjectType,
+  SortType,
+  Tags,
+} from '@modrinth/ui'
 import {
  SearchFilterControl,
  SearchSidebarFilter,
@@ -19,14 +26,14 @@ import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
 import type { LocationQuery } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
 import SearchCard from '@/components/ui/SearchCard.vue'
-import { get as getInstance, get_projects as getInstanceProjects } from '@/helpers/profile.js'
 import { get_search_results } from '@/helpers/cache.js'
 import NavTabs from '@/components/ui/NavTabs.vue'
-import type Instance from '@/components/ui/Instance.vue'
 import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import { openUrl } from '@tauri-apps/plugin-opener'
+import { useInstanceContext } from '@/composables/instance-context.ts'
+import type { SearchResult } from '@modrinth/utils'

 const { formatMessage } = useVIntl()

@@ -38,62 +45,45 @@ const projectTypes = computed(() => {
 })

 const [categories, loaders, availableGameVersions] = await Promise.all([
-  get_categories().catch(handleError).then(ref),
-  get_loaders().catch(handleError).then(ref),
-  get_game_versions().catch(handleError).then(ref),
+  get_categories()
+    .catch(handleError)
+    .then((x: CategoryTag[]) => ref(x)),
+  get_loaders()
+    .catch(handleError)
+    .then((x: PlatformTag[]) => ref(x)),
+  get_game_versions()
+    .catch(handleError)
+    .then((x: GameVersionTag[]) => ref(x)),
 ])

 const tags: Ref<Tags> = computed(() => ({
-  gameVersions: availableGameVersions.value as GameVersion[],
-  loaders: loaders.value as Platform[],
-  categories: categories.value as Category[],
+  gameVersions: availableGameVersions.value as GameVersionTag[],
+  loaders: loaders.value as PlatformTag[],
+  categories: categories.value as CategoryTag[],
 }))

-type Instance = {
-  game_version: string
-  loader: string
-  path: string
-  install_stage: string
-  icon_path?: string
-  name: string
-}
-
-type InstanceProject = {
-  metadata: {
-    project_id: string
-  }
-}
-
-const instance: Ref<Instance | null> = ref(null)
-const instanceProjects: Ref<InstanceProject[] | null> = ref(null)
 const instanceHideInstalled = ref(false)
-const newlyInstalled = ref([])
+const newlyInstalled: Ref<string[]> = ref([])
+
+const { instance, instanceContent } = await useInstanceContext()

 const PERSISTENT_QUERY_PARAMS = ['i', 'ai']

-await updateInstanceContext()
+await checkHideInstalledQuery()

-watch(route, () => {
-  updateInstanceContext()
+watch(instance, () => {
+  checkHideInstalledQuery()
 })

-async function updateInstanceContext() {
-  if (route.query.i) {
-    ;[instance.value, instanceProjects.value] = await Promise.all([
-      getInstance(route.query.i).catch(handleError),
-      getInstanceProjects(route.query.i).catch(handleError),
-    ])
-    newlyInstalled.value = []
-  }
-
+async function checkHideInstalledQuery() {
  if (route.query.ai && !(projectTypes.value.length === 1 && projectTypes.value[0] === 'modpack')) {
    instanceHideInstalled.value = route.query.ai === 'true'
  }

-  if (instance.value && instance.value.path !== route.query.i && route.path.startsWith('/browse')) {
-    instance.value = null
-    instanceHideInstalled.value = false
-  }
+  // if (instance.value && instance.value.path !== route.query.i && route.path.startsWith('/browse')) {
+  //   instance.value = undefined
+  //   instanceHideInstalled.value = false
+  // }
 }

 const instanceFilters = computed(() => {
@@ -119,10 +109,10 @@ const instanceFilters = computed(() => {
      })
    }

-    if (instanceHideInstalled.value && instanceProjects.value) {
-      const installedMods = Object.values(instanceProjects.value)
+    if (instanceHideInstalled.value && instanceContent.value) {
+      const installedMods: string[] = Object.values(instanceContent.value)
        .filter((x) => x.metadata)
-        .map((x) => x.metadata.project_id)
+        .map((x) => x.metadata!.project_id)

      installedMods.push(...newlyInstalled.value)

@@ -173,23 +163,27 @@ breadcrumbs.setContext({ name: 'Discover content', link: route.path, query: rout

 const loading = ref(true)

-const projectType = ref(route.params.projectType)
+const projectType: Ref<ProjectType | undefined> = ref(
+  typeof route.params.projectType === 'string'
+    ? (route.params.projectType as ProjectType)
+    : undefined,
+)

 watch(projectType, () => {
  loading.value = true
 })

-type SearchResult = {
-  project_id: string
+type ExtendedSearchResult = SearchResult & {
+  installed?: boolean
 }

 type SearchResults = {
  total_hits: number
  limit: number
-  hits: SearchResult[]
+  hits: ExtendedSearchResult[]
 }

-const results: Ref<SearchResults | null> = shallowRef(null)
+const results: Ref<SearchResults | undefined> = shallowRef()
 const pageCount = computed(() =>
  results.value ? Math.ceil(results.value.total_hits / results.value.limit) : 1,
 )
@@ -200,7 +194,7 @@ watch(requestParams, () => {
 })

 async function refreshSearch() {
-  let rawResults = await get_search_results(requestParams.value)
+  let rawResults = (await get_search_results(requestParams.value)) as { result: SearchResults }
  if (!rawResults) {
    rawResults = {
      result: {
@@ -211,13 +205,15 @@ async function refreshSearch() {
    }
  }
  if (instance.value) {
-    for (const val of rawResults.result.hits) {
-      val.installed =
-        newlyInstalled.value.includes(val.project_id) ||
-        Object.values(instanceProjects.value).some(
-          (x) => x.metadata && x.metadata.project_id === val.project_id,
-        )
-    }
+    rawResults.result.hits.map((x) => ({
+      ...x,
+      installed:
+        newlyInstalled.value.includes(x.project_id) ||
+        (instanceContent.value &&
+          Object.values(instanceContent.value).some(
+            (content) => content.metadata && content.metadata.project_id === x.project_id,
+          )),
+    }))
  }
  results.value = rawResults.result

@@ -271,9 +267,9 @@ watch(
  () => route.params.projectType,
  async (newType) => {
    // Check if the newType is not the same as the current value
-    if (!newType || newType === projectType.value) return
+    if (!newType || newType === projectType.value || typeof newType !== 'string') return

-    projectType.value = newType
+    projectType.value = newType as ProjectType

    currentSortType.value = { display: 'Relevance', name: 'relevance' }
    query.value = ''
@@ -287,7 +283,7 @@ const selectableProjectTypes = computed(() => {

  if (instance.value) {
    if (
-      availableGameVersions.value.findIndex((x) => x.version === instance.value.game_version) <=
+      availableGameVersions.value.findIndex((x) => x.version === instance.value?.game_version) <=
      availableGameVersions.value.findIndex((x) => x.version === '1.13')
    ) {
      dataPacks = true
@@ -353,9 +349,10 @@ const messages = defineMessages({
  },
 })

-const options = ref(null)
-const handleRightClick = (event, result) => {
-  options.value.showMenu(event, result, [
+const options: Ref<InstanceType<typeof ContextMenu> | null> = ref(null)
+
+const handleRightClick = (event: MouseEvent, result: ExtendedSearchResult) => {
+  options.value?.showMenu(event, result, [
    {
      name: 'open_link',
    },
@@ -364,7 +361,7 @@ const handleRightClick = (event, result) => {
    },
  ])
 }
-const handleOptionsClick = (args) => {
+const handleOptionsClick = (args: { item: ExtendedSearchResult; option: string }) => {
  switch (args.option) {
    case 'open_link':
      openUrl(`https://modrinth.com/${args.item.project_type}/${args.item.slug}`)
@@ -477,33 +474,26 @@ await refreshSearch()
      <section v-if="loading" class="offline">
        <LoadingIndicator />
      </section>
-      <section v-else-if="offline && results.total_hits === 0" class="offline">
+      <section v-else-if="offline && (!results || results.total_hits === 0)" class="offline">
        You are currently offline. Connect to the internet to browse Modrinth!
      </section>
-      <section v-else class="project-list display-mode--list instance-results" role="list">
+      <section
+        v-else-if="results"
+        class="project-list display-mode--list instance-results"
+        role="list"
+      >
        <SearchCard
          v-for="result in results.hits"
          :key="result?.project_id"
          :project="result"
          :instance="instance"
-          :categories="[
-            ...categories.filter(
-              (cat) =>
-                result?.display_categories.includes(cat.name) && cat.project_type === projectType,
-            ),
-            ...loaders.filter(
-              (loader) =>
-                result?.display_categories.includes(loader.name) &&
-                loader.supported_project_types?.includes(projectType),
-            ),
-          ]"
          :installed="result.installed || newlyInstalled.includes(result.project_id)"
          @install="
            (id) => {
              newlyInstalled.push(id)
            }
          "
-          @contextmenu.prevent.stop="(event) => handleRightClick(event, result)"
+          @contextmenu.prevent.stop="(event: MouseEvent) => handleRightClick(event, result)"
        />
        <ContextMenu ref="options" @option-clicked="handleOptionsClick">
          <template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
--- a/apps/app-frontend/src/pages/Index.vue
+++ b/apps/app-frontend/src/pages/Index.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup>
 import { ref, onUnmounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import RowDisplay from '@/components/RowDisplay.vue'
@@ -8,32 +8,19 @@ import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { handleError } from '@/store/notifications.js'
 import dayjs from 'dayjs'
 import { get_search_results } from '@/helpers/cache.js'
-import type { SearchResult } from '@modrinth/utils'
-import RecentWorldsList from '@/components/ui/world/RecentWorldsList.vue'
+
+const featuredModpacks = ref({})
+const featuredMods = ref({})
+const filter = ref('')

 const route = useRoute()
 const breadcrumbs = useBreadcrumbs()

 breadcrumbs.setRootContext({ name: 'Home', link: route.path })

-const instances = ref<GameInstance[]>([])
+const recentInstances = ref([])

-const featuredModpacks = ref<SearchResult[]>([])
-const featuredMods = ref<SearchResult[]>([])
-const installedModpacksFilter = ref('')
-
-const recentInstances = computed(() =>
-  instances.value
-    .filter((x) => x.last_played)
-    .slice()
-    .sort((a, b) => dayjs(b.last_played).diff(dayjs(a.last_played))),
-)
-
-const hasFeaturedProjects = computed(
-  () => (featuredModpacks.value?.length ?? 0) + (featuredMods.value?.length ?? 0) > 0,
-)
-
-const offline = ref<boolean>(!navigator.onLine)
+const offline = ref(!navigator.onLine)
 window.addEventListener('offline', () => {
  offline.value = true
 })
@@ -41,21 +28,34 @@ window.addEventListener('online', () => {
  offline.value = false
 })

-async function fetchInstances() {
-  instances.value = await list().catch(handleError)
+const getInstances = async () => {
+  const profiles = await list().catch(handleError)
+
+  recentInstances.value = profiles
+    .filter((x) => x.last_played)
+    .sort((a, b) => {
+      const dateA = dayjs(a.last_played)
+      const dateB = dayjs(b.last_played)
+
+      if (dateA.isSame(dateB)) {
+        return a.name.localeCompare(b.name)
+      }
+
+      return dateB - dateA
+    })

  const filters = []
-  for (const instance of instances.value) {
+  for (const instance of profiles) {
    if (instance.linked_data && instance.linked_data.project_id) {
      filters.push(`NOT"project_id"="${instance.linked_data.project_id}"`)
    }
  }
-  installedModpacksFilter.value = filters.join(' AND ')
+  filter.value = filters.join(' AND ')
 }

-async function fetchFeaturedModpacks() {
+const getFeaturedModpacks = async () => {
  const response = await get_search_results(
-    `?facets=[["project_type:modpack"]]&limit=10&index=follows&filters=${installedModpacksFilter.value}`,
+    `?facets=[["project_type:modpack"]]&limit=10&index=follows&filters=${filter.value}`,
  )

  if (response) {
@@ -64,8 +64,7 @@ async function fetchFeaturedModpacks() {
    featuredModpacks.value = []
  }
 }
-
-async function fetchFeaturedMods() {
+const getFeaturedMods = async () => {
  const response = await get_search_results('?facets=[["project_type:mod"]]&limit=10&index=follows')

  if (response) {
@@ -75,21 +74,27 @@ async function fetchFeaturedMods() {
  }
 }

-async function refreshFeaturedProjects() {
-  await Promise.all([fetchFeaturedModpacks(), fetchFeaturedMods()])
-}
+await getInstances()

-await fetchInstances()
-await refreshFeaturedProjects()
+await Promise.all([getFeaturedModpacks(), getFeaturedMods()])

 const unlistenProfile = await profile_listener(async (e) => {
-  await fetchInstances()
+  await getInstances()

  if (e.event === 'added' || e.event === 'created' || e.event === 'removed') {
-    await refreshFeaturedProjects()
+    await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
  }
 })

+// computed sums of recentInstances, featuredModpacks, featuredMods, treating them as arrays if they are not
+const total = computed(() => {
+  return (
+    (recentInstances.value?.length ?? 0) +
+    (featuredModpacks.value?.length ?? 0) +
+    (featuredMods.value?.length ?? 0)
+  )
+})
+
 onUnmounted(() => {
  unlistenProfile()
 })
@@ -99,10 +104,17 @@ onUnmounted(() => {
  <div class="p-6 flex flex-col gap-2">
    <h1 v-if="recentInstances" class="m-0 text-2xl">Welcome back!</h1>
    <h1 v-else class="m-0 text-2xl">Welcome to Modrinth App!</h1>
-    <RecentWorldsList :recent-instances="recentInstances" />
    <RowDisplay
-      v-if="hasFeaturedProjects"
+      v-if="total > 0"
      :instances="[
+        {
+          label: 'Recently played',
+          route: '/library',
+          instances: recentInstances,
+          instance: true,
+          downloaded: true,
+          compact: true,
+        },
        {
          label: 'Discover a modpack',
          route: '/browse/modpack',
--- a/apps/app-frontend/src/pages/Worlds.vue
+++ b/apps/app-frontend/src/pages/Worlds.vue
@@ -1,4 +0,0 @@
-<script setup lang="ts"></script>
-<template>
-  <div class="p-6 flex flex-col gap-2">Worlds</div>
-</template>
--- a/apps/app-frontend/src/pages/collection/Index.vue
+++ b/apps/app-frontend/src/pages/collection/Index.vue
@@ -0,0 +1,136 @@
+<template>
+  <Teleport to="#sidebar-teleport-target">
+    <CollectionSidebarDescription
+      v-if="collection"
+      :collection="collection"
+      class="project-sidebar-section"
+    />
+    <CollectionSidebarCurator
+      v-if="curator"
+      :user="curator"
+      :link="`/user/${curator.id}`"
+      class="project-sidebar-section"
+    />
+    <CollectionSidebarDetails
+      v-if="collection"
+      :collection="collection"
+      class="project-sidebar-section"
+    />
+  </Teleport>
+  <div v-if="collection" class="p-6 flex flex-col gap-4">
+    <InstanceIndicator :instance="instance" />
+    <CollectionHeader :collection="collection">
+      <template #actions>
+        <ButtonStyled v-if="themeStore.devMode" circular type="transparent" size="large">
+          <OverflowMenu
+            :options="[{ id: 'copy-id', action: () => copyId(), shown: themeStore.devMode }]"
+            aria-label="More options"
+          >
+            <MoreVerticalIcon aria-hidden="true" />
+            <template #copy-id>
+              <ClipboardCopyIcon aria-hidden="true" />
+              {{ formatMessage(commonMessages.copyIdButton) }}
+            </template>
+          </OverflowMenu>
+        </ButtonStyled>
+      </template>
+    </CollectionHeader>
+    <div v-if="projects">
+      <ProjectsList
+        :projects="projects"
+        :project-link="(project) => `/project/${project.id}${instanceQueryAppendage}`"
+        :experimental-colors="themeStore.featureFlags.project_card_background"
+      >
+        <template #project-actions="{ project }">
+          <ProjectCardActions
+            :instance="instance"
+            :instance-content="instanceContent"
+            :project="project"
+          />
+        </template>
+      </ProjectsList>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { ref, type Ref, watch } from 'vue'
+import { handleError } from '@/store/notifications.js'
+import {
+  ProjectsList,
+  ButtonStyled,
+  commonMessages,
+  OverflowMenu,
+  CollectionHeader,
+  CollectionSidebarCurator,
+  CollectionSidebarDescription,
+  CollectionSidebarDetails,
+} from '@modrinth/ui'
+import { ClipboardCopyIcon, MoreVerticalIcon } from '@modrinth/assets'
+import { useVIntl } from '@vintl/vintl'
+import { useFetch } from '@/helpers/fetch'
+import type { User, Project, Collection } from '@modrinth/utils'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { useTheming } from '@/store/theme'
+import { useInstanceContext } from '@/composables/instance-context'
+import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
+import ProjectCardActions from '@/components/ui/ProjectCardActions.vue'
+
+const breadcrumbs = useBreadcrumbs()
+const route = useRoute()
+const { formatMessage } = useVIntl()
+
+const collection: Ref<Collection | null> = ref(null)
+const curator: Ref<User | null> = ref(null)
+const projects: Ref<Project[]> = ref([])
+
+async function fetchCollection() {
+  collection.value = await useFetch(
+    `https://api.modrinth.com/v3/collection/${route.params.id}`,
+  ).catch(handleError)
+
+  if (!collection.value) {
+    return
+  }
+
+  ;[projects.value, curator.value] = await Promise.all([
+    useFetch(
+      `https://api.modrinth.com/v2/projects?ids=${encodeURIComponent(JSON.stringify(collection.value.projects))}`,
+    ),
+    useFetch(`https://api.modrinth.com/v2/user/${collection.value.user}`).catch(handleError),
+  ])
+
+  breadcrumbs.setContext({ name: 'Collection', link: `/collection/${collection.value.name}` })
+  breadcrumbs.setName('Collection', collection.value.name)
+}
+
+await fetchCollection()
+
+const { instance, instanceContent, instanceQueryAppendage } = await useInstanceContext()
+
+watch(
+  () => route.params.id,
+  async () => {
+    if (route.params.id && route.path.startsWith('/collection')) {
+      await fetchCollection()
+    }
+  },
+)
+
+const themeStore = useTheming()
+
+async function copyId() {
+  if (collection.value) {
+    await navigator.clipboard.writeText(String(collection.value.id))
+  }
+}
+</script>
+<style scoped lang="scss">
+.project-sidebar-section {
+  @apply p-4 flex flex-col gap-2 border-0 border-[--brand-gradient-border] border-solid;
+}
+.project-sidebar-section:not(:last-child) {
+  @apply border-b-[1px];
+}
+</style>
--- a/apps/app-frontend/src/pages/collection/index.js
+++ b/apps/app-frontend/src/pages/collection/index.js
@@ -0,0 +1,3 @@
+import Index from './Index.vue'
+
+export { Index }
--- a/apps/app-frontend/src/pages/index.js
+++ b/apps/app-frontend/src/pages/index.js
@@ -1,5 +1,4 @@
 import Index from './Index.vue'
 import Browse from './Browse.vue'
-import Worlds from './Worlds.vue'

-export { Index, Browse, Worlds }
+export { Index, Browse }
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -1,156 +1,152 @@
 <template>
-  <div>
-    <div
-      class="p-6 pr-2 pb-4"
-      @contextmenu.prevent.stop="(event) => handleRightClick(event, instance.path)"
-    >
-      <ExportModal ref="exportModal" :instance="instance" />
-      <InstanceSettingsModal ref="settingsModal" :instance="instance" :offline="offline" />
-      <ContentPageHeader>
-        <template #icon>
-          <Avatar :src="icon" :alt="instance.name" size="96px" :tint-by="instance.path" />
-        </template>
-        <template #title>
-          {{ instance.name }}
-        </template>
-        <template #summary> </template>
-        <template #stats>
-          <div
-            class="flex items-center gap-2 font-semibold transform capitalize border-0 border-solid border-divider pr-4 md:border-r"
+  <div
+    class="p-6 pr-2 pb-4"
+    @contextmenu.prevent.stop="(event) => handleRightClick(event, instance.path)"
+  >
+    <ExportModal ref="exportModal" :instance="instance" />
+    <InstanceSettingsModal ref="settingsModal" :instance="instance" :offline="offline" />
+    <ContentPageHeader>
+      <template #icon>
+        <Avatar :src="icon" :alt="instance.name" size="96px" :tint-by="instance.path" />
+      </template>
+      <template #title>
+        {{ instance.name }}
+      </template>
+      <template #summary> </template>
+      <template #stats>
+        <div
+          class="flex items-center gap-2 font-semibold transform capitalize border-0 border-solid border-divider pr-4 md:border-r"
+        >
+          <GameIcon class="h-5 w-5 text-secondary" />
+          {{ instance.loader }} {{ instance.game_version }}
+        </div>
+        <div class="flex items-center gap-2 font-semibold">
+          <TimerIcon class="h-5 w-5 text-secondary" />
+          <template v-if="timePlayed > 0">
+            {{ timePlayedHumanized }}
+          </template>
+          <template v-else> Never played </template>
+        </div>
+      </template>
+      <template #actions>
+        <div class="flex gap-2">
+          <ButtonStyled
+            v-if="instance.install_stage.includes('installing')"
+            color="brand"
+            size="large"
          >
-            <GameIcon class="h-6 w-6 text-secondary" />
-            {{ instance.loader }} {{ instance.game_version }}
-          </div>
-          <div class="flex items-center gap-2 font-semibold">
-            <TimerIcon class="h-6 w-6 text-secondary" />
-            <template v-if="timePlayed > 0">
-              {{ timePlayedHumanized }}
-            </template>
-            <template v-else> Never played </template>
-          </div>
-        </template>
-        <template #actions>
-          <div class="flex gap-2">
-            <ButtonStyled
-              v-if="instance.install_stage.includes('installing')"
-              color="brand"
-              size="large"
-            >
-              <button disabled>Installing...</button>
-            </ButtonStyled>
-            <ButtonStyled
-              v-else-if="instance.install_stage !== 'installed'"
-              color="brand"
-              size="large"
-            >
-              <button @click="repairInstance()">
-                <DownloadIcon />
-                Repair
-              </button>
-            </ButtonStyled>
-            <ButtonStyled v-else-if="playing === true" color="red" size="large">
-              <button @click="stopInstance('InstancePage')">
-                <StopCircleIcon />
-                Stop
-              </button>
-            </ButtonStyled>
-            <ButtonStyled
-              v-else-if="playing === false && loading === false"
-              color="brand"
-              size="large"
-            >
-              <button @click="startInstance('InstancePage')">
-                <PlayIcon />
-                Play
-              </button>
-            </ButtonStyled>
-            <ButtonStyled
-              v-else-if="loading === true && playing === false"
-              color="brand"
-              size="large"
-            >
-              <button disabled>Loading...</button>
-            </ButtonStyled>
-            <ButtonStyled size="large" circular>
-              <button v-tooltip="'Instance settings'" @click="settingsModal.show()">
-                <SettingsIcon />
-              </button>
-            </ButtonStyled>
-            <ButtonStyled size="large" type="transparent" circular>
-              <OverflowMenu
-                :options="[
-                  {
-                    id: 'open-folder',
-                    action: () => showProfileInFolder(instance.path),
-                  },
-                  {
-                    id: 'export-mrpack',
-                    action: () => $refs.exportModal.show(),
-                  },
-                ]"
-              >
-                <MoreVerticalIcon />
-                <template #share-instance> <UserPlusIcon /> Share instance </template>
-                <template #host-a-server> <ServerIcon /> Create a server </template>
-                <template #open-folder> <FolderOpenIcon /> Open folder </template>
-                <template #export-mrpack> <PackageIcon /> Export modpack </template>
-              </OverflowMenu>
-            </ButtonStyled>
-          </div>
-        </template>
-      </ContentPageHeader>
-    </div>
-    <div class="px-6">
-      <NavTabs :links="tabs" />
-    </div>
-    <div v-if="!!instance" class="p-6 pt-4">
-      <RouterView v-slot="{ Component }" :key="instance.path">
-        <template v-if="Component">
-          <Suspense
-            :key="instance.path"
-            @pending="loadingBar.startLoading()"
-            @resolve="loadingBar.stopLoading()"
+            <button disabled>Installing...</button>
+          </ButtonStyled>
+          <ButtonStyled
+            v-else-if="instance.install_stage !== 'installed'"
+            color="brand"
+            size="large"
          >
-            <component
-              :is="Component"
-              :instance="instance"
-              :options="options"
-              :offline="offline"
-              :playing="playing"
-              :versions="modrinthVersions"
-              :installed="instance.install_stage !== 'installed'"
-              @play="updatePlayState"
-              @stop="() => stopInstance('InstanceSubpage')"
-            ></component>
-            <template #fallback>
-              <LoadingIndicator />
-            </template>
-          </Suspense>
-        </template>
-      </RouterView>
-    </div>
-    <ContextMenu ref="options" @option-clicked="handleOptionsClick">
-      <template #play> <PlayIcon /> Play </template>
-      <template #stop> <StopCircleIcon /> Stop </template>
-      <template #add_content> <PlusIcon /> Add content </template>
-      <template #edit> <EditIcon /> Edit </template>
-      <template #copy_path> <ClipboardCopyIcon /> Copy path </template>
-      <template #open_folder> <ClipboardCopyIcon /> Open folder </template>
-      <template #copy_link> <ClipboardCopyIcon /> Copy link </template>
-      <template #open_link> <ClipboardCopyIcon /> Open in Modrinth <ExternalIcon /> </template>
-      <template #copy_names><EditIcon />Copy names</template>
-      <template #copy_slugs><HashIcon />Copy slugs</template>
-      <template #copy_links><GlobeIcon />Copy links</template>
-      <template #toggle><EditIcon />Toggle selected</template>
-      <template #disable><XIcon />Disable selected</template>
-      <template #enable><CheckCircleIcon />Enable selected</template>
-      <template #hide_show><EyeIcon />Show/Hide unselected</template>
-      <template #update_all
-        ><UpdatedIcon />Update {{ selected.length > 0 ? 'selected' : 'all' }}</template
-      >
-      <template #filter_update><UpdatedIcon />Select Updatable</template>
-    </ContextMenu>
+            <button @click="repairInstance()">
+              <DownloadIcon />
+              Repair
+            </button>
+          </ButtonStyled>
+          <ButtonStyled v-else-if="playing === true" color="red" size="large">
+            <button @click="stopInstance('InstancePage')">
+              <StopCircleIcon />
+              Stop
+            </button>
+          </ButtonStyled>
+          <ButtonStyled
+            v-else-if="playing === false && loading === false"
+            color="brand"
+            size="large"
+          >
+            <button @click="startInstance('InstancePage')">
+              <PlayIcon />
+              Play
+            </button>
+          </ButtonStyled>
+          <ButtonStyled
+            v-else-if="loading === true && playing === false"
+            color="brand"
+            size="large"
+          >
+            <button disabled>Loading...</button>
+          </ButtonStyled>
+          <ButtonStyled size="large" circular>
+            <button v-tooltip="'Instance settings'" @click="settingsModal.show()">
+              <SettingsIcon />
+            </button>
+          </ButtonStyled>
+          <ButtonStyled size="large" type="transparent" circular>
+            <OverflowMenu
+              :options="[
+                {
+                  id: 'open-folder',
+                  action: () => showProfileInFolder(instance.path),
+                },
+                {
+                  id: 'export-mrpack',
+                  action: () => $refs.exportModal.show(),
+                },
+              ]"
+            >
+              <MoreVerticalIcon />
+              <template #share-instance> <UserPlusIcon /> Share instance </template>
+              <template #host-a-server> <ServerIcon /> Create a server </template>
+              <template #open-folder> <FolderOpenIcon /> Open folder </template>
+              <template #export-mrpack> <PackageIcon /> Export modpack </template>
+            </OverflowMenu>
+          </ButtonStyled>
+        </div>
+      </template>
+    </ContentPageHeader>
  </div>
+  <div class="px-6">
+    <NavTabs :links="tabs" />
+  </div>
+  <div class="p-6 pt-4">
+    <RouterView v-slot="{ Component }" :key="instance.path">
+      <template v-if="Component">
+        <Suspense
+          :key="instance.path"
+          @pending="loadingBar.startLoading()"
+          @resolve="loadingBar.stopLoading()"
+        >
+          <component
+            :is="Component"
+            :instance="instance"
+            :options="options"
+            :offline="offline"
+            :playing="playing"
+            :versions="modrinthVersions"
+            :installed="instance.install_stage !== 'installed'"
+          ></component>
+          <template #fallback>
+            <LoadingIndicator />
+          </template>
+        </Suspense>
+      </template>
+    </RouterView>
+  </div>
+  <ContextMenu ref="options" @option-clicked="handleOptionsClick">
+    <template #play> <PlayIcon /> Play </template>
+    <template #stop> <StopCircleIcon /> Stop </template>
+    <template #add_content> <PlusIcon /> Add content </template>
+    <template #edit> <EditIcon /> Edit </template>
+    <template #copy_path> <ClipboardCopyIcon /> Copy path </template>
+    <template #open_folder> <ClipboardCopyIcon /> Open folder </template>
+    <template #copy_link> <ClipboardCopyIcon /> Copy link </template>
+    <template #open_link> <ClipboardCopyIcon /> Open in Modrinth <ExternalIcon /> </template>
+    <template #copy_names><EditIcon />Copy names</template>
+    <template #copy_slugs><HashIcon />Copy slugs</template>
+    <template #copy_links><GlobeIcon />Copy links</template>
+    <template #toggle><EditIcon />Toggle selected</template>
+    <template #disable><XIcon />Disable selected</template>
+    <template #enable><CheckCircleIcon />Enable selected</template>
+    <template #hide_show><EyeIcon />Show/Hide unselected</template>
+    <template #update_all
+      ><UpdatedIcon />Update {{ selected.length > 0 ? 'selected' : 'all' }}</template
+    >
+    <template #filter_update><UpdatedIcon />Select Updatable</template>
+  </ContextMenu>
 </template>
 <script setup>
 import {
@@ -242,10 +238,6 @@ async function fetchInstance() {
      })
  }

-  await updatePlayState()
-}
-
-async function updatePlayState() {
  const runningProcesses = await get_by_profile_path(route.params.id).catch(handleError)

  playing.value = runningProcesses.length > 0
@@ -261,20 +253,14 @@ watch(
  },
 )

-const basePath = computed(() => `/instance/${encodeURIComponent(route.params.id)}`)
-
 const tabs = computed(() => [
  {
    label: 'Content',
-    href: `${basePath.value}`,
-  },
-  {
-    label: 'Worlds',
-    href: `${basePath.value}/worlds`,
+    href: `/instance/${encodeURIComponent(route.params.id)}`,
  },
  {
    label: 'Logs',
-    href: `${basePath.value}/logs`,
+    href: `/instance/${encodeURIComponent(route.params.id)}/logs`,
  },
 ])

--- a/apps/app-frontend/src/pages/instance/Logs.vue
+++ b/apps/app-frontend/src/pages/instance/Logs.vue
@@ -117,37 +117,15 @@ const route = useRoute()
 const props = defineProps({
  instance: {
    type: Object,
-    default() {
-      return {}
-    },
-  },
-  options: {
-    type: Object,
-    default() {
-      return {}
-    },
+    required: true,
  },
  offline: {
    type: Boolean,
-    default() {
-      return false
-    },
+    default: false,
  },
  playing: {
    type: Boolean,
-    default() {
-      return false
-    },
-  },
-  versions: {
-    type: Array,
-    required: true,
-  },
-  installed: {
-    type: Boolean,
-    default() {
-      return false
-    },
+    default: false,
  },
 })

--- a/apps/app-frontend/src/pages/instance/Mods.vue
+++ b/apps/app-frontend/src/pages/instance/Mods.vue
@@ -1,252 +1,254 @@
 <template>
-  <div>
-    <template v-if="projects?.length > 0">
-      <div class="flex items-center gap-2 mb-4">
-        <div class="iconified-input flex-grow">
-          <SearchIcon />
-          <input
-            v-model="searchFilter"
-            type="text"
-            :placeholder="`Search ${filteredProjects.length} project${filteredProjects.length === 1 ? '' : 's'}...`"
-            class="text-input search-input"
-            autocomplete="off"
-          />
-          <Button class="r-btn" @click="() => (searchFilter = '')">
-            <XIcon />
-          </Button>
-        </div>
-        <AddContentButton :instance="instance" />
-      </div>
-      <div class="flex items-center justify-between">
-        <div v-if="filterOptions.length > 1" class="flex flex-wrap gap-1 items-center pb-4">
-          <FilterIcon class="text-secondary h-5 w-5 mr-1" />
-          <button
-            v-for="filter in filterOptions"
-            :key="`content-filter-${filter.id}`"
-            :class="`px-2 py-1 rounded-full font-semibold leading-none border-none cursor-pointer active:scale-[0.97] duration-100 transition-all ${selectedFilters.includes(filter.id) ? 'bg-brand-highlight text-brand' : 'bg-bg-raised text-secondary'}`"
-            @click="toggleArray(selectedFilters, filter.id)"
-          >
-            {{ filter.formattedName }}
-          </button>
-        </div>
-        <Pagination
-          v-if="search.length > 0"
-          :page="currentPage"
-          :count="Math.ceil(search.length / 20)"
-          :link-function="(page) => `?page=${page}`"
-          @switch-page="(page) => (currentPage = page)"
+  <template v-if="projects?.length > 0">
+    <div class="flex items-center gap-2 mb-4">
+      <div class="iconified-input flex-grow">
+        <SearchIcon />
+        <input
+          v-model="searchFilter"
+          type="text"
+          :placeholder="`Search ${filteredProjects.length} project${filteredProjects.length === 1 ? '' : 's'}...`"
+          class="text-input search-input"
+          autocomplete="off"
        />
+        <Button class="r-btn" @click="() => (searchFilter = '')">
+          <XIcon />
+        </Button>
      </div>
+      <AddContentButton :instance="instance" />
+    </div>
+    <div class="flex items-center justify-between">
+      <div v-if="filterOptions.length > 1" class="flex flex-wrap gap-1 items-center pb-4">
+        <FilterIcon class="text-secondary h-5 w-5 mr-1" />
+        <button
+          v-for="filter in filterOptions"
+          :key="filter"
+          :class="`px-2 py-1 rounded-full font-semibold leading-none border-none cursor-pointer active:scale-[0.97] duration-100 transition-all ${selectedFilters.includes(filter.id) ? 'bg-brand-highlight text-brand' : 'bg-bg-raised text-secondary'}`"
+          @click="toggleArray(selectedFilters, filter.id)"
+        >
+          {{ filter.formattedName }}
+        </button>
+      </div>
+      <Pagination
+        v-if="search.length > 0"
+        :page="currentPage"
+        :count="Math.ceil(search.length / 20)"
+        :link-function="(page) => `?page=${page}`"
+        @switch-page="(page) => (currentPage = page)"
+      />
+    </div>

-      <ContentListPanel
-        v-model="selectedFiles"
-        :locked="isPackLocked"
-        :items="
-          search.map((x) => {
-            const item: ContentItem<any> = {
-              path: x.path,
-              disabled: x.disabled,
-              filename: x.file_name,
-              icon: x.icon ?? undefined,
-              title: x.name,
-              data: x,
+    <ContentListPanel
+      v-model="selectedFiles"
+      :locked="isPackLocked"
+      :items="
+        search.map((x) => {
+          const item: ContentItem<any> = {
+            path: x.path,
+            disabled: x.disabled,
+            filename: x.file_name,
+            icon: x.icon,
+            title: x.name,
+            data: x,
+          }
+
+          if (x.version) {
+            item.version = x.version
+            item.versionId = x.version
+          }
+
+          if (x.id) {
+            item.project = {
+              id: x.id,
+              link: { path: `/project/${x.id}`, query: { i: props.instance.path } },
+              linkProps: {},
            }
+          }

-            if (x.version) {
-              item.version = x.version
-              item.versionId = x.version
+          if (x.author) {
+            item.creator = {
+              name: x.author.name,
+              type: x.author.type,
+              id: x.author.slug,
+              link: {
+                path: `/${x.author.type}/${x.author.slug}`,
+                query: { i: props.instance.path },
+              },
+              linkProps: { target: '_blank' },
            }
+          }

-            if (x.id) {
-              item.project = {
-                id: x.id,
-                link: { path: `/project/${x.id}`, query: { i: props.instance.path } },
-                linkProps: {},
-              }
-            }
-
-            if (x.author) {
-              item.creator = {
-                name: x.author.name,
-                type: x.author.type,
-                id: x.author.slug,
-                link: `https://modrinth.com/${x.author.type}/${x.author.slug}`,
-                linkProps: { target: '_blank' },
-              }
-            }
-
-            return item
-          })
-        "
-        :sort-column="sortColumn"
-        :sort-ascending="ascending"
-        :update-sort="sortProjects"
-        :current-page="currentPage"
-      >
-        <template v-if="selectedProjects.length > 0" #headers>
-          <div class="flex gap-2">
-            <ButtonStyled
-              v-if="!isPackLocked && selectedProjects.some((m) => m.outdated)"
-              color="brand"
-              color-fill="text"
-              hover-color-fill="text"
-            >
-              <button @click="updateSelected()"><DownloadIcon /> Update</button>
-            </ButtonStyled>
-            <ButtonStyled>
-              <OverflowMenu
-                :options="[
-                  {
-                    id: 'share-names',
-                    action: () => shareNames(),
-                  },
-                  {
-                    id: 'share-file-names',
-                    action: () => shareFileNames(),
-                  },
-                  {
-                    id: 'share-urls',
-                    action: () => shareUrls(),
-                  },
-                  {
-                    id: 'share-markdown',
-                    action: () => shareMarkdown(),
-                  },
-                ]"
-              >
-                <ShareIcon /> Share <DropdownIcon />
-                <template #share-names> <TextInputIcon /> Project names </template>
-                <template #share-file-names> <FileIcon /> File names </template>
-                <template #share-urls> <LinkIcon /> Project links </template>
-                <template #share-markdown> <CodeIcon /> Markdown links </template>
-              </OverflowMenu>
-            </ButtonStyled>
-            <ButtonStyled v-if="selectedProjects.some((m) => m.disabled)">
-              <button @click="enableAll()"><CheckCircleIcon /> Enable</button>
-            </ButtonStyled>
-            <ButtonStyled v-if="selectedProjects.some((m) => !m.disabled)">
-              <button @click="disableAll()"><SlashIcon /> Disable</button>
-            </ButtonStyled>
-            <ButtonStyled color="red">
-              <button @click="deleteSelected()"><TrashIcon /> Remove</button>
-            </ButtonStyled>
-          </div>
-        </template>
-        <template #header-actions>
-          <ButtonStyled type="transparent" color-fill="text" hover-color-fill="text">
-            <button :disabled="refreshingProjects" class="w-max" @click="refreshProjects">
-              <UpdatedIcon />
-              Refresh
-            </button>
-          </ButtonStyled>
+          return item
+        })
+      "
+      :sort-column="sortColumn"
+      :sort-ascending="ascending"
+      :update-sort="sortProjects"
+      :current-page="currentPage"
+    >
+      <template v-if="selectedProjects.length > 0" #headers>
+        <div class="flex gap-2">
          <ButtonStyled
-            v-if="!isPackLocked && projects.some((m) => (m as any).outdated)"
-            type="transparent"
-            color="brand"
-            color-fill="text"
-            hover-color-fill="text"
-            @click="updateAll"
-          >
-            <button class="w-max"><DownloadIcon /> Update all</button>
-          </ButtonStyled>
-          <ButtonStyled
-            v-if="canUpdatePack"
-            type="transparent"
+            v-if="!isPackLocked && selectedProjects.some((m) => m.outdated)"
            color="brand"
            color-fill="text"
            hover-color-fill="text"
          >
-            <button class="w-max" :disabled="installing" @click="modpackVersionModal?.show()">
-              <DownloadIcon /> Update pack
-            </button>
+            <button @click="updateSelected()"><DownloadIcon /> Update</button>
          </ButtonStyled>
-        </template>
-        <template #actions="{ item }">
-          <ButtonStyled
-            v-if="!isPackLocked && (item.data as any).outdated"
-            type="transparent"
-            color="brand"
-            circular
-          >
-            <button
-              v-tooltip="`Update`"
-              :disabled="(item.data as ProjectListEntry).updating"
-              @click="updateProject(item.data)"
-            >
-              <DownloadIcon />
-            </button>
-          </ButtonStyled>
-          <div v-else class="w-[36px]"></div>
-          <Toggle
-            class="!mx-2"
-            :model-value="!item.data.disabled"
-            @update:model-value="toggleDisableMod(item.data)"
-          />
-          <ButtonStyled type="transparent" circular>
-            <button v-tooltip="'Remove'" @click="removeMod(item)">
-              <TrashIcon />
-            </button>
-          </ButtonStyled>
-
-          <ButtonStyled type="transparent" circular>
+          <ButtonStyled>
            <OverflowMenu
              :options="[
                {
-                  id: 'show-file',
-                  action: () => highlightModInProfile(instance.path, item.path),
+                  id: 'share-names',
+                  action: () => shareNames(),
                },
                {
-                  id: 'copy-link',
-                  shown: item.data !== undefined && item.data.slug !== undefined,
-                  action: () => copyModLink(item),
+                  id: 'share-file-names',
+                  action: () => shareFileNames(),
+                },
+                {
+                  id: 'share-urls',
+                  action: () => shareUrls(),
+                },
+                {
+                  id: 'share-markdown',
+                  action: () => shareMarkdown(),
                },
              ]"
-              direction="left"
            >
-              <MoreVerticalIcon />
-              <template #show-file> <ExternalIcon /> Show file </template>
-              <template #copy-link> <ClipboardCopyIcon /> Copy link </template>
+              <ShareIcon /> Share <DropdownIcon />
+              <template #share-names> <TextInputIcon /> Project names </template>
+              <template #share-file-names> <FileIcon /> File names </template>
+              <template #share-urls> <LinkIcon /> Project links </template>
+              <template #share-markdown> <CodeIcon /> Markdown links </template>
            </OverflowMenu>
          </ButtonStyled>
-        </template>
-      </ContentListPanel>
-      <div class="flex justify-end mt-4">
-        <Pagination
-          v-if="search.length > 0"
-          :page="currentPage"
-          :count="Math.ceil(search.length / 20)"
-          :link-function="(page) => `?page=${page}`"
-          @switch-page="(page) => (currentPage = page)"
-        />
-      </div>
-    </template>
-    <div v-else class="w-full max-w-[48rem] mx-auto flex flex-col mt-6">
-      <RadialHeader class="">
-        <div class="flex items-center gap-6 w-[32rem] mx-auto">
-          <img src="@/assets/sad-modrinth-bot.webp" class="h-24" />
-          <span class="text-contrast font-bold text-xl"
-            >You haven't added any content to this instance yet.</span
-          >
+          <ButtonStyled v-if="selectedProjects.some((m) => m.disabled)">
+            <button @click="enableAll()"><CheckCircleIcon /> Enable</button>
+          </ButtonStyled>
+          <ButtonStyled v-if="selectedProjects.some((m) => !m.disabled)">
+            <button @click="disableAll()"><SlashIcon /> Disable</button>
+          </ButtonStyled>
+          <ButtonStyled color="red">
+            <button @click="deleteSelected()"><TrashIcon /> Remove</button>
+          </ButtonStyled>
        </div>
-      </RadialHeader>
-      <div class="flex mt-4 mx-auto">
-        <AddContentButton :instance="instance" />
+      </template>
+      <template #header-actions>
+        <ButtonStyled type="transparent" color-fill="text" hover-color-fill="text">
+          <button :disabled="refreshingProjects" class="w-max" @click="refreshProjects">
+            <UpdatedIcon />
+            Refresh
+          </button>
+        </ButtonStyled>
+        <ButtonStyled
+          v-if="!isPackLocked && projects.some((m) => (m as any).outdated)"
+          type="transparent"
+          color="brand"
+          color-fill="text"
+          hover-color-fill="text"
+          @click="updateAll"
+        >
+          <button class="w-max"><DownloadIcon /> Update all</button>
+        </ButtonStyled>
+        <ButtonStyled
+          v-if="canUpdatePack"
+          type="transparent"
+          color="brand"
+          color-fill="text"
+          hover-color-fill="text"
+        >
+          <button class="w-max" :disabled="installing" @click="modpackVersionModal.show()">
+            <DownloadIcon /> Update pack
+          </button>
+        </ButtonStyled>
+      </template>
+      <template #actions="{ item }">
+        <ButtonStyled
+          v-if="!isPackLocked && (item.data as any).outdated"
+          type="transparent"
+          color="brand"
+          circular
+        >
+          <button
+            v-tooltip="`Update`"
+            :disabled="(item.data as any).updating"
+            @click="updateProject(item.data)"
+          >
+            <DownloadIcon />
+          </button>
+        </ButtonStyled>
+        <div v-else class="w-[36px]"></div>
+        <Toggle
+          class="!mx-2"
+          :model-value="!item.data.disabled"
+          @update:model-value="toggleDisableMod(item.data)"
+        />
+        <ButtonStyled type="transparent" circular>
+          <button v-tooltip="'Remove'" @click="removeMod(item)">
+            <TrashIcon />
+          </button>
+        </ButtonStyled>
+
+        <ButtonStyled type="transparent" circular>
+          <OverflowMenu
+            :options="[
+              {
+                id: 'show-file',
+                action: () => highlightModInProfile(instance.path, item.path),
+              },
+              {
+                id: 'copy-link',
+                shown: item.data !== undefined && item.data.slug !== undefined,
+                action: () => copyModLink(item),
+              },
+            ]"
+            direction="left"
+          >
+            <MoreVerticalIcon />
+            <template #show-file> <ExternalIcon /> Show file </template>
+            <template #copy-link> <ClipboardCopyIcon /> Copy link </template>
+          </OverflowMenu>
+        </ButtonStyled>
+      </template>
+    </ContentListPanel>
+    <div class="flex justify-end mt-4">
+      <Pagination
+        v-if="search.length > 0"
+        :page="currentPage"
+        :count="Math.ceil(search.length / 20)"
+        :link-function="(page) => `?page=${page}`"
+        @switch-page="(page) => (currentPage = page)"
+      />
+    </div>
+  </template>
+  <div v-else class="w-full flex flex-col items-center justify-center mt-6 max-w-[48rem] mx-auto">
+    <div class="top-box w-full">
+      <div class="flex items-center gap-6 w-[32rem] mx-auto">
+        <img src="@/assets/sad-modrinth-bot.webp" class="h-24" />
+        <span class="text-contrast font-bold text-xl"
+          >You haven't added any content to this instance yet.</span
+        >
      </div>
    </div>
-    <ShareModalWrapper
-      ref="shareModal"
-      share-title="Sharing modpack content"
-      share-text="Check out the projects I'm using in my modpack!"
-      :open-in-new-tab="false"
-    />
-    <ExportModal v-if="projects.length > 0" ref="exportModal" :instance="instance" />
-    <ModpackVersionModal
-      v-if="instance.linked_data"
-      ref="modpackVersionModal"
-      :instance="instance"
-      :versions="props.versions"
-    />
+    <div class="top-box-divider"></div>
+    <div class="flex items-center gap-6 py-4">
+      <AddContentButton :instance="instance" />
+    </div>
  </div>
+  <ShareModalWrapper
+    ref="shareModal"
+    share-title="Sharing modpack content"
+    share-text="Check out the projects I'm using in my modpack!"
+    :open-in-new-tab="false"
+  />
+  <ExportModal v-if="projects.length > 0" ref="exportModal" :instance="instance" />
+  <ModpackVersionModal
+    v-if="instance.linked_data"
+    ref="modpackVersionModal"
+    :instance="instance"
+    :versions="props.versions"
+  />
 </template>
 <script setup lang="ts">
 import {
@@ -273,10 +275,8 @@ import {
  ContentListPanel,
  OverflowMenu,
  Pagination,
-  RadialHeader,
  Toggle,
 } from '@modrinth/ui'
-import type { Organization, Project, TeamMember, Version } from '@modrinth/utils'
 import { formatProjectType } from '@modrinth/utils'
 import type { ComputedRef } from 'vue'
 import { computed, onUnmounted, ref, watch } from 'vue'
@@ -306,18 +306,31 @@ import { profile_listener } from '@/helpers/events.js'
 import ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'
 import { getCurrentWebview } from '@tauri-apps/api/webview'
 import dayjs from 'dayjs'
-import type { CacheBehaviour, ContentFile, GameInstance } from '@/helpers/types'
-import type ContextMenu from '@/components/ui/ContextMenu.vue'
-import type { ContentItem } from '@modrinth/ui/src/components/content/ContentListItem.vue'

-const props = defineProps<{
-  instance: GameInstance
-  options: InstanceType<typeof ContextMenu>
-  offline: boolean
-  playing: boolean
-  versions: Version[]
-  installed: boolean
-}>()
+const props = defineProps({
+  instance: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+  options: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+  offline: {
+    type: Boolean,
+    default() {
+      return false
+    },
+  },
+  versions: {
+    type: Array,
+    required: true,
+  },
+})

 type ProjectListEntryAuthor = {
  name: string
@@ -332,15 +345,13 @@ type ProjectListEntry = {
  author: ProjectListEntryAuthor | null
  version: string | null
  file_name: string
-  icon: string | undefined
+  icon: string | null
  disabled: boolean
  updateVersion?: string
  outdated: boolean
  updated: dayjs.Dayjs
  project_type: string
  id?: string
-  updating?: boolean
-  selected?: boolean
 }

 const isPackLocked = computed(() => {
@@ -353,20 +364,17 @@ const canUpdatePack = computed(() => {
 const exportModal = ref(null)

 const projects = ref<ProjectListEntry[]>([])
-const selectedFiles = ref<string[]>([])
+const selectedFiles = ref([])
 const selectedProjects = computed(() =>
  projects.value.filter((x) => selectedFiles.value.includes(x.file_name)),
 )

 const selectionMap = ref(new Map())

-const initProjects = async (cacheBehaviour?: CacheBehaviour) => {
+const initProjects = async (cacheBehaviour?) => {
  const newProjects: ProjectListEntry[] = []

-  const profileProjects = (await get_projects(props.instance.path, cacheBehaviour)) as Record<
-    string,
-    ContentFile
-  >
+  const profileProjects = await get_projects(props.instance.path, cacheBehaviour)
  const fetchProjects = []
  const fetchVersions = []

@@ -378,21 +386,21 @@ const initProjects = async (cacheBehaviour?: CacheBehaviour) => {
  }

  const [modrinthProjects, modrinthVersions] = await Promise.all([
-    (await get_project_many(fetchProjects).catch(handleError)) as Project[],
-    (await get_version_many(fetchVersions).catch(handleError)) as Version[],
+    await get_project_many(fetchProjects).catch(handleError),
+    await get_version_many(fetchVersions).catch(handleError),
  ])

  const [modrinthTeams, modrinthOrganizations] = await Promise.all([
-    (await get_team_many(modrinthProjects.map((x) => x.team)).catch(handleError)) as TeamMember[][],
-    (await get_organization_many(
+    await get_team_many(modrinthProjects.map((x) => x.team)).catch(handleError),
+    await get_organization_many(
      modrinthProjects.map((x) => x.organization).filter((x) => !!x),
-    ).catch(handleError)) as Organization[],
+    ).catch(handleError),
  ])

  for (const [path, file] of Object.entries(profileProjects)) {
    if (file.metadata) {
-      const project = modrinthProjects.find((x) => file.metadata?.project_id === x.id)
-      const version = modrinthVersions.find((x) => file.metadata?.version_id === x.id)
+      const project = modrinthProjects.find((x) => file.metadata.project_id === x.id)
+      const version = modrinthVersions.find((x) => file.metadata.version_id === x.id)

      if (project && version) {
        const org = project.organization
@@ -401,7 +409,7 @@ const initProjects = async (cacheBehaviour?: CacheBehaviour) => {

        const team = modrinthTeams.find((x) => x[0].team_id === project.team)

-        let author: ProjectListEntryAuthor | null = null
+        let author: ProjectListEntryAuthor | null
        if (org) {
          author = {
            name: org.name,
@@ -410,13 +418,13 @@ const initProjects = async (cacheBehaviour?: CacheBehaviour) => {
          }
        } else if (team) {
          const teamMember = team.find((x) => x.is_owner)
-          if (teamMember) {
-            author = {
-              name: teamMember.user.username,
-              slug: teamMember.user.username,
-              type: 'user',
-            }
+          author = {
+            name: teamMember.user.username,
+            slug: teamMember.user.username,
+            type: 'user',
          }
+        } else {
+          author = null
        }

        newProjects.push({
@@ -445,7 +453,7 @@ const initProjects = async (cacheBehaviour?: CacheBehaviour) => {
      author: null,
      version: null,
      file_name: file.file_name,
-      icon: undefined,
+      icon: null,
      disabled: file.file_name.endsWith('.disabled'),
      outdated: false,
      updated: dayjs(0),
@@ -453,7 +461,7 @@ const initProjects = async (cacheBehaviour?: CacheBehaviour) => {
    })
  }

-  projects.value = newProjects ?? []
+  projects.value = newProjects

  const newSelectionMap = new Map()
  for (const project of projects.value) {
@@ -469,7 +477,7 @@ const initProjects = async (cacheBehaviour?: CacheBehaviour) => {
 }
 await initProjects()

-const modpackVersionModal = ref<InstanceType<typeof ModpackVersionModal> | null>()
+const modpackVersionModal = ref(null)
 const installing = computed(() => props.instance.install_stage !== 'installed')

 const vintl = useVIntl()
@@ -494,7 +502,7 @@ const messages = defineMessages({
 const filterOptions: ComputedRef<FilterOption[]> = computed(() => {
  const options: FilterOption[] = []

-  const frequency = projects.value.reduce((map: Record<string, number>, item) => {
+  const frequency = projects.value.reduce((map, item) => {
    map[item.project_type] = (map[item.project_type] || 0) + 1
    return map
  }, {})
@@ -525,7 +533,7 @@ const filterOptions: ComputedRef<FilterOption[]> = computed(() => {
  return options
 })

-const selectedFilters = ref<string[]>([])
+const selectedFilters = ref([])
 const filteredProjects = computed(() => {
  const updatesFilter = selectedFilters.value.includes('updates')
  const disabledFilter = selectedFilters.value.includes('disabled')
@@ -552,7 +560,7 @@ watch(filterOptions, () => {
  }
 })

-function toggleArray<T>(array: T[], value: T) {
+function toggleArray(array, value) {
  if (array.includes(value)) {
    array.splice(array.indexOf(value), 1)
  } else {
@@ -562,7 +570,7 @@ function toggleArray<T>(array: T[], value: T) {

 const searchFilter = ref('')
 const selectAll = ref(false)
-const shareModal = ref<InstanceType<typeof ShareModalWrapper> | null>()
+const shareModal = ref(null)
 const ascending = ref(true)
 const sortColumn = ref('Name')
 const currentPage = ref(1)
@@ -603,7 +611,7 @@ const search = computed(() => {

 watch([sortColumn, ascending, selectedFilters.value, searchFilter], () => (currentPage.value = 1))

-const sortProjects = (filter: string) => {
+const sortProjects = (filter) => {
  if (sortColumn.value === filter) {
    ascending.value = !ascending.value
  } else {
@@ -621,7 +629,7 @@ const updateAll = async () => {
    }
  }

-  const paths = (await update_all(props.instance.path).catch(handleError)) as Record<string, string>
+  const paths = await update_all(props.instance.path).catch(handleError)

  for (const [oldVal, newVal] of Object.entries(paths)) {
    const index = projects.value.findIndex((x) => x.path === oldVal)
@@ -630,7 +638,7 @@ const updateAll = async () => {

    if (projects.value[index].updateVersion) {
      projects.value[index].version = projects.value[index].updateVersion.version_number
-      projects.value[index].updateVersion = undefined
+      projects.value[index].updateVersion = null
    }
  }
  for (const project of setProjects) {
@@ -645,15 +653,15 @@ const updateAll = async () => {
  })
 }

-const updateProject = async (mod: ProjectListEntry) => {
+const updateProject = async (mod) => {
  mod.updating = true
  await new Promise((resolve) => setTimeout(resolve, 0))
  mod.path = await update_project(props.instance.path, mod.path).catch(handleError)
  mod.updating = false

  mod.outdated = false
-  mod.version = mod.updateVersion?.version_number
-  mod.updateVersion = undefined
+  mod.version = mod.updateVersion.version_number
+  mod.updateVersion = null

  trackEvent('InstanceProjectUpdate', {
    loader: props.instance.loader,
@@ -664,15 +672,15 @@ const updateProject = async (mod: ProjectListEntry) => {
  })
 }

-const locks: Record<string, string | null> = {}
+const locks = {}

-const toggleDisableMod = async (mod: ProjectListEntry) => {
+const toggleDisableMod = async (mod) => {
  // Use mod's id as the key for the lock. If mod doesn't have a unique id, replace `mod.id` with some unique property.
  const lock = locks[mod.file_name]

  while (lock) {
    await new Promise((resolve) => {
-      setTimeout((value: unknown) => resolve(value), 100)
+      setTimeout((_) => resolve(), 100)
    })
  }

@@ -697,20 +705,20 @@ const toggleDisableMod = async (mod: ProjectListEntry) => {
  locks[mod.file_name] = null
 }

-const removeMod = async (mod: ContentItem<ProjectListEntry>) => {
+const removeMod = async (mod) => {
  await remove_project(props.instance.path, mod.path).catch(handleError)
  projects.value = projects.value.filter((x) => mod.path !== x.path)

  trackEvent('InstanceProjectRemove', {
    loader: props.instance.loader,
    game_version: props.instance.game_version,
-    id: mod.data.id,
-    name: mod.data.name,
-    project_type: mod.data.project_type,
+    id: mod.id,
+    name: mod.name,
+    project_type: mod.project_type,
  })
 }

-const copyModLink = async (mod: ContentItem<ProjectListEntry>) => {
+const copyModLink = async (mod) => {
  await navigator.clipboard.writeText(
    `https://modrinth.com/${mod.data.project_type}/${mod.data.slug}`,
  )
@@ -725,15 +733,15 @@ const deleteSelected = async () => {
 }

 const shareNames = async () => {
-  await shareModal.value?.show(functionValues.value.map((x) => x.name).join('\n'))
+  await shareModal.value.show(functionValues.value.map((x) => x.name).join('\n'))
 }

 const shareFileNames = async () => {
-  await shareModal.value?.show(functionValues.value.map((x) => x.file_name).join('\n'))
+  await shareModal.value.show(functionValues.value.map((x) => x.file_name).join('\n'))
 }

 const shareUrls = async () => {
-  await shareModal.value?.show(
+  await shareModal.value.show(
    functionValues.value
      .filter((x) => x.slug)
      .map((x) => `https://modrinth.com/${x.project_type}/${x.slug}`)
@@ -742,7 +750,7 @@ const shareUrls = async () => {
 }

 const shareMarkdown = async () => {
-  await shareModal.value?.show(
+  await shareModal.value.show(
    functionValues.value
      .map((x) => {
        if (x.slug) {
@@ -807,17 +815,15 @@ const unlisten = await getCurrentWebview().onDragDropEvent(async (event) => {
  await initProjects()
 })

-const unlistenProfiles = await profile_listener(
-  async (event: { event: string; profile_path_id: string }) => {
-    if (
-      event.profile_path_id === props.instance.path &&
-      event.event === 'synced' &&
-      props.instance.install_stage !== 'pack_installing'
-    ) {
-      await initProjects()
-    }
-  },
-)
+const unlistenProfiles = await profile_listener(async (event) => {
+  if (
+    event.profile_path_id === props.instance.path &&
+    event.event === 'synced' &&
+    props.instance.install_stage !== 'pack_installing'
+  ) {
+    await initProjects()
+  }
+})

 onUnmounted(() => {
  unlisten()
--- a/apps/app-frontend/src/pages/instance/Overview.vue
+++ b/apps/app-frontend/src/pages/instance/Overview.vue
@@ -1,15 +0,0 @@
-<template>{{ instance.name }} overview</template>
-<script setup lang="ts">
-import type { GameInstance } from '@/helpers/types'
-import type ContextMenu from '@/components/ui/ContextMenu.vue'
-import type { Version } from '@modrinth/utils'
-
-defineProps<{
-  instance: GameInstance
-  options: InstanceType<typeof ContextMenu>
-  offline: boolean
-  playing: boolean
-  versions: Version[]
-  installed: boolean
-}>()
-</script>
--- a/apps/app-frontend/src/pages/instance/Worlds.vue
+++ b/apps/app-frontend/src/pages/instance/Worlds.vue
@@ -1,463 +0,0 @@
-<template>
-  <AddServerModal
-    ref="addServerModal"
-    :instance="instance"
-    @submit="
-      (server, start) => {
-        addServer(server)
-        if (start) {
-          joinWorld(server)
-        }
-      }
-    "
-  />
-  <EditServerModal ref="editServerModal" :instance="instance" @submit="editServer" />
-  <EditWorldModal ref="editWorldModal" :instance="instance" @submit="editWorld" />
-  <ConfirmModalWrapper
-    ref="removeServerModal"
-    :title="`Are you sure you want to remove ${serverToRemove?.name ?? 'this server'}?`"
-    :description="`'${serverToRemove?.name}'${serverToRemove?.address === serverToRemove?.name ? ' ' : ` (${serverToRemove?.address})`} will be removed from your list, including in-game, and there will be no way to recover it.`"
-    :markdown="false"
-    @proceed="proceedRemoveServer"
-  />
-  <ConfirmModalWrapper
-    ref="deleteWorldModal"
-    :title="`Are you sure you want to permanently delete this world?`"
-    :description="`'${worldToDelete?.name}' will be **permanently deleted**, and there will be no way to recover it.`"
-    @proceed="proceedDeleteWorld"
-  />
-  <div v-if="worlds.length > 0" class="flex flex-col gap-4">
-    <div class="flex flex-wrap gap-2 items-center">
-      <div class="iconified-input flex-grow">
-        <SearchIcon />
-        <input
-          v-model="searchFilter"
-          type="text"
-          :placeholder="`Search worlds...`"
-          class="text-input search-input"
-          autocomplete="off"
-        />
-        <Button v-if="searchFilter" class="r-btn" @click="() => (searchFilter = '')">
-          <XIcon />
-        </Button>
-      </div>
-      <ButtonStyled>
-        <button :disabled="refreshingAll" @click="refreshAllWorlds">
-          <template v-if="refreshingAll">
-            <SpinnerIcon class="animate-spin" />
-            Refreshing...
-          </template>
-          <template v-else>
-            <UpdatedIcon />
-            Refresh
-          </template>
-        </button>
-      </ButtonStyled>
-      <ButtonStyled>
-        <button @click="addServerModal?.show()">
-          <PlusIcon />
-          Add a server
-        </button>
-      </ButtonStyled>
-    </div>
-    <FilterBar v-model="filters" :options="filterOptions" show-all-options />
-    <div class="flex flex-col w-full gap-2">
-      <WorldItem
-        v-for="world in filteredWorlds"
-        :key="`world-${world.type}-${world.type == 'singleplayer' ? world.path : `${world.address}-${world.index}`}`"
-        :world="world"
-        :highlighted="highlightedWorld === getWorldIdentifier(world)"
-        :supports-quick-play="supportsQuickPlay"
-        :current-protocol="protocolVersion"
-        :playing-instance="playing"
-        :playing-world="worldsMatch(world, worldPlaying)"
-        :starting-instance="startingInstance"
-        :refreshing="world.type === 'server' ? serverData[world.address]?.refreshing : undefined"
-        :server-status="world.type === 'server' ? serverData[world.address]?.status : undefined"
-        :rendered-motd="
-          world.type === 'server' ? serverData[world.address]?.renderedMotd : undefined
-        "
-        :game-mode="world.type === 'singleplayer' ? GAME_MODES[world.game_mode] : undefined"
-        @play="() => joinWorld(world)"
-        @stop="() => emit('stop')"
-        @refresh="() => refreshServer((world as ServerWorld).address)"
-        @edit="
-          () =>
-            world.type === 'server' ? editServerModal?.show(world) : editWorldModal?.show(world)
-        "
-        @delete="() => promptToRemoveWorld(world)"
-      />
-    </div>
-  </div>
-  <div v-else class="w-full max-w-[48rem] mx-auto flex flex-col mt-6">
-    <RadialHeader class="">
-      <div class="flex items-center gap-6 w-[32rem] mx-auto">
-        <img src="@/assets/sad-modrinth-bot.webp" alt="" aria-hidden="true" class="h-24" />
-        <span class="text-contrast font-bold text-xl"> You don't have any worlds yet. </span>
-      </div>
-    </RadialHeader>
-    <div class="flex gap-2 mt-4 mx-auto">
-      <ButtonStyled>
-        <button @click="addServerModal?.show()">
-          <PlusIcon aria-hidden="true" />
-          Add a server
-        </button>
-      </ButtonStyled>
-      <ButtonStyled>
-        <button :disabled="refreshingAll" @click="refreshAllWorlds">
-          <template v-if="refreshingAll">
-            <SpinnerIcon aria-hidden="true" class="animate-spin" />
-            Refreshing...
-          </template>
-          <template v-else>
-            <UpdatedIcon aria-hidden="true" />
-            Refresh
-          </template>
-        </button>
-      </ButtonStyled>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, computed, onUnmounted, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import type { GameInstance } from '@/helpers/types'
-import {
-  Button,
-  ButtonStyled,
-  RadialHeader,
-  FilterBar,
-  type FilterBarOption,
-  type GameVersion,
-  GAME_MODES,
-} from '@modrinth/ui'
-import { PlusIcon, SpinnerIcon, UpdatedIcon, SearchIcon, XIcon } from '@modrinth/assets'
-import {
-  type SingleplayerWorld,
-  type World,
-  type ServerWorld,
-  type ServerData,
-  type ProfileEvent,
-  get_profile_protocol_version,
-  remove_server_from_profile,
-  delete_world,
-  start_join_server,
-  start_join_singleplayer_world,
-  getWorldIdentifier,
-  refreshServerData,
-  refreshWorld,
-  sortWorlds,
-  refreshServers,
-  hasQuickPlaySupport,
-  refreshWorlds,
-  handleDefaultProfileUpdateEvent,
-} from '@/helpers/worlds.ts'
-import AddServerModal from '@/components/ui/world/modal/AddServerModal.vue'
-import EditServerModal from '@/components/ui/world/modal/EditServerModal.vue'
-import EditWorldModal from '@/components/ui/world/modal/EditSingleplayerWorldModal.vue'
-import WorldItem from '@/components/ui/world/WorldItem.vue'
-
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-import { handleError } from '@/store/notifications'
-import type ContextMenu from '@/components/ui/ContextMenu.vue'
-import type { Version } from '@modrinth/utils'
-import { profile_listener } from '@/helpers/events'
-import { get_game_versions } from '@/helpers/tags'
-import { defineMessages } from '@vintl/vintl'
-
-const route = useRoute()
-
-const addServerModal = ref<InstanceType<typeof AddServerModal>>()
-const editServerModal = ref<InstanceType<typeof EditServerModal>>()
-const editWorldModal = ref<InstanceType<typeof EditWorldModal>>()
-const removeServerModal = ref<InstanceType<typeof ConfirmModalWrapper>>()
-const deleteWorldModal = ref<InstanceType<typeof ConfirmModalWrapper>>()
-
-const serverToRemove = ref<ServerWorld>()
-const worldToDelete = ref<SingleplayerWorld>()
-
-const emit = defineEmits<{
-  (event: 'play', world: World): void
-  (event: 'stop'): void
-}>()
-
-const props = defineProps<{
-  instance: GameInstance
-  options: InstanceType<typeof ContextMenu> | null
-  offline: boolean
-  playing: boolean
-  versions: Version[]
-  installed: boolean
-}>()
-
-const instance = computed(() => props.instance)
-const playing = computed(() => props.playing)
-
-function play(world: World) {
-  emit('play', world)
-}
-
-const filters = ref<string[]>([])
-const searchFilter = ref('')
-
-const refreshingAll = ref(false)
-const hadNoWorlds = ref(true)
-const startingInstance = ref(false)
-const worldPlaying = ref<World>()
-
-const worlds = ref<World[]>([])
-const serverData = ref<Record<string, ServerData>>({})
-
-const protocolVersion = ref<number | null>(await get_profile_protocol_version(instance.value.path))
-
-const unlistenProfile = await profile_listener(async (e: ProfileEvent) => {
-  if (e.profile_path_id !== instance.value.path) return
-
-  console.info(`Handling profile event '${e.event}' for profile: ${e.profile_path_id}`)
-
-  if (e.event === 'servers_updated') {
-    await refreshAllWorlds()
-  }
-
-  await handleDefaultProfileUpdateEvent(worlds.value, instance.value.path, e)
-})
-
-await refreshAllWorlds()
-
-async function refreshServer(address: string) {
-  if (!serverData.value[address]) {
-    serverData.value[address] = {
-      refreshing: true,
-    }
-  }
-  await refreshServerData(serverData.value[address], protocolVersion.value, address)
-}
-
-async function refreshAllWorlds() {
-  if (refreshingAll.value) {
-    console.log(`Already refreshing, cancelling refresh.`)
-    return
-  }
-
-  refreshingAll.value = true
-
-  worlds.value = await refreshWorlds(instance.value.path).finally(
-    () => (refreshingAll.value = false),
-  )
-  await refreshServers(worlds.value, serverData.value, protocolVersion.value)
-
-  const hasNoWorlds = worlds.value.length === 0
-
-  if (hadNoWorlds.value && hasNoWorlds) {
-    setTimeout(() => {
-      refreshingAll.value = false
-    }, 1000)
-  } else {
-    refreshingAll.value = false
-  }
-
-  hadNoWorlds.value = hasNoWorlds
-}
-
-async function addServer(server: ServerWorld) {
-  worlds.value.push(server)
-  sortWorlds(worlds.value)
-  await refreshServer(server.address)
-}
-
-async function editServer(server: ServerWorld) {
-  const index = worlds.value.findIndex((w) => w.type === 'server' && w.index === server.index)
-  if (index !== -1) {
-    const oldServer = worlds.value[index] as ServerWorld
-    worlds.value[index] = server
-    sortWorlds(worlds.value)
-    if (oldServer.address !== server.address) {
-      await refreshServer(server.address)
-    }
-  } else {
-    handleError(`Error refreshing server, refreshing all worlds`)
-    await refreshAllWorlds()
-  }
-}
-
-async function removeServer(server: ServerWorld) {
-  await remove_server_from_profile(instance.value.path, server.index).catch(handleError)
-  worlds.value = worlds.value.filter((w) => w.type !== 'server' || w.index !== server.index)
-}
-
-async function editWorld(path: string, name: string, removeIcon: boolean) {
-  const world = worlds.value.find((world) => world.type === 'singleplayer' && world.path === path)
-  if (world) {
-    world.name = name
-    if (removeIcon) {
-      world.icon = undefined
-    }
-    sortWorlds(worlds.value)
-  } else {
-    handleError(`Error finding world in list, refreshing all worlds`)
-    await refreshAllWorlds()
-  }
-}
-
-async function deleteWorld(world: SingleplayerWorld) {
-  await delete_world(instance.value.path, world.path).catch(handleError)
-  worlds.value = worlds.value.filter((w) => w.type !== 'singleplayer' || w.path !== world.path)
-}
-
-function handleJoinError(err: unknown) {
-  handleError(err)
-  startingInstance.value = false
-  worldPlaying.value = undefined
-}
-
-async function joinWorld(world: World) {
-  console.log(`Joining world ${getWorldIdentifier(world)}`)
-  startingInstance.value = true
-  worldPlaying.value = world
-  if (world.type === 'server') {
-    await start_join_server(instance.value.path, world.address).catch(handleJoinError)
-  } else if (world.type === 'singleplayer') {
-    await start_join_singleplayer_world(instance.value.path, world.path).catch(handleJoinError)
-  }
-  play(world)
-  startingInstance.value = false
-}
-
-watch(
-  () => playing.value,
-  (playing) => {
-    if (!playing) {
-      worldPlaying.value = undefined
-
-      setTimeout(async () => {
-        for (const world of worlds.value) {
-          if (world.type === 'singleplayer' && world.locked) {
-            await refreshWorld(worlds.value, instance.value.path, world.path)
-          }
-        }
-      }, 1000)
-    }
-  },
-)
-
-function worldsMatch(world: World, other: World | undefined) {
-  if (world.type === 'server' && other?.type === 'server') {
-    return world.address === other.address
-  } else if (world.type === 'singleplayer' && other?.type === 'singleplayer') {
-    return world.path === other.path
-  }
-  return false
-}
-
-const gameVersions = ref<GameVersion[]>(await get_game_versions().catch(() => []))
-const supportsQuickPlay = computed(() =>
-  hasQuickPlaySupport(gameVersions.value, instance.value.game_version),
-)
-
-const filterOptions = computed(() => {
-  const options: FilterBarOption[] = []
-
-  const hasServer = worlds.value.some((x) => x.type === 'server')
-
-  if (worlds.value.some((x) => x.type === 'singleplayer') && hasServer) {
-    options.push({
-      id: 'singleplayer',
-      message: messages.singleplayer,
-    })
-    options.push({
-      id: 'server',
-      message: messages.server,
-    })
-  }
-
-  if (hasServer) {
-    // add available filter if there's any offline ("unavailable") servers AND there's any singleplayer worlds or available servers
-    if (
-      worlds.value.some(
-        (x) =>
-          x.type === 'server' &&
-          !serverData.value[x.address]?.status &&
-          !serverData.value[x.address]?.refreshing,
-      ) &&
-      worlds.value.some(
-        (x) =>
-          x.type === 'singleplayer' ||
-          (x.type === 'server' &&
-            serverData.value[x.address]?.status &&
-            !serverData.value[x.address]?.refreshing),
-      )
-    ) {
-      options.push({
-        id: 'available',
-        message: messages.available,
-      })
-    }
-  }
-
-  return options
-})
-
-const filteredWorlds = computed(() =>
-  worlds.value.filter((x) => {
-    const availableFilter = filters.value.includes('available')
-    const typeFilter = filters.value.includes('server') || filters.value.includes('singleplayer')
-
-    return (
-      (!typeFilter || filters.value.includes(x.type)) &&
-      (!availableFilter || x.type !== 'server' || serverData.value[x.address]?.status) &&
-      (!searchFilter.value || x.name.toLowerCase().includes(searchFilter.value.toLowerCase()))
-    )
-  }),
-)
-
-const highlightedWorld = ref(route.query.highlight)
-
-function promptToRemoveWorld(world: World): boolean {
-  if (world.type === 'server') {
-    serverToRemove.value = world
-    removeServerModal.value?.show()
-    return !!removeServerModal.value
-  } else {
-    worldToDelete.value = world
-    deleteWorldModal.value?.show()
-    return !!deleteWorldModal.value
-  }
-}
-
-async function proceedRemoveServer() {
-  if (!serverToRemove.value) {
-    handleError(`Error removing server, no server marked for removal.`)
-    return
-  }
-  await removeServer(serverToRemove.value)
-  serverToRemove.value = undefined
-}
-
-async function proceedDeleteWorld() {
-  if (!worldToDelete.value) {
-    handleError(`Error deleting world, no world marked for removal.`)
-    return
-  }
-  await deleteWorld(worldToDelete.value)
-  worldToDelete.value = undefined
-}
-
-onUnmounted(() => {
-  unlistenProfile()
-})
-
-const messages = defineMessages({
-  singleplayer: {
-    id: 'instance.worlds.type.singleplayer',
-    defaultMessage: 'Singleplayer',
-  },
-  server: {
-    id: 'instance.worlds.type.server',
-    defaultMessage: 'Server',
-  },
-  available: {
-    id: 'instance.worlds.filter.available',
-    defaultMessage: 'Available',
-  },
-})
-</script>
--- a/apps/app-frontend/src/pages/instance/index.js
+++ b/apps/app-frontend/src/pages/instance/index.js
@@ -1,7 +1,5 @@
 import Index from './Index.vue'
-import Overview from './Overview.vue'
-import Worlds from './Worlds.vue'
 import Mods from './Mods.vue'
 import Logs from './Logs.vue'

-export { Index, Overview, Worlds, Mods, Logs }
+export { Index, Mods, Logs }
--- a/apps/app-frontend/src/pages/library/Custom.vue
+++ b/apps/app-frontend/src/pages/library/Custom.vue
@@ -10,7 +10,7 @@ defineProps({
 </script>
 <template>
  <GridDisplay
-    v-if="instances.length > 0"
+    v-if="instances && instances.length > 0"
    label="Instances"
    :instances="instances.filter((i) => !i.linked_data)"
  />
--- a/apps/app-frontend/src/pages/library/Downloaded.vue
+++ b/apps/app-frontend/src/pages/library/Downloaded.vue
@@ -10,7 +10,7 @@ defineProps({
 </script>
 <template>
  <GridDisplay
-    v-if="instances.length > 0"
+    v-if="instances && instances.length > 0"
    label="Instances"
    :instances="instances.filter((i) => i.linked_data)"
  />
--- a/apps/app-frontend/src/pages/library/Overview.vue
+++ b/apps/app-frontend/src/pages/library/Overview.vue
@@ -9,5 +9,5 @@ defineProps({
 })
 </script>
 <template>
-  <GridDisplay v-if="instances.length > 0" label="Instances" :instances="instances" />
+  <GridDisplay v-if="instances && instances.length > 0" label="Instances" :instances="instances" />
 </template>
--- a/apps/app-frontend/src/pages/organization/Index.vue
+++ b/apps/app-frontend/src/pages/organization/Index.vue
@@ -0,0 +1,176 @@
+<template>
+  <Teleport to="#sidebar-teleport-target">
+    <OrganizationSidebarMembers
+      v-if="organization"
+      :members="organization.members"
+      :user-link="(user) => `/user/${user.id}`"
+      class="project-sidebar-section"
+    />
+  </Teleport>
+  <div v-if="organization" class="flex flex-col gap-4 p-6">
+    <InstanceIndicator :instance="instance" />
+    <OrganizationHeader
+      :organization="organization"
+      :download-count="sumDownloads"
+      :project-count="projects.length"
+    >
+      <template #actions>
+        <ButtonStyled v-if="themeStore.devMode" circular type="transparent" size="large">
+          <OverflowMenu
+            :options="[{ id: 'copy-id', action: () => copyId(), shown: themeStore.devMode }]"
+            aria-label="More options"
+          >
+            <MoreVerticalIcon aria-hidden="true" />
+            <template #copy-id>
+              <ClipboardCopyIcon aria-hidden="true" />
+              {{ formatMessage(commonMessages.copyIdButton) }}
+            </template>
+          </OverflowMenu>
+        </ButtonStyled>
+      </template>
+    </OrganizationHeader>
+    <div v-if="projects">
+      <ProjectsList
+        :projects="projects"
+        :project-link="(project) => `/project/${project.id}${instanceQueryAppendage}`"
+        :experimental-colors="themeStore.featureFlags.project_card_background"
+      >
+        <template #project-actions="{ project }">
+          <ProjectCardActions
+            :project="project"
+            :instance="instance"
+            :instance-content="instanceContent"
+          />
+        </template>
+      </ProjectsList>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { ref, type Ref, watch, computed } from 'vue'
+import { handleError } from '@/store/notifications.js'
+import {
+  ProjectsList,
+  ButtonStyled,
+  commonMessages,
+  OverflowMenu,
+  OrganizationHeader,
+  OrganizationSidebarMembers,
+} from '@modrinth/ui'
+import { ClipboardCopyIcon, MoreVerticalIcon } from '@modrinth/assets'
+import { useVIntl } from '@vintl/vintl'
+import { useFetch } from '@/helpers/fetch'
+import type { Project, Organization, ProjectV3, Environment } from '@modrinth/utils'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { useTheming } from '@/store/theme'
+import { useInstanceContext } from '@/composables/instance-context.ts'
+import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
+import ProjectCardActions from '@/components/ui/ProjectCardActions.vue'
+
+const breadcrumbs = useBreadcrumbs()
+const route = useRoute()
+const { formatMessage } = useVIntl()
+
+const organization: Ref<Organization | null> = ref(null)
+const projects: Ref<Project[]> = ref([])
+
+const { instance, instanceContent, instanceQueryAppendage } = await useInstanceContext()
+
+async function fetchOrganization() {
+  organization.value = await useFetch(
+    `https://api.modrinth.com/v3/organization/${route.params.id}`,
+  ).catch(handleError)
+  projects.value = (
+    await useFetch(`https://api.modrinth.com/v3/organization/${route.params.id}/projects`).catch(
+      handleError,
+    )
+  ).map((projectV3: ProjectV3) => {
+    let type = projectV3.project_types[0]
+
+    if (type === 'plugin' || type === 'datapack') {
+      type = 'mod'
+    }
+
+    let clientSide: Environment = 'unknown'
+    let serverSide: Environment = 'unknown'
+
+    const singleplayer = projectV3.singleplayer && projectV3.singleplayer[0]
+    const clientAndServer = projectV3.client_and_server && projectV3.client_and_server[0]
+    const clientOnly = projectV3.client_only && projectV3.client_only[0]
+    const serverOnly = projectV3.server_only && projectV3.server_only[0]
+
+    // quick and dirty hack to show envs as legacy
+    if (singleplayer && clientAndServer && !clientOnly && !serverOnly) {
+      clientSide = 'required'
+      serverSide = 'required'
+    } else if (singleplayer && clientAndServer && clientOnly && !serverOnly) {
+      clientSide = 'required'
+      serverSide = 'unsupported'
+    } else if (singleplayer && clientAndServer && !clientOnly && serverOnly) {
+      clientSide = 'unsupported'
+      serverSide = 'required'
+    } else if (singleplayer && clientAndServer && clientOnly && serverOnly) {
+      clientSide = 'optional'
+      serverSide = 'optional'
+    }
+
+    const projectV2: Project = {
+      ...projectV3,
+      title: projectV3.name,
+      description: projectV3.summary,
+      body: projectV3.description,
+      project_type: type,
+      team: projectV3.team_id,
+      donation_urls: [],
+      client_side: clientSide,
+      server_side: serverSide,
+    }
+    return projectV2
+  })
+
+  if (!organization.value) {
+    return
+  }
+
+  breadcrumbs.setName('Organization', organization.value.name)
+}
+
+await fetchOrganization()
+
+watch(
+  () => route.params.id,
+  async () => {
+    if (route.params.id && route.path.startsWith('/organization')) {
+      await fetchOrganization()
+    }
+  },
+)
+
+const themeStore = useTheming()
+
+async function copyId() {
+  if (organization.value) {
+    await navigator.clipboard.writeText(String(organization.value.id))
+  }
+}
+
+const sumDownloads = computed(() => {
+  let sum = 0
+
+  for (const project of projects.value) {
+    sum += project.downloads
+  }
+
+  return sum
+})
+</script>
+<style scoped lang="scss">
+.project-sidebar-section {
+  @apply p-4 flex flex-col gap-2 border-0 border-[--brand-gradient-border] border-solid;
+}
+.project-sidebar-section:not(:last-child) {
+  @apply border-b-[1px];
+}
+</style>
--- a/apps/app-frontend/src/pages/organization/index.js
+++ b/apps/app-frontend/src/pages/organization/index.js
@@ -0,0 +1,3 @@
+import Index from './Index.vue'
+
+export { Index }
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -8,11 +8,10 @@
      />
      <ProjectSidebarLinks link-target="_blank" :project="data" class="project-sidebar-section" />
      <ProjectSidebarCreators
-        :organization="null"
+        :organization="organization"
        :members="members"
-        :org-link="(slug) => `https://modrinth.com/organization/${slug}`"
-        :user-link="(username) => `https://modrinth.com/user/${username}`"
-        link-target="_blank"
+        :org-link="(org) => `/organization/${org.id}${instance ? '?i=' + instance.path : ''}`"
+        :user-link="(user) => `/user/${user.id}${instance ? '?i=' + instance.path : ''}`"
        class="project-sidebar-section"
      />
      <ProjectSidebarDetails
@@ -23,7 +22,7 @@
      />
    </Teleport>
    <div class="flex flex-col gap-4 p-6">
-      <InstanceIndicator v-if="instance" :instance="instance" />
+      <InstanceIndicator :instance="instance" />
      <template v-if="data">
        <Teleport
          v-if="themeStore.featureFlags.project_background"
@@ -92,6 +91,11 @@
              label: 'Description',
              href: `/project/${$route.params.id}`,
            },
+            {
+              label: 'Gallery',
+              href: `/project/${$route.params.id}/gallery`,
+              shown: data.gallery.length > 0,
+            },
            {
              label: 'Versions',
              href: {
@@ -100,11 +104,6 @@
              },
              subpages: ['version'],
            },
-            {
-              label: 'Gallery',
-              href: `/project/${$route.params.id}/gallery`,
-              shown: data.gallery.length > 0,
-            },
          ]"
        />
        <RouterView
@@ -155,7 +154,7 @@ import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
 import { get as getInstance, get_projects as getInstanceProjects } from '@/helpers/profile'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { ref, shallowRef, watch } from 'vue'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { handleError } from '@/store/notifications.js'
@@ -166,11 +165,11 @@ import NavTabs from '@/components/ui/NavTabs.vue'
 import { useTheming } from '@/store/state.js'
 import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
 import { openUrl } from '@tauri-apps/plugin-opener'
+import { useFetch } from '@/helpers/fetch.js'

 dayjs.extend(relativeTime)

 const route = useRoute()
-const router = useRouter()
 const breadcrumbs = useBreadcrumbs()
 const themeStore = useTheming()

@@ -178,6 +177,7 @@ const installing = ref(false)
 const data = shallowRef(null)
 const versions = shallowRef([])
 const members = shallowRef([])
+const organization = shallowRef(null)
 const categories = shallowRef([])
 const instance = ref(null)
 const instanceProjects = ref(null)
@@ -193,11 +193,6 @@ const [allLoaders, allGameVersions] = await Promise.all([
 async function fetchProjectData() {
  const project = await get_project(route.params.id, 'must_revalidate').catch(handleError)

-  if (!project) {
-    handleError('Error loading project')
-    return
-  }
-
  data.value = project
  ;[versions.value, members.value, categories.value, instance.value, instanceProjects.value] =
    await Promise.all([
@@ -208,6 +203,12 @@ async function fetchProjectData() {
      route.query.i ? getInstanceProjects(route.query.i).catch(handleError) : Promise.resolve(),
    ])

+  if (project.organization) {
+    organization.value = await useFetch(
+      `https://api.modrinth.com/v3/organization/${project.organization}`,
+    ).catch(handleError)
+  }
+
  versions.value = versions.value.sort((a, b) => dayjs(b.date_published) - dayjs(a.date_published))

  if (instanceProjects.value) {
@@ -219,6 +220,7 @@ async function fetchProjectData() {
      installedVersion.value = installedFile.metadata.version_id
    }
  }
+
  breadcrumbs.setName('Project', data.value.title)
 }

@@ -248,9 +250,6 @@ async function install(version) {
        installedVersion.value = version
      }
    },
-    (profile) => {
-      router.push(`/instance/${profile}`)
-    },
  )
 }

@@ -446,6 +445,10 @@ const handleOptionsClick = (args) => {
 }

 .project-sidebar-section {
-  @apply p-4 flex flex-col gap-2 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid;
+  @apply p-4 flex flex-col gap-2 border-0 border-[--brand-gradient-border] border-solid;
+}
+
+.project-sidebar-section:not(:last-child) {
+  @apply border-b-[1px];
 }
 </style>
--- a/apps/app-frontend/src/pages/user/Index.vue
+++ b/apps/app-frontend/src/pages/user/Index.vue
@@ -0,0 +1,156 @@
+<template>
+  <Teleport to="#sidebar-teleport-target">
+    <UserSidebarOrganizations
+      :organizations="organizations"
+      :link="(org: Organization) => `/organization/${org.id}${instanceQueryAppendage}`"
+      class="project-sidebar-section"
+    />
+    <UserSidebarBadges
+      v-if="user"
+      :user="user"
+      :download-count="sumDownloads"
+      class="project-sidebar-section"
+    />
+    <UserSidebarCollections
+      :collections="collections"
+      :link="(collection: Collection) => `/collection/${collection.id}${instanceQueryAppendage}`"
+      class="project-sidebar-section"
+    />
+  </Teleport>
+  <div v-if="user" class="p-6 flex flex-col gap-4">
+    <InstanceIndicator :instance="instance" />
+    <UserHeader :user="user" :project-count="projects.length" :download-count="sumDownloads">
+      <template #actions>
+        <ButtonStyled circular type="transparent" size="large">
+          <OverflowMenu
+            :options="[
+              {
+                id: 'report',
+                link: `https://modrinth.com/report?item=user&itemID=${user.id}`,
+                color: 'red',
+              },
+              { id: 'copy-id', action: () => copyId(), shown: themeStore.devMode },
+            ]"
+            aria-label="More options"
+          >
+            <MoreVerticalIcon aria-hidden="true" />
+            <template #report>
+              <ReportIcon aria-hidden="true" />
+              {{ formatMessage(commonMessages.reportButton) }}
+            </template>
+            <template #copy-id>
+              <ClipboardCopyIcon aria-hidden="true" />
+              {{ formatMessage(commonMessages.copyIdButton) }}
+            </template>
+          </OverflowMenu>
+        </ButtonStyled>
+      </template>
+    </UserHeader>
+    <div v-if="projects">
+      <ProjectsList
+        :projects="projects"
+        :project-link="(project) => `/project/${project.id}${instanceQueryAppendage}`"
+        :experimental-colors="themeStore.featureFlags.project_card_background"
+      >
+        <template #project-actions="{ project }">
+          <ProjectCardActions
+            :instance="instance"
+            :instance-content="instanceContent"
+            :project="project"
+          />
+        </template>
+      </ProjectsList>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { ref, type Ref, watch, computed } from 'vue'
+import { handleError } from '@/store/notifications.js'
+import {
+  ProjectsList,
+  UserSidebarOrganizations,
+  ButtonStyled,
+  commonMessages,
+  OverflowMenu,
+  UserHeader,
+  UserSidebarBadges,
+  UserSidebarCollections,
+} from '@modrinth/ui'
+import { ReportIcon, ClipboardCopyIcon, MoreVerticalIcon } from '@modrinth/assets'
+import { useVIntl } from '@vintl/vintl'
+import { useFetch } from '@/helpers/fetch'
+import type { User, Project, Organization, Collection } from '@modrinth/utils'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { useTheming } from '@/store/theme'
+import { useInstanceContext } from '@/composables/instance-context'
+import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
+import ProjectCardActions from '@/components/ui/ProjectCardActions.vue'
+
+const breadcrumbs = useBreadcrumbs()
+const route = useRoute()
+const { formatMessage } = useVIntl()
+
+const user: Ref<User | null> = ref(null)
+const projects: Ref<Project[]> = ref([])
+const organizations: Ref<Organization[]> = ref([])
+const collections: Ref<Collection[]> = ref([])
+
+async function fetchUser() {
+  ;[user.value, projects.value, organizations.value, collections.value] = await Promise.all([
+    useFetch(`https://api.modrinth.com/v2/user/${route.params.id}`).catch(handleError),
+    useFetch(`https://api.modrinth.com/v2/user/${route.params.id}/projects`).catch(handleError),
+    useFetch(`https://api.modrinth.com/v3/user/${route.params.id}/organizations`).catch(
+      handleError,
+    ),
+    useFetch(`https://api.modrinth.com/v3/user/${route.params.id}/collections`).catch(handleError),
+  ])
+
+  if (!user.value) {
+    return
+  }
+
+  breadcrumbs.setContext({ name: 'User', link: `/user/${user.value.username}` })
+  breadcrumbs.setName('User', user.value.username)
+}
+
+await fetchUser()
+
+const { instance, instanceContent, instanceQueryAppendage } = await useInstanceContext()
+
+watch(
+  () => route.params.id,
+  async () => {
+    if (route.params.id && route.path.startsWith('/user')) {
+      await fetchUser()
+    }
+  },
+)
+
+const themeStore = useTheming()
+
+async function copyId() {
+  if (user.value) {
+    await navigator.clipboard.writeText(String(user.value.id))
+  }
+}
+
+const sumDownloads = computed(() => {
+  let sum = 0
+
+  for (const project of projects.value) {
+    sum += project.downloads
+  }
+
+  return sum
+})
+</script>
+<style scoped lang="scss">
+.project-sidebar-section {
+  @apply p-4 flex flex-col gap-2 border-0 border-[--brand-gradient-border] border-solid;
+}
+.project-sidebar-section:not(:last-child) {
+  @apply border-b-[1px];
+}
+</style>
--- a/apps/app-frontend/src/pages/user/index.js
+++ b/apps/app-frontend/src/pages/user/index.js
@@ -0,0 +1,3 @@
+import Index from './Index.vue'
+
+export { Index }
--- a/apps/app-frontend/src/routes.js
+++ b/apps/app-frontend/src/routes.js
@@ -1,6 +1,9 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import * as Pages from '@/pages'
 import * as Project from '@/pages/project'
+import * as User from '@/pages/user'
+import * as Organization from '@/pages/organization'
+import * as Collection from '@/pages/collection'
 import * as Instance from '@/pages/instance'
 import * as Library from '@/pages/library'

@@ -18,14 +21,6 @@ export default new createRouter({
        breadcrumb: [{ name: 'Home' }],
      },
    },
-    {
-      path: '/worlds',
-      name: 'Worlds',
-      component: Pages.Worlds,
-      meta: {
-        breadcrumb: [{ name: 'Worlds' }],
-      },
-    },
    {
      path: '/browse/:projectType',
      name: 'Discover content',
@@ -108,37 +103,49 @@ export default new createRouter({
        },
      ],
    },
+    {
+      path: '/user/:id',
+      name: 'User',
+      component: User.Index,
+      props: true,
+      meta: {
+        useContext: true,
+        breadcrumb: [{ name: '?User', link: '/user/{id}' }],
+      },
+    },
+    {
+      path: '/organization/:id',
+      name: 'Organization',
+      component: Organization.Index,
+      props: true,
+      meta: {
+        useContext: true,
+        breadcrumb: [{ name: '?Organization', link: '/organization/{id}' }],
+      },
+    },
+    {
+      path: '/collection/:id',
+      name: 'Collection',
+      component: Collection.Index,
+      props: true,
+      meta: {
+        useContext: true,
+        breadcrumb: [{ name: '?Collection', link: '/collection/{id}' }],
+      },
+    },
    {
      path: '/instance/:id',
      name: 'Instance',
      component: Instance.Index,
      props: true,
      children: [
-        // {
-        //   path: '',
-        //   name: 'Overview',
-        //   component: Instance.Overview,
-        //   meta: {
-        //     useRootContext: true,
-        //     breadcrumb: [{ name: '?Instance' }],
-        //   },
-        // },
-        {
-          path: 'worlds',
-          name: 'InstanceWorlds',
-          component: Instance.Worlds,
-          meta: {
-            useRootContext: true,
-            breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Worlds' }],
-          },
-        },
        {
          path: '',
          name: 'Mods',
          component: Instance.Mods,
          meta: {
            useRootContext: true,
-            breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Content' }],
+            breadcrumb: [{ name: '?Instance' }],
          },
        },
        {
@@ -147,7 +154,7 @@ export default new createRouter({
          component: Instance.Mods,
          meta: {
            useRootContext: true,
-            breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Content' }],
+            breadcrumb: [{ name: '?Instance' }],
          },
        },
        {
--- a/apps/app-frontend/src/store/install.js
+++ b/apps/app-frontend/src/store/install.js
@@ -23,8 +23,8 @@ export const useInstall = defineStore('installStore', {
    setInstallConfirmModal(ref) {
      this.installConfirmModal = ref
    },
-    showInstallConfirmModal(project, version_id, onInstall, createInstanceCallback) {
-      this.installConfirmModal.show(project, version_id, onInstall, createInstanceCallback)
+    showInstallConfirmModal(project, version_id, onInstall) {
+      this.installConfirmModal.show(project, version_id, onInstall)
    },
    setIncompatibilityWarningModal(ref) {
      this.incompatibilityWarningModal = ref
@@ -41,14 +41,7 @@ export const useInstall = defineStore('installStore', {
  },
 })

-export const install = async (
-  projectId,
-  versionId,
-  instancePath,
-  source,
-  callback = () => {},
-  createInstanceCallback = () => {},
-) => {
+export const install = async (projectId, versionId, instancePath, source, callback = () => {}) => {
  const project = await get_project(projectId, 'must_revalidate').catch(handleError)

  if (project.project_type === 'modpack') {
@@ -56,13 +49,7 @@ export const install = async (
    const packs = await list().catch(handleError)

    if (packs.length === 0 || !packs.find((pack) => pack.linked_data?.project_id === project.id)) {
-      await packInstall(
-        project.id,
-        version,
-        project.title,
-        project.icon_url,
-        createInstanceCallback,
-      ).catch(handleError)
+      await packInstall(project.id, version, project.title, project.icon_url).catch(handleError)

      trackEvent('PackInstall', {
        id: project.id,
@@ -74,7 +61,7 @@ export const install = async (
      callback(version)
    } else {
      const install = useInstall()
-      install.showInstallConfirmModal(project, version, callback, createInstanceCallback)
+      install.showInstallConfirmModal(project, version, callback)
    }
  } else {
    if (instancePath) {
--- a/apps/app-frontend/src/store/state.js
+++ b/apps/app-frontend/src/store/state.js
@@ -1,4 +1,4 @@
-import { useTheming } from './theme.ts'
+import { useTheming } from './theme'
 import { useBreadcrumbs } from './breadcrumbs'
 import { useLoading } from './loading'
 import { useNotifications, handleError } from './notifications'
--- a/apps/app-frontend/src/store/theme.js
+++ b/apps/app-frontend/src/store/theme.js
@@ -0,0 +1,44 @@
+import { defineStore } from 'pinia'
+
+export const DEFAULT_FEATURE_FLAGS = {
+  project_background: false,
+  page_path: false,
+  project_card_background: false,
+}
+
+export const useTheming = defineStore('themeStore', {
+  state: () => ({
+    themeOptions: ['dark', 'light', 'oled', 'system'],
+    advancedRendering: true,
+    selectedTheme: 'dark',
+    toggleSidebar: false,
+
+    devMode: false,
+    featureFlags: DEFAULT_FEATURE_FLAGS,
+  }),
+  actions: {
+    setThemeState(newTheme) {
+      if (this.themeOptions.includes(newTheme)) this.selectedTheme = newTheme
+      else console.warn('Selected theme is not present. Check themeOptions.')
+
+      this.setThemeClass()
+    },
+    setThemeClass() {
+      for (const theme of this.themeOptions) {
+        document.getElementsByTagName('html')[0].classList.remove(`${theme}-mode`)
+      }
+
+      let theme = this.selectedTheme
+      if (this.selectedTheme === 'system') {
+        const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
+        if (darkThemeMq.matches) {
+          theme = 'dark'
+        } else {
+          theme = 'light'
+        }
+      }
+
+      document.getElementsByTagName('html')[0].classList.add(`${theme}-mode`)
+    },
+  },
+})
--- a/apps/app-frontend/src/store/theme.ts
+++ b/apps/app-frontend/src/store/theme.ts
@@ -1,70 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const DEFAULT_FEATURE_FLAGS = {
-  project_background: false,
-  page_path: false,
-  worlds_tab: false,
-  worlds_in_home: true,
-}
-
-export const THEME_OPTIONS = ['dark', 'light', 'oled', 'system'] as const
-
-export type FeatureFlag = keyof typeof DEFAULT_FEATURE_FLAGS
-export type FeatureFlags = Record<FeatureFlag, boolean>
-export type ColorTheme = (typeof THEME_OPTIONS)[number]
-
-export type ThemeStore = {
-  selectedTheme: ColorTheme
-  advancedRendering: boolean
-  toggleSidebar: boolean
-
-  devMode: boolean
-  featureFlags: FeatureFlags
-}
-
-export const DEFAULT_THEME_STORE: ThemeStore = {
-  selectedTheme: 'dark',
-  advancedRendering: true,
-  toggleSidebar: false,
-
-  devMode: false,
-  featureFlags: DEFAULT_FEATURE_FLAGS,
-}
-
-export const useTheming = defineStore('themeStore', {
-  state: () => DEFAULT_THEME_STORE,
-  actions: {
-    setThemeState(newTheme: ColorTheme) {
-      if (THEME_OPTIONS.includes(newTheme)) {
-        this.selectedTheme = newTheme
-      } else {
-        console.warn('Selected theme is not present. Check themeOptions.')
-      }
-
-      this.setThemeClass()
-    },
-    setThemeClass() {
-      for (const theme of THEME_OPTIONS) {
-        document.getElementsByTagName('html')[0].classList.remove(`${theme}-mode`)
-      }
-
-      let theme = this.selectedTheme
-      if (this.selectedTheme === 'system') {
-        const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
-        if (darkThemeMq.matches) {
-          theme = 'dark'
-        } else {
-          theme = 'light'
-        }
-      }
-
-      document.getElementsByTagName('html')[0].classList.add(`${theme}-mode`)
-    },
-    getFeatureFlag(key: FeatureFlag) {
-      return this.featureFlags[key] ?? DEFAULT_FEATURE_FLAGS[key]
-    },
-    getThemeOptions() {
-      return THEME_OPTIONS
-    },
-  },
-})
--- a/apps/app-playground/Cargo.toml
+++ b/apps/app-playground/Cargo.toml
@@ -9,6 +9,5 @@ edition = "2021"
 theseus = { path = "../../packages/app-lib", features = ["cli"] }
 tokio = { version = "1", features = ["full"] }
 webbrowser = "0.8.13"
-enumset = "1.1"

 tracing = "0.1.37"
--- a/apps/app-playground/src/main.rs
+++ b/apps/app-playground/src/main.rs
@@ -3,9 +3,9 @@
    windows_subsystem = "windows"
 )]

-use enumset::EnumSet;
+use std::time::Duration;
 use theseus::prelude::*;
-use theseus::worlds::get_recent_worlds;
+use tokio::signal::ctrl_c;

 // A simple Rust implementation of the authentication run
 // 1) call the authenticate_begin_flow() function to get the URL to open (like you would in the frontend)
@@ -41,16 +41,21 @@ async fn main() -> theseus::Result<()> {
    // Initialize state
    State::init().await?;

-    let worlds = get_recent_worlds(4, EnumSet::all()).await?;
-    for world in worlds {
-        println!(
-            "World: {:?}/{:?} played at {:?}: {:#?}",
-            world.profile,
-            world.world.name,
-            world.world.last_played,
-            world.world.details
-        );
+    loop {
+        if State::get().await?.friends_socket.is_connected().await {
+            break;
+        }
+        tokio::time::sleep(Duration::from_millis(500)).await;
    }

+    tracing::info!("Starting host");
+
+    let socket = State::get().await?.friends_socket.open_port(25565).await?;
+    tracing::info!("Running host on socket {}", socket.socket_id());
+
+    ctrl_c().await?;
+    tracing::info!("Stopping host");
+    socket.shutdown().await?;
+
    Ok(())
 }
--- a/apps/app/Cargo.toml
+++ b/apps/app/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "theseus_gui"
-version = "0.9.5"
+version = "0.9.3"
 description = "The Modrinth App is a desktop application for managing your Minecraft mods"
 license = "GPL-3.0-only"
 repository = "https://github.com/modrinth/code/apps/app/"
@@ -30,10 +30,8 @@ tokio = { version = "1", features = ["full"] }
 thiserror = "1.0"
 daedalus = { path = "../../packages/daedalus" }
 chrono = "0.4.26"
-either = "1.15"

 url = "2.2"
-urlencoding = "2.1"
 uuid = { version = "1.1", features = ["serde", "v4"] }
 os_info = "3.7.0"

@@ -42,7 +40,6 @@ tracing-error = "0.2.0"

 dashmap = "6.0.1"
 paste = "1.0.15"
-enumset = { version = "1.1", features = ["serde"] }

 opener = { version = "0.7.2", features = ["reveal", "dbus-vendored"] }

--- a/apps/app/build.rs
+++ b/apps/app/build.rs
@@ -240,30 +240,6 @@ fn main() {
                    .default_permission(
                        DefaultPermissionRule::AllowAllCommands,
                    ),
-            )
-            .plugin(
-                "worlds",
-                InlinedPlugin::new()
-                    .commands(&[
-                        "get_recent_worlds",
-                        "get_profile_worlds",
-                        "get_singleplayer_world",
-                        "set_world_display_status",
-                        "rename_world",
-                        "reset_world_icon",
-                        "backup_world",
-                        "delete_world",
-                        "add_server_to_profile",
-                        "edit_server_in_profile",
-                        "remove_server_from_profile",
-                        "get_profile_protocol_version",
-                        "get_server_status",
-                        "start_join_singleplayer_world",
-                        "start_join_server",
-                    ])
-                    .default_permission(
-                        DefaultPermissionRule::AllowAllCommands,
-                    ),
            ),
    )
    .expect("Failed to run tauri-build");
--- a/apps/app/capabilities/plugins.json
+++ b/apps/app/capabilities/plugins.json
@@ -35,7 +35,6 @@
    "tags:default",
    "utils:default",
    "ads:default",
-    "friends:default",
-    "worlds:default"
+    "friends:default"
  ]
 }
--- a/apps/app/src/api/mod.rs
+++ b/apps/app/src/api/mod.rs
@@ -19,7 +19,6 @@ pub mod utils;
 pub mod ads;
 pub mod cache;
 pub mod friends;
-pub mod worlds;

 pub type Result<T> = std::result::Result<T, TheseusSerializableError>;

--- a/apps/app/src/api/profile.rs
+++ b/apps/app/src/api/profile.rs
@@ -4,7 +4,6 @@ use serde::{Deserialize, Serialize};
 use std::collections::HashMap;
 use std::path::{Path, PathBuf};
 use theseus::prelude::*;
-use theseus::profile::QuickPlayType;

 pub fn init<R: tauri::Runtime>() -> tauri::plugin::TauriPlugin<R> {
    tauri::plugin::Builder::new("profile")
@@ -251,7 +250,7 @@ pub async fn profile_get_pack_export_candidates(
 // invoke('plugin:profile|profile_run', path)
 #[tauri::command]
 pub async fn profile_run(path: &str) -> Result<ProcessMetadata> {
-    let process = profile::run(path, &QuickPlayType::None).await?;
+    let process = profile::run(path).await?;

    Ok(process)
 }
@@ -265,9 +264,7 @@ pub async fn profile_run_credentials(
    path: &str,
    credentials: Credentials,
 ) -> Result<ProcessMetadata> {
-    let process =
-        profile::run_credentials(path, &credentials, &QuickPlayType::None)
-            .await?;
+    let process = profile::run_credentials(path, &credentials).await?;

    Ok(process)
 }
@@ -350,9 +347,6 @@ pub async fn profile_edit(path: &str, edit_profile: EditProfile) -> Result<()> {
            prof.name = name;
        }
        if let Some(game_version) = edit_profile.game_version.clone() {
-            if game_version != prof.game_version {
-                prof.protocol_version = None;
-            }
            prof.game_version = game_version;
        }
        if let Some(loader) = edit_profile.loader {
--- a/apps/app/src/api/utils.rs
+++ b/apps/app/src/api/utils.rs
@@ -4,11 +4,9 @@ use theseus::{
    prelude::{CommandPayload, DirectoryInfo},
 };

-use crate::api::{Result, TheseusSerializableError};
+use crate::api::Result;
 use dashmap::DashMap;
-use std::path::{Path, PathBuf};
-use theseus::prelude::canonicalize;
-use url::Url;
+use std::path::PathBuf;

 pub fn init<R: tauri::Runtime>() -> tauri::plugin::TauriPlugin<R> {
    tauri::plugin::Builder::new("utils")
@@ -142,28 +140,3 @@ pub async fn handle_command(command: String) -> Result<()> {
    tracing::info!("handle command: {command}");
    Ok(theseus::handler::parse_and_emit_command(&command).await?)
 }
-
-// Remove when (and if) https://github.com/tauri-apps/tauri/issues/12022 is implemented
-pub(crate) fn tauri_convert_file_src(path: &Path) -> Result<Url> {
-    #[cfg(any(windows, target_os = "android"))]
-    const BASE: &str = "http://asset.localhost/";
-    #[cfg(not(any(windows, target_os = "android")))]
-    const BASE: &str = "asset://localhost/";
-
-    macro_rules! theseus_try {
-        ($test:expr) => {
-            match $test {
-                Ok(val) => val,
-                Err(e) => {
-                    return Err(TheseusSerializableError::Theseus(e.into()))
-                }
-            }
-        };
-    }
-
-    let path = theseus_try!(canonicalize(path));
-    let path = path.to_string_lossy();
-    let encoded = urlencoding::encode(&path);
-
-    Ok(theseus_try!(Url::parse(&format!("{BASE}{encoded}"))))
-}
--- a/apps/app/src/api/worlds.rs
+++ b/apps/app/src/api/worlds.rs
@@ -1,218 +0,0 @@
-use crate::api::Result;
-use either::Either;
-use enumset::EnumSet;
-use tauri::{AppHandle, Manager, Runtime};
-use theseus::prelude::ProcessMetadata;
-use theseus::profile::{get_full_path, QuickPlayType};
-use theseus::worlds::{
-    DisplayStatus, ServerPackStatus, ServerStatus, World, WorldType,
-    WorldWithProfile,
-};
-use theseus::{profile, worlds};
-
-pub fn init<R: Runtime>() -> tauri::plugin::TauriPlugin<R> {
-    tauri::plugin::Builder::new("worlds")
-        .invoke_handler(tauri::generate_handler![
-            get_recent_worlds,
-            get_profile_worlds,
-            get_singleplayer_world,
-            set_world_display_status,
-            rename_world,
-            reset_world_icon,
-            backup_world,
-            delete_world,
-            add_server_to_profile,
-            edit_server_in_profile,
-            remove_server_from_profile,
-            get_profile_protocol_version,
-            get_server_status,
-            start_join_singleplayer_world,
-            start_join_server,
-        ])
-        .build()
-}
-
-#[tauri::command]
-pub async fn get_recent_worlds<R: Runtime>(
-    app_handle: AppHandle<R>,
-    limit: usize,
-    display_statuses: Option<EnumSet<DisplayStatus>>,
-) -> Result<Vec<WorldWithProfile>> {
-    let mut result = worlds::get_recent_worlds(
-        limit,
-        display_statuses.unwrap_or(EnumSet::all()),
-    )
-    .await?;
-    for world in result.iter_mut() {
-        adapt_world_icon(&app_handle, &mut world.world);
-    }
-    Ok(result)
-}
-
-#[tauri::command]
-pub async fn get_profile_worlds<R: Runtime>(
-    app_handle: AppHandle<R>,
-    path: &str,
-) -> Result<Vec<World>> {
-    let mut result = worlds::get_profile_worlds(path).await?;
-    for world in result.iter_mut() {
-        adapt_world_icon(&app_handle, world);
-    }
-    Ok(result)
-}
-
-#[tauri::command]
-pub async fn get_singleplayer_world<R: Runtime>(
-    app_handle: AppHandle<R>,
-    instance: &str,
-    world: &str,
-) -> Result<World> {
-    let mut world = worlds::get_singleplayer_world(instance, world).await?;
-    adapt_world_icon(&app_handle, &mut world);
-    Ok(world)
-}
-
-fn adapt_world_icon<R: Runtime>(app_handle: &AppHandle<R>, world: &mut World) {
-    if let Some(Either::Left(icon_path)) = &world.icon {
-        let icon_path = icon_path.clone();
-        if let Ok(new_url) = super::utils::tauri_convert_file_src(&icon_path) {
-            world.icon = Some(Either::Right(new_url));
-            if let Err(e) =
-                app_handle.asset_protocol_scope().allow_file(&icon_path)
-            {
-                tracing::warn!(
-                    "Failed to allow file access for icon {}: {}",
-                    icon_path.display(),
-                    e
-                );
-            }
-        } else {
-            tracing::warn!(
-                "Encountered invalid icon path for world {}: {}",
-                world.name,
-                icon_path.display()
-            );
-            world.icon = None;
-        }
-    }
-}
-
-#[tauri::command]
-pub async fn set_world_display_status(
-    instance: &str,
-    world_type: WorldType,
-    world_id: &str,
-    display_status: DisplayStatus,
-) -> Result<()> {
-    Ok(worlds::set_world_display_status(
-        instance,
-        world_type,
-        world_id,
-        display_status,
-    )
-    .await?)
-}
-
-#[tauri::command]
-pub async fn rename_world(
-    instance: &str,
-    world: &str,
-    new_name: &str,
-) -> Result<()> {
-    let instance = get_full_path(instance).await?;
-    worlds::rename_world(&instance, world, new_name).await?;
-    Ok(())
-}
-
-#[tauri::command]
-pub async fn reset_world_icon(instance: &str, world: &str) -> Result<()> {
-    let instance = get_full_path(instance).await?;
-    worlds::reset_world_icon(&instance, world).await?;
-    Ok(())
-}
-
-#[tauri::command]
-pub async fn backup_world(instance: &str, world: &str) -> Result<u64> {
-    let instance = get_full_path(instance).await?;
-    Ok(worlds::backup_world(&instance, world).await?)
-}
-
-#[tauri::command]
-pub async fn delete_world(instance: &str, world: &str) -> Result<()> {
-    let instance = get_full_path(instance).await?;
-    worlds::delete_world(&instance, world).await?;
-    Ok(())
-}
-
-#[tauri::command]
-pub async fn add_server_to_profile(
-    path: &str,
-    name: String,
-    address: String,
-    pack_status: ServerPackStatus,
-) -> Result<usize> {
-    let path = get_full_path(path).await?;
-    Ok(
-        worlds::add_server_to_profile(&path, name, address, pack_status)
-            .await?,
-    )
-}
-
-#[tauri::command]
-pub async fn edit_server_in_profile(
-    path: &str,
-    index: usize,
-    name: String,
-    address: String,
-    pack_status: ServerPackStatus,
-) -> Result<()> {
-    let path = get_full_path(path).await?;
-    worlds::edit_server_in_profile(&path, index, name, address, pack_status)
-        .await?;
-    Ok(())
-}
-
-#[tauri::command]
-pub async fn remove_server_from_profile(
-    path: &str,
-    index: usize,
-) -> Result<()> {
-    let path = get_full_path(path).await?;
-    worlds::remove_server_from_profile(&path, index).await?;
-    Ok(())
-}
-
-#[tauri::command]
-pub async fn get_profile_protocol_version(path: &str) -> Result<Option<i32>> {
-    Ok(worlds::get_profile_protocol_version(path).await?)
-}
-
-#[tauri::command]
-pub async fn get_server_status(
-    address: &str,
-    protocol_version: Option<i32>,
-) -> Result<ServerStatus> {
-    Ok(worlds::get_server_status(address, protocol_version).await?)
-}
-
-#[tauri::command]
-pub async fn start_join_singleplayer_world(
-    path: &str,
-    world: String,
-) -> Result<ProcessMetadata> {
-    let process =
-        profile::run(path, &QuickPlayType::Singleplayer(world)).await?;
-
-    Ok(process)
-}
-
-#[tauri::command]
-pub async fn start_join_server(
-    path: &str,
-    address: &str,
-) -> Result<ProcessMetadata> {
-    let process =
-        profile::run(path, &QuickPlayType::Server(address.to_owned())).await?;
-
-    Ok(process)
-}
--- a/apps/app/src/main.rs
+++ b/apps/app/src/main.rs
@@ -117,7 +117,8 @@ fn show_window(app: tauri::AppHandle) {
            .set_type(MessageType::Error)
            .set_title("Initialization error")
            .set_text(&format!(
-                "Cannot display application window due to an error:\n{e}"
+                "Cannot display application window due to an error:\n{}",
+                e
            ))
            .show_alert()
            .unwrap();
@@ -137,7 +138,8 @@ fn is_dev() -> bool {
 async fn toggle_decorations(b: bool, window: tauri::Window) -> api::Result<()> {
    window.set_decorations(b).map_err(|e| {
        theseus::Error::from(theseus::ErrorKind::OtherError(format!(
-            "Failed to toggle decorations: {e}"
+            "Failed to toggle decorations: {}",
+            e
        )))
    })?;
    Ok(())
@@ -266,7 +268,6 @@ fn main() {
        .plugin(api::cache::init())
        .plugin(api::ads::init())
        .plugin(api::friends::init())
-        .plugin(api::worlds::init())
        .invoke_handler(tauri::generate_handler![
            initialize_state,
            is_dev,
@@ -318,7 +319,7 @@ fn main() {
            #[cfg(target_os = "windows")]
            {
                // tauri doesn't expose runtime errors, so matching a string representation seems like the only solution
-                if format!("{e:?}").contains(
+                if format!("{:?}", e).contains(
                    "Runtime(CreateWebview(WebView2Error(WindowsError",
                ) {
                    MessageDialog::new()
@@ -336,7 +337,8 @@ fn main() {
                .set_type(MessageType::Error)
                .set_title("Initialization error")
                .set_text(&format!(
-                    "Cannot initialize application due to an error:\n{e:?}"
+                    "Cannot initialize application due to an error:\n{:?}",
+                    e
                ))
                .show_alert()
                .unwrap();
--- a/apps/app/tauri.conf.json
+++ b/apps/app/tauri.conf.json
@@ -44,7 +44,7 @@
    ]
  },
  "productName": "Modrinth App",
-  "version": "0.9.5",
+  "version": "0.9.3",
  "mainBinaryName": "Modrinth App",
  "identifier": "ModrinthApp",
  "plugins": {
@@ -76,14 +76,14 @@
    ],
    "security": {
      "assetProtocol": {
-        "scope": ["$APPDATA/caches/icons/*", "$APPCONFIG/caches/icons/*", "$CONFIG/caches/icons/*", "$APPDATA/profiles/*/saves/*/icon.png", "$APPCONFIG/profiles/*/saves/*/icon.png", "$CONFIG/profiles/*/saves/*/icon.png"],
+        "scope": ["$APPDATA/caches/icons/*", "$APPCONFIG/caches/icons/*", "$CONFIG/caches/icons/*"],
        "enable": true
      },
      "capabilities": ["ads", "core", "plugins"],
      "csp": {
        "default-src": "'self' customprotocol: asset:",
        "connect-src": "ipc: http://ipc.localhost https://modrinth.com https://*.modrinth.com https://*.posthog.com https://*.sentry.io https://api.mclo.gs",
-        "font-src": ["https://cdn-raw.modrinth.com/fonts/"],
+        "font-src": ["https://cdn-raw.modrinth.com/fonts/inter/"],
        "img-src": "https: 'unsafe-inline' 'self' asset: http://asset.localhost blob: data:",
        "style-src": "'unsafe-inline' 'self'",
        "script-src": "https://*.posthog.com 'self'",
--- a/apps/daedalus_client/src/forge.rs
+++ b/apps/daedalus_client/src/forge.rs
@@ -57,7 +57,7 @@ pub async fn fetch_forge(

        ForgeVersion {
            format_version,
-            installer_url: format!("https://maven.minecraftforge.net/net/minecraftforge/forge/{loader_version}/forge-{loader_version}-installer.jar"),
+            installer_url: format!("https://maven.minecraftforge.net/net/minecraftforge/forge/{0}/forge-{0}-installer.jar", loader_version),
            raw: loader_version,
            loader_version: version_split,
            game_version: game_version.clone(),
@@ -137,7 +137,7 @@ pub async fn fetch_neo(

        Ok(ForgeVersion {
            format_version: 2,
-            installer_url: format!("https://maven.neoforged.net/net/neoforged/forge/{loader_version}/forge-{loader_version}-installer.jar"),
+            installer_url: format!("https://maven.neoforged.net/net/neoforged/forge/{0}/forge-{0}-installer.jar", loader_version),
            raw: loader_version,
            loader_version: version_split,
            game_version: "1.20.1".to_string(), // All NeoForge Forge versions are for 1.20.1
@@ -163,7 +163,7 @@ pub async fn fetch_neo(

        Ok(ForgeVersion {
            format_version: 2,
-            installer_url: format!("https://maven.neoforged.net/net/neoforged/neoforge/{loader_version}/neoforge-{loader_version}-installer.jar"),
+            installer_url: format!("https://maven.neoforged.net/net/neoforged/neoforge/{0}/neoforge-{0}-installer.jar", loader_version),
            loader_version: loader_version.clone(),
            raw: loader_version,
            game_version,
@@ -502,7 +502,7 @@ async fn fetch(
                            )?;

                            artifact.url =
-                                format_url(&format!("maven/{artifact_path}"));
+                                format_url(&format!("maven/{}", artifact_path));

                            return Ok(lib);
                        }
--- a/apps/frontend/src/assets/styles/components.scss
+++ b/apps/frontend/src/assets/styles/components.scss
@@ -930,7 +930,7 @@ button {
    color: var(--color-text);
    padding: 0.5rem 0 0.5rem 1rem;
    font-weight: var(--font-weight-medium);
-    min-height: 36px;
+    min-height: 40px;
    box-sizing: border-box;
    width: fit-content;
    align-items: center;
--- a/apps/frontend/src/assets/styles/global.scss
+++ b/apps/frontend/src/assets/styles/global.scss
@@ -451,7 +451,7 @@ textarea {
    var(--shadow-inset-sm),
    0 0 0 0 transparent;
  transition: box-shadow 0.1s ease-in-out;
-  min-height: 36px;
+  min-height: 40px;

  &:focus,
  &:focus-visible {
@@ -520,7 +520,8 @@ input {
    opacity 0.5s ease-in-out,
    filter 0.2s ease-in-out,
    transform 0.05s ease-in-out,
-    outline-width 0.2s ease-in-out;
+    outline-width 0.2s ease-in-out,
+    background-color 0.2s ease-in-out;
 }

 .button-transparent {
--- a/apps/frontend/src/components/ui/Badge.vue
+++ b/apps/frontend/src/components/ui/Badge.vue
@@ -1,7 +1,7 @@
 <template>
  <span
    :class="
-      'badge flex items-center gap-1 font-semibold text-secondary ' + color + ' type--' + type
+      'badges flex items-center gap-1 font-semibold text-secondary ' + color + ' type--' + type
    "
  >
    <template v-if="color"> <span class="circle" /> {{ capitalizeString(type) }}</template>
--- a/apps/frontend/src/components/ui/charts/ChartDisplay.vue
+++ b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
@@ -86,8 +86,8 @@
                <UpdatedIcon />
              </Button>
              <DropdownSelect
-                v-model="selectedRange"
                class="range-dropdown"
+                v-model="selectedRange"
                :options="ranges"
                name="Time range"
                :display-name="
@@ -197,11 +197,11 @@
              >
                <div class="country-flag-container">
                  <template v-if="name.toLowerCase() === 'xx' || !name">
-                    <div
-                      class="country-flag flex select-none items-center justify-center bg-bg-raised font-extrabold text-secondary"
-                    >
-                      ?
-                    </div>
+                    <img
+                      src="https://cdn.modrinth.com/placeholder-banner.svg"
+                      alt="Placeholder flag"
+                      class="country-flag"
+                    />
                  </template>
                  <template v-else>
                    <img
@@ -213,7 +213,7 @@
                </div>
                <div class="country-text">
                  <strong class="country-name"
-                    ><template v-if="name.toLowerCase() === 'xx' || !name">Other</template>
+                    ><template v-if="name.toLowerCase() === 'xx' || !name">Hidden</template>
                    <template v-else>{{ countryCodeToName(name) }}</template>
                  </strong>
                  <span class="data-point">{{ formatNumber(count) }}</span>
--- a/apps/frontend/src/components/ui/servers/MOTDEditor.vue
+++ 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>
--- a/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
+++ b/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
@@ -53,7 +53,7 @@
        </div>

        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
-          <div class="text-lg font-bold text-contrast">Minecraft version</div>
+          <div class="text-sm font-bold text-contrast">Minecraft version</div>
          <UiServersTeleportDropdownMenu
            v-model="selectedMCVersion"
            name="mcVersion"
@@ -61,20 +61,6 @@
            class="w-full max-w-[100%]"
            placeholder="Select Minecraft version..."
          />
-          <div class="mt-2 flex items-center justify-between gap-2">
-            <label for="toggle-snapshots" class="font-semibold"> Show snapshot versions </label>
-            <div
-              v-tooltip="
-                isSnapshotSelected ? 'A snapshot version is currently selected.' : undefined
-              "
-            >
-              <Toggle
-                id="toggle-snapshots"
-                v-model="showSnapshots"
-                :disabled="isSnapshotSelected"
-              />
-            </div>
-          </div>
        </div>

        <div
@@ -88,7 +74,7 @@
          }"
        >
          <div class="flex flex-col gap-2">
-            <div class="text-lg font-bold text-contrast">{{ selectedLoader }} version</div>
+            <div class="text-sm font-bold text-contrast">{{ selectedLoader }} version</div>

            <template v-if="!selectedMCVersion">
              <div
@@ -191,9 +177,8 @@
 </template>

 <script setup lang="ts">
-import { BackupWarning, ButtonStyled, NewModal, Toggle } from "@modrinth/ui";
-import { DropdownIcon, RightArrowIcon, ServerIcon, XIcon } from "@modrinth/assets";
-import { $fetch } from "ofetch";
+import { BackupWarning, ButtonStyled, NewModal } from "@modrinth/ui";
+import { RightArrowIcon, XIcon, ServerIcon, DropdownIcon } from "@modrinth/assets";
 import type { Server } from "~/composables/pyroServers";
 import type { Loaders } from "~/types/servers";
 import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";
@@ -229,7 +214,6 @@ const hardReset = ref(false);
 const isLoading = ref(false);
 const loadingServerCheck = ref(false);
 const serverCheckError = ref("");
-const showSnapshots = ref(false);

 const selectedLoader = ref<Loaders>("Vanilla");
 const selectedMCVersion = ref("");
@@ -242,22 +226,6 @@ const cachedVersions = ref<VersionCache>({});

 const versionStrings = ["forge", "fabric", "quilt", "neo"] as const;

-const isSnapshotSelected = computed(() => {
-  if (selectedMCVersion.value) {
-    const selected = tags.value.gameVersions.find((x) => x.version === selectedMCVersion.value);
-    if (selected?.version_type !== "release") {
-      return true;
-    }
-  }
-  return false;
-});
-
-const getLoaderVersions = async (loader: string) => {
-  return await $fetch(
-    `https://launcher-meta.modrinth.com/${loader?.toLowerCase()}/v0/manifest.json`,
-  );
-};
-
 const fetchLoaderVersions = async () => {
  const versions = await Promise.all(
    versionStrings.map(async (loader) => {
@@ -266,7 +234,7 @@ const fetchLoaderVersions = async () => {
          throw new Error("Failed to fetch loader versions");
        }
        try {
-          const res = await getLoaderVersions(loader);
+          const res = await $fetch(`/loader-versions?loader=${loader}`);
          return { [loader]: (res as any).gameVersions };
          // eslint-disable-next-line @typescript-eslint/no-unused-vars
        } catch (_) {
@@ -309,11 +277,11 @@ const fetchPurpurVersions = async (mcVersion: string) => {
  }
 };

-const selectedLoaderVersions = computed<string[]>(() => {
+const selectedLoaderVersions = computed(() => {
  const loader = selectedLoader.value.toLowerCase();

  if (loader === "paper") {
-    return paperVersions.value[selectedMCVersion.value].map((x) => `${x}`) || [];
+    return paperVersions.value[selectedMCVersion.value] || [];
  }

  if (loader === "purpur") {
@@ -357,22 +325,13 @@ watch(selectedLoader, async () => {
 watch(
  selectedLoaderVersions,
  (newVersions) => {
-    if (
-      newVersions.length > 0 &&
-      (!selectedLoaderVersion.value || !newVersions.includes(selectedLoaderVersion.value))
-    ) {
+    if (newVersions.length > 0 && !selectedLoaderVersion.value) {
      selectedLoaderVersion.value = String(newVersions[0]);
    }
  },
  { immediate: true },
 );

-const getLoaderVersion = async (loader: string, version: string) => {
-  return await $fetch(
-    `https://launcher-meta.modrinth.com/${loader?.toLowerCase()}/v0/versions/${version}.json`,
-  );
-};
-
 const checkVersionAvailability = async (version: string) => {
  if (!version || version.trim().length < 3) return;

@@ -380,7 +339,9 @@ const checkVersionAvailability = async (version: string) => {
  loadingServerCheck.value = true;

  try {
-    const mcRes = cachedVersions.value[version] || (await getLoaderVersion("minecraft", version));
+    const mcRes =
+      cachedVersions.value[version] ||
+      (await $fetch(`/loader-versions?loader=minecraft&version=${version}`));

    cachedVersions.value[version] = mcRes;

@@ -416,15 +377,13 @@ onMounted(() => {
 });

 const tags = useTags();
-const mcVersions = computed(() =>
-  tags.value.gameVersions
-    .filter((x) =>
-      showSnapshots.value
-        ? x.version_type === "snapshot" || x.version_type === "release"
-        : x.version_type === "release",
-    )
-    .map((x) => x.version),
-);
+const mcVersions = tags.value.gameVersions
+  .filter((x) => x.version_type === "release")
+  .map((x) => x.version)
+  .filter((x) => {
+    const segment = parseInt(x.split(".")[1], 10);
+    return !isNaN(segment) && segment > 2;
+  });

 const isDangerous = computed(() => hardReset.value);
 const canInstall = computed(() => {
@@ -489,9 +448,6 @@ const handleReinstall = async () => {

 const onShow = () => {
  selectedMCVersion.value = props.server.general?.mc_version || "";
-  if (isSnapshotSelected.value) {
-    showSnapshots.value = true;
-  }
 };

 const onHide = () => {
--- a/apps/frontend/src/components/ui/servers/PoweredByPyro.vue
+++ 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>
--- a/apps/frontend/src/composables/featureFlags.ts
+++ b/apps/frontend/src/composables/featureFlags.ts
@@ -30,6 +30,8 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
  newProjectCards: false,
  projectBackground: false,
  searchBackground: false,
+  newProjectListUserPage: false,
+  projectCardBackground: false,
  advancedDebugInfo: false,
  // advancedRendering: true,
  // externalLinksNewTab: true,
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -638,7 +638,6 @@
                    shown: !isMember,
                  },
                  { id: 'copy-id', action: () => copyId() },
-                  { id: 'copy-permalink', action: () => copyPermalink() },
                ]"
                aria-label="More options"
                :dropdown-id="`${baseId}-more-options`"
@@ -660,10 +659,6 @@
                  <ClipboardCopyIcon aria-hidden="true" />
                  Copy ID
                </template>
-                <template #copy-permalink>
-                  <ClipboardCopyIcon aria-hidden="true" />
-                  Copy permanent link
-                </template>
              </OverflowMenu>
            </ButtonStyled>
          </template>
@@ -708,8 +703,8 @@
        <ProjectSidebarCreators
          :organization="organization"
          :members="members"
-          :org-link="(slug) => `/organization/${slug}`"
-          :user-link="(username) => `/user/${username}`"
+          :org-link="(org) => `/organization/${org.slug}`"
+          :user-link="(user) => `/user/${user.username}`"
          class="card flex-card experimental-styles-within"
        />
        <!-- TODO: Finish license modal and enable -->
@@ -893,7 +888,6 @@ import { reportProject } from "~/utils/report-helpers.ts";

 const data = useNuxtApp();
 const route = useNativeRoute();
-const config = useRuntimeConfig();

 const auth = await useAuth();
 const user = await useUser();
@@ -1464,10 +1458,6 @@ async function copyId() {
  await navigator.clipboard.writeText(project.value.id);
 }

-async function copyPermalink() {
-  await navigator.clipboard.writeText(`${config.public.siteUrl}/project/${project.value.id}`);
-}
-
 const collapsedChecklist = ref(false);

 const showModerationChecklist = ref(false);
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -622,7 +622,7 @@
          <CopyCode :text="version.id" />
        </div>
        <div v-if="!isEditing && flags.developerMode">
-          <h4>Maven coordinates</h4>
+          <h4>Modrinth Maven</h4>
          <div class="maven-section">
            <CopyCode :text="`maven.modrinth:${project.id}:${version.id}`" />
          </div>
@@ -1555,10 +1555,6 @@ export default defineNuxtComponent({
    display: flex;
    align-items: center;
    gap: 0.5rem;
-
-    button {
-      max-width: 100%;
-    }
  }

  .team-member {
--- a/apps/frontend/src/pages/[type]/[id]/versions.vue
+++ b/apps/frontend/src/pages/[type]/[id]/versions.vue
@@ -169,7 +169,7 @@
            </template>
            <template #copy-maven>
              <ClipboardCopyIcon aria-hidden="true" />
-              Copy Maven coordinates
+              Copy Modrinth Maven
            </template>
          </OverflowMenu>
        </ButtonStyled>
--- a/apps/frontend/src/pages/app.vue
+++ b/apps/frontend/src/pages/app.vue
@@ -19,6 +19,7 @@ import Checkbox from "~/components/ui/Checkbox.vue";
 import { homePageProjects } from "~/generated/state.json";

 const os = ref(null);
+const macValue = ref(null);
 const downloadWindows = ref(null);
 const downloadLinux = ref(null);
 const downloadSection = ref(null);
@@ -30,7 +31,8 @@ const linuxLinks = {
  thirdParty: "https://support.modrinth.com/en/articles/9298760",
 };
 const macLinks = {
-  universal: null,
+  appleSilicon: null,
+  intel: null,
 };

 let downloadLauncher;
@@ -51,7 +53,8 @@ const [{ data: launcherUpdates }] = await Promise.all([
  ),
 ]);

-macLinks.universal = launcherUpdates.value.platforms["darwin-aarch64"].install_urls[0];
+macLinks.appleSilicon = launcherUpdates.value.platforms["darwin-aarch64"].install_urls[0];
+macLinks.intel = launcherUpdates.value.platforms["darwin-x86_64"].install_urls[0];
 windowsLink.value = launcherUpdates.value.platforms["windows-x86_64"].install_urls[0];
 linuxLinks.appImage = launcherUpdates.value.platforms["linux-x86_64"].install_urls[1];
 linuxLinks.deb = launcherUpdates.value.platforms["linux-x86_64"].install_urls[0];
@@ -82,6 +85,24 @@ onMounted(() => {
  }
 });

+watch(macValue, () => {
+  if (macValue.value === "Download for Apple Silicon") {
+    const link = document.createElement("a");
+    link.href = macLinks.appleSilicon;
+    link.download = "";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  } else if (macValue.value === "Download for Intel") {
+    const link = document.createElement("a");
+    link.href = macLinks.intel;
+    link.download = "";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+});
+
 const scrollToSection = () => {
  nextTick(() => {
    window.scrollTo({
@@ -813,9 +834,13 @@ useSeoMeta({
            Mac
          </div>
          <div class="description apple">
-            <a :href="macLinks.universal" download="">
+            <a :href="macLinks.appleSilicon" download="">
              <DownloadIcon />
-              <span> Download the beta </span>
+              <span> Download for Apple Silicon </span>
+            </a>
+            <a :href="macLinks.intel" download="">
+              <DownloadIcon />
+              <span> Download for Intel </span>
            </a>
          </div>
        </div>
--- a/apps/frontend/src/pages/moderation/review.vue
+++ b/apps/frontend/src/pages/moderation/review.vue
@@ -52,7 +52,10 @@
    >
      <div class="project-title">
        <div class="mobile-row">
-          <nuxt-link :to="`/project/${project.id}`" class="iconified-stacked-link">
+          <nuxt-link
+            :to="`/${project.inferred_project_type}/${project.slug}`"
+            class="iconified-stacked-link"
+          >
            <Avatar :src="project.icon_url" size="xs" no-shadow raised />
            <span class="stacked">
              <span class="title">{{ project.name }}</span>
@@ -64,7 +67,7 @@
          by
          <nuxt-link
            v-if="project.owner"
-            :to="`/user/${project.owner.user.id}`"
+            :to="`/user/${project.owner.user.username}`"
            class="iconified-link"
          >
            <Avatar :src="project.owner.user.avatar_url" circle size="xxs" raised />
@@ -72,7 +75,7 @@
          </nuxt-link>
          <nuxt-link
            v-else-if="project.org"
-            :to="`/organization/${project.org.id}`"
+            :to="`/organization/${project.org.slug}`"
            class="iconified-link"
          >
            <Avatar :src="project.org.icon_url" circle size="xxs" raised />
@@ -85,7 +88,10 @@
        </div>
      </div>
      <div class="input-group">
-        <nuxt-link :to="`/project/${project.id}`" class="iconified-button raised-button">
+        <nuxt-link
+          :to="`/${project.inferred_project_type}/${project.slug}`"
+          class="iconified-button raised-button"
+        >
          <EyeIcon />
          View project
        </nuxt-link>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Alejandro González	61c2ce2107	Fix lint checks	2025-04-26 23:27:15 +02:00
Alejandro González	d37c634216	Merge branch 'main' into app-users-orgs-and-more	2025-04-26 23:22:34 +02:00
Prospector	cd2fcc06fe	Merge branch 'main' into app-users-orgs-and-more	2025-03-03 12:48:04 -08:00
Prospector	a731f4758e	Remove unused code	2025-02-21 14:18:56 -08:00
Prospector	0e0fce0e66	Extract intl, fix lint	2025-02-21 14:17:28 -08:00
Prospector	ea2f97ae23	Add flag for new projects list on user page, update background gradient colors	2025-02-21 14:17:28 -08:00
Prospector	2a0722d0d0	Remove old prop and fix error with card actions on pages with instance context	2025-02-21 14:17:28 -08:00
Prospector	adf213f32a	Begin collections implementation	2025-02-21 14:17:28 -08:00
Prospector	54f408dc6c	Fix user link in content page	2025-02-21 14:17:28 -08:00
Prospector	c82c4ddc5b	Add users, orgs, and new project cards to App	2025-02-21 14:17:28 -08:00