diff --git a/src/routes/[network]/(account)/signup/+page.svelte b/src/routes/[network]/(account)/signup/+page.svelte
index ce9f83f2..e85930cc 100644
--- a/src/routes/[network]/(account)/signup/+page.svelte
+++ b/src/routes/[network]/(account)/signup/+page.svelte
@@ -1,27 +1,121 @@
 <script lang="ts">
-	import Button from '$lib/components/button/button.svelte';
-	import { goto } from '$app/navigation';
+	import * as m from '$lib/paraglide/messages.js';
+	import PillGroup from '$lib/components/navigation/pillgroup.svelte';
 	import { page } from '$app/stores';
+	import Pageheader from '$lib/components/pageheader.svelte';
+	import Stack from '$lib/components/layout/stack.svelte';
+	import Button from '$lib/components/button/button.svelte';
+
+	const { data } = $props();
+
+	const walletTypes = {
+		// webAuths: {
+		// 	title: 'Web Authenticators',
+		// 	description:
+		// 		"Web Authenticators are convenient wallet options that don't require any installation.",
+		// 	benefits: [
+		// 		'No software installation needed',
+		// 		'Access your account from any device with a web browser',
+		// 		'Secure and easy to use'
+		// 	],
+		// 	wallets: [{ name: 'Anchor Web', route: 'anchor' }]
+		// },
+		hardWallets: {
+			title: 'Hardware Wallets',
+			description: 'Hardware wallets are physical devices that securely store your private keys.',
+			benefits: [
+				'Highest level of security',
+				'Offline storage of private keys',
+				'Support for multiple cryptocurrencies'
+			],
+			wallets: [{ name: 'Ledger', route: 'ledger' }]
+		},
+		softWallets: {
+			title: 'Soft Wallets',
+			description:
+				'Software wallets are applications you install on your computer or mobile device.',
+			benefits: [
+				'Easy to use and set up',
+				'Convenient for frequent transactions',
+				'Often free to download and use'
+			],
+			wallets: [
+				{ name: 'Anchor', route: 'anchor' },
+				{ name: 'Wombat', route: 'wombat' },
+				{ name: 'TokenPocket', route: 'tokenpocket' }
+			]
+		},
+		extensions: {
+			title: 'Browser Extensions',
+			description:
+				'Browser extension wallets integrate directly with your web browser for easy access.',
+			benefits: [
+				'Seamless integration with web applications',
+				'Quick access from your browser',
+				'Easy to use for web3 interactions'
+			],
+			wallets: [{ name: 'MetaMask', route: 'metamask' }]
+		}
+	};
+
+	const tabOptions = $derived.by(() => {
+		const network = String(data.network);
+		return Object.entries(walletTypes).map(([key, value]) => ({
+			href: `/${network}/signup/${key}`,
+			text: value.title
+		}));
+	});
+
+	let currentTab = $derived($page.url.pathname.split('/')[3] || 'webAuths');
 
-	$: network = $page.params.network;
+	let options = $derived(
+		tabOptions.map((option) => ({
+			...option,
+			active: option.href.split('/')[3] === currentTab
+		}))
+	);
 
-	$: signupMethods = [
-		{ name: 'Anchor', route: `/${network}/anchor` },
-		{ name: 'MetaMask', route: `/${network}/metamask` },
-		{ name: 'TokenPocket', route: `/${network}/tokenpocket` },
-		{ name: 'Wombat', route: `/${network}/wombat` }
-	];
+	let currentWalletType = $derived(walletTypes[currentTab as keyof typeof walletTypes]);
 </script>
 
-<div class="container mx-auto p-4">
-	<h1 class="mb-4 text-2xl font-bold">Signup</h1>
-	<p class="mb-4">Signup Methods:</p>
+<Stack>
+	<Pageheader title="Sign Up" subtitle="Create your account" />
+
+	<div class="mb-6">
+		<h2 class="mb-4 text-xl font-semibold">Why do I need a wallet?</h2>
+		<p class="mb-4">
+			A wallet is your gateway to the blockchain, allowing you to manage your digital assets and
+			interact with decentralized applications.
+		</p>
+		<h2 class="mb-4 text-xl font-semibold">Why do I need an account?</h2>
+		<p class="mb-4">
+			An account on the blockchain is your unique identity, enabling you to perform transactions,
+			store assets, and participate in the network.
+		</p>
+	</div>
+
+	<PillGroup {options} class="mb-6" />
+
+	<div class="container mx-auto p-4">
+		<h1 class="mb-4 text-2xl font-bold">Sign Up with {currentWalletType.title}</h1>
+		<p class="mb-4">{currentWalletType.description}</p>
+
+		<h2 class="mb-2 text-xl font-semibold">Benefits:</h2>
+		<ul class="mb-6 list-disc pl-5">
+			{#each currentWalletType.benefits as benefit}
+				<li>{benefit}</li>
+			{/each}
+		</ul>
 
-	<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-		{#each signupMethods as method}
-			<div class="card rounded-lg border p-4">
-				<a href={method.route} class="mb-2 text-xl font-semibold">{method.name}</a>
-			</div>
-		{/each}
+		<h2 class="mb-2 text-xl font-semibold">Available Wallets:</h2>
+		<ul class="mb-6 list-disc pl-5">
+			{#each currentWalletType.wallets as wallet}
+				<li>
+					<Button href="/{data.network}/{wallet.route}">
+						{wallet.name}
+					</Button>
+				</li>
+			{/each}
+		</ul>
 	</div>
-</div>
+</Stack>
diff --git a/src/routes/[network]/(account)/signup/[walletType]/+page.svelte b/src/routes/[network]/(account)/signup/[walletType]/+page.svelte
deleted file mode 100644
index 3041fbcf..00000000
--- a/src/routes/[network]/(account)/signup/[walletType]/+page.svelte
+++ /dev/null
@@ -1,66 +0,0 @@
-<script lang="ts">
-	import { page } from '$app/stores';
-	import Button from '$lib/components/button/button.svelte';
-	import Pill from '$lib/components/pill/pill.svelte';
-
-	$: network = $page.params.network;
-	$: walletType = $page.params.walletType;
-
-	const walletTypes = {
-		webAuths: {
-			title: 'Sign Up with Web Authenticators',
-			description:
-				"Web Authenticators are convenient wallet options that don't require any installation.",
-			benefits: [
-				'No software installation needed',
-				'Access your account from any device with a web browser',
-				'Secure and easy to use'
-			]
-		},
-		hardWallets: {
-			title: 'Sign Up with Hardware Wallets',
-			description: 'Hardware wallets are physical devices that securely store your private keys.',
-			benefits: [
-				'Highest level of security',
-				'Offline storage of private keys',
-				'Support for multiple cryptocurrencies'
-			]
-		},
-		softWallets: {
-			title: 'Sign Up with Software Wallets',
-			description:
-				'Software wallets are applications you install on your computer or mobile device.',
-			benefits: [
-				'Easy to use and set up',
-				'Convenient for frequent transactions',
-				'Often free to download and use'
-			]
-		},
-		extensions: {
-			title: 'Sign Up with Browser Extensions',
-			description:
-				'Browser extension wallets integrate directly with your web browser for easy access.',
-			benefits: [
-				'Seamless integration with web applications',
-				'Quick access from your browser',
-				'Easy to use for web3 interactions'
-			]
-		}
-	};
-
-	$: currentWalletInfo = walletTypes[walletType as keyof typeof walletTypes];
-</script>
-
-<div class="container mx-auto p-4">
-	<h1 class="mb-4 text-2xl font-bold">{currentWalletInfo.title}</h1>
-	<p class="mb-4">{currentWalletInfo.description}</p>
-
-	<h2 class="mb-2 text-xl font-semibold">Benefits:</h2>
-	<ul class="mb-6 list-disc pl-5">
-		{#each currentWalletInfo.benefits as benefit}
-			<li>{benefit}</li>
-		{/each}
-	</ul>
-
-	<Button href="/{network}/{walletType}-signup" variant="primary">Sign Up with {walletType}</Button>
-</div>