diff --git a/src/app/components/bingo.tsx b/src/app/components/bingo.tsx
index bdd7a27..a952d80 100644
--- a/src/app/components/bingo.tsx
+++ b/src/app/components/bingo.tsx
@@ -13,7 +13,7 @@ export default function Bingo({size, items}: Props){
 		rows[i] = activeItems.slice(i * size, (i + 1) * size);
 	}
 	return(
-		<table className='w-1/2 table bg-primary text-primary-content m-auto'>
+		<table className='w-1/2 table table-xs sm:table-sm md:table-md bg-primary text-primary-content m-auto'>
 		<tbody>
 		{rows.map((item, index) => <BingoRow key={index} items={item}/>)}
 		</tbody>
diff --git a/src/app/components/bingoitem.tsx b/src/app/components/bingoitem.tsx
index 7e74f74..ce0349b 100644
--- a/src/app/components/bingoitem.tsx
+++ b/src/app/components/bingoitem.tsx
@@ -9,6 +9,6 @@ export default function BingoItem({text}: Props){
 	const [clicked, setClicked] = React.useState(false);
 
 	return(
-		<td><a className={clsx("btn btn-ghost w-full", {"bg-primary-focus":clicked})} onClick={() => setClicked(!clicked)}>{text}</a></td>
+		<td><a className={clsx("btn btn-xs sm:btn-sm md:btn-md btn-ghost w-full", {"bg-primary-focus":clicked})} onClick={() => setClicked(!clicked)}>{text}</a></td>
 	);
 }