diff --git a/React/src/app/page.tsx b/React/src/app/page.tsx
index e2f6430..4f93321 100644
--- a/React/src/app/page.tsx
+++ b/React/src/app/page.tsx
@@ -11,23 +11,44 @@ export default async function Home() {
 	console.log("Session:", session?.user);
 
 	// If no session, show sign-up and login buttons
-	if (!session) {	
-
+	if (!session) {
 		return (
 			<div className=" items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-				<main className="flex flex-row gap-[32px] row-start-2 items-center sm:items-start">
-					<a href="/auth/login?screen_hint=signup">
-						<button>Sign up</button>
-					</a>
-					<a href="/auth/login">
-						<button>Log in</button>
-					</a>
+				<main className="flex flex-row gap-4 row-start-2 items-center sm:items-start">
+
+					<button type="button" className="btn preset-filled">
+						<a href="/auth/login?screen_hint=signup">
+							<span>Sign Up</span>
+						</a>
+					</button>
+					<button type="button" className="btn preset-filled">
+						<a href="/auth/login">
+							<span>Log In</span>
+							<span>&rarr;</span>
+						</a>
+					</button>
+
 				</main>
+			</div>
+		);
+	}
+
+	return (
+		<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+			<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
+				<h1>Welcome, {session.user.name}!</h1>
+
 				<h1>fauxcall</h1>
 				<h2>set emergency contacts</h2>
-				<p>if you stop speaking or say the codeword, these contacts will be notified</p>
+				<p>
+					if you stop speaking or say the codeword, these contacts will be
+					notified
+				</p>
 				{/* form for setting codeword */}
-				<form className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start" onSubmit={(e) => e.preventDefault()}>
+				<form
+					className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start"
+					onSubmit={(e) => e.preventDefault()}
+				>
 					<input
 						type="text"
 						value={codeword}
@@ -36,11 +57,17 @@ export default async function Home() {
 						className="border border-gray-300 rounded-md p-2"
 					/>
 					<button
-					className="bg-blue-500 text-white rounded-md p-2"
-					type="submit">Set codeword</button>
+						className="bg-blue-500 text-white rounded-md p-2"
+						type="submit"
+					>
+						Set codeword
+					</button>
 				</form>
 				{/* form for adding contacts */}
-				<form className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start" onSubmit={(e) => e.preventDefault()}>
+				<form
+					className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start"
+					onSubmit={(e) => e.preventDefault()}
+				>
 					<input
 						type="text"
 						value={contacts}
@@ -50,19 +77,7 @@ export default async function Home() {
 					/>
 					<button type="submit">Set contacts</button>
 				</form>
-			</div>
-		);
-	}
 
-	return (
-		<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-			<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-				<h1>Welcome, {session.user.name}!</h1>
-				<p>
-					<a href="/auth/logout">
-						<button>Log out</button>
-					</a>
-				</p>
 			</main>
 		</div>
 	);