diff --git a/playwright.config.ts b/playwright.config.ts
index 1c00d74..7b9fbf2 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -51,14 +51,14 @@ export default defineConfig({
     },
 
     /* Test against mobile viewports. */
-    // {
-    //   name: "Mobile Chrome",
-    //   use: { ...devices["Pixel 5"] },
-    // },
-    // {
-    //   name: "Mobile Safari",
-    //   use: { ...devices["iPhone 12"] },
-    // },
+    {
+      name: "Mobile Chrome",
+      use: { ...devices["Pixel 5"] },
+    },
+    {
+      name: "Mobile Safari",
+      use: { ...devices["iPhone 12"] },
+    },
 
     /* Test against branded browsers. */
     // {
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index aad5f2e..fec493f 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,7 +1,6 @@
 import BgLayer from "@/components/layout/bg-layer";
 import ContactCard from "@/components/contact/card";
 import Container from "@/components/layout/container";
-import Header from "@/components/layout/header";
 import MainWrapper from "@/components/layout/main-wrapper";
 import { Metadata } from "next";
 
@@ -42,7 +41,6 @@ export const metadata: Metadata = {
 export default function ContactPage() {
   return (
     <div className="">
-      <Header />
       <MainWrapper>
         <BgLayer>
           <Container>
diff --git a/src/app/features/page.tsx b/src/app/features/page.tsx
index 8410fd2..f3ac4a1 100644
--- a/src/app/features/page.tsx
+++ b/src/app/features/page.tsx
@@ -1,7 +1,6 @@
 import BgLayer from "@/components/layout/bg-layer";
 import Container from "@/components/layout/container";
 import FeatureList from "@/components/features/list";
-import Header from "@/components/layout/header";
 import Implementations from "@/components/features/implementations";
 import MainWrapper from "@/components/layout/main-wrapper";
 import { Metadata } from "next";
@@ -14,7 +13,6 @@ export const metadata: Metadata = {
 export default async function FeaturesPage() {
   return (
     <div className="">
-      <Header />
       <MainWrapper>
         <BgLayer>
           <PageHeader
diff --git a/src/app/getting-started/page.tsx b/src/app/getting-started/page.tsx
index baa25d1..6865d86 100644
--- a/src/app/getting-started/page.tsx
+++ b/src/app/getting-started/page.tsx
@@ -2,7 +2,6 @@ import BgLayer from "@/components/layout/bg-layer";
 import Container from "@/components/layout/container";
 import FaqList from "@/components/faq";
 import GettingStartedList from "@/components/getting-started/list";
-import Header from "@/components/layout/header";
 import HostedSolutions from "@/components/hosted-solutions";
 import MainWrapper from "@/components/layout/main-wrapper";
 import { Metadata } from "next";
@@ -15,7 +14,6 @@ export const metadata: Metadata = {
 export default function GettingStartedPage() {
   return (
     <div className="">
-      <Header />
       <BgLayer>
         <MainWrapper>
           <PageHeader
diff --git a/src/app/news/page.tsx b/src/app/news/page.tsx
index c60ab65..94ba45b 100644
--- a/src/app/news/page.tsx
+++ b/src/app/news/page.tsx
@@ -1,6 +1,5 @@
 import BgLayer from "@/components/layout/bg-layer";
 import Container from "@/components/layout/container";
-import Header from "@/components/layout/header";
 import MainWrapper from "@/components/layout/main-wrapper";
 import { Metadata } from "next";
 import NewsList from "@/components/news/list";
@@ -14,7 +13,6 @@ export const metadata: Metadata = {
 export default function Homepage() {
   return (
     <div className="">
-      <Header />
       <MainWrapper>
         <BgLayer>
           <PageHeader
diff --git a/src/app/presentations/page.tsx b/src/app/presentations/page.tsx
index f0a92d9..399c1c6 100644
--- a/src/app/presentations/page.tsx
+++ b/src/app/presentations/page.tsx
@@ -1,6 +1,5 @@
 import BgLayer from "@/components/layout/bg-layer";
 import Container from "@/components/layout/container";
-import Header from "@/components/layout/header";
 import MainWrapper from "@/components/layout/main-wrapper";
 import { Metadata } from "next";
 import PageHeader from "@/components/page-header";
@@ -14,7 +13,6 @@ export const metadata: Metadata = {
 export default function PresentationsPage() {
   return (
     <div className="">
-      <Header />
       <MainWrapper>
         <BgLayer>
           <PageHeader
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
index fe74a3d..10bc802 100644
--- a/src/components/layout/header.tsx
+++ b/src/components/layout/header.tsx
@@ -1,12 +1,13 @@
 "use client";
 
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Dialog, DialogPanel } from "@headlessui/react";
+import React, { useEffect } from "react";
 
-import { Dialog } from "@headlessui/react";
 import Image from "next/image";
 import Link from "next/link";
-import React from "react";
 import hykuLogo from "../../../public/logo-hyku.png";
+import { usePathname } from "next/navigation";
 import { useState } from "react";
 
 export type NavItem = {
@@ -40,6 +41,13 @@ export const navigation: NavItem[] = [
 
 const Header = () => {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    if (mobileMenuOpen) {
+      setMobileMenuOpen(false);
+    }
+  }, [pathname]);
 
   return (
     <header className="absolute inset-x-0 top-0 z-50">
@@ -94,9 +102,10 @@ const Header = () => {
         className="lg:hidden"
         open={mobileMenuOpen}
         onClose={setMobileMenuOpen}
+        data-testid="mobile-menu"
       >
         <div className="fixed inset-0 z-50" />
-        <Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-background px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+        <DialogPanel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-background px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
           <div className="flex items-center justify-between">
             <a href="#" className="-m-1.5 p-1.5">
               <span className="sr-only">Your Company</span>
@@ -136,7 +145,7 @@ const Header = () => {
               </div>
             </div>
           </div>
-        </Dialog.Panel>
+        </DialogPanel>
       </Dialog>
     </header>
   );
diff --git a/src/components/layout/nav.tsx b/src/components/layout/nav.tsx
deleted file mode 100644
index 3435a1c..0000000
--- a/src/components/layout/nav.tsx
+++ /dev/null
@@ -1,234 +0,0 @@
-"use client";
-
-import {
-  ArrowPathIcon,
-  Bars3Icon,
-  ChartPieIcon,
-  CursorArrowRaysIcon,
-  FingerPrintIcon,
-  SquaresPlusIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
-import {
-  ChevronDownIcon,
-  PhoneIcon,
-  PlayCircleIcon,
-} from "@heroicons/react/20/solid";
-import { Dialog, Popover, Transition } from "@headlessui/react";
-import { Fragment, useState } from "react";
-
-import Image from "next/image";
-import hykuLogo from "../../../public/logo-hyku.png";
-
-const callsToAction = [
-  { name: "Watch demo", href: "#", icon: PlayCircleIcon },
-  { name: "Contact sales", href: "#", icon: PhoneIcon },
-];
-const company = [
-  {
-    name: "About us",
-    href: "#",
-    description:
-      "Learn more about our company values and mission to empower others",
-  },
-  {
-    name: "Careers",
-    href: "#",
-    description:
-      "Looking for you next career opportunity? See all of our open positions",
-  },
-  {
-    name: "Support",
-    href: "#",
-    description:
-      "Get in touch with our dedicated support team or reach out on our community forums",
-  },
-  {
-    name: "Blog",
-    href: "#",
-    description:
-      "Read our latest announcements and get perspectives from our team",
-  },
-];
-
-const nav = [
-  {
-    name: "Features and Implementations",
-    href: "/features",
-  },
-  {
-    name: "Getting Started",
-    href: "/getting-started",
-  },
-  {
-    name: "News",
-    href: "/news",
-  },
-  {
-    name: "Contact",
-    href: "/contact",
-  },
-];
-
-export default function Nav() {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-
-  return (
-    <header className="bg-white">
-      <nav
-        className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
-        aria-label="Global"
-      >
-        <div className="flex lg:flex-1">
-          <a href="#" className="-m-1.5 p-1.5">
-            <span className="sr-only">Your Company</span>
-            <Image src={hykuLogo} alt="Hyku logo" className="h-8 w-auto" />
-          </a>
-        </div>
-        <div className="flex lg:hidden">
-          <button
-            type="button"
-            className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
-            onClick={() => setMobileMenuOpen(true)}
-          >
-            <span className="sr-only">Open main menu</span>
-            <Bars3Icon className="h-6 w-6" aria-hidden="true" />
-          </button>
-        </div>
-        <Popover.Group className="hidden lg:flex lg:gap-x-12">
-          {nav.map((item) => (
-            <a
-              key={item.href}
-              href="#"
-              className="text-sm font-semibold leading-6 text-gray-900"
-            >
-              {item.name}
-            </a>
-          ))}
-
-          <Popover className="relative">
-            {/* <Popover.Button className="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
-              News
-              <ChevronDownIcon
-                className="h-5 w-5 flex-none text-gray-400"
-                aria-hidden="true"
-              />
-            </Popover.Button> */}
-
-            <Transition
-              as={Fragment}
-              enter="transition ease-out duration-200"
-              enterFrom="opacity-0 translate-y-1"
-              enterTo="opacity-100 translate-y-0"
-              leave="transition ease-in duration-150"
-              leaveFrom="opacity-100 translate-y-0"
-              leaveTo="opacity-0 translate-y-1"
-            >
-              <Popover.Panel className="absolute -left-8 top-full z-10 mt-3 w-96 rounded-3xl bg-white p-4 shadow-lg ring-1 ring-gray-900/5">
-                {company.map((item) => (
-                  <div
-                    key={item.name}
-                    className="relative rounded-lg p-4 hover:bg-gray-50"
-                  >
-                    <a
-                      href={item.href}
-                      className="block text-sm font-semibold leading-6 text-gray-900"
-                    >
-                      {item.name}
-                      <span className="absolute inset-0" />
-                    </a>
-                    <p className="mt-1 text-sm leading-6 text-gray-600">
-                      {item.description}
-                    </p>
-                  </div>
-                ))}
-              </Popover.Panel>
-            </Transition>
-          </Popover>
-        </Popover.Group>
-        <div className="hidden lg:flex lg:flex-1 lg:justify-end">
-          <a href="#" className="text-sm font-semibold leading-6 text-gray-900">
-            Learn more <span aria-hidden="true">&rarr;</span>
-          </a>
-        </div>
-      </nav>
-      <Dialog
-        as="div"
-        className="lg:hidden"
-        open={mobileMenuOpen}
-        onClose={setMobileMenuOpen}
-      >
-        <div className="fixed inset-0 z-10" />
-        <Dialog.Panel className="fixed inset-y-0 right-0 z-10 flex w-full flex-col justify-between overflow-y-auto bg-white sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
-          <div className="p-6">
-            <div className="flex items-center justify-between">
-              <a href="#" className="-m-1.5 p-1.5">
-                <span className="sr-only">Your Company</span>
-                <img
-                  className="h-8 w-auto"
-                  src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
-                  alt=""
-                />
-              </a>
-              <button
-                type="button"
-                className="-m-2.5 rounded-md p-2.5 text-gray-700"
-                onClick={() => setMobileMenuOpen(false)}
-              >
-                <span className="sr-only">Close menu</span>
-                <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-              </button>
-            </div>
-            <div className="mt-6 flow-root">
-              <div className="-my-6 divide-y divide-gray-500/10">
-                <div className="space-y-2 py-6">
-                  <a
-                    href="#"
-                    className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
-                  >
-                    Features
-                  </a>
-                  <a
-                    href="#"
-                    className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
-                  >
-                    Marketplace
-                  </a>
-
-                  {company.map((item) => (
-                    <a
-                      key={item.name}
-                      href={item.href}
-                      className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
-                    >
-                      {item.name}
-                    </a>
-                  ))}
-                </div>
-                <div className="py-6">
-                  <a
-                    href="#"
-                    className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
-                  >
-                    Learn more
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="sticky bottom-0 grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50 text-center">
-            {callsToAction.map((item) => (
-              <a
-                key={item.name}
-                href={item.href}
-                className="p-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-100"
-              >
-                {item.name}
-              </a>
-            ))}
-          </div>
-        </Dialog.Panel>
-      </Dialog>
-    </header>
-  );
-}
diff --git a/tests/home.spec.ts b/tests/home.spec.ts
index 8ea5e04..1e8abd3 100644
--- a/tests/home.spec.ts
+++ b/tests/home.spec.ts
@@ -2,6 +2,8 @@ import { expect, test } from "@playwright/test";
 
 test("homepage elements", async ({ page }) => {
   await page.goto("/");
+  await page.waitForURL("**/");
+
   await expect(page.getByRole("heading")).toContainText(
     "The Next Generation Repository Solution",
   );
diff --git a/tests/layout.spec.ts b/tests/layout.spec.ts
index 50f567d..9d3a189 100644
--- a/tests/layout.spec.ts
+++ b/tests/layout.spec.ts
@@ -8,48 +8,103 @@ const links = [
   "Contact",
 ];
 
-test("has main heading and top level navigation", async ({ page }) => {
+test("has main heading and top level navigation", async ({
+  page,
+}, testInfo) => {
+  const isMobile = testInfo.project.name.includes("Mobile");
+
   await page.goto("/");
+  await page.waitForURL("/");
 
   const header = page.getByLabel("Global");
   await expect(header).toBeVisible();
 
   await expect(header.getByAltText("Hyku logo")).toBeVisible();
 
-  await page
-    .getByRole("link", { name: "Features and Implementations" })
-    .nth(1)
-    .click();
-  await expect(
-    page.getByRole("heading", { name: "Features and Implementations" }),
-  ).toBeVisible();
-
-  await page.getByRole("link", { name: "Getting Started" }).nth(1).click();
-  await expect(
-    page.getByRole("heading", { name: "Getting Started" }),
-  ).toBeVisible();
-
-  await page
-    .getByRole("link", { name: "Presentations and Demos" })
-    .nth(1)
-    .click();
-  await expect(
-    page.getByRole("heading", { name: "Presentations and Demos" }),
-  ).toBeVisible();
-
-  await page.getByRole("link", { name: "News" }).nth(1).click();
-  await expect(
-    page.getByRole("heading", { name: "News and Events" }),
-  ).toBeVisible();
-
-  await page.getByRole("link", { name: "Contact" }).nth(1).click();
-  await expect(
-    page.getByRole("heading", { name: "Get in touch" }),
-  ).toBeVisible();
-
-  await expect(
-    page.getByRole("link", { name: "Learn more" }).nth(1),
-  ).toHaveAttribute("href", "https://github.com/samvera/hyku");
+  // Test desktop navigation
+  if (!isMobile) {
+    await page
+      .getByRole("link", { name: "Features and Implementations" })
+      .nth(1)
+      .click();
+    await page.waitForURL("**/features");
+    await expect(
+      page.getByRole("heading", { name: "Features and Implementations" }),
+    ).toBeVisible();
+
+    await page.getByRole("link", { name: "Getting Started" }).nth(1).click();
+    await page.waitForURL("**/getting-started");
+    await expect(
+      page.getByRole("heading", { name: "Getting Started" }),
+    ).toBeVisible();
+
+    await page
+      .getByRole("link", { name: "Presentations and Demos" })
+      .nth(1)
+      .click();
+    await page.waitForURL("**/presentations");
+    await expect(
+      page.getByRole("heading", { name: "Presentations and Demos" }),
+    ).toBeVisible();
+
+    await page.getByRole("link", { name: "News" }).nth(1).click();
+    await page.waitForURL("**/news");
+    await expect(
+      page.getByRole("heading", { name: "News and Events" }),
+    ).toBeVisible();
+
+    await page.getByRole("link", { name: "Contact" }).nth(1).click();
+    await page.waitForURL("**/contact");
+    await expect(
+      page.getByRole("heading", { name: "Get in touch" }),
+    ).toBeVisible();
+
+    await expect(
+      page.getByRole("link", { name: "Learn more" }).nth(1),
+    ).toHaveAttribute("href", "https://github.com/samvera/hyku");
+  }
+
+  // Test mobile navigation
+  if (isMobile) {
+    await page.goto("/");
+    await page.waitForURL("/");
+
+    const mobileMenuEl = page.getByTestId("mobile-menu");
+    const hamburgerEl = page.getByRole("button", { name: "Open main menu" });
+
+    await hamburgerEl.click();
+    await mobileMenuEl
+      .getByRole("link", { name: "Features and Implementations" })
+      .click();
+
+    await expect(page.locator("h1")).toContainText(
+      "Features and Implementations",
+    );
+
+    await hamburgerEl.click();
+    await mobileMenuEl.getByRole("link", { name: "Getting Started" }).click();
+
+    await expect(page.locator("h1")).toContainText("Getting Started");
+
+    await hamburgerEl.click();
+    await mobileMenuEl
+      .getByRole("link", { name: "Presentations and Demos" })
+      .click();
+
+    await expect(page.locator("h1")).toContainText("Presentations and Demos");
+
+    await hamburgerEl.click();
+    await mobileMenuEl.getByRole("link", { name: "News" }).click();
+
+    await expect(page.locator("h1")).toContainText("News and Events");
+
+    await hamburgerEl.click();
+    await mobileMenuEl.getByRole("link", { name: "Contact" }).click();
+
+    await expect(
+      page.getByRole("heading", { name: "Get in touch" }),
+    ).toBeVisible();
+  }
 });
 
 test("has footer with links to social media", async ({ page }) => {