diff --git a/resources/views/dashboards/user/index.blade.php b/resources/views/dashboards/user/index.blade.php
index 4d0b806..9a90d46 100644
--- a/resources/views/dashboards/user/index.blade.php
+++ b/resources/views/dashboards/user/index.blade.php
@@ -30,31 +30,31 @@
         </div>
 
         <x-dashboard.card>
-            <div class="flex space-x-4">
+            <div class="flex gap-4 flex-col sm:flex-row">
                 <x-ui.input class="flex-1" name="search" placeholder="Search deals, services, places"/>
                 <x-ui.select name="category" :options="$categories" value-key="value" label-key="name" />
             </div>
         </x-dashboard.card>
 
-        <x-ui.toggle-button-group>
+        <x-ui.toggle-button-group >
             <x-ui.toggle-button active>
                 <a href="" class="flex items-center px-2 py-1 space-x-2">
                     <x-heroicon-o-clock class="w-4 stroke-2" />
-                    <p class="font-bold">All Deals</p>
+                    <p class="font-bold text-xs  sm:text-sm md:text-md">All Deals</p>
                 </a>
             </x-ui.toggle-button>
 
             <x-ui.toggle-button>
                 <a href="" class="flex items-center px-2 py-1 space-x-2">
                     <x-heroicon-o-arrow-trending-up class="w-4 stroke-2" />
-                    <p class="font-bold">Most Liked</p>
+                    <p class="font-bold text-xs sm:text-sm md:text-md">Most Liked</p>
                 </a>
             </x-ui.toggle-button>
 
             <x-ui.toggle-button>
                 <a href="" class="flex items-center px-2 py-1 space-x-2">
                     <x-heroicon-o-star class="w-4 stroke-2" />
-                    <p class="font-bold">Most Clicked</p>
+                    <p class="font-bold text-xs sm:text-sm md:text-md">Most Clicked</p>
                 </a>
             </x-ui.toggle-button>
         </x-ui.toggle-button-group>