diff --git a/Cargo.lock b/Cargo.lock
index 4991e33f5..361b4d36f 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -231,19 +231,20 @@ dependencies = [
 
 [[package]]
 name = "arboard"
-version = "3.4.0"
+version = "3.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9fb4009533e8ff8f1450a5bcbc30f4242a1d34442221f72314bea1f5dc9c7f89"
+checksum = "ac57f2b058a76363e357c056e4f74f1945bf734d37b8b3ef49066c4787dde0fc"
 dependencies = [
  "clipboard-win",
- "core-graphics 0.23.1",
- "image 0.25.2",
+ "core-graphics",
+ "image 0.24.7",
  "log",
- "objc2",
- "objc2-app-kit",
- "objc2-foundation",
+ "objc",
+ "objc-foundation",
+ "objc_id",
  "parking_lot 0.12.1",
- "windows-sys 0.48.0",
+ "thiserror",
+ "winapi",
  "wl-clipboard-rs",
  "x11rb",
 ]
@@ -867,15 +868,6 @@ dependencies = [
  "generic-array",
 ]
 
-[[package]]
-name = "block2"
-version = "0.5.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2c132eebf10f5cad5289222520a4a058514204aed6d791f1cf4fe8088b82d15f"
-dependencies = [
- "objc2",
-]
-
 [[package]]
 name = "blocking"
 version = "1.6.1"
@@ -1245,11 +1237,13 @@ dependencies = [
 
 [[package]]
 name = "clipboard-win"
-version = "5.4.0"
+version = "4.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "15efe7a882b08f34e38556b14f2fb3daa98769d06c7f0c1b076dfd0d983bc892"
+checksum = "7191c27c2357d9b7ef96baac1773290d4ca63b24205b82a3fd8a0637afcf0362"
 dependencies = [
  "error-code",
+ "str-buf",
+ "winapi",
 ]
 
 [[package]]
@@ -1262,8 +1256,8 @@ dependencies = [
  "block",
  "cocoa-foundation",
  "core-foundation",
- "core-graphics 0.22.3",
- "foreign-types 0.3.2",
+ "core-graphics",
+ "foreign-types",
  "libc",
  "objc",
 ]
@@ -1278,7 +1272,7 @@ dependencies = [
  "block",
  "core-foundation",
  "core-graphics-types",
- "foreign-types 0.3.2",
+ "foreign-types",
  "libc",
  "objc",
 ]
@@ -1458,20 +1452,7 @@ dependencies = [
  "bitflags 1.3.2",
  "core-foundation",
  "core-graphics-types",
- "foreign-types 0.3.2",
- "libc",
-]
-
-[[package]]
-name = "core-graphics"
-version = "0.23.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "970a29baf4110c26fedbc7f82107d42c23f7e88e404c4577ed73fe99ff85a212"
-dependencies = [
- "bitflags 1.3.2",
- "core-foundation",
- "core-graphics-types",
- "foreign-types 0.5.0",
+ "foreign-types",
  "libc",
 ]
 
@@ -1483,7 +1464,7 @@ checksum = "3a68b68b3446082644c91ac778bf50cd4104bfb002b5a6a7c44cca5a2c70788b"
 dependencies = [
  "bitflags 1.3.2",
  "core-foundation",
- "foreign-types 0.3.2",
+ "foreign-types",
  "libc",
 ]
 
@@ -2071,15 +2052,6 @@ version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bd0c93bb4b0c6d9b77f4435b0ae98c24d17f1c45b2ff844c6151a07256ca923b"
 
-[[package]]
-name = "dlib"
-version = "0.5.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "330c60081dcc4c72131f8eb70510f1ac07223e5d4163db481a04a0befcffa412"
-dependencies = [
- "libloading 0.8.5",
-]
-
 [[package]]
 name = "dml"
 version = "0.1.0"
@@ -2199,9 +2171,9 @@ checksum = "e2153bd83ebc09db15bcbdc3e2194d901804952e3dc96967e1cd3b0c5c32d112"
 
 [[package]]
 name = "embed-resource"
-version = "2.4.3"
+version = "2.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4edcacde9351c33139a41e3c97eb2334351a81a2791bebb0b243df837128f602"
+checksum = "f4e24052d7be71f0efb50c201557f6fe7d237cfd5a64fd5bcd7fd8fe32dbbffa"
 dependencies = [
  "cc",
  "memchr",
@@ -2304,9 +2276,13 @@ dependencies = [
 
 [[package]]
 name = "error-code"
-version = "3.2.0"
+version = "2.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a0474425d51df81997e2f90a21591180b38eccf27292d755f3e30750225c175b"
+checksum = "64f18991e7bf11e7ffee451b5318b5c1a73c52d0d0ada6e5a3017c8c1ced6a21"
+dependencies = [
+ "libc",
+ "str-buf",
+]
 
 [[package]]
 name = "event-listener"
@@ -2514,28 +2490,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f6f339eb8adc052cd2ca78910fda869aefa38d22d5cb648e6485e4d3fc06f3b1"
 dependencies = [
- "foreign-types-shared 0.1.1",
-]
-
-[[package]]
-name = "foreign-types"
-version = "0.5.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d737d9aa519fb7b749cbc3b962edcf310a8dd1f4b67c91c4f83975dbdd17d965"
-dependencies = [
- "foreign-types-macros",
- "foreign-types-shared 0.3.1",
-]
-
-[[package]]
-name = "foreign-types-macros"
-version = "0.2.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1a5c6c585bc94aaf2c7b51dd4c2ba22680844aba4c687be581871a6f518c5742"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn 2.0.79",
+ "foreign-types-shared",
 ]
 
 [[package]]
@@ -2544,12 +2499,6 @@ version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "00b0228411908ca8685dba7fc2cdd70ec9990a6e753e89b6ac91a84c40fbaf4b"
 
-[[package]]
-name = "foreign-types-shared"
-version = "0.3.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "aa9a19cbb55df58761df49b23516a86d432839add4af60fc256da840f66ed35b"
-
 [[package]]
 name = "form_urlencoded"
 version = "1.2.1"
@@ -2818,12 +2767,12 @@ dependencies = [
 
 [[package]]
 name = "gethostname"
-version = "0.4.3"
+version = "0.2.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0176e0459c2e4a1fe232f984bca6890e681076abb9934f6cea7c326f3fc47818"
+checksum = "c1ebd34e35c46e00bb73e81363248d627782724609fe1b6396f553f68fe3862e"
 dependencies = [
  "libc",
- "windows-targets 0.48.5",
+ "winapi",
 ]
 
 [[package]]
@@ -3502,6 +3451,8 @@ dependencies = [
  "color_quant",
  "num-rational",
  "num-traits",
+ "png",
+ "tiff",
 ]
 
 [[package]]
@@ -4662,6 +4613,18 @@ dependencies = [
  "smallvec",
 ]
 
+[[package]]
+name = "nix"
+version = "0.24.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fa52e972a9a719cecb6864fb88568781eb706bac2cd1d4f04a648542dbf78069"
+dependencies = [
+ "bitflags 1.3.2",
+ "cfg-if",
+ "libc",
+ "memoffset 0.6.5",
+]
+
 [[package]]
 name = "nix"
 version = "0.26.4"
@@ -4672,7 +4635,6 @@ dependencies = [
  "cfg-if",
  "libc",
  "memoffset 0.7.1",
- "pin-utils",
 ]
 
 [[package]]
@@ -4898,61 +4860,6 @@ dependencies = [
  "objc_id",
 ]
 
-[[package]]
-name = "objc-sys"
-version = "0.3.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cdb91bdd390c7ce1a8607f35f3ca7151b65afc0ff5ff3b34fa350f7d7c7e4310"
-
-[[package]]
-name = "objc2"
-version = "0.5.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "46a785d4eeff09c14c487497c162e92766fbb3e4059a71840cecc03d9a50b804"
-dependencies = [
- "objc-sys",
- "objc2-encode",
-]
-
-[[package]]
-name = "objc2-app-kit"
-version = "0.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fb79768a710a9a1798848179edb186d1af7e8a8679f369e4b8d201dd2a034047"
-dependencies = [
- "block2",
- "objc2",
- "objc2-core-data",
- "objc2-foundation",
-]
-
-[[package]]
-name = "objc2-core-data"
-version = "0.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6e092bc42eaf30a08844e6a076938c60751225ec81431ab89f5d1ccd9f958d6c"
-dependencies = [
- "block2",
- "objc2",
- "objc2-foundation",
-]
-
-[[package]]
-name = "objc2-encode"
-version = "4.0.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7891e71393cd1f227313c9379a26a584ff3d7e6e7159e988851f0934c993f0f8"
-
-[[package]]
-name = "objc2-foundation"
-version = "0.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cfaefe14254871ea16c7d88968c0ff14ba554712a20d76421eec52f0a7fb8904"
-dependencies = [
- "block2",
- "objc2",
-]
-
 [[package]]
 name = "objc_exception"
 version = "0.1.2"
@@ -5016,7 +4923,7 @@ checksum = "6b8419dc8cc6d866deb801274bba2e6f8f6108c1bb7fcc10ee5ab864931dbb45"
 dependencies = [
  "bitflags 2.4.0",
  "cfg-if",
- "foreign-types 0.3.2",
+ "foreign-types",
  "libc",
  "once_cell",
  "openssl-macros",
@@ -5126,12 +5033,12 @@ dependencies = [
 
 [[package]]
 name = "os_pipe"
-version = "1.2.1"
+version = "1.1.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5ffd2b0a5634335b135d5728d84c5e0fd726954b87111f7506a61c502280d982"
+checksum = "c6a252f1f8c11e84b3ab59d7a488e48e4478a93937e027076638c49536204639"
 dependencies = [
  "libc",
- "windows-sys 0.59.0",
+ "windows-sys 0.42.0",
 ]
 
 [[package]]
@@ -6120,15 +6027,6 @@ dependencies = [
  "memchr",
 ]
 
-[[package]]
-name = "quick-xml"
-version = "0.36.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "96a05e2e8efddfa51a84ca47cec303fac86c8541b686d37cac5efc0e094417bc"
-dependencies = [
- "memchr",
-]
-
 [[package]]
 name = "quinn"
 version = "0.11.3"
@@ -7681,6 +7579,12 @@ version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a2eb9349b6444b326872e140eb1cf5e7c522154d69e7a0ffb0fb81c06b37543f"
 
+[[package]]
+name = "str-buf"
+version = "1.0.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9e08d8363704e6c71fc928674353e6b7c23dcea9d82d7012c8faf2a3a025f8d0"
+
 [[package]]
 name = "string_cache"
 version = "0.8.4"
@@ -7998,7 +7902,7 @@ dependencies = [
  "cc",
  "cocoa",
  "core-foundation",
- "core-graphics 0.22.3",
+ "core-graphics",
  "crossbeam-channel",
  "dispatch",
  "gdk",
@@ -8064,9 +7968,9 @@ checksum = "61c41af27dd6d1e27b1b16b489db798443478cef1f06a660c96db617ba5de3b1"
 
 [[package]]
 name = "tauri"
-version = "1.7.2"
+version = "1.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0e33e3ba00a3b05eb6c57ef135781717d33728b48acf914bb05629e74d897d29"
+checksum = "570a20223602ad990a30a048f2fdb957ae3e38de3ca9582e04cc09d01e8ccfad"
 dependencies = [
  "anyhow",
  "bytes",
@@ -8085,7 +7989,8 @@ dependencies = [
  "http 0.2.9",
  "ignore",
  "indexmap 1.9.2",
- "nix",
+ "log",
+ "nix 0.26.4",
  "notify-rust",
  "objc",
  "once_cell",
@@ -8093,6 +7998,7 @@ dependencies = [
  "os_info",
  "os_pipe",
  "percent-encoding",
+ "plist",
  "rand 0.8.5",
  "raw-window-handle",
  "regex",
@@ -8123,9 +8029,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-build"
-version = "1.5.4"
+version = "1.5.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d5fb5a90a64241ddb7217d3210d844149070a911e87e8a107a707a1d4973f164"
+checksum = "586f3e677f940c8bb4f70c52eda05dc59b79e61543f1182de83516810bb8e35d"
 dependencies = [
  "anyhow",
  "cargo_toml",
@@ -8183,7 +8089,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-store"
 version = "0.0.0"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v1#5c249a1a1076ac78cfc0ed4c2857cf7e2540b1cc"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v1#0b59bc7096dfc7ff1b141c31457a2a0a4a5f9ad1"
 dependencies = [
  "log",
  "serde",
@@ -8280,7 +8186,7 @@ version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c58de036c4d2e20717024de2a3c4bf56c301f07b21bc8ef9b57189fce06f1f3b"
 dependencies = [
- "quick-xml 0.23.1",
+ "quick-xml",
  "strum",
  "windows 0.39.0",
 ]
@@ -9359,75 +9265,61 @@ dependencies = [
 ]
 
 [[package]]
-name = "wayland-backend"
-version = "0.3.7"
+name = "wayland-client"
+version = "0.29.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "056535ced7a150d45159d3a8dc30f91a2e2d588ca0b23f70e56033622b8016f6"
+checksum = "3f3b068c05a039c9f755f881dc50f01732214f5685e379829759088967c46715"
 dependencies = [
- "cc",
+ "bitflags 1.3.2",
  "downcast-rs",
- "rustix 0.38.31",
- "scoped-tls",
- "smallvec",
+ "libc",
+ "nix 0.24.3",
+ "wayland-commons",
+ "wayland-scanner",
  "wayland-sys",
 ]
 
 [[package]]
-name = "wayland-client"
-version = "0.31.6"
+name = "wayland-commons"
+version = "0.29.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e3f45d1222915ef1fd2057220c1d9d9624b7654443ea35c3877f7a52bd0a5a2d"
+checksum = "8691f134d584a33a6606d9d717b95c4fa20065605f798a3f350d78dced02a902"
 dependencies = [
- "bitflags 2.4.0",
- "rustix 0.38.31",
- "wayland-backend",
- "wayland-scanner",
+ "nix 0.24.3",
+ "once_cell",
+ "smallvec",
+ "wayland-sys",
 ]
 
 [[package]]
 name = "wayland-protocols"
-version = "0.31.2"
+version = "0.29.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8f81f365b8b4a97f422ac0e8737c438024b5951734506b0e1d775c73030561f4"
+checksum = "b950621f9354b322ee817a23474e479b34be96c2e909c14f7bc0100e9a970bc6"
 dependencies = [
- "bitflags 2.4.0",
- "wayland-backend",
- "wayland-client",
- "wayland-scanner",
-]
-
-[[package]]
-name = "wayland-protocols-wlr"
-version = "0.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ad1f61b76b6c2d8742e10f9ba5c3737f6530b4c243132c2a2ccc8aa96fe25cd6"
-dependencies = [
- "bitflags 2.4.0",
- "wayland-backend",
+ "bitflags 1.3.2",
  "wayland-client",
- "wayland-protocols",
+ "wayland-commons",
  "wayland-scanner",
 ]
 
 [[package]]
 name = "wayland-scanner"
-version = "0.31.5"
+version = "0.29.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "597f2001b2e5fc1121e3d5b9791d3e78f05ba6bfa4641053846248e3a13661c3"
+checksum = "8f4303d8fa22ab852f789e75a967f0a2cdc430a607751c0499bada3e451cbd53"
 dependencies = [
  "proc-macro2",
- "quick-xml 0.36.1",
  "quote",
+ "xml-rs",
 ]
 
 [[package]]
 name = "wayland-sys"
-version = "0.31.5"
+version = "0.29.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "efa8ac0d8e8ed3e3b5c9fc92c7881406a268e11555abe36493efabe649a29e09"
+checksum = "be12ce1a3c39ec7dba25594b97b42cb3195d54953ddb9d3d95a7c3902bc6e9d4"
 dependencies = [
- "dlib",
- "log",
  "pkg-config",
 ]
 
@@ -9593,6 +9485,15 @@ dependencies = [
  "winapi",
 ]
 
+[[package]]
+name = "winapi-wsapoll"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1eafc5f679c576995526e81635d0cf9695841736712b4e892f87abbe6fed3f28"
+dependencies = [
+ "winapi",
+]
+
 [[package]]
 name = "winapi-x86_64-pc-windows-gnu"
 version = "0.4.0"
@@ -10040,15 +9941,6 @@ version = "0.52.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "589f6da84c646204747d1270a2a5661ea66ed1cced2631d546fdfb155959f9ec"
 
-[[package]]
-name = "winnow"
-version = "0.4.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ae8970b36c66498d8ff1d66685dc86b91b29db0c7739899012f63a63814b4b28"
-dependencies = [
- "memchr",
-]
-
 [[package]]
 name = "winnow"
 version = "0.5.40"
@@ -10089,22 +9981,20 @@ dependencies = [
 
 [[package]]
 name = "wl-clipboard-rs"
-version = "0.8.0"
+version = "0.7.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "57af79e973eadf08627115c73847392e6b766856ab8e3844a59245354b23d2fa"
+checksum = "981a303dfbb75d659f6612d05a14b2e363c103d24f676a2d44a00d18507a1ad9"
 dependencies = [
  "derive-new",
  "libc",
  "log",
- "nix",
+ "nix 0.24.3",
  "os_pipe",
  "tempfile",
  "thiserror",
  "tree_magic_mini",
- "wayland-backend",
  "wayland-client",
  "wayland-protocols",
- "wayland-protocols-wlr",
 ]
 
 [[package]]
@@ -10116,7 +10006,7 @@ dependencies = [
  "base64 0.13.1",
  "block",
  "cocoa",
- "core-graphics 0.22.3",
+ "core-graphics",
  "crossbeam-channel",
  "dunce",
  "gdk",
@@ -10168,20 +10058,25 @@ dependencies = [
 
 [[package]]
 name = "x11rb"
-version = "0.13.1"
+version = "0.10.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5d91ffca73ee7f68ce055750bf9f6eca0780b8c85eff9bc046a3b0da41755e12"
+checksum = "592b4883219f345e712b3209c62654ebda0bb50887f330cbd018d0f654bfd507"
 dependencies = [
  "gethostname",
- "rustix 0.38.31",
+ "nix 0.24.3",
+ "winapi",
+ "winapi-wsapoll",
  "x11rb-protocol",
 ]
 
 [[package]]
 name = "x11rb-protocol"
-version = "0.13.1"
+version = "0.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ec107c4503ea0b4a98ef47356329af139c0a4f7750e621cf2973cd3385ebcb3d"
+checksum = "56b245751c0ac9db0e006dc812031482784e434630205a93c73cfefcaabeac67"
+dependencies = [
+ "nix 0.24.3",
+]
 
 [[package]]
 name = "xattr"
@@ -10216,9 +10111,9 @@ checksum = "09041cd90cf85f7f8b2df60c646f853b7f535ce68f85244eb6731cf89fa498ec"
 
 [[package]]
 name = "zbus"
-version = "3.13.1"
+version = "3.15.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6c3d77c9966c28321f1907f0b6c5a5561189d1f7311eea6d94180c6be9daab29"
+checksum = "675d170b632a6ad49804c8cf2105d7c31eddd3312555cffd4b740e08e97c25e6"
 dependencies = [
  "async-broadcast",
  "async-executor",
@@ -10229,6 +10124,7 @@ dependencies = [
  "async-recursion",
  "async-task",
  "async-trait",
+ "blocking",
  "byteorder",
  "derivative",
  "enumflags2",
@@ -10237,7 +10133,7 @@ dependencies = [
  "futures-sink",
  "futures-util",
  "hex",
- "nix",
+ "nix 0.26.4",
  "once_cell",
  "ordered-stream",
  "rand 0.8.5",
@@ -10256,16 +10152,15 @@ dependencies = [
 
 [[package]]
 name = "zbus_macros"
-version = "3.13.1"
+version = "3.15.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f6e341d12edaff644e539ccbbf7f161601294c9a84ed3d7e015da33155b435af"
+checksum = "7131497b0f887e8061b430c530240063d33bf9455fa34438f388a245da69e0a5"
 dependencies = [
  "proc-macro-crate",
  "proc-macro2",
  "quote",
  "regex",
  "syn 1.0.107",
- "winnow 0.4.1",
  "zvariant_utils",
 ]
 
diff --git a/README.md b/README.md
index be26eb485..9fb3f6f03 100644
--- a/README.md
+++ b/README.md
@@ -42,11 +42,11 @@ Stump is a free and open source comics, manga and digital book server with OPDS
 - [License 📝](#license-)
 </details>
 
-> **🚧 Disclaimer 🚧**: Stump is under active development and is an ongoing **WIP**. Anyone is welcome to try it out, but **DO NOT** expect a fully featured or bug-free experience. If you'd like to contribute and help expedite Stump's first release, please review the [developer guide](#developer-guide-).
+> **🚧 Disclaimer 🚧**: Stump is under active development and is an ongoing **WIP**. Anyone is welcome to try it out, but **DO NOT** expect a fully featured or bug-free experience. If you'd like to contribute and help expedite feature development, please review the [developer guide](#developer-guide-).
 
 ## Roadmap 🗺
 
-The following items are the major targets for Stump's first release:
+The following items are the major targets for Stump's first stable release:
 
 - 📃 Full OPDS + OPDS Page Streaming support
 - 📕 EPUB, PDF, and CBZ/CBR support
@@ -59,7 +59,7 @@ The following items are the major targets for Stump's first release:
 - 🌏 Language support _(look [here](https://github.com/stumpapp/stump/issues/106))_
 - 🌈 And more!
 
-Things you can expect to see after the first release:
+Things you can expect to see afterwards:
 
 - 🖥️ Cross-platform desktop app _(Windows, Mac, Linux)_
 - 📖 [Tachiyomi](https://github.com/stumpapp/tachiyomi-extensions) support
diff --git a/apps/expo/package.json b/apps/expo/package.json
index dea5ea476..49e16511b 100644
--- a/apps/expo/package.json
+++ b/apps/expo/package.json
@@ -28,7 +28,7 @@
 		"nativewind": "^2.0.11",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
-		"react-hook-form": "^7.50.1",
+		"react-hook-form": "^7.53.0",
 		"react-native": "0.73.4",
 		"react-native-fs": "^2.20.0",
 		"react-native-gesture-handler": "~2.14.0",
diff --git a/apps/server/src/routers/api/v1/smart_list.rs b/apps/server/src/routers/api/v1/smart_list.rs
index 8104a84bc..73afb9957 100644
--- a/apps/server/src/routers/api/v1/smart_list.rs
+++ b/apps/server/src/routers/api/v1/smart_list.rs
@@ -113,6 +113,8 @@ pub struct GetSmartListsParams {
 	#[serde(default)]
 	all: Option<bool>,
 	#[serde(default)]
+	mine: Option<bool>,
+	#[serde(default)]
 	search: Option<String>,
 }
 
@@ -141,11 +143,21 @@ async fn get_smart_lists(
 		));
 	}
 
+	let mine = params.mine.unwrap_or(false);
+	if query_all && mine {
+		return Err(APIError::BadRequest(
+			"Cannot query all and mine at the same time".to_string(),
+		));
+	}
+
 	let where_params = chain_optional_iter(
 		[],
 		[
-			(!query_all)
+			// If not querying all, and not querying mine, then we need to filter by access
+			(!query_all && !mine)
 				.then(|| smart_list_access_for_user(&user, AccessRole::Reader.value())),
+			// If querying mine, then we need to filter by the user
+			mine.then(|| smart_list::creator_id::equals(user.id.clone())),
 			params.search.map(|search| {
 				or![
 					smart_list::name::contains(search.clone()),
@@ -174,6 +186,8 @@ pub struct CreateOrUpdateSmartList {
 	pub joiner: Option<FilterJoin>,
 	#[serde(default)]
 	pub default_grouping: Option<SmartListItemGrouping>,
+	#[serde(default)]
+	pub visibility: Option<EntityVisibility>,
 }
 
 #[utoipa::path(
@@ -217,6 +231,9 @@ async fn create_smart_list(
 					input.default_grouping.map(|grouping| {
 						smart_list::default_grouping::set(grouping.to_string())
 					}),
+					input.visibility.map(|visibility| {
+						smart_list::visibility::set(visibility.to_string())
+					}),
 				],
 			),
 		)
@@ -323,6 +340,9 @@ async fn update_smart_list_by_id(
 					input.default_grouping.map(|grouping| {
 						smart_list::default_grouping::set(grouping.to_string())
 					}),
+					input.visibility.map(|visibility| {
+						smart_list::visibility::set(visibility.to_string())
+					}),
 				],
 			),
 		)
diff --git a/core/src/db/filter/smart_filter.rs b/core/src/db/filter/smart_filter.rs
index a743e6082..d239bed51 100644
--- a/core/src/db/filter/smart_filter.rs
+++ b/core/src/db/filter/smart_filter.rs
@@ -1,6 +1,10 @@
 use std::{fmt::Display, str::FromStr};
 
-use prisma_client_rust::{and, not, or};
+use prisma_client_rust::{
+	and,
+	chrono::{DateTime, FixedOffset},
+	not, or,
+};
 use serde::{Deserialize, Serialize};
 use specta::Type;
 use utoipa::ToSchema;
@@ -15,16 +19,13 @@ use smart_filter_gen::generate_smart_filter;
 // 1. Performance implications. This is mostly because the assumption for each `into_prisma` call is a single param,
 //    which means for relation filters we will have an `is` call each time. I don't yet know how this actually affects
 //    performance in real-world scenarios, but it's something to keep in mind.
-// 2. Repetition of logic. There is a lot of repetition in the `into_prisma` definitions, and I think there is a way to (maybe)
-//    consolidate them into a single macro. I'm not sure if this is possible, but it's worth looking into. This will get exponentially
-//    worse as things like sorting and sorting on relations are added... :weary:
 
 #[derive(Debug, Clone, Serialize, Deserialize, PartialEq, ToSchema, Type)]
 #[serde(untagged)]
 /// A filter for a single value, e.g. `name = "test"`
 pub enum Filter<T> {
 	/// A simple equals filter, e.g. `name = "test"`
-	Equals(T),
+	Equals { equals: T },
 	/// A simple not filter, e.g. `name != "test"`
 	Not { not: T },
 	/// A filter for a string that contains a substring, e.g. `name contains "test"`. This should
@@ -71,7 +72,7 @@ impl<T> Filter<T> {
 		WhereParam: From<prisma_client_rust::Operator<WhereParam>>,
 	{
 		match self {
-			Filter::Equals(value) => equals_fn(value),
+			Filter::Equals { equals } => equals_fn(equals),
 			Filter::Not { not } => not![equals_fn(not)],
 			Filter::Contains { contains } => contains_fn(contains),
 			Filter::Excludes { excludes } => not![contains_fn(excludes)],
@@ -93,7 +94,7 @@ impl<T> Filter<T> {
 		WhereParam: From<prisma_client_rust::Operator<WhereParam>>,
 	{
 		match self {
-			Filter::Equals(value) => equals_fn(Some(value)),
+			Filter::Equals { equals } => equals_fn(Some(equals)),
 			Filter::Not { not } => not![equals_fn(Some(not))],
 			Filter::Contains { contains } => contains_fn(contains),
 			Filter::Excludes { excludes } => not![contains_fn(excludes)],
@@ -102,22 +103,20 @@ impl<T> Filter<T> {
 			_ => unreachable!("Numeric filters should be handled elsewhere"),
 		}
 	}
-}
 
-impl Filter<i32> {
 	pub fn into_numeric_params<WhereParam>(
 		self,
-		equals_fn: fn(i32) -> WhereParam,
-		gt_fn: fn(i32) -> WhereParam,
-		gte_fn: fn(i32) -> WhereParam,
-		lt_fn: fn(i32) -> WhereParam,
-		lte_fn: fn(i32) -> WhereParam,
+		equals_fn: fn(T) -> WhereParam,
+		gt_fn: fn(T) -> WhereParam,
+		gte_fn: fn(T) -> WhereParam,
+		lt_fn: fn(T) -> WhereParam,
+		lte_fn: fn(T) -> WhereParam,
 	) -> WhereParam
 	where
 		WhereParam: From<prisma_client_rust::Operator<WhereParam>>,
 	{
 		match self {
-			Filter::Equals(value) => equals_fn(value),
+			Filter::Equals { equals } => equals_fn(equals),
 			Filter::Not { not } => not![equals_fn(not)],
 			Filter::NumericFilter(numeric_filter) => match numeric_filter {
 				NumericFilter::Gt { gt } => gt_fn(gt),
@@ -138,17 +137,17 @@ impl Filter<i32> {
 
 	pub fn into_optional_numeric_params<WhereParam>(
 		self,
-		equals_fn: fn(Option<i32>) -> WhereParam,
-		gt_fn: fn(i32) -> WhereParam,
-		gte_fn: fn(i32) -> WhereParam,
-		lt_fn: fn(i32) -> WhereParam,
-		lte_fn: fn(i32) -> WhereParam,
+		equals_fn: fn(Option<T>) -> WhereParam,
+		gt_fn: fn(T) -> WhereParam,
+		gte_fn: fn(T) -> WhereParam,
+		lt_fn: fn(T) -> WhereParam,
+		lte_fn: fn(T) -> WhereParam,
 	) -> WhereParam
 	where
 		WhereParam: From<prisma_client_rust::Operator<WhereParam>>,
 	{
 		match self {
-			Filter::Equals(value) => equals_fn(Some(value)),
+			Filter::Equals { equals } => equals_fn(Some(equals)),
 			Filter::Not { not } => not![equals_fn(Some(not))],
 			Filter::NumericFilter(numeric_filter) => match numeric_filter {
 				NumericFilter::Gt { gt } => gt_fn(gt),
@@ -217,11 +216,6 @@ impl From<&str> for FilterJoin {
 	}
 }
 
-// pub struct SmartFilterOrder {
-// 	pub direction: Direction,
-// 	pub order_by:
-// }
-
 #[derive(Debug, Clone, Serialize, Deserialize, Type, ToSchema)]
 #[aliases(SmartFilterSchema = SmartFilter<MediaSmartFilter>)]
 pub struct SmartFilter<T> {
@@ -230,9 +224,6 @@ pub struct SmartFilter<T> {
 	pub joiner: FilterJoin,
 }
 
-// TODO: figure out if perhaps macros can come in with the save here. Continuing down this path
-// will be INCREDIBLY verbose..
-
 #[generate_smart_filter]
 #[derive(Debug, Clone, Serialize, Deserialize, PartialEq, Type, ToSchema)]
 #[serde(untagged)]
@@ -335,7 +326,6 @@ pub enum MediaMetadataSmartFilter {
 	Inkers { inkers: String },
 	#[is_optional]
 	Editors { editors: String },
-	// FIXME: Current implementationm makes it awkward to support numeric filters
 	#[is_optional]
 	AgeRating { age_rating: i32 },
 	#[is_optional]
@@ -352,8 +342,13 @@ pub enum MediaMetadataSmartFilter {
 #[prisma_table("media")]
 pub enum MediaSmartFilter {
 	Name { name: String },
+	Size { size: i64 },
 	Extension { extension: String },
+	CreatedAt { created_at: DateTime<FixedOffset> },
+	UpdatedAt { updated_at: DateTime<FixedOffset> },
+	Status { status: String },
 	Path { path: String },
+	Pages { pages: i32 },
 	Metadata { metadata: MediaMetadataSmartFilter },
 	Series { series: SeriesSmartFilter },
 }
@@ -437,6 +432,83 @@ mod tests {
 		);
 	}
 
+	#[test]
+	fn it_serializes_number_correctly() {
+		let filter: FilterGroup<MediaSmartFilter> = FilterGroup::And {
+			and: vec![MediaSmartFilter::Size {
+				size: Filter::NumericFilter(NumericFilter::Gte { gte: 3000 }),
+			}],
+		};
+
+		let json = serde_json::to_string(&filter).unwrap();
+
+		assert_eq!(json, r#"{"and":[{"size":{"gte":3000}}]}"#);
+	}
+
+	#[test]
+	fn it_deserializes_number_correctly() {
+		let json = r#"{"or":[{"size":{"gte":3000}}]}"#;
+
+		let filter: FilterGroup<MediaSmartFilter> = serde_json::from_str(json).unwrap();
+
+		assert_eq!(
+			filter,
+			FilterGroup::Or {
+				or: vec![MediaSmartFilter::Size {
+					size: Filter::NumericFilter(NumericFilter::Gte { gte: 3000 }),
+				}],
+			}
+		);
+	}
+
+	#[test]
+	fn it_serializes_range_correctly() {
+		let filter: FilterGroup<MediaSmartFilter> = FilterGroup::And {
+			and: vec![MediaSmartFilter::Metadata {
+				metadata: MediaMetadataSmartFilter::AgeRating {
+					age_rating: Filter::NumericFilter(NumericFilter::Range(
+						NumericRange {
+							from: 10,
+							to: 20,
+							inclusive: true,
+						},
+					)),
+				},
+			}],
+		};
+
+		let json = serde_json::to_string(&filter).unwrap();
+
+		assert_eq!(
+			json,
+			r#"{"and":[{"metadata":{"age_rating":{"from":10,"to":20,"inclusive":true}}}]}"#
+		);
+	}
+
+	#[test]
+	fn it_deserializes_range_correctly() {
+		let json = r#"{"and":[{"metadata":{"age_rating":{"from":10,"to":20,"inclusive":true}}}]}"#;
+
+		let filter: FilterGroup<MediaSmartFilter> = serde_json::from_str(json).unwrap();
+
+		assert_eq!(
+			filter,
+			FilterGroup::And {
+				and: vec![MediaSmartFilter::Metadata {
+					metadata: MediaMetadataSmartFilter::AgeRating {
+						age_rating: Filter::NumericFilter(NumericFilter::Range(
+							NumericRange {
+								from: 10,
+								to: 20,
+								inclusive: true,
+							},
+						)),
+					},
+				}],
+			}
+		);
+	}
+
 	fn default_book(name: &str) -> media::Data {
 		media::Data {
 			id: "test-id".to_string(),
diff --git a/docs/pages/faq.md b/docs/pages/faq.md
index 528d089fc..bc3e84a51 100644
--- a/docs/pages/faq.md
+++ b/docs/pages/faq.md
@@ -33,10 +33,6 @@ The hardware requirements vary and should serve **only as a guide**. Generally s
 
 **This section will be revisited once the first beta release is out.**
 
-## When will Stump be released?
-
-Stump is currently under development. The primary developer is working on it in their free time, mostly on the weekends. There aren't many active contributors, so it's hard to say when it will be release ready. Ideally the first release candidate will be ready by the end of 2024. Please consider contributing to the project if you're interested in expediting the development. You can find more information on ways to contribute in the [contributing](/contributing) guide.
-
 ## Can I try it out?
 
 I am working on setting up a public demo instance. If it is available, you will find it at [demo.stumpapp.dev](https://demo.stumpapp.dev). The login credentials are:
diff --git a/docs/pages/guides/opds.md b/docs/pages/guides/opds.md
index be9e583c4..94ab1c05c 100644
--- a/docs/pages/guides/opds.md
+++ b/docs/pages/guides/opds.md
@@ -20,17 +20,16 @@ The general structure of the URL to connect to your Stump server is:
 
 The following clients have been tested with Stump:
 
-| OS      |                                      Application                                       | Page Streaming |               Issues/Notes                                                       |
-| ------- | :------------------------------------------------------------------------------------: | -------------: | -------------------------:                                                       |
-| iOS     |                             [Panels](https://panels.app/)                              |             ✅ |                         ✨                                                      |
+| OS      |                                      Application                                       | Page Streaming |                                                                     Issues/Notes |
+| ------- | :------------------------------------------------------------------------------------: | -------------: | -------------------------------------------------------------------------------: |
+| iOS     |                             [Panels](https://panels.app/)                              |             ✅ |                                                                               ✨ |
 | iOS     |     [Chunky Reader](https://apps.apple.com/us/app/chunky-comic-reader/id663567628)     |             ✅ |                                                                                  |
-| Android | [Moon+ Reader](https://play.google.com/store/apps/details?id=com.flyersoft.moonreader) |             ❌ | Users report OK experience                                                       |
-| Android |                         [KyBook 3](http://kybook-reader.com/)                          |             ❌ | No testing at this time                                                          |
-| Android | [Librera](https://play.google.com/store/apps/details?id=com.foobnix.pdf.reader)        |             ❌ | Supports covers, categories, and downloads, but shows file names not book titles |
-| Android | [Cantook by Aldiko](https://play.google.com/store/apps/details?id=com.aldiko.android)  |             ❌ | No auth support, does not work. Use 2.0                                          |
-| Linux   |                     [Foliate](https://johnfactotum.github.io/foliate/)                 |             ❌ | Loads cover previews, file names and categories                                  |
-| Windows |                     [Thorium 3](https://thorium.edrlab.org/en/)                        |             ❌ | Loads cover previews, file names and categories                                  |
-
+| Android | [Moon+ Reader](https://play.google.com/store/apps/details?id=com.flyersoft.moonreader) |             ❌ |                                                       Users report OK experience |
+| Android |                         [KyBook 3](http://kybook-reader.com/)                          |             ❌ |                                                          No testing at this time |
+| Android |    [Librera](https://play.google.com/store/apps/details?id=com.foobnix.pdf.reader)     |             ❌ | Supports covers, categories, and downloads, but shows file names not book titles |
+| Android | [Cantook by Aldiko](https://play.google.com/store/apps/details?id=com.aldiko.android)  |             ❌ |                                          No auth support, does not work. Use 2.0 |
+| Linux   |                   [Foliate](https://johnfactotum.github.io/foliate/)                   |             ❌ |                                  Loads cover previews, file names and categories |
+| Windows |                      [Thorium 3](https://thorium.edrlab.org/en/)                       |             ❌ |                                  Loads cover previews, file names and categories |
 
 If you have any experiences, good or bad, using any of these clients or another client not listed here, please consider updating this page with your findings.
 
@@ -44,10 +43,10 @@ The general structure of the URL to connect to your Stump server is:
 
 The following clients have been tested with Stump:
 
-| OS       |                                    Application                                        | Page Streaming |                                                                                                                         Issues/Notes |
-| ---      | :-----------------------------------------------------------------------------------: | -------------: | -----------------------------------------------------------------------------------------------------------------------------------: |
-| iOS      | [Cantook by Aldiko](https://apps.apple.com/us/app/cantook-by-aldiko/id1476410111)     |             ❓ | Supports catalog traversal and media downloads. Issues with rendering media covers, however this appears to be an issue on their end |
-| Android  | [Cantook by Aldiko](https://play.google.com/store/apps/details?id=com.aldiko.android) |             ❓ | Supports catalog traversal and media downloads. Issues with rendering media covers, however this appears to be an issue on their end |
-| Android  | [Librera](https://play.google.com/store/apps/details?id=com.foobnix.pdf.reader)       |             ❓ | Does not work. Likely lacking OPDS 2.0 support                                                                                       |
-| Linux    |                     [Foliate](https://johnfactotum.github.io/foliate/)                |            ❌ | Loads cover previews, book names, publisher and categories                                                                           |
-| Windows  |                     [Thorium 3](https://thorium.edrlab.org/en/)                       |            ❌ | Loads covers and their previews, book names, publisher and categories                                                                |
\ No newline at end of file
+| OS      |                                      Application                                      | Page Streaming |                                                                                                                         Issues/Notes |
+| ------- | :-----------------------------------------------------------------------------------: | -------------: | -----------------------------------------------------------------------------------------------------------------------------------: |
+| iOS     |   [Cantook by Aldiko](https://apps.apple.com/us/app/cantook-by-aldiko/id1476410111)   |             ❓ | Supports catalog traversal and media downloads. Issues with rendering media covers, however this appears to be an issue on their end |
+| Android | [Cantook by Aldiko](https://play.google.com/store/apps/details?id=com.aldiko.android) |             ❓ | Supports catalog traversal and media downloads. Issues with rendering media covers, however this appears to be an issue on their end |
+| Android |    [Librera](https://play.google.com/store/apps/details?id=com.foobnix.pdf.reader)    |             ❓ |                                                                                       Does not work. Likely lacking OPDS 2.0 support |
+| Linux   |                  [Foliate](https://johnfactotum.github.io/foliate/)                   |             ❌ |                                                                           Loads cover previews, book names, publisher and categories |
+| Windows |                      [Thorium 3](https://thorium.edrlab.org/en/)                      |             ❌ |                                                                Loads covers and their previews, book names, publisher and categories |
diff --git a/docs/pages/guides/smart-list.mdx b/docs/pages/guides/smart-list.mdx
index 50ac0263e..c9838c104 100644
--- a/docs/pages/guides/smart-list.mdx
+++ b/docs/pages/guides/smart-list.mdx
@@ -2,29 +2,27 @@ import { Callout } from 'nextra-theme-docs'
 
 # Smart lists
 
-<Callout emoji="🚧">
-	At the time of writing, smart lists are extremely experimental. There is no UI for creating or
-	editing them, and the internal structures are subject to change
-</Callout>
+A smart list is a dynamic list of books generated from a set of configured filters. They are powerful in that they allow you to quickly curate and organize a collection of books based on a set of criteria without having to manually manage the list.
 
-Smart lists are stored combinations of filters that can be applied to your database, generating pseudo-lists on the fly. They are a powerful tool for organizing your books in a way that makes sense to you.
+## Filters
 
-## Components
+The core of a smart list, used for determining which books are to be included in the resulting list.
 
-There are three main components to a smart list:
+A smart lists filter configuration is made up of two parts:
 
-- **Name**: The name of the smart list, which is used to identify it in the UI and must be unique _per_ user
-- **Description**: An optional description of the smart list
-- **Filters**: The magic sauce that makes smart lists work
+- **Groups**: Sub-lists of filters that are combined together using a top-level joiner (see below)
+- **Top-level joiner**: The method used to join groups together, i.e. `AND` or `OR` (all groups must match vs at least one group must match)
 
-### Filters
+A group itself has two parts:
 
-Filters are the core of a smart list. They are used to determine which books are to be included in the generated smart list.
+- **Joiner**: The method used to join filters together within the group, i.e. `AND`, `OR`, `NOT` (all filters must match, at least one filter must match, or no filters must match)
+- **Conditions**: A list of filters to apply to the books
 
-Filters are made up of two parts:
+A condition in a filter group has the following structure:
 
-- **Filter groups**: Groups of filters that are combined together using a joiner
-- **Joiner**: The combination method used to join groups together, i.e. `AND` or `OR`
+- **Attribute**: The attribute of the book to filter on. This also allows selecting attributes of related entities, such as a book's metadata, series, or library. I won't enumerate them all, but you can filter on most attributes. Any missing attributes can be requested!
+- **Operator**: The operator to use when comparing the attribute to the value. I won't enumerate them all, but you have options for string and list matching, number comparison, and range operators
+- **Value**: The actual value to compare the attribute to. The UI presents this dynamically, based on the attribute and operator selected
 
 ### Grouping
 
@@ -34,13 +32,13 @@ Not to be confused with the filter groups, grouping is a way of grouping matched
 2. `BY_LIBRARY`: Groups books together by their library
 3. `BY_BOOKS`: Does not group books together. The name is perhaps confusing, but you can think of it as "no grouping"
 
-## Access
+In the future, more grouping options may be considered
 
-The smart list feature, itself, is gated behind the `smartlist:read` user permission. This means that only users with this permission will be able to interact with smart lists.
+## Feature Access
 
-### Sharing
+The smart list feature, itself, is gated behind the `smartlist:read` user permission. This means that only users with this permission will be able to interact with smart lists.
 
-<Callout emoji="🚧">Access sharing is not yet fully implemented</Callout>
+## List-level Access
 
 Smart lists can be shared with other users, and has 3 visibility options:
 
@@ -48,21 +46,16 @@ Smart lists can be shared with other users, and has 3 visibility options:
 - **Public**: Anyone can see the smart list
 - **Shared**: Only users that the smart list has been shared with can see it
 
-## Views
-
-While interacting with a smart list on the UI, you can manipulate the view to your liking. This includes:
-
-- Sorting states for the table
-- Column visibility, i.e. which columns are visible or hidden
-- Column order, i.e. the order in which columns are displayed
-
-By default, any changes you make won't be persisted. However, the UI will detect and allow you to save any adjustments as a view. This view will then be available to you in the future, along with any other views you create. If you have a view selected, the changes will provide you with the additional option of updating the view.
+<Callout emoji="🚧">
+	The `shared` visibility option is not yet fully implemented. It functions as `private` for now,
+	but will be updated in the future
+</Callout>
 
 ## Creating a Smart List
 
-Currently, the only way to create a smart list is to use the Stump API directly. You can use the swagger UI to do this, or use a tool like Postman.
+There is a query builder directly in the UI which allows you to declaratively create a smart list. This is the recommended way to create a smart list, as it is the most user-friendly. The UI is aware of the type-constraints per attribute and will guide you through the process.
 
-An example `POST` request might look like this:
+You can also use the API directly, an example `POST` request might look like this:
 
 ```json
 {
@@ -105,3 +98,13 @@ An example `POST` request might look like this:
 	"default_grouping": "BY_SERIES"
 }
 ```
+
+## Views
+
+While interacting with a smart list on the UI, you can manipulate the view to your liking. This includes:
+
+- Sorting states for the table
+- Column visibility, i.e. which columns are visible or hidden
+- Column order, i.e. the order in which columns are displayed
+
+By default, any changes you make won't be persisted. However, the UI will detect and allow you to save any adjustments as a view. This view will then be available to you in the future, along with any other views you create. If you have a view selected, the changes will provide you with the additional option of updating the view.
diff --git a/packages/browser/package.json b/packages/browser/package.json
index 5dbd554e3..3a2946373 100644
--- a/packages/browser/package.json
+++ b/packages/browser/package.json
@@ -18,16 +18,16 @@
 	"dependencies": {
 		"@dnd-kit/core": "^6.1.0",
 		"@dnd-kit/sortable": "^8.0.0",
-		"@hookform/resolvers": "^3.3.4",
-		"@stump/sdk": "*",
+		"@hookform/resolvers": "^3.9.0",
 		"@stump/client": "*",
 		"@stump/components": "*",
 		"@stump/i18n": "*",
+		"@stump/sdk": "*",
 		"@stump/types": "*",
 		"@tanstack/react-query": "^4.36.1",
 		"@tanstack/react-query-devtools": "^4.36.1",
 		"@tanstack/react-table": "^8.16.0",
-		"@tanstack/react-virtual": "3.0.0-beta.18",
+		"@tanstack/react-virtual": "3.10.8",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.0",
 		"dayjs": "^1.11.10",
@@ -36,6 +36,7 @@
 		"i18next": "^23.11.2",
 		"immer": "^10.0.4",
 		"is-valid-glob": "^1.0.0",
+		"lodash": "^4.17.21",
 		"lodash.groupby": "^4.6.0",
 		"lodash.isequal": "^4.5.0",
 		"lodash.sortby": "^4.7.0",
@@ -52,7 +53,7 @@
 		"react-dropzone": "^14.2.3",
 		"react-error-boundary": "^4.0.13",
 		"react-helmet": "^6.1.0",
-		"react-hook-form": "=7.47.0",
+		"react-hook-form": "^7.53.0",
 		"react-hot-toast": "^2.4.1",
 		"react-hotkeys-hook": "^4.5.0",
 		"react-i18next": "^14.1.0",
@@ -68,7 +69,7 @@
 		"rooks": "^7.14.1",
 		"ts-pattern": "^5.1.1",
 		"use-count-up": "^3.0.1",
-		"zod": "^3.22.4",
+		"zod": "^3.23.8",
 		"zustand": "^4.5.2"
 	},
 	"devDependencies": {
diff --git a/packages/browser/src/components/library/createOrUpdate/index.ts b/packages/browser/src/components/library/createOrUpdate/index.ts
index 047e3a852..f9ce6e529 100644
--- a/packages/browser/src/components/library/createOrUpdate/index.ts
+++ b/packages/browser/src/components/library/createOrUpdate/index.ts
@@ -1,3 +1,2 @@
-export { default as CreateLibraryForm } from '../../../scenes/createLibrary/CreateLibraryForm'
 export * from './schema'
 export * from './sections'
diff --git a/packages/browser/src/components/navigation/sidebar/sections/smartList/SmartListSideBarSection.tsx b/packages/browser/src/components/navigation/sidebar/sections/smartList/SmartListSideBarSection.tsx
index cf7eb1da4..5083bae5c 100644
--- a/packages/browser/src/components/navigation/sidebar/sections/smartList/SmartListSideBarSection.tsx
+++ b/packages/browser/src/components/navigation/sidebar/sections/smartList/SmartListSideBarSection.tsx
@@ -1,4 +1,4 @@
-import { useSmartListsQuery } from '@stump/client'
+import { usePrefetchSmartList, useSmartListsQuery } from '@stump/client'
 import { Accordion, Text } from '@stump/components'
 import { useLocaleContext } from '@stump/i18n'
 import { useLocation } from 'react-router'
@@ -18,6 +18,7 @@ export default function SmartListSideBarSection({
 
 	const { t } = useLocaleContext()
 	const { lists } = useSmartListsQuery()
+	const { prefetch } = usePrefetchSmartList()
 
 	const isCurrentList = (id: string) => location.pathname.startsWith(paths.smartList(id))
 
@@ -37,6 +38,7 @@ export default function SmartListSideBarSection({
 					to={paths.smartList(id)}
 					isActive={isCurrentList(id)}
 					className="pl-2 pr-0"
+					onMouseEnter={() => prefetch({ id })}
 				>
 					{name}
 				</SideBarButtonLink>
diff --git a/packages/browser/src/components/smartList/createOrUpdate/__tests__/schema.test.ts b/packages/browser/src/components/smartList/createOrUpdate/__tests__/schema.test.ts
new file mode 100644
index 000000000..9f76db4d4
--- /dev/null
+++ b/packages/browser/src/components/smartList/createOrUpdate/__tests__/schema.test.ts
@@ -0,0 +1,677 @@
+import { Filter, MediaSmartFilter, NumericFilter } from '@stump/types'
+
+import {
+	intoAPI,
+	intoAPIFilter,
+	intoAPIGroup,
+	intoForm,
+	intoFormFilter,
+	intoFormGroup,
+} from '../schema'
+
+const stringFilters = [
+	{
+		any: ['foo', 'shmoo'],
+	},
+	{
+		not: 'bar',
+	},
+	{
+		contains: 'f',
+	},
+	{
+		excludes: 'z',
+	},
+	{
+		none: ['baz', 'qux'],
+	},
+] as Filter<string>[]
+const numericFilters = [
+	{
+		eq: 42,
+	},
+	{
+		gt: 42,
+	},
+	{
+		gte: 42,
+	},
+	{
+		lt: 42,
+	},
+	{
+		lte: 42,
+	},
+	{
+		from: 42,
+		inclusive: true,
+		to: 69,
+	},
+] as NumericFilter<number>[]
+
+describe('schema', () => {
+	describe('intoFormFilter', () => {
+		it('should convert basic smart filter into form filter', () => {
+			for (const filter of stringFilters) {
+				expect(
+					intoFormFilter({
+						name: filter,
+					} satisfies MediaSmartFilter),
+				).toEqual({
+					field: 'name',
+					operation: Object.keys(filter)[0],
+					source: 'book',
+					value: Object.values(filter)[0],
+				})
+			}
+
+			for (const filter of numericFilters) {
+				const operation = 'from' in filter ? 'range' : Object.keys(filter)[0]
+				const value = 'from' in filter ? filter : Object.values(filter)[0]
+				expect(intoFormFilter({ created_at: filter } as unknown as MediaSmartFilter)).toEqual({
+					field: 'created_at',
+					operation,
+					source: 'book',
+					value,
+				})
+			}
+		})
+
+		it('should convert smart filter with metadata into form filter', () => {
+			for (const filter of stringFilters) {
+				expect(intoFormFilter({ metadata: { genre: filter } } satisfies MediaSmartFilter)).toEqual({
+					field: 'genre',
+					operation: Object.keys(filter)[0],
+					source: 'book_meta',
+					value: Object.values(filter)[0],
+				})
+			}
+
+			for (const filter of numericFilters) {
+				const operation = 'from' in filter ? 'range' : Object.keys(filter)[0]
+				const value = 'from' in filter ? filter : Object.values(filter)[0]
+				expect(
+					intoFormFilter({ metadata: { age_rating: filter } } satisfies MediaSmartFilter),
+				).toEqual({
+					field: 'age_rating',
+					operation,
+					source: 'book_meta',
+					value,
+				})
+			}
+		})
+
+		it('should convert smart filter with series into form filter', () => {
+			for (const filter of stringFilters) {
+				expect(
+					intoFormFilter({
+						series: {
+							name: filter,
+						},
+					} satisfies MediaSmartFilter),
+				).toEqual({
+					field: 'name',
+					operation: Object.keys(filter)[0],
+					source: 'series',
+					value: Object.values(filter)[0],
+				})
+			}
+
+			// TODO: support series metadata
+			// TODO: add numeric filters for series?
+		})
+
+		it('should convert smart filter with library into form filter', () => {
+			for (const filter of stringFilters) {
+				expect(
+					intoFormFilter({
+						series: {
+							library: {
+								name: filter,
+							},
+						},
+					} satisfies MediaSmartFilter),
+				).toEqual({
+					field: 'name',
+					operation: Object.keys(filter)[0],
+					source: 'library',
+					value: Object.values(filter)[0],
+				})
+			}
+		})
+	})
+
+	describe('intoAPIFilter', () => {
+		it('should convert basic smart filter form into API filter', () => {
+			// String filter
+			expect(
+				intoAPIFilter({
+					field: 'name',
+					operation: 'any',
+					source: 'book',
+					value: ['foo', 'shmoo'],
+				}),
+			).toEqual({
+				name: {
+					any: ['foo', 'shmoo'],
+				},
+			})
+
+			// Numeric filter (basic)
+			expect(
+				intoAPIFilter({
+					field: 'created_at',
+					operation: 'gte',
+					source: 'book',
+					value: 42,
+				}),
+			).toEqual({
+				created_at: {
+					gte: 42,
+				},
+			})
+
+			// Numeric filter (complex)
+			expect(
+				intoAPIFilter({
+					field: 'created_at',
+					operation: 'range',
+					source: 'book',
+					value: {
+						from: 42,
+						inclusive: true,
+						to: 69,
+					},
+				}),
+			).toEqual({
+				created_at: {
+					from: 42,
+					inclusive: true,
+					to: 69,
+				},
+			})
+		})
+
+		it('should convert smart filter form with metadata into API filter', () => {
+			// String filter
+			expect(
+				intoAPIFilter({
+					field: 'genre',
+					operation: 'any',
+					source: 'book_meta',
+					value: ['foo', 'shmoo'],
+				}),
+			).toEqual({
+				metadata: {
+					genre: {
+						any: ['foo', 'shmoo'],
+					},
+				},
+			})
+
+			// Numeric filter (basic)
+			expect(
+				intoAPIFilter({
+					field: 'age_rating',
+					operation: 'gte',
+					source: 'book_meta',
+					value: 42,
+				}),
+			).toEqual({
+				metadata: {
+					age_rating: {
+						gte: 42,
+					},
+				},
+			})
+
+			// Numeric filter (complex)
+			expect(
+				intoAPIFilter({
+					field: 'age_rating',
+					operation: 'range',
+					source: 'book_meta',
+					value: {
+						from: 42,
+						inclusive: true,
+						to: 69,
+					},
+				}),
+			).toEqual({
+				metadata: {
+					age_rating: {
+						from: 42,
+						inclusive: true,
+						to: 69,
+					},
+				},
+			})
+		})
+
+		it('should convert smart filter form with series into API filter', () => {
+			// String filter
+			expect(
+				intoAPIFilter({
+					field: 'name',
+					operation: 'any',
+					source: 'series',
+					value: ['foo', 'shmoo'],
+				}),
+			).toEqual({
+				series: {
+					name: {
+						any: ['foo', 'shmoo'],
+					},
+				},
+			})
+
+			// Numeric filter (basic)
+			expect(
+				intoAPIFilter({
+					field: 'created_at',
+					operation: 'gte',
+					source: 'series',
+					value: 42,
+				}),
+			).toEqual({
+				series: {
+					created_at: {
+						gte: 42,
+					},
+				},
+			})
+
+			// Numeric filter (complex)
+			expect(
+				intoAPIFilter({
+					field: 'created_at',
+					operation: 'range',
+					source: 'series',
+					value: {
+						from: 42,
+						inclusive: true,
+						to: 69,
+					},
+				}),
+			).toEqual({
+				series: {
+					created_at: {
+						from: 42,
+						inclusive: true,
+						to: 69,
+					},
+				},
+			})
+		})
+
+		it('should convert smart filter form with library into API filter', () => {
+			// String filter
+			expect(
+				intoAPIFilter({
+					field: 'name',
+					operation: 'any',
+					source: 'library',
+					value: ['foo', 'shmoo'],
+				}),
+			).toEqual({
+				series: {
+					library: {
+						name: {
+							any: ['foo', 'shmoo'],
+						},
+					},
+				},
+			})
+
+			// Numeric filter (basic)
+			expect(
+				intoAPIFilter({
+					field: 'created_at',
+					operation: 'gte',
+					source: 'library',
+					value: 42,
+				}),
+			).toEqual({
+				series: {
+					library: {
+						created_at: {
+							gte: 42,
+						},
+					},
+				},
+			})
+
+			// Numeric filter (complex)
+			expect(
+				intoAPIFilter({
+					field: 'created_at',
+					operation: 'range',
+					source: 'library',
+					value: {
+						from: 42,
+						inclusive: true,
+						to: 69,
+					},
+				}),
+			).toEqual({
+				series: {
+					library: {
+						created_at: {
+							from: 42,
+							inclusive: true,
+							to: 69,
+						},
+					},
+				},
+			})
+		})
+	})
+
+	describe('intoFormGroup', () => {
+		it('should convert basic smart filter into form group', () => {
+			// String filter
+			expect(
+				intoFormGroup({
+					and: [
+						{
+							name: {
+								any: ['foo', 'shmoo'],
+							},
+						} satisfies MediaSmartFilter,
+						{
+							name: {
+								none: ['bar', 'baz'],
+							},
+						} satisfies MediaSmartFilter,
+					],
+				}),
+			).toEqual({
+				filters: [
+					{
+						field: 'name',
+						operation: 'any',
+						source: 'book',
+						value: ['foo', 'shmoo'],
+					},
+					{
+						field: 'name',
+						operation: 'none',
+						source: 'book',
+						value: ['bar', 'baz'],
+					},
+				],
+				joiner: 'and',
+			})
+
+			// Numeric filter
+			expect(
+				intoFormGroup({
+					or: [
+						{
+							metadata: {
+								age_rating: {
+									from: 42,
+									inclusive: true,
+									to: 69,
+								},
+							},
+						} satisfies MediaSmartFilter,
+						{
+							created_at: {
+								lt: new Date('2021-01-01').toISOString(),
+							},
+						} satisfies MediaSmartFilter,
+					],
+				}),
+			).toEqual({
+				filters: [
+					{
+						field: 'age_rating',
+						operation: 'range',
+						source: 'book_meta',
+						value: {
+							from: 42,
+							inclusive: true,
+							to: 69,
+						},
+					},
+					{
+						field: 'created_at',
+						operation: 'lt',
+						source: 'book',
+						value: new Date('2021-01-01').toISOString(),
+					},
+				],
+				joiner: 'or',
+			})
+		})
+	})
+
+	describe('intoAPIGroup', () => {
+		it('should convert basic smart filter form group into API group', () => {
+			// String filter
+			expect(
+				intoAPIGroup({
+					filters: [
+						{
+							field: 'name',
+							operation: 'any',
+							source: 'book',
+							value: ['foo', 'shmoo'],
+						},
+						{
+							field: 'name',
+							operation: 'none',
+							source: 'book',
+							value: ['bar', 'baz'],
+						},
+					],
+					joiner: 'and',
+				}),
+			).toEqual({
+				and: [
+					{
+						name: {
+							any: ['foo', 'shmoo'],
+						},
+					},
+					{
+						name: {
+							none: ['bar', 'baz'],
+						},
+					},
+				],
+			})
+
+			// Numeric filter
+			expect(
+				intoAPIGroup({
+					filters: [
+						{
+							field: 'age_rating',
+							operation: 'range',
+							source: 'book_meta',
+							value: {
+								from: 42,
+								inclusive: true,
+								to: 69,
+							},
+						},
+						{
+							field: 'created_at',
+							operation: 'lt',
+							source: 'book',
+							value: 42,
+						},
+					],
+					joiner: 'or',
+				}),
+			).toEqual({
+				or: [
+					{
+						metadata: {
+							age_rating: {
+								from: 42,
+								inclusive: true,
+								to: 69,
+							},
+						},
+					},
+					{
+						created_at: {
+							lt: 42,
+						},
+					},
+				],
+			})
+		})
+	})
+
+	describe('intoForm', () => {
+		it('should convert a smart filter into a form', () => {
+			expect(
+				intoForm({
+					default_grouping: 'BY_SERIES',
+					description: 'baz',
+					filters: {
+						groups: [
+							{
+								and: [
+									{
+										name: {
+											any: ['foo', 'shmoo'],
+										},
+									},
+									{
+										name: {
+											none: ['bar', 'baz'],
+										},
+									},
+								],
+							},
+							{
+								or: [{ created_at: { lt: new Date('2021-01-01').toISOString() } }],
+							},
+						],
+						joiner: 'OR',
+					},
+					id: 'foo',
+					joiner: 'AND',
+					name: 'bar',
+					visibility: 'PUBLIC',
+				}),
+			).toEqual({
+				description: 'baz',
+				filters: {
+					groups: [
+						{
+							filters: [
+								{
+									field: 'name',
+									operation: 'any',
+									source: 'book',
+									value: ['foo', 'shmoo'],
+								},
+								{
+									field: 'name',
+									operation: 'none',
+									source: 'book',
+									value: ['bar', 'baz'],
+								},
+							],
+							joiner: 'and',
+						},
+						{
+							filters: [
+								{
+									field: 'created_at',
+									operation: 'lt',
+									source: 'book',
+									value: new Date('2021-01-01').toISOString(),
+								},
+							],
+							joiner: 'or',
+						},
+					],
+					joiner: 'and',
+				},
+				grouping: 'BY_SERIES',
+				name: 'bar',
+				visibility: 'PUBLIC',
+			})
+		})
+	})
+
+	describe('intoAPI', () => {
+		it('should convert a form representation into an API representation', () => {
+			expect(
+				intoAPI({
+					description: 'baz',
+					filters: {
+						groups: [
+							{
+								filters: [
+									{
+										field: 'name',
+										operation: 'any',
+										source: 'book',
+										value: ['foo', 'shmoo'],
+									},
+									{
+										field: 'name',
+										operation: 'none',
+										source: 'book',
+										value: ['bar', 'baz'],
+									},
+								],
+								joiner: 'and',
+							},
+							{
+								filters: [
+									{
+										field: 'created_at',
+										operation: 'lt',
+										source: 'book',
+										value: 42,
+									},
+								],
+								joiner: 'or',
+							},
+						],
+						joiner: 'and',
+					},
+					grouping: 'BY_SERIES',
+					name: 'bar',
+					visibility: 'PUBLIC',
+				}),
+			).toEqual({
+				default_grouping: 'BY_SERIES',
+				description: 'baz',
+				filters: {
+					groups: [
+						{
+							and: [
+								{
+									name: {
+										any: ['foo', 'shmoo'],
+									},
+								},
+								{
+									name: {
+										none: ['bar', 'baz'],
+									},
+								},
+							],
+						},
+						{
+							or: [{ created_at: { lt: 42 } }],
+						},
+					],
+					joiner: 'AND',
+				},
+				name: 'bar',
+				visibility: 'PUBLIC',
+			})
+		})
+	})
+})
diff --git a/packages/browser/src/components/smartList/createOrUpdate/index.ts b/packages/browser/src/components/smartList/createOrUpdate/index.ts
new file mode 100644
index 000000000..f9ce6e529
--- /dev/null
+++ b/packages/browser/src/components/smartList/createOrUpdate/index.ts
@@ -0,0 +1,2 @@
+export * from './schema'
+export * from './sections'
diff --git a/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/GroupBy.tsx b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/GroupBy.tsx
new file mode 100644
index 000000000..89485b8ae
--- /dev/null
+++ b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/GroupBy.tsx
@@ -0,0 +1,63 @@
+import { Label, NativeSelect, Text } from '@stump/components'
+import { useLocaleContext } from '@stump/i18n'
+import React, { useCallback } from 'react'
+import { useFormContext } from 'react-hook-form'
+
+import { isGrouping, SmartListFormSchema, SmartListGroupBy } from '../schema'
+
+type Props = {
+	disabled?: boolean
+}
+
+export default function GroupBy({ disabled }: Props) {
+	const form = useFormContext<SmartListFormSchema>()
+
+	const grouping = form.watch('grouping')
+
+	const handleChange = useCallback(
+		(e: React.ChangeEvent<HTMLSelectElement>) => {
+			if (isGrouping(e.target.value)) {
+				form.setValue('grouping', e.target.value)
+			}
+		},
+		[form],
+	)
+
+	const { t } = useLocaleContext()
+
+	return (
+		<div className="flex flex-col space-y-1.5 pb-4">
+			<Label>{t(getKey('label'))}</Label>
+			<div>
+				<NativeSelect
+					className="h-8 w-[unset] py-0"
+					disabled={disabled}
+					options={[
+						{
+							label: t(getOptionKey('BY_BOOKS', 'label')),
+							value: 'BY_BOOKS',
+						},
+						{
+							label: t(getOptionKey('BY_SERIES', 'label')),
+							value: 'BY_SERIES',
+						},
+						{
+							label: t(getOptionKey('BY_LIBRARY', 'label')),
+							value: 'BY_LIBRARY',
+						},
+					]}
+					value={grouping}
+					onChange={handleChange}
+				/>
+			</div>
+			<Text variant="muted" size="sm">
+				{t(getKey('description'))}
+			</Text>
+		</div>
+	)
+}
+
+const LOCALE_KEY = 'createOrUpdateSmartListForm.fields.queryBuilder.grouping'
+const getKey = (key: string) => `${LOCALE_KEY}.${key}`
+const getOptionKey = (grouping: SmartListGroupBy, key: string) =>
+	`${LOCALE_KEY}.options.${grouping.toLowerCase()}.${key}`
diff --git a/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/SmartListQueryBuilder.tsx b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/SmartListQueryBuilder.tsx
new file mode 100644
index 000000000..8470a2b30
--- /dev/null
+++ b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/SmartListQueryBuilder.tsx
@@ -0,0 +1,101 @@
+import { Alert, Button, cn, cx, Tabs, Text } from '@stump/components'
+import { useLocaleContext } from '@stump/i18n'
+import { useFormContext, useWatch } from 'react-hook-form'
+
+import { SmartListFormSchema } from '../schema'
+import { FilterGroup } from './filterGroup'
+import GroupBy from './GroupBy'
+
+// TODO: error states throughout form elems
+
+type Props = {
+	disabled?: boolean
+}
+
+export default function SmartListQueryBuilder({ disabled }: Props) {
+	const form = useFormContext<SmartListFormSchema>()
+
+	const [joiner] = form.watch(['filters.joiner'])
+	const {
+		filters: { groups },
+	} = useWatch({ control: form.control }) as SmartListFormSchema
+	const { t } = useLocaleContext()
+
+	return (
+		<>
+			<div className={cn('flex flex-col space-y-4', { 'cursor-not-allowed opacity-65': disabled })}>
+				<Alert level="info" icon="warning">
+					<Alert.Content>{t(getKey('uiPerformance'))}</Alert.Content>
+				</Alert>
+
+				<GroupBy disabled={disabled} />
+
+				<div className={cn('flex items-center space-x-3.5', { 'pointer-events-none': disabled })}>
+					<Tabs variant="primary" activeOnHover value={joiner}>
+						<Tabs.List className="rounded-lg">
+							<Tabs.Trigger
+								value="and"
+								asChild
+								className="w-8 min-w-[unset] rounded-lg px-1 text-xs"
+								onClick={() => form.setValue('filters.joiner', 'and')}
+							>
+								<Text className="cursor-pointer truncate">{t(getKey('rootJoiner.and.label'))}</Text>
+							</Tabs.Trigger>
+
+							<Tabs.Trigger
+								value="or"
+								asChild
+								className="w-8 min-w-[unset] rounded-lg px-1 text-xs"
+								onClick={() => form.setValue('filters.joiner', 'or')}
+							>
+								<Text className={cx('truncate', { 'cursor-pointer': true })}>
+									{t(getKey('rootJoiner.or.label'))}
+								</Text>
+							</Tabs.Trigger>
+						</Tabs.List>
+					</Tabs>
+
+					<Text variant="muted" size="sm">
+						{t(getKey(`rootJoiner.${joiner.toLowerCase()}.description`))}
+					</Text>
+				</div>
+
+				<div
+					className={cn('relative ml-4 flex flex-col space-y-8 border-l border-l-edge px-2 pt-4', {
+						'pointer-events-none': disabled,
+					})}
+				>
+					{groups.length === 0 && (
+						<div className="ml-4 flex max-w-sm items-center justify-center rounded-lg border border-dashed border-edge p-4">
+							<Text variant="muted">{t(getKey('filters.emptyState'))}</Text>
+						</div>
+					)}
+					{groups.map((group, index) => (
+						<FilterGroup key={index} idx={index} group={group} />
+					))}
+				</div>
+
+				<div>
+					<Button
+						variant="outline"
+						disabled={disabled}
+						onClick={() => {
+							form.setValue('filters.groups', [
+								...groups,
+								{
+									filters: [],
+									joiner: 'and',
+								},
+							])
+						}}
+					>
+						{t(getKey('filters.actions.addGroup'))}
+					</Button>
+				</div>
+			</div>
+		</>
+	)
+}
+
+const LOCALE_KEY = 'createOrUpdateSmartListForm.fields.queryBuilder'
+const getKey = (key: string) => `${LOCALE_KEY}.${key}`
diff --git a/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/FieldSelector.tsx b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/FieldSelector.tsx
new file mode 100644
index 000000000..7dee603a0
--- /dev/null
+++ b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/FieldSelector.tsx
@@ -0,0 +1,200 @@
+import { Button, cn, Command, Popover } from '@stump/components'
+import { useLocaleContext } from '@stump/i18n'
+import { ArrowLeft, ArrowRight, ChevronsUpDown } from 'lucide-react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useFieldArray, useFormContext } from 'react-hook-form'
+
+import { FilterSource, SmartListFormSchema } from '../../schema'
+import { useFilterGroupContext } from './context'
+
+type Props = {
+	idx: number
+}
+
+type FieldDef = SmartListFormSchema['filters']['groups'][number]['filters'][number]
+
+export function FieldSelector({ idx }: Props) {
+	const [open, setOpen] = useState(false)
+
+	const [source, setSource] = useState<FilterSource | null>(null)
+
+	const { t } = useLocaleContext()
+	const { groupIdx } = useFilterGroupContext()
+
+	const form = useFormContext<SmartListFormSchema>()
+	const { fields, update } = useFieldArray({
+		control: form.control,
+		name: `filters.groups.${groupIdx}.filters`,
+	})
+
+	const fieldDef = useMemo(() => fields?.[idx], [fields, idx])
+
+	useEffect(() => {
+		if (fieldDef) {
+			setSource(fieldDef.source)
+		}
+	}, [fieldDef, open])
+
+	const updateField = useCallback(
+		(params: Partial<FieldDef>) => {
+			const newField = { ...fieldDef, ...params }
+			update(idx, newField as FieldDef)
+		},
+		[update, fieldDef, idx],
+	)
+
+	const renderSource = () => {
+		if (!source) {
+			return (
+				<>
+					<Command.Item
+						onSelect={() => setSource('book')}
+						className="flex items-center justify-between"
+					>
+						{t(getSourceKey('book', 'label'))}
+						<ArrowRight className="ml-2 h-4 w-4 text-foreground-muted" />
+					</Command.Item>
+					<Command.Item
+						onSelect={() => setSource('book_meta')}
+						className="flex items-center justify-between"
+					>
+						{t(getSourceKey('book_meta', 'label'))}
+						<ArrowRight className="ml-2 h-4 w-4 text-foreground-muted" />
+					</Command.Item>
+					<Command.Item
+						onSelect={() => setSource('series')}
+						className="flex items-center justify-between"
+					>
+						{t(getSourceKey('series', 'label'))}
+						<ArrowRight className="ml-2 h-4 w-4 text-foreground-muted" />
+					</Command.Item>
+					<Command.Item
+						onSelect={() => setSource('library')}
+						className="flex items-center justify-between"
+					>
+						{t(getSourceKey('library', 'label'))}
+						<ArrowRight className="ml-2 h-4 w-4 text-foreground-muted" />
+					</Command.Item>
+				</>
+			)
+		} else {
+			const options = sourceOptions[source] || []
+			return (
+				<div>
+					{options.map((option) => {
+						return (
+							<Command.Item
+								key={option.value}
+								onSelect={() => {
+									updateField({ field: option.value, source })
+									setOpen(false)
+								}}
+								className={cn('transition-all duration-75', { 'text-brand': false })}
+								value={option.value}
+							>
+								{t(getAttributeKey(source, option.value))}
+							</Command.Item>
+						)
+					})}
+				</div>
+			)
+		}
+	}
+
+	const renderGroupHeader = () => {
+		if (source) {
+			return (
+				<button
+					className="flex w-full items-center space-x-2 text-sm"
+					onClick={() => setSource(null)}
+				>
+					<ArrowLeft className="ml-2 h-4 w-4 text-foreground-muted" />
+					<span className="text-foreground-muted">{t(getKey('source.back'))}</span>
+				</button>
+			)
+		} else {
+			return <span className="text-foreground-muted">{t(getKey('source.label'))}</span>
+		}
+	}
+
+	const renderSelected = () => {
+		if (fieldDef?.field) {
+			// return fieldDef.field
+			return source
+				? // ? `${t(getSourceKey(source, 'label'))}.${t(getAttributeKey(source, fieldDef.field))}`
+					`${source}.${fieldDef.field}`
+				: fieldDef.field
+		} else {
+			return <span className="text-foreground-muted">{t(getKey('placeholder'))}</span>
+		}
+	}
+
+	return (
+		<Popover open={open} onOpenChange={setOpen}>
+			<Popover.Trigger asChild>
+				<Button
+					variant="outline"
+					role="combobox"
+					aria-expanded={open}
+					className="h-[unset] justify-between truncate border-edge-subtle text-foreground-subtle outline-none hover:bg-background-surface data-[state=open]:bg-transparent data-[state=open]:ring-2 data-[state=open]:ring-edge-brand data-[state=open]:ring-offset-2 data-[state=open]:ring-offset-background"
+				>
+					{renderSelected()}
+					<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+				</Button>
+			</Popover.Trigger>
+			<Popover.Content className="mt-1 max-h-96 w-52 overflow-y-auto p-0" align="start">
+				<Command>
+					<Command.Group
+						heading={renderGroupHeader()}
+						className={cn({
+							'[&_[cmdk-group-heading]]:px-0': !!source,
+						})}
+					>
+						{renderSource()}
+					</Command.Group>
+				</Command>
+			</Popover.Content>
+		</Popover>
+	)
+}
+
+const sourceOptions: Record<FilterSource, { value: string }[]> = {
+	book: [
+		{ value: 'name' },
+		{ value: 'size' },
+		{ value: 'extension' },
+		{ value: 'created_at' },
+		{ value: 'updated_at' },
+		{ value: 'status' },
+		{ value: 'path' },
+		{ value: 'pages' },
+		{ value: 'tags' },
+	],
+	book_meta: [
+		{ value: 'title' },
+		{ value: 'summary' },
+		{ value: 'notes' },
+		{ value: 'genre' },
+		{ value: 'writers' },
+		{ value: 'pencillers' },
+		{ value: 'inkers' },
+		{ value: 'colorists' },
+		{ value: 'letterers' },
+		{ value: 'editors' },
+		{ value: 'publisher' },
+		{ value: 'cover_artists' },
+		{ value: 'links' },
+		{ value: 'characters' },
+		{ value: 'teams' },
+	],
+	library: [{ value: 'name' }, { value: 'path' }],
+	series: [{ value: 'name' }, { value: 'path' }],
+}
+
+// TODO: series_meta: [meta_type, publisher, status, age_rating, volume]
+
+const LOCALE_KEY = 'createOrUpdateSmartListForm.fields.queryBuilder.filters.fieldSelect'
+const getKey = (key: string) => `${LOCALE_KEY}.${key}`
+const getSourceKey = (source: FilterSource, key: string) => `${LOCALE_KEY}.source.${source}.${key}`
+const getAttributeKey = (source: FilterSource, key: string) =>
+	getSourceKey(source, `attributes.${key}`)
diff --git a/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/FilterGroup.tsx b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/FilterGroup.tsx
new file mode 100644
index 000000000..a0fdfc66c
--- /dev/null
+++ b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/FilterGroup.tsx
@@ -0,0 +1,107 @@
+import { Button, Card, IconButton, ToolTip } from '@stump/components'
+import { useLocaleContext } from '@stump/i18n'
+import { ArrowRight, MinusCircle } from 'lucide-react'
+import { useFieldArray } from 'react-hook-form'
+
+import { FilterGroupSchema, FilterSchema, SmartListFormSchema } from '../../schema'
+import { FilterGroupContext } from './context'
+import { FieldSelector } from './FieldSelector'
+import { FilterValue } from './filterValue'
+import GroupJoiner from './GroupJoiner'
+import OperatorSelect from './OperatorSelect'
+
+type Props = {
+	idx: number
+	group: FilterGroupSchema
+}
+export default function FilterGroup({ idx, group }: Props) {
+	const { t } = useLocaleContext()
+
+	const { remove: removeGroup } = useFieldArray<SmartListFormSchema>({
+		name: 'filters.groups',
+	})
+	const { append, remove } = useFieldArray<SmartListFormSchema>({
+		name: `filters.groups.${idx}.filters`,
+	})
+
+	return (
+		<FilterGroupContext.Provider value={{ groupIdx: idx }}>
+			<Card className="ml-4">
+				<div className=" flex flex-col">
+					{!group.filters.length && (
+						<div className="p-4">
+							<FieldSelector idx={0} />
+						</div>
+					)}
+
+					{group.filters.map((filter, filterIndex) => {
+						return (
+							<div
+								key={filterIndex}
+								className="group/filter relative flex items-start p-4 md:items-center"
+							>
+								<div className="flex flex-1 flex-wrap items-center gap-x-4 gap-y-2 md:gap-4">
+									<FieldSelector idx={filterIndex} />
+									{filter.field && (
+										<>
+											<ArrowRight className="h-4 w-4 text-foreground-muted" />
+											<OperatorSelect idx={filterIndex} />
+										</>
+									)}
+									{filter.operation && (
+										<>
+											<ArrowRight className="h-4 w-4 text-foreground-muted" />
+											<FilterValue idx={filterIndex} />
+										</>
+									)}
+								</div>
+
+								<div className="flex h-full w-12 shrink-0 items-center justify-end transition-opacity duration-200 group-hover/filter:opacity-100 md:opacity-0">
+									<ToolTip content={t(getKey('actions.deleteFilter'))} align="end">
+										<IconButton
+											size="xs"
+											className="text-foreground-muted transition-all duration-200 hover:text-fill-danger"
+											onClick={() => remove(filterIndex)}
+											disabled={group.filters.length === 1}
+										>
+											<MinusCircle className="h-4 w-4" />
+										</IconButton>
+									</ToolTip>
+								</div>
+							</div>
+						)
+					})}
+				</div>
+
+				<div className="flex h-12 items-center space-x-4 bg-background-surface/45 px-4">
+					<GroupJoiner />
+
+					<div className="flex-1" />
+
+					<Button
+						variant="ghost"
+						size="sm"
+						newYork
+						onClick={() => append({} as FilterSchema)}
+						className="shrink-0"
+					>
+						{t(getKey('actions.addFilter'))}
+					</Button>
+
+					<Button
+						variant="ghost"
+						size="sm"
+						newYork
+						className="shrink-0 hover:bg-fill-danger-secondary"
+						onClick={() => removeGroup(idx)}
+					>
+						{t(getKey('actions.deleteGroup'))}
+					</Button>
+				</div>
+			</Card>
+		</FilterGroupContext.Provider>
+	)
+}
+
+const LOCALE_KEY = 'createOrUpdateSmartListForm.fields.queryBuilder.filters'
+const getKey = (key: string) => `${LOCALE_KEY}.${key}`
diff --git a/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/GroupJoiner.tsx b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/GroupJoiner.tsx
new file mode 100644
index 000000000..a9cba9448
--- /dev/null
+++ b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/GroupJoiner.tsx
@@ -0,0 +1,63 @@
+import { cn, Tabs, Text } from '@stump/components'
+import { useLocaleContext } from '@stump/i18n'
+import React from 'react'
+import { useFormContext } from 'react-hook-form'
+
+import { FilterGroupJoiner, SmartListFormSchema } from '../../schema'
+import { useFilterGroupContext } from './context'
+
+export default function GroupJoiner() {
+	const form = useFormContext<SmartListFormSchema>()
+
+	const { t } = useLocaleContext()
+	const { groupIdx } = useFilterGroupContext()
+
+	const joiner = form.watch(`filters.groups.${groupIdx}.joiner`)
+
+	return (
+		<div className="flex items-center lg:space-x-4">
+			<Tabs variant="primary" activeOnHover value={joiner}>
+				<Tabs.List className="rounded-lg">
+					<Tabs.Trigger
+						value="and"
+						asChild
+						className="w-8 min-w-[unset] rounded-lg px-1 text-xs"
+						onClick={() => form.setValue(`filters.groups.${groupIdx}.joiner`, 'and')}
+					>
+						<Text className="cursor-pointer truncate">{t(getJoinerKey('and', 'label'))}</Text>
+					</Tabs.Trigger>
+
+					<Tabs.Trigger
+						value="or"
+						asChild
+						className="w-8 min-w-[unset] rounded-lg px-1 text-xs"
+						onClick={() => form.setValue(`filters.groups.${groupIdx}.joiner`, 'or')}
+					>
+						<Text className={cn('truncate', { 'cursor-pointer': true })}>
+							{t(getJoinerKey('or', 'label'))}
+						</Text>
+					</Tabs.Trigger>
+
+					<Tabs.Trigger
+						value="not"
+						asChild
+						className="w-8 min-w-[unset] rounded-lg px-1 text-xs"
+						onClick={() => form.setValue(`filters.groups.${groupIdx}.joiner`, 'not')}
+					>
+						<Text className={cn('truncate', { 'cursor-pointer': true })}>
+							{t(getJoinerKey('not', 'label'))}
+						</Text>
+					</Tabs.Trigger>
+				</Tabs.List>
+			</Tabs>
+			<Text className="hidden text-sm lg:inline-flex" variant="muted">
+				{t(getJoinerKey(joiner, 'description'))}
+			</Text>
+		</div>
+	)
+}
+
+const LOCALE_KEY = 'createOrUpdateSmartListForm.fields.queryBuilder.groupJoiner'
+const getKey = (key: string) => `${LOCALE_KEY}.${key}`
+const getJoinerKey = (joiner: FilterGroupJoiner, key: string) =>
+	getKey(`${joiner?.toLowerCase()}.${key}`)
diff --git a/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/OperatorSelect.tsx b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/OperatorSelect.tsx
new file mode 100644
index 000000000..eb5f55ae3
--- /dev/null
+++ b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/OperatorSelect.tsx
@@ -0,0 +1,157 @@
+import { Button, cn, Command, Popover } from '@stump/components'
+import { ChevronsUpDown } from 'lucide-react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { useFieldArray, useFormContext } from 'react-hook-form'
+import { match } from 'ts-pattern'
+
+import {
+	isDateField,
+	isNumberField,
+	isStringField,
+	ListOperation,
+	NumberOperation,
+	Operation,
+	SmartListFormSchema,
+	StringOperation,
+} from '../../schema'
+import { useFilterGroupContext } from './context'
+
+type Props = {
+	idx: number
+}
+
+type FieldDef = SmartListFormSchema['filters']['groups'][number]['filters'][number]
+
+export default function OperatorSelect({ idx }: Props) {
+	const { groupIdx } = useFilterGroupContext()
+
+	const form = useFormContext<SmartListFormSchema>()
+
+	const [isOpen, setIsOpen] = useState(false)
+
+	const { update } = useFieldArray({
+		control: form.control,
+		name: `filters.groups.${groupIdx}.filters`,
+	})
+
+	const fieldDef = useMemo(
+		() => form.watch(`filters.groups.${groupIdx}.filters.${idx}`) || ({} as FieldDef),
+		[form, groupIdx, idx],
+	)
+
+	const updateField = useCallback(
+		(params: Partial<FieldDef>, close = true) => {
+			const newField = { ...fieldDef, ...params }
+			update(idx, newField)
+			setIsOpen(!close)
+		},
+		[update, fieldDef, idx],
+	)
+
+	const operators = useMemo(
+		() =>
+			match(fieldDef.field)
+				.when(
+					(field) => isStringField(field),
+					() => ['contains', 'excludes', 'not', 'equals'] as StringOperation[],
+				)
+				.when(
+					(field) => isNumberField(field) || isDateField(field),
+					() => ['gt', 'gte', 'lt', 'lte', 'not', 'equals', 'range'] as NumberOperation[],
+				)
+				.otherwise(() => [] as Operation[]),
+		[fieldDef],
+	)
+
+	const selectGroups = useMemo(() => {
+		const arrayGroup = operatorGroups.list
+
+		return [
+			{
+				label: 'Equality',
+				operators: operators,
+			},
+			...(!isDateField(fieldDef.field)
+				? [
+						{
+							label: 'List',
+							operators: arrayGroup,
+						},
+					]
+				: []),
+		]
+	}, [operators, fieldDef])
+
+	useEffect(() => {
+		const allOperators = [...operators, ...operatorGroups.list]
+		const shouldReset = !allOperators.includes(fieldDef.operation)
+		if (shouldReset && fieldDef.operation) {
+			updateField({ operation: undefined }, false)
+		}
+	}, [fieldDef, operators, updateField])
+
+	if (!fieldDef) return null
+
+	return (
+		<Popover open={isOpen} onOpenChange={setIsOpen}>
+			<Popover.Trigger asChild>
+				<Button
+					variant="outline"
+					role="combobox"
+					aria-expanded={isOpen}
+					className={cn(
+						'h-[unset] justify-between truncate border-edge-subtle text-foreground-subtle outline-none hover:bg-background-surface data-[state=open]:bg-transparent data-[state=open]:ring-2 data-[state=open]:ring-edge-brand data-[state=open]:ring-offset-2 data-[state=open]:ring-offset-background',
+						{ 'text-foreground-muted': !fieldDef.operation },
+					)}
+				>
+					{operatorMap[fieldDef.operation] || 'Operator'}
+					<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+				</Button>
+			</Popover.Trigger>
+
+			<Popover.Content className="mt-1 max-h-96 w-52 overflow-y-auto p-0" align="start">
+				<Command>
+					{selectGroups.map(({ label, operators }) => (
+						<Command.Group
+							key={label}
+							heading={<span className="text-foreground-muted">{label}</span>}
+						>
+							{operators.map((operator) => (
+								<Command.Item
+									key={operator}
+									onSelect={() => updateField({ operation: operator })}
+									className={cn('transition-all duration-75', {
+										'text-brand': operator === fieldDef.operation,
+									})}
+									value={operator}
+								>
+									{operatorMap[operator]}
+								</Command.Item>
+							))}
+						</Command.Group>
+					))}
+				</Command>
+			</Popover.Content>
+		</Popover>
+	)
+}
+
+const operatorGroups = {
+	list: ['any', 'none'] satisfies ListOperation[],
+	number: ['gt', 'gte', 'lt', 'lte', 'not', 'equals', 'range'] satisfies NumberOperation[],
+	string: ['contains', 'excludes', 'not', 'equals'] satisfies StringOperation[],
+}
+
+const operatorMap: Record<Operation, string> = {
+	any: 'any in list',
+	contains: 'contains string',
+	equals: 'equal to',
+	excludes: 'excludes string',
+	gt: 'greater than',
+	gte: 'greater than or equal to',
+	lt: 'less than',
+	lte: 'less than or equal to',
+	none: 'none in list',
+	not: 'not equal to',
+	range: 'in range',
+}
diff --git a/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/context.ts b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/context.ts
new file mode 100644
index 000000000..6fb63e942
--- /dev/null
+++ b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/context.ts
@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react'
+
+export type IFilterGroupContext = {
+	groupIdx: number
+}
+
+export const FilterGroupContext = createContext<IFilterGroupContext | null>(null)
+
+export const useFilterGroupContext = () => {
+	const context = useContext(FilterGroupContext)
+	if (!context) {
+		throw new Error('FilterGroupContext is not provided')
+	}
+	return context
+}
diff --git a/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/filterValue/FilterValue.tsx b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/filterValue/FilterValue.tsx
new file mode 100644
index 000000000..ee1206083
--- /dev/null
+++ b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/filterValue/FilterValue.tsx
@@ -0,0 +1,87 @@
+import { cn, DatePicker, Input } from '@stump/components'
+import { useLocaleContext } from '@stump/i18n'
+import dayjs from 'dayjs'
+import React, { useMemo } from 'react'
+import { useFormContext } from 'react-hook-form'
+import { match } from 'ts-pattern'
+
+import {
+	isDateField,
+	isListOperator,
+	isNumberField,
+	isNumberOperator,
+	SmartListFormSchema,
+} from '@/components/smartList/createOrUpdate'
+
+import { useFilterGroupContext } from '../context'
+import ListValue from './ListValue'
+import RangeValue, { RangeFilterDef } from './RangeValue'
+
+type Props = {
+	idx: number
+}
+
+export type FieldDef = SmartListFormSchema['filters']['groups'][number]['filters'][number]
+
+export default function FilterValue({ idx }: Props) {
+	const { t } = useLocaleContext()
+	const { groupIdx } = useFilterGroupContext()
+
+	const form = useFormContext<SmartListFormSchema>()
+
+	const fieldDef = useMemo(
+		() => form.watch(`filters.groups.${groupIdx}.filters.${idx}`) || ({} as FieldDef),
+		[form, groupIdx, idx],
+	)
+
+	const variant = match(fieldDef.operation)
+		.when(
+			(value) => isListOperator(value),
+			() => 'list',
+		)
+		.when(
+			(value) => isNumberOperator(value),
+			(value) => (value === 'range' ? 'range' : 'number'),
+		)
+		.otherwise(() => 'string')
+
+	if (variant === 'list') {
+		return <ListValue idx={idx} />
+	} else if (variant === 'range') {
+		return <RangeValue def={fieldDef as RangeFilterDef} idx={idx} />
+	}
+
+	if (isDateField(fieldDef.field)) {
+		return (
+			<DatePicker
+				placeholder={t(getKey('date'))}
+				selected={dayjs(fieldDef.value as string).toDate()}
+				onChange={(value) => {
+					if (value) {
+						const adjustedValue = dayjs(value).endOf('day').toDate()
+						form.setValue(`filters.groups.${groupIdx}.filters.${idx}.value`, adjustedValue)
+					} else {
+						form.resetField(`filters.groups.${groupIdx}.filters.${idx}.value`)
+					}
+				}}
+				className="md:w-52"
+			/>
+		)
+	}
+
+	const isNumber = isNumberField(fieldDef.field)
+
+	return (
+		<Input
+			type={isNumber ? 'number' : 'text'}
+			placeholder={t(getKey('placeholder'))}
+			className={cn({ 'md:w-52': isNumber })}
+			{...form.register(`filters.groups.${groupIdx}.filters.${idx}.value`, {
+				valueAsNumber: isNumber,
+			})}
+		/>
+	)
+}
+
+const LOCALE_KEY = 'createOrUpdateSmartListForm.fields.queryBuilder.filters.basicValue'
+const getKey = (key: string) => `${LOCALE_KEY}.${key}`
diff --git a/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/filterValue/ListValue.tsx b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/filterValue/ListValue.tsx
new file mode 100644
index 000000000..30cc4f2b0
--- /dev/null
+++ b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/filterValue/ListValue.tsx
@@ -0,0 +1,91 @@
+import { ComboBox } from '@stump/components'
+import { useLocaleContext } from '@stump/i18n'
+import { useCallback, useMemo } from 'react'
+import { useFormContext } from 'react-hook-form'
+
+import { isNumberField, SmartListFormSchema } from '@/components/smartList/createOrUpdate'
+
+import { useFilterGroupContext } from '../context'
+import { FieldDef } from './FilterValue'
+
+type Props = {
+	idx: number
+}
+
+export default function ListValue({ idx }: Props) {
+	const { t } = useLocaleContext()
+	const { groupIdx } = useFilterGroupContext()
+
+	const form = useFormContext<SmartListFormSchema>()
+	const fieldDef = useMemo(
+		() => form.watch(`filters.groups.${groupIdx}.filters.${idx}`) || ({} as FieldDef),
+		[form, groupIdx, idx],
+	)
+	const values = useMemo(
+		() =>
+			(form.watch(`filters.groups.${groupIdx}.filters.${idx}.value`) || []) as (string | number)[],
+		[form, groupIdx, idx],
+	)
+
+	const isNumber = isNumberField(fieldDef.field)
+
+	const parseValue = useCallback(
+		(value: string | number) => {
+			if (isNumber) {
+				return (value as number) * 1
+			}
+			return value
+		},
+		[isNumber],
+	)
+
+	const addValue = useCallback(
+		(value: string | number) => {
+			const parsedValue = parseValue(value)
+			if (typeof parsedValue === 'number' && isNaN(parsedValue)) {
+				form.resetField(`filters.groups.${groupIdx}.filters.${idx}.value`)
+				return
+			}
+
+			if (Array.isArray(values) && !values.includes(parsedValue)) {
+				// @ts-expect-error: fix this irritating type error re: string | number array
+				form.setValue(`filters.groups.${groupIdx}.filters.${idx}.value`, [...values, parsedValue])
+			}
+		},
+		[form, groupIdx, idx, values, parseValue],
+	)
+
+	const handleChange = useCallback(
+		(values?: string[]) => {
+			if (!values) {
+				form.resetField(`filters.groups.${groupIdx}.filters.${idx}.value`)
+				return
+			}
+
+			const parsedValues = values.map(parseValue) as string[] | number[]
+			if (isNumber && parsedValues.some((value) => isNaN(value as number))) {
+				form.resetField(`filters.groups.${groupIdx}.filters.${idx}.value`)
+				return
+			}
+
+			form.setValue(`filters.groups.${groupIdx}.filters.${idx}.value`, parsedValues)
+		},
+		[form, groupIdx, idx, isNumber, parseValue],
+	)
+
+	return (
+		<ComboBox
+			options={values.map((value) => ({ label: String(value), value: String(value) }))}
+			value={values.map(String)}
+			placeholder={t(getKey('placeholder'))}
+			filterEmptyMessage={t(getKey('emptyState'))}
+			onChange={handleChange}
+			onAddOption={({ value }) => addValue(value)}
+			isMultiSelect
+			filterable
+		/>
+	)
+}
+
+const LOCALE_KEY = 'createOrUpdateSmartListForm.fields.queryBuilder.filters.listValue'
+const getKey = (key: string) => `${LOCALE_KEY}.${key}`
diff --git a/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/filterValue/RangeValue.tsx b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/filterValue/RangeValue.tsx
new file mode 100644
index 000000000..0a08fcf8d
--- /dev/null
+++ b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/filterValue/RangeValue.tsx
@@ -0,0 +1,121 @@
+import { CheckBox, DatePicker, Input } from '@stump/components'
+import { useLocaleContext } from '@stump/i18n'
+import dayjs from 'dayjs'
+import { useMemo } from 'react'
+import { useFormContext, useFormState } from 'react-hook-form'
+import { useMediaMatch } from 'rooks'
+import { match } from 'ts-pattern'
+
+import {
+	FilterSchema,
+	FromOperation,
+	isDateField,
+	isNumberField,
+	SmartListFormSchema,
+} from '@/components/smartList/createOrUpdate'
+
+import { useFilterGroupContext } from '../context'
+
+export type RangeFilterDef = FilterSchema & { value: FromOperation }
+
+type Props = {
+	def: RangeFilterDef
+	idx: number
+}
+
+export default function RangeValue({ def: { field, value }, idx }: Props) {
+	const form = useFormContext<SmartListFormSchema>()
+	const isAtLeastMedium = useMediaMatch('(min-width: 768px)')
+
+	const { t } = useLocaleContext()
+	const { groupIdx } = useFilterGroupContext()
+	const { errors } = useFormState({ control: form.control })
+
+	const formError = useMemo(
+		() => errors.filters?.groups?.[groupIdx]?.filters?.[idx],
+		[errors, groupIdx, idx],
+	)
+
+	const changeHandler = (key: 'from' | 'to') => (value?: Date | number) => {
+		if (value === undefined) {
+			form.resetField(`filters.groups.${groupIdx}.filters.${idx}.value.${key}`)
+		} else {
+			const adjustedValue = typeof value === 'number' ? value : dayjs(value).endOf('day').toDate()
+			form.setValue(`filters.groups.${groupIdx}.filters.${idx}.value.${key}`, adjustedValue)
+		}
+	}
+
+	const renderValue = () => {
+		return (
+			match(field)
+				.when(isDateField, () => (
+					<>
+						<DatePicker
+							placeholder={t(getKey('from.date'))}
+							selected={value.from ? dayjs(value.from).toDate() : undefined}
+							onChange={changeHandler('from')}
+							className="md:w-52"
+							popover={{
+								align: isAtLeastMedium ? 'start' : 'center',
+							}}
+						/>
+						<DatePicker
+							placeholder={t(getKey('to.date'))}
+							selected={value.to ? dayjs(value.to).toDate() : undefined}
+							onChange={changeHandler('to')}
+							className="md:w-52"
+							popover={{
+								align: isAtLeastMedium ? 'start' : 'center',
+							}}
+						/>
+					</>
+				))
+				// TODO(ux): show the error somewhere. The input in error state with message will disalign the container, which is just
+				// a bit annoying. Ideally we can render the error message somewhere else without disrupting the layout.
+				.when(isNumberField, () => (
+					<>
+						<Input
+							placeholder={t(getKey('from.number'))}
+							type="number"
+							containerClassName="md:w-52"
+							isInvalid={!!formError?.value?.message}
+							{...form.register(`filters.groups.${groupIdx}.filters.${idx}.value.from`, {
+								valueAsNumber: true,
+							})}
+						/>
+						<Input
+							placeholder={t(getKey('to.number'))}
+							type="number"
+							containerClassName="md:w-52"
+							isInvalid={!!formError?.value?.message}
+							{...form.register(`filters.groups.${groupIdx}.filters.${idx}.value.to`, {
+								valueAsNumber: true,
+							})}
+						/>
+					</>
+				))
+				.otherwise(() => null)
+		)
+	}
+
+	return (
+		<>
+			{renderValue()}
+			<CheckBox
+				id="inclusive"
+				label={t(getKey('inclusive'))}
+				variant="primary"
+				checked={value?.inclusive}
+				onClick={() =>
+					form.setValue(
+						`filters.groups.${groupIdx}.filters.${idx}.value.inclusive`,
+						!value?.inclusive,
+					)
+				}
+			/>
+		</>
+	)
+}
+
+const LOCALE_KEY = 'createOrUpdateSmartListForm.fields.queryBuilder.filters.rangeValue'
+const getKey = (key: string) => `${LOCALE_KEY}.${key}`
diff --git a/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/filterValue/index.ts b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/filterValue/index.ts
new file mode 100644
index 000000000..9710a718b
--- /dev/null
+++ b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/filterValue/index.ts
@@ -0,0 +1 @@
+export { default as FilterValue } from './FilterValue'
diff --git a/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/index.ts b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/index.ts
new file mode 100644
index 000000000..aa41ab5b7
--- /dev/null
+++ b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/filterGroup/index.ts
@@ -0,0 +1 @@
+export { default as FilterGroup } from './FilterGroup'
diff --git a/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/index.ts b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/index.ts
new file mode 100644
index 000000000..c5a933fbf
--- /dev/null
+++ b/packages/browser/src/components/smartList/createOrUpdate/queryBuilder/index.ts
@@ -0,0 +1 @@
+export { default as SmartListQueryBuilder } from './SmartListQueryBuilder'
diff --git a/packages/browser/src/components/smartList/createOrUpdate/schema.ts b/packages/browser/src/components/smartList/createOrUpdate/schema.ts
new file mode 100644
index 000000000..5fa468962
--- /dev/null
+++ b/packages/browser/src/components/smartList/createOrUpdate/schema.ts
@@ -0,0 +1,368 @@
+import {
+	CreateOrUpdateSmartList,
+	FilterGroup,
+	LibrarySmartFilter,
+	MediaMetadataSmartFilter,
+	MediaSmartFilter,
+	SeriesSmartFilter,
+	SmartFilter,
+	SmartList,
+} from '@stump/types'
+import getProperty from 'lodash/get'
+import { match, P } from 'ts-pattern'
+import { z } from 'zod'
+
+export const stringOperation = z.enum(['contains', 'excludes', 'not', 'equals'])
+export type StringOperation = z.infer<typeof stringOperation>
+
+export const listOperation = z.enum(['any', 'none'])
+export type ListOperation = z.infer<typeof listOperation>
+export const isListOperator = (value: string): value is ListOperation =>
+	listOperation.safeParse(value).success
+
+export const numberOperation = z.enum(['gt', 'gte', 'lt', 'lte', 'not', 'equals', 'range'])
+export type NumberOperation = z.infer<typeof numberOperation>
+export const isNumberOperator = (value: string): value is NumberOperation =>
+	numberOperation.safeParse(value).success
+
+export const operation = z.union([stringOperation, listOperation, numberOperation])
+export type Operation = z.infer<typeof operation>
+
+export const fromOperation = z.object({
+	from: z.union([z.date(), z.number()]),
+	inclusive: z.boolean().optional(),
+	to: z.union([z.date(), z.number()]),
+})
+export type FromOperation = z.infer<typeof fromOperation>
+
+export const stringField = z.enum([
+	'name',
+	'title',
+	'path',
+	'description',
+	'summary',
+	'notes',
+	'genre',
+	'writers',
+	'pencillers',
+	'inkers',
+	'colorists',
+	'letterers',
+	'editors',
+	'publisher',
+	'colorists',
+	'letterers',
+	'cover_artists',
+	'links',
+	'characters',
+	'teams',
+])
+export type StringField = z.infer<typeof stringField>
+export const isStringField = (field: string): field is StringField =>
+	stringField.safeParse(field).success
+
+export const numberField = z.enum([
+	'age_rating',
+	'year',
+	'day',
+	'month',
+	'pages',
+	'page_count',
+	'size',
+])
+export type NumberField = z.infer<typeof numberField>
+export const isNumberField = (field: string): field is NumberField =>
+	numberField.safeParse(field).success
+
+export const dateField = z.enum(['created_at', 'updated_at', 'completed_at'])
+export type DateField = z.infer<typeof dateField>
+export const isDateField = (field: string): field is DateField => dateField.safeParse(field).success
+
+export const filter = z
+	.object({
+		field: z.string(),
+		operation,
+		source: z.enum(['book', 'book_meta', 'series', 'library']),
+		value: z.union([
+			z.string(),
+			z.string().array(),
+			z.number(),
+			z.number().array(),
+			z.date(),
+			fromOperation,
+		]),
+	})
+	// strings may not use gt, gte, lt, lte, from
+	.refine(
+		(input) =>
+			!(
+				stringField.safeParse(input.field).success &&
+				['gt', 'gte', 'lt', 'lte', 'from'].includes(input.operation)
+			),
+		{
+			message: 'String fields may not use gt, gte, lt, lte, from',
+		},
+	)
+export type FilterSchema = z.infer<typeof filter>
+export type FilterSource = FilterSchema['source']
+
+export const intoAPIFilter = (input: z.infer<typeof filter>): MediaSmartFilter => {
+	const fieldValue = match(input.operation)
+		.with('range', () => input.value)
+		.otherwise(() => ({ [input.operation]: input.value }))
+
+	const converted = match(input.source)
+		.with(
+			'book',
+			() =>
+				({
+					[input.field]: fieldValue,
+				}) as MediaSmartFilter,
+		)
+		.with('book_meta', () => ({
+			metadata: {
+				[input.field]: fieldValue,
+			} as MediaMetadataSmartFilter,
+		}))
+		.with('series', () => ({
+			series: {
+				[input.field]: fieldValue,
+			} as SeriesSmartFilter,
+		}))
+		.with('library', () => ({
+			series: {
+				library: {
+					[input.field]: fieldValue,
+				},
+			} as SeriesSmartFilter,
+		}))
+		.exhaustive()
+
+	return converted
+}
+
+// FIXME: this is SUPER unsafe wrt the types...
+export const intoFormFilter = (input: MediaSmartFilter): z.infer<typeof filter> => {
+	const source = match(input)
+		.when(
+			(x) => 'metadata' in x,
+			() => 'book_meta' as const,
+		)
+		.when(
+			(x) => 'series' in x && 'library' in x.series,
+			() => 'library' as const,
+		)
+		.when(
+			(x) => 'series' in x,
+			() => 'series' as const,
+		)
+		.otherwise(() => 'book' as const)
+
+	const field = match(source)
+		.with('book', () => Object.keys(input)[0])
+		.with(
+			'book_meta',
+			() => Object.keys((input as { metadata: MediaMetadataSmartFilter }).metadata)[0],
+		)
+		.with('series', () => Object.keys((input as { series: SeriesSmartFilter }).series)[0])
+		.with(
+			'library',
+			() => Object.keys((input as { series: { library: LibrarySmartFilter } }).series.library)[0],
+		)
+		.exhaustive()
+
+	const conversion = match(source)
+		.with('book', () => {
+			const castedInput = input as MediaSmartFilter
+			const filterValue = getProperty(castedInput, field || '') // { [operation]: value }
+			const operation = 'from' in filterValue ? 'range' : Object.keys(filterValue || {})[0]
+			const value = match(operation)
+				.with('range', () => filterValue)
+				.otherwise(() => getProperty(filterValue, operation || ''))
+
+			return {
+				field,
+				operation,
+				source,
+				value,
+			}
+		})
+		.with('book_meta', () => {
+			const castedInput = input as { metadata: MediaMetadataSmartFilter } // { metadata: { [field]: { [operation]: value } } }
+			const filterValue = getProperty(castedInput.metadata, field || '') // { [operation]: value }
+			const operation = 'from' in filterValue ? 'range' : Object.keys(filterValue || {})[0]
+			const value = match(operation)
+				.with('range', () => filterValue)
+				.otherwise(() => getProperty(filterValue, operation || ''))
+
+			return {
+				field,
+				operation,
+				source,
+				value,
+			}
+		})
+		.with('series', () => {
+			const castedInput = input as { series: SeriesSmartFilter } // { series: { [field]: { [operation]: value } } }
+			const filterValue = getProperty(castedInput.series, field || '')
+			const operation = 'from' in filterValue ? 'range' : Object.keys(filterValue || {})[0]
+			const value = match(operation)
+				.with('range', () => filterValue)
+				.otherwise(() => getProperty(filterValue, operation || ''))
+
+			return {
+				field,
+				operation,
+				source,
+				value,
+			}
+		})
+		.with('library', () => {
+			const castedInput = input as { series: { library: LibrarySmartFilter } } // { series: { library: { [field]: { [operation]: value } } } }
+			const filterValue = getProperty(castedInput.series.library, field || '') // { [operation]: value }
+			const operation = 'from' in filterValue ? 'range' : Object.keys(filterValue || {})[0]
+			const value = operation === 'range' ? filterValue : getProperty(filterValue, operation || '')
+			return {
+				field,
+				operation,
+				source,
+				value,
+			}
+		})
+		.exhaustive()
+
+	return conversion as unknown as z.infer<typeof filter>
+}
+
+export const filterGroup = z.object({
+	filters: z.array(filter),
+	joiner: z.enum(['and', 'or', 'not']),
+})
+export type FilterGroupSchema = z.infer<typeof filterGroup>
+export type FilterGroupJoiner = FilterGroupSchema['joiner']
+
+export const intoFormGroup = (
+	input: FilterGroup<MediaSmartFilter>,
+): z.infer<typeof filterGroup> => {
+	const converted = match(input)
+		.with(
+			{ and: P.array() },
+			({ and }) =>
+				({
+					filters: and.map(intoFormFilter),
+					joiner: 'and',
+				}) satisfies z.infer<typeof filterGroup>,
+		)
+		.with(
+			{ or: P.array() },
+			({ or }) =>
+				({ filters: or.map(intoFormFilter), joiner: 'or' }) satisfies z.infer<typeof filterGroup>,
+		)
+		.with(
+			{ not: P.array() },
+			({ not }) =>
+				({ filters: not.map(intoFormFilter), joiner: 'not' }) satisfies z.infer<typeof filterGroup>,
+		)
+		.otherwise(
+			() =>
+				({
+					filters: [],
+					joiner: 'and',
+				}) satisfies z.infer<typeof filterGroup>,
+		)
+
+	return converted
+}
+
+export const intoAPIGroup = (input: z.infer<typeof filterGroup>): FilterGroup<MediaSmartFilter> => {
+	const converted = match(input)
+		.with(
+			{ filters: P.array(), joiner: 'and' },
+			({ filters }) => ({ and: filters.map(intoAPIFilter) }) as FilterGroup<MediaSmartFilter>,
+		)
+		.with(
+			{ filters: P.array(), joiner: 'or' },
+			({ filters }) => ({ or: filters.map(intoAPIFilter) }) as FilterGroup<MediaSmartFilter>,
+		)
+		.with(
+			{ filters: P.array(), joiner: 'not' },
+			({ filters }) => ({ not: filters.map(intoAPIFilter) }) as FilterGroup<MediaSmartFilter>,
+		)
+		.otherwise(() => ({ and: [] }) as FilterGroup<MediaSmartFilter>)
+
+	return converted
+}
+
+export const filterConfig = z.object({
+	groups: z.array(filterGroup),
+	joiner: z.enum(['and', 'or', 'not']),
+})
+
+export const grouping = z.enum(['BY_BOOKS', 'BY_SERIES', 'BY_LIBRARY'])
+export type SmartListGroupBy = z.infer<typeof grouping>
+export const isGrouping = (value: string): value is SmartListGroupBy =>
+	grouping.safeParse(value).success
+
+export const createSchema = (
+	existingNames: string[],
+	t: (key: string) => string,
+	updatingList?: SmartList,
+) => {
+	const forbiddenNames = existingNames.filter((name) => name !== updatingList?.name)
+	return z.object({
+		description: z.string().optional(),
+		filters: filterConfig,
+		grouping: grouping.optional(),
+		name: z
+			.string()
+			.min(1, t(validationKey('nameTooShort')))
+			.refine((name) => !forbiddenNames.includes(name), { message: t(validationKey('nameTaken')) }),
+		visibility: z.enum(['PRIVATE', 'PUBLIC', 'SHARED']),
+	})
+}
+const validationKey = (key: string) => `createOrUpdateSmartListForm.validation.${key}`
+
+export type SmartListFormSchema = z.infer<ReturnType<typeof createSchema>>
+
+export const intoForm = ({
+	name,
+	description,
+	visibility,
+	filters,
+	joiner,
+	default_grouping,
+}: Omit<SmartList, 'saved_views'>): SmartListFormSchema => ({
+	description: description || undefined,
+	filters: {
+		groups: filters.groups.map(intoFormGroup),
+		joiner: joiner.toLowerCase() as 'and' | 'or' | 'not',
+	},
+	grouping: default_grouping || undefined,
+	name,
+	visibility,
+})
+
+export const intoAPI = ({
+	name,
+	description,
+	visibility,
+	filters,
+	grouping,
+}: SmartListFormSchema): CreateOrUpdateSmartList => ({
+	default_grouping: grouping || null,
+	description: description || null,
+	filters: {
+		groups: filters.groups.map(intoAPIGroup),
+		joiner: filters.joiner.toUpperCase() as 'AND' | 'OR',
+	},
+	name,
+	visibility,
+})
+
+export const intoAPIFilters = ({
+	groups,
+	joiner,
+}: Pick<SmartListFormSchema, 'filters'>['filters']): SmartFilter<MediaSmartFilter> => ({
+	groups: groups.map(intoAPIGroup),
+	joiner: joiner.toUpperCase() as 'AND' | 'OR',
+})
diff --git a/packages/browser/src/components/smartList/createOrUpdate/sections/AccessSettings.tsx b/packages/browser/src/components/smartList/createOrUpdate/sections/AccessSettings.tsx
new file mode 100644
index 000000000..580455fea
--- /dev/null
+++ b/packages/browser/src/components/smartList/createOrUpdate/sections/AccessSettings.tsx
@@ -0,0 +1,50 @@
+import { Alert, Label, NativeSelect, Text } from '@stump/components'
+import { useLocaleContext } from '@stump/i18n'
+import { EntityVisibility } from '@stump/types'
+import React from 'react'
+import { useFormContext } from 'react-hook-form'
+
+import { SmartListFormSchema } from '../schema'
+
+type SubSchema = Pick<SmartListFormSchema, 'visibility'>
+
+type Props = {
+	isCreating?: boolean
+}
+
+export default function AccessSettings({ isCreating }: Props) {
+	const form = useFormContext<SubSchema>()
+	const visibility = form.watch('visibility')
+
+	const { t } = useLocaleContext()
+
+	return (
+		<>
+			<div className="flex max-w-xs flex-col gap-y-1.5">
+				<Label>{t(getKey('label'))}</Label>
+				<NativeSelect
+					options={[
+						{ label: t(getOptionKey('PUBLIC', 'label')), value: 'PUBLIC' },
+						{ label: t(getOptionKey('SHARED', 'label')), value: 'SHARED' },
+						{ label: t(getOptionKey('PRIVATE', 'label')), value: 'PRIVATE' },
+					]}
+					{...form.register('visibility')}
+				/>
+				<Text variant="muted" size="sm">
+					{t(getOptionKey(visibility, 'description'))}
+				</Text>
+			</div>
+
+			{isCreating && visibility === 'SHARED' && (
+				<Alert level="info" className="-mt-4 max-w-lg">
+					<Alert.Content>{t(getOptionKey(visibility, 'createDisclaimer'))}</Alert.Content>
+				</Alert>
+			)}
+		</>
+	)
+}
+
+const LOCALE_KEY = 'createOrUpdateSmartListForm.fields.visibility'
+const getKey = (key: string) => `${LOCALE_KEY}.${key}`
+const getOptionKey = (option: EntityVisibility, key: string) =>
+	getKey(`options.${option.toLowerCase()}.${key}`)
diff --git a/packages/browser/src/components/smartList/createOrUpdate/sections/BasicDetails.tsx b/packages/browser/src/components/smartList/createOrUpdate/sections/BasicDetails.tsx
new file mode 100644
index 000000000..d1304ae25
--- /dev/null
+++ b/packages/browser/src/components/smartList/createOrUpdate/sections/BasicDetails.tsx
@@ -0,0 +1,40 @@
+import { Input, TextArea } from '@stump/components'
+import { useLocaleContext } from '@stump/i18n'
+import React from 'react'
+import { useFormContext } from 'react-hook-form'
+
+import { SmartListFormSchema } from '../schema'
+
+type SubSchema = Pick<SmartListFormSchema, 'name' | 'description'>
+
+export default function BasicDetails() {
+	const form = useFormContext<SubSchema>()
+
+	const { t } = useLocaleContext()
+
+	return (
+		<div className="flex flex-col gap-y-6">
+			<Input
+				variant="primary"
+				label={t(getKey('name.label'))}
+				description={t(getKey('name.description'))}
+				placeholder={t(getKey('name.placeholder'))}
+				errorMessage={form.formState.errors.name?.message}
+				{...form.register('name')}
+				data-1p-ignore
+			/>
+
+			<TextArea
+				label={t(getKey('description.label'))}
+				description={t(getKey('description.description'))}
+				placeholder={t(getKey('description.placeholder'))}
+				variant="primary"
+				className="md:w-3/5"
+				{...form.register('description')}
+			/>
+		</div>
+	)
+}
+
+const LOCALE_KEY = 'createOrUpdateSmartListForm.fields'
+const getKey = (key: string) => `${LOCALE_KEY}.${key}`
diff --git a/packages/browser/src/components/smartList/createOrUpdate/sections/FilterConfigJSON.tsx b/packages/browser/src/components/smartList/createOrUpdate/sections/FilterConfigJSON.tsx
new file mode 100644
index 000000000..7b91566d1
--- /dev/null
+++ b/packages/browser/src/components/smartList/createOrUpdate/sections/FilterConfigJSON.tsx
@@ -0,0 +1,42 @@
+import { Accordion, Text } from '@stump/components'
+import React, { useMemo } from 'react'
+import { useFormContext, useWatch } from 'react-hook-form'
+
+import { FilterGroupSchema, intoAPIFilters, SmartListFormSchema } from '../schema'
+
+export default function FilterConfigJSON() {
+	const form = useFormContext<SmartListFormSchema>()
+	const { filters } = useWatch({ control: form.control })
+
+	const [joiner] = form.watch(['filters.joiner'])
+
+	const groups = useMemo(() => (filters?.groups ?? []) as FilterGroupSchema[], [filters?.groups])
+	// FIXME: this errors lol
+	const apiFilters = useMemo(
+		() =>
+			intoAPIFilters({
+				groups,
+				joiner: joiner ?? 'AND',
+			}),
+		[groups, joiner],
+	)
+	const formattedFilters = useMemo(() => JSON.stringify(apiFilters, null, 2), [apiFilters])
+
+	return (
+		<Accordion type="single" collapsible>
+			<Accordion.Item value="raw_filters" className="border-none">
+				<Accordion.Trigger noUnderline asLabel>
+					<div className="flex flex-col items-start gap-y-1">
+						<span>Show JSON</span>
+						<Text variant="muted" size="sm">
+							View the raw JSON representation of the filters
+						</Text>
+					</div>
+				</Accordion.Trigger>
+				<Accordion.Content className="rounded-md bg-background-surface p-4">
+					<pre className="text-xs text-foreground-subtle">{formattedFilters}</pre>
+				</Accordion.Content>
+			</Accordion.Item>
+		</Accordion>
+	)
+}
diff --git a/packages/browser/src/components/smartList/createOrUpdate/sections/SmartListReview.tsx b/packages/browser/src/components/smartList/createOrUpdate/sections/SmartListReview.tsx
new file mode 100644
index 000000000..09911cacf
--- /dev/null
+++ b/packages/browser/src/components/smartList/createOrUpdate/sections/SmartListReview.tsx
@@ -0,0 +1,68 @@
+import { Label, Text } from '@stump/components'
+import { useLocaleContext } from '@stump/i18n'
+import { useFormContext } from 'react-hook-form'
+
+import { ReviewStepContainer } from '@/components/steppedForm'
+
+import FilterConfigJSON from './FilterConfigJSON'
+import { SmartListFormSchema } from '../schema'
+
+export default function SmartListReview() {
+	const form = useFormContext<SmartListFormSchema>()
+	const state = form.watch()
+
+	const { t } = useLocaleContext()
+
+	return (
+		<div className="flex flex-col space-y-8">
+			<ReviewStepContainer
+				label={t(getStepKey(1, 'heading'))}
+				description={t(getStepKey(1, 'description'))}
+			>
+				<div>
+					<Label>{t(getLabelKey('name'))}</Label>
+					<Text variant="muted" size="sm">
+						{state.name}
+					</Text>
+				</div>
+
+				<div>
+					<Label>{t(getLabelKey('description'))}</Label>
+					<Text variant="muted" size="sm">
+						{state.description || 'None'}
+					</Text>
+				</div>
+
+				<div>
+					<Label>{t(getLabelKey('visibility'))}</Label>
+					<Text variant="muted" size="sm">
+						{state.visibility}
+					</Text>
+				</div>
+			</ReviewStepContainer>
+
+			<ReviewStepContainer
+				label={t(getStepKey(2, 'heading'))}
+				description={t(getStepKey(2, 'description'))}
+			>
+				<div>
+					<Label>{t(getLabelKey('grouping'))}</Label>
+					<Text variant="muted" size="sm">
+						{state.grouping}
+					</Text>
+				</div>
+			</ReviewStepContainer>
+
+			<div className="grid grid-cols-9">
+				<div className="col-span-9 md:col-span-6">
+					<FilterConfigJSON />
+				</div>
+			</div>
+		</div>
+	)
+}
+
+const LOCALE_KEY = 'createSmartListScene.form'
+const getStepKey = (step: number, key: string) => `${LOCALE_KEY}.steps.${step - 1}.${key}`
+const getKey = (key: string) => `${LOCALE_KEY}.review.${key}`
+const getLabelKey = (key: string) => getKey(`labels.${key}`)
diff --git a/packages/browser/src/components/smartList/createOrUpdate/sections/index.ts b/packages/browser/src/components/smartList/createOrUpdate/sections/index.ts
new file mode 100644
index 000000000..ef2b92d0f
--- /dev/null
+++ b/packages/browser/src/components/smartList/createOrUpdate/sections/index.ts
@@ -0,0 +1,4 @@
+export { default as AccessSettings } from './AccessSettings'
+export { default as BasicDetails } from './BasicDetails'
+export { default as FilterConfigJSON } from './FilterConfigJSON'
+export { default as SmartListReview } from './SmartListReview'
diff --git a/packages/browser/src/components/smartList/index.ts b/packages/browser/src/components/smartList/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/browser/src/hooks/useRouteGroups.ts b/packages/browser/src/hooks/useRouteGroups.ts
index dd752c17d..d717bf319 100644
--- a/packages/browser/src/hooks/useRouteGroups.ts
+++ b/packages/browser/src/hooks/useRouteGroups.ts
@@ -18,6 +18,7 @@ type Route = {
 	label: string
 	localeKey: string
 	permission?: UserPermission
+	customPermission?: () => boolean
 	to: string
 	subItems?: SubItem[]
 	disabled?: boolean
diff --git a/packages/browser/src/scenes/createLibrary/CreateLibraryScene.tsx b/packages/browser/src/scenes/createLibrary/CreateLibraryScene.tsx
index d966832b6..5db2d65c5 100644
--- a/packages/browser/src/scenes/createLibrary/CreateLibraryScene.tsx
+++ b/packages/browser/src/scenes/createLibrary/CreateLibraryScene.tsx
@@ -6,12 +6,14 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router'
 
 import { SceneContainer } from '@/components/container'
-import { CreateLibraryForm, CreateOrUpdateLibrarySchema } from '@/components/library/createOrUpdate'
+import { CreateOrUpdateLibrarySchema } from '@/components/library/createOrUpdate'
 import { SteppedFormContext } from '@/components/steppedForm'
 import SteppedFormSceneHeader from '@/components/steppedForm/SteppedFormSceneHeader'
 import { useConfetti } from '@/hooks/useConfetti'
 import paths from '@/paths'
 
+import CreateLibraryForm from './CreateLibraryForm'
+
 export default function CreateLibraryScene() {
 	const navigate = useNavigate()
 
@@ -82,7 +84,6 @@ export default function CreateLibraryScene() {
 					stepsBeforeReview: 3,
 				}}
 			>
-				{/* <CreateLibraryHeader /> */}
 				<SteppedFormSceneHeader />
 
 				<SceneContainer>
diff --git a/packages/browser/src/scenes/createSmartList/CreateSmartListForm.tsx b/packages/browser/src/scenes/createSmartList/CreateSmartListForm.tsx
new file mode 100644
index 000000000..a3c9b244a
--- /dev/null
+++ b/packages/browser/src/scenes/createSmartList/CreateSmartListForm.tsx
@@ -0,0 +1,140 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useSmartListsQuery } from '@stump/client'
+import { Button, cn, Form } from '@stump/components'
+import { useLocaleContext } from '@stump/i18n'
+import React, { useCallback } from 'react'
+import { useForm } from 'react-hook-form'
+
+import { ContentContainer } from '@/components/container'
+import { useSteppedFormContext } from '@/components/steppedForm'
+
+import { SmartListQueryBuilder } from '../../components/smartList/createOrUpdate/queryBuilder'
+import { createSchema, SmartListFormSchema } from '../../components/smartList/createOrUpdate/schema'
+import AccessSettings from '../../components/smartList/createOrUpdate/sections/AccessSettings'
+import BasicDetails from '../../components/smartList/createOrUpdate/sections/BasicDetails'
+import SmartListReview from '../../components/smartList/createOrUpdate/sections/SmartListReview'
+
+type Props = {
+	onSubmit: (values: SmartListFormSchema) => void
+	isLoading?: boolean
+}
+
+export default function CreateSmartListForm({ onSubmit, isLoading }: Props) {
+	const { t } = useLocaleContext()
+	const { currentStep, setStep } = useSteppedFormContext()
+
+	const { lists } = useSmartListsQuery({
+		params: {
+			mine: true,
+		},
+		suspense: true,
+	})
+
+	const form = useForm<SmartListFormSchema>({
+		defaultValues: {
+			filters: {
+				groups: [],
+				joiner: 'and',
+			},
+			visibility: 'PRIVATE',
+		},
+		resolver: zodResolver(createSchema(lists?.map(({ name }) => name) ?? [], t)),
+	})
+
+	/**
+	 * A callback to handle changing the form step. This will validate the current step
+	 * before moving to the next step.
+	 */
+	const handleChangeStep = useCallback(
+		async (nextStep: number) => {
+			let isValid = false
+
+			switch (currentStep) {
+				case 1:
+					isValid = await form.trigger(['name', 'description', 'visibility'])
+					break
+				case 2:
+					isValid = await form.trigger(['filters.groups', 'filters.joiner'])
+					break
+				default:
+					break
+			}
+
+			if (isValid) {
+				setStep(nextStep)
+			}
+		},
+		[form, currentStep, setStep],
+	)
+
+	/**
+	 * Render the current step of the form
+	 */
+	const renderStep = () => {
+		switch (currentStep) {
+			case 1:
+				return (
+					<>
+						<BasicDetails />
+						<AccessSettings isCreating />
+
+						<div className="mt-6 flex w-full md:max-w-sm">
+							<Button
+								className="w-full md:w-auto"
+								variant="primary"
+								onClick={() => handleChangeStep(2)}
+							>
+								Next step
+							</Button>
+						</div>
+					</>
+				)
+			case 2:
+				return (
+					<>
+						<SmartListQueryBuilder />
+
+						<div className="mt-6 flex w-full md:max-w-sm">
+							<Button
+								className="w-full md:w-auto"
+								variant="primary"
+								onClick={() => handleChangeStep(3)}
+							>
+								Next step
+							</Button>
+						</div>
+					</>
+				)
+			default:
+				return (
+					<>
+						<SmartListReview />
+					</>
+				)
+		}
+	}
+
+	return (
+		<Form form={form} onSubmit={onSubmit} id="createSmartListForm">
+			<ContentContainer className="mt-0">
+				{renderStep()}
+
+				<div
+					className={cn('mt-6 flex w-full md:max-w-sm', {
+						'invisible hidden': currentStep < 3,
+					})}
+				>
+					<Button
+						type="submit"
+						form="createSmartListForm"
+						className="w-full md:w-auto"
+						variant="primary"
+						isLoading={isLoading}
+					>
+						Create list
+					</Button>
+				</div>
+			</ContentContainer>
+		</Form>
+	)
+}
diff --git a/packages/browser/src/scenes/createSmartList/CreateSmartListScene.tsx b/packages/browser/src/scenes/createSmartList/CreateSmartListScene.tsx
new file mode 100644
index 000000000..5b43c256f
--- /dev/null
+++ b/packages/browser/src/scenes/createSmartList/CreateSmartListScene.tsx
@@ -0,0 +1,63 @@
+import { useCreateSmartList } from '@stump/client'
+import { Alert } from '@stump/components'
+import { handleApiError } from '@stump/sdk'
+import React, { Suspense, useCallback, useMemo, useState } from 'react'
+import { useNavigate } from 'react-router'
+
+import { SceneContainer } from '@/components/container'
+import { SteppedFormContext } from '@/components/steppedForm'
+import SteppedFormSceneHeader from '@/components/steppedForm/SteppedFormSceneHeader'
+import paths from '@/paths'
+
+import { intoAPI, SmartListFormSchema } from '../../components/smartList/createOrUpdate/schema'
+import CreateSmartListForm from './CreateSmartListForm'
+
+export default function CreateSmartListScene() {
+	const navigate = useNavigate()
+
+	const { create, isCreating, error } = useCreateSmartList({
+		onSuccess: ({ id }) => {
+			navigate(paths.smartList(id))
+		},
+	})
+	const createError = useMemo(() => (error ? handleApiError(error) : undefined), [error])
+
+	const [formStep, setFormStep] = useState(1)
+
+	/**
+	 * A function which will handle the submission of the form, creating a new library
+	 * provided the form values. Note the transformation of certain values.
+	 */
+	const handleSubmit = useCallback(
+		(values: SmartListFormSchema) => {
+			const payload = intoAPI(values)
+			create(payload)
+		},
+		[create],
+	)
+
+	return (
+		<div className="relative flex flex-1 flex-col">
+			<SteppedFormContext.Provider
+				value={{
+					currentStep: formStep,
+					localeBase: 'createSmartListScene',
+					setStep: setFormStep,
+					stepsBeforeReview: 3,
+				}}
+			>
+				<SteppedFormSceneHeader />
+
+				<SceneContainer>
+					<div className="flex flex-col gap-12">
+						{createError && <Alert level="error">{createError}</Alert>}
+
+						<Suspense>
+							<CreateSmartListForm onSubmit={handleSubmit} isLoading={isCreating} />
+						</Suspense>
+					</div>
+				</SceneContainer>
+			</SteppedFormContext.Provider>
+		</div>
+	)
+}
diff --git a/packages/browser/src/scenes/createSmartList/index.ts b/packages/browser/src/scenes/createSmartList/index.ts
new file mode 100644
index 000000000..87a319209
--- /dev/null
+++ b/packages/browser/src/scenes/createSmartList/index.ts
@@ -0,0 +1 @@
+export { default } from './CreateSmartListScene'
diff --git a/packages/browser/src/scenes/library/tabs/settings/LibrarySettingsRouter.tsx b/packages/browser/src/scenes/library/tabs/settings/LibrarySettingsRouter.tsx
index 6a77c8f87..3275f128c 100644
--- a/packages/browser/src/scenes/library/tabs/settings/LibrarySettingsRouter.tsx
+++ b/packages/browser/src/scenes/library/tabs/settings/LibrarySettingsRouter.tsx
@@ -1,6 +1,6 @@
 import { useUpdateLibrary } from '@stump/client'
 import { UpdateLibrary } from '@stump/types'
-import React, { useCallback } from 'react'
+import React, { Suspense, useCallback } from 'react'
 import { Navigate, Route, Routes } from 'react-router'
 
 import { useLibraryContext } from '../../context'
@@ -50,19 +50,21 @@ export default function LibrarySettingsRouter() {
 				patch,
 			}}
 		>
-			<Routes>
-				<Route path="" element={<Navigate to="basics" replace />} />
-				<Route path="basics" element={<BasicSettingsScene />} />
+			<Suspense>
+				<Routes>
+					<Route path="" element={<Navigate to="basics" replace />} />
+					<Route path="basics" element={<BasicSettingsScene />} />
 
-				<Route path="reading" element={<LibraryReadingDefaultsScene />} />
-				<Route path="scanning" element={<ScannerBehaviorScene />} />
-				<Route path="thumbnails" element={<ThumbnailSettingsScene />} />
-				<Route path="analysis" element={<LibraryAnalysisScene />} />
+					<Route path="reading" element={<LibraryReadingDefaultsScene />} />
+					<Route path="scanning" element={<ScannerBehaviorScene />} />
+					<Route path="thumbnails" element={<ThumbnailSettingsScene />} />
+					<Route path="analysis" element={<LibraryAnalysisScene />} />
 
-				<Route path="" element={<Navigate to="access-control" replace />} />
-				<Route path="access-control" element={<AccessControlScene />} />
-				<Route path="delete" element={<DeletionScene />} />
-			</Routes>
+					<Route path="" element={<Navigate to="access-control" replace />} />
+					<Route path="access-control" element={<AccessControlScene />} />
+					<Route path="delete" element={<DeletionScene />} />
+				</Routes>
+			</Suspense>
 		</LibraryManagementContext.Provider>
 	)
 }
diff --git a/packages/browser/src/scenes/smartList/SmartListCard.tsx b/packages/browser/src/scenes/smartList/SmartListCard.tsx
index f92459aa8..e99c560e8 100644
--- a/packages/browser/src/scenes/smartList/SmartListCard.tsx
+++ b/packages/browser/src/scenes/smartList/SmartListCard.tsx
@@ -25,7 +25,7 @@ export default function SmartListCard({
 		description,
 	},
 }: Props) {
-	const { prefetch } = usePrefetchSmartList({ id })
+	const { prefetch } = usePrefetchSmartList()
 	const { t } = useLocaleContext()
 	const { meta } = useSmartListMetaQuery({
 		/**
@@ -112,7 +112,7 @@ export default function SmartListCard({
 		<Link to={paths.smartList(id)} className="block w-full">
 			<Card
 				className="flex h-32 w-full flex-col gap-y-4 rounded-none border-none bg-background-surface p-4 transition-colors duration-150 first:rounded-t-sm last:rounded-b-sm hover:bg-background-surface-hover/80"
-				onMouseEnter={() => prefetch}
+				onMouseEnter={() => prefetch({ id })}
 			>
 				<div className="flex flex-col gap-y-1.5">
 					<Text>{name}</Text>
diff --git a/packages/browser/src/scenes/smartList/SmartListRouter.tsx b/packages/browser/src/scenes/smartList/SmartListRouter.tsx
index 8f50f9f80..0dd7c2c8f 100644
--- a/packages/browser/src/scenes/smartList/SmartListRouter.tsx
+++ b/packages/browser/src/scenes/smartList/SmartListRouter.tsx
@@ -7,7 +7,7 @@ import UserSmartListLayout from './UserSmartListLayout.tsx'
 import UserSmartListRouter from './UserSmartListRouter.tsx'
 
 const UserSmartListsScene = lazy(() => import('./UserSmartListsScene.tsx'))
-const CreateSmartListScene = lazy(() => import('./create-or-update/CreateSmartListScene.tsx'))
+const CreateSmartListScene = lazy(() => import('../createSmartList/CreateSmartListScene.tsx'))
 
 export default function SmartListRouter() {
 	const { checkPermission } = useAppContext()
diff --git a/packages/browser/src/scenes/smartList/UserSmartListLayout.tsx b/packages/browser/src/scenes/smartList/UserSmartListLayout.tsx
index 01aa6e26a..845ac999a 100644
--- a/packages/browser/src/scenes/smartList/UserSmartListLayout.tsx
+++ b/packages/browser/src/scenes/smartList/UserSmartListLayout.tsx
@@ -1,17 +1,24 @@
 import {
 	useSmartListViewsManager,
 	useSmartListWithMetaQuery,
-	useUpdateSmartListMutation,
+	useUpdateSmartList,
 } from '@stump/client'
+import { cn } from '@stump/components'
 import { useLocaleContext } from '@stump/i18n'
 import { AccessRole, SmartList, SmartListView } from '@stump/types'
 import React, { Suspense, useCallback, useEffect, useMemo, useState } from 'react'
 import toast from 'react-hot-toast'
-import { Outlet, useParams } from 'react-router'
+import { Outlet, useLocation, useParams } from 'react-router'
+import { useMediaMatch } from 'rooks'
 
+import { SceneContainer } from '@/components/container'
+import { GenericSettingsHeader } from '@/components/settings'
 import { useAppContext } from '@/context'
+import { usePreferences } from '@/hooks/usePreferences'
 
 import { defaultWorkingView, SmartListContext, WorkingView } from './context'
+import { createRouteGroups } from './settings/routes'
+import SmartListSettingsSideBar from './settings/SmartListSettingsSideBar'
 import UserSmartListHeader from './UserSmartListHeader'
 import UserSmartListNavigation from './UserSmartListNavigation'
 
@@ -19,6 +26,8 @@ const LOCALE_BASE_KEY = 'userSmartListScene.layout'
 const withLocaleKey = (key: string) => `${LOCALE_BASE_KEY}.${key}`
 
 export default function UserSmartListLayout() {
+	const location = useLocation()
+
 	const { id } = useParams<{ id: string }>()
 	const { t } = useLocaleContext()
 
@@ -27,6 +36,21 @@ export default function UserSmartListLayout() {
 	const [selectedView, setSelectedView] = useState<SmartListView>()
 	const [workingView, setWorkingView] = useState<WorkingView>()
 
+	const {
+		preferences: {
+			enable_double_sidebar,
+			primary_navigation_mode,
+			layout_max_width_px,
+			enable_hide_scrollbar,
+		},
+	} = usePreferences()
+
+	const isSettings = useMemo(() => location.pathname.includes('settings'), [location.pathname])
+	const isMobile = useMediaMatch('(max-width: 768px)')
+
+	const displaySideBar = !!enable_double_sidebar && !isMobile && isSettings
+	const preferTopBar = primary_navigation_mode === 'TOPBAR'
+
 	useEffect(() => {
 		localStorage.setItem(LAYOUT_PREFERENCE_KEY, layout)
 	}, [layout])
@@ -52,7 +76,7 @@ export default function UserSmartListLayout() {
 			load_views: true,
 		},
 	})
-	const { updateAsync } = useUpdateSmartListMutation({ id })
+	const { updateAsync } = useUpdateSmartList({ id })
 	const { createView, updateView } = useSmartListViewsManager({ listId: id })
 	const { user } = useAppContext()
 
@@ -163,6 +187,19 @@ export default function UserSmartListLayout() {
 		[selectedView, workingView, updateView, t],
 	)
 
+	const renderHeader = () =>
+		isSettings ? (
+			<GenericSettingsHeader
+				localeBase="smartListSettingsScene"
+				routeGroups={createRouteGroups(viewerRole)}
+			/>
+		) : (
+			<>
+				<UserSmartListHeader />
+				<UserSmartListNavigation />
+			</>
+		)
+
 	if (isLoadingList) {
 		return null
 	}
@@ -189,11 +226,31 @@ export default function UserSmartListLayout() {
 				workingView,
 			}}
 		>
-			<UserSmartListHeader />
-			<UserSmartListNavigation />
-			<Suspense fallback={null}>
-				<Outlet />
-			</Suspense>
+			<div
+				className={cn('relative flex flex-1 flex-col', {
+					'mx-auto w-full': preferTopBar && !!layout_max_width_px,
+				})}
+				style={{
+					maxWidth: preferTopBar ? layout_max_width_px || undefined : undefined,
+				}}
+			>
+				{renderHeader()}
+
+				{displaySideBar && <SmartListSettingsSideBar />}
+
+				<SceneContainer
+					className={cn('relative flex flex-1 flex-col gap-4 md:pb-0', {
+						'md:hide-scrollbar': !!enable_hide_scrollbar,
+						'p-0': !isSettings,
+						// pl-48 is for the sidebar, plus pl-4 for the padding
+						'pl-52': displaySideBar,
+					})}
+				>
+					<Suspense fallback={null}>
+						<Outlet />
+					</Suspense>
+				</SceneContainer>
+			</div>
 		</SmartListContext.Provider>
 	)
 }
diff --git a/packages/browser/src/scenes/smartList/UserSmartListRouter.tsx b/packages/browser/src/scenes/smartList/UserSmartListRouter.tsx
index 2e092edb4..6ed29be15 100644
--- a/packages/browser/src/scenes/smartList/UserSmartListRouter.tsx
+++ b/packages/browser/src/scenes/smartList/UserSmartListRouter.tsx
@@ -2,8 +2,8 @@ import React, { lazy, Suspense } from 'react'
 import { Navigate, Route, Routes } from 'react-router'
 
 import { useSmartListContext } from './context.ts'
+import SmartListSettingsRouter from './settings/SmartListSettingsRouter.tsx'
 
-const UserSmartListSettingsScene = lazy(() => import('./settings/UserSmartListSettingsScene.tsx'))
 const UserSmartListItemsScene = lazy(() => import('./items/UserSmartListItemsScene.tsx'))
 
 export default function UserSmartListRouter() {
@@ -17,8 +17,8 @@ export default function UserSmartListRouter() {
 				<Route path="" element={<Navigate to="items" replace />} />
 				<Route path="items" element={<UserSmartListItemsScene />} />
 				<Route
-					path="settings"
-					element={isWriter ? <UserSmartListSettingsScene /> : <Navigate to=".." replace />}
+					path="settings/*"
+					element={isWriter ? <SmartListSettingsRouter /> : <Navigate to=".." replace />}
 				/>
 			</Routes>
 		</Suspense>
diff --git a/packages/browser/src/scenes/smartList/create-or-update/CreateSmartListHeader.tsx b/packages/browser/src/scenes/smartList/create-or-update/CreateSmartListHeader.tsx
deleted file mode 100644
index 92673d774..000000000
--- a/packages/browser/src/scenes/smartList/create-or-update/CreateSmartListHeader.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { cn, Heading, Text } from '@stump/components'
-import React from 'react'
-
-import { usePreferences } from '@/hooks'
-
-export default function CreateSmartListHeader() {
-	const {
-		preferences: { primary_navigation_mode, layout_max_width_px },
-	} = usePreferences()
-
-	const preferTopBar = primary_navigation_mode === 'TOPBAR'
-
-	return (
-		<header
-			className={cn('flex h-24 w-full flex-col gap-y-4 p-4', {
-				'mx-auto': preferTopBar && !!layout_max_width_px,
-			})}
-			style={{
-				maxWidth: preferTopBar ? layout_max_width_px || undefined : undefined,
-			}}
-		>
-			<div>
-				<Heading size="lg" bold>
-					Create smart list
-				</Heading>
-				<Text size="md" variant="muted">
-					A smart list allows for on-the-fly list creation based on a set of filters
-				</Text>
-			</div>
-		</header>
-	)
-}
diff --git a/packages/browser/src/scenes/smartList/create-or-update/CreateSmartListScene.tsx b/packages/browser/src/scenes/smartList/create-or-update/CreateSmartListScene.tsx
deleted file mode 100644
index c155eeded..000000000
--- a/packages/browser/src/scenes/smartList/create-or-update/CreateSmartListScene.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-
-import { SceneContainer } from '@/components/container'
-
-import CreateSmartListHeader from './CreateSmartListHeader'
-import { CreateSmartListForm } from './form'
-
-export default function CreateSmartListScene() {
-	return (
-		<>
-			<CreateSmartListHeader />
-			<SceneContainer>
-				<CreateSmartListForm />
-			</SceneContainer>
-		</>
-	)
-}
diff --git a/packages/browser/src/scenes/smartList/create-or-update/form/AccessSettings.tsx b/packages/browser/src/scenes/smartList/create-or-update/form/AccessSettings.tsx
deleted file mode 100644
index 6cedea7c2..000000000
--- a/packages/browser/src/scenes/smartList/create-or-update/form/AccessSettings.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Heading, Label, NativeSelect, Text } from '@stump/components'
-import React from 'react'
-import { useFormContext } from 'react-hook-form'
-import { match } from 'ts-pattern'
-
-import { Schema } from './schema'
-
-type SubSchema = Pick<Schema, 'visibility'>
-
-export default function AccessSettings() {
-	const form = useFormContext<SubSchema>()
-
-	const visibility = form.watch('visibility')
-
-	const renderVisibilityHelp = () =>
-		match(visibility)
-			.with('PUBLIC', () => 'This smart list is visible to everyone')
-			.with('SHARED', () => 'This smart list is visible to anyone you explicitly share it with')
-			.with('PRIVATE', () => 'This smart list is only visible to you')
-			.exhaustive()
-
-	return (
-		<div className="flex flex-col gap-y-6">
-			<div>
-				<Heading size="md">Access</Heading>
-				<Text variant="muted" size="sm">
-					Define the access settings for this smart list. Some options are made available once
-					created in settings
-				</Text>
-			</div>
-
-			<div className="flex max-w-xs flex-col gap-y-1.5">
-				<Label>Visibility</Label>
-				<NativeSelect
-					options={[
-						{ label: 'Public', value: 'PUBLIC' },
-						{ label: 'Shared', value: 'SHARED' },
-						{ label: 'Private', value: 'PRIVATE' },
-					]}
-					{...form.register('visibility')}
-				/>
-				<Text variant="muted" size="sm">
-					{renderVisibilityHelp()}
-				</Text>
-			</div>
-		</div>
-	)
-}
diff --git a/packages/browser/src/scenes/smartList/create-or-update/form/BasicDetails.tsx b/packages/browser/src/scenes/smartList/create-or-update/form/BasicDetails.tsx
deleted file mode 100644
index ae6ebb1f1..000000000
--- a/packages/browser/src/scenes/smartList/create-or-update/form/BasicDetails.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Heading, Input, Text, TextArea } from '@stump/components'
-import React from 'react'
-import { useFormContext } from 'react-hook-form'
-
-import { Schema } from './schema'
-
-type SubSchema = Pick<Schema, 'name' | 'description'>
-
-type Props = {
-	isUpdate?: boolean
-}
-export default function BasicDetails({ isUpdate }: Props) {
-	const form = useFormContext<SubSchema>()
-
-	return (
-		<div className="flex flex-col gap-y-6">
-			<div>
-				<Heading size="md">Basic details</Heading>
-				<Text variant="muted" size="sm">
-					{isUpdate ? 'Change' : 'Enter'} the name, description, and other basic details for this
-					smart list
-				</Text>
-			</div>
-
-			<Input
-				label="Name"
-				variant="primary"
-				description={!isUpdate ? 'Must be unique, but can be changed later' : undefined}
-				errorMessage={form.formState.errors.name?.message}
-				{...form.register('name')}
-			/>
-			<TextArea
-				label="Description"
-				variant="primary"
-				className="md:w-3/5"
-				{...form.register('description')}
-			/>
-		</div>
-	)
-}
diff --git a/packages/browser/src/scenes/smartList/create-or-update/form/CreateSmartListForm.tsx b/packages/browser/src/scenes/smartList/create-or-update/form/CreateSmartListForm.tsx
deleted file mode 100644
index 74cd9528f..000000000
--- a/packages/browser/src/scenes/smartList/create-or-update/form/CreateSmartListForm.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Alert, Form, Link } from '@stump/components'
-import { Construction } from 'lucide-react'
-import React from 'react'
-import { useForm, UseFormReturn } from 'react-hook-form'
-
-import { ContentContainer } from '@/components/container'
-
-import AccessSettings from './AccessSettings'
-import BasicDetails from './BasicDetails'
-import FilterConfiguration from './FilterConfiguration'
-import { Schema } from './schema'
-
-const IS_DEVELOPMENT = import.meta.env.DEV
-
-// TODO: share these form components with the update/settings!!!!!!!!!!!!
-export default function CreateSmartListForm() {
-	const form = useForm<Schema>({
-		defaultValues: {
-			filters: {
-				groups: [
-					{
-						filters: [
-							// {
-							// 	name: 'test-1',
-							// },
-							// {
-							// 	name: 'test-2',
-							// },
-						],
-						joiner: 'and',
-					},
-				],
-				joiner: 'AND',
-			},
-			visibility: 'PRIVATE',
-		},
-	})
-
-	const handleSubmit = async (data: Schema) => {
-		console.debug('Create smart list', { data })
-	}
-
-	return (
-		<>
-			<Alert level="warning" icon={Construction} rounded="sm">
-				<Alert.Content>
-					<span>
-						Smart list creation is not yet implemented on the UI. To learn how you can use the API
-						to create a smart list, visit the{' '}
-						<Link href="https://stumpapp.dev/guides/smart-lists">docs</Link>
-					</span>
-				</Alert.Content>
-			</Alert>
-			<Form form={form} onSubmit={handleSubmit}>
-				<ContentContainer>
-					<BasicDetails />
-					{IS_DEVELOPMENT && <FilterConfiguration />}
-					<AccessSettings />
-				</ContentContainer>
-			</Form>
-		</>
-	)
-}
-
-export type CreateSmartListForm = UseFormReturn<Schema>
diff --git a/packages/browser/src/scenes/smartList/create-or-update/form/FilterConfiguration.tsx b/packages/browser/src/scenes/smartList/create-or-update/form/FilterConfiguration.tsx
deleted file mode 100644
index 57d595b46..000000000
--- a/packages/browser/src/scenes/smartList/create-or-update/form/FilterConfiguration.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import {
-	Accordion,
-	Button,
-	Card,
-	Heading,
-	IconButton,
-	Label,
-	NativeSelect,
-	Text,
-	ToolTip,
-} from '@stump/components'
-import { MinusCircle } from 'lucide-react'
-import React, { useMemo } from 'react'
-import { useFieldArray, useFormContext } from 'react-hook-form'
-
-import { defaultMediaFilter, Schema, toAPIFilters } from './schema'
-
-export default function FilterConfiguration() {
-	const form = useFormContext<Schema>()
-	const { append, remove } = useFieldArray<Schema>({
-		name: 'filters.groups',
-	})
-
-	const [formGroups, joiner] = form.watch(['filters.groups', 'filters.joiner'])
-	const apiFilters = useMemo(
-		() =>
-			toAPIFilters({
-				groups: formGroups ?? [],
-				joiner: joiner ?? 'AND',
-			}),
-		[formGroups, joiner],
-	)
-	const formattedFilters = useMemo(() => JSON.stringify(apiFilters, null, 2), [apiFilters])
-
-	const handleAddGroup = () => append({ filters: [], joiner: 'and' })
-	const handleRemoveGroup = (index: number) => remove(index)
-
-	const groupCount = formGroups.length
-
-	return (
-		<div className="flex flex-col gap-y-6">
-			<div>
-				<Heading size="md">Configuration</Heading>
-				<Text variant="muted" size="sm">
-					Change the filters, sorting, and other settings for this smart list
-				</Text>
-			</div>
-
-			<Accordion type="single" collapsible>
-				<Accordion.Item value="raw_filters" className="border-none">
-					<Accordion.Trigger noUnderline asLabel>
-						<div className="flex flex-col items-start gap-y-1">
-							<span>Raw filters</span>
-							<Text variant="muted" size="sm">
-								A JSON representation of the filters
-							</Text>
-						</div>
-					</Accordion.Trigger>
-					<Accordion.Content className="rounded-sm bg-background-surface p-4">
-						<pre className="text-xs text-foreground-subtle">{formattedFilters}</pre>
-					</Accordion.Content>
-				</Accordion.Item>
-			</Accordion>
-
-			<div className="flex max-w-sm flex-col gap-y-1.5">
-				<Label>Top-level join method</Label>
-				<NativeSelect
-					options={[
-						{ label: 'All', value: 'AND' },
-						{ label: 'Any', value: 'OR' },
-					]}
-					{...form.register('filters.joiner')}
-				/>
-				<Text variant="muted" size="sm">
-					{joiner === 'AND'
-						? 'All filter groups must be true for a book to be matched'
-						: 'Any filter group must be true for a book to be matched'}
-				</Text>
-			</div>
-
-			<div>
-				<Label>Groups</Label>
-				<div className="mt-4 flex flex-col gap-y-6">
-					{form.getValues('filters.groups').map((_, index) => (
-						<FilterGroup
-							key={index}
-							groupIndex={index}
-							onRemove={groupCount > 1 ? () => handleRemoveGroup(index) : undefined}
-						/>
-					))}
-
-					<div>
-						<Button variant="ghost" onClick={handleAddGroup}>
-							Add group
-						</Button>
-					</div>
-				</div>
-			</div>
-		</div>
-	)
-}
-
-type FilterGroupProps = {
-	groupIndex: number
-	onRemove?: () => void
-}
-function FilterGroup({ groupIndex, onRemove }: FilterGroupProps) {
-	const form = useFormContext<Schema>()
-
-	const { filters, joiner } = form.watch(`filters.groups.${groupIndex}`)
-
-	const { append } = useFieldArray<Schema>({
-		name: `filters.groups.${groupIndex}.filters` as const,
-	})
-
-	return (
-		<Card key={groupIndex} className="relative flex flex-col gap-y-4 p-4">
-			<div className="flex flex-col gap-y-1.5">
-				<Label>Join method</Label>
-				<NativeSelect
-					options={[
-						{ label: 'All', value: 'and' },
-						{ label: 'Any', value: 'or' },
-						{ label: 'None', value: 'not' },
-					]}
-					className="md:w-36"
-					{...form.register(`filters.groups.${groupIndex}.joiner`)}
-				/>
-				<Text variant="muted" size="xs">
-					{joiner === 'and'
-						? 'All filters in this group must be true'
-						: joiner === 'or'
-							? 'Any one filter in this group can be true'
-							: 'None of the filters in this group can be true'}
-				</Text>
-			</div>
-
-			<div className="flex flex-col gap-y-4">
-				{filters.map((_, index) => (
-					<Filter
-						key={index}
-						groupIndex={groupIndex}
-						filterIndex={index}
-						// onRemove={filters.length > 1 ? () => {} : undefined}
-					/>
-				))}
-			</div>
-
-			<div>
-				<Button variant="ghost" onClick={() => append(defaultMediaFilter)}>
-					Add filter
-				</Button>
-			</div>
-
-			{onRemove && (
-				<div className="absolute right-0 top-0">
-					<ToolTip content="Remove group">
-						<IconButton
-							variant="ghost"
-							className="group hover:bg-background"
-							onClick={() => onRemove()}
-						>
-							<MinusCircle className="h-4 w-4 text-foreground-muted text-opacity-80 transition-opacity duration-150 group-hover:text-opacity-100" />
-						</IconButton>
-					</ToolTip>
-				</div>
-			)}
-		</Card>
-	)
-}
-
-type FilterProps = {
-	groupIndex: number
-	filterIndex: number
-	onRemove?: () => void
-}
-function Filter({ groupIndex, filterIndex }: FilterProps) {
-	const form = useFormContext<Schema>()
-
-	const filter = form.watch(`filters.groups.${groupIndex}.filters.${filterIndex}`)
-
-	return <div>{JSON.stringify(filter)}</div>
-}
diff --git a/packages/browser/src/scenes/smartList/create-or-update/form/index.ts b/packages/browser/src/scenes/smartList/create-or-update/form/index.ts
deleted file mode 100644
index 0ca593288..000000000
--- a/packages/browser/src/scenes/smartList/create-or-update/form/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as CreateSmartListForm } from './CreateSmartListForm'
diff --git a/packages/browser/src/scenes/smartList/create-or-update/form/schema.ts b/packages/browser/src/scenes/smartList/create-or-update/form/schema.ts
deleted file mode 100644
index 1704fafe9..000000000
--- a/packages/browser/src/scenes/smartList/create-or-update/form/schema.ts
+++ /dev/null
@@ -1,185 +0,0 @@
-// export type NumericFilter<T> = { gt: T } | { gte: T } | { lt: T } | { lte: T } | NumericRange<T>
-
-import { MediaSmartFilter, SmartFilter } from '@stump/types'
-import { match, P } from 'ts-pattern'
-import { z } from 'zod'
-
-// TODO: support friendly names for filter groups
-
-// export type NumericRange<T> = { from: T; to: T; inclusive?: boolean }
-export const numericFilterSchema = z.union([
-	z.object({
-		gt: z.number(),
-	}),
-	z.object({
-		gte: z.number(),
-	}),
-	z.object({
-		lt: z.number(),
-	}),
-	z.object({
-		lte: z.number(),
-	}),
-	z.object({
-		from: z.number(),
-		inclusive: z.boolean().optional(),
-		to: z.number(),
-	}),
-])
-
-// export type Filter<T> = T | { not: T } | { contains: T } | { excludes: T } | { any: T[] } | { none: T[] } | NumericFilter<T>
-export const buildFilterSchema = <T extends z.ZodTypeAny>(type: T) =>
-	z.union([
-		type,
-		z.object({
-			not: type,
-		}),
-		z.object({
-			contains: type,
-		}),
-		z.object({
-			excludes: type,
-		}),
-		z.object({
-			any: z.array(type),
-		}),
-		z.object({
-			none: z.array(type),
-		}),
-		...(type._def.typeName === 'number' ? [numericFilterSchema] : []),
-	])
-
-export const stringFilter = buildFilterSchema(z.string())
-
-// export type MediaSmartFilter = { name: Filter<string> } | { metadata: MediaMetadataSmartFilter } | { series: SeriesSmartFilter }
-
-// export type LibrarySmartFilter = { name: Filter<string> } | { path: Filter<string> }
-export const libraryFilter = z.union([
-	z.object({
-		name: stringFilter,
-	}),
-	z.object({
-		path: stringFilter,
-	}),
-])
-
-// export type SeriesSmartFilter = { name: Filter<string> } | { library: LibrarySmartFilter }
-export const seriesFilter = z.union([
-	z.object({
-		name: stringFilter,
-	}),
-	z.object({
-		library: libraryFilter,
-	}),
-])
-
-// export type MediaMetadataSmartFilter = { publisher: Filter<string> } | { genre: Filter<string> } | { character: Filter<string> } | { colorist: Filter<string> } | { writer: Filter<string> } | { penciller: Filter<string> } | { letterer: Filter<string> } | { inker: Filter<string> } | { editor: Filter<string> } | { age_rating: Filter<number> }
-export const mediaMetadataFilter = z.union([
-	z.object({
-		publisher: stringFilter,
-	}),
-	z.object({
-		genre: stringFilter,
-	}),
-	z.object({
-		character: stringFilter,
-	}),
-	z.object({
-		colorist: stringFilter,
-	}),
-	z.object({
-		writer: stringFilter,
-	}),
-	z.object({
-		penciller: stringFilter,
-	}),
-	z.object({
-		letterer: stringFilter,
-	}),
-	z.object({
-		inker: stringFilter,
-	}),
-	z.object({
-		editor: stringFilter,
-	}),
-	z.object({
-		age_rating: numericFilterSchema,
-	}),
-])
-
-// export type MediaSmartFilter = { name: Filter<string> } | { metadata: MediaMetadataSmartFilter } | { series: SeriesSmartFilter }
-export const mediaFilter = z.union([
-	z.object({
-		name: stringFilter,
-	}),
-	z.object({
-		metadata: mediaMetadataFilter,
-	}),
-	z.object({
-		series: seriesFilter,
-	}),
-])
-export type MediaFilterSchema = z.infer<typeof mediaFilter>
-
-export const defaultMediaFilter = mediaFilter.parse({
-	name: '',
-})
-
-// export type FilterGroup<T> = { and: T[] } | { or: T[] } | { not: T[] }
-export const filterGroup = z.object({
-	filters: z.array(mediaFilter),
-	joiner: z.union([z.literal('and'), z.literal('or'), z.literal('not')]),
-})
-export type FilterGroupSchema = z.infer<typeof filterGroup>
-
-// export type SmartFilter<T> = { groups: FilterGroup<T>[]; joiner?: FilterJoin }
-export const filters = z.object({
-	groups: z.array(filterGroup),
-	joiner: z.union([z.literal('AND'), z.literal('OR')]),
-})
-
-export const schema = z.object({
-	description: z.string().optional(),
-	filters: filters,
-	name: z.string().min(1),
-	visibility: z.union([z.literal('PUBLIC'), z.literal('SHARED'), z.literal('PRIVATE')]),
-})
-
-// FIXME: I think this suffers from heavy recursive issues, zod has a guide for this:
-// https://github.com/colinhacks/zod?tab=readme-ov-file#recursive-types
-export type Schema = z.infer<typeof schema>
-
-// yikes
-export const toAPIFilters = ({
-	joiner,
-	groups,
-}: Schema['filters']): SmartFilter<MediaSmartFilter> => ({
-	groups: groups.flatMap(({ filters, joiner }) => {
-		return {
-			[joiner]: filters,
-		} as Record<'and' | 'or' | 'not', MediaSmartFilter[]>
-	}),
-	joiner,
-})
-
-// yikes
-export const fromAPIFilters = ({
-	groups,
-	joiner,
-}: SmartFilter<MediaSmartFilter>): Schema['filters'] => {
-	return {
-		groups: groups.map(
-			(group) =>
-				match(group)
-					.with({ and: P.array() }, ({ and }) => ({ filters: and, joiner: 'and' }))
-					.with({ or: P.array() }, ({ or }) => ({ filters: or, joiner: 'or' }))
-					.with({ not: P.array() }, ({ not }) => ({ filters: not, joiner: 'not' }))
-					.otherwise(() => ({ filters: [], joiner: 'and' })) as {
-					filters: z.infer<typeof filters>['groups'][number]['filters']
-					joiner: 'and' | 'or' | 'not'
-				},
-		),
-
-		joiner: joiner ?? 'AND',
-	}
-}
diff --git a/packages/browser/src/scenes/smartList/items/UserSmartListItemsScene.tsx b/packages/browser/src/scenes/smartList/items/UserSmartListItemsScene.tsx
index 2e098ec28..19020a12c 100644
--- a/packages/browser/src/scenes/smartList/items/UserSmartListItemsScene.tsx
+++ b/packages/browser/src/scenes/smartList/items/UserSmartListItemsScene.tsx
@@ -9,6 +9,7 @@ import { useSmartListContext } from '../context'
 import { GroupedSmartListItemList } from './list'
 import { GroupedSmartListItemTable, SmartListBookTable } from './table'
 
+// FIXME: performance of these tables is ass, it really just needs virtualization
 export default function UserSmartListItemsScene() {
 	const { t } = useLocaleContext()
 	const {
diff --git a/packages/browser/src/scenes/smartList/items/table/SavedViewSelector.tsx b/packages/browser/src/scenes/smartList/items/table/SavedViewSelector.tsx
index 67d869f87..40cfabcd8 100644
--- a/packages/browser/src/scenes/smartList/items/table/SavedViewSelector.tsx
+++ b/packages/browser/src/scenes/smartList/items/table/SavedViewSelector.tsx
@@ -69,7 +69,7 @@ export default function SavedViewSelector() {
 	return (
 		<NativeSelect
 			title={isDisabled ? translateKey('noViewsSaved') : translateKey('selectView')}
-			className="w-[185px]"
+			className="h-8 w-[185px] py-0"
 			options={options}
 			emptyOption={emptyOption}
 			disabled={isDisabled}
diff --git a/packages/browser/src/scenes/smartList/settings/AccessSettings.tsx b/packages/browser/src/scenes/smartList/settings/AccessSettings.tsx
deleted file mode 100644
index 1a94ac178..000000000
--- a/packages/browser/src/scenes/smartList/settings/AccessSettings.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Heading, Label, NativeSelect, Text } from '@stump/components'
-import { EntityVisibility } from '@stump/types'
-import React, { useCallback } from 'react'
-import { match } from 'ts-pattern'
-
-import { useSmartListContext } from '../context'
-
-export default function AccessSettings() {
-	const {
-		list: { visibility },
-		patchSmartList,
-	} = useSmartListContext()
-
-	const handleVisibilityChange = useCallback(
-		(value: EntityVisibility) => patchSmartList({ visibility: value }),
-		[patchSmartList],
-	)
-
-	const renderVisibilityHelp = () =>
-		match(visibility)
-			.with('PUBLIC', () => 'This smart list is visible to everyone')
-			.with('SHARED', () => 'This smart list is visible to anyone you explicitly share it with')
-			.with('PRIVATE', () => 'This smart list is only visible to you')
-			.exhaustive()
-
-	return (
-		<div className="flex flex-col gap-y-6">
-			<div>
-				<Heading size="md">Access</Heading>
-				<Text variant="muted" size="sm">
-					Share or unshare this smart list with other users
-				</Text>
-			</div>
-
-			<div
-				className="flex max-w-xs cursor-not-allowed flex-col gap-y-1.5"
-				title="This feature is not implemented yet!"
-			>
-				<Label className="text-opacity-50">Visibility</Label>
-				<NativeSelect
-					options={[
-						{ label: 'Public', value: 'PUBLIC' },
-						{ label: 'Shared', value: 'SHARED' },
-						{ label: 'Private', value: 'PRIVATE' },
-					]}
-					value={visibility}
-					onChange={(e) => handleVisibilityChange(e.target.value as EntityVisibility)}
-					disabled
-				/>
-				<Text variant="muted" size="sm" className="text-opacity-50">
-					{renderVisibilityHelp()}
-				</Text>
-			</div>
-		</div>
-	)
-}
diff --git a/packages/browser/src/scenes/smartList/settings/DangerSection.tsx b/packages/browser/src/scenes/smartList/settings/DangerSection.tsx
deleted file mode 100644
index 5c857db26..000000000
--- a/packages/browser/src/scenes/smartList/settings/DangerSection.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Alert, Button, Heading, Text } from '@stump/components'
-import React, { useState } from 'react'
-
-import DeleteSmartListConfirmation from './DeleteSmartListConfirmation'
-
-export default function DangerSection() {
-	const [showConfirmation, setShowConfirmation] = useState(false)
-
-	return (
-		<>
-			<div className="flex flex-col gap-y-6">
-				<div>
-					<Heading size="md">Danger</Heading>
-					<Text variant="muted" size="sm">
-						Destructive actions that cannot be undone
-					</Text>
-				</div>
-
-				<Alert level="error" icon="warning" rounded="sm" alignIcon="start">
-					<Alert.Content>
-						<div className="-mt-1 flex flex-col">
-							<Heading size="xs">Delete smart list</Heading>
-							<Text className="text-opacity-80" size="sm">
-								Permanently delete this smart list. This action cannot be undone
-							</Text>
-						</div>
-						<Button variant="danger" onClick={() => setShowConfirmation(true)}>
-							Delete
-						</Button>
-					</Alert.Content>
-				</Alert>
-			</div>
-
-			<DeleteSmartListConfirmation
-				isOpen={showConfirmation}
-				onClose={() => setShowConfirmation(false)}
-			/>
-		</>
-	)
-}
diff --git a/packages/browser/src/scenes/smartList/settings/DeleteSmartListConfirmation.tsx b/packages/browser/src/scenes/smartList/settings/DeleteSmartListConfirmation.tsx
deleted file mode 100644
index 234516110..000000000
--- a/packages/browser/src/scenes/smartList/settings/DeleteSmartListConfirmation.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useDeleteSmartListMutation } from '@stump/client'
-import { ConfirmationModal } from '@stump/components'
-import { isAxiosError } from '@stump/sdk'
-import React from 'react'
-import toast from 'react-hot-toast'
-import { useNavigate } from 'react-router'
-
-import paths from '@/paths'
-
-import { useSmartListContext } from '../context'
-
-type Props = {
-	isOpen: boolean
-	onClose: () => void
-}
-export default function DeleteSmartListConfirmation({ isOpen, onClose }: Props) {
-	const navigate = useNavigate()
-
-	const { list, viewerRole } = useSmartListContext()
-	const { deleteAsync, isDeleting } = useDeleteSmartListMutation({
-		onSuccess: () => {
-			navigate(paths.smartLists())
-		},
-	})
-
-	async function handleDelete() {
-		if (viewerRole === 'CoCreator') {
-			try {
-				await deleteAsync(list.id)
-				onClose()
-			} catch (err) {
-				console.error(err)
-
-				if (isAxiosError(err)) {
-					toast.error(err.message || 'An error occurred while deleting the list')
-				} else {
-					toast.error('An error occurred while deleting the list')
-				}
-			}
-		} else {
-			throw new Error('You do not have permission to delete this smart list')
-		}
-	}
-
-	return (
-		<ConfirmationModal
-			title="Delete list"
-			description="Are you sure you want to delete this list? This action cannot be undone."
-			confirmText="Delete list"
-			confirmVariant="danger"
-			isOpen={isOpen}
-			onClose={() => onClose()}
-			onConfirm={handleDelete}
-			confirmIsLoading={isDeleting}
-		/>
-	)
-}
diff --git a/packages/browser/src/scenes/smartList/settings/FilterConfiguration.tsx b/packages/browser/src/scenes/smartList/settings/FilterConfiguration.tsx
deleted file mode 100644
index 0f59fb00f..000000000
--- a/packages/browser/src/scenes/smartList/settings/FilterConfiguration.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Accordion, Alert, Heading, Text } from '@stump/components'
-import { Construction } from 'lucide-react'
-import React from 'react'
-
-import { useSmartListContext } from '../context'
-
-export default function FilterConfiguration() {
-	const {
-		list: { filters },
-	} = useSmartListContext()
-
-	return (
-		<div className="flex flex-col gap-y-6">
-			<div>
-				<Heading size="md">Configuration</Heading>
-				<Text variant="muted" size="sm">
-					Change the filters, sorting, and other settings for this smart list
-				</Text>
-			</div>
-
-			<Accordion type="single" collapsible>
-				<Accordion.Item value="raw_filters" className="border-none">
-					<Accordion.Trigger noUnderline asLabel>
-						Raw filters
-					</Accordion.Trigger>
-					<Accordion.Content className="rounded-sm bg-background-surface p-4">
-						<pre className="text-xs text-foreground-subtle">{JSON.stringify(filters, null, 2)}</pre>
-					</Accordion.Content>
-				</Accordion.Item>
-			</Accordion>
-
-			<Alert level="warning" icon={Construction} rounded="sm" alignIcon="start">
-				<Alert.Content>
-					<span>
-						Editing the configured filters is not yet implemented. To update your filters, please
-						use the Stump API directly
-					</span>
-				</Alert.Content>
-			</Alert>
-		</div>
-	)
-}
diff --git a/packages/browser/src/scenes/smartList/settings/SmartListSettingsRouter.tsx b/packages/browser/src/scenes/smartList/settings/SmartListSettingsRouter.tsx
new file mode 100644
index 000000000..7f758110d
--- /dev/null
+++ b/packages/browser/src/scenes/smartList/settings/SmartListSettingsRouter.tsx
@@ -0,0 +1,48 @@
+import { useUpdateSmartList } from '@stump/client'
+import { CreateOrUpdateSmartList } from '@stump/types'
+import React, { Suspense, useCallback } from 'react'
+import { Navigate, Route, Routes } from 'react-router'
+
+import { useSmartListContext } from '../context'
+import { SmartListSettingsContext } from './context'
+
+const BasicSettingsScene = React.lazy(() => import('./basics'))
+const AccessSettingsScene = React.lazy(() => import('./access'))
+const FiltersSettingsScene = React.lazy(() => import('./filters'))
+const DangerSettingsScene = React.lazy(() => import('./danger'))
+
+export default function SmartListSettingsRouter() {
+	const { list } = useSmartListContext()
+	const { update } = useUpdateSmartList({ id: list.id })
+
+	// TODO: This is particularly fallible. It would be a lot wiser to eventually just.. yknow, literally
+	// implement a patch endpoint lol. I'm being very lazy but I'll get to it. I'm tired!
+	/**
+	 * A pseudo-patch function which will update the list, mixing what is present in the cache
+	 * with the updates provided.
+	 */
+	const patch = useCallback(
+		(updates: Partial<CreateOrUpdateSmartList>) => {
+			const payload: CreateOrUpdateSmartList = {
+				...list,
+				...updates,
+			}
+			update(payload)
+		},
+		[update, list],
+	)
+
+	return (
+		<SmartListSettingsContext.Provider value={{ patch }}>
+			<Suspense>
+				<Routes>
+					<Route path="" element={<Navigate to="basics" replace />} />
+					<Route path="basics" element={<BasicSettingsScene />} />
+					<Route path="access" element={<AccessSettingsScene />} />
+					<Route path="filters" element={<FiltersSettingsScene />} />
+					<Route path="delete" element={<DangerSettingsScene />} />
+				</Routes>
+			</Suspense>
+		</SmartListSettingsContext.Provider>
+	)
+}
diff --git a/packages/browser/src/scenes/smartList/settings/SmartListSettingsSideBar.tsx b/packages/browser/src/scenes/smartList/settings/SmartListSettingsSideBar.tsx
new file mode 100644
index 000000000..ceb8ce194
--- /dev/null
+++ b/packages/browser/src/scenes/smartList/settings/SmartListSettingsSideBar.tsx
@@ -0,0 +1,105 @@
+import { ButtonOrLink, cn, IconButton, Label } from '@stump/components'
+import { useLocaleContext } from '@stump/i18n'
+import { ArrowLeft, Home } from 'lucide-react'
+import React, { useMemo } from 'react'
+import { useLocation, useNavigate } from 'react-router'
+
+import { usePreferences } from '@/hooks/usePreferences'
+import { formatRouteKey } from '@/hooks/useRouteGroups'
+import paths from '@/paths'
+import { SideBarLinkButton } from '@/scenes/settings'
+
+import { useSmartListContext } from '../context'
+import { createRouteGroups } from './routes'
+
+export default function SmartListSettingsSideBar() {
+	const location = useLocation()
+	const navigate = useNavigate()
+
+	const { list, viewerRole } = useSmartListContext()
+	const { t } = useLocaleContext()
+	const {
+		preferences: { enable_replace_primary_sidebar, primary_navigation_mode },
+	} = usePreferences()
+	const groups = useMemo(() => createRouteGroups(viewerRole), [viewerRole])
+
+	return (
+		<div
+			className={cn(
+				'relative flex h-full w-48 shrink-0 flex-col border-edge bg-background px-2 py-4 text-foreground-subtle',
+				primary_navigation_mode === 'TOPBAR'
+					? 'fixed top-12 z-50 h-screen border-x'
+					: 'fixed top-0 z-50 h-screen border-r',
+			)}
+		>
+			<div className="flex h-full flex-grow flex-col gap-4">
+				<div className="flex items-center space-x-2">
+					<ButtonOrLink
+						href="."
+						variant="ghost"
+						className="h-[unset] w-[unset] shrink-0 border border-transparent p-1 text-foreground hover:border-edge-subtle/50 hover:bg-sidebar-surface/70"
+						size="sm"
+					>
+						<ArrowLeft className="h-4 w-4 transform" />
+					</ButtonOrLink>
+
+					<Label className="line-clamp-1 py-1">{list.name}</Label>
+				</div>
+
+				{groups
+					.map(({ label, items }) => {
+						const groupLabel = label
+							? t(`smartListSettingsScene.sidebar.${formatRouteKey(label)}.label`)
+							: ''
+
+						const withGroup = (key: string) =>
+							label
+								? t(
+										`smartListSettingsScene.sidebar.${formatRouteKey(label)}.${formatRouteKey(key)}`,
+									)
+								: t(`smartListSettingsScene.sidebar.${formatRouteKey(key)}`)
+
+						return (
+							<div key={groupLabel}>
+								{groupLabel && <Label>{groupLabel}</Label>}
+								<ul
+									className={cn('flex flex-col gap-y-0.5 text-sm', {
+										'pt-2': groupLabel,
+									})}
+								>
+									{items.map(({ to, icon, label, disabled }) => {
+										return (
+											<SideBarLinkButton
+												key={to}
+												to={to}
+												isActive={location.pathname.includes(to)}
+												isDisabled={disabled}
+												icon={icon}
+											>
+												{withGroup(label)}
+											</SideBarLinkButton>
+										)
+									})}
+								</ul>
+							</div>
+						)
+					})
+					.filter(Boolean)}
+				<div className="flex-1" />
+
+				{enable_replace_primary_sidebar && (
+					<div className="shrink-0">
+						<IconButton
+							title="Go home"
+							variant="ghost"
+							className="border border-transparent p-1.5 text-foreground hover:border-edge-subtle/50 hover:bg-sidebar-surface/70"
+							onClick={() => navigate(paths.home())}
+						>
+							<Home className="h-4 w-4 -scale-x-[1] transform" />
+						</IconButton>
+					</div>
+				)}
+			</div>
+		</div>
+	)
+}
diff --git a/packages/browser/src/scenes/smartList/settings/UserSmartListSettingsScene.tsx b/packages/browser/src/scenes/smartList/settings/UserSmartListSettingsScene.tsx
deleted file mode 100644
index 60bcfc220..000000000
--- a/packages/browser/src/scenes/smartList/settings/UserSmartListSettingsScene.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Button, Form, Heading, Input, Text, TextArea } from '@stump/components'
-import { useForm, useFormState } from 'react-hook-form'
-import toast from 'react-hot-toast'
-
-import { ContentContainer, SceneContainer } from '@/components/container'
-
-import { useSmartListContext } from '../context'
-import { Schema } from '../create-or-update/form/schema'
-import AccessSettings from './AccessSettings'
-import DangerSection from './DangerSection'
-import FilterConfiguration from './FilterConfiguration'
-
-type BasicDetailsForm = Pick<Schema, 'name' | 'description'>
-
-// TODO: split into components
-// TODO: make werk
-export default function UserSmartListSettingsScene() {
-	const {
-		list: { name, description },
-		patchSmartList,
-	} = useSmartListContext()
-
-	// TODO: disable until changed...
-	const form = useForm<BasicDetailsForm>({
-		defaultValues: {
-			description: description || undefined,
-			name,
-		},
-	})
-	const { isSubmitting } = useFormState({ control: form.control })
-
-	const handleSubmit = async (data: BasicDetailsForm) => {
-		try {
-			await patchSmartList(data)
-		} catch (error) {
-			console.error('Failed to update smart list', { error })
-			toast.error('Failed to update smart list')
-		}
-	}
-
-	return (
-		<SceneContainer>
-			<ContentContainer className="mt-0">
-				<Form form={form} onSubmit={handleSubmit}>
-					<div className="flex flex-col gap-y-6">
-						<div>
-							<Heading size="md">Basic details</Heading>
-							<Text variant="muted" size="sm">
-								Change the name, description, and other basic details for this smart list
-							</Text>
-						</div>
-
-						<Input label="Name" variant="primary" {...form.register('name')} />
-						<TextArea
-							label="Description"
-							variant="primary"
-							className="md:w-3/5"
-							{...form.register('description')}
-						/>
-
-						<div>
-							<Button type="submit" variant="primary" disabled={isSubmitting}>
-								Save changes
-							</Button>
-						</div>
-					</div>
-				</Form>
-
-				<FilterConfiguration />
-				<AccessSettings />
-				<DangerSection />
-			</ContentContainer>
-		</SceneContainer>
-	)
-}
diff --git a/packages/browser/src/scenes/smartList/settings/access/AccessSettingsScene.tsx b/packages/browser/src/scenes/smartList/settings/access/AccessSettingsScene.tsx
new file mode 100644
index 000000000..03441eeca
--- /dev/null
+++ b/packages/browser/src/scenes/smartList/settings/access/AccessSettingsScene.tsx
@@ -0,0 +1,84 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Form } from '@stump/components'
+import { useLocaleContext } from '@stump/i18n'
+import { useCallback, useEffect, useState } from 'react'
+import { useForm, useWatch } from 'react-hook-form'
+
+import {
+	AccessSettings,
+	createSchema,
+	intoForm,
+	SmartListFormSchema,
+} from '@/components/smartList/createOrUpdate'
+
+import { useSmartListSettings } from '../context'
+import ChangeVisibilityConfirmation from './ChangeVisibilityConfirmation'
+import UserAccessManager from './UserAccessManager'
+
+type SubSchema = Pick<SmartListFormSchema, 'visibility'>
+
+export default function AccessSettingsScene() {
+	const { t } = useLocaleContext()
+	const { list, patch } = useSmartListSettings()
+
+	const form = useForm<SubSchema>({
+		defaultValues: intoForm(list),
+		reValidateMode: 'onChange',
+		resolver: zodResolver(createSchema([], t, list)),
+	})
+	const [visibility] = useWatch({
+		control: form.control,
+		name: ['visibility'],
+	})
+	const isChangedVisibility = visibility !== list.visibility
+
+	const [showConfirmation, setShowConfirmation] = useState(false)
+
+	const doChangeVisibility = useCallback(() => {
+		patch({ visibility })
+		setShowConfirmation(false)
+	}, [patch, visibility])
+
+	const handleSubmit = useCallback(() => {
+		if (isChangedVisibility && !showConfirmation) {
+			setShowConfirmation(true)
+		} else {
+			doChangeVisibility()
+		}
+	}, [isChangedVisibility, showConfirmation, doChangeVisibility])
+
+	const onCancel = useCallback(() => {
+		setShowConfirmation(false)
+		setTimeout(() => {
+			form.setValue('visibility', list.visibility)
+		})
+	}, [list, form])
+
+	useEffect(() => {
+		if (isChangedVisibility) {
+			const el = document.querySelector('button[type="submit"]') as HTMLButtonElement | null
+			el?.click()
+		}
+	}, [isChangedVisibility])
+
+	return (
+		<>
+			<ChangeVisibilityConfirmation
+				isOpen={showConfirmation}
+				onCancel={onCancel}
+				onConfirm={doChangeVisibility}
+				target={visibility}
+			/>
+
+			<div className="flex flex-col gap-12">
+				<Form form={form} onSubmit={handleSubmit} fieldsetClassName="flex flex-col gap-12">
+					<AccessSettings />
+
+					<button className="hidden" type="submit" disabled={!isChangedVisibility} />
+				</Form>
+
+				{list.visibility === 'SHARED' && <UserAccessManager />}
+			</div>
+		</>
+	)
+}
diff --git a/packages/browser/src/scenes/smartList/settings/access/ChangeVisibilityConfirmation.tsx b/packages/browser/src/scenes/smartList/settings/access/ChangeVisibilityConfirmation.tsx
new file mode 100644
index 000000000..5a94aacfd
--- /dev/null
+++ b/packages/browser/src/scenes/smartList/settings/access/ChangeVisibilityConfirmation.tsx
@@ -0,0 +1,36 @@
+import { ConfirmationModal } from '@stump/components'
+import { useLocaleContext } from '@stump/i18n'
+import { EntityVisibility } from '@stump/types'
+import React from 'react'
+
+type Props = {
+	isOpen: boolean
+	onConfirm: () => void
+	onCancel: () => void
+	target: EntityVisibility
+}
+
+export default function ChangeVisibilityConfirmation({
+	isOpen,
+	onConfirm,
+	onCancel,
+	target,
+}: Props) {
+	const { t } = useLocaleContext()
+
+	const localeKey = getKey(target.toLowerCase())
+	const description = t(localeKey) === localeKey ? t(getKey('fallback')) : t(localeKey)
+
+	return (
+		<ConfirmationModal
+			isOpen={isOpen}
+			title="Change visibility"
+			description={description}
+			onConfirm={onConfirm}
+			onClose={onCancel}
+		/>
+	)
+}
+
+const LOCALE_KEY = 'smartListSettingsScene.access.sections.visibility.confirmation'
+const getKey = (key: string) => `${LOCALE_KEY}.${key}`
diff --git a/packages/browser/src/scenes/smartList/settings/access/UserAccessManager.tsx b/packages/browser/src/scenes/smartList/settings/access/UserAccessManager.tsx
new file mode 100644
index 000000000..6f8b5ab83
--- /dev/null
+++ b/packages/browser/src/scenes/smartList/settings/access/UserAccessManager.tsx
@@ -0,0 +1,19 @@
+import { Alert } from '@stump/components'
+import { useLocaleContext } from '@stump/i18n'
+import React from 'react'
+
+// TODO: lock down access to CoCreator?
+export default function UserAccessManager() {
+	const { t } = useLocaleContext()
+
+	return (
+		<div>
+			<Alert level="info" icon="warning">
+				<Alert.Content>{t(getKey('disclaimer'))}</Alert.Content>
+			</Alert>
+		</div>
+	)
+}
+
+const LOCALE_KEY = 'smartListSettingsScene.access.sections.accessManager'
+const getKey = (key: string) => `${LOCALE_KEY}.${key}`
diff --git a/packages/browser/src/scenes/smartList/settings/access/index.ts b/packages/browser/src/scenes/smartList/settings/access/index.ts
new file mode 100644
index 000000000..6e5499c84
--- /dev/null
+++ b/packages/browser/src/scenes/smartList/settings/access/index.ts
@@ -0,0 +1 @@
+export { default } from './AccessSettingsScene'
diff --git a/packages/browser/src/scenes/smartList/settings/basics/BasicSettingsScene.tsx b/packages/browser/src/scenes/smartList/settings/basics/BasicSettingsScene.tsx
new file mode 100644
index 000000000..9bf32a515
--- /dev/null
+++ b/packages/browser/src/scenes/smartList/settings/basics/BasicSettingsScene.tsx
@@ -0,0 +1,59 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useSmartListsQuery } from '@stump/client'
+import { Button, Form } from '@stump/components'
+import { useLocaleContext } from '@stump/i18n'
+import { useCallback, useMemo } from 'react'
+import { useForm, useWatch } from 'react-hook-form'
+
+import {
+	BasicDetails,
+	createSchema,
+	intoForm,
+	SmartListFormSchema,
+} from '@/components/smartList/createOrUpdate'
+import { compareByKeys } from '@/utils/compare'
+
+import { useSmartListSettings } from '../context'
+
+type SubSchema = Pick<SmartListFormSchema, 'name' | 'description'>
+
+export default function BasicSettingsScene() {
+	const { t } = useLocaleContext()
+	const { list, patch } = useSmartListSettings()
+	const { lists } = useSmartListsQuery({
+		params: {
+			mine: true,
+		},
+		suspense: true,
+	})
+	const listNames = (lists || []).map(({ name }) => name)
+
+	const form = useForm<SubSchema>({
+		defaultValues: intoForm(list),
+		reValidateMode: 'onChange',
+		resolver: zodResolver(createSchema(listNames, t, list)),
+	})
+	const [name, description] = useWatch({
+		control: form.control,
+		name: ['name', 'description'],
+	})
+
+	const hasChanges = useMemo(
+		() => !compareByKeys(list as SubSchema, { description, name }, ['name', 'description']),
+		[list, name, description],
+	)
+
+	const handleSubmit = useCallback((values: SubSchema) => patch(values), [patch])
+
+	return (
+		<Form form={form} onSubmit={handleSubmit} fieldsetClassName="flex flex-col gap-12">
+			<BasicDetails />
+
+			<div>
+				<Button type="submit" disabled={!hasChanges} variant="primary">
+					Update list
+				</Button>
+			</div>
+		</Form>
+	)
+}
diff --git a/packages/browser/src/scenes/smartList/settings/basics/index.ts b/packages/browser/src/scenes/smartList/settings/basics/index.ts
new file mode 100644
index 000000000..4f609bb2e
--- /dev/null
+++ b/packages/browser/src/scenes/smartList/settings/basics/index.ts
@@ -0,0 +1 @@
+export { default } from './BasicSettingsScene'
diff --git a/packages/browser/src/scenes/smartList/settings/context.ts b/packages/browser/src/scenes/smartList/settings/context.ts
new file mode 100644
index 000000000..9e9f444c9
--- /dev/null
+++ b/packages/browser/src/scenes/smartList/settings/context.ts
@@ -0,0 +1,25 @@
+import { CreateOrUpdateSmartList } from '@stump/types'
+import { createContext, useContext } from 'react'
+
+import { useSmartListContext } from '../context'
+
+export type ISmartListSettingsContext = {
+	/**
+	 * A function that issues a POST to update to the smart list,
+	 * but resolves partial updates as a PATCH otherwise would
+	 */
+	patch: (updates: Partial<CreateOrUpdateSmartList>) => void
+}
+
+export const SmartListSettingsContext = createContext<ISmartListSettingsContext | null>(null)
+export const useSmartListSettings = () => {
+	const listCtx = useSmartListContext()
+	const settingsCtx = useContext(SmartListSettingsContext)
+	if (!settingsCtx) {
+		throw new Error('SmartListSettingsContext is not provided')
+	}
+	return {
+		list: listCtx.list,
+		...settingsCtx,
+	}
+}
diff --git a/packages/browser/src/scenes/smartList/settings/danger/DangerSettingsScene.tsx b/packages/browser/src/scenes/smartList/settings/danger/DangerSettingsScene.tsx
new file mode 100644
index 000000000..6662f0bd5
--- /dev/null
+++ b/packages/browser/src/scenes/smartList/settings/danger/DangerSettingsScene.tsx
@@ -0,0 +1,49 @@
+import { Button, Heading, Text } from '@stump/components'
+import { useLocaleContext } from '@stump/i18n'
+import { useState } from 'react'
+
+import { useSmartListSettings } from '../context'
+import DeleteListConfirmation from './DeleteListConfirmation'
+
+export default function DangerSettingsScene() {
+	const {
+		list: { id },
+	} = useSmartListSettings()
+	const { t } = useLocaleContext()
+
+	const [showConfirmation, setShowConfirmation] = useState(false)
+
+	return (
+		<div className="flex flex-col gap-12">
+			<div className="flex flex-col space-y-4">
+				<div>
+					<Heading size="sm">{t(getKey('heading'))}</Heading>
+					<Text size="sm" variant="muted" className="mt-1">
+						{t(getKey('description.0'))} <b>{t(getKey('description.1'))}</b>
+					</Text>
+				</div>
+
+				<DeleteListConfirmation
+					isOpen={showConfirmation}
+					id={id}
+					onClose={() => setShowConfirmation(false)}
+					trigger={
+						<div>
+							<Button
+								type="button"
+								variant="danger"
+								onClick={() => setShowConfirmation(true)}
+								className="flex-shrink-0"
+							>
+								Delete list
+							</Button>
+						</div>
+					}
+				/>
+			</div>
+		</div>
+	)
+}
+
+const LOCALE_KEY = 'smartListSettingsScene.danger-zone/delete.sections.deleteList'
+const getKey = (key: string) => `${LOCALE_KEY}.${key}`
diff --git a/packages/browser/src/scenes/smartList/settings/danger/DeleteListConfirmation.tsx b/packages/browser/src/scenes/smartList/settings/danger/DeleteListConfirmation.tsx
new file mode 100644
index 000000000..de760a815
--- /dev/null
+++ b/packages/browser/src/scenes/smartList/settings/danger/DeleteListConfirmation.tsx
@@ -0,0 +1,60 @@
+import { useDeleteSmartList } from '@stump/client'
+import { Alert, ConfirmationModal } from '@stump/components'
+import { useLocaleContext } from '@stump/i18n'
+import { handleApiError } from '@stump/sdk'
+import { useCallback, useState } from 'react'
+import { useNavigate } from 'react-router'
+
+import paths from '@/paths'
+
+type Props = {
+	id: string
+	onClose: () => void
+	isOpen: boolean
+	trigger?: React.ReactNode
+}
+
+export default function DeleteListConfirmation({ isOpen, id, onClose, trigger }: Props) {
+	const navigate = useNavigate()
+
+	const { t } = useLocaleContext()
+	const { deleteAsync: deleteList, isDeleting } = useDeleteSmartList({
+		onSuccess: () => {
+			navigate(paths.smartLists())
+		},
+	})
+
+	const [errorMessage, setErrorMessage] = useState<string | null>(null)
+
+	const handleDelete = useCallback(async () => {
+		try {
+			setErrorMessage(null)
+			await deleteList(id)
+		} catch (err) {
+			setErrorMessage(handleApiError(err))
+		}
+	}, [deleteList, id])
+
+	return (
+		<ConfirmationModal
+			title={t(getKey('title'))}
+			description={t(getKey('description'))}
+			confirmText={t(getKey('confirm'))}
+			confirmVariant="danger"
+			isOpen={isOpen}
+			onClose={onClose}
+			onConfirm={handleDelete}
+			confirmIsLoading={isDeleting}
+			trigger={trigger}
+		>
+			{errorMessage && (
+				<Alert level="error" icon="error">
+					<Alert.Content>{errorMessage}</Alert.Content>
+				</Alert>
+			)}
+		</ConfirmationModal>
+	)
+}
+
+const LOCALE_KEY = 'smartListSettingsScene.danger-zone/delete.sections.deleteList.confirmation'
+const getKey = (key: string) => `${LOCALE_KEY}.${key}`
diff --git a/packages/browser/src/scenes/smartList/settings/danger/index.ts b/packages/browser/src/scenes/smartList/settings/danger/index.ts
new file mode 100644
index 000000000..036ffb006
--- /dev/null
+++ b/packages/browser/src/scenes/smartList/settings/danger/index.ts
@@ -0,0 +1 @@
+export { default } from './DangerSettingsScene'
diff --git a/packages/browser/src/scenes/smartList/settings/filters/FiltersSettingsScene.tsx b/packages/browser/src/scenes/smartList/settings/filters/FiltersSettingsScene.tsx
new file mode 100644
index 000000000..ac3a6f846
--- /dev/null
+++ b/packages/browser/src/scenes/smartList/settings/filters/FiltersSettingsScene.tsx
@@ -0,0 +1,65 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Button, Form } from '@stump/components'
+import { useLocaleContext } from '@stump/i18n'
+import pick from 'lodash/pick'
+import { useCallback, useMemo } from 'react'
+import { useForm, useWatch } from 'react-hook-form'
+
+import {
+	createSchema,
+	intoAPI,
+	intoForm,
+	SmartListFormSchema,
+} from '@/components/smartList/createOrUpdate'
+import { SmartListQueryBuilder } from '@/components/smartList/createOrUpdate/queryBuilder'
+import { compareByKeys } from '@/utils/compare'
+
+import { useSmartListSettings } from '../context'
+
+type SubSchema = Pick<SmartListFormSchema, 'filters' | 'grouping'>
+
+export default function FiltersSettingsScene() {
+	const { t } = useLocaleContext()
+	const { list, patch } = useSmartListSettings()
+
+	const listAsForm = useMemo(() => intoForm(list), [list])
+	const form = useForm<SubSchema>({
+		defaultValues: intoForm(list),
+		reValidateMode: 'onChange',
+		resolver: zodResolver(createSchema([], t, list)),
+	})
+	const formValues = useWatch({
+		control: form.control,
+	})
+
+	const isChanged = useMemo(
+		() => !compareByKeys(listAsForm as SubSchema, formValues, ['filters', 'grouping']),
+		[listAsForm, formValues],
+	)
+
+	const handleSubmit = useCallback(
+		(values: SubSchema) =>
+			patch(
+				pick(
+					intoAPI({
+						...listAsForm,
+						...values,
+					}),
+					['filters', 'grouping'],
+				),
+			),
+		[patch, listAsForm],
+	)
+
+	return (
+		<Form form={form} onSubmit={handleSubmit} fieldsetClassName="flex flex-col gap-12">
+			<SmartListQueryBuilder />
+
+			<div>
+				<Button type="submit" disabled={!isChanged} variant="primary">
+					Update filters
+				</Button>
+			</div>
+		</Form>
+	)
+}
diff --git a/packages/browser/src/scenes/smartList/settings/filters/index.ts b/packages/browser/src/scenes/smartList/settings/filters/index.ts
new file mode 100644
index 000000000..e02a5c2a8
--- /dev/null
+++ b/packages/browser/src/scenes/smartList/settings/filters/index.ts
@@ -0,0 +1 @@
+export { default } from './FiltersSettingsScene'
diff --git a/packages/browser/src/scenes/smartList/settings/routes.ts b/packages/browser/src/scenes/smartList/settings/routes.ts
new file mode 100644
index 000000000..193bba310
--- /dev/null
+++ b/packages/browser/src/scenes/smartList/settings/routes.ts
@@ -0,0 +1,52 @@
+import { AccessRole } from '@stump/types'
+import { Bolt, NotebookTabs, PackageX, Shield } from 'lucide-react'
+
+import { RouteGroup } from '@/hooks/useRouteGroups'
+
+export const createRouteGroups = (role: AccessRole): RouteGroup[] => [
+	{
+		defaultRoute: 'settings/basics',
+		items: [
+			{
+				customPermission: () => role === 'CoCreator',
+				icon: NotebookTabs,
+				label: 'Basics',
+				localeKey: 'basics',
+				to: 'settings/basics',
+			},
+		],
+	},
+	{
+		defaultRoute: 'members',
+		items: [
+			{
+				customPermission: () => role === 'CoCreator',
+				icon: Shield,
+				label: 'Access',
+				localeKey: 'access',
+				to: 'settings/access',
+			},
+			{
+				customPermission: () => role === 'CoCreator',
+				icon: Bolt,
+				label: 'Filters',
+				localeKey: 'filters',
+				to: 'settings/filters',
+			},
+		],
+		label: 'Configuration',
+	},
+	{
+		defaultRoute: 'settings/danger',
+		items: [
+			{
+				icon: PackageX,
+				label: 'Delete',
+				localeKey: 'danger-zone/delete',
+				// permission: 'bookclub:manage',
+				to: 'settings/delete',
+			},
+		],
+		label: 'Danger Zone',
+	},
+]
diff --git a/packages/browser/src/utils/compare.ts b/packages/browser/src/utils/compare.ts
new file mode 100644
index 000000000..1bc2d2435
--- /dev/null
+++ b/packages/browser/src/utils/compare.ts
@@ -0,0 +1,18 @@
+import isMatch from 'lodash/isMatch'
+import pick from 'lodash/pick'
+
+/**
+ * A utility function to compare two objects by a set of keys. This will return true if
+ * each key in the set of keys is equal between the two objects.
+ * Note: The first object will define the keys which are comparable
+ */
+export const compareByKeys = <T extends Record<string, unknown>, K extends keyof T>(
+	a: T,
+	b: Record<string, unknown>,
+	keys: K[],
+): boolean => {
+	const aPicked = pick(a, keys)
+	const bPicked = pick(b, keys)
+
+	return isMatch(aPicked, bPicked)
+}
diff --git a/packages/browser/src/utils/index.ts b/packages/browser/src/utils/index.ts
new file mode 100644
index 000000000..f2273ae88
--- /dev/null
+++ b/packages/browser/src/utils/index.ts
@@ -0,0 +1,8 @@
+export * from './compare'
+export * from './form'
+export * from './format'
+export * from './misc'
+export * from './patterns'
+export * from './pluralize'
+export * from './prefetch'
+export * from './restricted'
diff --git a/packages/client/src/queries/smartList.ts b/packages/client/src/queries/smartList.ts
index 135b1fa0f..558bf836b 100644
--- a/packages/client/src/queries/smartList.ts
+++ b/packages/client/src/queries/smartList.ts
@@ -29,14 +29,22 @@ export function useSmartListsQuery({ params, ...options }: UseSmartListsQueryOpt
 	return { lists: data, ...rest }
 }
 
-export const usePrefetchSmartList = ({ id }: { id: string }) => {
+export const usePrefetchSmartList = () => {
 	const { sdk } = useSDK()
 	const prefetch = useCallback(
-		() =>
-			queryClient.prefetchQuery([sdk.smartlist.keys.getByID, id], async () =>
-				sdk.smartlist.getByID(id),
-			),
-		[sdk.smartlist, id],
+		({ id }: { id: string }) =>
+			Promise.all([
+				queryClient.prefetchQuery([sdk.smartlist.keys.getByID, id], async () =>
+					sdk.smartlist.getByID(id),
+				),
+				queryClient.prefetchQuery([sdk.smartlist.keys.meta, id], async () =>
+					sdk.smartlist.meta(id),
+				),
+				queryClient.prefetchQuery([sdk.smartlist.keys.items, id], async () =>
+					sdk.smartlist.items(id),
+				),
+			]),
+		[sdk.smartlist],
 	)
 	return { prefetch }
 }
@@ -133,16 +141,50 @@ export function useSmartListWithMetaQuery({ id, params }: UseSmartListItemsWithM
 	}
 }
 
+export function useCreateSmartList(
+	options: MutationOptions<SmartList, AxiosError, CreateOrUpdateSmartList> = {},
+) {
+	const { sdk } = useSDK()
+	const { mutate, mutateAsync, isLoading, ...restReturn } = useMutation(
+		[sdk.smartlist.keys.create],
+		async (params: CreateOrUpdateSmartList) => sdk.smartlist.create(params),
+		{
+			...options,
+			onSuccess: async (...args) => {
+				await queryClient.invalidateQueries([sdk.smartlist.keys.get], {
+					exact: false,
+				})
+				options.onSuccess?.(...args)
+			},
+		},
+	)
+
+	return {
+		create: mutate,
+		createAsync: mutateAsync,
+		isCreating: isLoading,
+		...restReturn,
+	}
+}
+
 // TODO: different types!
 type UseUpdateSmartListMutationOptions = {
 	id: string
 } & MutationOptions<SmartList, AxiosError, CreateOrUpdateSmartList>
-export function useUpdateSmartListMutation({ id, ...options }: UseUpdateSmartListMutationOptions) {
+export function useUpdateSmartList({ id, ...options }: UseUpdateSmartListMutationOptions) {
 	const { sdk } = useSDK()
 	const { mutate, mutateAsync, isLoading, ...restReturn } = useMutation(
 		[sdk.smartlist.keys.update, id],
 		async (updates: CreateOrUpdateSmartList) => sdk.smartlist.update(id, updates),
-		options,
+		{
+			...options,
+			onSuccess: async (...args) => {
+				await queryClient.invalidateQueries([sdk.smartlist.keys.getByID, id], {
+					exact: false,
+				})
+				options.onSuccess?.(...args)
+			},
+		},
 	)
 
 	return {
@@ -154,7 +196,7 @@ export function useUpdateSmartListMutation({ id, ...options }: UseUpdateSmartLis
 }
 
 type UseDeleteSmartListMutationOptions = MutationOptions<SmartList, AxiosError, string>
-export function useDeleteSmartListMutation({
+export function useDeleteSmartList({
 	onSuccess,
 	...options
 }: UseDeleteSmartListMutationOptions = {}) {
diff --git a/packages/components/package.json b/packages/components/package.json
index fb8ae1200..b05b2e27f 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -22,7 +22,7 @@
 		"@radix-ui/react-avatar": "^1.0.4",
 		"@radix-ui/react-checkbox": "^1.0.4",
 		"@radix-ui/react-context-menu": "^2.1.5",
-		"@radix-ui/react-dialog": "^1.0.5",
+		"@radix-ui/react-dialog": "^1.1.1",
 		"@radix-ui/react-dropdown-menu": "^2.0.6",
 		"@radix-ui/react-hover-card": "^1.0.7",
 		"@radix-ui/react-label": "^2.0.2",
@@ -50,7 +50,7 @@
 		"react": "^18.2.0",
 		"react-day-picker": "^8.10.0",
 		"react-dom": "^18.2.0",
-		"react-hook-form": "=7.47.0",
+		"react-hook-form": "^7.53.0",
 		"react-router": "^6.23.0",
 		"react-router-dom": "^6.23.0",
 		"tailwind-merge": "^1.14.0",
@@ -60,7 +60,7 @@
 		"tailwindcss-shadow-fill": "^1.0.1",
 		"tailwindcss-text-fill": "^0.2.0",
 		"use-count-up": "^3.0.1",
-		"vaul": "^0.8.9"
+		"vaul": "^1.0.0"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.24.4",
diff --git a/packages/components/src/alert/Alert.tsx b/packages/components/src/alert/Alert.tsx
index bc26d7ef9..28f833130 100644
--- a/packages/components/src/alert/Alert.tsx
+++ b/packages/components/src/alert/Alert.tsx
@@ -51,7 +51,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
 			let Icon: LucideIcon | null = null
 
 			if (typeof icon === 'string') {
-				Icon = ALERT_ICONS[level || 'info'] || ALERT_ICONS.info
+				Icon = ALERT_ICONS[icon || level || 'info'] || ALERT_ICONS.info
 			} else if (icon) {
 				Icon = icon
 			}
diff --git a/packages/components/src/button/Button.tsx b/packages/components/src/button/Button.tsx
index 1705ddc5e..ebd8d494a 100644
--- a/packages/components/src/button/Button.tsx
+++ b/packages/components/src/button/Button.tsx
@@ -91,6 +91,7 @@ const buttonVariants = cva(BUTTON_BASE_CLASSES, {
 		variant: 'default',
 	},
 	variants: {
+		// TODO: remove this new york shit and just create better size variants
 		newYork: {
 			true: '',
 		},
diff --git a/packages/components/src/calendar/Calendar.tsx b/packages/components/src/calendar/Calendar.tsx
index 19e86a94a..14bce3790 100644
--- a/packages/components/src/calendar/Calendar.tsx
+++ b/packages/components/src/calendar/Calendar.tsx
@@ -23,7 +23,7 @@ export default function Calendar({
 				cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
 				day: cn(
 					buttonVariants({ size: 'sm', variant: 'ghost' }),
-					'h-8 w-8 p-0 font-normal aria-selected:opacity-100',
+					'h-8 w-8 p-0 font-normal aria-selected:opacity-100 focus:ring-edge-brand',
 				),
 				day_disabled: 'text-gray-400 dark:text-gray-500 opacity-50',
 				day_hidden: 'invisible',
@@ -39,7 +39,7 @@ export default function Calendar({
 				nav: 'space-x-1 flex items-center',
 				nav_button: cn(
 					buttonVariants({ variant: 'outline' }),
-					'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+					'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 focus:ring-edge-brand',
 				),
 				nav_button_next: 'absolute right-1',
 				nav_button_previous: 'absolute left-1',
diff --git a/packages/components/src/calendar/DatePicker.tsx b/packages/components/src/calendar/DatePicker.tsx
index 088d47f00..4f63203bb 100644
--- a/packages/components/src/calendar/DatePicker.tsx
+++ b/packages/components/src/calendar/DatePicker.tsx
@@ -13,21 +13,37 @@ import Calendar from './Calendar'
 type DatePickerProps = {
 	label?: string
 	selected?: Date
+	placeholder?: string
+	className?: string
 	onChange: (date?: Date) => void
 	minDate?: Date
 	maxDate?: Date
+	popover?: Pick<React.ComponentProps<typeof PopoverContent>, 'align'>
 }
 
 // TODO: presets
 // TODO: width/sizes
-export function DatePicker({ label, selected, onChange, ...calendarProps }: DatePickerProps) {
+// TODO: error state
+export function DatePicker({
+	label,
+	selected,
+	onChange,
+	className,
+	placeholder,
+	popover,
+	...calendarProps
+}: DatePickerProps) {
 	return (
 		<Popover>
 			<PopoverTrigger asChild>
 				<div
-					className={cn('w-[280px]', {
-						'flex flex-col gap-1.5': !!label,
-					})}
+					className={cn(
+						'w-[280px]',
+						{
+							'flex flex-col gap-1.5': !!label,
+						},
+						className,
+					)}
 				>
 					{label && <Label>{label}</Label>}
 					<Button
@@ -36,15 +52,15 @@ export function DatePicker({ label, selected, onChange, ...calendarProps }: Date
 						type="button"
 						className={cn(
 							'w-full justify-start text-left font-normal',
-							!selected && 'text-gray-500 dark:text-gray-450',
+							!selected && 'text-foreground-muted',
 						)}
 					>
 						<CalendarIcon className="mr-2 h-4 w-4" />
-						{selected ? format(selected, 'PPP') : <span>Pick a date</span>}
+						{selected ? format(selected, 'PPP') : <span>{placeholder || 'Pick a date'}</span>}
 					</Button>
 				</div>
 			</PopoverTrigger>
-			<PopoverContent className="w-auto p-0">
+			<PopoverContent className="w-auto p-0" align={popover?.align}>
 				<Calendar
 					mode="single"
 					selected={selected}
diff --git a/packages/components/src/tabs/Tabs.tsx b/packages/components/src/tabs/Tabs.tsx
index b449056de..9ca98826e 100644
--- a/packages/components/src/tabs/Tabs.tsx
+++ b/packages/components/src/tabs/Tabs.tsx
@@ -9,7 +9,7 @@ const TABS_CONTENT_VARIANTS: Record<TabsVariant, string> = {
 	default:
 		'text-foreground-subtle data-[state=active]:bg-background data-[state=active]:text-foreground',
 	primary:
-		'text-foreground-subtle data-[state=active]:bg-brand-300 data-[state=active]:text-brand-800',
+		'text-foreground-subtle data-[state=active]:bg-fill-brand data-[state=active]:text-foreground',
 }
 
 export type TabsProps = {
diff --git a/packages/i18n/src/locales/en.json b/packages/i18n/src/locales/en.json
index e97d643d8..343fe5516 100644
--- a/packages/i18n/src/locales/en.json
+++ b/packages/i18n/src/locales/en.json
@@ -601,6 +601,216 @@
 			"downloadSeries": "Download Series"
 		}
 	},
+	"createOrUpdateSmartListForm": {
+		"validation": {
+			"nameTooShort": "Name must be at least 2 characters",
+			"nameTaken": "Cannot use this name"
+		},
+		"fields": {
+			"name": {
+				"label": "Name",
+				"placeholder": "My smart list",
+				"description": "Must be unique, but can be changed later"
+			},
+			"description": {
+				"label": "Description",
+				"placeholder": "A very intelligent list",
+				"description": "An optional description of your smart list"
+			},
+			"visibility": {
+				"label": "Visibility",
+				"options": {
+					"public": {
+						"label": "Public",
+						"description": "Accessible to all users on the server"
+					},
+					"shared": {
+						"label": "Shared",
+						"description": "Specific users can access this smart list",
+						"createDisclaimer": "You can select who this list is shared with after creation"
+					},
+					"private": {
+						"label": "Private",
+						"description": "Only you can access this smart list"
+					}
+				}
+			},
+			"queryBuilder": {
+				"uiPerformance": "This feature is missing performance optimizations on the UI and may be slow with filters which produce large result sets. This will be improved in the future",
+				"rootJoiner": {
+					"and": {
+						"label": "AND",
+						"description": "All filter groups must be true for a book to be matched"
+					},
+					"or": {
+						"label": "OR",
+						"description": "At least one filter group must be true for a book to be matched"
+					}
+				},
+				"groupJoiner": {
+					"and": {
+						"label": "AND",
+						"description": "All must be true"
+					},
+					"or": {
+						"label": "OR",
+						"description": "At least one must be true"
+					},
+					"not": {
+						"label": "NOT",
+						"description": "None can be true"
+					}
+				},
+				"grouping": {
+					"label": "Group by",
+					"description": "How the books in this smart list should be grouped",
+					"options": {
+						"by_books": {
+							"label": "None"
+						},
+						"by_series": {
+							"label": "Series"
+						},
+						"by_library": {
+							"label": "Library"
+						}
+					}
+				},
+				"filters": {
+					"emptyState": "Add a group to get started",
+					"actions": {
+						"addFilter": "Add filter",
+						"addGroup": "Add group",
+						"deleteFilter": "Delete filter",
+						"deleteGroup": "Delete group"
+					},
+					"is": "is",
+					"fieldSelect": {
+						"placeholder": "Attribute",
+						"source": {
+							"label": "Source",
+							"back": "Back",
+							"book": {
+								"label": "Book",
+								"attributes": {
+									"name": "Filename",
+									"size": "Size",
+									"extension": "Extension",
+									"created_at": "Created at",
+									"updated_at": "Updated at",
+									"status": "Status",
+									"path": "Path",
+									"pages": "Pages",
+									"tags": "Tags"
+								}
+							},
+							"book_meta": {
+								"label": "Book Meta",
+								"attributes": {
+									"title": "Title",
+									"summary": "Summary",
+									"notes": "Notes",
+									"genre": "Genre",
+									"writers": "Writers",
+									"pencillers": "Pencillers",
+									"inkers": "Inkers",
+									"letterers": "Letterers",
+									"editors": "Editors",
+									"publisher": "Publisher",
+									"colorists": "Colorist",
+									"cover_artists": "Cover artists",
+									"links": "Links",
+									"characters": "Characters",
+									"teams": "Teams"
+								}
+							},
+							"series": {
+								"label": "Series",
+								"attributes": {
+									"name": "Name",
+									"path": "Path"
+								}
+							},
+							"series_meta": {
+								"label": "Series Meta",
+								"attributes": {
+									"meta_type": "Type",
+									"publisher": "Publisher",
+									"status": "Status",
+									"age_rating": "Age rating",
+									"volume": "Volume"
+								}
+							},
+							"library": {
+								"label": "Library",
+								"attributes": {
+									"name": "Name",
+									"path": "Path"
+								}
+							}
+						}
+					},
+					"basicValue": {
+						"placeholder": "Value",
+						"date": "Date"
+					},
+					"rangeValue": {
+						"from": {
+							"date": "From date",
+							"number": "From"
+						},
+						"to": {
+							"date": "To date",
+							"number": "To"
+						},
+						"inclusive": "Inclusive"
+					},
+					"listValue": {
+						"placeholder": "Add values",
+						"emptyState": "No values to display"
+					}
+				}
+			}
+		}
+	},
+	"createSmartListScene": {
+		"heading": "Create smart list",
+		"subtitle": "On-the-fly list creation based on a set of filters",
+		"form": {
+			"stepLabel": "Step",
+			"steps": [
+				{
+					"label": "Basics",
+					"heading": "Basic Information",
+					"description": "The details of this smart list, including its name, description, and visibility"
+				},
+				{
+					"label": "Filters",
+					"heading": "Filters",
+					"description": "The filters to apply to this smart list"
+				},
+				{
+					"label": "Review",
+					"heading": "Review",
+					"description": "Review your smart list settings before creating it"
+				}
+			],
+			"review": {
+				"yes": "Yes",
+				"no": "No",
+				"none": "None",
+				"labels": {
+					"name": "Name",
+					"description": "Description",
+					"visibility": "Visibility",
+					"grouping": "Group by"
+				}
+			},
+			"buttons": {
+				"confirm": "Create list"
+			}
+		}
+	},
 	"userSmartListsScene": {
 		"heading": "Smart lists",
 		"subtitle": "Your favorite searches and filters saved for easy access",
@@ -626,6 +836,63 @@
 			}
 		}
 	},
+	"smartListSettingsScene": {
+		"sidebar": {
+			"basics": "Basics",
+			"configuration": {
+				"label": "Configuration",
+				"access": "Access",
+				"filters": "Filters"
+			},
+			"danger-zone": {
+				"delete": "Deletion",
+				"label": "Danger Zone"
+			}
+		},
+		"basics": {
+			"title": "Basic Information",
+			"description": "The details of this smart list, including its name and description"
+		},
+		"access": {
+			"title": "Access",
+			"description": "Control who can access this smart list",
+			"sections": {
+				"visibility": {
+					"confirmation": {
+						"public": "This will make the list visible to everyone",
+						"private": "This will change the list to be private, making anyone with access unable to see it",
+						"shared": "You will need to share the list with specific users to give them access",
+						"fallback": "Are you sure you want to change the visibility of this list?"
+					}
+				},
+				"accessManager": {
+					"disclaimer": "Sharing is not ready yet. Please check back later!"
+				}
+			}
+		},
+		"filters": {
+			"title": "Filter Builder",
+			"description": "Manage the filters which construct this smart list"
+		},
+		"danger-zone/delete": {
+			"title": "Deletion Actions",
+			"description": "Permanently delete this smart list and all of its contents or certain resources",
+			"sections": {
+				"deleteList": {
+					"heading": "Delete list",
+					"description": [
+						"Permanently delete this smart list and all its contents.",
+						"This action cannot be undone"
+					],
+					"confirmation": {
+						"title": "Delete list",
+						"description": "Are you sure you want to delete this smart list?",
+						"confirm": "Delete list"
+					}
+				}
+			}
+		}
+	},
 	"userSmartListScene": {
 		"navigation": {
 			"items": "Items",
diff --git a/packages/sdk/src/controllers/emailer-api.ts b/packages/sdk/src/controllers/emailer-api.ts
index bc530f9c6..746f906a2 100644
--- a/packages/sdk/src/controllers/emailer-api.ts
+++ b/packages/sdk/src/controllers/emailer-api.ts
@@ -24,6 +24,15 @@ const EMAILER_ROUTE = '/emailer'
  */
 const emailerURL = createRouteURLHandler(EMAILER_ROUTE)
 
+/**
+ * The root route for the email device API
+ */
+const EMAIL_DEVICE_ROUTE = '/email-devices'
+/**
+ * A helper function to format the URL for email device API routes with optional query parameters
+ */
+const emailDeviceURL = createRouteURLHandler(EMAIL_DEVICE_ROUTE)
+
 /**
  * The emailer API controller, used for interacting with the emailer endpoints of the Stump API
  */
@@ -104,9 +113,7 @@ export class EmailerAPI extends APIBase {
 	 * Fetch all email devices
 	 */
 	async getDevices(): Promise<RegisteredEmailDevice[]> {
-		const { data: devices } = await this.api.axios.get<RegisteredEmailDevice[]>(
-			emailerURL('/email-devices'),
-		)
+		const { data: devices } = await this.api.axios.get<RegisteredEmailDevice[]>(emailDeviceURL(''))
 		return devices
 	}
 
@@ -115,7 +122,7 @@ export class EmailerAPI extends APIBase {
 	 */
 	async getDeviceByID(id: number): Promise<RegisteredEmailDevice> {
 		const { data: device } = await this.api.axios.get<RegisteredEmailDevice>(
-			emailerURL(`/email-devices/${id}`),
+			emailDeviceURL(`${id}`),
 		)
 		return device
 	}
@@ -125,7 +132,7 @@ export class EmailerAPI extends APIBase {
 	 */
 	async createDevice(payload: CreateOrUpdateEmailDevice): Promise<RegisteredEmailDevice> {
 		const { data: createdDevice } = await this.api.axios.post<RegisteredEmailDevice>(
-			emailerURL('/email-devices'),
+			emailDeviceURL(''),
 			payload,
 		)
 		return createdDevice
@@ -139,7 +146,7 @@ export class EmailerAPI extends APIBase {
 		payload: CreateOrUpdateEmailDevice,
 	): Promise<RegisteredEmailDevice> {
 		const { data: updatedDevice } = await this.api.axios.put<RegisteredEmailDevice>(
-			emailerURL(`/email-devices/${id}`),
+			emailDeviceURL(`/${id}`),
 			payload,
 		)
 		return updatedDevice
@@ -150,7 +157,7 @@ export class EmailerAPI extends APIBase {
 	 */
 	async patchDevice(id: number, payload: PatchEmailDevice): Promise<RegisteredEmailDevice> {
 		const { data: patchedDevice } = await this.api.axios.patch<RegisteredEmailDevice>(
-			emailerURL(`/email-devices/${id}`),
+			emailDeviceURL(`/${id}`),
 			payload,
 		)
 		return patchedDevice
@@ -161,7 +168,7 @@ export class EmailerAPI extends APIBase {
 	 */
 	async deleteDevice(id: number): Promise<RegisteredEmailDevice> {
 		const { data: deletedDevice } = await this.api.axios.delete<RegisteredEmailDevice>(
-			emailerURL(`/email-devices/${id}`),
+			emailDeviceURL(`/${id}`),
 		)
 		return deletedDevice
 	}
diff --git a/packages/sdk/src/controllers/metadata-api.ts b/packages/sdk/src/controllers/metadata-api.ts
index b2e33cc3e..b953a3978 100644
--- a/packages/sdk/src/controllers/metadata-api.ts
+++ b/packages/sdk/src/controllers/metadata-api.ts
@@ -22,7 +22,7 @@ export class MetadataAPI extends APIBase {
 	 */
 	async overview(params?: MediaMetadataFilter): Promise<MediaMetadataOverview> {
 		const { data: overview } = await this.axios.get<MediaMetadataOverview>(
-			mediaMetadataURL('overview', params),
+			mediaMetadataURL('', params),
 		)
 		return overview
 	}
diff --git a/packages/sdk/src/controllers/user-api.ts b/packages/sdk/src/controllers/user-api.ts
index 0a6e3a35f..3a35fd872 100644
--- a/packages/sdk/src/controllers/user-api.ts
+++ b/packages/sdk/src/controllers/user-api.ts
@@ -81,7 +81,7 @@ export class UserAPI extends APIBase {
 	 * Update the current authenticated user's preferences
 	 */
 	async updatePreferences(payload: UpdateUserPreferences): Promise<UserPreferences> {
-		const { data: preferences } = await this.axios.patch<UserPreferences>(
+		const { data: preferences } = await this.axios.put<UserPreferences>(
 			userURL('/me/preferences'),
 			payload,
 		)
diff --git a/packages/types/generated.ts b/packages/types/generated.ts
index dc41d447c..b7f8cd1db 100644
--- a/packages/types/generated.ts
+++ b/packages/types/generated.ts
@@ -188,7 +188,7 @@ export type ReactTableGlobalSort = { desc: boolean; id: string }
 /**
  * A filter for a single value, e.g. `name = "test"`
  */
-export type Filter<T> = T | { not: T } | { contains: T } | { excludes: T } | { any: T[] } | { none: T[] } | NumericFilter<T>
+export type Filter<T> = { equals: T } | { not: T } | { contains: T } | { excludes: T } | { any: T[] } | { none: T[] } | NumericFilter<T>
 
 export type NumericFilter<T> = { gt: T } | { gte: T } | { lt: T } | { lte: T } | NumericRange<T>
 
@@ -211,7 +211,7 @@ export type SmartList = { id: string; name: string; description: string | null;
 
 export type SmartFilter<T> = { groups: FilterGroup<T>[]; joiner?: FilterJoin }
 
-export type MediaSmartFilter = { name: Filter<string> } | { extension: Filter<string> } | { path: Filter<string> } | { metadata: MediaMetadataSmartFilter } | { series: SeriesSmartFilter }
+export type MediaSmartFilter = { name: Filter<string> } | { size: Filter<number> } | { extension: Filter<string> } | { created_at: Filter<string> } | { updated_at: Filter<string> } | { status: Filter<string> } | { path: Filter<string> } | { pages: Filter<number> } | { metadata: MediaMetadataSmartFilter } | { series: SeriesSmartFilter }
 
 export type MediaMetadataSmartFilter = { publisher: Filter<string> } | { genre: Filter<string> } | { characters: Filter<string> } | { colorists: Filter<string> } | { writers: Filter<string> } | { pencillers: Filter<string> } | { letterers: Filter<string> } | { inkers: Filter<string> } | { editors: Filter<string> } | { age_rating: Filter<number> } | { year: Filter<number> } | { month: Filter<number> } | { day: Filter<number> }
 
@@ -462,9 +462,9 @@ export type PatchSeriesThumbnail = { media_id: string; page: number; is_zero_bas
 
 export type PatchLibraryThumbnail = { media_id: string; page: number; is_zero_based?: boolean | null }
 
-export type CreateOrUpdateSmartList = { name: string; description: string | null; filters: SmartFilter<MediaSmartFilter>; joiner?: FilterJoin | null; default_grouping?: SmartListItemGrouping | null }
+export type CreateOrUpdateSmartList = { name: string; description: string | null; filters: SmartFilter<MediaSmartFilter>; joiner?: FilterJoin | null; default_grouping?: SmartListItemGrouping | null; visibility?: EntityVisibility | null }
 
-export type GetSmartListsParams = { all?: boolean | null; search?: string | null }
+export type GetSmartListsParams = { all?: boolean | null; mine?: boolean | null; search?: string | null }
 
 export type SmartListRelationOptions = { load_views?: boolean }
 
diff --git a/yarn.lock b/yarn.lock
index 2158aa843..b828d2546 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3628,11 +3628,16 @@
     "@tanstack/react-virtual" "^3.0.0-beta.60"
     client-only "^0.0.1"
 
-"@hookform/resolvers@^3.3.2", "@hookform/resolvers@^3.3.4":
+"@hookform/resolvers@^3.3.2":
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-3.3.4.tgz#de9b668c2835eb06892290192de6e2a5c906229b"
   integrity sha512-o5cgpGOuJYrd+iMKvkttOclgwRW86EsWJZZRC23prf0uU2i48Htq4PuT73AVb9ionFyZrwYEITuOFGF+BydEtQ==
 
+"@hookform/resolvers@^3.9.0":
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-3.9.0.tgz#cf540ac21c6c0cd24a40cf53d8e6d64391fb753d"
+  integrity sha512-bU0Gr4EepJ/EQsH/IwEzYLsT/PEj5C0ynLQ4m+GSHS+xKH4TfSelhluTgOaoc4kA5s7eCsQbM4wvZLzELmWzUg==
+
 "@humanwhocodes/config-array@^0.11.13":
   version "0.11.14"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
@@ -4417,26 +4422,25 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.5.4"
 
-"@radix-ui/react-dialog@^1.0.4", "@radix-ui/react-dialog@^1.0.5":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz#71657b1b116de6c7a0b03242d7d43e01062c7300"
-  integrity sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==
+"@radix-ui/react-dialog@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz#4906507f7b4ad31e22d7dad69d9330c87c431d44"
+  integrity sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/primitive" "1.0.1"
-    "@radix-ui/react-compose-refs" "1.0.1"
-    "@radix-ui/react-context" "1.0.1"
-    "@radix-ui/react-dismissable-layer" "1.0.5"
-    "@radix-ui/react-focus-guards" "1.0.1"
-    "@radix-ui/react-focus-scope" "1.0.4"
-    "@radix-ui/react-id" "1.0.1"
-    "@radix-ui/react-portal" "1.0.4"
-    "@radix-ui/react-presence" "1.0.1"
-    "@radix-ui/react-primitive" "1.0.3"
-    "@radix-ui/react-slot" "1.0.2"
-    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-dismissable-layer" "1.1.0"
+    "@radix-ui/react-focus-guards" "1.1.0"
+    "@radix-ui/react-focus-scope" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-portal" "1.1.1"
+    "@radix-ui/react-presence" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-slot" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
     aria-hidden "^1.1.1"
-    react-remove-scroll "2.5.5"
+    react-remove-scroll "2.5.7"
 
 "@radix-ui/react-direction@1.0.1":
   version "1.0.1"
@@ -4486,6 +4490,17 @@
     "@radix-ui/react-use-callback-ref" "1.0.1"
     "@radix-ui/react-use-escape-keydown" "1.0.3"
 
+"@radix-ui/react-dismissable-layer@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz#2cd0a49a732372513733754e6032d3fb7988834e"
+  integrity sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-escape-keydown" "1.1.0"
+
 "@radix-ui/react-dropdown-menu@^2.0.6":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.6.tgz#cdf13c956c5e263afe4e5f3587b3071a25755b63"
@@ -4514,6 +4529,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-focus-guards@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz#8e9abb472a9a394f59a1b45f3dd26cfe3fc6da13"
+  integrity sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==
+
 "@radix-ui/react-focus-scope@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.0.tgz#95a0c1188276dc8933b1eac5f1cdb6471e01ade5"
@@ -4544,6 +4564,15 @@
     "@radix-ui/react-primitive" "1.0.3"
     "@radix-ui/react-use-callback-ref" "1.0.1"
 
+"@radix-ui/react-focus-scope@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz#ebe2891a298e0a33ad34daab2aad8dea31caf0b2"
+  integrity sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+
 "@radix-ui/react-hover-card@^1.0.7":
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-hover-card/-/react-hover-card-1.0.7.tgz#684bca2504432566357e7157e087051aa3577948"
@@ -4576,6 +4605,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
+"@radix-ui/react-id@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.0.tgz#de47339656594ad722eb87f94a6b25f9cffae0ed"
+  integrity sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
 "@radix-ui/react-label@^2.0.2":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-2.0.2.tgz#9c72f1d334aac996fdc27b48a8bdddd82108fb6d"
@@ -4710,6 +4746,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-portal@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.1.tgz#1957f1eb2e1aedfb4a5475bd6867d67b50b1d15f"
+  integrity sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
 "@radix-ui/react-presence@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a"
@@ -4728,6 +4772,14 @@
     "@radix-ui/react-compose-refs" "1.0.1"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
+"@radix-ui/react-presence@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.0.tgz#227d84d20ca6bfe7da97104b1a8b48a833bfb478"
+  integrity sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
 "@radix-ui/react-primitive@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz#376cd72b0fcd5e0e04d252ed33eb1b1f025af2b0"
@@ -5076,6 +5128,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-callback-ref" "1.0.1"
 
+"@radix-ui/react-use-escape-keydown@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz#31a5b87c3b726504b74e05dac1edce7437b98754"
+  integrity sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==
+  dependencies:
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+
 "@radix-ui/react-use-layout-effect@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz#2fc19e97223a81de64cd3ba1dc42ceffd82374dc"
@@ -6635,12 +6694,12 @@
   dependencies:
     "@tanstack/table-core" "8.16.0"
 
-"@tanstack/react-virtual@3.0.0-beta.18":
-  version "3.0.0-beta.18"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.18.tgz#b97b2019f7d6a5770fb88ee1f7591da55b9059b4"
-  integrity sha512-mnyCZT6htcRNw1jVb+WyfMUMbd1UmXX/JWPuMf6Bmj92DB/V7Ogk5n5rby5Y5aste7c7mlsBeMF8HtpwERRvEQ==
+"@tanstack/react-virtual@3.10.8":
+  version "3.10.8"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.10.8.tgz#bf4b06f157ed298644a96ab7efc1a2b01ab36e3c"
+  integrity sha512-VbzbVGSsZlQktyLrP5nxE+vE1ZR+U0NFAWPbJLoG2+DKPwd2D7dVICTVIIaYlJqX1ZCEnYDbaOpmMwbsyhBoIA==
   dependencies:
-    "@tanstack/virtual-core" "3.0.0-beta.18"
+    "@tanstack/virtual-core" "3.10.8"
 
 "@tanstack/react-virtual@^3.0.0-beta.60":
   version "3.0.4"
@@ -6659,10 +6718,10 @@
   resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.0.0.tgz#637bee36f0cabf96a1d436887c90f138a7e9378b"
   integrity sha512-SYXOBTjJb05rXa2vl55TTwO40A6wKu0R5i1qQwhJYNDIqaIGF7D0HsLw+pJAyi2OvntlEIVusx3xtbbgSUi6zg==
 
-"@tanstack/virtual-core@3.0.0-beta.18":
-  version "3.0.0-beta.18"
-  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.18.tgz#d4b0738c1d0aada922063c899675ff4df9f696b2"
-  integrity sha512-tcXutY05NpN9lp3+AXI9Sn85RxSPV0EJC0XMim9oeQj/E7bjXoL0qZ4Er4wwnvIbv/hZjC91EmbIQGjgdr6nZg==
+"@tanstack/virtual-core@3.10.8":
+  version "3.10.8"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.10.8.tgz#975446a667755222f62884c19e5c3c66d959b8b4"
+  integrity sha512-PBu00mtt95jbKFi6Llk9aik8bnR3tR/oQP1o3TSi+iG//+Q2RTIzCEgKkHG8BB86kxMNW6O8wku+Lmi+QFR6jA==
 
 "@tauri-apps/api@1.6.0", "@tauri-apps/api@^1.6.0":
   version "1.6.0"
@@ -18212,15 +18271,10 @@ react-helmet@^6.1.0:
     react-fast-compare "^3.1.1"
     react-side-effect "^2.1.0"
 
-react-hook-form@=7.47.0:
-  version "7.47.0"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.47.0.tgz#a42f07266bd297ddf1f914f08f4b5f9783262f31"
-  integrity sha512-F/TroLjTICipmHeFlMrLtNLceO2xr1jU3CyiNla5zdwsGUGu2UOxxR4UyJgLlhMwLW/Wzp4cpJ7CPfgJIeKdSg==
-
-react-hook-form@^7.50.1:
-  version "7.50.1"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.50.1.tgz#f6aeb17a863327e5a0252de8b35b4fc8990377ed"
-  integrity sha512-3PCY82oE0WgeOgUtIr3nYNNtNvqtJ7BZjsbxh6TnYNbXButaD5WpjOmTjdxZfheuHKR68qfeFnEDVYoSSFPMTQ==
+react-hook-form@^7.53.0:
+  version "7.53.0"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.53.0.tgz#3cf70951bf41fa95207b34486203ebefbd3a05ab"
+  integrity sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==
 
 react-hot-toast@^2.4.1:
   version "2.4.1"
@@ -18414,6 +18468,14 @@ react-remove-scroll-bar@^2.3.3:
     react-style-singleton "^2.2.1"
     tslib "^2.0.0"
 
+react-remove-scroll-bar@^2.3.4:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz#3e585e9d163be84a010180b18721e851ac81a29c"
+  integrity sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==
+  dependencies:
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
+
 react-remove-scroll@2.5.4:
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.4.tgz#afe6491acabde26f628f844b67647645488d2ea0"
@@ -18436,6 +18498,17 @@ react-remove-scroll@2.5.5:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-remove-scroll@2.5.7:
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz#15a1fd038e8497f65a695bf26a4a57970cac1ccb"
+  integrity sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==
+  dependencies:
+    react-remove-scroll-bar "^2.3.4"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
 react-router-dom@^6.23.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.23.0.tgz#8b80ad92ad28f4dc38972e92d84b4c208150545a"
@@ -19775,16 +19848,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -19889,7 +19953,7 @@ stringify-object@3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -19910,13 +19974,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -21379,12 +21436,12 @@ vary@^1, vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
-vaul@^0.8.9:
-  version "0.8.9"
-  resolved "https://registry.yarnpkg.com/vaul/-/vaul-0.8.9.tgz#0b6e4771dbd0e8e330b3c4b0415d4fd15cd47e9b"
-  integrity sha512-gpmtmZRWDPP6niQh14JfRIFUYZVyfvAWyA/7rUINOfNlO/2K7uEvI5rLXEXkxZIRFyUZj+TPHLFMirkegPHjrw==
+vaul@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/vaul/-/vaul-1.0.0.tgz#b2c84e626ffa417ee9352cdfc435b26e8f60f547"
+  integrity sha512-TegfMkwy86RSvSiIVREG6OqgRL7agqRsKYyWYacyVUAdpcIi34QoCOED476Mbf8J5d06e1hygSdvJhehlxEBhQ==
   dependencies:
-    "@radix-ui/react-dialog" "^1.0.4"
+    "@radix-ui/react-dialog" "^1.1.1"
 
 vfile-location@^5.0.0:
   version "5.0.2"
@@ -21798,7 +21855,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -21816,15 +21873,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
@@ -22066,6 +22114,11 @@ zod@^3.22.3, zod@^3.22.4:
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.4.tgz#f31c3a9386f61b1f228af56faa9255e845cf3fff"
   integrity sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==
 
+zod@^3.23.8:
+  version "3.23.8"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.23.8.tgz#e37b957b5d52079769fb8097099b592f0ef4067d"
+  integrity sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==
+
 zustand@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.0.tgz#141354af56f91de378aa6c4b930032ab338f3ef0"