diff --git a/leaky-ships/pages/dev/index.tsx b/leaky-ships/pages/dev/index.tsx
index 84d5bfc..f0457d2 100644
--- a/leaky-ships/pages/dev/index.tsx
+++ b/leaky-ships/pages/dev/index.tsx
@@ -16,14 +16,14 @@ export default function Home() {
         <BurgerMenu />
         {!heWantsToPlay ? (
           <>
-            <div className="flex h-36 w-64 items-center justify-center rounded-xl border-4 border-black bg-[#2227] lg:h-[18rem] lg:w-[32rem] lg:border-[6px] xl:h-[26rem] xl:w-[48rem]">
+            <div className="flex h-36 w-64 items-center justify-center rounded-xl border-4 border-black bg-[#2227] sm:h-48 sm:w-96 md:h-72 md:w-[32rem] md:border-[6px] xl:h-[26rem] xl:w-[48rem]">
               <FontAwesomeIcon
-                className="text-6xl lg:text-8xl"
+                className="text-6xl sm:text-7xl md:text-8xl"
                 icon={faCirclePlay}
               />
             </div>
             <button
-              className="font-farro rounded-lg border-b-4 border-orange-400 bg-warn px-12 pt-5 pb-4 text-2xl font-bold duration-100 active:border-t-4 active:border-b-0 xl:rounded-2xl xl:border-b-8 xl:px-24 xl:pt-10 xl:pb-8 xl:text-5xl xl:active:border-t-8"
+              className="font-farro rounded-lg border-b-4 border-orange-400 bg-warn px-12 pt-5 pb-4 text-2xl font-bold duration-100 active:border-t-4 active:border-b-0  sm:rounded-xl sm:border-b-[6px] sm:px-14 sm:pt-6 sm:pb-5 sm:text-3xl sm:active:border-t-[6px] md:rounded-2xl md:border-b-8 md:px-20 md:pt-7 md:pb-6 md:text-4xl md:active:border-t-8 xl:px-24 xl:pt-10 xl:pb-8 xl:text-5xl"
               onClick={() => setTimeout(() => setHeWantsToPlay(true), 200)}
             >
               START