diff --git a/Cargo.lock b/Cargo.lock
index 42f7f24..9215e0a 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -30,24 +30,6 @@ dependencies = [
  "version_check",
 ]
 
-[[package]]
-name = "aho-corasick"
-version = "0.7.20"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cc936419f96fa211c1b9166887b38e5e40b19958e5b895be7c1f93adec7071ac"
-dependencies = [
- "memchr",
-]
-
-[[package]]
-name = "aho-corasick"
-version = "1.0.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "43f6cb1bf222025340178f382c426f13757b2960e89779dfcb319c32542a5a41"
-dependencies = [
- "memchr",
-]
-
 [[package]]
 name = "aliasable"
 version = "0.1.3"
@@ -82,6 +64,12 @@ version = "1.0.71"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9c7d0618f0e0b7e8ff11427422b64564d5fb0be1940354bfe2e0529b18a9d9b8"
 
+[[package]]
+name = "anymap2"
+version = "0.13.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d301b3b94cb4b2f23d7917810addbbaff90738e0ca2be692bd027e70d7e0330c"
+
 [[package]]
 name = "api"
 version = "0.1.0"
@@ -257,17 +245,6 @@ version = "1.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1181e1e0d1fce796a03db1ae795d67167da795f9cf4a39c37589e85ef57f26d3"
 
-[[package]]
-name = "atty"
-version = "0.2.14"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d9b39be18770d11421cdb1b9947a45dd3f37e93092cbf377614828a319d5fee8"
-dependencies = [
- "hermit-abi 0.1.19",
- "libc",
- "winapi",
-]
-
 [[package]]
 name = "autocfg"
 version = "1.1.0"
@@ -372,6 +349,15 @@ dependencies = [
  "num-traits",
 ]
 
+[[package]]
+name = "bincode"
+version = "1.3.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b1f45e9417d87227c7a56d22e471c6206462cba514c7590c09aff4cf6d1ddcad"
+dependencies = [
+ "serde",
+]
+
 [[package]]
 name = "binstring"
 version = "0.1.1"
@@ -465,31 +451,12 @@ dependencies = [
  "syn 1.0.109",
 ]
 
-[[package]]
-name = "bstr"
-version = "1.5.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a246e68bb43f6cd9db24bea052a53e40405417c5fb372e3d1a8a7f770a564ef5"
-dependencies = [
- "memchr",
- "serde",
-]
-
 [[package]]
 name = "bumpalo"
 version = "3.12.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3c6ed94e98ecff0c12dd1b04c15ec0d7d9458ca8fe806cea6f12954efe74c63b"
 
-[[package]]
-name = "bumpslab"
-version = "0.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7e5816c875b50b9866d759fa24d46159dccab0d7942c0ccbfd700b4f45dd961e"
-dependencies = [
- "bumpalo",
-]
-
 [[package]]
 name = "bytecheck"
 version = "0.6.11"
@@ -543,12 +510,9 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4e3c5919066adf22df73762e50cffcde3a758f2a848b113b586d1f86728b673b"
 dependencies = [
  "iana-time-zone",
- "js-sys",
  "num-integer",
  "num-traits",
  "serde",
- "time 0.1.45",
- "wasm-bindgen",
  "winapi",
 ]
 
@@ -596,21 +560,10 @@ checksum = "a90d114103adbc625300f346d4d09dfb4ab1c4a8df6868435dd903392ecf4354"
 dependencies = [
  "libc",
  "once_cell",
- "wasi 0.11.0+wasi-snapshot-preview1",
+ "wasi",
  "wasm-bindgen",
 ]
 
-[[package]]
-name = "colored"
-version = "2.0.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b3616f750b84d8f0de8a58bda93e08e2a81ad3f523089b05f1dffecab48c6cbd"
-dependencies = [
- "atty",
- "lazy_static",
- "winapi",
-]
-
 [[package]]
 name = "concurrent-queue"
 version = "2.2.0"
@@ -662,16 +615,6 @@ dependencies = [
  "libc",
 ]
 
-[[package]]
-name = "crossbeam-channel"
-version = "0.5.8"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a33c2bf77f2df06183c3aa30d1e96c0695a313d4f9c453cc3762a6db39f99200"
-dependencies = [
- "cfg-if",
- "crossbeam-utils",
-]
-
 [[package]]
 name = "crossbeam-queue"
 version = "0.3.8"
@@ -790,39 +733,27 @@ dependencies = [
 
 [[package]]
 name = "dioxus"
-version = "0.3.2"
+version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5e24fd50a67f179f801ffe5316357d95c064676661614a38efd8902361dac9ef"
+checksum = "734b13d4894daf5cee7d4a1d7960da207acd7d4b4e427c05c201a2ba87a5c032"
 dependencies = [
  "dioxus-core",
  "dioxus-core-macro",
  "dioxus-hooks",
  "dioxus-hot-reload",
  "dioxus-html",
- "dioxus-rsx 0.0.3",
-]
-
-[[package]]
-name = "dioxus-class"
-version = "0.3.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1ae6a780995ce2bc93ae002a0a2d6c1ffecc5eb50c3e53d2d6e6152fddd40972"
-dependencies = [
- "dioxus",
- "paste",
+ "dioxus-rsx",
 ]
 
 [[package]]
 name = "dioxus-core"
-version = "0.3.3"
+version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4e4d15b0bb9c58d015b2295f240600dd76e427758377569fa33783afc295706a"
+checksum = "fbd6a9201a64b1ba16872f0e901c07fa1a32deb922192488865a9b4b4eba8e0c"
 dependencies = [
  "bumpalo",
- "bumpslab",
  "futures-channel",
  "futures-util",
- "indexmap",
  "log",
  "longest-increasing-subsequence",
  "rustc-hash",
@@ -833,60 +764,65 @@ dependencies = [
 
 [[package]]
 name = "dioxus-core-macro"
-version = "0.3.0"
+version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f8eb3c0de91a0351ed6bb4ea866ce42d461792803b407df35d5a77db8d1e8276"
+checksum = "e98f3e3fc1fb1f8796e30a5eaa6e037ca44105bdee3a70ed66721ac8b720c931"
 dependencies = [
- "dioxus-rsx 0.0.2",
+ "dioxus-rsx",
  "proc-macro2",
  "quote",
- "syn 1.0.109",
+ "syn 2.0.16",
 ]
 
 [[package]]
-name = "dioxus-hooks"
-version = "0.3.1"
+name = "dioxus-debug-cell"
+version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9e79849e59470c6cf94ba7e18655e3b0da927b2beaba6c0095963ca9531be3b2"
+checksum = "2ea539174bb236e0e7dc9c12b19b88eae3cb574dedbd0252a2d43ea7e6de13e2"
+
+[[package]]
+name = "dioxus-hooks"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "808e553203e4c2534e186a8a9da0f4032027ff5413067307ea8ecbd793e37f57"
 dependencies = [
  "dioxus-core",
+ "dioxus-debug-cell",
  "futures-channel",
  "log",
+ "slab",
+ "thiserror",
 ]
 
 [[package]]
 name = "dioxus-hot-reload"
-version = "0.1.1"
+version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e478ed2d0f70aa51608e8672704e0f35925ddc7ad80a28d255bfe504dd5362bd"
+checksum = "1ceb8aca167a64e4b0afaff447b13052402a9ade3f21b9e7d031b6b72669994a"
 dependencies = [
- "chrono",
  "dioxus-core",
  "dioxus-html",
- "dioxus-rsx 0.0.3",
- "execute",
- "ignore",
- "interprocess",
- "notify",
- "once_cell",
+ "dioxus-rsx",
+ "interprocess-docfix",
  "serde",
  "serde_json",
 ]
 
 [[package]]
 name = "dioxus-html"
-version = "0.3.1"
+version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7682a6615e4e5a460cd3293ce420451abffb719c84c4b54e297b17365f601fb4"
+checksum = "fb712fe56650dafddb626f8aed3d6ae194706c0299e175e99b45464add8b7af1"
 dependencies = [
+ "async-channel",
  "async-trait",
  "dioxus-core",
- "dioxus-rsx 0.0.3",
  "enumset",
  "euclid",
  "keyboard-types",
  "serde",
  "serde-value",
+ "serde_json",
  "serde_repr",
  "wasm-bindgen",
  "web-sys",
@@ -894,9 +830,9 @@ dependencies = [
 
 [[package]]
 name = "dioxus-interpreter-js"
-version = "0.3.3"
+version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1d6a3e878e9623d948ebe14cec62e98af4e5c897f65ae2d27663b209f4d382e2"
+checksum = "b2d35a6680cb2cf003a6c84fcaaa6d2a60b930efe4750910977b4e513bd73826"
 dependencies = [
  "js-sys",
  "sledgehammer_bindgen",
@@ -907,19 +843,18 @@ dependencies = [
 
 [[package]]
 name = "dioxus-router"
-version = "0.3.0"
+version = "0.4.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1f06b41f4af0b206ff39308488214a0d2dc67ad9bbbc60e7a322fe871b000bf5"
+checksum = "cdeab6aa76cd7dfb05355f69834eb57c14d77c0489981d9b9815e5ebf41ea9f7"
 dependencies = [
+ "anyhow",
  "dioxus",
- "futures-channel",
+ "dioxus-router-macro",
  "futures-util",
- "gloo-events",
+ "gloo",
+ "gloo-utils",
  "js-sys",
  "log",
- "serde",
- "serde_urlencoded",
- "simple_logger",
  "thiserror",
  "url",
  "wasm-bindgen",
@@ -927,40 +862,36 @@ dependencies = [
 ]
 
 [[package]]
-name = "dioxus-rsx"
-version = "0.0.2"
+name = "dioxus-router-macro"
+version = "0.4.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "42b7fee07fccc5c3fb9b341a0000db47fc4ab0a2a5bf268c71f6f1c9fd3ed598"
+checksum = "0f1ccc3e764b77995c42e87cc2be93f69886a72ac3c4ca0162abcc5244442bc6"
 dependencies = [
- "dioxus-core",
- "internment",
  "proc-macro2",
  "quote",
- "serde",
- "syn 1.0.109",
+ "slab",
+ "syn 2.0.16",
 ]
 
 [[package]]
 name = "dioxus-rsx"
-version = "0.0.3"
+version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e8544632e20f462a64f26502c91e7cf6ae3b30d82956e70543644d2c16b6659d"
+checksum = "531a6b418fb75d08389920c024d1c082b500844cf50ccb16ad8d9ee33a1907a1"
 dependencies = [
  "dioxus-core",
- "internment",
  "proc-macro2",
  "quote",
- "serde",
- "syn 1.0.109",
+ "syn 2.0.16",
 ]
 
 [[package]]
 name = "dioxus-web"
-version = "0.3.2"
+version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e7609e4635a0061dc2b0c01fd8f1a9dd3cb27ee786feed2e5a5cedc1110f1d44"
+checksum = "91d9dcd05db44c292220d520868bf703ea8165539ed8d80c60a7c33c3a846e8c"
 dependencies = [
- "anyhow",
+ "async-channel",
  "async-trait",
  "console_error_panic_hook",
  "dioxus-core",
@@ -968,15 +899,12 @@ dependencies = [
  "dioxus-interpreter-js",
  "futures-channel",
  "futures-util",
- "gloo-timers",
  "js-sys",
  "log",
- "once_cell",
  "rustc-hash",
  "serde",
  "serde-wasm-bindgen",
  "serde_json",
- "smallstr",
  "wasm-bindgen",
  "wasm-bindgen-futures",
  "web-sys",
@@ -991,7 +919,6 @@ dependencies = [
  "api",
  "console_log",
  "dioxus",
- "dioxus-class",
  "dioxus-router",
  "dioxus-web",
  "gloo-net",
@@ -1166,43 +1093,6 @@ version = "2.5.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0206175f82b8d6bf6652ff7d71a1e27fd2e4efde587fd368662814d6ec1d9ce0"
 
-[[package]]
-name = "execute"
-version = "0.2.12"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "16d9a9ea4c04632c16bc5c71a2fcc63d308481f7fc67eb1a1ce6315c44a426ae"
-dependencies = [
- "execute-command-macro",
- "execute-command-tokens",
- "generic-array",
-]
-
-[[package]]
-name = "execute-command-macro"
-version = "0.1.8"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a5fbc65a0cf735106743f4c38c9a3671c1e734b5c2c20d21a3c93c696daa3157"
-dependencies = [
- "execute-command-macro-impl",
-]
-
-[[package]]
-name = "execute-command-macro-impl"
-version = "0.1.9"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "55a9a55d1dab3b07854648d48e366f684aefe2ac78ae28cec3bf65e3cd53d9a3"
-dependencies = [
- "execute-command-tokens",
- "quote",
- "syn 2.0.16",
-]
-
-[[package]]
-name = "execute-command-tokens"
-version = "0.1.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8ba569491c70ec8471e34aa7e9c0b9e82bb5d2464c0398442d17d3c4af814e5a"
-
 [[package]]
 name = "fastrand"
 version = "1.9.0"
@@ -1222,18 +1112,6 @@ dependencies = [
  "subtle",
 ]
 
-[[package]]
-name = "filetime"
-version = "0.2.21"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5cbc844cecaee9d4443931972e1289c8ff485cb4cc2767cb03ca139ed6885153"
-dependencies = [
- "cfg-if",
- "libc",
- "redox_syscall 0.2.16",
- "windows-sys 0.48.0",
-]
-
 [[package]]
 name = "flume"
 version = "0.10.14"
@@ -1261,15 +1139,6 @@ dependencies = [
  "percent-encoding",
 ]
 
-[[package]]
-name = "fsevent-sys"
-version = "4.1.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "76ee7a02da4d231650c7cea31349b889be2f45ddb3ef3032d2ec8185f6313fd2"
-dependencies = [
- "libc",
-]
-
 [[package]]
 name = "funty"
 version = "2.0.0"
@@ -1429,21 +1298,50 @@ dependencies = [
  "cfg-if",
  "js-sys",
  "libc",
- "wasi 0.11.0+wasi-snapshot-preview1",
+ "wasi",
  "wasm-bindgen",
 ]
 
 [[package]]
-name = "globset"
-version = "0.4.10"
+name = "gloo"
+version = "0.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "029d74589adefde59de1a0c4f4732695c32805624aec7b68d91503d4dba79afc"
+checksum = "28999cda5ef6916ffd33fb4a7b87e1de633c47c0dc6d97905fee1cdaa142b94d"
 dependencies = [
- "aho-corasick 0.7.20",
- "bstr",
- "fnv",
- "log",
- "regex",
+ "gloo-console",
+ "gloo-dialogs",
+ "gloo-events",
+ "gloo-file",
+ "gloo-history",
+ "gloo-net",
+ "gloo-render",
+ "gloo-storage",
+ "gloo-timers",
+ "gloo-utils",
+ "gloo-worker",
+]
+
+[[package]]
+name = "gloo-console"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "82b7ce3c05debe147233596904981848862b068862e9ec3e34be446077190d3f"
+dependencies = [
+ "gloo-utils",
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-dialogs"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "67062364ac72d27f08445a46cab428188e2e224ec9e37efdba48ae8c289002e6"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
 ]
 
 [[package]]
@@ -1456,6 +1354,34 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-file"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a8d5564e570a38b43d78bdc063374a0c3098c4f0d64005b12f9bbe87e869b6d7"
+dependencies = [
+ "gloo-events",
+ "js-sys",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-history"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "85725d90bf0ed47063b3930ef28e863658a7905989e9929a8708aab74a1d5e7f"
+dependencies = [
+ "gloo-events",
+ "gloo-utils",
+ "serde",
+ "serde-wasm-bindgen",
+ "serde_urlencoded",
+ "thiserror",
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-net"
 version = "0.3.0"
@@ -1477,6 +1403,16 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-render"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2fd9306aef67cfd4449823aadcd14e3958e0800aa2183955a309112a84ec7764"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-storage"
 version = "0.2.2"
@@ -1517,6 +1453,23 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-worker"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "13471584da78061a28306d1359dd0178d8d6fc1c7c80e5e35d27260346e0516a"
+dependencies = [
+ "anymap2",
+ "bincode",
+ "gloo-console",
+ "gloo-utils",
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
 [[package]]
 name = "group"
 version = "0.13.0"
@@ -1617,15 +1570,6 @@ dependencies = [
  "unicode-segmentation",
 ]
 
-[[package]]
-name = "hermit-abi"
-version = "0.1.19"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "62b467343b94ba476dcb2500d242dadbb39557df889310ac77c5d99100aaac33"
-dependencies = [
- "libc",
-]
-
 [[package]]
 name = "hermit-abi"
 version = "0.2.6"
@@ -1820,23 +1764,6 @@ dependencies = [
  "unicode-normalization",
 ]
 
-[[package]]
-name = "ignore"
-version = "0.4.20"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dbe7873dab538a9a44ad79ede1faf5f30d49f9a5c883ddbab48bce81b64b7492"
-dependencies = [
- "globset",
- "lazy_static",
- "log",
- "memchr",
- "regex",
- "same-file",
- "thread_local",
- "walkdir",
- "winapi-util",
-]
-
 [[package]]
 name = "indexmap"
 version = "1.9.3"
@@ -1848,26 +1775,6 @@ dependencies = [
  "serde",
 ]
 
-[[package]]
-name = "inotify"
-version = "0.9.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f8069d3ec154eb856955c1c0fbffefbf5f3c40a104ec912d4797314c1801abff"
-dependencies = [
- "bitflags",
- "inotify-sys",
- "libc",
-]
-
-[[package]]
-name = "inotify-sys"
-version = "0.1.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e05c02b5e89bff3b946cedeca278abc628fe811e604f027c45a8aa3cf793d0eb"
-dependencies = [
- "libc",
-]
-
 [[package]]
 name = "instant"
 version = "0.1.12"
@@ -1878,20 +1785,10 @@ dependencies = [
 ]
 
 [[package]]
-name = "internment"
-version = "0.7.1"
+name = "interprocess-docfix"
+version = "1.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "161079c3ad892faa215fcfcf3fd7a6a3c9288df2b06a2c2bad7fbfad4f01d69d"
-dependencies = [
- "hashbrown 0.12.3",
- "parking_lot 0.12.1",
-]
-
-[[package]]
-name = "interprocess"
-version = "1.2.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "81f2533f3be42fffe3b5e63b71aeca416c1c3bc33e4e27be018521e76b1f38fb"
+checksum = "4b84ee245c606aeb0841649a9288e3eae8c61b853a8cd5c0e14450e96d53d28f"
 dependencies = [
  "blocking",
  "cfg-if",
@@ -2014,26 +1911,6 @@ dependencies = [
  "unicode-segmentation",
 ]
 
-[[package]]
-name = "kqueue"
-version = "1.0.7"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2c8fc60ba15bf51257aa9807a48a61013db043fcf3a78cb0d916e8e396dcad98"
-dependencies = [
- "kqueue-sys",
- "libc",
-]
-
-[[package]]
-name = "kqueue-sys"
-version = "1.0.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8367585489f01bc55dd27404dcf56b95e6da061a256a666ab23be9ba96a2e587"
-dependencies = [
- "bitflags",
- "libc",
-]
-
 [[package]]
 name = "kv-log-macro"
 version = "1.0.7"
@@ -2209,7 +2086,7 @@ checksum = "5b9d9a46eff5b4ff64b45a9e316a6d1e0bc719ef429cbec4dc630684212bfdf9"
 dependencies = [
  "libc",
  "log",
- "wasi 0.11.0+wasi-snapshot-preview1",
+ "wasi",
  "windows-sys 0.45.0",
 ]
 
@@ -2229,24 +2106,6 @@ dependencies = [
  "minimal-lexical",
 ]
 
-[[package]]
-name = "notify"
-version = "5.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "729f63e1ca555a43fe3efa4f3efdf4801c479da85b432242a7b726f353c88486"
-dependencies = [
- "bitflags",
- "crossbeam-channel",
- "filetime",
- "fsevent-sys",
- "inotify",
- "kqueue",
- "libc",
- "mio",
- "walkdir",
- "windows-sys 0.45.0",
-]
-
 [[package]]
 name = "nu-ansi-term"
 version = "0.46.0"
@@ -2326,15 +2185,6 @@ dependencies = [
  "libc",
 ]
 
-[[package]]
-name = "num_threads"
-version = "0.1.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2819ce041d2ee131036f4fc9d6ae7ae125a3a40e97ba64d04fe799ad9dabbb44"
-dependencies = [
- "libc",
-]
-
 [[package]]
 name = "oauth2"
 version = "4.4.1"
@@ -2880,8 +2730,6 @@ version = "1.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "af83e617f331cc6ae2da5443c602dfa5af81e517212d9d611a5b3ba1777b5370"
 dependencies = [
- "aho-corasick 1.0.2",
- "memchr",
  "regex-syntax 0.7.1",
 ]
 
@@ -3152,15 +3000,6 @@ version = "1.0.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f91339c0467de62360649f8d3e185ca8de4224ff281f66000de5eb2a77a79041"
 
-[[package]]
-name = "same-file"
-version = "1.0.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "93fc1dc3aaa9bfed95e02e6eadabb4baf7e3078b0bd1b4d7b6b0b68378900502"
-dependencies = [
- "winapi-util",
-]
-
 [[package]]
 name = "scopeguard"
 version = "1.1.0"
@@ -3199,7 +3038,7 @@ dependencies = [
  "serde_json",
  "sqlx",
  "thiserror",
- "time 0.3.21",
+ "time",
  "tracing",
  "url",
  "uuid",
@@ -3262,7 +3101,7 @@ dependencies = [
  "rust_decimal",
  "sea-query-derive",
  "serde_json",
- "time 0.3.21",
+ "time",
  "uuid",
 ]
 
@@ -3278,7 +3117,7 @@ dependencies = [
  "sea-query",
  "serde_json",
  "sqlx",
- "time 0.3.21",
+ "time",
  "uuid",
 ]
 
@@ -3387,9 +3226,9 @@ dependencies = [
 
 [[package]]
 name = "serde-wasm-bindgen"
-version = "0.4.5"
+version = "0.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e3b4c031cd0d9014307d82b8abf653c0290fbdaeb4c02d00c63cf52f728628bf"
+checksum = "f3b143e2833c57ab9ad3ea280d21fd34e285a42837aeb0ee301f4f41890fa00e"
 dependencies = [
  "js-sys",
  "serde",
@@ -3472,7 +3311,7 @@ dependencies = [
  "serde",
  "serde_json",
  "serde_with_macros",
- "time 0.3.21",
+ "time",
 ]
 
 [[package]]
@@ -3544,18 +3383,6 @@ version = "0.1.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f27f6278552951f1f2b8cf9da965d10969b2efdea95a6ec47987ab46edfe263a"
 
-[[package]]
-name = "simple_logger"
-version = "4.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2230cd5c29b815c9b699fb610b49a5ed65588f3509d9f0108be3a885da629333"
-dependencies = [
- "colored",
- "log",
- "time 0.3.21",
- "windows-sys 0.42.0",
-]
-
 [[package]]
 name = "siphasher"
 version = "0.3.10"
@@ -3583,14 +3410,13 @@ dependencies = [
 
 [[package]]
 name = "sledgehammer_utils"
-version = "0.1.1"
+version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "095fd5332b21763203248070746b86b98c6167fc620af73d4cb2bc2d7d9cd815"
+checksum = "5cd16550f1dd7866c7580dbf80c892dc1bef106737eeb850d42c62ec61896059"
 dependencies = [
  "lru",
  "once_cell",
  "rustc-hash",
- "ux",
 ]
 
 [[package]]
@@ -3599,15 +3425,6 @@ version = "0.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4679d6eef28b85020158619fc09769de89e90886c5de7157587d87cb72648faa"
 
-[[package]]
-name = "smallstr"
-version = "0.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1e922794d168678729ffc7e07182721a14219c65814e66e91b839a272fe5ae4f"
-dependencies = [
- "smallvec",
-]
-
 [[package]]
 name = "smallvec"
 version = "1.10.0"
@@ -3742,7 +3559,7 @@ dependencies = [
  "sqlx-rt",
  "stringprep",
  "thiserror",
- "time 0.3.21",
+ "time",
  "tokio-stream",
  "url",
  "uuid",
@@ -3909,17 +3726,6 @@ dependencies = [
  "once_cell",
 ]
 
-[[package]]
-name = "time"
-version = "0.1.45"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1b797afad3f312d1c66a56d11d0316f916356d11bd158fbc6ca6389ff6bf805a"
-dependencies = [
- "libc",
- "wasi 0.10.0+wasi-snapshot-preview1",
- "winapi",
-]
-
 [[package]]
 name = "time"
 version = "0.3.21"
@@ -3927,8 +3733,6 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8f3403384eaacbca9923fa06940178ac13e4edb725486d70e8e15881d0c836cc"
 dependencies = [
  "itoa",
- "libc",
- "num_threads",
  "serde",
  "time-core",
  "time-macros",
@@ -4269,12 +4073,6 @@ dependencies = [
  "serde",
 ]
 
-[[package]]
-name = "ux"
-version = "0.1.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2cb3ff47e36907a6267572c1e398ff32ef78ac5131de8aa272e53846592c207e"
-
 [[package]]
 name = "valuable"
 version = "0.1.0"
@@ -4305,16 +4103,6 @@ version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9d5b2c62b4012a3e1eca5a7e077d13b3bf498c4073e33ccd58626607748ceeca"
 
-[[package]]
-name = "walkdir"
-version = "2.3.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "36df944cda56c7d8d8b7496af378e6b16de9284591917d307c9b4d313c44e698"
-dependencies = [
- "same-file",
- "winapi-util",
-]
-
 [[package]]
 name = "want"
 version = "0.3.0"
@@ -4325,12 +4113,6 @@ dependencies = [
  "try-lock",
 ]
 
-[[package]]
-name = "wasi"
-version = "0.10.0+wasi-snapshot-preview1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1a143597ca7c7793eff794def352d41792a93c481eb1042423ff7ff72ba2c31f"
-
 [[package]]
 name = "wasi"
 version = "0.11.0+wasi-snapshot-preview1"
@@ -4458,15 +4240,6 @@ version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ac3b87c63620426dd9b991e5ce0329eff545bccbbb34f3be09ff6fb6ab51b7b6"
 
-[[package]]
-name = "winapi-util"
-version = "0.1.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "70ec6ce85bb158151cae5e5c87f95a8e97d2c0c4b001223f33a334e3ce5de178"
-dependencies = [
- "winapi",
-]
-
 [[package]]
 name = "winapi-x86_64-pc-windows-gnu"
 version = "0.4.0"
@@ -4482,21 +4255,6 @@ dependencies = [
  "windows-targets 0.48.0",
 ]
 
-[[package]]
-name = "windows-sys"
-version = "0.42.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5a3e1820f08b8513f676f7ab6c1f99ff312fb97b553d30ff4dd86f9f15728aa7"
-dependencies = [
- "windows_aarch64_gnullvm 0.42.2",
- "windows_aarch64_msvc 0.42.2",
- "windows_i686_gnu 0.42.2",
- "windows_i686_msvc 0.42.2",
- "windows_x86_64_gnu 0.42.2",
- "windows_x86_64_gnullvm 0.42.2",
- "windows_x86_64_msvc 0.42.2",
-]
-
 [[package]]
 name = "windows-sys"
 version = "0.45.0"
diff --git a/app/Cargo.toml b/app/Cargo.toml
index aae7e8a..6d4683b 100644
--- a/app/Cargo.toml
+++ b/app/Cargo.toml
@@ -10,10 +10,9 @@ ammonia = "3.3.0"
 anyhow = "1.0.71"
 api = { version = "0.1.0", path = "../api" }
 console_log = { version = "1.0.0", features = ["color"] }
-dioxus = "0.3.2"
-dioxus-class = "0.3.0"
-dioxus-router = { version = "0.3.0", features = ["web"] }
-dioxus-web = "0.3.2"
+dioxus = "0.4.0"
+dioxus-router = { version = "0.4.1", features = ["web"] }
+dioxus-web = "0.4.0"
 gloo-net = { version = "0.3.0", features = ["json"] }
 gloo-storage = "0.2.2"
 gloo-utils = "0.1.7"
diff --git a/app/src/bootstrap/mod.rs b/app/src/bootstrap/mod.rs
index 9b67321..ed54701 100644
--- a/app/src/bootstrap/mod.rs
+++ b/app/src/bootstrap/mod.rs
@@ -1,5 +1,4 @@
 use dioxus::prelude::*;
-use dioxus_class::prelude::*;
 
 pub mod bs {
     use wasm_bindgen::prelude::*;
@@ -65,21 +64,30 @@ pub struct ModalProps<'a> {
 }
 
 pub fn Modal<'a>(cx: Scope<'a, ModalProps<'a>>) -> Element<'a> {
-    let mut classes = Class::from(vec!["modal"]);
+    let mut classes = vec!["modal"];
 
     if cx.props.fade {
-        classes.append("fade");
+        classes.push("fade");
     }
 
-    let mut dialog_class = Class::from(vec!["modal-dialog"]);
+    let classes = classes.join(" ");
+
+    let mut dialog_class = vec!["modal-dialog"];
 
     if cx.props.centered {
-        dialog_class.append("modal-dialog-centered");
+        dialog_class.push("modal-dialog-centered");
     }
 
+    let dialog_class = dialog_class.join(" ");
+
     cx.render(rsx! {
-        div { class: classes, id: cx.props.id.as_str(), tabindex: "-1", "aria-labelledby": cx.props.labeled_by.as_deref(), "aria-hidden": "true",
-            div { class: dialog_class,
+        div {
+            class: "{classes}",
+            id: cx.props.id.as_str(),
+            tabindex: "-1",
+            "aria-labelledby": cx.props.labeled_by.as_deref(),
+            "aria-hidden": "true",
+            div { class: "{dialog_class}",
                 div { class: "modal-content", &cx.props.children }
             }
         }
diff --git a/app/src/full_context.rs b/app/src/full_context.rs
index 269cae2..02b44f4 100644
--- a/app/src/full_context.rs
+++ b/app/src/full_context.rs
@@ -6,11 +6,16 @@ use std::{
 };
 
 use dioxus::prelude::*;
-use dioxus_router::use_router;
+use dioxus_router::prelude::*;
 use gloo_storage::{errors::StorageError, LocalStorage, Storage};
 use uuid::Uuid;
 
-use crate::{HouseholdInfo, LoginInfo, RedirectorProps};
+use crate::{HouseholdInfo, LoginInfo, Route};
+
+#[derive(Props)]
+pub struct RedirectorProps<'a> {
+    children: Element<'a>,
+}
 
 pub struct RefreshHandle {
     run: Box<dyn FnOnce()>,
@@ -159,12 +164,12 @@ fn FullContextRedirectInner<'a>(cx: Scope<'a, RedirectorProps<'a>>) -> Element {
 }
 
 pub fn FullContextRedirect<'a>(cx: Scope<'a, RedirectorProps<'a>>) -> Element {
-    let router = use_router(cx);
+    let navigator = use_navigator(cx);
 
     let check_token = match LocalStorage::get::<LoginInfo>("token") {
         Ok(_) => true,
         Err(StorageError::KeyNotFound(_)) => {
-            router.navigate_to("/login");
+            navigator.push(Route::Login);
             false
         }
         Err(e) => unreachable!("Could not get token: {e:?}"),
@@ -173,7 +178,7 @@ pub fn FullContextRedirect<'a>(cx: Scope<'a, RedirectorProps<'a>>) -> Element {
     let check_household = match LocalStorage::get::<HouseholdInfo>("household") {
         Ok(_) => true,
         Err(StorageError::KeyNotFound(_)) => {
-            router.navigate_to("/household_selection");
+            navigator.push(Route::HouseholdSelection);
             false
         }
         Err(e) => unreachable!("Could not get household: {e:?}"),
diff --git a/app/src/ingredients.rs b/app/src/ingredients.rs
index 3830bea..03ce04f 100644
--- a/app/src/ingredients.rs
+++ b/app/src/ingredients.rs
@@ -240,8 +240,8 @@ pub fn Ingredients(cx: Scope) -> Element {
     let error = use_error(cx);
 
     let add_ingredient = move |ev: FormEvent| {
-        let name = ev.values["newIgName"].to_string();
-        let unit = ev.values["newIgUnit"].to_string();
+        let name = ev.values["newIgName"][0].to_string();
+        let unit = ev.values["newIgUnit"][0].to_string();
 
         if name.is_empty() && unit.is_empty() {
             return;
diff --git a/app/src/main.rs b/app/src/main.rs
index 5cc25c6..cbad1a3 100644
--- a/app/src/main.rs
+++ b/app/src/main.rs
@@ -6,16 +6,13 @@ use api::{
     LoginResponse, UserInfo,
 };
 use dioxus::prelude::*;
-use dioxus_router::{use_route, use_router, Redirect, Route, Router};
+use dioxus_router::prelude::*;
 use gloo_storage::{errors::StorageError, LocalStorage, Storage};
 use itertools::Itertools;
 use serde::{Deserialize, Serialize};
 use uuid::Uuid;
 
-use crate::{
-    bootstrap::{bs, FormModal, ModalToggleButton, Spinner},
-    sidebar::Page,
-};
+use crate::bootstrap::{bs, FormModal, ModalToggleButton, Spinner};
 
 mod bootstrap;
 mod ingredients;
@@ -46,33 +43,6 @@ macro_rules! api {
     }};
 }
 
-#[macro_export]
-macro_rules! to_owned_props {
-    // Rule matching simple symbols without a path
-    ($es:ident $(, $($rest:tt)*)?) => {
-        #[allow(unused_mut)]
-        let mut $es = $es.to_owned();
-        $( to_owned_props![$($rest)*] )?
-    };
-
-    // We need to find the last element in a path, for this we need to unstack the path part by
-    // part using, separating what we have with a '@'
-    ($($deref:ident).+ $(, $($rest:tt)*)?) => {
-        to_owned_props![@ $($deref).+ $(, $($rest)*)?]
-    };
-
-    // Take the head of the path and add it to the list of $deref
-    ($($deref:ident)* @ $head:ident $( . $tail:ident)+ $(, $($rest:tt)*)?) => {
-        to_owned_props![$($deref)* $head @ $($tail).+ $(, $($rest)*)?]
-    };
-    // We have exhausted the path, use the last as a name
-    ($($deref:ident)* @ $last:ident $(, $($rest:tt)*)? ) => {
-        #[allow(unused_mut)]
-        let mut $last = $($deref .)* $last .to_owned();
-        $(to_owned_props![$($rest)*])?
-    };
-}
-
 #[derive(Props)]
 pub struct ErrorProps<'a> {
     error: &'a Option<String>,
@@ -158,26 +128,28 @@ pub struct HouseholdInfo {
     name: String,
 }
 
-#[derive(Props)]
-pub struct RedirectorProps<'a> {
-    children: Element<'a>,
-}
-
-pub fn LoginRedirect<'a>(cx: Scope<'a, RedirectorProps<'a>>) -> Element {
-    let router = use_router(cx);
+pub fn LoginRedirect(cx: Scope) -> Element {
+    let navigator = use_navigator(cx);
 
     let token = match LocalStorage::get::<LoginInfo>("token") {
-        Ok(v) => v,
+        Ok(v) => Some(v),
         Err(StorageError::KeyNotFound(_)) => {
-            router.navigate_to("/login");
             return None;
         }
         Err(e) => unreachable!("Could not get token: {e:?}"),
     };
 
-    use_shared_state_provider(cx, || token);
+    use_shared_state_provider(cx, || token.clone());
 
-    cx.render(rsx! {&cx.props.children})
+    cx.render(match token {
+        Some(_) => rsx! {
+            Outlet::<Route> {}
+        },
+        None => {
+            navigator.push(Route::Login);
+            rsx! {{}}
+        }
+    })
 }
 
 async fn do_login(username: String, password: String) -> anyhow::Result<()> {
@@ -242,20 +214,20 @@ fn Openid(cx: Scope) -> Element {
 
 fn Login(cx: Scope) -> Element {
     let error = use_state(cx, || None::<String>);
-    let router = use_router(cx);
+    let navigator = use_navigator(cx);
 
     let on_submit = move |e: Event<FormData>| {
-        to_owned![error, router];
+        to_owned![error, navigator];
         cx.spawn(async move {
             match do_login(
-                e.values["username"].to_string(),
-                e.values["password"].to_string(),
+                e.values["username"][0].to_string(),
+                e.values["password"][0].to_string(),
             )
             .await
             {
                 Ok(_) => {
                     error.set(None);
-                    router.navigate_to("/");
+                    navigator.push(Route::Index);
                 }
                 Err(e) => {
                     error.set(Some(format!("Could not log in: {e}")));
@@ -357,11 +329,11 @@ fn CreateHousehold(cx: Scope) -> Element {
 
     let members = use_ref(cx, Vec::<(Uuid, String)>::new);
 
-    let router = use_router(cx);
+    let navigator = use_navigator(cx);
 
     let token = login.read().token.clone();
     let on_submit = move |_| {
-        to_owned![members, name, error, token, router];
+        to_owned![members, name, error, token, navigator];
 
         cx.spawn(async move {
             match do_new_household(token.clone(), name.to_string()).await {
@@ -387,7 +359,7 @@ fn CreateHousehold(cx: Scope) -> Element {
                     let modal = bs::Modal::get_instance("#newHsModal");
                     modal.hide();
 
-                    router.navigate_to("/");
+                    navigator.push(Route::Index);
                     error.set(None);
                 }
                 Err(e) => {
@@ -490,7 +462,7 @@ async fn fetch_households(token: String) -> anyhow::Result<api::Households> {
 fn HouseholdListSelect(cx: Scope) -> Element {
     let login = use_login(cx);
     let households = use_future(cx, (), |_| fetch_households(login.read().token.clone()));
-    let router = use_router(cx);
+    let navigator = use_navigator(cx);
 
     cx.render(match households.value() {
         Some(Ok(response)) => {
@@ -511,7 +483,7 @@ fn HouseholdListSelect(cx: Scope) -> Element {
                             return;
                         }
 
-                        router.navigate_to("/");
+                        navigator.push(Route::Index);
                     };
                     rsx! {button { key: "{id}", class: "btn btn-secondary m-1", onclick: onclick, "{info.name}" }}
                 });
@@ -542,60 +514,69 @@ fn Index(cx: Scope) -> Element {
     cx.render(rsx! {"INDEX"})
 }
 
-#[derive(Deserialize)]
+#[derive(Deserialize, PartialEq, Clone)]
 struct OidcQuery {
     token: String,
     username: String,
 }
 
-fn OidcRedirect(cx: Scope) -> Element {
-    let auth = use_route(cx).query::<OidcQuery>();
+#[derive(PartialEq, Props)]
+struct OidcProps {
+    token: String,
+    username: String,
+}
 
-    cx.render(match auth {
-        None => rsx! {"No authentication query, internal error."},
-        Some(v) => {
-            match LocalStorage::set(
-                "token",
-                LoginInfo {
-                    token: v.token,
-                    name: v.username,
-                },
-            ) {
-                Ok(_) => {
-                    gloo_utils::window().location().replace("/").unwrap();
-                    rsx! {{}}
-                }
-                Err(_) => rsx! {"Could not store authentication, try again."},
+fn OidcRedirect(cx: Scope<OidcProps>) -> Element {
+    cx.render({
+        match LocalStorage::set(
+            "token",
+            LoginInfo {
+                token: cx.props.token.clone(),
+                name: cx.props.username.clone(),
+            },
+        ) {
+            Ok(_) => {
+                gloo_utils::window().location().replace("/").unwrap();
+                rsx! {{}}
             }
+            Err(_) => rsx! {"Could not store authentication, try again."},
         }
     })
 }
 
+use ingredients::Ingredients;
+use recipe::{RecipeCreator, RecipeList, RecipeView};
+
+#[rustfmt::skip]
+#[derive(Clone, Routable)]
+enum Route {
+    #[route("/login")]
+    Login,
+    #[route("/login/oidc?:token?:username")]
+    OidcRedirect { token: String, username: String },
+
+    #[layout(LoginRedirect)]
+        #[route("/household_selection")]
+        HouseholdSelection,
+    #[end_layout]
+
+    #[layout(RegaladeSidebar)]
+        #[route("/")]
+        Index,
+        #[route("/ingredients")]
+        Ingredients,
+        #[route("/recipe_creator")]
+        RecipeCreator,
+        #[nest("/recipe")]
+            #[route("/")]
+            RecipeList,
+            #[route("/:id")]
+            RecipeView {id: i64}
+}
+
 fn App(cx: Scope) -> Element {
     cx.render(rsx! {
-        Router {
-            Route { to: Page::Home.to(),
-                RegaladeSidebar { current: Page::Home, Index {} }
-            }
-            Route { to: Page::Ingredients.to(),
-                RegaladeSidebar { current: Page::Ingredients, ingredients::Ingredients {} }
-            }
-            Route { to: Page::RecipeCreator.to(),
-                RegaladeSidebar { current: Page::RecipeCreator, recipe::RecipeCreator {} }
-            }
-            Route { to: Page::RecipeList.to(),
-                RegaladeSidebar { current: Page::RecipeList, recipe::RecipeList {} }
-            }
-            Route { to: "/recipe/:recipe_id",
-                RegaladeSidebar { current: Page::RecipeList, recipe::RecipeView {} }
-            }
-            Route { to: "/login", Login {} }
-            Route { to: "/login/oidc", OidcRedirect {} }
-            Route { to: "/household_selection",
-                LoginRedirect { HouseholdSelection {} }
-            }
-            Route { to: "", "Not found" }
-        }
+        Router::<Route> {}
     })
 }
 
diff --git a/app/src/recipe/creator.rs b/app/src/recipe/creator.rs
index 60708a4..fc192ed 100644
--- a/app/src/recipe/creator.rs
+++ b/app/src/recipe/creator.rs
@@ -2,7 +2,7 @@ use std::{marker::PhantomData, rc::Rc};
 
 use api::{CreateRecipeRequest, CreateRecipeResponse, IngredientInfo};
 use dioxus::prelude::*;
-use dioxus_router::use_router;
+use dioxus_router::prelude::*;
 use uuid::Uuid;
 
 use crate::{
@@ -10,7 +10,7 @@ use crate::{
     bootstrap::{bs, FormModal, ModalBody, ModalFooter, ModalToggleButton, TitledModal},
     ingredients::do_add_ingredient,
     recipe::IngredientSelect,
-    use_error, use_trimmed_context, ErrorView, 
+    use_error, use_trimmed_context, ErrorView, Route, 
 };
 
 use super::RecipeIngredient;
@@ -211,7 +211,7 @@ pub fn RecipeCreator(cx: Scope) -> Element {
 
     let steps = use_state(cx, String::new);
 
-    let router = use_router(cx);
+    let navigator = use_navigator(cx);
 
     let ingredient_list: Vec<_> =
         ingredients.with(|ig| {
@@ -254,8 +254,9 @@ pub fn RecipeCreator(cx: Scope) -> Element {
             person_count,
             steps,
             error,
-            router
+            navigator
         ];
+
         cx.spawn(async move {
             match do_create_recipe(
                 token,
@@ -281,7 +282,7 @@ pub fn RecipeCreator(cx: Scope) -> Element {
                     name.set(Default::default());
                     error.set(Default::default());
 
-                    router.navigate_to(&format!("/recipe/{id}"));
+                    navigator.push(Route::RecipeView{id});
                 }
                 Err(e) => {
                     error.set(Some(format!("Error creating recipe: {e:?}")));
diff --git a/app/src/recipe/list.rs b/app/src/recipe/list.rs
index d12e8ed..57ef2b1 100644
--- a/app/src/recipe/list.rs
+++ b/app/src/recipe/list.rs
@@ -1,9 +1,11 @@
 use dioxus::prelude::*;
-use dioxus_router::Link;
+use dioxus_router::prelude::*;
 use itertools::Itertools;
 use uuid::Uuid;
 
-use crate::{api, bootstrap::Spinner, recipe::RecipeRating, use_trimmed_context, ErrorAlert};
+use crate::{
+    api, bootstrap::Spinner, recipe::RecipeRating, use_trimmed_context, ErrorAlert, Route,
+};
 
 async fn get_all_recipes(
     token: String,
@@ -37,7 +39,7 @@ pub fn RecipeList(cx: Scope) -> Element {
                                 div { key: "{id}", class: "col",
                                     div { class: "p-3 border rounded border-light-subtle h-100",
                                         Link {
-                                            to: "/recipe/{id}",
+                                            to: Route::RecipeView {id: *id},
                                             class: "link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover",
                                             "{name}"
                                             RecipeRating { rating: *rating }
diff --git a/app/src/recipe/view.rs b/app/src/recipe/view.rs
index 850edba..b408ac5 100644
--- a/app/src/recipe/view.rs
+++ b/app/src/recipe/view.rs
@@ -5,15 +5,14 @@ use api::{
     RecipeInfo, RecipeIngredientEditRequest, RecipeRenameRequest,
 };
 use dioxus::prelude::*;
-use dioxus_router::{use_route, use_router};
-use pulldown_cmark::{Parser, html};
+use pulldown_cmark::{html, Parser};
 use uuid::Uuid;
 
 use crate::{
     api,
     bootstrap::{bs, ConfirmDangerModal, FormModal, ModalToggleButton, Spinner},
     recipe::{IngredientSelect, RecipeRating},
-    to_owned_props, use_error, use_refresh, use_trimmed_context, Callback, ErrorAlert, ErrorView,
+    use_error, use_refresh, use_trimmed_context, Callback, ErrorAlert, ErrorView,
 };
 
 async fn do_rename_recipe(
@@ -53,7 +52,7 @@ fn EditName(cx: Scope<EditNameProps>) -> Element {
             error.set(Some("Name can't be empty".into()));
         }
 
-        to_owned_props![name, error, token, cx.props.refresh, cx.props.recipe];
+        to_owned![name, error, token, cx.props.refresh, cx.props.recipe];
 
         cx.spawn(async move {
             match do_rename_recipe(token, household, recipe, name.to_string()).await {
@@ -136,7 +135,7 @@ fn EditRating(cx: Scope<EditRatingProps>) -> Element {
             }
         };
 
-        to_owned_props![error, token, cx.props.refresh, cx.props.recipe];
+        to_owned![error, token, cx.props.refresh, cx.props.recipe];
 
         cx.spawn(async move {
             match do_edit_rating(token, household, recipe, rating - 1).await {
@@ -226,7 +225,7 @@ fn EditPersonCount(cx: Scope<EditPersonCountProps>) -> Element {
             }
         };
 
-        to_owned_props![error, token, cx.props.refresh, cx.props.recipe];
+        to_owned![error, token, cx.props.refresh, cx.props.recipe];
 
         cx.spawn(async move {
             match do_edit_person_count(token, household, recipe, person_count).await {
@@ -325,7 +324,7 @@ fn EditIngredient(cx: Scope<EditIngredientProps>) -> Element {
                 }
             };
 
-            to_owned_props![
+            to_owned![
                 token,
                 cx.props.recipe,
                 cx.props.refresh,
@@ -439,7 +438,7 @@ fn AddIngredientToRecipe(cx: Scope<AddIngredientToRecipeProps>) -> Element {
             return;
         };
 
-        to_owned_props![
+        to_owned![
             cx.props.refresh,
             cx.props.recipe,
             token,
@@ -538,13 +537,7 @@ fn EditSteps(cx: Scope<EditStepsProps>) -> Element {
     let (token, household) = use_trimmed_context(cx);
 
     let on_submit = move |_| {
-        to_owned_props![
-            error,
-            token,
-            steps,
-            cx.props.recipe,
-            cx.props.refresh
-        ];
+        to_owned![error, token, steps, cx.props.recipe, cx.props.refresh];
 
         cx.spawn(async move {
             match do_edit_steps(token, household, recipe, steps.to_string()).await {
@@ -600,9 +593,9 @@ fn RecipeViewer(cx: Scope<RecipeViewerProps>) -> Element {
     };
 
     let mk_del_ig = |&ingredient_id| {
-        to_owned_props![token];
+        to_owned![token];
         move |_| {
-            to_owned_props![cx.props.refresh, token, cx.props.id, error];
+            to_owned![cx.props.refresh, token, cx.props.id, error];
             cx.spawn(async move {
                 match do_delete_ig(token, household, id, ingredient_id).await {
                     Ok(_) => {
@@ -711,7 +704,7 @@ fn RecipeViewer(cx: Scope<RecipeViewerProps>) -> Element {
 }
 
 #[derive(Props, PartialEq)]
-struct RecipeFetchProps {
+pub struct RecipeViewProps {
     id: i64,
 }
 
@@ -729,7 +722,7 @@ async fn fetch_recipe(token: String, household: Uuid, id: i64) -> anyhow::Result
     Ok(Rc::new(rsp.json().await?))
 }
 
-fn RecipeFetch(cx: Scope<RecipeFetchProps>) -> Element {
+pub fn RecipeView(cx: Scope<RecipeViewProps>) -> Element {
     let (token, household) = use_trimmed_context(cx);
     let id = cx.props.id;
     let (refresh_dep, do_refresh) = use_refresh(cx);
@@ -749,18 +742,3 @@ fn RecipeFetch(cx: Scope<RecipeFetchProps>) -> Element {
         None => rsx! { Spinner {} },
     })
 }
-
-pub fn RecipeView(cx: Scope) -> Element {
-    let id = use_route(cx).parse_segment_or_404("recipe_id");
-    let router = use_router(cx);
-
-    let id = match id {
-        Some(id) => id,
-        None => {
-            router.navigate_to("/404");
-            return None;
-        }
-    };
-
-    cx.render(rsx! { RecipeFetch { id: id } })
-}
diff --git a/app/src/sidebar.rs b/app/src/sidebar.rs
index 6bd5b95..a4397da 100644
--- a/app/src/sidebar.rs
+++ b/app/src/sidebar.rs
@@ -1,6 +1,6 @@
 use api::RenameHouseholdRequest;
 use dioxus::prelude::*;
-use dioxus_router::{use_router, Link};
+use dioxus_router::prelude::*;
 use gloo_storage::{LocalStorage, Storage};
 use uuid::Uuid;
 
@@ -9,7 +9,7 @@ use crate::{
     bootstrap::{bs, ConfirmDangerModal, FormModal},
     do_add_user_to_household, do_resolve_user,
     full_context::FullContextRedirect,
-    use_error, use_full_context, use_trimmed_context, ErrorView, HouseholdInfo,
+    use_error, use_full_context, use_trimmed_context, ErrorView, HouseholdInfo, Route,
 };
 
 #[derive(Clone, Copy, PartialEq)]
@@ -31,6 +31,22 @@ impl Page {
     }
 }
 
+impl From<Route> for Option<Page> {
+    fn from(value: Route) -> Self {
+        match value {
+            Route::Index => Some(Page::Home),
+            Route::Login => None,
+            Route::OidcRedirect { .. } => None,
+            Route::HouseholdSelection => None,
+            Route::Ingredients => Some(Page::Ingredients),
+            Route::RecipeCreator => Some(Page::RecipeCreator),
+            Route::RecipeList => Some(Page::RecipeList),
+            Route::RecipeView { .. } => Some(Page::RecipeList),
+        }
+    }
+}
+
+#[derive(PartialEq)]
 struct MenuEntry {
     icon: &'static str,
     label: &'static str,
@@ -166,11 +182,10 @@ fn RenameHousehold<'a>(cx: Scope<'a>, name: &'a str) -> Element {
     })
 }
 
-#[derive(Props)]
-struct SidebarProps<'a> {
+#[derive(Props, PartialEq)]
+struct SidebarProps {
     entries: Vec<MenuEntry>,
     current: Page,
-    children: Element<'a>,
 }
 
 async fn do_leave(token: String, household: Uuid) -> anyhow::Result<()> {
@@ -194,12 +209,12 @@ async fn do_leave(token: String, household: Uuid) -> anyhow::Result<()> {
 
 fn SidebarDropdown(cx: Scope) -> Element {
     let ctx = use_full_context(cx);
-    let router = use_router(cx);
+    let navigator = use_navigator(cx);
 
     let leave = move || {
         let token = ctx.read().login.token.clone();
         let household = ctx.read().household.id;
-        to_owned![router];
+        to_owned![navigator];
 
         cx.spawn(async move {
             match do_leave(token, household).await {
@@ -207,7 +222,7 @@ fn SidebarDropdown(cx: Scope) -> Element {
                     log::error!("Could not leave household: {e:?}");
                 }
                 Ok(_) => {
-                    router.navigate_to("/household_selection");
+                    navigator.push(Route::HouseholdSelection);
                 }
             }
         });
@@ -217,7 +232,7 @@ fn SidebarDropdown(cx: Scope) -> Element {
         LocalStorage::delete("token");
         LocalStorage::delete("household");
 
-        router.navigate_to("/login");
+        navigator.push(Route::Login);
     };
 
     cx.render(rsx! {
@@ -280,7 +295,7 @@ fn SidebarDropdown(cx: Scope) -> Element {
     })
 }
 
-fn Sidebar<'a>(cx: Scope<'a, SidebarProps<'a>>) -> Element {
+fn Sidebar(cx: Scope<SidebarProps>) -> Element {
     let entries = cx.props.entries.iter().map(|e| {
         let active = if e.page == cx.props.current {
             "active"
@@ -318,19 +333,14 @@ fn Sidebar<'a>(cx: Scope<'a, SidebarProps<'a>>) -> Element {
                         SidebarDropdown {}
                     }
                 }
-                div { class: "col py-3 overflow-scroll vh-100", &cx.props.children }
+                div { class: "col py-3 overflow-scroll vh-100", Outlet::<Route> {} }
             }
         }
     })
 }
 
-#[derive(Props)]
-pub struct RegaladeSidebarProps<'a> {
-    current: Page,
-    children: Element<'a>,
-}
-
-pub fn RegaladeSidebar<'a>(cx: Scope<'a, RegaladeSidebarProps<'a>>) -> Element {
+pub fn RegaladeSidebar(cx: Scope) -> Element {
+    let current: Route = use_route(cx).unwrap();
     let entries = vec![
         MenuEntry {
             label: "Home",
@@ -355,8 +365,8 @@ pub fn RegaladeSidebar<'a>(cx: Scope<'a, RegaladeSidebarProps<'a>>) -> Element {
     ];
 
     cx.render(rsx! {
-        FullContextRedirect { 
-            Sidebar { current: cx.props.current, entries: entries, &cx.props.children }
+        FullContextRedirect {
+            Sidebar { current: Option::from(current).unwrap(), entries: entries }
         }
     })
 }