diff --git a/components/ui/Heros/ECommerce.vue b/components/ui/Heros/ECommerce.vue
index 0ca2941..3a75977 100644
--- a/components/ui/Heros/ECommerce.vue
+++ b/components/ui/Heros/ECommerce.vue
@@ -43,7 +43,7 @@
                             <div class="max-w-lg">
                                 <h1 class="text-2xl font-semibold text-gray-800 uppercase dark:text-white md:text-3xl">Best Place To Choose Your Clothes</h1>
                                 <p class="mt-2 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro beatae error laborum ab amet sunt recusandae? Reiciendis natus perspiciatis optio.</p>
-                                <button class="px-3 py-2 mt-6 text-xs font-medium text-white uppercase transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500">Shop Now</button>
+                                <button class="w-full px-3 py-2 mt-6 text-xs font-medium text-white uppercase transition-colors duration-200 transform bg-indigo-600 rounded-md md:w-auto hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500">Shop Now</button>
                             </div>
                         </div>
                 
@@ -110,7 +110,7 @@
                         <div class="max-w-lg">
                             <h1 class="text-2xl font-semibold text-gray-800 uppercase dark:text-white md:text-3xl">Best Place To Choose Your Clothes</h1>
                             <p class="mt-2 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro beatae error laborum ab amet sunt recusandae? Reiciendis natus perspiciatis optio.</p>
-                            <button class="px-3 py-2 mt-4 text-sm font-medium text-white uppercase bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500">Shop Now</button>
+                            <button class="w-full px-3 py-2 mt-6 text-xs font-medium text-white uppercase transition-colors duration-200 transform bg-indigo-600 rounded-md md:w-auto hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500">Shop Now</button>
                         </div>
                     </div>
             
diff --git a/components/ui/Heros/WithBGImage.vue b/components/ui/Heros/WithBGImage.vue
index 388b442..f547b47 100644
--- a/components/ui/Heros/WithBGImage.vue
+++ b/components/ui/Heros/WithBGImage.vue
@@ -33,7 +33,7 @@
                     <div class="flex items-center justify-center w-full h-full bg-gray-900 bg-opacity-50">
                         <div class="text-center">
                             <h1 class="text-2xl font-semibold text-white uppercase md:text-3xl">Build Your new <span class="text-blue-400 underline">Saas</span></h1>
-                            <button class="px-4 py-2 mt-4 text-sm font-medium text-white uppercase transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-500">Start project</button>
+                            <button class="w-full px-4 py-2 mt-4 text-sm font-medium text-white uppercase transition-colors duration-200 transform bg-blue-600 rounded-md md:w-auto hover:bg-blue-500 focus:outline-none focus:bg-blue-500">Start project</button>
                         </div>
                     </div>
                 </div>
@@ -94,7 +94,7 @@
                 <div class="flex items-center justify-center w-full h-full bg-gray-900 bg-opacity-50">
                     <div class="text-center">
                         <h1 class="text-2xl font-semibold text-white uppercase md:text-3xl">Build Your new <span class="text-blue-400 underline">Saas</span></h1>
-                        <button class="px-4 py-2 mt-4 text-sm font-medium text-white uppercase transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-500">Start project</button>
+                        <button class="w-full px-4 py-2 mt-4 text-sm font-medium text-white uppercase transition-colors duration-200 transform bg-blue-600 rounded-md md:w-auto hover:bg-blue-500 focus:outline-none focus:bg-blue-500">Start project</button>
                     </div>
                 </div>
             </div>
diff --git a/components/ui/Heros/WithNewsletterForm.vue b/components/ui/Heros/WithNewsletterForm.vue
index 0719669..73d6ddb 100644
--- a/components/ui/Heros/WithNewsletterForm.vue
+++ b/components/ui/Heros/WithNewsletterForm.vue
@@ -19,15 +19,15 @@
                 <div class="container px-6 py-16 mx-auto">
                     <div class="items-center md:flex">
                         <div class="w-full md:w-1/2">
-                            <div class="max-w-lg">
+                            <div class="md:max-w-lg">
                                 <h1 class="text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Subscribe To The <span class="text-indigo-500">Newsletter</span></h1>
 
                                 <p class="mt-4 text-gray-600 dark:text-gray-400">be the first to knows when our <span class="font-medium text-indigo-500">Brand</span> is live</p>
 
-                                <div class="flex flex-col mt-8 space-y-3 sm:space-y-0 sm:flex-row">
+                                <div class="flex flex-col mt-8 space-y-3 md:space-y-0 md:flex-row">
                                     <input id="email" type="text" class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Email Address">
                                     
-                                    <button class="px-4 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-500 rounded-md sm:mx-4 hover:bg-indigo-400 focus:outline-none focus:bg-indigo-400">
+                                    <button class="w-full px-4 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-500 rounded-md md:w-auto md:mx-4 hover:bg-indigo-400 focus:outline-none focus:bg-indigo-400">
                                         Subscribe
                                     </button>
                                 </div>
@@ -68,15 +68,15 @@
             <div class="container px-6 py-16 mx-auto">
                 <div class="items-center md:flex">
                     <div class="w-full md:w-1/2">
-                        <div class="max-w-lg">
+                        <div class="md:max-w-lg">
                             <h1 class="text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Subscribe To The <span class="text-indigo-500">Newsletter</span></h1>
 
                             <p class="mt-4 text-gray-600 dark:text-gray-400">be the first to knows when our <span class="font-medium text-indigo-500">Brand</span> is live</p>
 
-                            <div class="flex flex-col mt-8 space-y-3 sm:space-y-0 sm:flex-row">
+                            <div class="flex flex-col mt-8 space-y-3 md:space-y-0 md:flex-row">
                                 <input id="email" type="text" class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Email Address">
                                 
-                                <button class="px-4 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-500 rounded-md sm:mx-4 hover:bg-indigo-400 focus:outline-none focus:bg-indigo-400">
+                                <button class="w-full px-4 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-500 rounded-md md:w-auto md:mx-4 hover:bg-indigo-400 focus:outline-none focus:bg-indigo-400">
                                     Subscribe
                                 </button>
                             </div>
diff --git a/components/ui/Heros/WithSideImage.vue b/components/ui/Heros/WithSideImage.vue
index 5f8a781..a67af69 100644
--- a/components/ui/Heros/WithSideImage.vue
+++ b/components/ui/Heros/WithSideImage.vue
@@ -35,9 +35,9 @@
                                 
                             <p class="mt-2 text-sm text-gray-500 dark:text-gray-400 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
 
-                            <div class="flex mt-6">
-                                <a href="#" class="block px-3 py-2 text-xs font-semibold text-white transition-colors duration-200 transform bg-gray-900 rounded-md hover:bg-gray-700">Get Started</a>
-                                <a href="#" class="block px-3 py-2 mx-4 text-xs font-semibold text-gray-700 transition-colors duration-200 transform bg-gray-200 rounded-md hover:bg-gray-300">Learn More</a>
+                            <div class="flex flex-col mt-6 space-y-3 md:space-y-0 md:flex-row">
+                                <a href="#" class="block px-3 py-2 text-sm font-semibold text-center text-white transition-colors duration-200 transform bg-gray-900 rounded-md hover:bg-gray-700">Get Started</a>
+                                <a href="#" class="block px-3 py-2 text-sm font-semibold text-center text-gray-700 transition-colors duration-200 transform bg-gray-200 rounded-md md:mx-4 hover:bg-gray-300">Learn More</a>
                             </div>
                         </div>
                     </div>
@@ -105,9 +105,9 @@
                             
                         <p class="mt-2 text-sm text-gray-500 dark:text-gray-400 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
 
-                        <div class="flex mt-6">
-                            <a href="#" class="block px-3 py-2 text-xs font-semibold text-white transition-colors duration-200 transform bg-gray-900 rounded-md hover:bg-gray-700">Get Started</a>
-                            <a href="#" class="block px-3 py-2 mx-4 text-xs font-semibold text-gray-700 transition-colors duration-200 transform bg-gray-200 rounded-md hover:bg-gray-300">Learn More</a>
+                        <div class="flex flex-col mt-6 space-y-3 md:space-y-0 md:flex-row">
+                            <a href="#" class="block px-3 py-2 text-sm font-semibold text-center text-white transition-colors duration-200 transform bg-gray-900 rounded-md hover:bg-gray-700">Get Started</a>
+                            <a href="#" class="block px-3 py-2 text-sm font-semibold text-center text-gray-700 transition-colors duration-200 transform bg-gray-200 rounded-md md:mx-4 hover:bg-gray-300">Learn More</a>
                         </div>
                     </div>
                 </div>
diff --git a/layouts/default.vue b/layouts/default.vue
index 60bb15e..f74441d 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -4,7 +4,7 @@
         <footer-component />
 
         <back-to-top visibleoffset="800">
-            <app-button class="fixed bottom-0 right-0 p-2 mx-10 my-10 text-white bg-gray-800 rounded-md hover:bg-gray-900 dark:hover:bg-gray-700 focus:outline-none" aria-label="Back to top">
+            <app-button class="fixed bottom-0 right-0 p-2 mx-5 my-10 text-white bg-gray-800 rounded-md lg:mx-10 hover:bg-gray-900 dark:hover:bg-gray-700 focus:outline-none" aria-label="Back to top">
                 <svg class="w-6 h-6" viewBox="0 0 20 20" fill="currentColor">
                     <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"/>
                 </svg>