diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
index c15841b8b8..e0bff246e3 100644
--- a/web-wallet/CHANGELOG.md
+++ b/web-wallet/CHANGELOG.md
@@ -9,22 +9,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Add `fiatPrice` optional property to Balance component #1331
-- Add ability to revert words when entering the mnemonic phrase #1333
-- Add missing error handling when querying the quote API #1344
+- Add `fiatPrice` optional property to Balance component [#1331](https://github.com/dusk-network/rusk/pull/1331)
+- Add ability to revert words when entering the mnemonic phrase [#1333](https://github.com/dusk-network/rusk/pull/1333)
+- Add missing error handling when querying the quote API [#1344](https://github.com/dusk-network/rusk/pull/1334)
 
 ### Changed
 
-- Change `fiatCurrency`, `locale`, `tokenCurrency`, `token` to required properties in Balance component #1331
+- Change `fiatCurrency`, `locale`, `tokenCurrency`, `token` to required properties in Balance component [#1331](https://github.com/dusk-network/rusk/pull/1331)
 
 ### Removed
 
-- Remove `fiat` property from Balance component #1331
+- Remove `fiat` property from Balance component [#1331](https://github.com/dusk-network/rusk/pull/1331)
 
 ### Fixed
 
-- Fix Seed Phrase words size #1337
-- Fix colors on red background #1336
+- Fix Seed Phrase words size [#1337](https://github.com/dusk-network/rusk/pull/1337)
+- Fix colors on red background [#1336](https://github.com/dusk-network/rusk/pull/1336)
+- Fix Transactions table design [#1330](https://github.com/dusk-network/rusk/pull/1330)
 
 ## [0.1.0-beta] - 2024-02-02
 
diff --git a/web-wallet/src/lib/components/Transactions/Transactions.svelte b/web-wallet/src/lib/components/Transactions/Transactions.svelte
index c64aa6ae3f..a12a0eae64 100644
--- a/web-wallet/src/lib/components/Transactions/Transactions.svelte
+++ b/web-wallet/src/lib/components/Transactions/Transactions.svelte
@@ -1,25 +1,41 @@
 <script>
-	import { mdiContain	} from "@mdi/js";
+	import { compose, take } from "lamb";
+	import { mdiArrowLeft, mdiContain } from "@mdi/js";
+	import { onMount } from "svelte";
 	import { fade } from "svelte/transition";
 	import { logo } from "$lib/dusk/icons";
 	import {
-		Anchor, Badge, Icon, Tooltip
+		Anchor,
+		AnchorButton,
+		Badge,
+		ErrorDetails,
+		Icon,
+		Throbber
 	} from "$lib/dusk/components";
 	import { createFeeFormatter, createTransferFormatter } from "$lib/dusk/currency";
-	import { settingsStore } from "$lib/stores";
 	import { calculateAdaptiveCharCount, middleEllipsis } from "$lib/dusk/string";
-	import { onMount } from "svelte";
+	import { sortByHeightDesc } from "$lib/transactions";
+
+	/** @type {String} */
+	export let language;
 
-	/** @type Transaction[] */
-	export let transactions;
+	/** @type {Number | Undefined} */
+	export let limit = undefined;
 
-	const { language } = $settingsStore;
 	const transferFormatter = createTransferFormatter(language);
 	const feeFormatter = createFeeFormatter(language);
 
+	/** @type {Promise<Transaction[]>} */
+	export let items;
+
 	/** @type {Number} */
 	let screenWidth = window.innerWidth;
 
+	/** @type {(transactions: Transaction[]) => Transaction[]} */
+	const getOrderedTransactions = limit
+		? compose(take(limit), sortByHeightDesc)
+		: sortByHeightDesc;
+
 	onMount(() => {
 		const resizeObserver = new ResizeObserver(entries => {
 			const entry = entries[0];
@@ -36,85 +52,107 @@
 
 <article in:fade|global class="transactions">
 	<header class="transactions__header">
-		<slot name="heading"/>
+		<h3 class="h4">Transactions</h3>
 	</header>
 
-	<div class="transactions__lists">
-		{#if transactions.length}
-			{#each transactions as transaction (transaction.id)}
-				<dl class="transactions-list">
-					<dt class="transactions-list__term">Hash</dt>
-					<dd class="transactions-list__datum transactions-list__datum--hash">
-						<samp>
-							<Anchor
-								href="https://explorer.dusk.network/transactions/transaction?id={transaction.id}"
-								rel="noopener noreferrer"
-								target="_blank"
-							>
-								{middleEllipsis(
-									transaction.id,
-									calculateAdaptiveCharCount(screenWidth, 320, 640, 5, 20)
-								)}
-							</Anchor>
-						</samp>
-					</dd>
-					{#if transaction.tx_type}
-						<dt class="transactions-list__term">Type</dt>
+	{#await items}
+		<Throbber className="loading"/>
+	{:then transactions}
+		<div class="transactions__lists">
+			{#if transactions.length}
+				{#each getOrderedTransactions(transactions) as transaction (transaction.id)}
+					<dl class="transactions-list">
+						<dt class="transactions-list__term">Hash</dt>
+						<dd class="transactions-list__datum transactions-list__datum--hash">
+							<samp>
+								<Anchor
+									href="https://explorer.dusk.network/transactions/transaction?id={transaction.id}"
+									rel="noopener noreferrer"
+									target="_blank"
+								>
+									{middleEllipsis(
+										transaction.id,
+										calculateAdaptiveCharCount(screenWidth, 320, 640, 5, 20)
+									)}
+								</Anchor>
+							</samp>
+						</dd>
+						{#if transaction.tx_type}
+							<dt class="transactions-list__term">Type</dt>
+							<dd class="transactions-list__datum">
+								<Badge className="w-100" text={transaction.tx_type}/>
+							</dd>
+						{/if}
+						<dt class="transactions-list__term">Block</dt>
 						<dd class="transactions-list__datum">
-							<Badge className="w-100" text={transaction.tx_type}/>
+							{new Intl.NumberFormat(language).format(transaction.block_height)}
 						</dd>
-					{/if}
-					<dt class="transactions-list__term">Block</dt>
-					<dd class="transactions-list__datum">
-						{new Intl.NumberFormat(language).format(transaction.block_height)}
-					</dd>
-					<dt class="transactions-list__term">Amount</dt>
-					<dd class="transactions-list__datum">
-						{transferFormatter(transaction.amount)}
-						<Icon
-							className="transactions-list__icon"
-							path={logo}
-							data-tooltip-id="transactions-tooltip"
-							data-tooltip-text="DUSK"
-							data-tooltip-place="top"
-						/>
-					</dd>
-					{#if transaction.direction === "Out"}
-						<dt class="transactions-list__term">Fee</dt>
+						<dt class="transactions-list__term">Amount</dt>
 						<dd class="transactions-list__datum">
-							{feeFormatter(transaction.fee)}
+							{transferFormatter(transaction.amount)}
 							<Icon
 								className="transactions-list__icon"
 								path={logo}
-								data-tooltip-id="transactions-tooltip"
+								data-tooltip-id="main-tooltip"
 								data-tooltip-text="DUSK"
 								data-tooltip-place="top"
 							/>
 						</dd>
-					{/if}
-				</dl>
-			{/each}
-		{:else}
-			<div class="transactions-list__empty">
-				<Icon path={mdiContain} size="large"/>
-				<p>You have no transaction history</p>
-			</div>
-		{/if}
-	</div>
+						{#if transaction.direction === "Out"}
+							<dt class="transactions-list__term">Fee</dt>
+							<dd class="transactions-list__datum">
+								{feeFormatter(transaction.fee)}
+								<Icon
+									className="transactions-list__icon"
+									path={logo}
+									data-tooltip-id="main-tooltip"
+									data-tooltip-text="DUSK"
+									data-tooltip-place="top"
+								/>
+							</dd>
+						{/if}
+					</dl>
+				{/each}
+			{:else}
+				<div class="transactions-list__empty">
+					<Icon path={mdiContain} size="large"/>
+					<p>You have no transaction history</p>
+				</div>
+			{/if}
+		</div>
+
+	{:catch e}
+		<ErrorDetails summary="Error getting transactions" error={e}/>
+	{/await}
 
 	<footer class="transactions__footer">
-		{#if transactions.length}
-			<slot name="controls"/>
+		{#if limit}
+			<AnchorButton
+				className="transactions__footer-button"
+				href="/dashboard/transactions"
+				text="View all transactions"
+				variant="tertiary"
+			/>
+		{:else}
+			<AnchorButton
+				className="transactions__footer-button"
+				href="/dashboard"
+				text="Back"
+				variant="tertiary"
+				icon={{ path: mdiArrowLeft }}
+			/>
 		{/if}
 	</footer>
 </article>
 
-<Tooltip id="transactions-tooltip"/>
-
 <style lang="postcss">
 .transactions {
 	border-radius: 1.25em;
 	background: var(--surface-color);
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
 
 	&__header {
 		padding: 1.375em 1em;
@@ -127,16 +165,25 @@
 		display: flex;
 		flex-direction: column;
 		gap: 0.625em;
+		flex: 1;
+		overflow-y: auto;
 	}
 
 	&__footer {
-		display: flex;
 		padding: 1em 1.375em;
-		justify-content: space-between;
-		gap: 0.625em;
+		display: flex;
+		margin-top: auto;
 	}
-}
 
+	:global(.transactions__footer-button) {
+		width: 100%;
+	}
+
+	:global(.loading) {
+		width: 100%;
+		align-self: center;
+	}
+}
 .transactions-list {
 	display: grid;
 	grid-template-columns: max-content auto;
diff --git a/web-wallet/src/lib/components/__tests__/Transactions.spec.js b/web-wallet/src/lib/components/__tests__/Transactions.spec.js
new file mode 100644
index 0000000000..4fb6a4f45e
--- /dev/null
+++ b/web-wallet/src/lib/components/__tests__/Transactions.spec.js
@@ -0,0 +1,179 @@
+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 { transactions } from "$lib/mock-data";
+import { sortByHeightDesc } from "$lib/transactions";
+import { createFeeFormatter, createTransferFormatter } from "$lib/dusk/currency";
+
+import Transactions from "../Transactions/Transactions.svelte";
+
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+	observe: vi.fn(),
+	unobserve: vi.fn(),
+	disconnect: vi.fn()
+}));
+
+vi.useFakeTimers();
+
+describe("Transactions", () => {
+	const transactionsPromise = Promise.resolve(transactions);
+	const emptyTransactionsPromise = Promise.resolve([]);
+	const blockExplorerBaseUrl = "https://explorer.dusk.network/transactions/transaction?id=";
+	const highestTransactionID = sortByHeightDesc(transactions)[0].id;
+	const settings = get(settingsStore);
+	const language = settings.language;
+	const transferFormatter = createTransferFormatter(language);
+	const feeFormatter = createFeeFormatter(language);
+
+	const baseProps = {
+		language,
+		items: transactionsPromise
+	};
+
+	afterEach(() => {
+		cleanup();
+	});
+
+	it("renders loading indicator before the promise has resolved", async () => {
+		const { getByRole } = render(Transactions, { props: baseProps });
+		const spinner = getByRole("progressbar");
+
+		expect(spinner).toBeInTheDocument();
+	});
+
+	it("renders transactions correctly when items are fulfilled", async () => {
+		const props = {
+			...baseProps,
+			limit: 1
+		};
+
+		const { getByText, container } = render(Transactions, props);
+
+		await vi.advanceTimersToNextTimerAsync();
+
+		const transaction = sortByHeightDesc(transactions)[0];
+
+		const transactionAmount = getByText(transferFormatter(transaction.amount));
+		const transactionBlockHeight =
+			getByText(new Intl.NumberFormat(language).format(transaction.block_height));
+		const transactionType = getByText(transaction.tx_type.toUpperCase());
+		const transactionFee = getByText(feeFormatter(transaction.fee));
+
+		expect(container).toMatchSnapshot();
+
+		expect(transactionAmount).toBeInTheDocument();
+		expect(transactionBlockHeight).toBeInTheDocument();
+		expect(transactionType).toBeInTheDocument();
+		expect(transactionFee).toBeInTheDocument();
+	});
+
+	it("renders the correct amount of Transactions, as the limit supplied", async () => {
+		const props = {
+			...baseProps,
+			limit: 3
+		};
+
+		const { getAllByText, container } = render(Transactions, props);
+
+		await vi.advanceTimersToNextTimerAsync();
+
+		expect(container).toMatchSnapshot();
+
+		const transactionHashes = getAllByText("Hash");
+
+		expect(transactionHashes).toHaveLength(3);
+	});
+
+	it("renders the Transactions in descending order", async () => {
+		const { container } = render(Transactions, baseProps);
+
+		await vi.advanceTimersToNextTimerAsync();
+
+		const sortedTransactions = sortByHeightDesc(transactions);
+
+		const transactionElements = container.querySelectorAll(".transactions-list");
+
+		sortedTransactions.forEach((transaction, index) => {
+			expect(transactionElements[index]).toHaveTextContent(transaction.id);
+		});
+	});
+
+	it("renders the Transactions with the correct CTA to the Block Explorer", async () => {
+		const props = {
+			...baseProps,
+			limit: 1
+		};
+
+		const { getByRole } = render(Transactions, props);
+
+		await vi.advanceTimersToNextTimerAsync();
+
+		const transactionHrefBlockExplorerAnchor = getByRole("link", { name: highestTransactionID });
+
+		expect(transactionHrefBlockExplorerAnchor).toBeInTheDocument();
+		expect(transactionHrefBlockExplorerAnchor).toHaveAttribute(
+			"href",
+			`${blockExplorerBaseUrl}${highestTransactionID}`
+		);
+	});
+
+	it("displays empty state when no transactions are present", async () => {
+		const props = {
+			...baseProps,
+			items: emptyTransactionsPromise
+		};
+
+		const { getByText } = render(Transactions, props);
+
+		await vi.advanceTimersToNextTimerAsync();
+
+		const emptyState = getByText("You have no transaction history");
+
+		expect(emptyState).toBeInTheDocument();
+	});
+
+	it("displays the \"View all transactions\" CTA if limit is supplied", async () => {
+		const props = {
+			...baseProps,
+			items: emptyTransactionsPromise,
+			limit: 1
+		};
+
+		const { getByRole } = render(Transactions, props);
+		const viewAllTransactionAnchor = getByRole("link", { name: "View all transactions" });
+
+		expect(viewAllTransactionAnchor).toBeInTheDocument();
+		expect(viewAllTransactionAnchor).toHaveAttribute("href", "/dashboard/transactions");
+	});
+
+	it("displays the \"Back\" CTA if no limit is supplied", async () => {
+		const props = {
+			...baseProps,
+			items: emptyTransactionsPromise
+		};
+
+		const { getByRole } = render(Transactions, props);
+		const viewAllTransactionAnchor = getByRole("link", { name: "Back" });
+
+		expect(viewAllTransactionAnchor).toBeInTheDocument();
+		expect(viewAllTransactionAnchor).toHaveAttribute("href", "/dashboard");
+	});
+
+	it("handles error state when items are rejected", async () => {
+		const promiseReject = Promise.reject(new Error("An error has occurred"));
+		const props = {
+			...baseProps,
+			items: promiseReject
+		};
+
+		const { getByText } = render(Transactions, props);
+
+		await vi.advanceTimersToNextTimerAsync();
+
+		const errorState = getByText("Error getting transactions");
+
+		expect(errorState).toBeInTheDocument();
+	});
+});
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
new file mode 100644
index 0000000000..bf7301029e
--- /dev/null
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/Transactions.spec.js.snap
@@ -0,0 +1,465 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Transactions > renders the correct amount of Transactions, as the limit supplied 1`] = `
+<body>
+  <div>
+    <article
+      class="transactions s-j8yKepzodVZ-"
+    >
+      <header
+        class="transactions__header s-j8yKepzodVZ-"
+      >
+        <h3
+          class="h4 s-j8yKepzodVZ-"
+        >
+          Transactions
+        </h3>
+      </header>
+       
+      <div
+        class="transactions__lists s-j8yKepzodVZ-"
+      >
+        <dl
+          class="transactions-list s-j8yKepzodVZ-"
+        >
+          <dt
+            class="transactions-list__term s-j8yKepzodVZ-"
+          >
+            Hash
+          </dt>
+          <dd
+            class="transactions-list__datum transactions-list__datum--hash s-j8yKepzodVZ-"
+          >
+            <samp
+              class="s-j8yKepzodVZ-"
+            >
+              <a
+                class="dusk-anchor"
+                href="https://explorer.dusk.network/transactions/transaction?id=tg874534tddsghdtst54hdfh795h"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                tg874534tddsghdtst54hdfh795h
+              </a>
+              <!--&lt;Anchor&gt;-->
+            </samp>
+             
+          </dd>
+          <dt
+            class="transactions-list__term s-j8yKepzodVZ-"
+          >
+            Type
+          </dt>
+          <dd
+            class="transactions-list__datum s-j8yKepzodVZ-"
+          >
+            <span
+              class="dusk-badge dusk-badge--variant-neutral w-100"
+            >
+              STAKE
+            </span>
+            <!--&lt;Badge&gt;-->
+             
+          </dd>
+          <dt
+            class="transactions-list__term s-j8yKepzodVZ-"
+          >
+            Block
+          </dt>
+          <dd
+            class="transactions-list__datum s-j8yKepzodVZ-"
+          >
+            33,460
+             
+          </dd>
+          <dt
+            class="transactions-list__term s-j8yKepzodVZ-"
+          >
+            Amount
+          </dt>
+          <dd
+            class="transactions-list__datum s-j8yKepzodVZ-"
+          >
+            +27,000.00
+             
+            <svg
+              class="dusk-icon dusk-icon--size--normal transactions-list__icon"
+              data-tooltip-id="main-tooltip"
+              data-tooltip-place="top"
+              data-tooltip-text="DUSK"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12.335 0.005a12.186 12.186 0 0 0 -2.58 0.204C4.2 1.259 0 6.14 0 11.999 0 17.859 4.203 22.74 9.759 23.79c0.726 0.138 1.476 0.21 2.241 0.21 6.789 0 12.261 -5.64 11.991 -12.49C23.741 5.249 18.599 0.173 12.335 0.005Zm0.207 21.58c-0.204 0.012 -0.336 -0.222 -0.21 -0.384 1.974 -2.541 3.153 -5.733 3.153 -9.202 0 -3.468 -1.176 -6.663 -3.153 -9.202 -0.126 -0.162 0.003 -0.396 0.207 -0.384 5.052 0.282 9.06 4.465 9.06 9.586 0 5.121 -4.005 9.304 -9.057 9.586Z"
+              />
+            </svg>
+            
+            <!--&lt;Icon&gt;-->
+             
+          </dd>
+          <dt
+            class="transactions-list__term s-j8yKepzodVZ-"
+          >
+            Fee
+          </dt>
+          <dd
+            class="transactions-list__datum s-j8yKepzodVZ-"
+          >
+            1,876.00
+             
+            <svg
+              class="dusk-icon dusk-icon--size--normal transactions-list__icon"
+              data-tooltip-id="main-tooltip"
+              data-tooltip-place="top"
+              data-tooltip-text="DUSK"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12.335 0.005a12.186 12.186 0 0 0 -2.58 0.204C4.2 1.259 0 6.14 0 11.999 0 17.859 4.203 22.74 9.759 23.79c0.726 0.138 1.476 0.21 2.241 0.21 6.789 0 12.261 -5.64 11.991 -12.49C23.741 5.249 18.599 0.173 12.335 0.005Zm0.207 21.58c-0.204 0.012 -0.336 -0.222 -0.21 -0.384 1.974 -2.541 3.153 -5.733 3.153 -9.202 0 -3.468 -1.176 -6.663 -3.153 -9.202 -0.126 -0.162 0.003 -0.396 0.207 -0.384 5.052 0.282 9.06 4.465 9.06 9.586 0 5.121 -4.005 9.304 -9.057 9.586Z"
+              />
+            </svg>
+            
+            <!--&lt;Icon&gt;-->
+             
+          </dd>
+        </dl>
+        <dl
+          class="transactions-list s-j8yKepzodVZ-"
+        >
+          <dt
+            class="transactions-list__term s-j8yKepzodVZ-"
+          >
+            Hash
+          </dt>
+          <dd
+            class="transactions-list__datum transactions-list__datum--hash s-j8yKepzodVZ-"
+          >
+            <samp
+              class="s-j8yKepzodVZ-"
+            >
+              <a
+                class="dusk-anchor"
+                href="https://explorer.dusk.network/transactions/transaction?id=tg874534tddsghdtst54hdfh794h"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                tg874534tddsghdtst54hdfh794h
+              </a>
+              <!--&lt;Anchor&gt;-->
+            </samp>
+             
+          </dd>
+          <dt
+            class="transactions-list__term s-j8yKepzodVZ-"
+          >
+            Type
+          </dt>
+          <dd
+            class="transactions-list__datum s-j8yKepzodVZ-"
+          >
+            <span
+              class="dusk-badge dusk-badge--variant-neutral w-100"
+            >
+              TRANSFER
+            </span>
+            <!--&lt;Badge&gt;-->
+             
+          </dd>
+          <dt
+            class="transactions-list__term s-j8yKepzodVZ-"
+          >
+            Block
+          </dt>
+          <dd
+            class="transactions-list__datum s-j8yKepzodVZ-"
+          >
+            33,459
+             
+          </dd>
+          <dt
+            class="transactions-list__term s-j8yKepzodVZ-"
+          >
+            Amount
+          </dt>
+          <dd
+            class="transactions-list__datum s-j8yKepzodVZ-"
+          >
+            -25,000.00
+             
+            <svg
+              class="dusk-icon dusk-icon--size--normal transactions-list__icon"
+              data-tooltip-id="main-tooltip"
+              data-tooltip-place="top"
+              data-tooltip-text="DUSK"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12.335 0.005a12.186 12.186 0 0 0 -2.58 0.204C4.2 1.259 0 6.14 0 11.999 0 17.859 4.203 22.74 9.759 23.79c0.726 0.138 1.476 0.21 2.241 0.21 6.789 0 12.261 -5.64 11.991 -12.49C23.741 5.249 18.599 0.173 12.335 0.005Zm0.207 21.58c-0.204 0.012 -0.336 -0.222 -0.21 -0.384 1.974 -2.541 3.153 -5.733 3.153 -9.202 0 -3.468 -1.176 -6.663 -3.153 -9.202 -0.126 -0.162 0.003 -0.396 0.207 -0.384 5.052 0.282 9.06 4.465 9.06 9.586 0 5.121 -4.005 9.304 -9.057 9.586Z"
+              />
+            </svg>
+            
+            <!--&lt;Icon&gt;-->
+             
+          </dd>
+        </dl>
+        <dl
+          class="transactions-list s-j8yKepzodVZ-"
+        >
+          <dt
+            class="transactions-list__term s-j8yKepzodVZ-"
+          >
+            Hash
+          </dt>
+          <dd
+            class="transactions-list__datum transactions-list__datum--hash s-j8yKepzodVZ-"
+          >
+            <samp
+              class="s-j8yKepzodVZ-"
+            >
+              <a
+                class="dusk-anchor"
+                href="https://explorer.dusk.network/transactions/transaction?id=tg874534tddsghdtst54hdfh793h"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                tg874534tddsghdtst54hdfh793h
+              </a>
+              <!--&lt;Anchor&gt;-->
+            </samp>
+             
+          </dd>
+          <dt
+            class="transactions-list__term s-j8yKepzodVZ-"
+          >
+            Type
+          </dt>
+          <dd
+            class="transactions-list__datum s-j8yKepzodVZ-"
+          >
+            <span
+              class="dusk-badge dusk-badge--variant-neutral w-100"
+            >
+              TRANSFER
+            </span>
+            <!--&lt;Badge&gt;-->
+             
+          </dd>
+          <dt
+            class="transactions-list__term s-j8yKepzodVZ-"
+          >
+            Block
+          </dt>
+          <dd
+            class="transactions-list__datum s-j8yKepzodVZ-"
+          >
+            33,458
+             
+          </dd>
+          <dt
+            class="transactions-list__term s-j8yKepzodVZ-"
+          >
+            Amount
+          </dt>
+          <dd
+            class="transactions-list__datum s-j8yKepzodVZ-"
+          >
+            +25,000.00
+             
+            <svg
+              class="dusk-icon dusk-icon--size--normal transactions-list__icon"
+              data-tooltip-id="main-tooltip"
+              data-tooltip-place="top"
+              data-tooltip-text="DUSK"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12.335 0.005a12.186 12.186 0 0 0 -2.58 0.204C4.2 1.259 0 6.14 0 11.999 0 17.859 4.203 22.74 9.759 23.79c0.726 0.138 1.476 0.21 2.241 0.21 6.789 0 12.261 -5.64 11.991 -12.49C23.741 5.249 18.599 0.173 12.335 0.005Zm0.207 21.58c-0.204 0.012 -0.336 -0.222 -0.21 -0.384 1.974 -2.541 3.153 -5.733 3.153 -9.202 0 -3.468 -1.176 -6.663 -3.153 -9.202 -0.126 -0.162 0.003 -0.396 0.207 -0.384 5.052 0.282 9.06 4.465 9.06 9.586 0 5.121 -4.005 9.304 -9.057 9.586Z"
+              />
+            </svg>
+            
+            <!--&lt;Icon&gt;-->
+             
+          </dd>
+        </dl>
+        
+      </div>
+       
+      <footer
+        class="transactions__footer s-j8yKepzodVZ-"
+      >
+        <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"
+        >
+          <span
+            class="dusk-anchor-button__text"
+          >
+            View all transactions
+          </span>
+          
+        </a>
+        <!--&lt;Anchor&gt;-->
+        <!--&lt;AnchorButton&gt;-->
+      </footer>
+    </article>
+    <!--&lt;Transactions&gt;-->
+  </div>
+</body>
+`;
+
+exports[`Transactions > renders transactions correctly when items are fulfilled 1`] = `
+<body>
+  <div>
+    <article
+      class="transactions s-j8yKepzodVZ-"
+    >
+      <header
+        class="transactions__header s-j8yKepzodVZ-"
+      >
+        <h3
+          class="h4 s-j8yKepzodVZ-"
+        >
+          Transactions
+        </h3>
+      </header>
+       
+      <div
+        class="transactions__lists s-j8yKepzodVZ-"
+      >
+        <dl
+          class="transactions-list s-j8yKepzodVZ-"
+        >
+          <dt
+            class="transactions-list__term s-j8yKepzodVZ-"
+          >
+            Hash
+          </dt>
+          <dd
+            class="transactions-list__datum transactions-list__datum--hash s-j8yKepzodVZ-"
+          >
+            <samp
+              class="s-j8yKepzodVZ-"
+            >
+              <a
+                class="dusk-anchor"
+                href="https://explorer.dusk.network/transactions/transaction?id=tg874534tddsghdtst54hdfh795h"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                tg874534tddsghdtst54hdfh795h
+              </a>
+              <!--&lt;Anchor&gt;-->
+            </samp>
+             
+          </dd>
+          <dt
+            class="transactions-list__term s-j8yKepzodVZ-"
+          >
+            Type
+          </dt>
+          <dd
+            class="transactions-list__datum s-j8yKepzodVZ-"
+          >
+            <span
+              class="dusk-badge dusk-badge--variant-neutral w-100"
+            >
+              STAKE
+            </span>
+            <!--&lt;Badge&gt;-->
+             
+          </dd>
+          <dt
+            class="transactions-list__term s-j8yKepzodVZ-"
+          >
+            Block
+          </dt>
+          <dd
+            class="transactions-list__datum s-j8yKepzodVZ-"
+          >
+            33,460
+             
+          </dd>
+          <dt
+            class="transactions-list__term s-j8yKepzodVZ-"
+          >
+            Amount
+          </dt>
+          <dd
+            class="transactions-list__datum s-j8yKepzodVZ-"
+          >
+            +27,000.00
+             
+            <svg
+              class="dusk-icon dusk-icon--size--normal transactions-list__icon"
+              data-tooltip-id="main-tooltip"
+              data-tooltip-place="top"
+              data-tooltip-text="DUSK"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12.335 0.005a12.186 12.186 0 0 0 -2.58 0.204C4.2 1.259 0 6.14 0 11.999 0 17.859 4.203 22.74 9.759 23.79c0.726 0.138 1.476 0.21 2.241 0.21 6.789 0 12.261 -5.64 11.991 -12.49C23.741 5.249 18.599 0.173 12.335 0.005Zm0.207 21.58c-0.204 0.012 -0.336 -0.222 -0.21 -0.384 1.974 -2.541 3.153 -5.733 3.153 -9.202 0 -3.468 -1.176 -6.663 -3.153 -9.202 -0.126 -0.162 0.003 -0.396 0.207 -0.384 5.052 0.282 9.06 4.465 9.06 9.586 0 5.121 -4.005 9.304 -9.057 9.586Z"
+              />
+            </svg>
+            
+            <!--&lt;Icon&gt;-->
+             
+          </dd>
+          <dt
+            class="transactions-list__term s-j8yKepzodVZ-"
+          >
+            Fee
+          </dt>
+          <dd
+            class="transactions-list__datum s-j8yKepzodVZ-"
+          >
+            1,876.00
+             
+            <svg
+              class="dusk-icon dusk-icon--size--normal transactions-list__icon"
+              data-tooltip-id="main-tooltip"
+              data-tooltip-place="top"
+              data-tooltip-text="DUSK"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12.335 0.005a12.186 12.186 0 0 0 -2.58 0.204C4.2 1.259 0 6.14 0 11.999 0 17.859 4.203 22.74 9.759 23.79c0.726 0.138 1.476 0.21 2.241 0.21 6.789 0 12.261 -5.64 11.991 -12.49C23.741 5.249 18.599 0.173 12.335 0.005Zm0.207 21.58c-0.204 0.012 -0.336 -0.222 -0.21 -0.384 1.974 -2.541 3.153 -5.733 3.153 -9.202 0 -3.468 -1.176 -6.663 -3.153 -9.202 -0.126 -0.162 0.003 -0.396 0.207 -0.384 5.052 0.282 9.06 4.465 9.06 9.586 0 5.121 -4.005 9.304 -9.057 9.586Z"
+              />
+            </svg>
+            
+            <!--&lt;Icon&gt;-->
+             
+          </dd>
+        </dl>
+        
+      </div>
+       
+      <footer
+        class="transactions__footer s-j8yKepzodVZ-"
+      >
+        <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"
+        >
+          <span
+            class="dusk-anchor-button__text"
+          >
+            View all transactions
+          </span>
+          
+        </a>
+        <!--&lt;Anchor&gt;-->
+        <!--&lt;AnchorButton&gt;-->
+      </footer>
+    </article>
+    <!--&lt;Transactions&gt;-->
+  </div>
+</body>
+`;
diff --git a/web-wallet/src/routes/(app)/dashboard/+page.svelte b/web-wallet/src/routes/(app)/dashboard/+page.svelte
index 031852ea92..1570d23b78 100644
--- a/web-wallet/src/routes/(app)/dashboard/+page.svelte
+++ b/web-wallet/src/routes/(app)/dashboard/+page.svelte
@@ -4,12 +4,10 @@
 	import { onDestroy } from "svelte";
 	import { fade } from "svelte/transition";
 	import {
-		compose,
 		filterWith,
 		find,
 		hasKeyValue,
-		last,
-		take
+		last
 	} from "lamb";
 	import {
 		mdiDatabaseOutline,
@@ -17,10 +15,7 @@
 	} from "@mdi/js";
 
 	import {
-		AnchorButton,
-		Card,
-		Tabs,
-		Throbber
+		Tabs
 	} from "$lib/dusk/components";
 	import {
 		StakeContract,
@@ -37,7 +32,6 @@
 		walletStore
 	} from "$lib/stores";
 	import { contractDescriptors } from "$lib/contracts";
-	import { sortByHeightDesc } from "$lib/transactions";
 
 	/** @type {import('./$types').PageData} */
 	export let data;
@@ -53,12 +47,6 @@
 	/** @type {(descriptors: ContractDescriptor[]) => ContractDescriptor[]} */
 	const getEnabledContracts = filterWith(hasKeyValue("disabled", false));
 
-	/** @type {(transactions: Transaction[]) => Transaction[]} */
-	const getTransactionsShortlist = compose(
-		take(dashboardTransactionLimit),
-		sortByHeightDesc
-	);
-
 	/** @param {CustomEvent} event */
 	function handleSetGasSettings ({ detail }) {
 		settingsStore.update(store => ({
@@ -137,24 +125,10 @@
 	{/if}
 
 	{#if currentOperation === "" && selectedTab === "transfer" }
-		{#await walletStore.getTransactionsHistory()}
-			<Throbber className="loading"/>
-		{:then transactions}
-			<Transactions transactions={getTransactionsShortlist(transactions)}>
-				<h3 class="h4" slot="heading">Transactions</h3>
-				<AnchorButton
-					className="view-transactions"
-					slot="controls"
-					href="/dashboard/transactions"
-					text="View all transactions"
-					variant="tertiary"
-				/>
-			</Transactions>
-		{:catch e}
-			<Card heading="Error getting transactions">
-				<pre>{e}</pre>
-			</Card>
-		{/await}
+		<Transactions
+			items={walletStore.getTransactionsHistory()}
+			{language}
+			limit={dashboardTransactionLimit}/>
 	{/if}
 </div>
 
@@ -190,12 +164,4 @@
 			gap: var(--default-gap);
 		}
 	}
-
-	:global(.view-transactions) {
-		width: 100%;
-	}
-
-	:global(.loading) {
-		align-self: center;
-	}
 </style>
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 a6f6dad435..d8705268f9 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
@@ -358,30 +358,60 @@ exports[`Dashboard > should render a card when there is an error getting transac
       </div>
     </article>
      
-    <div
-      class="dusk-card"
+    <article
+      class="transactions s-j8yKepzodVZ-"
     >
       <header
-        class="dusk-card__header"
+        class="transactions__header s-j8yKepzodVZ-"
       >
-         
         <h3
-          class="h4"
+          class="h4 s-j8yKepzodVZ-"
         >
-          Error getting transactions
+          Transactions
         </h3>
-         
       </header>
        
-      <pre
-        class="s-qpUp5WgwgSGx"
+      <details
+        class="dusk-error-details dusk-error-details__details"
       >
-        Error: some error message
-      </pre>
-    </div>
-    
-    <!--&lt;Card&gt;-->
-    
+        <summary
+          class="dusk-error-details__summary"
+        >
+          Error getting transactions
+        </summary>
+         
+        <pre
+          class="dusk-error-details__error"
+        >
+          			
+          some error message
+          
+		
+        </pre>
+      </details>
+      
+      <!--&lt;ErrorDetails&gt;-->
+       
+      <footer
+        class="transactions__footer s-j8yKepzodVZ-"
+      >
+        <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"
+        >
+          <span
+            class="dusk-anchor-button__text"
+          >
+            View all transactions
+          </span>
+          
+        </a>
+        <!--&lt;Anchor&gt;-->
+        <!--&lt;AnchorButton&gt;-->
+      </footer>
+    </article>
+    <!--&lt;Transactions&gt;-->
   </div>
   <!--&lt;+page&gt;-->
 </div>
@@ -745,29 +775,62 @@ exports[`Dashboard > should render the dashboard page and show a throbber while
       </div>
     </article>
      
-    
-    <svg
-      class="dusk-throbber loading"
-      height="64px"
-      role="progressbar"
-      viewBox="0 0 128 128"
-      width="64px"
+    <article
+      class="transactions s-j8yKepzodVZ-"
     >
-      <g>
-        <path
-          d="M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z"
-        />
-        <animatetransform
-          attributeName="transform"
-          dur="1800ms"
-          from="0 64 64"
-          repeatCount="indefinite"
-          to="360 64 64"
-          type="rotate"
-        />
-      </g>
-    </svg>
-    <!--&lt;Throbber&gt;-->
+      <header
+        class="transactions__header s-j8yKepzodVZ-"
+      >
+        <h3
+          class="h4 s-j8yKepzodVZ-"
+        >
+          Transactions
+        </h3>
+      </header>
+       
+      <svg
+        class="dusk-throbber loading"
+        height="64px"
+        role="progressbar"
+        viewBox="0 0 128 128"
+        width="64px"
+      >
+        <g>
+          <path
+            d="M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z"
+          />
+          <animatetransform
+            attributeName="transform"
+            dur="1800ms"
+            from="0 64 64"
+            repeatCount="indefinite"
+            to="360 64 64"
+            type="rotate"
+          />
+        </g>
+      </svg>
+      <!--&lt;Throbber&gt;-->
+       
+      <footer
+        class="transactions__footer s-j8yKepzodVZ-"
+      >
+        <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"
+        >
+          <span
+            class="dusk-anchor-button__text"
+          >
+            View all transactions
+          </span>
+          
+        </a>
+        <!--&lt;Anchor&gt;-->
+        <!--&lt;AnchorButton&gt;-->
+      </footer>
+    </article>
+    <!--&lt;Transactions&gt;-->
   </div>
   <!--&lt;+page&gt;-->
 </div>
@@ -1133,14 +1196,12 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
      
     <article
       class="transactions s-j8yKepzodVZ-"
-      style="animation: __svelte_3516408220_0 400ms linear 0ms 1 both;"
     >
       <header
         class="transactions__header s-j8yKepzodVZ-"
       >
         <h3
-          class="h4 s-qpUp5WgwgSGx"
-          slot="heading"
+          class="h4 s-j8yKepzodVZ-"
         >
           Transactions
         </h3>
@@ -1214,7 +1275,7 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
              
             <svg
               class="dusk-icon dusk-icon--size--normal transactions-list__icon"
-              data-tooltip-id="transactions-tooltip"
+              data-tooltip-id="main-tooltip"
               data-tooltip-place="top"
               data-tooltip-text="DUSK"
               role="graphics-symbol"
@@ -1240,7 +1301,7 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
              
             <svg
               class="dusk-icon dusk-icon--size--normal transactions-list__icon"
-              data-tooltip-id="transactions-tooltip"
+              data-tooltip-id="main-tooltip"
               data-tooltip-place="top"
               data-tooltip-text="DUSK"
               role="graphics-symbol"
@@ -1320,7 +1381,7 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
              
             <svg
               class="dusk-icon dusk-icon--size--normal transactions-list__icon"
-              data-tooltip-id="transactions-tooltip"
+              data-tooltip-id="main-tooltip"
               data-tooltip-place="top"
               data-tooltip-text="DUSK"
               role="graphics-symbol"
@@ -1400,7 +1461,7 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
              
             <svg
               class="dusk-icon dusk-icon--size--normal transactions-list__icon"
-              data-tooltip-id="transactions-tooltip"
+              data-tooltip-id="main-tooltip"
               data-tooltip-place="top"
               data-tooltip-text="DUSK"
               role="graphics-symbol"
@@ -1480,7 +1541,7 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
              
             <svg
               class="dusk-icon dusk-icon--size--normal transactions-list__icon"
-              data-tooltip-id="transactions-tooltip"
+              data-tooltip-id="main-tooltip"
               data-tooltip-place="top"
               data-tooltip-text="DUSK"
               role="graphics-symbol"
@@ -1506,7 +1567,7 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
              
             <svg
               class="dusk-icon dusk-icon--size--normal transactions-list__icon"
-              data-tooltip-id="transactions-tooltip"
+              data-tooltip-id="main-tooltip"
               data-tooltip-place="top"
               data-tooltip-text="DUSK"
               role="graphics-symbol"
@@ -1586,7 +1647,7 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
              
             <svg
               class="dusk-icon dusk-icon--size--normal transactions-list__icon"
-              data-tooltip-id="transactions-tooltip"
+              data-tooltip-id="main-tooltip"
               data-tooltip-place="top"
               data-tooltip-text="DUSK"
               role="graphics-symbol"
@@ -1609,9 +1670,8 @@ 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 view-transactions"
+          class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--normal transactions__footer-button"
           href="/dashboard/transactions"
-          slot="controls"
         >
           <span
             class="dusk-anchor-button__text"
@@ -1624,20 +1684,7 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
         <!--&lt;AnchorButton&gt;-->
       </footer>
     </article>
-     
-     
-    <div
-      aria-hidden="true"
-      class="dusk-tooltip dusk-tooltip-top dusk-tooltip-info"
-      id="transactions-tooltip"
-      role="tooltip"
-      style="left: 0px; top: 0px;"
-    >
-      
-    </div>
-    <!--&lt;Tooltip&gt;-->
     <!--&lt;Transactions&gt;-->
-    
   </div>
   <!--&lt;+page&gt;-->
 </div>
diff --git a/web-wallet/src/routes/(app)/dashboard/transactions/+page.svelte b/web-wallet/src/routes/(app)/dashboard/transactions/+page.svelte
index c2c44870bf..28187909ab 100644
--- a/web-wallet/src/routes/(app)/dashboard/transactions/+page.svelte
+++ b/web-wallet/src/routes/(app)/dashboard/transactions/+page.svelte
@@ -1,11 +1,8 @@
 <svelte:options immutable={true}/>
 
 <script>
-	import { mdiArrowLeft } from "@mdi/js";
 	import { Balance, Transactions } from "$lib/components";
-	import { AnchorButton, Card, Throbber } from "$lib/dusk/components";
 	import { settingsStore, walletStore } from "$lib/stores";
-	import { sortByHeightDesc } from "$lib/transactions";
 
 	/** @type {import('./$types').PageData} */
 	export let data;
@@ -27,29 +24,7 @@
 		tokens={balance.value}
 	/>
 
-	{#await walletStore.getTransactionsHistory()}
-		<Throbber className="loading"/>
-	{:then transactions}
-		{#if transactions.length}
-			<Transactions transactions={sortByHeightDesc(transactions)}>
-				<h3 class="h4" slot="heading">Transactions</h3>
-			</Transactions>
-		{:else}
-			<Card heading="Transactions">
-				<p>You have no transaction history</p>
-			</Card>
-		{/if}
-	{:catch e}
-		<Card heading="Error getting transactions">
-			<pre>{e}</pre>
-		</Card>
-	{/await}
-	<AnchorButton
-		href="/dashboard"
-		text="Back"
-		variant="tertiary"
-		icon={{ path: mdiArrowLeft }}
-	/>
+	<Transactions items={walletStore.getTransactionsHistory()} {language}/>
 </div>
 
 <style lang="postcss">
@@ -61,8 +36,4 @@
 		overflow-y: auto;
 		flex: 1;
 	}
-
-	:global(.loading) {
-		align-self: center;
-	}
 </style>
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 816d529479..3d3dbe8c74 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
@@ -69,56 +69,73 @@ exports[`Dashboard > should render the transactions page 1`] = `
     </article>
     <!--&lt;Balance&gt;-->
      
-    <svg
-      class="dusk-throbber loading"
-      height="64px"
-      role="progressbar"
-      viewBox="0 0 128 128"
-      width="64px"
-    >
-      <g>
-        <path
-          d="M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z"
-        />
-        <animatetransform
-          attributeName="transform"
-          dur="1800ms"
-          from="0 64 64"
-          repeatCount="indefinite"
-          to="360 64 64"
-          type="rotate"
-        />
-      </g>
-    </svg>
-    <!--&lt;Throbber&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="/dashboard"
+    <article
+      class="transactions s-j8yKepzodVZ-"
     >
-      <svg
-        class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
-        role="graphics-symbol"
-        viewBox="0 0 24 24"
+      <header
+        class="transactions__header s-j8yKepzodVZ-"
       >
-        <path
-          d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
-        />
-      </svg>
-      
-      <!--&lt;Icon&gt;-->
+        <h3
+          class="h4 s-j8yKepzodVZ-"
+        >
+          Transactions
+        </h3>
+      </header>
        
-      <span
-        class="dusk-anchor-button__text"
+      <details
+        class="dusk-error-details dusk-error-details__details"
       >
-        Back
-      </span>
-      
+        <summary
+          class="dusk-error-details__summary"
+        >
+          Error getting transactions
+        </summary>
+         
+        <pre
+          class="dusk-error-details__error"
+        >
+          			
+          No wallet instance to sync
+          
+		
+        </pre>
+      </details>
       
-    </a>
-    <!--&lt;Anchor&gt;-->
-    <!--&lt;AnchorButton&gt;-->
+      <!--&lt;ErrorDetails&gt;-->
+       
+      <footer
+        class="transactions__footer s-j8yKepzodVZ-"
+      >
+        <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"
+        >
+          <svg
+            class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
+            role="graphics-symbol"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
+            />
+          </svg>
+          
+          <!--&lt;Icon&gt;-->
+           
+          <span
+            class="dusk-anchor-button__text"
+          >
+            Back
+          </span>
+          
+          
+        </a>
+        <!--&lt;Anchor&gt;-->
+        <!--&lt;AnchorButton&gt;-->
+      </footer>
+    </article>
+    <!--&lt;Transactions&gt;-->
   </div>
   <!--&lt;+page&gt;-->
 </div>
diff --git a/web-wallet/src/routes/(app)/dashboard/transactions/__tests__/page.spec.js b/web-wallet/src/routes/(app)/dashboard/transactions/__tests__/page.spec.js
index d30a6c26cc..0aa66eb81b 100644
--- a/web-wallet/src/routes/(app)/dashboard/transactions/__tests__/page.spec.js
+++ b/web-wallet/src/routes/(app)/dashboard/transactions/__tests__/page.spec.js
@@ -1,15 +1,25 @@
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, render } from "@testing-library/svelte";
 import Transactions from "../+page.svelte";
 
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+	observe: vi.fn(),
+	unobserve: vi.fn(),
+	disconnect: vi.fn()
+}));
+
+vi.useFakeTimers();
+
 describe("Dashboard", () => {
 	afterEach(cleanup);
 
 	const currentPrice = { usd: 0.5 };
 
-	it("should render the transactions page", () => {
+	it("should render the transactions page", async () => {
 		const { container } = render(Transactions, { data: { currentPrice } });
 
+		await vi.advanceTimersToNextTimerAsync();
+
 		expect(container.firstChild).toMatchSnapshot();
 	});
 });