diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6b76497..801e5e7 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -57,7 +57,7 @@ export default async function Page({ searchParams }: Props) {
 			<h1 className="sr-only">{tags ? `Miis tagged with '${tags}' - TomodachiShare` : "TomodachiShare - index mii list"}</h1>
 
 			{(!page || page === "1") && (
-				<div className="flex justify-center gap-2 mb-2">
+				<div className="flex items-center justify-center gap-2 mb-2 max-sm:flex-col">
 					<a
 						href="https://discord.gg/48cXBFKvWQ"
 						className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg px-4 py-2.5 flex justify-center items-center gap-4 w-fit"
diff --git a/src/components/countdown.tsx b/src/components/countdown.tsx
index a0a05c4..a6d5caa 100644
--- a/src/components/countdown.tsx
+++ b/src/components/countdown.tsx
@@ -34,10 +34,10 @@ export default function Countdown() {
 	}, []);
 
 	return (
-		<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg px-4 py-2.5 flex justify-center items-center gap-8 w-fit">
-			<div className="flex flex-col">
+		<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg px-4 py-2.5 flex justify-center items-center gap-8 w-fit max-sm:max-w-72 max-sm:w-full max-sm:flex-col max-sm:gap-2">
+			<div className="flex flex-col max-sm:items-center">
 				<h1 className="text-xl font-bold">Living the Dream</h1>
-				<h2 className="text-right text-sm">releases in:</h2>
+				<h2 className="text-right text-sm max-sm:text-center">releases in:</h2>
 			</div>
 
 			<div className="flex gap-4">