diff --git a/src/components/Button.astro b/src/components/Button.astro
index d7340d7..de35218 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -4,7 +4,7 @@ const { link, text } = Astro.props;
 
 <a
   href={link}
-  class="mt-4 inline-flex w-auto items-center rounded-full border border-neutral-950 bg-neutral-200 px-4 py-2 text-sm font-semibold text-neutral-950 backdrop-blur-xl transition-all duration-300 ease-out hover:border-neutral-200 hover:bg-neutral-950 hover:text-neutral-200"
+  class="inline-flex w-full items-center justify-center rounded-full border border-neutral-950 bg-neutral-200 px-4 py-2 text-sm font-semibold text-neutral-950 backdrop-blur-xl transition-all duration-300 ease-out hover:border-neutral-200 hover:bg-neutral-950 hover:text-neutral-200 md:w-auto md:justify-start"
 >
   {text}
 </a>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c8f0f85..d04b989 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -35,9 +35,11 @@ const { name, label, summary } = basics;
           {summary}.
         </h2>
 
-        <Button text="Check My Projects." link="/projects" />
-        <Button text="About Me." link="/about" />
-        <Button text="Contact Me." link="/contact" />
+        <div class="mt-4 grid grid-cols-1 gap-2 md:grid-cols-3">
+          <Button text="My Projects." link="/projects" />
+          <Button text="About Me." link="/about" />
+          <Button text="Contact Me." link="/contact" />
+        </div>
       </div>
       <div
         class="mx-auto w-full max-w-xs rounded-2xl border border-dashed border-neutral-700 bg-gradient-to-r from-neutral-950 via-black to-neutral-950 md:w-1/2 md:max-w-full"