diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 3d82063..f4e367e 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -24,6 +24,8 @@ import GitHubIntelligencePage from "./pages/GitHubIntelligencePage";
 import GitHubCallbackPage from "./pages/GitHubCallbackPage";
 import ProtectedRoute from "./components/shared/ProtectedRoute";
 import PublicRoute from "./components/shared/PublicRoute";
+
+
 import FAQSection from "./components/explore/FAQSection";
 export default function App() {
   return (
@@ -102,7 +104,10 @@ export default function App() {
             <Route path="/terms" element={<TermsPage/>} />
             <Route path="/privacy" element={<PrivacyPage/>} />
             <Route path="*" element={<NotFoundPage />} />
+            
           </Routes>
+
+
         </MainLayout>
       </BrowserRouter>
     </AuthProvider>
diff --git a/frontend/src/components/shared/Navbar.jsx b/frontend/src/components/shared/Navbar.jsx
index b09b7d2..fc47ef2 100644
--- a/frontend/src/components/shared/Navbar.jsx
+++ b/frontend/src/components/shared/Navbar.jsx
@@ -220,6 +220,30 @@ export default function Navbar() {
             </button>
 
             {/* ── Mega Menu Panel ── */}
+            <div
+              ref={megaRef}
+              onMouseEnter={handleMegaMouseEnter}
+              onMouseLeave={handleMegaMouseLeave}
+              aria-hidden={!megaOpen}
+              className={`absolute top-full left-1/2 mt-4 w-[580px] bg-white border-4 border-black z-50 transition-all duration-200 origin-top ${
+                megaOpen 
+                  ? "opacity-100 translate-y-0 scale-100 visible" 
+                  : "opacity-0 -translate-y-2 scale-95 invisible"
+              }`}
+              style={{ transform: "translateX(-50%)" }}
+            >
+              {/* Top accent bar */}
+              <div className="h-1 w-full bg-black" />
+
+              <div className="p-3">
+                
+
+                <div className="grid grid-cols-2 gap-[2px] bg-black border-2 border-black overflow-hidden">
+                  {MEGA_MENU_ITEMS.map((item, i) => {
+                    const Wrapper = item.to ? Link : "button";
+                    const hasSubmenu = item.submenu && item.submenu.length > 0;
+                    
+                    if (hasSubmenu) {
             {megaOpen && (
               <div
                 id="tools-mega-menu"
@@ -299,14 +323,17 @@ export default function Navbar() {
                       }
 
                       return (
-                        <Wrapper
+                        <div
                           key={item.label}
-                          to={item.to}
-                          onClick={closeMenu}
-                          className={`group text-left p-4 border-black transition-colors duration-150 hover:bg-black hover:text-white ${
-                            i % 2 === 0 ? "border-r-2" : ""
-                          } ${i < MEGA_MENU_ITEMS.length - 2 ? "border-b-2" : ""}`}
+                          className="col-span-2 bg-white"
                         >
+                          <div className="p-3 bg-black text-white flex items-center justify-between">
+                            <div className="flex items-center gap-2">
+                              <span className="text-sm">{item.icon}</span>
+                              <span className="text-xs font-black uppercase tracking-widest">
+                                {item.label}
+                              </span>
+                            </div>
                           <div className="flex items-center gap-2 mb-1">
                             <span className="text-base font-black leading-none">
                               {item.icon}
@@ -315,31 +342,64 @@ export default function Navbar() {
                               {item.label}
                             </span>
                             {item.tag && (
-                              <span className="text-[9px] font-black tracking-widest border-2 border-current px-[5px] py-[1px] leading-tight">
+                              <span className="text-[8px] font-black tracking-widest border border-white px-1.5 py-0.5">
                                 {item.tag}
                               </span>
                             )}
                           </div>
-                          <p className="text-xs font-bold tracking-wide leading-snug opacity-60 group-hover:opacity-80 pl-6">
-                            {item.desc}
-                          </p>
-                        </Wrapper>
+                          <div className="grid grid-cols-2 gap-[2px] bg-black">
+                            {item.submenu.map((subItem) => (
+                              <Link
+                                key={subItem.label}
+                                to={subItem.to}
+                                onClick={closeMenu}
+                                className="group flex flex-col p-3 bg-white hover:bg-gray-50 transition-colors"
+                              >
+                                <div className="flex items-center gap-2 mb-0.5">
+                                  <span className="text-xs group-hover:scale-110 transition-transform">{subItem.icon}</span>
+                                  <span className="text-[11px] font-black uppercase tracking-wider group-hover:underline decoration-2">
+                                    {subItem.label}
+                                  </span>
+                                </div>
+                                <p className="text-[10px] font-bold text-gray-500 pl-5 leading-tight">
+                                  {subItem.desc}
+                                </p>
+                              </Link>
+                            ))}
+                          </div>
+                        </div>
                       );
-                    })}
-                  </div>
-
-                  {/* Footer strip */}
-                  <div className="mt-4 pt-3 border-t-2 border-black flex items-center justify-between">
-                    <span className="text-[10px] font-black uppercase tracking-[0.15em] text-gray-500">
-                      More tools shipping soon
-                    </span>
-                    <span className="text-[10px] font-black uppercase tracking-widest border-b-2 border-black hover:opacity-60 cursor-pointer">
-                      View All →
-                    </span>
-                  </div>
+                    }
+                    
+                    return (
+                      <Wrapper
+                        key={item.label}
+                        to={item.to}
+                        onClick={closeMenu}
+                        className="group flex flex-col p-4 bg-white hover:bg-black hover:text-white transition-all duration-150"
+                      >
+                        <div className="flex items-center gap-2 mb-1">
+                          <span className="text-lg group-hover:scale-110 transition-transform">{item.icon}</span>
+                          <span className="text-xs font-black uppercase tracking-widest">
+                            {item.label}
+                          </span>
+                          {item.tag && (
+                            <span className="text-[8px] font-black tracking-widest border-2 border-current px-1.5 py-0.5">
+                              {item.tag}
+                            </span>
+                          )}
+                        </div>
+                        <p className="text-[10px] font-bold opacity-60 group-hover:opacity-100 pl-6 leading-relaxed">
+                          {item.desc}
+                        </p>
+                      </Wrapper>
+                    );
+                  })}
                 </div>
+
+                
               </div>
-            )}
+            </div>
           </div>
         </div>
 
@@ -569,7 +629,7 @@ export default function Navbar() {
                   return (
                     <Wrapper
                       key={item.label}
-                      to={item.to}
+                      {...(item.to ? { to: item.to } : { type: "button" })} 
                       onClick={closeMenu}
                       className="w-full text-left px-8 py-3 border-b border-black/10 hover:bg-black hover:text-white transition-colors duration-150 group"
                     >