diff --git a/resources/css/app.css b/resources/css/app.css
index b1a7e36..4f63131 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -29,3 +29,7 @@ @layer base{
         @apply text-5xl font-black text-center
     }
 }
+
+.preload * {
+    transition: none !important;
+}
diff --git a/resources/js/app.js b/resources/js/app.js
index e59d6a0..b626286 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1 +1,12 @@
 import './bootstrap';
+
+window.addEventListener('load', () => {
+    const preloader = document.getElementById('preloader');
+    const  content = document.getElementById('content');
+    preloader.style.opacity='0';
+    setTimeout(() => {
+        preloader.style.display='none';
+    }, 350)
+    content.style.display = 'block';
+    document.body.classList.remove('preload')
+})
diff --git a/resources/js/nav-menu.js b/resources/js/nav-menu.js
index 3ba60b1..3e6041b 100644
--- a/resources/js/nav-menu.js
+++ b/resources/js/nav-menu.js
@@ -4,11 +4,13 @@ const mobileMenu = document.getElementById('mobileMenu');
 const body = document.body;
 
 openBtn.addEventListener('click', () => {
-    mobileMenu.classList.remove('hidden');
+    mobileMenu.classList.remove('translate-x-[100vw]');
+    mobileMenu.classList.add('translate-x-0');
     body.style.overflow = 'hidden';
 })
 
 closeBtn.addEventListener('click', () => {
-    mobileMenu.classList.add('hidden');
+    mobileMenu.classList.add('translate-x-[100vw]');
+    mobileMenu.classList.remove('translate-x-0');
     body.style.overflow = 'visible';
 })
diff --git a/resources/views/components/dashboard/broker/navbar.blade.php b/resources/views/components/dashboard/broker/navbar.blade.php
index 5b7f43a..1eaca2f 100644
--- a/resources/views/components/dashboard/broker/navbar.blade.php
+++ b/resources/views/components/dashboard/broker/navbar.blade.php
@@ -9,13 +9,13 @@
 
     <!-- mobile menu btn-->
     <x-ui.button class="md:hidden" id="openBtn">
-        <x-heroicon-o-bars-3 class="w-8"/>
+        <x-heroicon-o-bars-3 class="w-8 0"/>
     </x-ui.button>
 
 </nav>
 
 <!-- mobile menu btn-->
-<div id='mobileMenu' class="hidden absolute top-0 h-[101vh] overflow-y-hidden w-[101vw] bg-gray-200 text-xl z-1 p-10">
+<div id='mobileMenu' class="translate-x-[100vw] absolute top-0 h-[101vh] overflow-y-hidden w-[101vw] bg-gray-200 text-xl z-1 p-10 transition-transform duration-500 ease-in-out">
     <div class="flex justify-between mb-8">
         <x-logo/>
         <x-ui.button id="closeBtn">
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
index dd3fb8b..afce737 100644
--- a/resources/views/components/layout.blade.php
+++ b/resources/views/components/layout.blade.php
@@ -1,27 +1,30 @@
 @props(['title' => ''])
-    @php
+@php
     $pageTitle =  config('app.name', 'Laravel');
     if ($title !== ''){
         $pageTitle = "$pageTitle | $title";
     }
-    @endphp
-<!DOCTYPE html>
+@endphp
+    <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <title>{{ $pageTitle  }}</title>
-    <link rel="shortcut icon" type="image/x-icon" href="{{asset('storage/'.'/images/favicon.ico')}}" />
+    <link rel="shortcut icon" type="image/x-icon" href="{{asset('storage/'.'/images/favicon.ico')}}"/>
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.bunny.net">
-    <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />
+    <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet"/>
 
     <!-- Styles / Scripts -->
     @vite(['resources/css/app.css', 'resources/js/app.js'])
 
 </head>
-<body class="bg-[#FFFFFF] text-[#1b1b18] flex  h-full w-full flex-col">
-    {{$slot}}
+<body class="bg-[#FFFFFF] text-[#1b1b18] flex  h-full w-full flex-col preload">
+    <x-ui.preloader/>
+    <div class="h-full w-full" style="display: none" id="content">
+        {{$slot}}
+    </div>
 </body>
 </html>
diff --git a/resources/views/components/ui/button.blade.php b/resources/views/components/ui/button.blade.php
index d35854a..f65da00 100644
--- a/resources/views/components/ui/button.blade.php
+++ b/resources/views/components/ui/button.blade.php
@@ -9,7 +9,7 @@
     $variantClass = $variants[$variant] ?? '';
 @endphp
 @if($link !== '')
-    <a {{$attributes->merge(['class' => "block px-4 py-2 rounded-lg font-medium hover:opacity-80 $variantClass", 'href' => $link])}}>
+    <a {{$attributes->merge(['class' => "block  active:scale-90 transition-all duration-200 px-4 py-2 rounded-lg font-medium hover:opacity-80 $variantClass", 'href' => $link])}}>
         <div class="flex justify-center items-center space-x-2">
             @if($icon !=='')
                 @svg("heroicon-o-$icon", 'w-5 h-5')
@@ -18,7 +18,7 @@
         </div>
     </a>
 @else
-    <button {{$attributes->merge(['class' => "px-4 py-2 rounded-lg font-medium hover:opacity-80 $variantClass", 'type'=>'submit'])}}>
+    <button {{$attributes->merge(['class' => "px-4 py-2 rounded-lg font-medium hover:opacity-80  active:scale-90 transition-all duration-200 $variantClass", 'type'=>'submit'])}}>
         <div class="flex justify-center items-center space-x-2">
             @if($icon !=='')
                 @svg("heroicon-o-$icon", 'w-5 h-5')
diff --git a/resources/views/components/ui/preloader.blade.php b/resources/views/components/ui/preloader.blade.php
new file mode 100644
index 0000000..52685cf
--- /dev/null
+++ b/resources/views/components/ui/preloader.blade.php
@@ -0,0 +1,8 @@
+<div id="preloader"
+     class="bg-white fixed top-0 left-0 h-screen w-screen z-1000 flex items-center justify-center opacity-100 transition-opacity duration-300 ease-in-out">
+        <div
+            class="inline-block h-8 w-8 animate-spin rounded-full border-4
+        border-solid border-black border-e-transparent align-[-0.125em]
+        text-surface motion-reduce:animate-[spin_1.5s_linear_infinite] text-black">
+        </div>
+</div>
