diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index a88f3dc..d29b9f1 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -14,6 +14,7 @@ function useDisclosure(initialState = false) {
 }
 
 function buildNavItems(country) {
+  const modelBase = country.modelUrl;
   return [
     {
       label: 'Research',
@@ -22,8 +23,28 @@ function buildNavItems(country) {
     },
     {
       label: 'Model',
-      href: country.modelUrl,
-      hasDropdown: false,
+      hasDropdown: true,
+      dropdownItems: [
+        {
+          label: 'Rules',
+          href: `${modelBase}/rules`,
+          children: [
+            { label: 'Coverage', href: `${modelBase}/rules/coverage` },
+            { label: 'Parameters', href: `${modelBase}/rules/parameters` },
+            { label: 'Variables', href: `${modelBase}/rules/variables` },
+          ],
+        },
+        {
+          label: 'Data',
+          href: `${modelBase}/data`,
+          children: [
+            { label: 'Pipeline', href: `${modelBase}/data/pipeline` },
+            { label: 'Calibration', href: `${modelBase}/data/calibration` },
+            { label: 'Validation', href: `${modelBase}/data/validation` },
+          ],
+        },
+        { label: 'Behavioral responses', href: `${modelBase}/behavioral` },
+      ],
     },
     {
       label: 'API',
diff --git a/src/components/homeHeader/HeaderLogo.jsx b/src/components/homeHeader/HeaderLogo.jsx
index 501177b..289ff97 100644
--- a/src/components/homeHeader/HeaderLogo.jsx
+++ b/src/components/homeHeader/HeaderLogo.jsx
@@ -1,25 +1,25 @@
 'use client';
 
-import { spacing } from '@policyengine/ui-kit/legacy/tokens';
 const PolicyEngineLogo = 'https://www.policyengine.org/assets/logos/policyengine/white.svg';
 
 const logoContainerStyles = {
   display: 'flex',
   alignItems: 'center',
   cursor: 'pointer',
+  // Wider gap than between nav items so the logo reads as an anchor
+  marginRight: '40px',
 };
 
 const logoImageStyles = {
   height: '24px',
   width: 'auto',
-  marginRight: 12,
 };
 
 export default function HeaderLogo({ country }) {
   const logoImage = <img src={PolicyEngineLogo} alt="PolicyEngine" style={logoImageStyles} />;
 
   return (
-    <a href={country.siteUrl} style={{ ...logoContainerStyles, marginRight: spacing.md }}>
+    <a href={country.siteUrl} style={logoContainerStyles}>
       {logoImage}
     </a>
   );
diff --git a/src/components/homeHeader/MobileMenu.jsx b/src/components/homeHeader/MobileMenu.jsx
index 35ecaf5..5e1e8bb 100644
--- a/src/components/homeHeader/MobileMenu.jsx
+++ b/src/components/homeHeader/MobileMenu.jsx
@@ -151,7 +151,7 @@ export default function MobileMenu({ country, opened, onOpen, onClose, navItems
                       className="flex flex-col"
                       style={{ gap: spacing.xs, paddingLeft: spacing.md }}
                     >
-                      {item.dropdownItems.map((dropdownItem) => (
+                      {item.dropdownItems.flatMap((dropdownItem) => [
                         <a
                           key={dropdownItem.label}
                           href={dropdownItem.href}
@@ -165,8 +165,25 @@ export default function MobileMenu({ country, opened, onOpen, onClose, navItems
                           }}
                         >
                           {dropdownItem.label}
-                        </a>
-                      ))}
+                        </a>,
+                        ...(dropdownItem.children ?? []).map((grand) => (
+                          <a
+                            key={`${dropdownItem.label}-${grand.label}`}
+                            href={grand.href}
+                            style={{
+                              color: colors.text.inverse,
+                              textDecoration: 'none',
+                              fontWeight: typography.fontWeight.normal,
+                              fontSize: typography.fontSize.sm,
+                              fontFamily: typography.fontFamily.primary,
+                              paddingLeft: '14px',
+                              opacity: 0.85,
+                            }}
+                          >
+                            {grand.label}
+                          </a>
+                        )),
+                      ])}
                     </div>
                   </div>
                 ) : (
diff --git a/src/components/homeHeader/NavItem.jsx b/src/components/homeHeader/NavItem.jsx
index a2f32d4..e472a31 100644
--- a/src/components/homeHeader/NavItem.jsx
+++ b/src/components/homeHeader/NavItem.jsx
@@ -1,41 +1,112 @@
 'use client';
 
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { usePathname } from 'next/navigation';
 import { IconChevronDown } from '@tabler/icons-react';
 import { colors, typography } from '@policyengine/ui-kit/legacy/tokens';
 
+const NAV_ITEM_PADDING_X = 14;
+const NAV_UNDERLINE_INSET = 10;
+const DROPDOWN_GAP = 10;
+const HOVER_OPEN_DELAY_MS = 100;
+const HOVER_CLOSE_DELAY_MS = 200;
+
 const navItemStyle = {
   color: colors.text.inverse,
   fontWeight: typography.fontWeight.medium,
   fontSize: '15px',
   fontFamily: typography.fontFamily.primary,
   textDecoration: 'none',
-  padding: '6px 14px',
-  borderRadius: '6px',
-  transition: 'background-color 0.15s ease',
+  padding: `8px ${NAV_ITEM_PADDING_X}px`,
   letterSpacing: '0.01em',
+  position: 'relative',
 };
 
-const hoverHandlers = {
-  onMouseEnter: (e) => {
-    e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.12)';
-  },
-  onMouseLeave: (e) => {
-    e.currentTarget.style.backgroundColor = 'transparent';
-  },
-};
+function NavUnderline({ visible }) {
+  return (
+    <span
+      aria-hidden="true"
+      style={{
+        position: 'absolute',
+        left: `${NAV_UNDERLINE_INSET}px`,
+        right: `${NAV_UNDERLINE_INSET}px`,
+        bottom: '2px',
+        height: '2px',
+        borderRadius: '2px',
+        backgroundColor: colors.text.inverse,
+        transform: visible ? 'scaleX(1)' : 'scaleX(0)',
+        transformOrigin: 'center',
+        transition: 'transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
+        pointerEvents: 'none',
+      }}
+    />
+  );
+}
 
-/**
- * Check if href is a relative path (internal) vs absolute URL (external).
- */
-function isInternalHref(href) {
-  return !!href && href.startsWith('/');
+function isItemActive(setup, currentPath) {
+  if (!currentPath) return false;
+  const matches = (href) => {
+    if (!href) return false;
+    // External absolute URLs (https://...) never match the local pathname
+    if (href.startsWith('http')) return false;
+    return currentPath === href || currentPath.startsWith(`${href}/`);
+  };
+  if (setup.hasDropdown && setup.dropdownItems) {
+    const walk = (items) =>
+      items.some(
+        (c) => matches(c.href) || (c.children ? walk(c.children) : false),
+      );
+    return walk(setup.dropdownItems);
+  }
+  return matches(setup.href);
 }
 
-/**
- * Apple-style dropdown panel with smooth height reveal and content fade.
- */
-function AppleDropdown({ items, open, onClose }) {
+function DropdownRow({ item, depth, index, visible, onClose }) {
+  const isChild = depth > 0;
+  return (
+    <a
+      href={item.href}
+      onClick={onClose}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%',
+        textAlign: 'left',
+        padding: `${isChild ? 8 : 11}px 16px ${isChild ? 8 : 11}px ${
+          16 + depth * 16
+        }px`,
+        borderRadius: '10px',
+        textDecoration: 'none',
+        fontSize: isChild ? '13px' : '14px',
+        fontFamily: typography.fontFamily.primary,
+        fontWeight: isChild
+          ? typography.fontWeight.medium
+          : typography.fontWeight.semibold,
+        color: isChild ? colors.primary[700] : colors.primary[800],
+        transition: `background-color 0.12s ease 0ms, color 0.12s ease 0ms, opacity 0.3s ease ${
+          visible ? index * 30 : 0
+        }ms`,
+        opacity: visible ? 1 : 0,
+        lineHeight: '1.3',
+        letterSpacing: '-0.01em',
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.backgroundColor = colors.primary[500];
+        e.currentTarget.style.color = colors.text.inverse;
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.backgroundColor = 'transparent';
+        e.currentTarget.style.color = isChild
+          ? colors.primary[700]
+          : colors.primary[800];
+      }}
+    >
+      {item.label}
+    </a>
+  );
+}
+
+function DropdownPanel({ items, open, onClose }) {
   const contentRef = useRef(null);
   const [contentHeight, setContentHeight] = useState(0);
   const [visible, setVisible] = useState(false);
@@ -51,45 +122,34 @@ function AppleDropdown({ items, open, onClose }) {
     }
   }, [open]);
 
-  const handleSelect = useCallback(
-    (item) => {
-      onClose();
-      if (item.href) {
-        window.location.href = item.href;
-      } else if (item.onClick) {
-        item.onClick();
-      }
-    },
-    [onClose]
-  );
+  if (!open && contentHeight === 0) return null;
 
-  if (!open && contentHeight === 0) {
-    return null;
+  // Flatten one level of children for the cascading reveal
+  const rows = [];
+  for (const item of items) {
+    rows.push({ item, depth: 0 });
+    if (item.children) {
+      for (const child of item.children) {
+        rows.push({ item: child, depth: 1 });
+      }
+    }
   }
 
   return (
-    <>
-      {/* Invisible click-away layer (no dim) — sits below the header's z-index */}
-      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-      <div
-        onClick={onClose}
-        style={{
-          position: 'fixed',
-          inset: 0,
-          zIndex: 999,
-          cursor: 'default',
-        }}
-      />
-      {/* Dropdown panel */}
+    <div
+      // Bridge across the visual gap so hover doesn't close while travelling.
+      style={{
+        position: 'absolute',
+        top: '100%',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        paddingTop: `${DROPDOWN_GAP}px`,
+        zIndex: 1001,
+      }}
+    >
       <div
         style={{
-          position: 'absolute',
-          top: '100%',
-          left: '50%',
-          transform: visible
-            ? 'translateX(-50%) translateY(0)'
-            : 'translateX(-50%) translateY(-8px)',
-          marginTop: '10px',
+          transform: visible ? 'translateY(0)' : 'translateY(-8px)',
           minWidth: '220px',
           overflow: 'hidden',
           maxHeight: visible ? `${contentHeight}px` : '0px',
@@ -97,104 +157,118 @@ function AppleDropdown({ items, open, onClose }) {
           transition:
             'max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
           borderRadius: '14px',
-          background: `linear-gradient(135deg, rgba(255,255,255,0.97), rgba(240,249,255,0.95))`,
+          background:
+            'linear-gradient(135deg, rgba(255,255,255,0.97), rgba(240,249,255,0.95))',
           backdropFilter: 'blur(24px) saturate(200%)',
           WebkitBackdropFilter: 'blur(24px) saturate(200%)',
           boxShadow:
             '0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.6)',
-          zIndex: 1001,
         }}
       >
         <div ref={contentRef} style={{ padding: '8px' }}>
-          {items.map((item, i) => (
-            <button
-              key={item.label}
-              type="button"
-              onClick={() => handleSelect(item)}
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                width: '100%',
-                textAlign: 'left',
-                padding: '11px 16px',
-                borderRadius: '10px',
-                border: 'none',
-                background: 'transparent',
-                cursor: 'pointer',
-                fontSize: '14px',
-                fontFamily: typography.fontFamily.primary,
-                fontWeight: typography.fontWeight.semibold,
-                color: colors.primary[800],
-                transition: 'background-color 0.12s ease, color 0.12s ease, opacity 0.3s ease',
-                transitionDelay: visible ? `${i * 50}ms` : '0ms',
-                opacity: visible ? 1 : 0,
-                lineHeight: '1.3',
-                letterSpacing: '-0.01em',
-              }}
-              onMouseEnter={(e) => {
-                e.currentTarget.style.backgroundColor = colors.primary[500];
-                e.currentTarget.style.color = colors.text.inverse;
-              }}
-              onMouseLeave={(e) => {
-                e.currentTarget.style.backgroundColor = 'transparent';
-                e.currentTarget.style.color = colors.primary[800];
-              }}
-            >
-              {item.label}
-            </button>
+          {rows.map(({ item, depth }, i) => (
+            <DropdownRow
+              key={`${item.label}-${item.href}`}
+              item={item}
+              depth={depth}
+              index={i}
+              visible={visible}
+              onClose={onClose}
+            />
           ))}
         </div>
       </div>
-    </>
+    </div>
   );
 }
 
 /**
  * Reusable navigation item component.
- * Can be either a simple link or a dropdown menu.
+ * Hover opens dropdowns with a 100ms intent delay and a 200ms grace
+ * close; the underline grows from the center on hover or when active.
  */
 export default function NavItem({ setup }) {
   const { label, onClick, href, hasDropdown, dropdownItems } = setup;
+  const pathname = usePathname();
   const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [hovered, setHovered] = useState(false);
   const containerRef = useRef(null);
+  const openTimerRef = useRef(null);
+  const closeTimerRef = useRef(null);
 
-  // Close on click outside
-  useEffect(() => {
-    if (!dropdownOpen) {
-      return;
+  const clearTimers = useCallback(() => {
+    if (openTimerRef.current) {
+      clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    }
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
     }
+  }, []);
+
+  useEffect(() => clearTimers, [clearTimers]);
+
+  // Outside-click and Escape close
+  useEffect(() => {
+    if (!dropdownOpen) return;
     function handleClick(e) {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         setDropdownOpen(false);
       }
     }
-    document.addEventListener('mousedown', handleClick);
-    return () => document.removeEventListener('mousedown', handleClick);
-  }, [dropdownOpen]);
-
-  // Close on Escape
-  useEffect(() => {
-    if (!dropdownOpen) {
-      return;
-    }
     function handleKey(e) {
-      if (e.key === 'Escape') {
-        setDropdownOpen(false);
-      }
+      if (e.key === 'Escape') setDropdownOpen(false);
     }
+    document.addEventListener('mousedown', handleClick);
     document.addEventListener('keydown', handleKey);
-    return () => document.removeEventListener('keydown', handleKey);
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+      document.removeEventListener('keydown', handleKey);
+    };
   }, [dropdownOpen]);
 
+  const handleMouseEnter = () => {
+    setHovered(true);
+    if (!hasDropdown) return;
+    clearTimers();
+    openTimerRef.current = setTimeout(
+      () => setDropdownOpen(true),
+      HOVER_OPEN_DELAY_MS,
+    );
+  };
+
+  const handleMouseLeave = () => {
+    setHovered(false);
+    if (!hasDropdown) return;
+    clearTimers();
+    closeTimerRef.current = setTimeout(
+      () => setDropdownOpen(false),
+      HOVER_CLOSE_DELAY_MS,
+    );
+  };
+
+  const active = isItemActive(setup, pathname || '');
+  const underlineVisible = active || hovered || dropdownOpen;
+
   if (hasDropdown && dropdownItems) {
     return (
-      <div ref={containerRef} style={{ position: 'relative' }}>
+      <div
+        ref={containerRef}
+        style={{ position: 'relative' }}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
         <button
           type="button"
           onClick={() => {
             onClick?.();
             setDropdownOpen((prev) => !prev);
           }}
+          onFocus={() => setHovered(true)}
+          onBlur={() => setHovered(false)}
+          aria-expanded={dropdownOpen}
+          aria-haspopup="true"
           style={{
             ...navItemStyle,
             background: 'transparent',
@@ -204,7 +278,6 @@ export default function NavItem({ setup }) {
             alignItems: 'center',
             gap: '4px',
           }}
-          {...hoverHandlers}
         >
           <span>{label}</span>
           <IconChevronDown
@@ -216,8 +289,9 @@ export default function NavItem({ setup }) {
               transform: dropdownOpen ? 'rotate(180deg)' : 'rotate(0deg)',
             }}
           />
+          <NavUnderline visible={underlineVisible} />
         </button>
-        <AppleDropdown
+        <DropdownPanel
           items={dropdownItems}
           open={dropdownOpen}
           onClose={() => setDropdownOpen(false)}
@@ -226,10 +300,19 @@ export default function NavItem({ setup }) {
     );
   }
 
-  // Absolute URLs use standard anchor tag
   return (
-    <a href={href} onClick={href ? undefined : onClick} style={navItemStyle} {...hoverHandlers}>
+    <a
+      href={href}
+      onClick={href ? undefined : onClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onFocus={() => setHovered(true)}
+      onBlur={() => setHovered(false)}
+      aria-current={active ? 'page' : undefined}
+      style={navItemStyle}
+    >
       {label}
+      <NavUnderline visible={underlineVisible} />
     </a>
   );
 }