diff --git a/src/routes/private/home/+page.svelte b/src/routes/private/home/+page.svelte
index c9febf3..c6a5feb 100644
--- a/src/routes/private/home/+page.svelte
+++ b/src/routes/private/home/+page.svelte
@@ -2,53 +2,75 @@
 	let { data } = $props();
 </script>
 
-<h1 class="mt-2 mb-4 text-center text-2xl font-bold">User Profile</h1>
+<div class="p-4 sm:p-6">
+	<h1 class="mb-6 text-2xl font-bold text-gray-800">User Dashboard</h1>
 
-<div class="mb-4 rounded border border-gray-300 bg-white p-6">
-	<div class="flex flex-col gap-2">
-		<div class="rounded-lg overflow-hidden border border-gray-200">
-			<div class="bg-gray-50 p-4 flex items-center gap-4 border-b border-gray-200">
-				<div
-					class="flex h-14 w-14 items-center justify-center rounded-full bg-gray-200 text-xl font-bold text-gray-600 flex-shrink-0"
-				>
-					{data.user?.user_metadata.display_name?.[0] ?? 'U'}
+	<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+		<!-- Left Column: User Profile -->
+		<div class="lg:col-span-1">
+			<div class="flex h-full flex-col rounded-lg border border-gray-300 bg-white p-6">
+				<div class="flex flex-grow flex-col items-center text-center">
+					<div
+						class="mb-4 flex h-24 w-24 items-center justify-center rounded-full bg-gray-200 text-4xl font-bold text-gray-600"
+					>
+						{data.profile?.display_name?.[0]?.toUpperCase() ?? 'U'}
+					</div>
+					<h2 class="text-xl font-semibold text-gray-900">{data.profile?.display_name}</h2>
+					<p class="text-sm text-gray-500">{data.user?.email}</p>
 				</div>
-				<div class="flex flex-col">
-					<span class="text-lg font-semibold text-gray-800">{data.profile?.display_name}</span>
-					<div class="text-sm text-gray-500">{data.user?.email}</div>
+				<div class="mt-6 text-center">
+					<a
+						href="/auth/signout"
+						class="text-sm text-red-500 transition hover:text-red-700 hover:underline"
+						>Sign Out</a
+					>
 				</div>
 			</div>
-			<table class="min-w-full">
-				<tbody class="divide-y divide-gray-200 bg-white">
-					<tr>
-						<td class="whitespace-nowrap px-4 py-3 font-medium text-gray-700 w-1/3">Section</td>
-						<td class="whitespace-nowrap px-4 py-3 text-gray-900">{data.profile?.section?.name ?? 'N/A'}</td>
-					</tr>
-					<tr>
-						<td class="whitespace-nowrap px-4 py-3 font-medium text-gray-700 w-1/3">Position</td>
-						<td class="whitespace-nowrap px-4 py-3 text-gray-900">{data.profile?.section_position ?? 'N/A'}</td>
-					</tr>
-				</tbody>
-			</table>
 		</div>
-		<h2 class="mt-4 mb-2 text-lg">User guide</h2>
-		<p class="text-sm leading-relaxed text-gray-700">
-			To scan a QR code, head over to Scanner in the top right corner. Click on Start scanning and
-			allow camera permissions. If you close and open your browser and your camera is stuck, simply
-			refresh the page or click Stop scanning and then Start scanning again. When you scan a QR
-			code, a request is sent to the server to get the user's personal information and to mark their
-			tickets as scanned.
-		</p>
-		{#if data.profile?.section_position === 'events_manager'}
-			<h2 class="mt-4 mb-2 text-lg">Events manager guide</h2>
-			<p class="text-sm leading-relaxed text-gray-700">You can view events</p>
-		{/if}
+
+		<!-- Right Column: Information -->
+		<div class="space-y-6 lg:col-span-2">
+			<!-- Role Information -->
+			<div class="rounded-lg border border-gray-300 bg-white p-6">
+				<h2 class="mb-4 text-lg font-semibold text-gray-900">Your Role</h2>
+				<dl class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">
+					<div class="sm:col-span-1">
+						<dt class="text-sm font-medium text-gray-500">Section</dt>
+						<dd class="mt-1 text-sm font-semibold text-gray-900">
+							{data.profile?.section?.name ?? 'N/A'}
+						</dd>
+					</div>
+					<div class="sm:col-span-1">
+						<dt class="text-sm font-medium text-gray-500">Position</dt>
+						<dd class="mt-1 text-sm font-semibold text-gray-900">
+							{data.profile?.section_position ?? 'N/A'}
+						</dd>
+					</div>
+				</dl>
+			</div>
+
+			<!-- User Guide -->
+			<div class="rounded-lg border border-gray-300 bg-white p-6">
+				<h2 class="mb-2 text-lg font-semibold text-gray-900">User Guide</h2>
+				<p class="text-sm leading-relaxed text-gray-700">
+					To scan a QR code, head over to <strong>Scanner</strong> in the top right corner. Click
+					on "Start Scanning" and allow camera permissions. If your camera gets stuck, simply
+					refresh the page or click "Stop Scanning" and then "Start Scanning" again. When you scan
+					a QR code, the participant's ticket is automatically marked as scanned.
+				</p>
+			</div>
+
+			<!-- Events Manager Guide -->
+			{#if data.profile?.section_position === 'events_manager'}
+				<div class="rounded-lg border border-gray-300 bg-white p-6">
+					<h2 class="mb-2 text-lg font-semibold text-gray-900">Events Manager Guide</h2>
+					<p class="text-sm leading-relaxed text-gray-700">
+						As an Events Manager, you have access to the <strong>Events</strong> section. Here you
+						can create new events, manage participants by syncing with Google Sheets, send email
+						invitations with QR codes, and view event statistics.
+					</p>
+				</div>
+			{/if}
+		</div>
 	</div>
 </div>
-
-<a
-	href="/auth/signout"
-	class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-full border border-gray-300 bg-red-500 px-8 py-3 font-semibold text-white shadow-none transition hover:bg-red-600"
->
-	Sign out
-</a>