diff --git a/package.json b/package.json
index 123a0412c..0b314f4fc 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "ajv-keywords": "^3.5.2",
     "clsx": "^2.0.0",
     "lint": "^0.8.19",
+    "lucide-react": "^0.517.0",
     "prism-react-renderer": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -52,20 +53,20 @@
   "devDependencies": {
     "@docusaurus/plugin-client-redirects": "^3.2.1",
     "@tailwindcss/typography": "^0.5.0",
-    "autoprefixer": "^10.4.0",
+    "autoprefixer": "^10.4.21",
     "docusaurus": "^1.14.7",
     "docusaurus-tailwindcss-loader": "file:plugins/docusaurus-tailwindcss-loader",
     "eslint": "^7.32.0",
     "eslint-plugin-react": "^7.23.2",
     "husky": "^6.0.0",
     "lint-staged": "^11.1.2",
-    "postcss": "^8.4.4",
+    "postcss": "^8.5.6",
     "postcss-import": "^14.0.2",
     "postcss-preset-env": "^7.4.1",
     "prettier": "^2.5.1",
     "prettier-plugin-tailwindcss": "^0.1.4",
     "rimraf": "^6.0.1",
-    "tailwindcss": "^3.0.1"
+    "tailwindcss": "^3.4.17"
   },
   "engines": {
     "node": ">=18.0"
diff --git a/src/theme/NavbarItem/DropdownNavbarItem.js b/src/theme/NavbarItem/DropdownNavbarItem.js
index b79d93149..6e37e76ca 100644
--- a/src/theme/NavbarItem/DropdownNavbarItem.js
+++ b/src/theme/NavbarItem/DropdownNavbarItem.js
@@ -1,13 +1,32 @@
 import React from "react";
-import {useLocation} from "@docusaurus/router";
+import { useLocation } from "@docusaurus/router";
 import DropdownNavbarItem from "@theme-original/NavbarItem/DropdownNavbarItem";
 
 export default function DropdownNavbarItemWrapper(props) {
-  const {search, hash} = useLocation();
+  const { search, hash } = useLocation();
+
+  // Update the first item's link dynamically
   props.items[0].to = `/server/installation/${search}${hash}`;
+
   return (
-    <>
-      <DropdownNavbarItem {...props} />
-    </>
+    <div className="relative group">
+      <DropdownNavbarItem
+        {...props}
+        className="transition duration-300 ease-in-out text-gray-700 hover:text-keploybrightblue"
+      />
+      <div
+        className="absolute left-0 mt-2 w-48 bg-white shadow-lg rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-50"
+      >
+        {props.items.map((item, idx) => (
+          <a
+            key={idx}
+            href={item.to}
+            className="block px-4 py-2 text-sm text-gray-700 hover:bg-keployblue hover:text-black"
+          >
+            {item.label}
+          </a>
+        ))}
+      </div>
+    </div>
   );
 }