diff --git a/src/routes/[network]/(account)/account/+layout.svelte b/src/routes/[network]/(account)/account/+layout.svelte
index a838b0ded..ca60cb323 100644
--- a/src/routes/[network]/(account)/account/+layout.svelte
+++ b/src/routes/[network]/(account)/account/+layout.svelte
@@ -2,8 +2,14 @@
 	import { page } from '$app/stores';
 	import { Stack } from '$lib/components/layout';
 	import PillGroup from '$lib/components/navigation/pillgroup.svelte';
+	import Pageheader from '$lib/components/pageheader.svelte';
 
-    const { data, children } = $props();
+	import type { UnicoveContext } from '$lib/state/client.svelte';
+	import { getContext } from 'svelte';
+
+	const context = getContext<UnicoveContext>('state');
+
+	const { data, children } = $props();
 
 	const tabOptions = $derived.by(() => {
 		const network = String(data.network);
@@ -15,22 +21,21 @@
 		];
 	});
 
-	let currentTab = $derived($page.url.pathname.split('/').slice(2)[3]);
-
-	// Derive the active state of each destination
+	let currentTab = $derived($page.url.pathname.split('/').pop() || 'overview');
 	let options = $derived(
 		tabOptions.map((option) => ({
 			...option,
-			active: option.href.split('/').slice(2)[2] === currentTab
+			active: (option.href.split('/').pop() || 'overview') === currentTab
 		}))
 	);
+
+	const subtitle = $derived(context.account?.name ? String(context.account.name) : '');
 </script>
 
-<header class="layout-stack gap-6">
-	<Stack class="gap-2">
-		<h1 class="h2 leading-none text-neutral-200/60">Account</h1>
-	</Stack>
+<Stack class="gap-6">
+	<Pageheader title="Account" {subtitle} />
+
 	<PillGroup {options} class="mb-6" />
-</header>
 
-{@render children()}
+	{@render children()}
+</Stack>
diff --git a/src/routes/[network]/(account)/account/balances/+page.svelte b/src/routes/[network]/(account)/account/balances/+page.svelte
index 8a0c9736b..329ba4d5d 100644
--- a/src/routes/[network]/(account)/account/balances/+page.svelte
+++ b/src/routes/[network]/(account)/account/balances/+page.svelte
@@ -1,4 +1,79 @@
 <script lang="ts">
+	import { getContext, onMount } from 'svelte';
+	import type { UnicoveContext } from '$lib/state/client.svelte';
+	import Stack from '$lib/components/layout/stack.svelte';
+	import Button from '$lib/components/button/button.svelte';
+	import TokenTable from '../components/tokens.svelte';
+	import { TokenBalance } from '@wharfkit/session';
+	import Switcher from '$lib/components/layout/switcher.svelte';
+	import Card from '$lib/components/layout/box/card.svelte';
+	import { Asset } from '@wharfkit/antelope';
+	import type { TokenMeta } from '@wharfkit/common';
+
+	const { data } = $props();
+	const context = getContext<UnicoveContext>('state');
+
+	let totalTokenValue: Asset | undefined = $state();
+	let totalUsdValue: Asset | undefined = $state();
+	let systemTokenMeta: TokenMeta | undefined = $state();
+
+	let tokenBalances: TokenBalance[] = $state([]);
+
+	$effect(() => {
+		totalTokenValue = context.account?.balance?.total || undefined;
+		totalUsdValue = context.account?.value?.total || undefined;
+
+		if (context.account?.balances) {
+			tokenBalances = context.account.balances;
+		} else {
+			tokenBalances = [];
+		}
+
+		let systemTokenBlanace: TokenBalance | undefined = undefined;
+		if (totalTokenValue) {
+			systemTokenBlanace = tokenBalances.find((item) =>
+				item.asset.symbol.equals(totalTokenValue!.symbol)
+			);
+		}
+		systemTokenMeta = systemTokenBlanace?.metadata;
+	});
+
+	const network = $derived(String(data.network));
 </script>
 
-<div>Blances</div>
\ No newline at end of file
+<Stack>
+	<Switcher threshold="40rem" class="items-start justify-center">
+		<Card>
+			<div class="flex items-center gap-5">
+				<div class="flex h-14 w-14 items-center justify-center rounded-full bg-[#303338]">
+					{#if systemTokenMeta}
+						<img class="h-6 w-6" src={systemTokenMeta.logo} alt="LOGO" />
+					{/if}
+				</div>
+				<Stack>
+					<p>Total {totalTokenValue?.symbol.name} Balance</p>
+					<h3>{totalTokenValue?.value}</h3>
+				</Stack>
+			</div>
+		</Card>
+
+		<Card>
+			<div class="flex items-center gap-5">
+				<div class="flex h-14 w-14 items-center justify-center rounded-full bg-[#303338]">$</div>
+				<Stack>
+					<p>Total {totalUsdValue?.symbol.name} Balance</p>
+					<h3>{totalUsdValue?.value}</h3>
+				</Stack>
+			</div>
+		</Card>
+	</Switcher>
+	<TokenTable {tokenBalances}>
+		{#snippet transferIntent(data: TokenBalance)}
+			<div class="flex flex-col">
+				<Button class="text-blue-400" variant="pill" href="/{network}/send?quantity={data.asset}"
+					>Send</Button
+				>
+			</div>
+		{/snippet}
+	</TokenTable>
+</Stack>
diff --git a/src/routes/[network]/(account)/account/components/tokens.svelte b/src/routes/[network]/(account)/account/components/tokens.svelte
new file mode 100644
index 000000000..c66ee1c31
--- /dev/null
+++ b/src/routes/[network]/(account)/account/components/tokens.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { TokenBalance } from '@wharfkit/common';
+	import type { Snippet } from 'svelte';
+	interface Props {
+		transferIntent?: Snippet<[TokenBalance]>;
+		tokenBalances: TokenBalance[];
+	}
+	const { transferIntent, tokenBalances }: Props = $props();
+</script>
+
+<div class="flex flex-col text-base font-medium">
+	<div class="flex items-center justify-end gap-4 p-2">
+		<div class="flex flex-1">Token</div>
+		<div class="flex flex-1 justify-end">Amount</div>
+		<div class="flex flex-1 justify-end"></div>
+	</div>
+	<div>
+		{#snippet row(name: string, balance: TokenBalance, transferable: boolean = false)}
+			<div class="flex items-center justify-end gap-4 p-2 border-b border-white/20 last:border-0 odd:bg-black/10">
+				<div class="flex flex-1 gap-2">
+					<div class="flex h-5 w-5 items-center justify-center rounded-full bg-black">
+						{#if balance.metadata?.logo}
+							<img class="h-4 w-4" src={balance.metadata?.logo} alt="LOGO" />
+						{/if}
+					</div>
+					<span>{name}</span>
+				</div>
+				<div class="flex flex-1 justify-end">
+					{balance.asset.value}
+				</div>
+				<div class="flex flex-1 justify-end">
+					{#if transferable && transferIntent}
+						{@render transferIntent(balance)}
+					{/if}
+				</div>
+			</div>
+		{/snippet}
+
+		{#each tokenBalances as item}
+			{@render row(item.asset.symbol.name, item, true)}
+		{/each}
+	</div>
+</div>