diff --git a/React/src/app/page.tsx b/React/src/app/page.tsx
index b9a7dc2..fcd37b0 100644
--- a/React/src/app/page.tsx
+++ b/React/src/app/page.tsx
@@ -17,26 +17,26 @@ export default async function Home() {
 			<div className="space-y-7 bg-indigo-800 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="space-x-2 flex flex-row gap-[32px] row-start-2 items-center sm:items-start">
 					<a href="/auth/login?screen_hint=signup">
-						<button className="box-content w-32 border-2 h-16 text-2xl bg-indigo-900 text-green-300">Sign up</button>
+						<button className="box-content w-32 border-2 h-16 text-2xl bg-violet-900 text-green-300">Sign up</button>
 					</a>
 					<a href="/auth/login">
-						<button className = "box-content w-32 border-2 h-16 text-2xl bg-indigo-900 text-green-400">Log in</button>
+						<button className = "box-content w-32 border-2 h-16 text-2xl bg-violet-900 text-green-400">Log in</button>
 					</a>
 				</main>
-				<h1 className="space-y-3 text-6xl text-blue-500 subpixel-antialiased font-stretch-semi-expanded font-serif">Fauxcall</h1>
-				<h2 className="space-y-3 text-6x1 text-red-300 antialiased  font-mono">Set emergency contacts</h2>
-				<p>if you stop speaking or say the codeword, these contacts will be notified</p>
+				<h1 className="space-y-3 text-6xl text-lime-500 subpixel-antialiased font-stretch-semi-expanded font-serif">Fauxcall</h1>
+				<h2 className="space-y-3 text-6x1 text-red-700 antialiased font-mono">Set emergency contacts</h2>
+				<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()}>
 					<input
 						type="text"
 						value={codeword}
 						onChange={(e) => setCodeword(e.target.value)}
-						placeholder="codeword"
+						placeholder="Codeword"
 						className="border border-gray-300 rounded-md p-2"
 					/>
 					<button
-					className="bg-blue-500 text-white rounded-md p-2"
+					className="bg-blue-500 text-white font-semibold font-lg rounded-md p-2"
 					type="submit">Set codeword</button>
 				</form>
 				{/* form for adding contacts */}
@@ -48,7 +48,7 @@ export default async function Home() {
 						placeholder="contacts (comma separated)"
 						className="border border-gray-300 rounded-md p-2"
 					/>
-					<button type="submit">Set contacts</button>
+					<button className="bg-slate-500 text-yellow-300 text-stretch-50% font-lg rounded-md p-2" type="submit">Set contacts</button>
 				</form>
 			</div>
 		);
@@ -58,6 +58,35 @@ export default async function Home() {
 		<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 className="space-y-3 text-6xl text-lime-500 subpixel-antialiased font-stretch-semi-expanded font-serif">Fauxcall</h1>
+					<h2 className="space-y-3 text-6x1 text-red-700 antialiased font-mono">Set emergency contacts</h2>
+					<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()}>
+						<input
+							type="text"
+							value={codeword}
+							onChange={(e) => setCodeword(e.target.value)}
+							placeholder="Codeword"
+							className="border border-gray-300 rounded-md p-2"
+						/>
+						<button
+						className="bg-blue-500 text-white font-semibold font-lg 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()}>
+						<input
+							type="text"
+							value={contacts}
+							onChange={(e) => setContacts(e.target.value.split(","))}
+							placeholder="contacts (comma separated)"
+							className="border border-gray-300 rounded-md p-2"
+						/>
+						<button className="bg-slate-500 text-yellow-300 text-stretch-50% font-lg rounded-md p-2" type="submit">Set contacts</button>
+					</form>
+				
 				<p>
 					<a href="/auth/logout">
 						<button>Log out</button>