diff --git a/src/App.css b/src/App.css
index 4061e64..8a8ff4a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -9438,36 +9438,55 @@
 }
 
 .nav-dropdown-trigger {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
   display: flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: 0;
+}
+
+.nav-dropdown-label {
   color: var(--brand-muted);
   font-family: inherit;
   font-weight: 500;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   font-size: 0.96rem;
-  line-height: inherit;
+  text-decoration: none;
   transition: color 200ms;
+  line-height: inherit;
 }
 
-.nav-dropdown-trigger:hover,
-.nav-dropdown--open .nav-dropdown-trigger {
+.nav-dropdown-label:hover,
+.nav-dropdown--open .nav-dropdown-label {
   color: var(--brand-gold);
 }
 
+.nav-dropdown-caret {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 0 0 0.25rem;
+  color: var(--brand-muted);
+  font-size: 0.7em;
+  line-height: inherit;
+  transition: color 200ms;
+  opacity: 0.7;
+}
+
+.nav-dropdown-caret:hover,
+.nav-dropdown--open .nav-dropdown-caret {
+  color: var(--brand-gold);
+  opacity: 1;
+}
+
 .nav-dropdown-arrow {
   font-size: 0.7em;
   opacity: 0.7;
 }
 
 .nav-dropdown-menu {
+  display: none;
   position: absolute;
-  top: calc(100% + 0.75rem);
+  top: calc(100% + 0.5rem);
   left: 50%;
   transform: translateX(-50%);
   background: rgba(15, 15, 12, 0.98);
@@ -9479,6 +9498,11 @@
   box-shadow: 0 8px 24px rgba(0,0,0,0.5);
 }
 
+.nav-dropdown:hover .nav-dropdown-menu,
+.nav-dropdown--open .nav-dropdown-menu {
+  display: block;
+}
+
 .nav-dropdown-item {
   display: block;
   padding: 0.55rem 1.1rem;
@@ -9711,6 +9735,11 @@
     border-bottom: 1px solid rgba(201, 168, 76, 0.12);
   }
 
+  .nav-dropdown-label {
+    flex: 1;
+    padding: 0;
+  }
+
   .nav-dropdown-menu {
     display: none;
     position: static;
@@ -9723,6 +9752,10 @@
     min-width: 0;
   }
 
+  .nav-dropdown:hover .nav-dropdown-menu {
+    display: none;
+  }
+
   .nav-dropdown--open .nav-dropdown-menu {
     display: block;
   }
diff --git a/src/App.tsx b/src/App.tsx
index e7ad959..86fe447 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -377,20 +377,26 @@ function SiteSearchBar({ content }: { content: SiteContent }) {
 function SiteHeader({ content }: { content: SiteContent }) {
   const [menuOpen, setMenuOpen] = useState(false)
   const [episodesOpen, setEpisodesOpen] = useState(false)
+  const [studiesOpen, setStudiesOpen] = useState(false)
   const dropdownRef = useRef<HTMLDivElement>(null)
+  const studiesDropdownRef = useRef<HTMLDivElement>(null)
   const spotifyUrl = content.platformSpotifyUrl || '/spotify'
   const location = useLocation()
   const episodesActive = location.pathname.startsWith('/episodes') || location.pathname.startsWith('/finished')
+  const studiesActive = location.pathname.startsWith('/study') || location.pathname === '/scripture'
 
   useEffect(() => {
     function handleOutsideClick(e: MouseEvent) {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
         setEpisodesOpen(false)
       }
+      if (studiesDropdownRef.current && !studiesDropdownRef.current.contains(e.target as Node)) {
+        setStudiesOpen(false)
+      }
     }
-    if (episodesOpen) document.addEventListener('mousedown', handleOutsideClick)
+    if (episodesOpen || studiesOpen) document.addEventListener('mousedown', handleOutsideClick)
     return () => document.removeEventListener('mousedown', handleOutsideClick)
-  }, [episodesOpen])
+  }, [episodesOpen, studiesOpen])
 
   return (
     <header className="site-header">
@@ -410,23 +416,31 @@ function SiteHeader({ content }: { content: SiteContent }) {
         <nav id="site-nav" className={`header-nav ${menuOpen ? 'header-nav--open' : ''}`}>
           {/* Episodes dropdown */}
           <div ref={dropdownRef} className={`nav-dropdown${episodesOpen ? ' nav-dropdown--open' : ''}`}>
-            <button
-              type="button"
-              className={`nav-dropdown-trigger${episodesActive ? ' header-nav-link--active' : ''}`}
-              onClick={() => setEpisodesOpen(o => !o)}
-              aria-expanded={episodesOpen}
-            >
-              Episodes <span className="nav-dropdown-arrow" aria-hidden="true">{episodesOpen ? '▴' : '▾'}</span>
-            </button>
-            {episodesOpen && (
-              <div className="nav-dropdown-menu">
-                <NavLink to="/episodes" className={({ isActive }) => `nav-dropdown-item${isActive ? ' nav-dropdown-item--active' : ''}`} onClick={() => { setMenuOpen(false); setEpisodesOpen(false) }}>Current Series</NavLink>
-                <NavLink to="/finished" className={({ isActive }) => `nav-dropdown-item${isActive ? ' nav-dropdown-item--active' : ''}`} onClick={() => { setMenuOpen(false); setEpisodesOpen(false) }}>Finished Books</NavLink>
-              </div>
-            )}
+            <div className="nav-dropdown-trigger">
+              <NavLink to="/episodes" className={`nav-dropdown-label${episodesActive ? ' header-nav-link--active' : ''}`} onClick={() => { setMenuOpen(false); setEpisodesOpen(false) }}>Episodes</NavLink>
+              <button type="button" className="nav-dropdown-caret" onClick={() => setEpisodesOpen(o => !o)} aria-expanded={episodesOpen} aria-label="Episodes menu">
+                <span aria-hidden="true">{episodesOpen ? '▴' : '▾'}</span>
+              </button>
+            </div>
+            <div className="nav-dropdown-menu">
+              <NavLink to="/episodes" className={({ isActive }) => `nav-dropdown-item${isActive ? ' nav-dropdown-item--active' : ''}`} onClick={() => { setMenuOpen(false); setEpisodesOpen(false) }}>Current Series</NavLink>
+              <NavLink to="/finished" className={({ isActive }) => `nav-dropdown-item${isActive ? ' nav-dropdown-item--active' : ''}`} onClick={() => { setMenuOpen(false); setEpisodesOpen(false) }}>Finished Books</NavLink>
+            </div>
           </div>
           <NavLink to="/questions" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>Q&amp;A</NavLink>
-          <NavLink to="/study" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>Studies</NavLink>
+          {/* Studies dropdown */}
+          <div ref={studiesDropdownRef} className={`nav-dropdown${studiesOpen ? ' nav-dropdown--open' : ''}`}>
+            <div className="nav-dropdown-trigger">
+              <NavLink to="/study" className={`nav-dropdown-label${studiesActive ? ' header-nav-link--active' : ''}`} onClick={() => { setMenuOpen(false); setStudiesOpen(false) }}>Studies</NavLink>
+              <button type="button" className="nav-dropdown-caret" onClick={() => setStudiesOpen(o => !o)} aria-expanded={studiesOpen} aria-label="Studies menu">
+                <span aria-hidden="true">{studiesOpen ? '▴' : '▾'}</span>
+              </button>
+            </div>
+            <div className="nav-dropdown-menu">
+              <NavLink to="/study" className={({ isActive }) => `nav-dropdown-item${isActive ? ' nav-dropdown-item--active' : ''}`} onClick={() => { setMenuOpen(false); setStudiesOpen(false) }}>All Studies</NavLink>
+              <NavLink to="/scripture" className={({ isActive }) => `nav-dropdown-item${isActive ? ' nav-dropdown-item--active' : ''}`} onClick={() => { setMenuOpen(false); setStudiesOpen(false) }}>Scripture Index</NavLink>
+            </div>
+          </div>
           <NavLink to="/study/account" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>My Account</NavLink>
           <NavLink to="/resources" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>Resources</NavLink>
           <NavLink to="/about" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>About</NavLink>