diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 2dfbe27..96faf53 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -6,25 +6,37 @@ export default function Page() {
 	const anonymousLoginAndStart = async () => {
 		const user = await authClient.getSession();
 		if (user.data) {
-			const _user = await authClient.signOut();
+			await authClient.signOut();
 		}
-		const _user = await authClient.signIn.anonymous();
+		await authClient.signIn.anonymous();
 		navigate("/play");
 	};
 	return (
-		<>
-			<h1 className="text-5xl text-center pb-1">Hitori Mahjong</h1>
-			<div className="flex justify-center items-center flex-col gap-4 py-4">
-				<button onClick={anonymousLoginAndStart} className="link" type="button">
-					Play as Guest
+		<div className="h-screen w-screen bg-[#1A472A] font-serif relative flex justify-center">
+			<h1 className="absolute top-1/3 text-center font-bold text-4xl tracking-widest">
+				一人麻雀
+			</h1>
+			<div className="absolute top-1/2 flex flex-col md:flex-row space-y-4 md:space-x-4">
+				<button
+					onClick={anonymousLoginAndStart}
+					type="button"
+					className="bg-yellow-600 rounded text-sm w-full md:w-30 h-10 transition-transform duration-150 hover:scale-105"
+				>
+					プレイ
 				</button>
-				<Link to="/login" className="link">
-					Login
+				<Link
+					to="/login"
+					className="bg-yellow-600 rounded text-sm w-full md:w-30 h-10 flex items-center justify-center transition-transform duration-150 hover:scale-105"
+				>
+					ログイン
 				</Link>
-				<Link to="/learn" className="link">
-					Learn How to Play
+				<Link
+					to="/learn"
+					className="bg-yellow-600 rounded text-sm w-full md:w-30 h-10 flex items-center justify-center transition-transform duration-150 hover:scale-105"
+				>
+					チュートリアル
 				</Link>
 			</div>
-		</>
+		</div>
 	);
 }