diff --git a/FrontEnd/src/app/components/navbar/navbar.component.css b/FrontEnd/src/app/components/navbar/navbar.component.css
index 01c914b..727f04a 100644
--- a/FrontEnd/src/app/components/navbar/navbar.component.css
+++ b/FrontEnd/src/app/components/navbar/navbar.component.css
@@ -9,6 +9,7 @@
     width: 100%;
     box-sizing: border-box;
     position: relative;
+    overflow: visible;
 }
 
 .logo {
@@ -42,6 +43,9 @@
     margin-left: auto;
     margin-right: auto;
     transform: translateX(20px);
+    position: relative;
+    z-index: 3000;
+
 }
 
 .nav-links li {
@@ -398,4 +402,33 @@
 .dropdown-content a.logout-link:hover {
     background-color: #fff5f5;
     color: #dc3545;
-}
\ No newline at end of file
+}
+.products-item {
+  position: relative;
+}
+
+.products-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: white;
+  list-style: none;
+  margin: 0;
+  padding: 8px 0;
+  min-width: 180px;
+  border-radius: 6px;
+  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
+  z-index: 2000;
+}
+
+.products-dropdown li a {
+  display: block;
+  padding: 10px 16px;
+  color: #333;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.products-dropdown li a:hover {
+  background-color: #f2f4f8;
+}
diff --git a/FrontEnd/src/app/components/navbar/navbar.component.html b/FrontEnd/src/app/components/navbar/navbar.component.html
index d61e7e5..cf1c659 100644
--- a/FrontEnd/src/app/components/navbar/navbar.component.html
+++ b/FrontEnd/src/app/components/navbar/navbar.component.html
@@ -5,10 +5,40 @@
 
   <ul class="nav-links">
     <li><a routerLink="/">Home</a></li>
-    <li><a href="#">Products</a></li>
+    <li class="products-item"
+    (mouseenter)="productsOpen = true"
+    (mouseleave)="productsOpen = false">
+
+  <a routerLink="/products">Products</a>
+
+  <ul class="products-dropdown" *ngIf="productsOpen">
+    <li>
+      <a routerLink="/products" [queryParams]="{ category: 'electronics' }">
+        Electronics
+      </a>
+    </li>
+    <li>
+      <a routerLink="/products" [queryParams]="{ category: 'clothing' }">
+        Clothing
+      </a>
+    </li>
+    <li>
+      <a routerLink="/products" [queryParams]="{ category: 'sports' }">
+        Sports
+      </a>
+    </li>
+    <li>
+      <a routerLink="/products" [queryParams]="{ category: 'accessories' }">
+        Accessories
+      </a>
+    </li>
+  </ul>
+
+</li>
     <li><a routerLink="about">About</a></li>
     <li><a routerLink="Contact">Contact</a></li>
   </ul>
+  
 
   <div class="nav-actions-group">
     <a href="#" class="nav-cart" aria-label="View shopping cart">
diff --git a/FrontEnd/src/app/components/navbar/navbar.component.ts b/FrontEnd/src/app/components/navbar/navbar.component.ts
index da7d311..79cdef8 100644
--- a/FrontEnd/src/app/components/navbar/navbar.component.ts
+++ b/FrontEnd/src/app/components/navbar/navbar.component.ts
@@ -15,6 +15,9 @@ export class NavbarComponent {
   menuActive = false;
   cartCount: number = 0;
   isDropdownOpen = false; 
+  productsOpen = false;
+
+
 
   constructor(
     private cartService: CartService,