diff --git a/src/components/Master.vue b/src/components/Master.vue
index 5ecc695..d3f4607 100644
--- a/src/components/Master.vue
+++ b/src/components/Master.vue
@@ -18,7 +18,7 @@
                         </button>
                         <span v-for="category in categories" :key="category.name">
                             <button @click="searchText = category.name"
-                                    class="ml-2 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 rounded text-sm focus:outline-none"
+                                    class="ml-2 mt-2 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 rounded text-sm focus:outline-none"
                                     :class="category.name === searchText? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'">{{ category.name }}</button>
                         </span>
                     </div>
diff --git a/src/components/UI/Heroes/HeroWithPattern.vue b/src/components/UI/Heroes/HeroWithPattern.vue
index 279c5bc..5ea2309 100644
--- a/src/components/UI/Heroes/HeroWithPattern.vue
+++ b/src/components/UI/Heroes/HeroWithPattern.vue
@@ -6,9 +6,9 @@
                 We are using https://www.heropatterns.com/ give it a try
              -->
             <div class="px-4 md:px-12 container mx-auto">
-                <nav class="py-4 flex justify-between items-center text-gray-100">
+                <nav class="py-4 flex justify-between items-center flex-col md:flex-row text-gray-100">
                     <a href="#" class="text-2xl font-semibold">Brand</a>
-                    <div class="flex items-center -mx-2">
+                    <div class="flex items-center -mx-2 mt-2 md:mt-0">
                         <a href="#" class="px-4 py-1 border-2 border-white font-semibold rounded">Sign in</a>
                         <a href="#" class="px-4 py-2 mx-2 font-semibold bg-black rounded">Sign up</a>
                     </div>