diff --git a/package-lock.json b/package-lock.json
index 6f616d93..2b96b6f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
     "packages": {
         "": {
             "dependencies": {
+                "preline": "^2.4.1",
                 "vite-plugin-static-copy": "^1.0.6"
             },
             "devDependencies": {
@@ -516,6 +517,15 @@
                 "node": ">=14"
             }
         },
+        "node_modules/@popperjs/core": {
+            "version": "2.11.8",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/popperjs"
+            }
+        },
         "node_modules/@rollup/rollup-android-arm-eabi": {
             "version": "4.21.0",
             "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.0.tgz",
@@ -1958,6 +1968,14 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/preline": {
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/preline/-/preline-2.4.1.tgz",
+            "integrity": "sha512-30yx5s2gEOTBWXSTPa+Th23/kGryn9Inhmp9KPzz9G8DZPp9j/LkGyyrSvdsuXh4Clc/sJFLObumFrbI/WmB0w==",
+            "dependencies": {
+                "@popperjs/core": "^2.11.2"
+            }
+        },
         "node_modules/queue-microtask": {
             "version": "1.2.3",
             "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
diff --git a/package.json b/package.json
index 2ca5040d..9bc4f1ae 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
         "vite": "^5.4.0"
     },
     "dependencies": {
+        "preline": "^2.4.1",
         "vite-plugin-static-copy": "^1.0.6"
     }
 }
diff --git a/resources/js/app.js b/resources/js/app.js
index e69de29b..ad867a70 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -0,0 +1 @@
+import 'preline/dist/preline.js';
\ No newline at end of file
diff --git a/resources/views/components/home-navbar.blade.php b/resources/views/components/home-navbar.blade.php
index e8ae62a2..98500692 100644
--- a/resources/views/components/home-navbar.blade.php
+++ b/resources/views/components/home-navbar.blade.php
@@ -1,78 +1,26 @@
-<style>
-    .btn-nav:hover {
-        color: #f7f7f7; /* Couleur du texte au survol */
-    }
-</style>
-
-    <nav class="bg-green-900 fixed w-full z-10"  x-data="{ isOpen: false }">
-        <div class="container mx-auto flex justify-between items-center py-4">
-            <a class="navbar-brand flex items-center" href="/">
-                <img src="{{ asset('/build/images/logo1.svg') }}" alt="Logo" class="h-8">
-            </a>
-            <button onclick="toggleMenu()" class="lg:hidden text-white focus:outline-none">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-6 w-6 fill-current">
-                    <path fill-rule="evenodd" d="M4 6h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 5h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 5h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
-                </svg>
-            </button>
-            <div class="hidden lg:flex lg:items-center lg:w-auto">
-                <a href="/" class="btn-nav">Home</a>
-                <span class="mx-2"></span>
-                <a href="/contact" class="btn-nav">Contact</a>
-                <span class="mx-2"></span>
-                <a href="/about" class="btn-nav">About</a>
-                <span class="mx-2"></span>
-                @if(auth()->check())
-                    <div class="relative inline-block text-left">
-                        <button onclick="toggleDropdown()" class="btn-nav">
-                            <span class="text-white">
-                                <strong>Welcome, {{ auth()->user()->name }}</strong>
-                            </span>
-                        </button>
-                        <div class="ml-3 absolute hidden" id="moreDropdown">
-                            <a href="{{ route('filament.app.tenant')}}" class="btn-nav">Dashboard</a>
-                        </div>
-                    </div>
-                @else
-                    <a href="/login" class="btn-nav">Login</a>
-                    <span class="mx-2"></span>
-                    <a href="/register" class="btn-nav">Register</a>
-                @endif
-            </div>
-            <div id="mobile-menu" class="mobile-menu-container fixed bg-green-700 hidden" x-show="isOpen" @click.away="isOpen = false">
-                <div class="mobile-menu-content">
-                    <!-- Navigation Links -->
-                    <a href="/home" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Home</a>
-                    @if(auth()->check())
-                    <div class="relative inline-block text-left">
-                        <button onclick="toggleDropdown()" class="btn-nav">
-                            <span class="text-white">
-                                <strong>Welcome, {{ auth()->user()->name }}</strong>
-                            </span>
-                        </button>
-                        <div class="ml-3 absolute hidden" id="moreDropdown">
-                            <a href="{{ route('filament.app.tenant')}}" class="btn-nav">Dashboard</a>
-                        </div>
-                    </div>
-                @else
-                    <a href="/login" class="btn-nav">Login</a>
-                    <span class="mx-2"></span>
-                    <a href="/register" class="btn-nav">Register</a>
-                @endif
-                    <a href="/about" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">About</a>
-                    <a href="/contact" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Contact</a>
-                </div>
-            </div>
+<header class="flex flex-wrap sm:justify-start sm:flex-nowrap w-full bg-white text-sm py-3 dark:bg-neutral-800">
+    <nav class="max-w-[85rem] w-full mx-auto px-4 flex flex-wrap basis-full items-center justify-between">
+        <a class="sm:order-1 flex-none text-xl font-semibold dark:text-white focus:outline-none focus:opacity-80" href="#">
+        <img src="{{ asset('/build/images/logo1.svg') }}" alt="Logo" class="h-8">
+        </a>
+        <div class="sm:order-3 flex items-center gap-x-2">
+        <button type="button" class="sm:hidden hs-collapse-toggle relative size-7 flex justify-center items-center gap-x-2 rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-neutral-700 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10" id="hs-navbar-alignment-collapse" aria-expanded="false" aria-controls="hs-navbar-alignment" aria-label="Toggle navigation" data-hs-collapse="#hs-navbar-alignment">
+            <svg class="hs-collapse-open:hidden shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
+            <svg class="hs-collapse-open:block hidden shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+            <span class="sr-only">Toggle</span>
+        </button>
+        @if(auth()->check())
+            <a class="font-medium text-gray-500 focus:outline-none" href="{{ route('filament.app.tenant')}}" aria-current="page">Dashboard</a>
+        @else
+            <a class="font-medium text-gray-500 focus:outline-none" href="/login" aria-current="page">Login</a>
+            <a class="font-medium text-gray-500 focus:outline-none" href="/register" aria-current="page">Register</a>
+        @endif
+        </div>
+        <div id="hs-navbar-alignment" class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:grow-0 sm:basis-auto sm:block sm:order-2" aria-labelledby="hs-navbar-alignment-collapse">
+        <div class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:mt-0 sm:ps-5">
+            <a class="font-medium text-gray-500 focus:outline-none" href="/" aria-current="page">Home</a>
+            <a class="font-medium text-gray-600 hover:text-gray-400 focus:outline-none focus:text-gray-400 dark:text-neutral-400 dark:hover:text-neutral-500 dark:focus:text-neutral-500" href="/about">About</a>
+        </div>
         </div>
     </nav>
-
-    <script>
-        function toggleDropdown() {
-            var dropdownMenu = document.getElementById("moreDropdown");
-            dropdownMenu.classList.toggle("hidden");
-        }
-
-        function toggleMenu() {
-            var dropdownMenu = document.getElementById("mobile-menu");
-            dropdownMenu.classList.toggle("hidden");
-        }
-    </script>
+</header>
diff --git a/tailwind.config.js b/tailwind.config.js
index abfacff1..7ef47f4d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,7 @@ export default {
         './vendor/laravel/jetstream/**/*.blade.php',
         './storage/framework/views/*.php',
         './resources/views/**/*.blade.php',
+        'node_modules/preline/dist/*.js',
     ],
 
     theme: {
@@ -19,5 +20,5 @@ export default {
         },
     },
 
-    plugins: [forms, typography],
+    plugins: [forms, typography, require('preline/plugin'),],
 };