diff --git a/src/routes/private/home/+page.svelte b/src/routes/private/home/+page.svelte
index c6a5feb..e36b5e3 100644
--- a/src/routes/private/home/+page.svelte
+++ b/src/routes/private/home/+page.svelte
@@ -2,75 +2,72 @@
 	let { data } = $props();
 </script>
 
-<div class="p-4 sm:p-6">
-	<h1 class="mb-6 text-2xl font-bold text-gray-800">User Dashboard</h1>
+<h1 class="mt-2 mb-4 text-center text-2xl font-bold">User Dashboard</h1>
 
-	<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="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 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>
-
-		<!-- 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 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>
-
-			<!-- 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>
+
+	<!-- 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>
diff --git a/src/routes/private/scanner/QRScanner.svelte b/src/routes/private/scanner/QRScanner.svelte
index fe8cd90..2d9deaf 100644
--- a/src/routes/private/scanner/QRScanner.svelte
+++ b/src/routes/private/scanner/QRScanner.svelte
@@ -45,9 +45,9 @@
     });
 </script>
 
-<div id="qr-scanner" class="w-full h-full max-w-none overflow-hidden rounded-lg border border-gray-300"></div>
+<div id="qr-scanner" class="w-full h-full max-w-none overflow-hidden rounded"></div>
 
-<style>
+<style lang="postcss"> 
     /* Hide unwanted icons */
     #qr-scanner :global(img[alt='Info icon']),
     #qr-scanner :global(img[alt='Camera based scan']) {
@@ -58,21 +58,51 @@
         color: black !important;
     }
 
-    /* Change camera permission button text */
-    #qr-scanner :global(#html5-qrcode-button-camera-permission) {
-        visibility: hidden;
-    }
-    #qr-scanner :global(#html5-qrcode-button-camera-permission::after) {
-        position: absolute;
-        inset: auto 0 0;
-        display: block;
-        content: 'Allow camera access';
-        visibility: visible;
-        padding: 10px 0;
-    }
-
     #qr-scanner :global(#qr-scanner__scan_region) {
         min-height: auto !important;
         aspect-ratio: 1 !important;
     }
+
+    #qr-scanner :global(button.html5-qrcode-element) {
+        border-radius: 0.375rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+        background-color: #2563eb;
+        color: #fff;
+        font-weight: 500;
+        transition-property: background-color, border-color, color, fill, stroke;
+        transition-duration: 150ms;
+        outline: none;
+        }
+
+    #qr-scanner :global(button.html5-qrcode-element:hover) {
+    background-color: #1d4ed8;
+    }
+
+    #qr-scanner :global(button.html5-qrcode-element:focus) {
+    box-shadow: 0 0 0 2px #60a5fa, 0 0 0 4px #fff;
+    }
+    #qr-scanner :global(input) {
+        border-radius: 0.375rem; /* rounded-md */
+        border-width: 1px;
+        border-color: #d1d5db; /* border-gray-300 */
+        padding-left: 1rem; /* px-4 */
+        padding-right: 1rem;
+        padding-top: 0.5rem; /* py-2 */
+        padding-bottom: 0.5rem;
+        background-color: #f9fafb; /* bg-gray-50 */
+        color: #111827; /* text-gray-900 */
+        font-size: 1rem;
+        line-height: 1.5rem;
+        outline: none;
+        transition-property: border-color, box-shadow;
+        transition-duration: 150ms;
+    }
+
+    #qr-scanner :global(input:focus) {
+        border-color: #2563eb; /* border-blue-600 */
+        box-shadow: 0 0 0 2px #60a5fa;
+    }
 </style>
\ No newline at end of file