diff --git a/src/frontend/src/lib/components/transactions/TransactionsDateGroup.svelte b/src/frontend/src/lib/components/transactions/TransactionsDateGroup.svelte
new file mode 100644
index 0000000000..b78b8bb55d
--- /dev/null
+++ b/src/frontend/src/lib/components/transactions/TransactionsDateGroup.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import { SLIDE_DURATION } from '$lib/constants/transition.constants';
+	import type { AllTransactionsUi } from '$lib/types/transaction';
+
+	export let date: string;
+	export let transactions: AllTransactionsUi;
+</script>
+
+{#if transactions.length > 0}
+	<div class="mb-5 flex flex-col gap-4">
+		<span class="text-lg font-medium text-tertiary first-letter:capitalize">{date}</span>
+
+		{#each transactions as transaction, index (`${transaction.id}-${index}`)}
+			{@const { component, token } = transaction}
+
+			<div in:slide={SLIDE_DURATION}>
+				<svelte:component this={component} {transaction} {token} />
+			</div>
+		{/each}
+	</div>
+{/if}
diff --git a/src/frontend/src/tests/lib/components/transactions/TransactionsDateGroup.spec.ts b/src/frontend/src/tests/lib/components/transactions/TransactionsDateGroup.spec.ts
new file mode 100644
index 0000000000..015fbcbc9f
--- /dev/null
+++ b/src/frontend/src/tests/lib/components/transactions/TransactionsDateGroup.spec.ts
@@ -0,0 +1,82 @@
+import BtcTransaction from '$btc/components/transactions/BtcTransaction.svelte';
+import { BTC_MAINNET_TOKEN } from '$env/tokens.btc.env';
+import { ETHEREUM_TOKEN } from '$env/tokens.env';
+import EthTransaction from '$eth/components/transactions/EthTransaction.svelte';
+import TransactionsDateGroup from '$lib/components/transactions/TransactionsDateGroup.svelte';
+import type { AllTransactionsUi } from '$lib/types/transaction';
+import { createMockBtcTransactionsUi } from '$tests/mocks/btc.mock';
+import { createMockEthTransactions } from '$tests/mocks/eth-transactions.mock';
+import { render } from '@testing-library/svelte';
+
+describe('TransactionsDateGroup', () => {
+	describe('when the transactions list is empty', () => {
+		it('should render nothing', () => {
+			const { container } = render(TransactionsDateGroup, {
+				props: {
+					date: 'today',
+					transactions: []
+				}
+			});
+
+			expect(container.innerHTML).toBe('');
+		});
+	});
+
+	describe('when the transactions list is not empty', () => {
+		const btcTransactionsNumber = 5;
+		const ethTransactionsNumber = 3;
+
+		const todayTimestamp = new Date().getTime();
+
+		const mockBtcTransactionsUi: AllTransactionsUi = createMockBtcTransactionsUi(
+			btcTransactionsNumber
+		).map((transaction) => ({
+			...transaction,
+			timestamp: BigInt(todayTimestamp),
+			token: BTC_MAINNET_TOKEN,
+			component: BtcTransaction
+		}));
+
+		const mockEthTransactionsUi: AllTransactionsUi = createMockEthTransactions(
+			ethTransactionsNumber
+		).map((transaction) => ({
+			...transaction,
+			timestamp: todayTimestamp,
+			id: transaction.hash,
+			uiType: 'send',
+			token: ETHEREUM_TOKEN,
+			component: EthTransaction
+		}));
+
+		const mockTransactions: AllTransactionsUi = [
+			...mockBtcTransactionsUi,
+			...mockEthTransactionsUi
+		];
+
+		it('should render the date', () => {
+			const { getByText } = render(TransactionsDateGroup, {
+				props: {
+					date: 'today',
+					transactions: mockTransactions
+				}
+			});
+
+			expect(getByText('today')).toBeInTheDocument();
+		});
+
+		it('should render the transactions list', () => {
+			const { container } = render(TransactionsDateGroup, {
+				props: {
+					date: 'today',
+					transactions: mockTransactions
+				}
+			});
+
+			const transactionComponents = Array.from(container.querySelectorAll('div')).filter(
+				(el) => el.parentElement?.parentElement === container
+			);
+
+			expect(transactionComponents).toHaveLength(btcTransactionsNumber + ethTransactionsNumber);
+		});
+	});
+});