diff --git a/netlify.toml b/netlify.toml
index 8ddcf34e041..721002ee739 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -103,7 +103,7 @@
 # ========== INDIVIDUAL REDIRECTS ==========
 [[redirects]]
   from = "/contact/sales"
-  to = "/contact/product-specialist"
+  to = "/demo"
   status = 301
 
 [[redirects]]
@@ -125,4 +125,12 @@
   from = "/cloud-beta"
   to = "/"
   status = 301
+
+[[redirects]]
+  from = "/contact/product-specialist"
+  to = "/demo"
+
+[[redirects]]
+  from = "/use-cases/vulnerabilities"
+  to = "/use-cases/code-security"
 # ========== END INDIVIDUAL REDIRECTS ==========
diff --git a/src/components/Actions/ContactPresalesSupportAction.tsx b/src/components/Actions/ContactPresalesSupportAction.tsx
index d28fa73c602..d9393cd66be 100644
--- a/src/components/Actions/ContactPresalesSupportAction.tsx
+++ b/src/components/Actions/ContactPresalesSupportAction.tsx
@@ -8,7 +8,7 @@ interface Props {
 }
 
 export const ContactPresalesSupportAction: FunctionComponent<Props> = ({ className = '' }) => (
-    <Link href="/contact/product-specialist" passHref={true}>
+    <Link href="/demo" passHref={true}>
         <a href="#none" className={`d-flex align-items-center text-decoration-none ${className}`}>
             Talk to a product specialist
             <ArrowRightBoxIcon className="text-primary ml-1" />
diff --git a/src/components/Blog/ReleasePost.tsx b/src/components/Blog/ReleasePost.tsx
index a94800c5633..c6633eb8ab8 100644
--- a/src/components/Blog/ReleasePost.tsx
+++ b/src/components/Blog/ReleasePost.tsx
@@ -60,8 +60,7 @@ export const ReleasePost: FunctionComponent<Props> = ({
                 </li>
             </ul>
             <div className="card-body release-post__body">
-                * Please <Link href="/contact/product-specialist/">contact Sourcegraph</Link> with any licensing
-                questions.
+                * Please <Link href="/demo">contact Sourcegraph</Link> with any licensing questions.
             </div>
         </>
     )
diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx
index 61ab0f5bc3e..e778c14c2ef 100644
--- a/src/components/Layout/Footer.tsx
+++ b/src/components/Layout/Footer.tsx
@@ -23,10 +23,10 @@ const Footer: FunctionComponent<Props> = ({ minimal, className }) => (
                             <h3 className="footer__nav-header">About Sourcegraph</h3>
                             <ul className="nav flex-column">
                                 <li className="nav-item">
-                                    <Link href="/case-studies">Case studies</Link>
+                                    <Link href="/use-cases">Use cases</Link>
                                 </li>
                                 <li className="nav-item">
-                                    <Link href="/use-cases">Use cases</Link>
+                                    <Link href="/case-studies">Case studies</Link>
                                 </li>
                                 <li className="nav-item">
                                     <Link href="/pricing">Pricing</Link>
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
deleted file mode 100644
index dc15ea81a79..00000000000
--- a/src/components/Layout/Header.tsx
+++ /dev/null
@@ -1,280 +0,0 @@
-import { FunctionComponent, useState } from 'react'
-
-import ChevronDownIcon from 'mdi-react/ChevronDownIcon'
-import Link from 'next/link'
-import Nav from 'react-bootstrap/Nav'
-import Navbar from 'react-bootstrap/Navbar'
-import NavDropdown from 'react-bootstrap/NavDropdown'
-
-interface Props {
-    isHome?: boolean
-    isBlog?: boolean
-    isProductPage?: boolean
-    minimal?: boolean
-    className?: string
-    hideGetStartedButton?: boolean
-}
-
-const onRightClickLogo = (event: React.MouseEvent): void => {
-    event.preventDefault()
-
-    if (event.button === 3) {
-        window.location.href =
-            'https://f.hubspotusercontent20.net/hubfs/2762526/Brand%20assets/Sourcegraph%20Brand%20Kit%202.2%20-%20May%202021.zip'
-    }
-}
-
-const Header: FunctionComponent<Props> = props => {
-    const [isOpen, setIsOpen] = useState(false)
-    const [productMenuOpen, setProductMenuOpen] = useState(false)
-    const [resourcesMenuOpen, setResourcesMenuOpen] = useState(false)
-    const [customerMenuOpen, setCustomerMenuOpen] = useState(false)
-
-    return (
-        <nav className={`header navbar py-3 ${props.className || 'navbar-light'}`}>
-            <div className="container-xl">
-                <Navbar.Brand className="header__logo" href="/" onContextMenu={onRightClickLogo}>
-                    <span role="img" aria-label="Sourcegraph - Universal code search">
-                        {' '}
-                    </span>
-                </Navbar.Brand>
-
-                {!props.minimal && (
-                    <>
-                        <button
-                            type="button"
-                            className="navbar-toggler justify-content-end"
-                            data-toggle="collapse"
-                            data-target="#mobile-navbar"
-                            onClick={() => setIsOpen(!isOpen)}
-                        >
-                            <span className="sr-only">Toggle navigation</span>
-                            <span className="navbar-toggler-icon" />
-                        </button>
-
-                        <Nav className="left-nav me-auto ml-md-2">
-                            <NavDropdown id="productDropdown" title="Product">
-                                <NavDropdown.Item href="/code-search">Code Search</NavDropdown.Item>
-                                <NavDropdown.Item href="/batch-changes">Batch Changes</NavDropdown.Item>
-                                <NavDropdown.Item href="/code-insights">Code Insights</NavDropdown.Item>
-                                <NavDropdown.Item href="https://docs.sourcegraph.com/code_intelligence">
-                                    Code Intelligence
-                                </NavDropdown.Item>
-                            </NavDropdown>
-
-                            <NavDropdown id="resourcesDropdown" title="Resources">
-                                <NavDropdown.Item href="/blog">Blog</NavDropdown.Item>
-                                <NavDropdown.Item href="https://learn.sourcegraph.com/" target="_blank">
-                                    Learn
-                                </NavDropdown.Item>
-                                <NavDropdown.Item href="https://www.youtube.com/playlist?list=PL6zLuuRVa1_iDEP4EicZ8972RgyccCRGF">
-                                    Dev Tool Time
-                                </NavDropdown.Item>
-                                <NavDropdown.Item href="/podcast/">Sourcegraph Podcast</NavDropdown.Item>
-                            </NavDropdown>
-
-                            <NavDropdown id="customersDropdown" title="Customers">
-                                <NavDropdown.Item href="/case-studies">Case studies</NavDropdown.Item>
-                                <NavDropdown.Item href="/use-cases">Use cases</NavDropdown.Item>
-                                <NavDropdown.Item href="/contact/product-specialist">Become one</NavDropdown.Item>
-                            </NavDropdown>
-
-                            <Nav.Link href="/pricing">Pricing</Nav.Link>
-
-                            <Nav.Link href="https://docs.sourcegraph.com" target="_blank">
-                                Docs
-                            </Nav.Link>
-                        </Nav>
-
-                        <Nav className="right-nav justify-content-lg-end">
-                            {!props.hideGetStartedButton && (
-                                <Nav.Link
-                                    className="btn btn-simple px-2 py-2 font-weight-bolder"
-                                    href="https://sourcegraph.com/search"
-                                    title="Search code"
-                                >
-                                    Search code
-                                </Nav.Link>
-                            )}
-
-                            <Nav.Link
-                                className="btn btn-outline-primary ml-3 px-5 py-2 font-weight-bolder"
-                                href="/demo"
-                                title="Request a demo"
-                            >
-                                Request a demo
-                            </Nav.Link>
-
-                            {!props.hideGetStartedButton && (
-                                <Nav.Link
-                                    className="btn btn-primary ml-3 px-5 py-2 font-weight-bolder"
-                                    href="/get-started"
-                                    title="Get started"
-                                >
-                                    Get started
-                                </Nav.Link>
-                            )}
-                        </Nav>
-
-                        {/* Mobile Navbar */}
-                        <div id="mobile-navbar" className={`collapse navbar-collapse ${isOpen ? 'show' : 'hide'}`}>
-                            <ul className="nav navbar-nav">
-                                <li className="header__nav-item nav-item" role="presentation">
-                                    <span
-                                        role="button"
-                                        className="nav-link navbar-toggle collapsed"
-                                        data-toggle="collapse"
-                                        data-target="#product-menu"
-                                        aria-expanded="false"
-                                        onClick={() => setProductMenuOpen(!productMenuOpen)}
-                                        onKeyDown={() => setProductMenuOpen(!productMenuOpen)}
-                                        tabIndex={0}
-                                    >
-                                        Product
-                                        <ChevronDownIcon className="icon-inline ml-1" />
-                                    </span>
-                                    <ul
-                                        id="product-menu"
-                                        className={`small-menu collapse navbar-collapse ${
-                                            productMenuOpen ? 'show' : 'hide'
-                                        }`}
-                                    >
-                                        <li className="nav-link" role="presentation">
-                                            <Link href="/code-search">Code Search</Link>
-                                        </li>
-                                        <li className="nav-link" role="presentation">
-                                            <Link href="/batch-changes">Batch Changes</Link>
-                                        </li>
-                                        <li className="nav-link" role="presentation">
-                                            <Link href="/code-insights">Code Insights</Link>
-                                        </li>
-                                        <li className="nav-link" role="presentation">
-                                            <a href="https://docs.sourcegraph.com/code_intelligence">
-                                                Code Intelligence
-                                            </a>
-                                        </li>
-                                    </ul>
-                                </li>
-                                <li className="nav-item" role="presentation">
-                                    <span
-                                        role="button"
-                                        className="nav-link navbar-toggle collapsed"
-                                        data-toggle="collapse"
-                                        data-target="#resources-menu"
-                                        aria-expanded="false"
-                                        onClick={() => setResourcesMenuOpen(!resourcesMenuOpen)}
-                                        onKeyDown={() => setResourcesMenuOpen(!resourcesMenuOpen)}
-                                        tabIndex={0}
-                                    >
-                                        Resources
-                                        <ChevronDownIcon className="icon-inline ml-1" />
-                                    </span>
-                                    <ul
-                                        id="resources-menu"
-                                        className={`small-menu collapse navbar-collapse ${
-                                            resourcesMenuOpen ? 'show' : 'hide'
-                                        }`}
-                                    >
-                                        <li className="nav-link" role="presentation">
-                                            <Link href="/blog">Blog</Link>
-                                        </li>
-                                        <li className="nav-link" role="presentation">
-                                            <a href="https://learn.sourcegraph.com/" target="_blank" rel="noreferrer">
-                                                Learn
-                                            </a>
-                                        </li>
-                                        <li className="nav-link" role="presentation">
-                                            <a href="https://www.youtube.com/playlist?list=PL6zLuuRVa1_iDEP4EicZ8972RgyccCRGF">
-                                                Dev Tool Time
-                                            </a>
-                                        </li>
-                                        <li className="nav-link" role="presentation">
-                                            <Link href="/podcast">Podcast</Link>
-                                        </li>
-                                    </ul>
-                                </li>
-                                <li className="nav-item" role="presentation">
-                                    <span
-                                        role="button"
-                                        className="nav-link navbar-toggle collapsed"
-                                        data-toggle="collapse"
-                                        data-target="#customer-menu"
-                                        aria-expanded="false"
-                                        onClick={() => setCustomerMenuOpen(!customerMenuOpen)}
-                                        onKeyDown={() => setCustomerMenuOpen(!customerMenuOpen)}
-                                        tabIndex={0}
-                                    >
-                                        Customers
-                                        <ChevronDownIcon className="icon-inline ml-1" />
-                                    </span>
-                                    <ul
-                                        id="customer-menu"
-                                        className={`small-menu collapse navbar-collapse ${
-                                            customerMenuOpen ? 'show' : 'hide'
-                                        }`}
-                                    >
-                                        <li className="nav-link" role="presentation">
-                                            <Link href="/case-studies">Case studies</Link>
-                                        </li>
-                                        <li className="nav-link" role="presentation">
-                                            <Link href="/use-cases">Use cases</Link>
-                                        </li>
-                                        <li className="nav-link" role="presentation">
-                                            <Link href="/contact/product-specialist">Become one</Link>
-                                        </li>
-                                    </ul>
-                                </li>
-                                <li className="nav-item" role="presentation">
-                                    <Link href="/pricing" passHref={true}>
-                                        <a href="#none" className="nav-link">
-                                            Pricing
-                                        </a>
-                                    </Link>
-                                </li>
-                                <li className="nav-item" role="presentation">
-                                    <a
-                                        className="nav-link"
-                                        href="https://docs.sourcegraph.com"
-                                        target="_blank"
-                                        rel="noreferrer"
-                                    >
-                                        Docs
-                                    </a>
-                                </li>
-                                <li className="nav-item" role="presentation">
-                                    <a className="nav-link" href="https://sourcegraph.com/sign-in">
-                                        Sign in
-                                    </a>
-                                </li>
-                                {!props.hideGetStartedButton && (
-                                    <li className="header__nav-item nav-item" role="presentation">
-                                        <a className="nav-link" href="https://sourcegraph.com/search">
-                                            Search code
-                                        </a>
-                                    </li>
-                                )}
-                                <li className="header__nav-item nav-item" role="presentation">
-                                    <Link href="/demo" passHref={true}>
-                                        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                                        <a className="nav-link">Request a demo</a>
-                                    </Link>
-                                </li>
-                                {!props.hideGetStartedButton && (
-                                    <li className="header__nav-item nav-item" role="presentation">
-                                        <Link href="/get-started" passHref={true}>
-                                            <a href="#none" className="nav-link">
-                                                Get started
-                                            </a>
-                                        </Link>
-                                    </li>
-                                )}
-                            </ul>
-                        </div>
-                    </>
-                )}
-            </div>
-        </nav>
-    )
-}
-
-export default Header
diff --git a/src/components/Layout/Header/DesktopNav.tsx b/src/components/Layout/Header/DesktopNav.tsx
new file mode 100644
index 00000000000..2a321893209
--- /dev/null
+++ b/src/components/Layout/Header/DesktopNav.tsx
@@ -0,0 +1,96 @@
+import { FunctionComponent } from 'react'
+
+import { camelCase } from 'lodash'
+import Nav from 'react-bootstrap/Nav'
+import NavDropdown from 'react-bootstrap/NavDropdown'
+
+import { buttonStyle, buttonLocation } from '@data'
+
+import { NavLink } from './navLinks'
+
+interface Props {
+    navLinks: NavLink[]
+    hideGetStartedButton: boolean | undefined
+}
+
+const DesktopNav: FunctionComponent<Props> = ({ navLinks, hideGetStartedButton }) => (
+    <>
+        <Nav className="left-nav me-auto ml-md-2">
+            {navLinks.map(navLink =>
+                navLink.items.length === 1 ? (
+                    navLink.items.map((item: { href: string; title: string }) =>
+                        item.href.includes('http') ? (
+                            <Nav.Link key={camelCase(item.title)} href={item.href} target="_blank" rel="noreferrer">
+                                {item.title}
+                            </Nav.Link>
+                        ) : (
+                            <Nav.Link key={camelCase(item.title)} href={item.href}>
+                                {item.title}
+                            </Nav.Link>
+                        )
+                    )
+                ) : (
+                    <NavDropdown key={navLink.section} id={camelCase(navLink.section)} title={navLink.section}>
+                        {navLink.items.map(item =>
+                            item.href.includes('http') ? (
+                                <NavDropdown.Item
+                                    key={camelCase(item.title)}
+                                    href={item.href}
+                                    target="_blank"
+                                    rel="noreferrer"
+                                >
+                                    {item.title}
+                                </NavDropdown.Item>
+                            ) : (
+                                <NavDropdown.Item key={camelCase(item.title)} href={item.href}>
+                                    {item.title}
+                                </NavDropdown.Item>
+                            )
+                        )}
+                    </NavDropdown>
+                )
+            )}
+        </Nav>
+
+        <Nav className="right-nav justify-content-lg-end">
+            {!hideGetStartedButton && (
+                <Nav.Link
+                    className="btn btn-simple px-2 py-2 font-weight-bolder"
+                    href="https://sourcegraph.com/search"
+                    title="Search code"
+                    data-button-style={buttonStyle.text}
+                    data-button-location={buttonLocation.nav}
+                    data-button-type="cta"
+                >
+                    Search code
+                </Nav.Link>
+            )}
+
+            <Nav.Link
+                className="btn btn-outline-primary ml-3 px-5 py-2 font-weight-bolder"
+                href="/demo"
+                title="Request a demo"
+                data-button-style={buttonStyle.outline}
+                data-button-location={buttonLocation.nav}
+                data-button-type="cta"
+            >
+                Request a demo
+            </Nav.Link>
+
+            {!hideGetStartedButton && (
+                <Nav.Link
+                    className="btn btn-primary ml-3 px-5 py-2 font-weight-bolder"
+                    href="/get-started"
+                    title="Get started"
+                    data-button-style={buttonStyle.primary}
+                    data-button-location={buttonLocation.nav}
+                    data-button-type="cta"
+                >
+                    Get Started
+                </Nav.Link>
+            )}
+        </Nav>
+    </>
+)
+
+export default DesktopNav
diff --git a/src/components/Layout/Header/MobileNav.tsx b/src/components/Layout/Header/MobileNav.tsx
new file mode 100644
index 00000000000..d17ef034ead
--- /dev/null
+++ b/src/components/Layout/Header/MobileNav.tsx
@@ -0,0 +1,153 @@
+import { FunctionComponent, useState } from 'react'
+
+import { camelCase } from 'lodash'
+import ChevronDownIcon from 'mdi-react/ChevronDownIcon'
+import Link from 'next/link'
+
+import { buttonStyle, buttonLocation } from '@data'
+
+import { NavLink } from './navLinks'
+
+interface Props {
+    navLinks: NavLink[]
+    hideGetStartedButton: boolean | undefined
+    isOpen: boolean
+}
+
+const MobileNav: FunctionComponent<Props> = ({ navLinks, hideGetStartedButton, isOpen }) => {
+    const initialMobileMenuState = navLinks.reduce(
+        (accumulator, navLink) => ({ ...accumulator, [camelCase(navLink.section)]: false }),
+        {}
+    )
+    const [openMobileMenu, setOpenMobileMenu] = useState<Record<string, boolean>>(initialMobileMenuState)
+
+    return (
+        <div id="mobile-navbar" className={`collapse navbar-collapse ${isOpen ? 'show' : 'hide'}`}>
+            <ul className="nav navbar-nav">
+                {navLinks.map(navLink =>
+                    navLink.items.length === 1 ? (
+                        navLink.items.map(item =>
+                            item.href.includes('http') ? (
+                                <a
+                                    key={camelCase(item.title)}
+                                    className="nav-link"
+                                    href={item.href}
+                                    target="_blank"
+                                    rel="noreferrer"
+                                >
+                                    {item.title}
+                                </a>
+                            ) : (
+                                <Link key={camelCase(item.title)} href={item.href}>
+                                    {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                                    <a className="nav-link">{item.title}</a>
+                                </Link>
+                            )
+                        )
+                    ) : (
+                        <li className="align-items-center nav-item" role="presentation" key={navLink.section}>
+                            <span
+                                role="button"
+                                className="nav-link navbar-toggle collapsed"
+                                data-toggle="collapse"
+                                data-target={'#' + navLink.section.split(' ').join('-').toLowerCase()}
+                                aria-expanded="false"
+                                onClick={() =>
+                                    setOpenMobileMenu({
+                                        ...openMobileMenu,
+                                        [camelCase(navLink.section)]: !openMobileMenu[camelCase(navLink.section)],
+                                    })
+                                }
+                                onKeyDown={() =>
+                                    setOpenMobileMenu({
+                                        ...openMobileMenu,
+                                        [camelCase(navLink.section)]: !openMobileMenu[camelCase(navLink.section)],
+                                    })
+                                }
+                                tabIndex={0}
+                            >
+                                {navLink.section}
+                                <ChevronDownIcon className="icon-inline ml-1" />
+                            </span>
+                            <ul
+                                id={navLink.section.split(' ').join('-').toLowerCase() + '-menu'}
+                                className={`small-menu collapse navbar-collapse ${
+                                    openMobileMenu[camelCase(navLink.section)] ? 'show' : 'hide'
+                                }`}
+                            >
+                                {navLink.items.map(item =>
+                                    item.href.includes('http') ? (
+                                        <li key={camelCase(item.title)} className="nav-link" role="presentation">
+                                            <a href={item.href} target="_blank" rel="noreferrer">
+                                                {item.title}
+                                            </a>
+                                        </li>
+                                    ) : (
+                                        <li key={camelCase(item.title)} className="nav-link" role="presentation">
+                                            <Link href={item.href}>{item.title}</Link>
+                                        </li>
+                                    )
+                                )}
+                            </ul>
+                        </li>
+                    )
+                )}
+                <li className="nav-item" role="presentation">
+                    <a
+                        className="nav-link"
+                        href="https://sourcegraph.com/sign-in"
+                        data-button-style={buttonStyle.text}
+                        data-button-location={buttonLocation.nav}
+                        data-button-type="cta"
+                    >
+                        Sign in
+                    </a>
+                </li>
+
+                {!hideGetStartedButton && (
+                    <li className="align-items-center nav-item" role="presentation">
+                        <a
+                            className="nav-link"
+                            href="https://sourcegraph.com/search"
+                            data-button-style={buttonStyle.text}
+                            data-button-location={buttonLocation.nav}
+                            data-button-type="cta"
+                        >
+                            Search code
+                        </a>
+                    </li>
+                )}
+                <li className="align-items-center nav-item" role="presentation">
+                    <Link href="/demo" passHref={true}>
+                        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                        <a
+                            className="nav-link"
+                            data-button-style={buttonStyle.text}
+                            data-button-location={buttonLocation.nav}
+                            data-button-type="cta"
+                        >
+                            Request a demo
+                        </a>
+                    </Link>
+                </li>
+                {!hideGetStartedButton && (
+                    <li className="align-items-center nav-item" role="presentation">
+                        <Link href="/get-started" passHref={true}>
+                            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                            <a
+                                className="nav-link"
+                                data-button-style={buttonStyle.text}
+                                data-button-location={buttonLocation.nav}
+                                data-button-type="cta"
+                            >
+                                Get started
+                            </a>
+                        </Link>
+                    </li>
+                )}
+            </ul>
+        </div>
+    )
+}
+
+export default MobileNav
diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx
new file mode 100644
index 00000000000..8ed99398c6f
--- /dev/null
+++ b/src/components/Layout/Header/index.tsx
@@ -0,0 +1,67 @@
+import { FunctionComponent, useState } from 'react'
+
+import Navbar from 'react-bootstrap/Navbar'
+
+import DesktopNav from './DesktopNav'
+import MobileNav from './MobileNav'
+import { NavLink, navLinks } from './navLinks'
+
+interface Props {
+    isHome?: boolean
+    isBlog?: boolean
+    isProductPage?: boolean
+    minimal?: boolean
+    className?: string
+    hideGetStartedButton?: boolean
+    navLinks: NavLink[]
+}
+
+const onRightClickLogo = (event: React.MouseEvent): void => {
+    event.preventDefault()
+
+    if (event.button === 3) {
+        window.location.href =
+            'https://f.hubspotusercontent20.net/hubfs/2762526/Brand%20assets/Sourcegraph%20Brand%20Kit%202.2%20-%20May%202021.zip'
+    }
+}
+
+export const Header: FunctionComponent<Props> = props => {
+    const [isOpen, setIsOpen] = useState(false)
+
+    return (
+        <nav className={`header navbar py-3 ${props.className || 'navbar-light'}`}>
+            <div className="container-xl">
+                <Navbar.Brand className="header__logo" href="/" onContextMenu={onRightClickLogo}>
+                    <span role="img" aria-label="Sourcegraph - Universal code search">
+                        {' '}
+                    </span>
+                </Navbar.Brand>
+
+                {!props.minimal && (
+                    <>
+                        <button
+                            type="button"
+                            className="navbar-toggler justify-content-end"
+                            data-toggle="collapse"
+                            data-target="#mobile-navbar"
+                            onClick={() => setIsOpen(!isOpen)}
+                        >
+                            <span className="sr-only">Toggle navigation</span>
+                            <span className="navbar-toggler-icon" />
+                        </button>
+
+                        <DesktopNav navLinks={navLinks} hideGetStartedButton={props.hideGetStartedButton} />
+
+                        <MobileNav
+                            navLinks={navLinks}
+                            hideGetStartedButton={props.hideGetStartedButton}
+                            isOpen={isOpen}
+                        />
+                    </>
+                )}
+            </div>
+        </nav>
+    )
+}
+
+export default Header
diff --git a/src/components/Layout/Header/navLinks.ts b/src/components/Layout/Header/navLinks.ts
new file mode 100644
index 00000000000..fd84c21831f
--- /dev/null
+++ b/src/components/Layout/Header/navLinks.ts
@@ -0,0 +1,103 @@
+export interface NavLink {
+    section: string
+    items: {
+        title: string
+        href: string
+    }[]
+}
+
+export const navLinks: NavLink[] = [
+    {
+        section: 'Product',
+        items: [
+            {
+                title: 'Code Search',
+                href: '/code-search',
+            },
+            {
+                title: 'Batch Changes',
+                href: '/batch-changes',
+            },
+            {
+                title: 'Code Insights',
+                href: '/code-insights',
+            },
+            {
+                title: 'Code Intelligence',
+                href: 'https://docs.sourcegraph.com/code_intelligence',
+            },
+        ],
+    },
+    {
+        section: 'Resources',
+        items: [
+            {
+                title: 'Blog',
+                href: '/blog',
+            },
+            {
+                title: 'Learn',
+                href: 'https://learn.sourcegraph.com/',
+            },
+            {
+                title: 'Dev Tool Time',
+                href: 'https://www.youtube.com/playlist?list=PL6zLuuRVa1_iDEP4EicZ8972RgyccCRGF',
+            },
+            {
+                title: 'Sourcegraph Podcast',
+                href: '/podcast',
+            },
+            {
+                title: 'Case Studies',
+                href: '/case-studies',
+            },
+        ],
+    },
+    {
+        section: 'Use Cases',
+        items: [
+            {
+                title: 'All Use Cases',
+                href: '/use-cases',
+            },
+            {
+                title: 'Code Security',
+                href: '/use-cases/code-security',
+            },
+            {
+                title: 'Developer Onboarding',
+                href: '/use-cases/onboarding',
+            },
+            {
+                title: 'Incident Response',
+                href: '/use-cases/incident-response',
+            },
+            {
+                title: 'Code Reuse',
+                href: '/use-cases/code-reuse',
+            },
+            {
+                title: 'Code Health',
+                href: '/use-cases/code-health',
+            },
+        ],
+    },
+    {
+        section: 'Pricing',
+        items: [
+            {
+                title: 'Pricing',
+                href: '/pricing',
+            },
+        ],
+    },
+    {
+        section: 'Docs',
+        items: [
+            {
+                title: 'Docs',
+                href: 'https://docs.sourcegraph.com',
+            },
+        ],
+    },
+]
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index d93f319ce72..4ea39d7f990 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -4,7 +4,8 @@ import Head from 'next/head'
 import { useRouter } from 'next/router'
 
 import Footer from './Footer'
-import Header from './Header'
+import { Header } from './Header'
+import { navLinks } from './Header/navLinks'
 
 interface LayoutProps {
     meta?: {
@@ -80,6 +81,7 @@ export const Layout: FunctionComponent<LayoutProps> = props => {
                         minimal={props.minimal}
                         className={props.className}
                         hideGetStartedButton={props.hideGetStartedButton}
+                        navLinks={navLinks}
                     />
 
                     {props.hero}
diff --git a/src/pages/batch-changes.tsx b/src/pages/batch-changes.tsx
index 30b4f92bb09..8632806eeb3 100644
--- a/src/pages/batch-changes.tsx
+++ b/src/pages/batch-changes.tsx
@@ -17,7 +17,7 @@ export const BatchChangesPage: FunctionComponent = () => (
                 'Automate large-scale changes with Sourcegraph Batch Changes. Keep your code up to date and pay down tech debt across all repositories and code hosts.',
         }}
         className="batch-changes-page"
-        heroAndHeaderClassName="batch-changes-page__hero-and-header"
+        heroAndHeaderClassName="batch-changes-page__hero-and-header navbar-light"
         hero={
             <div className="container pb-4">
                 <div className="row">
diff --git a/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx b/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx
index 70f3eb7e0b3..0b0adefa7f9 100644
--- a/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx
+++ b/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx
@@ -53,7 +53,7 @@ export const CaseStudy: FunctionComponent = () => (
                 useCases={[
                     {
                         text: 'Find and fix security vulnerabilities quickly across the codebase.',
-                        href: '/use-cases/vulnerabilities',
+                        href: '/use-cases/code-security',
                     },
                 ]}
                 challenges={[
@@ -238,7 +238,7 @@ export const CaseStudy: FunctionComponent = () => (
                     <p>
                         Log4j is one of many reasons why monitoring and updating is now a renewed priority. “Companies
                         will have to be more diligent,” Jon said. With Sourcegraph, Nutanix is prepared to
-                        <Link href="/use-cases/vulnerabilities"> find and fix the next vulnerability</Link>.
+                        <Link href="/use-cases/code-security"> find and fix the next vulnerability</Link>.
                     </p>
                 </section>
             </ContentSection>
diff --git a/src/pages/contact/index.tsx b/src/pages/contact/index.tsx
index 86d2982101d..167144189e2 100644
--- a/src/pages/contact/index.tsx
+++ b/src/pages/contact/index.tsx
@@ -58,7 +58,7 @@ const ContactHome: FunctionComponent = () => (
                             <h5 className="card-header">Sales</h5>
                             <div className="card-body">
                                 <p className="card-text">For information about products and purchasing:</p>
-                                <Link href="/contact/product-specialist" passHref={true}>
+                                <Link href="/demo" passHref={true}>
                                     {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                                     <a className="btn btn-outline-primary stretched-link">Contact sales</a>
                                 </Link>
diff --git a/src/pages/contact/product-specialist.tsx b/src/pages/contact/product-specialist.tsx
deleted file mode 100644
index 88365c35c89..00000000000
--- a/src/pages/contact/product-specialist.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { FunctionComponent } from 'react'
-
-import { Layout, CustomerLogos } from '@components'
-import { useHubSpot, useChiliPiper } from '@hooks'
-
-const title = 'Sourcegraph - Talk to a product specialist'
-const description = 'Talk to a Sourcegraph product specialist. Let us know how we can help.'
-
-const Contact: FunctionComponent = () => {
-    useHubSpot({
-        portalId: '2762526',
-        formId: '6170d9b0-fa5b-4240-9f47-f3a3aa9557c9',
-        targetId: 'hubspotContactForm',
-    })
-    useChiliPiper()
-
-    return (
-        <Layout
-            className="pt-0"
-            minimal={true}
-            meta={{
-                title,
-                description,
-            }}
-        >
-            <div className="form-page bg-white text-dark">
-                <div className="container-xl pt-5 px-5">
-                    <div className="row">
-                        <div className="col-md-6">
-                            <h1 className="display-3 font-weight-bold">Talk to a product specialist</h1>
-                            <h3 className="font-weight-light">Let us know how we can help. We'll follow up soon.</h3>
-                            <div className="mt-5">
-                                <div id="hubspotContactForm" className="d-flex justify-center" />
-                            </div>
-                        </div>
-                        <div className="col-md-6">
-                            <CustomerLogos />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </Layout>
-    )
-}
-
-export default Contact
diff --git a/src/pages/home/_UseCases.tsx b/src/pages/home/_UseCases.tsx
index 6733f30cc0a..52d5c08040d 100644
--- a/src/pages/home/_UseCases.tsx
+++ b/src/pages/home/_UseCases.tsx
@@ -28,7 +28,7 @@ const useCases: UseCases[] = [
         title: 'Improve code security',
         description: 'Find, fix, and track vulnerable code quickly across your entire codebase.',
         link: {
-            href: '/use-cases/vulnerabilities',
+            href: '/use-cases/code-security',
             text: 'Learn more about code security',
         },
     },
diff --git a/src/pages/pricing.tsx b/src/pages/pricing.tsx
index d051fdbc8d3..83e197f699d 100644
--- a/src/pages/pricing.tsx
+++ b/src/pages/pricing.tsx
@@ -211,11 +211,7 @@ const PricingPage: FunctionComponent = () => (
                         <p>
                             Sourcegraph supports the work of educational organizations and nonprofits.
                             <br />
-                            Please{' '}
-                            <Link href="/contact/product-specialist/?form_submission_source=pricing-nonprofit">
-                                contact us
-                            </Link>{' '}
-                            about discounts for your development teams.
+                            Please <Link href="/demo">contact us</Link> about discounts for your development teams.
                         </p>
                     </div>
 
diff --git a/src/pages/use-cases/code-reuse.tsx b/src/pages/use-cases/code-reuse.tsx
index 638ee2c5822..ea62ad5254b 100644
--- a/src/pages/use-cases/code-reuse.tsx
+++ b/src/pages/use-cases/code-reuse.tsx
@@ -166,9 +166,9 @@ const CodeReusePage: FunctionComponent = () => (
             description:
                 'Find existing code libraries for reuse and avoid spending time on problems a teammate already solved for a more secure and coherent codebase.',
         }}
-        className="use-cases-page"
+        className="use-cases-page navbar-light"
         hero={
-            <section className={`${styles.pageHeader} navbar-light`}>
+            <section className={styles.pageHeader}>
                 <div className="container">
                     <div className="row">
                         <div className="col-md-7 my-7">
diff --git a/src/pages/use-cases/vulnerabilities.tsx b/src/pages/use-cases/code-security.tsx
similarity index 98%
rename from src/pages/use-cases/vulnerabilities.tsx
rename to src/pages/use-cases/code-security.tsx
index 25f2ed8aa67..cfdf575f328 100644
--- a/src/pages/use-cases/vulnerabilities.tsx
+++ b/src/pages/use-cases/code-security.tsx
@@ -210,9 +210,9 @@ const blogResourceItems = [
 const UseCasePage: FunctionComponent = () => (
     <Layout
         meta={{
-            title: 'Find and fix security vulnerabilities',
+            title: 'Code Security: Find & Fix Vulnerabilities | Sourcegraph',
             description:
-                'Search across all your repositories to find and resolve vulnerabilities in minutes, not days.',
+                'Search your repositories and find vulnerabilities in minutes, not days. Learn more about Sourcegraph for code security.',
         }}
         className="use-cases-page navbar-light"
         hero={
diff --git a/src/pages/use-cases/index.tsx b/src/pages/use-cases/index.tsx
index 95070a59e69..38205652d5e 100644
--- a/src/pages/use-cases/index.tsx
+++ b/src/pages/use-cases/index.tsx
@@ -8,12 +8,27 @@ import { buttonStyle, buttonLocation } from '@data'
 
 import styles from './useCases.module.scss'
 
-const features: string[] = [
-    'Find and fix security vulnerabilities',
-    'Accelerate developer onboarding',
-    'Resolve incidents faster',
-    'Streamline code reuse',
-    'Boost code health',
+const features: { id: string; description: string }[] = [
+    {
+        id: 'code-security',
+        description: 'Find and fix security vulnerabilities',
+    },
+    {
+        id: 'onboarding',
+        description: 'Accelerate developer onboarding',
+    },
+    {
+        id: 'incident-response',
+        description: 'Resolve incidents faster',
+    },
+    {
+        id: 'code-reuse',
+        description: 'Streamline code reuse',
+    },
+    {
+        id: 'code-health',
+        description: 'Boost code health',
+    },
 ]
 
 const UseCases: React.FunctionComponent = () => (
@@ -39,8 +54,8 @@ const UseCases: React.FunctionComponent = () => (
                         <h2 className={`${styles.seeHow} font-weight-normal`}>See how customers use Sourcegraph to</h2>
 
                         <div className="list-group">
-                            {features.map((feature: string) => (
-                                <Link key={feature} href={`#${kebabCase(feature)}`} passHref={true}>
+                            {features.map((feature: { id: string; description: string }) => (
+                                <Link key={feature.id} href={`#${kebabCase(feature.id)}`} passHref={true}>
                                     {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                                     <a
                                         className="list-group-item list-group-item-action d-flex justify-content-between align-items-center text-decoration-none"
@@ -48,7 +63,7 @@ const UseCases: React.FunctionComponent = () => (
                                         data-button-location={buttonLocation.hero}
                                         data-button-type="cta"
                                     >
-                                        {feature}
+                                        {feature.description}
                                         <ArrowRightIcon className="icon-inline ml-1" />
                                     </a>
                                 </Link>
@@ -66,7 +81,7 @@ const UseCases: React.FunctionComponent = () => (
 
             <hr className="my-6" />
 
-            <ContentSection id="find-and-fix-security-vulnerabilities" className="pt-8">
+            <ContentSection id="code-security" className="pt-8">
                 <div className="row justify-content-center">
                     <div className="col-lg-6">
                         <h2 className="display-3 font-weight-bold mb-3">Find and fix security vulnerabilities</h2>
@@ -95,7 +110,7 @@ const UseCases: React.FunctionComponent = () => (
                                 Request a demo <ArrowRightBoxIcon className="icon-inline ml-1" />
                             </a>
                         </Link>
-                        <Link href="/use-cases/vulnerabilities" passHref={true}>
+                        <Link href="/use-cases/code-security" passHref={true}>
                             {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                             <a
                                 className="btn btn-link font-weight-bold"
@@ -123,7 +138,7 @@ const UseCases: React.FunctionComponent = () => (
 
             <hr className="mt-8 mb-6" />
 
-            <ContentSection id="accelerate-developer-onboarding" className="py-4">
+            <ContentSection id="onboarding" className="py-4">
                 <div className="row justify-content-center pt-md-4">
                     <div className="col-lg-6 mt-8 px-6 text-center">
                         <BlockquoteWithBorder
@@ -185,7 +200,7 @@ const UseCases: React.FunctionComponent = () => (
 
             <hr className="mt-8 mb-6" />
 
-            <ContentSection id="resolve-incidents-faster" className="py-4">
+            <ContentSection id="incident-response" className="py-4">
                 <div className="row justify-content-center pt-md-4">
                     <div className="col-lg-6">
                         <h2 className="display-3 font-weight-bold mb-3">Resolve incidents faster</h2>
@@ -250,7 +265,7 @@ const UseCases: React.FunctionComponent = () => (
 
             <hr className="mt-8 mb-6" />
 
-            <ContentSection id="streamline-code-reuse" className="py-4">
+            <ContentSection id="code-reuse" className="py-4">
                 <div className="row justify-content-center pt-md-4">
                     <div className="col-lg-6 px-6 mt-6 text-center">
                         <BlockquoteWithBorder
@@ -326,7 +341,7 @@ const UseCases: React.FunctionComponent = () => (
 
             <hr className="mt-8 mb-6" />
 
-            <ContentSection id="boost-code-health" className="py-4">
+            <ContentSection id="code-health" className="py-4">
                 <div className="row justify-content-center pt-md-4">
                     <div className="col-lg-6">
                         <h2 className="display-3 font-weight-bold mb-3">Boost code health</h2>
diff --git a/src/styles/components/_Header.scss b/src/styles/components/_Header.scss
index b26e26c8c00..7a5cc60a104 100644
--- a/src/styles/components/_Header.scss
+++ b/src/styles/components/_Header.scss
@@ -13,9 +13,6 @@
         }
     }
 
-    &__nav-item {
-        align-items: center;
-    }
     &__nav-link.btn:hover {
         color: $light !important;
     }
@@ -55,12 +52,9 @@
     }
 
     .right-nav {
-        .nav-link.btn-simple {
+        a.btn-simple {
             color: $blurple;
         }
-        .nav-link.btn {
-            font-weight: bold;
-        }
     }
 
     &.navbar-dark {