diff --git a/components/navbar.html b/components/navbar.html
index ad92665..f816ddc 100644
--- a/components/navbar.html
+++ b/components/navbar.html
@@ -1,9 +1,23 @@
 <nav id="navbar_component">
+    <div id="navbar_text-container">
+        <ul>
+            <li>
+                <a href="#0">Votre Avocat</a>
+            </li>
+            <li>
+                <a href="#0">Droits Appliqués</a>
+                <div class="navbar_dropdown">
+                    <a href="#0">Droit Pénal</a>
+                    <a href="#0">Droit des Affaires</a>
+                </div>
+            </li>
+            <li>
+                <a href="#0">Contact</a>
+            </li>
+        </ul>
+    </div>
     <div id="navbar_logo-container">
         <img class="navbar_logo" src="../assets/Logo.png"><img>
     </div>
-    <div id="navbar_text-container">
-        <p><bold>Saoul Bon Monsieur</bold></p>
-    </div>
 </nav>
 <div id="navbar_padding"></div>
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
index af324aa..f1a2f54 100644
--- a/css/index.css
+++ b/css/index.css
@@ -56,7 +56,6 @@ p {
   backdrop-filter: blur(16px);
   height: 10rem;
   top: 40%;
-  z-index: 0;
   position: absolute;
 }
 
@@ -74,7 +73,6 @@ p {
   color: black;
   width: 100%;
   margin: 2rem 2rem;
-  z-index: 1;
 }
 
 .description-img {
diff --git a/css/navbar.css b/css/navbar.css
index 6e12903..6e7956a 100644
--- a/css/navbar.css
+++ b/css/navbar.css
@@ -1,3 +1,7 @@
+#navbar_padding {
+    padding: 2.5rem;
+}
+
 #navbar_component {
     align-items: center;
     display: flex;
@@ -7,13 +11,16 @@
     top: 0;
     width: 100%;
     background-color: #f5a122;
-    z-index:2;
+    z-index: 3;
+    overflow: initial;
 }
 
 #navbar_logo-container {
     height: 5rem;
     width: 5rem;
     display: flex;
+    position: fixed;
+    right: 5rem;
 }
 
 .navbar_logo {
@@ -23,9 +30,58 @@
 #navbar_text-container {
     font-family: 'Josefin Sans', sans-serif;
     position: fixed;
-    right: 5rem;
 }
 
-#navbar_padding{
-    padding: 2.5rem;
+#navbar_text-container li {
+    border-radius: 4px;
+    display: inline-block;
+    padding: 1rem 0;
+    transition: all .3s ease 0s;
+}
+
+#navbar_text-container a,
+button {
+    border-radius: .25rem;
+    color: black;
+    font-weight: 800;
+    padding: 1rem 1rem;
+    text-decoration: none;
+    text-transform: uppercase;
+    display: inline-block;
+    transition: all .3s ease 0s;
+}
+
+#navbar_text-container a:hover {
+    transform: translateY(-2px);
+    background-color: rgba(255, 255, 255, 0.75);
+    color: #9e6b1f;
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+}
+
+.navbar_dropdown {
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.75);
+    top: 5rem;
+    backdrop-filter: blur(16px);
+    border-radius: .25rem;
+    box-shadow: 0 8px 16px rgba(136, 93, 12, 0.15);
+    flex-direction: column;
+    float: none;
+    justify-content: center;
+    position: absolute;
+    width: auto;
+    overflow: initial;
+    display: none;
+    z-index: 10;
+}
+
+.navbar_dropdown a {
+    border-radius: 0 !important;
+    width: 100%;
+}
+
+.navbar_dropdown a:hover {
+    transform: translateX(5px) !important;
+    background-color: #f5a122 !important;
+    color: white !important;
 }
\ No newline at end of file