diff --git a/package-lock.json b/package-lock.json
index 43f23e70..fc15cf12 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
                 "@scure/base": "^1.1.5",
                 "@solid-primitives/i18n": "^2.0.0",
                 "@solid-primitives/storage": "^2.1.1",
-                "@solidjs/router": "^0.9.1",
+                "@solidjs/router": "^0.10.5",
                 "@vulpemventures/secp256k1-zkp": "^3.1.0",
                 "bignumber.js": "^9.1.2 ",
                 "bitcoinjs-lib": "^6.1.5",
@@ -1789,11 +1789,11 @@
             }
         },
         "node_modules/@solidjs/router": {
-            "version": "0.9.1",
-            "resolved": "https://registry.npmjs.org/@solidjs/router/-/router-0.9.1.tgz",
-            "integrity": "sha512-kRY75piOQsyoH75E/RP6lr7uVGFCjeeCCCJx7Z2D1Vc6+I1yFQjLCvE+6agXGwqDoWi6vbETP1g7gmp/L1mNLg==",
+            "version": "0.10.5",
+            "resolved": "https://registry.npmjs.org/@solidjs/router/-/router-0.10.5.tgz",
+            "integrity": "sha512-gxDeiyc97j8/UqzuuasZsQYA7jpmlwjkfpcay11Q2xfzoKR50eBM1AaxAPtf0MlBAdPsdPV3h/k8t5/XQCuebA==",
             "peerDependencies": {
-                "solid-js": "^1.8.4"
+                "solid-js": "^1.8.6"
             }
         },
         "node_modules/@solidjs/testing-library": {
diff --git a/package.json b/package.json
index 04c109f3..a76c7345 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
         "@scure/base": "^1.1.5",
         "@solid-primitives/i18n": "^2.0.0",
         "@solid-primitives/storage": "^2.1.1",
-        "@solidjs/router": "^0.9.1",
+        "@solidjs/router": "^0.10.5",
         "@vulpemventures/secp256k1-zkp": "^3.1.0",
         "bignumber.js": "^9.1.2 ",
         "bitcoinjs-lib": "^6.1.5",
diff --git a/src/index.jsx b/src/index.jsx
index 121ce764..946a7c69 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,7 +1,7 @@
 /* @refresh reload */
 import "@fontsource/noto-sans";
 import "@fontsource/noto-sans/800.css";
-import { Navigate, Route, Router, Routes } from "@solidjs/router";
+import { Navigate, Route, Router } from "@solidjs/router";
 import log from "loglevel";
 import { createRoot, createSignal } from "solid-js";
 import { render } from "solid-js/web";
@@ -57,33 +57,36 @@ if ("serviceWorker" in navigator) {
 
 document.body.classList.remove("loading");
 
+const App = (props) => (
+    <>
+        <Show when={!embedded()}>
+            <Nav network={network} />
+        </Show>
+        {props.children}
+        <Show when={!embedded()}>
+            <Notification />
+            <Footer />
+        </Show>
+    </>
+);
+
 const cleanup = render(
     () => (
-        <Router>
-            <Web3SignerProvider>
-                <Show when={!embedded()}>
-                    <Nav network={network} />
-                </Show>
-                <Routes>
-                    <Route path="*" element={<Navigate href={"/404"} />} />
-                    <Route path="/404" component={NotFound} />
-                    <Route path="/" component={Hero} />
-                    <Route path="/swap" component={Create} />
-                    {/* Compatibility with link in Breez:
+        <Web3SignerProvider>
+            <Router root={App}>
+                <Route path="/" component={Hero} />
+                <Route path="/swap" component={Create} />
+                {/* Compatibility with link in Breez:
                         https://github.com/breez/breezmobile/blob/a1b0ffff902dfa2210af8fdb047b715535ff11e9/src/json/vendors.json#L30 */}
-                    <Route path="/swapbox" component={Create} />
-                    <Route path="/swap/:id" component={Pay} />
-                    <Route path="/swap/refund/:id" component={RefundStep} />
-                    <Route path="/error" component={Error} />
-                    <Route path="/refund" component={Refund} />
-                    <Route path="/history" component={History} />
-                </Routes>
-                <Show when={!embedded()}>
-                    <Notification />
-                    <Footer />
-                </Show>
-            </Web3SignerProvider>
-        </Router>
+                <Route path="/swapbox" component={Create} />
+                <Route path="/swap/:id" component={Pay} />
+                <Route path="/swap/refund/:id" component={RefundStep} />
+                <Route path="/error" component={Error} />
+                <Route path="/refund" component={Refund} />
+                <Route path="/history" component={History} />
+                <Route path="*404" component={NotFound} />
+            </Router>
+        </Web3SignerProvider>
     ),
     document.getElementById("root"),
 );
diff --git a/tests/Nav.spec.jsx b/tests/Nav.spec.jsx
index fb3ed6de..3c02dab2 100644
--- a/tests/Nav.spec.jsx
+++ b/tests/Nav.spec.jsx
@@ -8,11 +8,7 @@ describe("Nav", () => {
     test.each(["testnet", "regtest", "random"])(
         "should show network on network %s",
         async (network) => {
-            render(() => (
-                <Router>
-                    <Nav network={network} />
-                </Router>
-            ));
+            render(() => <Router root={() => <Nav network={network} />} />);
 
             const networkLabel = screen.queryAllByText(network);
             expect(networkLabel.length).toBe(1);
@@ -21,12 +17,7 @@ describe("Nav", () => {
 
     test("should not show network on mainnet", async () => {
         const network = "main";
-
-        render(() => (
-            <Router>
-                <Nav network={network} />
-            </Router>
-        ));
+        render(() => <Router root={() => <Nav network={network} />} />);
 
         const networkLabel = screen.queryAllByText(network);
         expect(networkLabel.length).toBe(0);
diff --git a/tests/components/Create.spec.tsx b/tests/components/Create.spec.tsx
index 949fffad..6ee29c1f 100644
--- a/tests/components/Create.spec.tsx
+++ b/tests/components/Create.spec.tsx
@@ -25,11 +25,9 @@ describe("Create", () => {
 
     test("should render Create", async () => {
         render(() => (
-            <Router>
-                <Web3SignerProvider noFetch={true}>
-                    <Create />
-                </Web3SignerProvider>
-            </Router>
+            <Web3SignerProvider noFetch={true}>
+                <Router root={Create} />
+            </Web3SignerProvider>
         ));
         const button = await screen.findAllByText(i18n.en.create_swap);
         expect(button).not.toBeUndefined();
@@ -39,11 +37,9 @@ describe("Create", () => {
         const setReceiveAmount = vi.spyOn(signals, "setReceiveAmount");
 
         render(() => (
-            <Router>
-                <Web3SignerProvider noFetch={true}>
-                    <Create />
-                </Web3SignerProvider>
-            </Router>
+            <Web3SignerProvider noFetch={true}>
+                <Router root={Create} />
+            </Web3SignerProvider>
         ));
 
         signals.setSendAmount(BigNumber(50_000));
@@ -63,11 +59,9 @@ describe("Create", () => {
         const setReceiveAmount = vi.spyOn(signals, "setReceiveAmount");
 
         render(() => (
-            <Router>
-                <Web3SignerProvider noFetch={true}>
-                    <Create />
-                </Web3SignerProvider>
-            </Router>
+            <Web3SignerProvider noFetch={true}>
+                <Router root={Create} />
+            </Web3SignerProvider>
         ));
 
         expect(setReceiveAmount).toHaveBeenCalledWith(BigNumber(38110));
@@ -81,11 +75,9 @@ describe("Create", () => {
 
     test("should update calculated value on fee change", async () => {
         render(() => (
-            <Router>
-                <Web3SignerProvider noFetch={true}>
-                    <Create />
-                </Web3SignerProvider>
-            </Router>
+            <Web3SignerProvider noFetch={true}>
+                <Router root={Create} />
+            </Web3SignerProvider>
         ));
 
         const updateConfig = () => {
@@ -136,11 +128,9 @@ describe("Create", () => {
         ${"max"}
     `("should set $extrema amount on click", async (extrema) => {
         render(() => (
-            <Router>
-                <Web3SignerProvider noFetch={true}>
-                    <Create />
-                </Web3SignerProvider>
-            </Router>
+            <Web3SignerProvider noFetch={true}>
+                <Router root={Create} />
+            </Web3SignerProvider>
         ));
 
         const setSendAmount = vi.spyOn(signals, "setSendAmount");
diff --git a/tests/components/SwapList.spec.tsx b/tests/components/SwapList.spec.tsx
index e673fc5e..d8183e02 100644
--- a/tests/components/SwapList.spec.tsx
+++ b/tests/components/SwapList.spec.tsx
@@ -20,14 +20,16 @@ describe("SwapList", () => {
         const {
             container: { firstChild: firstChild },
         } = render(() => (
-            <Router>
-                <SwapList
-                    swapsSignal={swapsSignal}
-                    setSwapSignal={() => {
-                        return undefined;
-                    }}
-                />
-            </Router>
+            <Router
+                root={() => (
+                    <SwapList
+                        swapsSignal={swapsSignal}
+                        setSwapSignal={() => {
+                            return undefined;
+                        }}
+                    />
+                )}
+            />
         ));
 
         const childNodes = [];