From d83ed526de0bd10e6f5cf39b31fdcffeebd239b3 Mon Sep 17 00:00:00 2001
From: Andrea Scartabelli <andrea.scartabelli@gmail.com>
Date: Wed, 7 Feb 2024 16:56:35 +0100
Subject: [PATCH] web-wallet: Add possibility to serve the web wallet from a
 sub folder

Resolves #1362
---
 web-wallet/CHANGELOG.md                       |  2 +
 web-wallet/README.md                          |  4 +-
 .../lib/components/AppAnchor/AppAnchor.svelte | 17 ++++
 .../AppAnchorButton/AppAnchorButton.svelte    | 15 ++++
 .../ExistingWalletNotice.svelte               |  9 +-
 .../OperationResult/OperationResult.svelte    |  6 +-
 .../src/lib/components/Send/Send.svelte       |  4 +-
 .../src/lib/components/Stake/Stake.svelte     | 10 +--
 .../Transactions/Transactions.svelte          | 14 ++--
 .../components/__tests__/AppAnchor.spec.js    | 83 +++++++++++++++++++
 .../__tests__/AppAnchorButton.spec.js         | 67 +++++++++++++++
 .../components/__tests__/Transactions.spec.js |  7 +-
 .../__snapshots__/AppAnchor.spec.js.snap      | 13 +++
 .../AppAnchorButton.spec.js.snap              | 17 ++++
 .../OperationResult.spec.js.snap              | 12 ++-
 .../__snapshots__/Stake.spec.js.snap          |  1 +
 .../__snapshots__/Transactions.spec.js.snap   | 10 ++-
 web-wallet/src/lib/components/index.js        |  2 +
 .../dusk/components/Wizard/WizardStep.svelte  |  8 +-
 .../navigation/__tests__/addBasePath.spec.js  | 26 ++++++
 .../src/lib/navigation/__tests__/goto.spec.js | 51 ++++++++++++
 .../{__test__ => __tests__}/logout.spec.js    | 10 +--
 .../lib/navigation/__tests__/redirect.spec.js | 51 ++++++++++++
 web-wallet/src/lib/navigation/addBasePath.js  | 13 +++
 web-wallet/src/lib/navigation/goto.js         |  8 ++
 web-wallet/src/lib/navigation/index.js        |  3 +
 web-wallet/src/lib/navigation/logout.js       |  2 +-
 web-wallet/src/lib/navigation/redirect.js     | 12 +++
 web-wallet/src/routes/(app)/+layout.js        |  2 +-
 .../src/routes/(app)/__tests__/layout.spec.js |  3 +-
 .../src/routes/(app)/dashboard/+layout.svelte |  4 +-
 .../__snapshots__/layout.spec.js.snap         |  9 +-
 .../__tests__/__snapshots__/page.spec.js.snap | 14 +++-
 .../__tests__/__snapshots__/page.spec.js.snap |  3 +-
 .../src/routes/(app)/settings/+page.svelte    |  7 +-
 .../__tests__/__snapshots__/page.spec.js.snap |  6 +-
 .../(welcome)/forced-logout/+page.svelte      |  5 +-
 .../__tests__/__snapshots__/page.spec.js.snap |  3 +-
 .../src/routes/(welcome)/login/+page.svelte   |  9 +-
 .../__tests__/__snapshots__/page.spec.js.snap |  9 +-
 .../(welcome)/login/__tests__/page.spec.js    |  4 +-
 .../src/routes/(welcome)/setup/+page.svelte   |  8 +-
 .../(welcome)/setup/TermsOfService.svelte     | 14 ++--
 .../__tests__/__snapshots__/page.spec.js.snap |  9 +-
 .../(welcome)/setup/create/+page.svelte       |  2 +-
 .../__tests__/__snapshots__/page.spec.js.snap |  4 +-
 .../(welcome)/setup/restore/+page.svelte      |  2 +-
 .../__tests__/__snapshots__/page.spec.js.snap | 10 ++-
 .../setup/restore/__tests__/page.spec.js      |  4 +-
 web-wallet/src/routes/+page.js                |  2 +-
 web-wallet/src/routes/__tests__/page.spec.js  |  8 +-
 web-wallet/svelte.config.js                   |  7 +-
 web-wallet/vite-setup.js                      |  6 ++
 53 files changed, 528 insertions(+), 103 deletions(-)
 create mode 100644 web-wallet/src/lib/components/AppAnchor/AppAnchor.svelte
 create mode 100644 web-wallet/src/lib/components/AppAnchorButton/AppAnchorButton.svelte
 create mode 100644 web-wallet/src/lib/components/__tests__/AppAnchor.spec.js
 create mode 100644 web-wallet/src/lib/components/__tests__/AppAnchorButton.spec.js
 create mode 100644 web-wallet/src/lib/components/__tests__/__snapshots__/AppAnchor.spec.js.snap
 create mode 100644 web-wallet/src/lib/components/__tests__/__snapshots__/AppAnchorButton.spec.js.snap
 create mode 100644 web-wallet/src/lib/navigation/__tests__/addBasePath.spec.js
 create mode 100644 web-wallet/src/lib/navigation/__tests__/goto.spec.js
 rename web-wallet/src/lib/navigation/{__test__ => __tests__}/logout.spec.js (85%)
 create mode 100644 web-wallet/src/lib/navigation/__tests__/redirect.spec.js
 create mode 100644 web-wallet/src/lib/navigation/addBasePath.js
 create mode 100644 web-wallet/src/lib/navigation/goto.js
 create mode 100644 web-wallet/src/lib/navigation/redirect.js

diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
index d954a0cb78..ad8a6551c8 100644
--- a/web-wallet/CHANGELOG.md
+++ b/web-wallet/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add Create Wallet flow tests [#1443]
 - Add visible version, commit hash and build date [#1441]
 - Add Address validation (Transfer flow) [#1377]
+- Add possibility to serve the web wallet from a sub folder [#1362]
 
 ### Changed
 
@@ -115,6 +116,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#1441]: https://github.com/dusk-network/rusk/issues/1441
 [#1460]: https://github.com/dusk-network/rusk/issues/1460
 [#1443]: https://github.com/dusk-network/rusk/issues/1443
+[#1362]: https://github.com/dusk-network/rusk/issues/1362
 
 <!-- VERSIONS -->
 [Unreleased]: https://github.com/dusk-network/rusk/tree/master/web-wallet
diff --git a/web-wallet/README.md b/web-wallet/README.md
index 1c4a749d54..77cb060c37 100644
--- a/web-wallet/README.md
+++ b/web-wallet/README.md
@@ -30,6 +30,8 @@ The application defines these variables by reading a local `.env` file containin
 N.B. the current `0.1.2` version of the library has no option to pick the network and uses the `LOCAL_NODE` only. The current testnet address is set in that variable in the example below:
 
 ```
+# can be empty string, must start with a slash otherwise, must not end with a slash
+VITE_BASE_PATH=""
 VITE_CONTRACT_STAKE_DISABLED=false
 VITE_CONTRACT_TRANSFER_DISABLED=false
 VITE_CURRENT_NODE=${VITE_LOCAL_NODE}
@@ -68,4 +70,4 @@ To run a local node different steps are needed, so please read the [related sect
 
 ## Running a local Rusk node
 
-To run a local node, follow the instructions outlined in the [Rusk's readme](https://github.com/dusk-network/rusk).
\ No newline at end of file
+To run a local node, follow the instructions outlined in the [Rusk's readme](https://github.com/dusk-network/rusk).
diff --git a/web-wallet/src/lib/components/AppAnchor/AppAnchor.svelte b/web-wallet/src/lib/components/AppAnchor/AppAnchor.svelte
new file mode 100644
index 0000000000..ec34dbd65b
--- /dev/null
+++ b/web-wallet/src/lib/components/AppAnchor/AppAnchor.svelte
@@ -0,0 +1,17 @@
+<svelte:options immutable={true}/>
+
+<script>
+	import { Anchor } from "$lib/dusk/components";
+	import { addBasePath } from "$lib/navigation";
+
+	/** @type {string} */
+	export let href;
+</script>
+
+<Anchor
+	{...$$restProps}
+	href={addBasePath(href)}
+	on:click
+>
+	<slot/>
+</Anchor>
diff --git a/web-wallet/src/lib/components/AppAnchorButton/AppAnchorButton.svelte b/web-wallet/src/lib/components/AppAnchorButton/AppAnchorButton.svelte
new file mode 100644
index 0000000000..58cb058ec8
--- /dev/null
+++ b/web-wallet/src/lib/components/AppAnchorButton/AppAnchorButton.svelte
@@ -0,0 +1,15 @@
+<svelte:options immutable={true}/>
+
+<script>
+	import { AnchorButton } from "$lib/dusk/components";
+	import { addBasePath } from "$lib/navigation";
+
+	/** @type {string} */
+	export let href;
+</script>
+
+<AnchorButton
+	{...$$restProps}
+	href={addBasePath(href)}
+	on:click
+/>
diff --git a/web-wallet/src/lib/components/ExistingWalletNotice/ExistingWalletNotice.svelte b/web-wallet/src/lib/components/ExistingWalletNotice/ExistingWalletNotice.svelte
index 9caaf7c936..5a68144f94 100644
--- a/web-wallet/src/lib/components/ExistingWalletNotice/ExistingWalletNotice.svelte
+++ b/web-wallet/src/lib/components/ExistingWalletNotice/ExistingWalletNotice.svelte
@@ -1,9 +1,6 @@
 <script>
-	import {
-		AnchorButton,
-		Button,
-		Card
-	} from "$lib/dusk/components";
+	import { Button, Card } from "$lib/dusk/components";
+	import { AppAnchorButton } from "$lib/components";
 	import { mdiAlertOutline } from "@mdi/js";
 
 	/** @type {boolean} */
@@ -18,7 +15,7 @@
 				you will need to wait for the wallet to sync.
 			</p>
 			<div class="flex gap-1 w-100">
-				<AnchorButton
+				<AppAnchorButton
 					className="flex-1"
 					href="/setup"
 					text="Back"
diff --git a/web-wallet/src/lib/components/OperationResult/OperationResult.svelte b/web-wallet/src/lib/components/OperationResult/OperationResult.svelte
index 395ef7c424..a0159c4c4d 100644
--- a/web-wallet/src/lib/components/OperationResult/OperationResult.svelte
+++ b/web-wallet/src/lib/components/OperationResult/OperationResult.svelte
@@ -2,13 +2,13 @@
 
 <script>
 	import {
-		AnchorButton,
 		ErrorDetails,
 		Icon,
 		Throbber
 	} from "$lib/dusk/components";
 	import { mdiCheckDecagramOutline, mdiCloseThick } from "@mdi/js";
 	import { makeClassName } from "$lib/dusk/string";
+	import { AppAnchorButton } from "$lib/components";
 
 	/** @type {string|undefined} */
 	export let className = undefined;
@@ -49,7 +49,7 @@
 		/>
 		<span>{successMessage}</span>
 		<slot name="success-content" {result}/>
-		<AnchorButton
+		<AppAnchorButton
 			href="/dashboard"
 			on:click={handleGoHomeClick}
 			variant="tertiary"
@@ -65,7 +65,7 @@
 			summary={errorMessage}
 		/>
 		<slot name="error-content"/>
-		<AnchorButton
+		<AppAnchorButton
 			href="/dashboard"
 			on:click={handleGoHomeClick}
 			variant="tertiary"
diff --git a/web-wallet/src/lib/components/Send/Send.svelte b/web-wallet/src/lib/components/Send/Send.svelte
index c76653b803..7055039ca0 100644
--- a/web-wallet/src/lib/components/Send/Send.svelte
+++ b/web-wallet/src/lib/components/Send/Send.svelte
@@ -10,7 +10,6 @@
 	import { validateAddress } from "$lib/dusk/string";
 	import { logo } from "$lib/dusk/icons";
 	import {
-		AnchorButton,
 		Badge,
 		Button,
 		Icon,
@@ -19,6 +18,7 @@
 		WizardStep
 	} from "$lib/dusk/components";
 	import {
+		AppAnchorButton,
 		ContractStatusesList,
 		GasFee,
 		GasSettings,
@@ -240,7 +240,7 @@
 			>
 				<svelte:fragment slot="success-content" let:result={hash}>
 					{#if hash}
-						<AnchorButton
+						<AppAnchorButton
 							href={`https://explorer.dusk.network/transactions/transaction?id=${hash}`}
 							on:click={resetOperation}
 							text="VIEW ON BLOCK EXPLORER"
diff --git a/web-wallet/src/lib/components/Stake/Stake.svelte b/web-wallet/src/lib/components/Stake/Stake.svelte
index 387cd10cd0..392d9497fd 100644
--- a/web-wallet/src/lib/components/Stake/Stake.svelte
+++ b/web-wallet/src/lib/components/Stake/Stake.svelte
@@ -11,8 +11,6 @@
 
 	import {
 		Agreement,
-		Anchor,
-		AnchorButton,
 		Badge,
 		Button,
 		Card,
@@ -23,6 +21,8 @@
 	} from "$lib/dusk/components";
 
 	import {
+		AppAnchor,
+		AppAnchorButton,
 		ContractStatusesList,
 		GasFee,
 		GasSettings,
@@ -162,11 +162,11 @@
 						iconPath={mdiAlertOutline}
 						heading="Only stake if you have a node set up!">
 						<p class="staking-warning">
-							I understand that I have set up a node properly, as described <Anchor
+							I understand that I have set up a node properly, as described <AppAnchor
 								class="staking-warning__step-node-setup-link"
 								rel="noopener noreferrer"
 								target="_blank"
-								href="https://docs.dusk.network/getting-started/node-setup/overview">HERE</Anchor>, and that I will lose funds if I have not done so correctly.</p>
+								href="https://docs.dusk.network/getting-started/node-setup/overview">HERE</AppAnchor>, and that I will lose funds if I have not done so correctly.</p>
 
 						<Agreement
 							className="staking-warning__agreement"
@@ -294,7 +294,7 @@
 			>
 				<svelte:fragment slot="success-content" let:result={hash}>
 					{#if hash}
-						<AnchorButton
+						<AppAnchorButton
 							href={`https://explorer.dusk.network/transactions/transaction?id=${hash}`}
 							on:click={resetOperation}
 							text="VIEW ON BLOCK EXPLORER"
diff --git a/web-wallet/src/lib/components/Transactions/Transactions.svelte b/web-wallet/src/lib/components/Transactions/Transactions.svelte
index a045324935..54cacfaa00 100644
--- a/web-wallet/src/lib/components/Transactions/Transactions.svelte
+++ b/web-wallet/src/lib/components/Transactions/Transactions.svelte
@@ -5,8 +5,6 @@
 	import { fade } from "svelte/transition";
 	import { logo } from "$lib/dusk/icons";
 	import {
-		Anchor,
-		AnchorButton,
 		Badge,
 		ErrorDetails,
 		Icon,
@@ -16,6 +14,9 @@
 	import { calculateAdaptiveCharCount, middleEllipsis } from "$lib/dusk/string";
 	import { sortByHeightDesc } from "$lib/transactions";
 
+	import AppAnchor from "../AppAnchor/AppAnchor.svelte";
+	import AppAnchorButton from "../AppAnchorButton/AppAnchorButton.svelte";
+
 	/** @type {String} */
 	export let language;
 
@@ -54,14 +55,14 @@
 	<header class="transactions__header">
 		<h3 class="h4">Transactions</h3>
 		{#if limit}
-			<AnchorButton
+			<AppAnchorButton
 				className="transactions__footer-button"
 				href="/dashboard/transactions"
 				text="View all transactions"
 				variant="tertiary"
 			/>
 		{:else}
-			<AnchorButton
+			<AppAnchorButton
 				className="transactions__footer-button"
 				href="/dashboard"
 				text="Back"
@@ -81,7 +82,7 @@
 						<dt class="transactions-list__term">Hash</dt>
 						<dd class="transactions-list__datum transactions-list__datum--hash">
 							<samp>
-								<Anchor
+								<AppAnchor
 									href="https://explorer.dusk.network/transactions/transaction?id={transaction.id}"
 									rel="noopener noreferrer"
 									target="_blank"
@@ -90,7 +91,7 @@
 										transaction.id,
 										calculateAdaptiveCharCount(screenWidth, 320, 640, 5, 20)
 									)}
-								</Anchor>
+								</AppAnchor>
 							</samp>
 						</dd>
 						{#if transaction.tx_type}
@@ -140,7 +141,6 @@
 	{:catch e}
 		<ErrorDetails summary="Error getting transactions" error={e}/>
 	{/await}
-
 </article>
 
 <style lang="postcss">
diff --git a/web-wallet/src/lib/components/__tests__/AppAnchor.spec.js b/web-wallet/src/lib/components/__tests__/AppAnchor.spec.js
new file mode 100644
index 0000000000..26d5aa6bde
--- /dev/null
+++ b/web-wallet/src/lib/components/__tests__/AppAnchor.spec.js
@@ -0,0 +1,83 @@
+import {
+	afterEach,
+	describe,
+	expect,
+	it,
+	vi
+} from "vitest";
+import {
+	cleanup,
+	fireEvent,
+	render
+} from "@testing-library/svelte";
+import { base } from "$app/paths";
+
+import { renderWithSimpleContent } from "$lib/dusk/test-helpers";
+
+import { AppAnchor } from "..";
+
+describe("AppAnchor", () => {
+	const baseProps = {
+		className: "foo bar",
+		href: "/setup",
+		id: "some-id"
+	};
+	const baseOptions = {
+		props: baseProps,
+		target: document.body
+	};
+
+	afterEach(cleanup);
+
+	it("should render an `Anchor` with the base path prepended to the `href` attribute, if the `href` represents an absolute URL", () => {
+		const renderA = renderWithSimpleContent(AppAnchor, baseOptions);
+		const anchorA = renderA.getByRole("link");
+
+		expect(renderA.container.firstChild).toMatchSnapshot();
+		expect(anchorA).toHaveAttribute("href", `${base}${baseProps.href}`);
+		expect(anchorA).toHaveClass("foo bar");
+		expect(anchorA).toHaveAttribute("id", baseProps.id);
+
+		cleanup();
+
+		const renderB = renderWithSimpleContent(
+			AppAnchor,
+			{ ...baseOptions, props: { ...baseProps, href: "/" } }
+		);
+		const anchorB = renderB.getByRole("link");
+
+		expect(anchorB).toHaveAttribute("href", `${base}/`);
+		expect(anchorB).toHaveClass("foo bar");
+		expect(anchorB).toHaveAttribute("id", baseProps.id);
+	});
+
+	it("should leave the `Anchor` as it is if the `href` points to a relative path", () => {
+		const { getByRole } = renderWithSimpleContent(
+			AppAnchor,
+			{ ...baseOptions, props: { ...baseProps, href: "foo/bar" } }
+		);
+
+		expect(getByRole("link")).toHaveAttribute("href", "foo/bar");
+	});
+
+	it("should leave the `Anchor` as it is if the `href` points to an external URL", () => {
+		const href = "http://example.com";
+		const { getByRole } = renderWithSimpleContent(
+			AppAnchor,
+			{ ...baseOptions, props: { ...baseProps, href } }
+		);
+
+		expect(getByRole("link")).toHaveAttribute("href", href);
+	});
+
+	it("should forward the `onclick` event to the `Anchor`", async () => {
+		const handler = vi.fn();
+		const { component, getByRole } = render(AppAnchor, { ...baseProps, href: "#" });
+
+		component.$on("click", handler);
+
+		await fireEvent.click(getByRole("link"));
+
+		expect(handler).toHaveBeenCalledTimes(1);
+	});
+});
diff --git a/web-wallet/src/lib/components/__tests__/AppAnchorButton.spec.js b/web-wallet/src/lib/components/__tests__/AppAnchorButton.spec.js
new file mode 100644
index 0000000000..8f9d7d6e4c
--- /dev/null
+++ b/web-wallet/src/lib/components/__tests__/AppAnchorButton.spec.js
@@ -0,0 +1,67 @@
+import {
+	afterEach,
+	describe,
+	expect,
+	it,
+	vi
+} from "vitest";
+import {
+	cleanup,
+	fireEvent,
+	render
+} from "@testing-library/svelte";
+import { base } from "$app/paths";
+
+import { AppAnchorButton } from "..";
+
+describe("AppAnchorButton", () => {
+	const baseProps = {
+		className: "foo bar",
+		href: "/setup",
+		id: "some-id"
+	};
+
+	afterEach(cleanup);
+
+	it("should render an `AnchorButton` with the base path prepended to the `href` attribute, if the `href` represents an absolute URL", () => {
+		const { container, getByRole, rerender } = render(AppAnchorButton, baseProps);
+		const anchorA = getByRole("link");
+
+		expect(container.firstChild).toMatchSnapshot();
+		expect(anchorA).toHaveAttribute("href", `${base}${baseProps.href}`);
+		expect(anchorA).toHaveClass("foo bar");
+		expect(anchorA).toHaveAttribute("id", baseProps.id);
+
+		rerender({ ...baseProps, href: "/" });
+
+		const anchorB = getByRole("link");
+
+		expect(anchorB).toHaveAttribute("href", `${base}/`);
+		expect(anchorB).toHaveClass("foo bar");
+		expect(anchorB).toHaveAttribute("id", baseProps.id);
+	});
+
+	it("should leave the `AnchorButton` as it is if the `href` points to a relative path", () => {
+		const { getByRole } = render(AppAnchorButton, { ...baseProps, href: "foo/bar" });
+
+		expect(getByRole("link")).toHaveAttribute("href", "foo/bar");
+	});
+
+	it("should leave the `AnchorButton` as it is if the `href` points to an external URL", () => {
+		const href = "http://example.com";
+		const { getByRole } = render(AppAnchorButton, { ...baseProps, href });
+
+		expect(getByRole("link")).toHaveAttribute("href", href);
+	});
+
+	it("should forward the `onclick` event to the `AnchorButton`", async () => {
+		const handler = vi.fn();
+		const { component, getByRole } = render(AppAnchorButton, { ...baseProps, href: "#" });
+
+		component.$on("click", handler);
+
+		await fireEvent.click(getByRole("link"));
+
+		expect(handler).toHaveBeenCalledTimes(1);
+	});
+});
diff --git a/web-wallet/src/lib/components/__tests__/Transactions.spec.js b/web-wallet/src/lib/components/__tests__/Transactions.spec.js
index 4fb6a4f45e..8322519302 100644
--- a/web-wallet/src/lib/components/__tests__/Transactions.spec.js
+++ b/web-wallet/src/lib/components/__tests__/Transactions.spec.js
@@ -1,8 +1,9 @@
 import { cleanup, render } from "@testing-library/svelte";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { get } from "svelte/store";
-import { settingsStore } from "$lib/stores";
+import { base } from "$app/paths";
 
+import { settingsStore } from "$lib/stores";
 import { transactions } from "$lib/mock-data";
 import { sortByHeightDesc } from "$lib/transactions";
 import { createFeeFormatter, createTransferFormatter } from "$lib/dusk/currency";
@@ -145,7 +146,7 @@ describe("Transactions", () => {
 		const viewAllTransactionAnchor = getByRole("link", { name: "View all transactions" });
 
 		expect(viewAllTransactionAnchor).toBeInTheDocument();
-		expect(viewAllTransactionAnchor).toHaveAttribute("href", "/dashboard/transactions");
+		expect(viewAllTransactionAnchor).toHaveAttribute("href", `${base}/dashboard/transactions`);
 	});
 
 	it("displays the \"Back\" CTA if no limit is supplied", async () => {
@@ -158,7 +159,7 @@ describe("Transactions", () => {
 		const viewAllTransactionAnchor = getByRole("link", { name: "Back" });
 
 		expect(viewAllTransactionAnchor).toBeInTheDocument();
-		expect(viewAllTransactionAnchor).toHaveAttribute("href", "/dashboard");
+		expect(viewAllTransactionAnchor).toHaveAttribute("href", `${base}/dashboard`);
 	});
 
 	it("handles error state when items are rejected", async () => {
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/AppAnchor.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/AppAnchor.spec.js.snap
new file mode 100644
index 0000000000..7831817d37
--- /dev/null
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/AppAnchor.spec.js.snap
@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AppAnchor > should render an \`Anchor\` with the base path prepended to the \`href\` attribute, if the \`href\` represents an absolute URL 1`] = `
+<a
+  class="dusk-anchor foo bar"
+  href="/some-base-path/setup"
+  id="some-id"
+>
+  <span>
+    some text
+  </span>
+</a>
+`;
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/AppAnchorButton.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/AppAnchorButton.spec.js.snap
new file mode 100644
index 0000000000..0e9235d24e
--- /dev/null
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/AppAnchorButton.spec.js.snap
@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AppAnchorButton > should render an \`AnchorButton\` with the base path prepended to the \`href\` attribute, if the \`href\` represents an absolute URL 1`] = `
+<div>
+  <a
+    aria-disabled="false"
+    class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal foo bar"
+    href="/some-base-path/setup"
+    id="some-id"
+  >
+    
+  </a>
+  <!--&lt;Anchor&gt;-->
+  <!--&lt;AnchorButton&gt;-->
+  <!--&lt;AppAnchorButton&gt;-->
+</div>
+`;
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/OperationResult.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/OperationResult.spec.js.snap
index f8de0a8f34..412609a5c4 100644
--- a/web-wallet/src/lib/components/__tests__/__snapshots__/OperationResult.spec.js.snap
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/OperationResult.spec.js.snap
@@ -41,7 +41,7 @@ exports[`OperationResult > should accept a custom message for the failure state
   <a
     aria-disabled="false"
     class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal"
-    href="/dashboard"
+    href="/some-base-path/dashboard"
   >
     <span
       class="dusk-anchor-button__text"
@@ -52,6 +52,7 @@ exports[`OperationResult > should accept a custom message for the failure state
   </a>
   <!--&lt;Anchor&gt;-->
   <!--&lt;AnchorButton&gt;-->
+  <!--&lt;AppAnchorButton&gt;-->
 </div>
 `;
 
@@ -116,7 +117,7 @@ exports[`OperationResult > should accept a custom message for the successful sta
   <a
     aria-disabled="false"
     class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal"
-    href="/dashboard"
+    href="/some-base-path/dashboard"
   >
     <span
       class="dusk-anchor-button__text"
@@ -127,6 +128,7 @@ exports[`OperationResult > should accept a custom message for the successful sta
   </a>
   <!--&lt;Anchor&gt;-->
   <!--&lt;AnchorButton&gt;-->
+  <!--&lt;AppAnchorButton&gt;-->
 </div>
 `;
 
@@ -206,7 +208,7 @@ exports[`OperationResult > should be able to render the \`OperationResult\` in a
   <a
     aria-disabled="false"
     class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal"
-    href="/dashboard"
+    href="/some-base-path/dashboard"
   >
     <span
       class="dusk-anchor-button__text"
@@ -217,6 +219,7 @@ exports[`OperationResult > should be able to render the \`OperationResult\` in a
   </a>
   <!--&lt;Anchor&gt;-->
   <!--&lt;AnchorButton&gt;-->
+  <!--&lt;AppAnchorButton&gt;-->
 </div>
 `;
 
@@ -246,7 +249,7 @@ exports[`OperationResult > should be able to render the \`OperationResult\` in a
   <a
     aria-disabled="false"
     class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal"
-    href="/dashboard"
+    href="/some-base-path/dashboard"
   >
     <span
       class="dusk-anchor-button__text"
@@ -257,5 +260,6 @@ exports[`OperationResult > should be able to render the \`OperationResult\` in a
   </a>
   <!--&lt;Anchor&gt;-->
   <!--&lt;AnchorButton&gt;-->
+  <!--&lt;AppAnchorButton&gt;-->
 </div>
 `;
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap
index 463f30739a..b1e1289e3b 100644
--- a/web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap
@@ -340,6 +340,7 @@ exports[`Stake > should render the Stake notice 1`] = `
             HERE
           </a>
           <!--&lt;Anchor&gt;-->
+          <!--&lt;AppAnchor&gt;-->
           , and that I will lose funds if I have not done so correctly.
         </p>
          
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/Transactions.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/Transactions.spec.js.snap
index f6a69b6a9c..0e2e6f75b0 100644
--- a/web-wallet/src/lib/components/__tests__/__snapshots__/Transactions.spec.js.snap
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/Transactions.spec.js.snap
@@ -18,7 +18,7 @@ exports[`Transactions > renders the correct amount of Transactions, as the limit
         <a
           aria-disabled="false"
           class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal transactions__footer-button"
-          href="/dashboard/transactions"
+          href="/some-base-path/dashboard/transactions"
         >
           <span
             class="dusk-anchor-button__text"
@@ -29,6 +29,7 @@ exports[`Transactions > renders the correct amount of Transactions, as the limit
         </a>
         <!--&lt;Anchor&gt;-->
         <!--&lt;AnchorButton&gt;-->
+        <!--&lt;AppAnchorButton&gt;-->
       </header>
        
       <div
@@ -57,6 +58,7 @@ exports[`Transactions > renders the correct amount of Transactions, as the limit
                 tg874534tddsghdtst54hdfh795h
               </a>
               <!--&lt;Anchor&gt;-->
+              <!--&lt;AppAnchor&gt;-->
             </samp>
              
           </dd>
@@ -163,6 +165,7 @@ exports[`Transactions > renders the correct amount of Transactions, as the limit
                 tg874534tddsghdtst54hdfh794h
               </a>
               <!--&lt;Anchor&gt;-->
+              <!--&lt;AppAnchor&gt;-->
             </samp>
              
           </dd>
@@ -243,6 +246,7 @@ exports[`Transactions > renders the correct amount of Transactions, as the limit
                 tg874534tddsghdtst54hdfh793h
               </a>
               <!--&lt;Anchor&gt;-->
+              <!--&lt;AppAnchor&gt;-->
             </samp>
              
           </dd>
@@ -326,7 +330,7 @@ exports[`Transactions > renders transactions correctly when items are fulfilled
         <a
           aria-disabled="false"
           class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal transactions__footer-button"
-          href="/dashboard/transactions"
+          href="/some-base-path/dashboard/transactions"
         >
           <span
             class="dusk-anchor-button__text"
@@ -337,6 +341,7 @@ exports[`Transactions > renders transactions correctly when items are fulfilled
         </a>
         <!--&lt;Anchor&gt;-->
         <!--&lt;AnchorButton&gt;-->
+        <!--&lt;AppAnchorButton&gt;-->
       </header>
        
       <div
@@ -365,6 +370,7 @@ exports[`Transactions > renders transactions correctly when items are fulfilled
                 tg874534tddsghdtst54hdfh795h
               </a>
               <!--&lt;Anchor&gt;-->
+              <!--&lt;AppAnchor&gt;-->
             </samp>
              
           </dd>
diff --git a/web-wallet/src/lib/components/index.js b/web-wallet/src/lib/components/index.js
index e0cb0e6503..b1e24d7eb2 100644
--- a/web-wallet/src/lib/components/index.js
+++ b/web-wallet/src/lib/components/index.js
@@ -1,4 +1,6 @@
 export { default as AddressPicker } from "./AddressPicker/AddressPicker.svelte";
+export { default as AppAnchor } from "./AppAnchor/AppAnchor.svelte";
+export { default as AppAnchorButton } from "./AppAnchorButton/AppAnchorButton.svelte";
 export { default as Balance } from "./Balance/Balance.svelte";
 export { default as ContractOperations } from "./ContractOperations/ContractOperations.svelte";
 export { default as ContractStatusesList } from "./ContractStatusesList/ContractStatusesList.svelte";
diff --git a/web-wallet/src/lib/dusk/components/Wizard/WizardStep.svelte b/web-wallet/src/lib/dusk/components/Wizard/WizardStep.svelte
index 8595efb157..eeee3a6188 100644
--- a/web-wallet/src/lib/dusk/components/Wizard/WizardStep.svelte
+++ b/web-wallet/src/lib/dusk/components/Wizard/WizardStep.svelte
@@ -1,8 +1,10 @@
 <script>
 	import { getContext } from "svelte";
-	import { AnchorButton, Button, Stepper } from "$lib/dusk/components";
+	import { Button, Stepper } from "$lib/dusk/components";
 	import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
 
+	import { AppAnchorButton } from "$lib/components";
+
 	/** @type {Number} */
 	export let step;
 	export let key;
@@ -88,7 +90,7 @@
 			<div class="dusk-wizard__step-navigation">
 				{#if !hideBackButton}
 					{#if backButton?.isAnchor}
-						<AnchorButton
+						<AppAnchorButton
 							{...getButtonProps(backButton, "Back", mdiArrowLeft)}
 							href={backButton?.href ?? "#"}
 						/>
@@ -101,7 +103,7 @@
 				{/if}
 
 				{#if nextButton?.isAnchor}
-					<AnchorButton
+					<AppAnchorButton
 						{...getButtonProps(nextButton, "Next", mdiArrowRight, true)}
 						href={nextButton?.href ?? "#"}
 					/>
diff --git a/web-wallet/src/lib/navigation/__tests__/addBasePath.spec.js b/web-wallet/src/lib/navigation/__tests__/addBasePath.spec.js
new file mode 100644
index 0000000000..79e6f3a2f3
--- /dev/null
+++ b/web-wallet/src/lib/navigation/__tests__/addBasePath.spec.js
@@ -0,0 +1,26 @@
+import {
+	describe,
+	expect,
+	it
+} from "vitest";
+import { base } from "$app/paths";
+
+import { addBasePath } from "..";
+
+describe("addBasePath", () => {
+	it("should add the base path to the received path if the received one is an absolute path", () => {
+		expect(addBasePath("/")).toBe(`${base}/`);
+		expect(addBasePath("/some-path")).toBe(`${base}/some-path`);
+	});
+
+	it("should add nothing if the received path is a relative one or a complete string URL", () => {
+		expect(addBasePath("foo/bar")).toBe("foo/bar");
+		expect(addBasePath("http://example.com/")).toBe("http://example.com/");
+	});
+
+	it("should add nothing if the received path is a URL object", () => {
+		const url = new URL("http://www.example.com/");
+
+		expect(addBasePath(url)).toBe(url);
+	});
+});
diff --git a/web-wallet/src/lib/navigation/__tests__/goto.spec.js b/web-wallet/src/lib/navigation/__tests__/goto.spec.js
new file mode 100644
index 0000000000..77ad99ebe9
--- /dev/null
+++ b/web-wallet/src/lib/navigation/__tests__/goto.spec.js
@@ -0,0 +1,51 @@
+import {
+	afterAll,
+	afterEach,
+	describe,
+	expect,
+	it,
+	vi
+} from "vitest";
+import * as appNavigation from "$app/navigation";
+import { base } from "$app/paths";
+
+import { goto } from "..";
+
+describe("goto", () => {
+	const gotoSpy = vi.spyOn(appNavigation, "goto");
+
+	afterEach(() => {
+		gotoSpy.mockClear();
+	});
+
+	afterAll(() => {
+		gotoSpy.mockRestore();
+	});
+
+	it("should add the defined base path to Svelte's `goto` calls for absolute paths", async () => {
+		await goto("/");
+		await goto("/foo/path");
+
+		expect(gotoSpy).toHaveBeenCalledTimes(2);
+		expect(gotoSpy).toHaveBeenNthCalledWith(1, `${base}/`);
+		expect(gotoSpy).toHaveBeenNthCalledWith(2, `${base}/foo/path`);
+	});
+
+	it("should add nothing for relative paths and complete string URLs", async () => {
+		await goto("foo/bar");
+		await goto("http://example.com/");
+
+		expect(gotoSpy).toHaveBeenCalledTimes(2);
+		expect(gotoSpy).toHaveBeenNthCalledWith(1, "foo/bar");
+		expect(gotoSpy).toHaveBeenNthCalledWith(2, "http://example.com/");
+	});
+
+	it("should do nothing if the received path is an URL object", async () => {
+		const url = new URL("http://www.example.com/");
+
+		await goto(url);
+
+		expect(gotoSpy).toHaveBeenCalledTimes(1);
+		expect(gotoSpy).toHaveBeenCalledWith(url);
+	});
+});
diff --git a/web-wallet/src/lib/navigation/__test__/logout.spec.js b/web-wallet/src/lib/navigation/__tests__/logout.spec.js
similarity index 85%
rename from web-wallet/src/lib/navigation/__test__/logout.spec.js
rename to web-wallet/src/lib/navigation/__tests__/logout.spec.js
index f395d362ae..1d38e76974 100644
--- a/web-wallet/src/lib/navigation/__test__/logout.spec.js
+++ b/web-wallet/src/lib/navigation/__tests__/logout.spec.js
@@ -7,16 +7,14 @@ import {
 	vi
 } from "vitest";
 
-import * as appNavigation from "$app/navigation";
-
 import { walletStore } from "$lib/stores";
 
-import { logout } from "..";
+import * as navigation from "..";
 
 vi.mock("$lib/stores/walletStore");
 
 describe("logout", () => {
-	const gotoSpy = vi.spyOn(appNavigation, "goto");
+	const gotoSpy = vi.spyOn(navigation, "goto");
 
 	afterEach(() => {
 		gotoSpy.mockClear();
@@ -30,7 +28,7 @@ describe("logout", () => {
 	});
 
 	it("should reset the wallet store and redirect the user to the homepage, if the logout is not forced", async () => {
-		await logout(false);
+		await navigation.logout(false);
 
 		expect(walletStore.abortSync).toHaveBeenCalledTimes(1);
 		expect(walletStore.reset).toHaveBeenCalledTimes(1);
@@ -39,7 +37,7 @@ describe("logout", () => {
 	});
 
 	it("should redirect to `/forced-logout` if the logout is forced", async () => {
-		await logout(true);
+		await navigation.logout(true);
 
 		expect(walletStore.abortSync).toHaveBeenCalledTimes(1);
 		expect(walletStore.reset).toHaveBeenCalledTimes(1);
diff --git a/web-wallet/src/lib/navigation/__tests__/redirect.spec.js b/web-wallet/src/lib/navigation/__tests__/redirect.spec.js
new file mode 100644
index 0000000000..86827b7266
--- /dev/null
+++ b/web-wallet/src/lib/navigation/__tests__/redirect.spec.js
@@ -0,0 +1,51 @@
+import {
+	afterAll,
+	afterEach,
+	describe,
+	expect,
+	it,
+	vi
+} from "vitest";
+import * as SvelteKit from "@sveltejs/kit";
+import { base } from "$app/paths";
+
+import { redirect } from "..";
+
+describe("redirect", () => {
+	const redirectSpy = vi.spyOn(SvelteKit, "redirect");
+
+	afterEach(() => {
+		redirectSpy.mockClear();
+	});
+
+	afterAll(() => {
+		redirectSpy.mockRestore();
+	});
+
+	it("should add the defined base path to SvelteKit's `redirect` calls for absolute paths", () => {
+		redirect(300, "/");
+		redirect(301, "/foo/path");
+
+		expect(redirectSpy).toHaveBeenCalledTimes(2);
+		expect(redirectSpy).toHaveBeenNthCalledWith(1, 300, `${base}/`);
+		expect(redirectSpy).toHaveBeenNthCalledWith(2, 301, `${base}/foo/path`);
+	});
+
+	it("should add nothing for relative paths and complete string URLs", async () => {
+		redirect(300, "foo/bar");
+		redirect(300, "http://example.com/");
+
+		expect(redirectSpy).toHaveBeenCalledTimes(2);
+		expect(redirectSpy).toHaveBeenNthCalledWith(1, 300, "foo/bar");
+		expect(redirectSpy).toHaveBeenNthCalledWith(2, 300, "http://example.com/");
+	});
+
+	it("should do nothing if the received path is an URL object", async () => {
+		const url = new URL("http://www.example.com/");
+
+		redirect(300, url);
+
+		expect(redirectSpy).toHaveBeenCalledTimes(1);
+		expect(redirectSpy).toHaveBeenCalledWith(300, url);
+	});
+});
diff --git a/web-wallet/src/lib/navigation/addBasePath.js b/web-wallet/src/lib/navigation/addBasePath.js
new file mode 100644
index 0000000000..0846da4ce4
--- /dev/null
+++ b/web-wallet/src/lib/navigation/addBasePath.js
@@ -0,0 +1,13 @@
+import { base } from "$app/paths";
+
+/**
+ * @template {string | URL} T
+ * @param {T} path
+ */
+const addBasePath = path => (
+	path instanceof URL
+		? path
+		: path.startsWith("/") ? `${base}${path}` : path
+);
+
+export default addBasePath;
diff --git a/web-wallet/src/lib/navigation/goto.js b/web-wallet/src/lib/navigation/goto.js
new file mode 100644
index 0000000000..5bb95d3d33
--- /dev/null
+++ b/web-wallet/src/lib/navigation/goto.js
@@ -0,0 +1,8 @@
+import { goto as svelteGoto } from "$app/navigation";
+
+import addBasePath from "./addBasePath";
+
+/** @type {(...args: Parameters<svelteGoto>) => ReturnType<svelteGoto>} */
+const goto = (url, ...rest) => svelteGoto(addBasePath(url), ...rest);
+
+export default goto;
diff --git a/web-wallet/src/lib/navigation/index.js b/web-wallet/src/lib/navigation/index.js
index f6f8e4bcad..0de4b3e2a4 100644
--- a/web-wallet/src/lib/navigation/index.js
+++ b/web-wallet/src/lib/navigation/index.js
@@ -1 +1,4 @@
 export { default as logout } from "./logout";
+export { default as addBasePath } from "./addBasePath";
+export { default as goto } from "./goto";
+export { default as redirect } from "./redirect";
diff --git a/web-wallet/src/lib/navigation/logout.js b/web-wallet/src/lib/navigation/logout.js
index 1c9c663e54..95edf166ef 100644
--- a/web-wallet/src/lib/navigation/logout.js
+++ b/web-wallet/src/lib/navigation/logout.js
@@ -1,5 +1,5 @@
-import { goto } from "$app/navigation";
 
+import { goto } from "$lib/navigation";
 import { walletStore } from "$lib/stores";
 
 /**
diff --git a/web-wallet/src/lib/navigation/redirect.js b/web-wallet/src/lib/navigation/redirect.js
new file mode 100644
index 0000000000..71e7a09b7c
--- /dev/null
+++ b/web-wallet/src/lib/navigation/redirect.js
@@ -0,0 +1,12 @@
+import { redirect as svelteKitRedirect } from "@sveltejs/kit";
+
+import addBasePath from "./addBasePath";
+
+/**
+ * @param {Parameters<svelteKitRedirect>[0]} status
+ * @param {Parameters<svelteKitRedirect>[1]} path
+ * @returns {ReturnType<svelteKitRedirect>}
+ */
+const redirect = (status, path) => svelteKitRedirect(status, addBasePath(path));
+
+export default redirect;
diff --git a/web-wallet/src/routes/(app)/+layout.js b/web-wallet/src/routes/(app)/+layout.js
index 7e9ef023a8..c4b073527b 100644
--- a/web-wallet/src/routes/(app)/+layout.js
+++ b/web-wallet/src/routes/(app)/+layout.js
@@ -1,4 +1,4 @@
-import { redirect } from "@sveltejs/kit";
+import { redirect } from "$lib/navigation";
 import { get } from "svelte/store";
 
 import walletStore from "$lib/stores/walletStore";
diff --git a/web-wallet/src/routes/(app)/__tests__/layout.spec.js b/web-wallet/src/routes/(app)/__tests__/layout.spec.js
index bdb691e020..f3f750ed4b 100644
--- a/web-wallet/src/routes/(app)/__tests__/layout.spec.js
+++ b/web-wallet/src/routes/(app)/__tests__/layout.spec.js
@@ -12,7 +12,6 @@ import {
 	fireEvent,
 	render
 } from "@testing-library/svelte";
-import * as SvelteKit from "@sveltejs/kit";
 import { Wallet } from "@dusk-network/dusk-wallet-js";
 
 import * as navigation from "$lib/navigation";
@@ -24,7 +23,7 @@ import Layout from "../+layout.svelte";
 
 describe("App layout.js", () => {
 	const getPsksSpy = vi.spyOn(Wallet.prototype, "getPsks").mockResolvedValue(addresses);
-	const redirectSpy = vi.spyOn(SvelteKit, "redirect");
+	const redirectSpy = vi.spyOn(navigation, "redirect");
 
 	afterEach(() => {
 		getPsksSpy.mockClear();
diff --git a/web-wallet/src/routes/(app)/dashboard/+layout.svelte b/web-wallet/src/routes/(app)/dashboard/+layout.svelte
index 8f36782b2b..67d960c572 100644
--- a/web-wallet/src/routes/(app)/dashboard/+layout.svelte
+++ b/web-wallet/src/routes/(app)/dashboard/+layout.svelte
@@ -7,13 +7,13 @@
 		mdiTimerSand
 	} from "@mdi/js";
 	import {
-		AnchorButton,
 		Button,
 		CircularIcon,
 		Icon,
 		ProgressBar
 	} from "$lib/dusk/components";
 	import { settingsStore, walletStore } from "$lib/stores";
+	import { AppAnchorButton } from "$lib/components";
 
 	$: ({ network } = $settingsStore);
 	$: ({ isSyncing, error } = $walletStore);
@@ -82,7 +82,7 @@
 						variant="quaternary"
 					/>
 				{/if}
-				<AnchorButton
+				<AppAnchorButton
 					variant="quaternary"
 					className="footer__anchor-button"
 					icon={{ path: mdiCogOutline, size: "large" }}
diff --git a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap
index ce224e2496..b103c66e92 100644
--- a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap
+++ b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap
@@ -61,7 +61,7 @@ exports[`Dashboard Layout > should render the dashboard layout 1`] = `
             class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--quaternary dusk-anchor-button--size--normal dusk-icon-button footer__anchor-button"
             data-tooltip-id="main-tooltip"
             data-tooltip-text="Settings"
-            href="/settings"
+            href="/some-base-path/settings"
           >
             <svg
               class="dusk-icon dusk-icon--size--large dusk-anchor-button__icon"
@@ -80,6 +80,7 @@ exports[`Dashboard Layout > should render the dashboard layout 1`] = `
           </a>
           <!--&lt;Anchor&gt;-->
           <!--&lt;AnchorButton&gt;-->
+          <!--&lt;AppAnchorButton&gt;-->
         </div>
       </nav>
     </footer>
@@ -174,7 +175,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the error stat
             class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--quaternary dusk-anchor-button--size--normal dusk-icon-button footer__anchor-button"
             data-tooltip-id="main-tooltip"
             data-tooltip-text="Settings"
-            href="/settings"
+            href="/some-base-path/settings"
           >
             <svg
               class="dusk-icon dusk-icon--size--large dusk-anchor-button__icon"
@@ -193,6 +194,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the error stat
           </a>
           <!--&lt;Anchor&gt;-->
           <!--&lt;AnchorButton&gt;-->
+          <!--&lt;AppAnchorButton&gt;-->
         </div>
       </nav>
     </footer>
@@ -273,7 +275,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
             class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--quaternary dusk-anchor-button--size--normal dusk-icon-button footer__anchor-button"
             data-tooltip-id="main-tooltip"
             data-tooltip-text="Settings"
-            href="/settings"
+            href="/some-base-path/settings"
           >
             <svg
               class="dusk-icon dusk-icon--size--large dusk-anchor-button__icon"
@@ -292,6 +294,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
           </a>
           <!--&lt;Anchor&gt;-->
           <!--&lt;AnchorButton&gt;-->
+          <!--&lt;AppAnchorButton&gt;-->
         </div>
       </nav>
     </footer>
diff --git a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/page.spec.js.snap
index 3f177708e3..8cc8762b5e 100644
--- a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/page.spec.js.snap
@@ -373,7 +373,7 @@ exports[`Dashboard > should render a card when there is an error getting transac
         <a
           aria-disabled="false"
           class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal transactions__footer-button"
-          href="/dashboard/transactions"
+          href="/some-base-path/dashboard/transactions"
         >
           <span
             class="dusk-anchor-button__text"
@@ -384,6 +384,7 @@ exports[`Dashboard > should render a card when there is an error getting transac
         </a>
         <!--&lt;Anchor&gt;-->
         <!--&lt;AnchorButton&gt;-->
+        <!--&lt;AppAnchorButton&gt;-->
       </header>
        
       <details
@@ -786,7 +787,7 @@ exports[`Dashboard > should render the dashboard page and show a throbber while
         <a
           aria-disabled="false"
           class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal transactions__footer-button"
-          href="/dashboard/transactions"
+          href="/some-base-path/dashboard/transactions"
         >
           <span
             class="dusk-anchor-button__text"
@@ -797,6 +798,7 @@ exports[`Dashboard > should render the dashboard page and show a throbber while
         </a>
         <!--&lt;Anchor&gt;-->
         <!--&lt;AnchorButton&gt;-->
+        <!--&lt;AppAnchorButton&gt;-->
       </header>
        
       <svg
@@ -1201,7 +1203,7 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
         <a
           aria-disabled="false"
           class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal transactions__footer-button"
-          href="/dashboard/transactions"
+          href="/some-base-path/dashboard/transactions"
         >
           <span
             class="dusk-anchor-button__text"
@@ -1212,6 +1214,7 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
         </a>
         <!--&lt;Anchor&gt;-->
         <!--&lt;AnchorButton&gt;-->
+        <!--&lt;AppAnchorButton&gt;-->
       </header>
        
       <div
@@ -1240,6 +1243,7 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
                 tg874534tddsghdtst54hdfh795h
               </a>
               <!--&lt;Anchor&gt;-->
+              <!--&lt;AppAnchor&gt;-->
             </samp>
              
           </dd>
@@ -1346,6 +1350,7 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
                 tg874534tddsghdtst54hdfh794h
               </a>
               <!--&lt;Anchor&gt;-->
+              <!--&lt;AppAnchor&gt;-->
             </samp>
              
           </dd>
@@ -1426,6 +1431,7 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
                 tg874534tddsghdtst54hdfh793h
               </a>
               <!--&lt;Anchor&gt;-->
+              <!--&lt;AppAnchor&gt;-->
             </samp>
              
           </dd>
@@ -1506,6 +1512,7 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
                 tg874534tddsghdtst54hdfh792h
               </a>
               <!--&lt;Anchor&gt;-->
+              <!--&lt;AppAnchor&gt;-->
             </samp>
              
           </dd>
@@ -1612,6 +1619,7 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
                 tg874534tddsghdtst54hdfh791h
               </a>
               <!--&lt;Anchor&gt;-->
+              <!--&lt;AppAnchor&gt;-->
             </samp>
              
           </dd>
diff --git a/web-wallet/src/routes/(app)/dashboard/transactions/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/transactions/__tests__/__snapshots__/page.spec.js.snap
index 9c12b6beed..a8b1626fea 100644
--- a/web-wallet/src/routes/(app)/dashboard/transactions/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(app)/dashboard/transactions/__tests__/__snapshots__/page.spec.js.snap
@@ -84,7 +84,7 @@ exports[`Dashboard > should render the transactions page 1`] = `
         <a
           aria-disabled="false"
           class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal dusk-icon-button-labeled transactions__footer-button"
-          href="/dashboard"
+          href="/some-base-path/dashboard"
         >
           <svg
             class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
@@ -108,6 +108,7 @@ exports[`Dashboard > should render the transactions page 1`] = `
         </a>
         <!--&lt;Anchor&gt;-->
         <!--&lt;AnchorButton&gt;-->
+        <!--&lt;AppAnchorButton&gt;-->
       </header>
        
       <details
diff --git a/web-wallet/src/routes/(app)/settings/+page.svelte b/web-wallet/src/routes/(app)/settings/+page.svelte
index 59f7902723..797a0a1bb7 100644
--- a/web-wallet/src/routes/(app)/settings/+page.svelte
+++ b/web-wallet/src/routes/(app)/settings/+page.svelte
@@ -11,9 +11,7 @@
 	} from "@mdi/js";
 	import { mapWith, rename } from "lamb";
 
-	import { logout } from "$lib/navigation";
 	import {
-		AnchorButton,
 		Badge,
 		Button,
 		ErrorDetails,
@@ -21,8 +19,9 @@
 		Select,
 		Switch
 	} from "$lib/dusk/components";
-	import { GasControls } from "$lib/components";
+	import { AppAnchorButton, GasControls } from "$lib/components";
 	import { currencies } from "$lib/dusk/currency";
+	import { logout } from "$lib/navigation";
 	import { settingsStore, walletStore } from "$lib/stores";
 
 	const resetWallet = () => walletStore.clearLocalData().then(() => {
@@ -228,7 +227,7 @@
 </section>
 
 <div class="settings-actions">
-	<AnchorButton
+	<AppAnchorButton
 		href="/dashboard"
 		disabled={!isValidGas}
 		variant="tertiary"
diff --git a/web-wallet/src/routes/(app)/settings/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(app)/settings/__tests__/__snapshots__/page.spec.js.snap
index d35e09b0fc..8e0719e83f 100644
--- a/web-wallet/src/routes/(app)/settings/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(app)/settings/__tests__/__snapshots__/page.spec.js.snap
@@ -665,7 +665,7 @@ exports[`Settings > Resetting the wallet > should show an error if clearing loca
     <a
       aria-disabled="false"
       class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal dusk-icon-button-labeled"
-      href="/dashboard"
+      href="/some-base-path/dashboard"
     >
       <svg
         class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
@@ -689,6 +689,7 @@ exports[`Settings > Resetting the wallet > should show an error if clearing loca
     </a>
     <!--&lt;Anchor&gt;-->
     <!--&lt;AnchorButton&gt;-->
+    <!--&lt;AppAnchorButton&gt;-->
      
     <button
       class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
@@ -1353,7 +1354,7 @@ exports[`Settings > should render the settings page 1`] = `
     <a
       aria-disabled="false"
       class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal dusk-icon-button-labeled"
-      href="/dashboard"
+      href="/some-base-path/dashboard"
     >
       <svg
         class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
@@ -1377,6 +1378,7 @@ exports[`Settings > should render the settings page 1`] = `
     </a>
     <!--&lt;Anchor&gt;-->
     <!--&lt;AnchorButton&gt;-->
+    <!--&lt;AppAnchorButton&gt;-->
      
     <button
       class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
diff --git a/web-wallet/src/routes/(welcome)/forced-logout/+page.svelte b/web-wallet/src/routes/(welcome)/forced-logout/+page.svelte
index 39c0dea5f9..e256ad27d8 100644
--- a/web-wallet/src/routes/(welcome)/forced-logout/+page.svelte
+++ b/web-wallet/src/routes/(welcome)/forced-logout/+page.svelte
@@ -2,7 +2,8 @@
 	import { onMount } from "svelte";
 	import { mdiAlertOutline } from "@mdi/js";
 
-	import { AnchorButton, Card } from "$lib/dusk/components";
+	import { Card } from "$lib/dusk/components";
+	import { AppAnchorButton } from "$lib/components";
 
 	onMount(() => {
 		// eslint-disable-next-line no-alert
@@ -27,7 +28,7 @@
 			you will need to wait for a full sync.
 		</p>
 	</Card>
-	<AnchorButton
+	<AppAnchorButton
 		data-sveltekit-replacestate
 		href="/"
 		variant="secondary"
diff --git a/web-wallet/src/routes/(welcome)/forced-logout/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/forced-logout/__tests__/__snapshots__/page.spec.js.snap
index 056e0e76fb..693a0455df 100644
--- a/web-wallet/src/routes/(welcome)/forced-logout/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/forced-logout/__tests__/__snapshots__/page.spec.js.snap
@@ -52,7 +52,7 @@ exports[`Forced logout page > should render the page alert the user about the fo
       aria-disabled="false"
       class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--secondary dusk-anchor-button--size--normal"
       data-sveltekit-replacestate="true"
-      href="/"
+      href="/some-base-path/"
     >
       <span
         class="dusk-anchor-button__text"
@@ -63,6 +63,7 @@ exports[`Forced logout page > should render the page alert the user about the fo
     </a>
     <!--&lt;Anchor&gt;-->
     <!--&lt;AnchorButton&gt;-->
+    <!--&lt;AppAnchorButton&gt;-->
   </section>
   <!--&lt;+page&gt;-->
 </div>
diff --git a/web-wallet/src/routes/(welcome)/login/+page.svelte b/web-wallet/src/routes/(welcome)/login/+page.svelte
index 84924895e5..a0a14206f1 100644
--- a/web-wallet/src/routes/(welcome)/login/+page.svelte
+++ b/web-wallet/src/routes/(welcome)/login/+page.svelte
@@ -2,15 +2,16 @@
 
 <script>
 	import { mdiArrowLeft, mdiFileKeyOutline, mdiKeyOutline } from "@mdi/js";
-	import { goto } from "$app/navigation";
 	import { validateMnemonic } from "bip39";
 	import { setKey } from "lamb";
+
 	import {
-		AnchorButton,
 		Button,
 		Card,
 		Textbox
 	} from "$lib/dusk/components";
+	import { AppAnchorButton } from "$lib/components";
+	import { goto } from "$lib/navigation";
 	import { settingsStore, walletStore } from "$lib/stores";
 	import { decryptMnemonic, getSeedFromMnemonic } from "$lib/wallet";
 	import loginInfoStorage from "$lib/services/loginInfoStorage";
@@ -113,7 +114,7 @@
 				{/if}
 				<Button variant="secondary" text="Unlock Wallet" type="submit"/>
 				{#if modeLabel === "Password"}
-					<AnchorButton variant="quaternary" href="/setup/restore" text="Forgot Password?"/>
+					<AppAnchorButton variant="quaternary" href="/setup/restore" text="Forgot Password?"/>
 				{/if}
 			</form>
 		</Card>
@@ -126,7 +127,7 @@
 		</Card>
 	</div>
 	<footer class="login-footer">
-		<AnchorButton
+		<AppAnchorButton
 			href="/setup"
 			variant="tertiary"
 			icon={{ path: mdiArrowLeft }}
diff --git a/web-wallet/src/routes/(welcome)/login/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/login/__tests__/__snapshots__/page.spec.js.snap
index 1d73a6e271..573482d406 100644
--- a/web-wallet/src/routes/(welcome)/login/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/login/__tests__/__snapshots__/page.spec.js.snap
@@ -135,7 +135,7 @@ exports[`Login > Mnemonic phrase workflow > should render the login page and sho
       <a
         aria-disabled="false"
         class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal dusk-icon-button-labeled"
-        href="/setup"
+        href="/some-base-path/setup"
       >
         <svg
           class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
@@ -159,6 +159,7 @@ exports[`Login > Mnemonic phrase workflow > should render the login page and sho
       </a>
       <!--&lt;Anchor&gt;-->
       <!--&lt;AnchorButton&gt;-->
+      <!--&lt;AppAnchorButton&gt;-->
     </footer>
   </section>
   <!--&lt;+page&gt;-->
@@ -250,7 +251,7 @@ exports[`Login > Password workflow > should show the password field and the link
           <a
             aria-disabled="false"
             class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--quaternary dusk-anchor-button--size--normal"
-            href="/setup/restore"
+            href="/some-base-path/setup/restore"
           >
             <span
               class="dusk-anchor-button__text"
@@ -261,6 +262,7 @@ exports[`Login > Password workflow > should show the password field and the link
           </a>
           <!--&lt;Anchor&gt;-->
           <!--&lt;AnchorButton&gt;-->
+          <!--&lt;AppAnchorButton&gt;-->
         </form>
       </article>
       
@@ -315,7 +317,7 @@ exports[`Login > Password workflow > should show the password field and the link
       <a
         aria-disabled="false"
         class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal dusk-icon-button-labeled"
-        href="/setup"
+        href="/some-base-path/setup"
       >
         <svg
           class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
@@ -339,6 +341,7 @@ exports[`Login > Password workflow > should show the password field and the link
       </a>
       <!--&lt;Anchor&gt;-->
       <!--&lt;AnchorButton&gt;-->
+      <!--&lt;AppAnchorButton&gt;-->
     </footer>
   </section>
   <!--&lt;+page&gt;-->
diff --git a/web-wallet/src/routes/(welcome)/login/__tests__/page.spec.js b/web-wallet/src/routes/(welcome)/login/__tests__/page.spec.js
index ab7bf90b2b..d2028d453f 100644
--- a/web-wallet/src/routes/(welcome)/login/__tests__/page.spec.js
+++ b/web-wallet/src/routes/(welcome)/login/__tests__/page.spec.js
@@ -9,13 +9,13 @@ import {
 } from "vitest";
 import { cleanup, fireEvent, render } from "@testing-library/svelte";
 import { generateMnemonic } from "bip39";
-import * as appNavigation from "$app/navigation";
 import { get } from "svelte/store";
 import { Wallet } from "@dusk-network/dusk-wallet-js";
 import { setKey } from "lamb";
 
 import { addresses } from "$lib/mock-data";
 import { getAsHTMLElement } from "$lib/dusk/test-helpers";
+import * as navigation from "$lib/navigation";
 import { settingsStore, walletStore } from "$lib/stores";
 import { encryptMnemonic, getSeedFromMnemonic } from "$lib/wallet";
 import loginInfoStorage from "$lib/services/loginInfoStorage";
@@ -39,7 +39,7 @@ describe("Login", async () => {
 	const userId = (await new Wallet(seed).getPsks())[0];
 	const getErrorElement = () => document.querySelector(".login__error");
 	const getWalletSpy = vi.spyOn(walletService, "getWallet");
-	const gotoSpy = vi.spyOn(appNavigation, "goto");
+	const gotoSpy = vi.spyOn(navigation, "goto");
 	const initSpy = vi.spyOn(walletStore, "init");
 	const settingsResetSpy = vi.spyOn(settingsStore, "reset");
 	const confirmSpy = vi.spyOn(window, "confirm");
diff --git a/web-wallet/src/routes/(welcome)/setup/+page.svelte b/web-wallet/src/routes/(welcome)/setup/+page.svelte
index 6f207f927d..09c053bced 100644
--- a/web-wallet/src/routes/(welcome)/setup/+page.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/+page.svelte
@@ -3,7 +3,7 @@
 <script>
 	import "css-doodle";
 	import Animation from "./Animation.svelte";
-	import { AnchorButton } from "$lib/dusk/components";
+	import { AppAnchorButton } from "$lib/components";
 	import {
 		mdiKeyOutline,
 		mdiRestore,
@@ -20,19 +20,19 @@
 
 		<div class="setup-content__options">
 			<div class="setup-content__options-group">
-				<AnchorButton
+				<AppAnchorButton
 					href="/setup/create"
 					variant="primary"
 					text="Create new wallet"
 					icon={{ path: mdiWalletOutline }}/>
-				<AnchorButton
+				<AppAnchorButton
 					href="/setup/restore/"
 					variant="tertiary"
 					text="Restore Wallet"
 					icon={{ path: mdiRestore }}/>
 			</div>
 			<Animation/>
-			<AnchorButton
+			<AppAnchorButton
 				href="/login"
 				variant="secondary"
 				text="Access wallet"
diff --git a/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte b/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte
index bd26e89458..352c6e0ec8 100644
--- a/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte
@@ -1,10 +1,6 @@
 <script>
-	import {
-		Anchor,
-		AnchorButton,
-		Button,
-		Card
-	} from "$lib/dusk/components";
+	import { Button, Card } from "$lib/dusk/components";
+	import { AppAnchor, AppAnchorButton } from "$lib/components";
 
 	/** @type {boolean} */
 	export let tosAccepted = false;
@@ -13,14 +9,14 @@
 <section class="flex flex-col flex-1">
 	<Card heading="Terms &amp; Privacy Policy">
 		<div class="flex flex-col gap-1">
-			<p>Our <Anchor
+			<p>Our <AppAnchor
 				href="https://dusk.network/privacy-policy/"
 				rel="noopener noreferrer"
-				target="_blank">Terms &amp; Privacy Policy</Anchor> govern your use of our services,
+				target="_blank">Terms &amp; Privacy Policy</AppAnchor> govern your use of our services,
 			including data handling and user responsibilities.
 			Your privacy and security are our top priorities.</p>
 			<div class="flex gap-1 w-100">
-				<AnchorButton
+				<AppAnchorButton
 					className="flex-1"
 					href="/setup"
 					text="Cancel"
diff --git a/web-wallet/src/routes/(welcome)/setup/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/setup/__tests__/__snapshots__/page.spec.js.snap
index d0a4ed42c5..8bc4ad6801 100644
--- a/web-wallet/src/routes/(welcome)/setup/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/setup/__tests__/__snapshots__/page.spec.js.snap
@@ -34,7 +34,7 @@ exports[`Setup > should render the Setup page 1`] = `
           <a
             aria-disabled="false"
             class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal dusk-icon-button-labeled"
-            href="/setup/create"
+            href="/some-base-path/setup/create"
           >
             <svg
               class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
@@ -58,11 +58,12 @@ exports[`Setup > should render the Setup page 1`] = `
           </a>
           <!--&lt;Anchor&gt;-->
           <!--&lt;AnchorButton&gt;-->
+          <!--&lt;AppAnchorButton&gt;-->
            
           <a
             aria-disabled="false"
             class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal dusk-icon-button-labeled"
-            href="/setup/restore/"
+            href="/some-base-path/setup/restore/"
           >
             <svg
               class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
@@ -86,6 +87,7 @@ exports[`Setup > should render the Setup page 1`] = `
           </a>
           <!--&lt;Anchor&gt;-->
           <!--&lt;AnchorButton&gt;-->
+          <!--&lt;AppAnchorButton&gt;-->
         </div>
          
         <css-doodle
@@ -131,7 +133,7 @@ exports[`Setup > should render the Setup page 1`] = `
         <a
           aria-disabled="false"
           class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--secondary dusk-anchor-button--size--normal dusk-icon-button-labeled"
-          href="/login"
+          href="/some-base-path/login"
         >
           <svg
             class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
@@ -155,6 +157,7 @@ exports[`Setup > should render the Setup page 1`] = `
         </a>
         <!--&lt;Anchor&gt;-->
         <!--&lt;AnchorButton&gt;-->
+        <!--&lt;AppAnchorButton&gt;-->
       </div>
     </div>
   </section>
diff --git a/web-wallet/src/routes/(welcome)/setup/create/+page.svelte b/web-wallet/src/routes/(welcome)/setup/create/+page.svelte
index 84abb6ca41..70d256c940 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/+page.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/create/+page.svelte
@@ -17,7 +17,7 @@
 	import AllSet from "../AllSet.svelte";
 	import MnemonicPreSetup from "./MnemonicPreSetup.svelte";
 	import PasswordSetup from "../PasswordSetup.svelte";
-	import { goto } from "$app/navigation";
+	import { goto } from "$lib/navigation";
 
 	/** @type {boolean} */
 	let notice = false;
diff --git a/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
index 21b802eca8..e24c3fc695 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
@@ -3231,6 +3231,7 @@ exports[`Create > should render the Terms of Service step of the Create flow if
               Terms & Privacy Policy
             </a>
             <!--&lt;Anchor&gt;-->
+            <!--&lt;AppAnchor&gt;-->
              govern your use of our services,
 			including data handling and user responsibilities.
 			Your privacy and security are our top priorities.
@@ -3242,7 +3243,7 @@ exports[`Create > should render the Terms of Service step of the Create flow if
             <a
               aria-disabled="false"
               class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal flex-1"
-              href="/setup"
+              href="/some-base-path/setup"
             >
               <span
                 class="dusk-anchor-button__text"
@@ -3253,6 +3254,7 @@ exports[`Create > should render the Terms of Service step of the Create flow if
             </a>
             <!--&lt;Anchor&gt;-->
             <!--&lt;AnchorButton&gt;-->
+            <!--&lt;AppAnchorButton&gt;-->
              
             <button
               class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal flex-1"
diff --git a/web-wallet/src/routes/(welcome)/setup/restore/+page.svelte b/web-wallet/src/routes/(welcome)/setup/restore/+page.svelte
index 37d37817cb..800f54ef66 100644
--- a/web-wallet/src/routes/(welcome)/setup/restore/+page.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/restore/+page.svelte
@@ -10,7 +10,7 @@
 	import { ExistingWalletNotice } from "$lib/components";
 	import { settingsStore } from "$lib/stores";
 	import { initializeWallet, refreshLocalStoragePasswordInfo } from "$lib/wallet";
-	import { goto } from "$app/navigation";
+	import { goto } from "$lib/navigation";
 
 	/** @type {boolean} */
 	let notice = false;
diff --git a/web-wallet/src/routes/(welcome)/setup/restore/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/setup/restore/__tests__/__snapshots__/page.spec.js.snap
index 23ee4673c7..92fb76aa88 100644
--- a/web-wallet/src/routes/(welcome)/setup/restore/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/setup/restore/__tests__/__snapshots__/page.spec.js.snap
@@ -49,7 +49,7 @@ exports[`Restore > should render the Existing Wallet notice step of the Restore
             <a
               aria-disabled="false"
               class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal flex-1"
-              href="/setup"
+              href="/some-base-path/setup"
             >
               <span
                 class="dusk-anchor-button__text"
@@ -60,6 +60,7 @@ exports[`Restore > should render the Existing Wallet notice step of the Restore
             </a>
             <!--&lt;Anchor&gt;-->
             <!--&lt;AnchorButton&gt;-->
+            <!--&lt;AppAnchorButton&gt;-->
              
             <button
               class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal flex-1"
@@ -311,7 +312,7 @@ exports[`Restore > should render the Mnemonic Authenticate step after accepting
       <a
         aria-disabled="false"
         class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal dusk-icon-button-labeled"
-        href="/setup"
+        href="/some-base-path/setup"
       >
         <svg
           class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
@@ -335,6 +336,7 @@ exports[`Restore > should render the Mnemonic Authenticate step after accepting
       </a>
       <!--&lt;Anchor&gt;-->
       <!--&lt;AnchorButton&gt;-->
+      <!--&lt;AppAnchorButton&gt;-->
       
        
       <button
@@ -415,6 +417,7 @@ exports[`Restore > should render the Terms of Service step of the Restore flow i
               Terms & Privacy Policy
             </a>
             <!--&lt;Anchor&gt;-->
+            <!--&lt;AppAnchor&gt;-->
              govern your use of our services,
 			including data handling and user responsibilities.
 			Your privacy and security are our top priorities.
@@ -426,7 +429,7 @@ exports[`Restore > should render the Terms of Service step of the Restore flow i
             <a
               aria-disabled="false"
               class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal flex-1"
-              href="/setup"
+              href="/some-base-path/setup"
             >
               <span
                 class="dusk-anchor-button__text"
@@ -437,6 +440,7 @@ exports[`Restore > should render the Terms of Service step of the Restore flow i
             </a>
             <!--&lt;Anchor&gt;-->
             <!--&lt;AnchorButton&gt;-->
+            <!--&lt;AppAnchorButton&gt;-->
              
             <button
               class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal flex-1"
diff --git a/web-wallet/src/routes/(welcome)/setup/restore/__tests__/page.spec.js b/web-wallet/src/routes/(welcome)/setup/restore/__tests__/page.spec.js
index 9085d7d47a..64c208eaff 100644
--- a/web-wallet/src/routes/(welcome)/setup/restore/__tests__/page.spec.js
+++ b/web-wallet/src/routes/(welcome)/setup/restore/__tests__/page.spec.js
@@ -8,11 +8,11 @@ import {
 } from "vitest";
 import { cleanup, fireEvent, render } from "@testing-library/svelte";
 import { generateMnemonic } from "bip39";
-import * as appNavigation from "$app/navigation";
 import { Wallet } from "@dusk-network/dusk-wallet-js";
 import { setKey } from "lamb";
 import { get } from "svelte/store";
 import { addresses } from "$lib/mock-data";
+import * as navigation from "$lib/navigation";
 import { settingsStore, walletStore } from "$lib/stores";
 import { encryptMnemonic, getSeedFromMnemonic } from "$lib/wallet";
 import loginInfoStorage from "$lib/services/loginInfoStorage";
@@ -43,7 +43,7 @@ describe("Restore", async () => {
 	const seed = getSeedFromMnemonic(mnemonic);
 	const userId = (await new Wallet(seed).getPsks())[0];
 	const getWalletSpy = vi.spyOn(walletService, "getWallet");
-	const gotoSpy = vi.spyOn(appNavigation, "goto");
+	const gotoSpy = vi.spyOn(navigation, "goto");
 	const settingsResetSpy = vi.spyOn(settingsStore, "reset");
 	const clearAndInitSpy = vi.spyOn(walletStore, "clearLocalDataAndInit");
 	const readTextMock = vi.fn().mockResolvedValue(mnemonic);
diff --git a/web-wallet/src/routes/+page.js b/web-wallet/src/routes/+page.js
index 8737c21a29..9c3dfddef0 100644
--- a/web-wallet/src/routes/+page.js
+++ b/web-wallet/src/routes/+page.js
@@ -1,4 +1,4 @@
-import { redirect } from "@sveltejs/kit";
+import { redirect } from "$lib/navigation";
 
 /** @type {import('./$types').PageLoad} */
 export function load () {
diff --git a/web-wallet/src/routes/__tests__/page.spec.js b/web-wallet/src/routes/__tests__/page.spec.js
index 3e43d4e4ea..5b0957157d 100644
--- a/web-wallet/src/routes/__tests__/page.spec.js
+++ b/web-wallet/src/routes/__tests__/page.spec.js
@@ -7,12 +7,12 @@ import {
 	vi
 } from "vitest";
 
-import * as SvelteKit from "@sveltejs/kit";
+import * as navigation from "$lib/navigation";
 
 import { load } from "../+page";
 
 describe("Main +page.js", () => {
-	const redirectSpy = vi.spyOn(SvelteKit, "redirect");
+	const redirectSpy = vi.spyOn(navigation, "redirect");
 
 	afterEach(() => {
 		redirectSpy.mockClear();
@@ -22,9 +22,9 @@ describe("Main +page.js", () => {
 		redirectSpy.mockRestore();
 	});
 
-	it("should redirect the user to the setup page", () => {
+	it("should redirect the user to the setup page", async () => {
 		// @ts-ignore
-		expect(async () => await load({ url: new URL("http://example.com") })).rejects.toThrow();
+		expect(async () => await load()).rejects.toThrow();
 
 		expect(redirectSpy).toHaveBeenCalledTimes(1);
 		expect(redirectSpy).toHaveBeenCalledWith(301, "/setup");
diff --git a/web-wallet/svelte.config.js b/web-wallet/svelte.config.js
index f2584b54d9..dc07555c8e 100644
--- a/web-wallet/svelte.config.js
+++ b/web-wallet/svelte.config.js
@@ -2,11 +2,16 @@ import adapter from "@sveltejs/adapter-static";
 import autoprefixer from "autoprefixer";
 import postCSSNested from "postcss-nested";
 import preprocess from "svelte-preprocess";
+import { loadEnv } from "vite";
+
+const env = loadEnv("", process.cwd());
+const fallBackBase = env.VITE_BASE_PATH ? `${env.VITE_BASE_PATH}/` : "";
 
 /** @type {import("@sveltejs/kit").Config} */
 const config = {
 	kit: {
-		adapter: adapter({ fallback: "index.html" })
+		adapter: adapter({ fallback: `${fallBackBase}index.html` }),
+		paths: { base: env.VITE_BASE_PATH }
 	},
 	preprocess: [
 		preprocess({
diff --git a/web-wallet/vite-setup.js b/web-wallet/vite-setup.js
index 98162a55e5..0e1c73780b 100644
--- a/web-wallet/vite-setup.js
+++ b/web-wallet/vite-setup.js
@@ -59,6 +59,12 @@ vi.mock("$app/environment", () => ({
 	version: "any"
 }));
 
+// Mock app paths
+vi.mock("$app/paths", async importOriginal => ({
+	...await importOriginal(),
+	get base () { return "/some-base-path"; }
+}));
+
 // Mock SvelteKit runtime module $app/navigation
 vi.mock("$app/navigation", () => ({
 	afterNavigate: () => {},