diff --git a/src/pages/index.astro b/src/pages/index.astro
index b0c70ee..9069e40 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,72 +1,107 @@
 ---
 import Layout from "../layouts/Layout.astro";
+import SignIn from "../components/SignIn.tsx";
+import SignOut from "../components/SignOut.tsx";
 ---
 
 <Layout title="Welcome">
-	<div class="flex flex-col gap-8 max-w-5xl mx-auto p-6">
-		<img src="/hero.jpeg" alt="" height="250" width="250" class="rounded-full mx-auto">
-		<!-- Header -->
-		<div class="text-center space-y-4">
-			<div class="text-5xl font-normal" style="font-family: 'Great Vibes', cursive;">❤️ Natasha + Ixabat ❤️</div>
-			<p class="text-xl text-gray-600">We hope you can join us in celebration on</p>
-			<p class="text-2xl font-semibold">Saturday, June 7, 2025</p>
-		</div>
+	<div id="auth-container">
+		<SignIn client:load onSuccess={() => {}} requiredRole="guest" />
+	</div>
 
-		<!-- Event Details Cards -->
-		<div class="flex flex-col md:flex-row gap-6">
-			<!-- Ceremony Card -->
-			<div class="card bg-base-100 shadow-xl flex-1">
-				<div class="card-body">
-					<h2 class="card-title text-2xl justify-center">Ceremony</h2>
-					<div class="text-center space-y-2">
-						<p class="text-xl">1:00 PM</p>
-						<p>Preston Avenue Community Church</p>
-						<p class="text-gray-600">2216 Preston Avenue, Saskatoon, SK</p>
-						<a 
-							href="https://maps.google.com/?q=2216+Preston+Avenue+Saskatoon+SK" 
-							target="_blank" 
-							class="btn btn-outline btn-sm mt-2"
-						>
-							View on Map
-						</a>
+	<div id="content-container" class="hidden">
+		<div class="flex flex-col gap-8 max-w-5xl mx-auto p-6">
+			<img src="/hero.jpeg" alt="" height="250" width="250" class="rounded-full mx-auto">
+			<!-- Header -->
+			<div class="text-center space-y-4">
+				<div class="text-5xl font-normal" style="font-family: 'Great Vibes', cursive;">❤️ Natasha + Ixabat ❤️</div>
+				<p class="text-xl text-gray-600">We hope you can join us in celebration on</p>
+				<p class="text-2xl font-semibold">Saturday, June 7, 2025</p>
+			</div>
+
+			<!-- Event Details Cards -->
+			<div class="flex flex-col md:flex-row gap-6">
+				<!-- Ceremony Card -->
+				<div class="card bg-base-100 shadow-xl flex-1">
+					<div class="card-body">
+						<h2 class="card-title text-2xl justify-center">Ceremony</h2>
+						<div class="text-center space-y-2">
+							<p class="text-xl">1:00 PM</p>
+							<p>Preston Avenue Community Church</p>
+							<p class="text-gray-600">2216 Preston Avenue, Saskatoon, SK</p>
+							<a 
+								href="https://maps.google.com/?q=2216+Preston+Avenue+Saskatoon+SK" 
+								target="_blank" 
+								class="btn btn-outline btn-sm mt-2"
+							>
+								View on Map
+							</a>
+						</div>
+					</div>
+				</div>
+
+				<!-- Reception Card -->
+				<div class="card bg-base-100 shadow-xl flex-1">
+					<div class="card-body">
+						<h2 class="card-title text-2xl justify-center">Reception</h2>
+						<div class="text-center space-y-2">
+							<p class="text-xl">5:00 PM</p>
+							<p>Saskatoon Christian School</p>
+							<p class="text-gray-600">55 Glazier Road, Corman Park, SK</p>
+							<a 
+								href="https://maps.google.com/?q=55+Glazier+Road+Corman+Park+SK" 
+								target="_blank" 
+								class="btn btn-outline btn-sm mt-2"
+							>
+								View on Map
+							</a>
+						</div>
 					</div>
 				</div>
 			</div>
 
-			<!-- Reception Card -->
-			<div class="card bg-base-100 shadow-xl flex-1">
-				<div class="card-body">
-					<h2 class="card-title text-2xl justify-center">Reception</h2>
-					<div class="text-center space-y-2">
-						<p class="text-xl">5:00 PM</p>
-						<p>Saskatoon Christian School</p>
-						<p class="text-gray-600">55 Glazier Road, Corman Park, SK</p>
-						<a 
-							href="https://maps.google.com/?q=55+Glazier+Road+Corman+Park+SK" 
-							target="_blank" 
-							class="btn btn-outline btn-sm mt-2"
-						>
-							View on Map
-						</a>
-					</div>
+			<!-- RSVP Section -->
+			<div class="text-center space-y-4">
+				<p class="text-lg">Please RSVP whether you're able to come or not by <span class="font-semibold">April 1</span></p>
+				<div class="flex flex-col sm:flex-row gap-4 justify-center">
+					<a href="/rsvp" class="btn btn-primary btn-lg">
+						RSVP Now
+					</a>
+					<a href="/registry" class="btn btn-secondary btn-lg">
+						Wedding Registry
+					</a>
+					<a href="/faq" class="btn btn-accent btn-lg">
+						FAQ
+					</a>
 				</div>
 			</div>
-		</div>
 
-		<!-- RSVP Section -->
-		<div class="text-center space-y-4">
-			<p class="text-lg">Please RSVP whether you're able to come or not by <span class="font-semibold">April 1</span></p>
-			<div class="flex flex-col sm:flex-row gap-4 justify-center">
-				<a href="/rsvp" class="btn btn-primary btn-lg">
-					RSVP Now
-				</a>
-				<a href="/registry" class="btn btn-secondary btn-lg">
-					Wedding Registry
-				</a>
-				<a href="/faq" class="btn btn-accent btn-lg">
-					FAQ
-				</a>
+			<div class="text-center mt-4">
+				<SignOut client:load />
 			</div>
 		</div>
 	</div>
 </Layout>
+
+<script>
+	import { hasRole, isAuthenticated } from "../utils/auth-client";
+
+	function updateVisibility() {
+		const authContainer = document.getElementById("auth-container");
+		const contentContainer = document.getElementById("content-container");
+
+		if (isAuthenticated() && hasRole("guest")) {
+			authContainer?.classList.add("hidden");
+			contentContainer?.classList.remove("hidden");
+		} else {
+			authContainer?.classList.remove("hidden");
+			contentContainer?.classList.add("hidden");
+		}
+	}
+
+	// Check auth state on page load
+	updateVisibility();
+
+	// Add event listener for custom event from SignIn component
+	document.addEventListener("auth-success", updateVisibility);
+</script>