diff --git a/src/components/widgets/CallToAction.astro b/src/components/widgets/CallToAction.astro
index e555ae2..7c0a9c9 100644
--- a/src/components/widgets/CallToAction.astro
+++ b/src/components/widgets/CallToAction.astro
@@ -9,7 +9,7 @@ const {} = Astro.props;
     <div class="py-12 md:py-20">
       <div class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none">
         <h2 class="text-4xl md:text-4xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
-          <span>Astro</span> + <span class="sm:whitespace-nowrap">Tailwind CSS</span>
+          <span>Astro</span> + <br class="block sm:hidden" /><span class="sm:whitespace-nowrap">Tailwind CSS</span>
         </h2>
         <p class="text-xl text-gray-600 dark:text-slate-400">
           Be very surprised by these huge fake numbers you are seeing on this page. <br class="hidden md:inline" />Don't
@@ -23,7 +23,7 @@ const {} = Astro.props;
             target="_blank"
             rel="noopener"
           >
-            <Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5 hidden sm:inline-block" /> Get template
+            <Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5" /> Get template
           </a>
         </div>
       </div>
diff --git a/src/components/widgets/Features3.astro b/src/components/widgets/Features3.astro
index 3280eeb..8534d53 100644
--- a/src/components/widgets/Features3.astro
+++ b/src/components/widgets/Features3.astro
@@ -28,7 +28,7 @@ const {} = Astro.props;
                   target="_blank"
                   rel="noopener"
                 >
-                  <Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5 hidden sm:inline-block" /> Get template
+                  <Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5" /> Get template
                 </a>
               </div>
             </div>
diff --git a/src/components/widgets/Hero.astro b/src/components/widgets/Hero.astro
index b6118e3..699bf3d 100644
--- a/src/components/widgets/Hero.astro
+++ b/src/components/widgets/Hero.astro
@@ -23,20 +23,20 @@ const {} = Astro.props;
             designed following Best Practices, SEO, Accessibility, Dark Mode, great Page Speed, image optimization,
             sitemap generation and more.
           </p>
-          <div class="max-w-none flex justify-center">
-            <div>
+          <div class="max-w-none px-6 flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
+            <div class="flex w-full sm:w-auto">
               <a
-                class="btn text-white bg-primary-600 hover:bg-primary-800 mb-4 sm:mb-0 font-bold"
+                class="btn text-white border border-primary-600 bg-primary-600 hover:bg-primary-800 hover:border-primary-800 sm:mb-0 font-bold w-full"
                 href="https://github.com/onwidget/astrowind"
                 target="_blank"
                 rel="noopener"
               >
-                <Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5 hidden sm:inline-block" /> Get template
+                <Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5" /> Get template
               </a>
             </div>
-            <div>
+            <div class="flex w-full sm:w-auto">
               <a
-                class="btn text-white bg-gray-900 hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-800 ml-4"
+                class="btn text-white bg-gray-900 hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-800 w-full"
                 href="#features"
                 >Learn more
               </a>