diff --git a/app/[gameID]/page.tsx b/app/[gameID]/page.tsx
index d873fda..ca4033f 100644
--- a/app/[gameID]/page.tsx
+++ b/app/[gameID]/page.tsx
@@ -24,7 +24,7 @@ export default function GamePage() {
 	return noGame ? (
 		<NotFound />
 	) : (
-		<main className="min-h-screen flex flex-col items-center justify-center gap-4 bg-[url('/img/table3.png')] bg-cover bg-center">
+		<main className="h-dvh flex flex-col items-center justify-center gap-4 bg-[url('/img/table3.png')] bg-cover bg-center">
 			<SpectatorLink />
 			<Settings />
 			<TarokkaGrid />
diff --git a/app/layout.tsx b/app/layout.tsx
index 8ac517f..7c465bb 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -25,8 +25,8 @@ export default function RootLayout({
 	children: React.ReactNode;
 }>) {
 	return (
-		<html lang="en" className={`${eagleLake.variable} antialiased`}>
-			<body className={`${eagleLake.className} antialiased`}>
+		<html lang="en" className={`${eagleLake.variable} antialiased overscroll-none`}>
+			<body className={`${eagleLake.className} antialiased h-dvh`}>
 				<AppProvider>{children}</AppProvider>
 			</body>
 		</html>
diff --git a/app/page.tsx b/app/page.tsx
index 47667ff..bec5cba 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -16,7 +16,7 @@ export default function Home() {
 	};
 
 	return (
-		<main className="min-h-screen flex justify-center items-center text-yellow-400 bg-[url('/img/table3.png')] bg-cover bg-center">
+		<main className="flex justify-center items-center h-dvh text-yellow-400 bg-[url('/img/table3.png')] bg-cover bg-center">
 			<div className="flex flex-col items-center gap-8 text-center">
 				<h1 className="text-5xl font-bold text-center text-primary">Tarokka</h1>
 				<p className="text-l text-center w-[350px] m-auto">
diff --git a/components/Card.tsx b/components/Card.tsx
index 77a6103..dc469fc 100644
--- a/components/Card.tsx
+++ b/components/Card.tsx
@@ -54,7 +54,7 @@ export default function Card({ card, cardIndex }: CardProps) {
 	return (
 		<ToolTip content={tooltip || getTooltip()}>
 			<TiltCard
-				className={`h-[21vh] w-[15vh] relative perspective transition-transform duration-200 z-0 hover:z-10 hover:scale-150 ${isDM ? 'cursor-pointer' : ''} `}
+				className={`h-[21vh] w-[15vh] max-w-[30vw] relative perspective transition-transform duration-200 z-0 hover:z-10 hover:scale-150 ${isDM ? 'cursor-pointer' : ''} `}
 				cardIndex={cardIndex}
 			>
 				<div
diff --git a/components/TarokkaGrid.tsx b/components/TarokkaGrid.tsx
index 2b06deb..f869e0e 100644
--- a/components/TarokkaGrid.tsx
+++ b/components/TarokkaGrid.tsx
@@ -15,7 +15,7 @@ export default function TarokkaGrid() {
 	const arrangeCards = (_cell: unknown, index: number) => cards[cardMap[index]];
 
 	return (
-		<div className="grid grid-cols-3 grid-rows-3 gap-8 w-fit mx-auto">
+		<div className="grid grid-cols-3 grid-rows-3 gap-2 sm:gap-4 md:gap-8 w-fit mx-auto">
 			{Array.from({ length: 9 })
 				.map(arrangeCards)
 				.map((card, index) => (
