diff --git a/public/css/app.css b/public/css/app.css
index 3e1ccf381..a38e88548 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -51134,6 +51134,14 @@ body{
     top: 0.5rem;
   }
 
+  .lg\:bottom-2\.5{
+    bottom: 0.625rem;
+  }
+
+  .lg\:bottom-2{
+    bottom: 0.5rem;
+  }
+
   .lg\:col-span-5{
     grid-column: span 5 / span 5;
   }
@@ -51227,6 +51235,10 @@ body{
     height: 3rem;
   }
 
+  .lg\:h-28{
+    height: 7rem;
+  }
+
   .lg\:w-9{
     width: 2.25rem;
   }
@@ -51540,6 +51552,10 @@ body{
     right: 0px;
   }
 
+    [dir="ltr"] .ltr\:lg\:right-0{
+    right: 0px;
+  }
+
     [dir="ltr"] .lg\:ltr\:pr-12{
     padding-right: 3rem;
   }
@@ -51560,6 +51576,10 @@ body{
     left: 0px;
   }
 
+    [dir="rtl"] .rtl\:lg\:left-0{
+    left: 0px;
+  }
+
     [dir="rtl"] .lg\:rtl\:pl-12{
     padding-left: 3rem;
   }
diff --git a/resources/views/components/layouts/modules/bar.blade.php b/resources/views/components/layouts/modules/bar.blade.php
index 126afca6b..0a50a65a9 100644
--- a/resources/views/components/layouts/modules/bar.blade.php
+++ b/resources/views/components/layouts/modules/bar.blade.php
@@ -1,66 +1,66 @@
-<div class="relative w-full flex border-b pt-8 mb-4">
-    <div class="flex flex-row items-center place-center border-r">
-        <button class="flex items-center" id="dropdownButton" data-dropdown-toggle="dropdown">
-            <i class="material-icons w-10 flex items-center aspect-square text-light-gray ltr:pl-2 rtl:pr-2 hover:text-gray-700"> apps_outlined </i>
-        </button>
+<div class="relative w-full flex flex-col sm:flex-row border-b pt-8 mb-4">
+    <div class="flex items-center">
+        <div class="flex flex-row items-center place-center border-r">
+            <button class="flex items-center" id="dropdownButton" data-dropdown-toggle="dropdown">
+                <i class="material-icons w-10 flex items-center aspect-square text-light-gray ltr:pl-2 rtl:pr-2 hover:text-gray-700"> apps_outlined </i>
+            </button>
 
-        <div id="dropdown" data-click-outside-none class="w-full px-0 hidden z-10">
-            <div class="flex flex-col md:flex-row">
-                <div class="w-full lg:w-6/12 flex flex-col shadow-md bg-white px-4 lg:pl-8 py-8 gap-2 rounded-l-xl">
-                    <h4 class="capitalize font-thin">
-                        {{ trans_choice('general.categories', 1) }}
-                    </h4>
+            <div id="dropdown" data-click-outside-none class="w-full px-0 hidden z-10">
+                <div class="flex flex-col md:flex-row">
+                    <div class="w-full lg:w-6/12 flex flex-col shadow-md bg-white px-4 lg:pl-8 py-8 gap-2 rounded-l-xl">
+                        <h4 class="capitalize font-thin">
+                            {{ trans_choice('general.categories', 1) }}
+                        </h4>
 
-                    <div class="grid grid-cols-2 gap-2">
-                        @foreach ($categories as $slug => $category)
-                            <x-link href="{{ $categoryUrl($slug) }}" class="font-semibold text-sm ltr:pr-4 rtl:pl-4 lg:pr-0 truncate bg-transparent" override="class">
-                                <x-link.hover>
-                                    {{ $category }}
-                                </x-link.hover>
-                            </x-link>
-                        @endforeach
-                    </div>
-                </div>
-
-                <div class="w-full lg:w-6/12 flex flex-col shadow-md bg-purple-lighter px-4 lg:px-12 py-8 gap-2 rounded-r-xl">
-                    <h4 class="capitalize font-thin mb-2">
-                        {{ trans('modules.popular_this_week') }}
-                    </h4>
-
-                    @if ($popular)
-                        <div class="flex flex-col gap-4">
-                            @foreach ($popular->data as $item)
-                                <div class="hover:shadow-2xl rounded-lg">
-                                    <x-link href="{{ route('apps.app.show', $item->slug) }}" class="flex items-center p-2" override="class">
-                                        @foreach ($item->files as $file)
-                                            @if (($file->media_type == 'image') && ($file->pivot->zone == 'thumbnail'))
-                                                <img src="{{ $file->path_string }}" alt="{{ $item->name }}" class="w-28 h-20 rounded-md object-cover ltr:mr-3 rtl:ml-3" />
-                                            @endif
-                                        @endforeach
-
-                                        <div class="flex flex-col py-1 gap-0">
-                                            <h6 class="text-sm font-bold capitalize">
-                                                {!! $item->name !!}
-                                            </h6>
-
-                                            <div class="line-clamp-2">
-                                                <p class="font-thin text-xs text-left">
-                                                    {!! $item->description !!}
-                                                </p>
-                                            </div>
-                                        </div>
-                                    </x-link>
-                                </div>
+                        <div class="grid grid-cols-2 gap-2">
+                            @foreach ($categories as $slug => $category)
+                                <x-link href="{{ $categoryUrl($slug) }}" class="font-semibold text-sm ltr:pr-4 rtl:pl-4 lg:pr-0 truncate bg-transparent" override="class">
+                                    <x-link.hover>
+                                        {{ $category }}
+                                    </x-link.hover>
+                                </x-link>
                             @endforeach
                         </div>
-                    @else
-                    @endif
+                    </div>
+
+                    <div class="w-full lg:w-6/12 flex flex-col shadow-md bg-purple-lighter px-4 lg:px-12 py-8 gap-2 rounded-r-xl">
+                        <h4 class="capitalize font-thin mb-2">
+                            {{ trans('modules.popular_this_week') }}
+                        </h4>
+
+                        @if ($popular)
+                            <div class="flex flex-col gap-4">
+                                @foreach ($popular->data as $item)
+                                    <div class="hover:shadow-2xl rounded-lg">
+                                        <x-link href="{{ route('apps.app.show', $item->slug) }}" class="flex items-center p-2" override="class">
+                                            @foreach ($item->files as $file)
+                                                @if (($file->media_type == 'image') && ($file->pivot->zone == 'thumbnail'))
+                                                    <img src="{{ $file->path_string }}" alt="{{ $item->name }}" class="w-28 h-20 rounded-md object-cover ltr:mr-3 rtl:ml-3" />
+                                                @endif
+                                            @endforeach
+
+                                            <div class="flex flex-col py-1 gap-0">
+                                                <h6 class="text-sm font-bold capitalize">
+                                                    {!! $item->name !!}
+                                                </h6>
+
+                                                <div class="line-clamp-2">
+                                                    <p class="font-thin text-xs text-left">
+                                                        {!! $item->description !!}
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </x-link>
+                                    </div>
+                                @endforeach
+                            </div>
+                        @else
+                        @endif
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
 
-    <div class="flex flex-col lg:flex-row w-full justify-between">
         <div class="w-8/12 h-full">
             <form method="GET" action="{{ url("/" . company_id()) }}/apps/search">
                 <div class="h-full flex items-center pl-2 gap-2">
@@ -107,31 +107,31 @@
             </div>
             </form>
         </div>
+    </div>
 
-        <div class="flex flex-row items-end lg:items-center mb-1 divide-x divide-black-400 mt-4 lg:mt-0">
-            <x-link href="{{ route('apps.home.index') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
-                <x-link.hover color="to-black-400">
-                    {{ trans('modules.home') }}
-                </x-link.hover>
-            </x-link>
+    <div class="lg:absolute lg:bottom-2.5 ltr:lg:right-0 rtl:lg:left-0 flex flex-row items-end lg:items-center mb-1 divide-x divide-black-400 mt-4 lg:mt-0">
+        <x-link href="{{ route('apps.home.index') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
+            <x-link.hover color="to-black-400">
+                {{ trans('modules.home') }}
+            </x-link.hover>
+        </x-link>
 
-            <x-link href="{{ route('apps.new') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
-                <x-link.hover color="to-black-400">
-                    {{ trans('modules.new') }}
-                </x-link.hover>
-            </x-link>
+        <x-link href="{{ route('apps.new') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
+            <x-link.hover color="to-black-400">
+                {{ trans('modules.new') }}
+            </x-link.hover>
+        </x-link>
 
-            <x-link href="{{ route('apps.paid') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
-                <x-link.hover color="to-black-400">
-                    {{ trans('modules.top_paid') }}
-                </x-link.hover>
-            </x-link>
+        <x-link href="{{ route('apps.paid') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
+            <x-link.hover color="to-black-400">
+                {{ trans('modules.top_paid') }}
+            </x-link.hover>
+        </x-link>
 
-            <x-link href="{{ route('apps.free') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
-                <x-link.hover color="to-black-400">
-                    {{ trans('modules.top_free') }}
-                </x-link.hover>
-            </x-link>
-        </div>
+        <x-link href="{{ route('apps.free') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
+            <x-link.hover color="to-black-400">
+                {{ trans('modules.top_free') }}
+            </x-link.hover>
+        </x-link>
     </div>
 </div>
\ No newline at end of file
diff --git a/resources/views/components/modules/banners.blade.php b/resources/views/components/modules/banners.blade.php
index 0ba2a014a..42dfa82dd 100644
--- a/resources/views/components/modules/banners.blade.php
+++ b/resources/views/components/modules/banners.blade.php
@@ -6,7 +6,7 @@
     <div class="w-full lg:h-48 px-6 bg-dark-blue rounded-lg flex flex-col lg:flex-row justify-between items-center my-8">
         <div class="w-full lg:w-1/2 flex flex-col self-end py-6">
             <div
-                class="h-28"
+                class="lg:h-28"
                 x-data="{
                     text: '',
                     textArray : ['{{ trans('modules.premium_banner') }}'],