diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index 40439e7..9bc2456 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -1,329 +1,277 @@
 "use client";
 
-import { useState, useEffect, useRef, useCallback } from "react";
-import Image from "next/image";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { navLinks } from "@/lib/constants";
+import { useState } from "react";
+import { submitContactForm } from "@/app/actions/email";
+import {
+  PageHero,
+  FadeUp,
+  SectionTitle,
+  Button,
+} from "@/components/ui";
 
-// Types
-type NavLinkType = {
-  label: string;
-  href: string;
-  children?: readonly { label: string; href: string }[];
-};
+const topics = [
+  { value: "volunteer", label: "Volunteering with VINdicated" },
+  { value: "research", label: "Participating in Research" },
+  { value: "story", label: "Sharing My Story" },
+  { value: "press", label: "Press & Media" },
+  { value: "partnership", label: "Partnership or Collaboration" },
+  { value: "grant", label: "Grants & Funding" },
+  { value: "general", label: "General Inquiry" },
+];
 
-export function Nav() {
-  const [scrolled, setScrolled] = useState(false);
-  const [menuOpen, setMenuOpen] = useState(false);
-  const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
-  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const pathname = usePathname();
+const sideInfo = [
+  {
+    cat: "Volunteer",
+    body: "We have teams for tech, content, design, and operations. If you want to contribute skills to a mission that matters, we'd love to have you.",
+  },
+  {
+    cat: "Research Participants",
+    body: "Our correspondence audit studies need testers. Participation is remote, anonymous, and directly contributes to publishable research on automotive discrimination.",
+  },
+  {
+    cat: "Share Your Story",
+    body: "Have you experienced discriminatory treatment at a dealership or from a private seller? Your story may contribute to our research or help us better serve our community.",
+  },
+  {
+    cat: "Press & Media",
+    body: "For media inquiries about VINdicated or our research, reach out directly. Our founder is available for comment on automotive consumer discrimination.",
+  },
+];
 
-  const clearCloseTimer = () => {
-    if (closeTimer.current) {
-      clearTimeout(closeTimer.current);
-      closeTimer.current = null;
-    }
-  };
-
-  const closeMenu = useCallback(() => setMenuOpen(false), []);
+const inputCls = `
+  w-full bg-transparent border-b-2 border-white/20 focus:border-[#ff2d78] outline-none text-white text-[0.95rem] pb-2 transition-colors duration-200 placeholder:text-white/30
+`;
 
-  useEffect(() => {
-    const onScroll = () => setScrolled(window.scrollY > 50);
-    window.addEventListener("scroll", onScroll, { passive: true });
-    return () => window.removeEventListener("scroll", onScroll);
-  }, []);
+function ContactForm() {
+  const [submitted, setSubmitted] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState("");
 
-  // Close mobile menu on route change
-  useEffect(() => {
-    closeMenu();
-  }, [pathname, closeMenu]);
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setError("");
+    setSubmitted(false);
 
-  // Lock body scroll when menu is open
-  useEffect(() => {
-    if (menuOpen) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
-    return () => {
-      document.body.style.overflow = "";
+    const form = e.currentTarget;
+    const formData = new FormData(form);
+    const data = {
+      firstName: formData.get("firstName") as string,
+      lastName: formData.get("lastName") as string,
+      email: formData.get("email") as string,
+      topic: formData.get("topic") as string,
+      message: formData.get("message") as string,
     };
-  }, [menuOpen]);
 
-  const isActive = (href: string) =>
-    href === "/" ? pathname === "/" : pathname.startsWith(href);
+    try {
+      const res = await submitContactForm(data);
+      if (res.success) {
+        setSubmitted(true);
+        form.reset();
+        setTimeout(() => setSubmitted(false), 5000);
+      } else {
+        setError(res.error || "Something went wrong.");
+      }
+    } catch (err) {
+      setError("Failed to send message.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
 
   return (
-    <>
-      <nav
-        className="fixed top-0 left-0 right-0 z-[100] flex items-center justify-between px-18 max-md:px-5 py-[1.1rem] max-md:py-3 border-b border-white/[0.08] backdrop-blur-xl transition-all duration-300"
-        style={{
-          background: scrolled || menuOpen
-            ? "rgba(13,10,20,0.97)"
-            : "rgba(13,10,20,0.85)",
-        }}
-      >
-        {/* Logo */}
-        <Link
-          href="/"
-          className="flex items-center gap-3 no-underline relative z-[102]"
-          onClick={closeMenu}
+    <form onSubmit={handleSubmit} className="flex flex-col gap-5">
+      <div className="grid grid-cols-2 gap-5 max-md:grid-cols-1">
+        {["First Name", "Last Name"].map((label) => (
+          <div key={label} className="flex flex-col gap-2">
+            <label
+              className="text-[0.8rem] font-semibold"
+              style={{ color: "var(--color-light)" }}
+            >
+              {label}
+            </label>
+            <input
+              type="text"
+              name={label === "First Name" ? "firstName" : "lastName"}
+              required
+              className={inputCls}
+              placeholder={label === "First Name" ? "Your" : "Name"}
+            />
+          </div>
+        ))}
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <label
+          className="text-[0.8rem] font-semibold"
+          style={{ color: "var(--color-light)" }}
         >
-          <Image
-            src="/icon-nav.png"
-            alt="VINdicated logo"
-            width={52}
-            height={52}
-            className="h-[52px] max-md:h-[40px] w-auto object-contain"
-          />
-          <span
-            className="text-2xl max-md:text-xl font-bold tracking-tight text-white"
-            style={{ fontFamily: "var(--font-body)" }}
-          >
-            <span className="font-extrabold text-(--color-light)">VIN</span>
-            dicated
-          </span>
-        </Link>
+          Email Address
+        </label>
+        <input
+          type="email"
+          name="email"
+          required
+          className={inputCls}
+          placeholder="you@example.com"
+        />
+      </div>
 
-        {/* Desktop nav */}
-        <ul className="hidden md:flex gap-8 list-none">
-          {navLinks.map((link) => (
-            <DesktopNavItem
-              key={link.href}
-              link={link as NavLinkType}
-              active={isActive(link.href)}
-              isOpen={activeDropdown === link.href}
-              onMouseEnter={() => {
-                clearCloseTimer();
-                setActiveDropdown(link.href);
-              }}
-              onMouseLeave={() => {
-                closeTimer.current = setTimeout(
-                  () => setActiveDropdown(null),
-                  300,
-                );
-              }}
-            />
+      <div className="flex flex-col gap-2">
+        <label
+          className="text-[0.8rem] font-semibold"
+          style={{ color: "var(--color-light)" }}
+        >
+          I’m reaching out about…
+        </label>
+        <select
+          name="topic"
+          required
+          className={inputCls}
+          style={{ background: "rgba(255,255,255,0.04)" }}
+        >
+          <option value="">Select a topic</option>
+          {topics.map((t) => (
+            <option
+              key={t.value}
+              value={t.label}
+              style={{ background: "#0d0814" }}
+            >
+              {t.label}
+            </option>
           ))}
-        </ul>
+        </select>
+      </div>
 
-        {/* Hamburger / Close toggle */}
-        <button
-          className="relative z-[102] flex md:hidden justify-center items-center w-10 h-10 bg-transparent border-none"
-          aria-label={menuOpen ? "Close menu" : "Open menu"}
-          onClick={() => setMenuOpen((v) => !v)}
+      <div className="flex flex-col gap-2">
+        <label
+          className="text-[0.8rem] font-semibold"
+          style={{ color: "var(--color-light)" }}
         >
-          <span className="relative w-6 h-5 flex flex-col justify-center items-center">
-            <span
-              className="absolute block w-6 h-[2px] bg-white transition-all duration-300 ease-in-out"
-              style={{
-                transform: menuOpen
-                  ? "rotate(45deg)"
-                  : "translateY(-7px)",
-              }}
-            />
-            <span
-              className="absolute block w-6 h-[2px] bg-white transition-all duration-300 ease-in-out"
-              style={{
-                opacity: menuOpen ? 0 : 1,
-                transform: menuOpen ? "scaleX(0)" : "scaleX(1)",
-              }}
-            />
-            <span
-              className="absolute block w-6 h-[2px] bg-white transition-all duration-300 ease-in-out"
-              style={{
-                transform: menuOpen
-                  ? "rotate(-45deg)"
-                  : "translateY(7px)",
-              }}
-            />
-          </span>
-        </button>
-      </nav>
+          Message
+        </label>
+        <textarea
+          name="message"
+          required
+          rows={6}
+          className={inputCls}
+          style={{ resize: "vertical", minHeight: 120 }}
+          placeholder="Tell us what's on your mind..."
+        />
+      </div>
 
-      {/* Mobile menu rendered outside <nav> to avoid z-index issues */}
-      <MobileMenu
-        open={menuOpen}
-        onClose={closeMenu}
-        isActive={isActive}
-      />
-    </>
+     <button
+  type="submit"
+  disabled={isSubmitting}
+  className="flex items-center gap-3 px-8 py-[0.9rem] text-[0.95rem] font-semibold text-white transition-all duration-200 hover:-translate-y-0.5 disabled:opacity-50"
+  style={{ background: "var(--color-vivid)" }}
+>
+  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M5 12h14M12 5l7 7-7 7"/>
+  </svg>
+  {isSubmitting ? "Sending..." : "Send it"}
+</button>
+      
+      {error && (
+        <div
+          className="rounded-xl px-5 py-4 text-[0.9rem]"
+          style={{
+            background: "rgba(214,59,59,0.1)",
+            border: "1px solid rgba(214,59,59,0.3)",
+            color: "#fca5a5"
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      {submitted && (
+        <div
+          className="rounded-xl px-5 py-4 text-[0.9rem]"
+          style={{
+            background: "rgba(149,51,165,0.1)",
+            border: "1px solid var(--color-border)",
+            color: "#fff",
+          }}
+        >
+          Message received. We&apos;ll be in touch soon.
+        </div>
+      )}
+    </form>
   );
 }
 
-// ── Mobile Menu ──────────────────────────────────────────────
-function MobileMenu({
-  open,
-  onClose,
-  isActive,
-}: {
-  open: boolean;
-  onClose: () => void;
-  isActive: (href: string) => boolean;
-}) {
-  const [expanded, setExpanded] = useState<string | null>(null);
+export default function ContactPage() {
+  return (
+    <>
+      <PageHero
+        kicker=""
+        title={
+          <>
+            We want to
+            <br />
+            <em>hear from you.</em>
+          </>
+        }
+        subtitle="Whether you want to share your story, volunteer with our team, participate in our research, or partner with VINdicated, reach out."
+      />
 
-  // Reset expanded state when menu closes
-  useEffect(() => {
-    if (!open) setExpanded(null);
-  }, [open]);
+      <FadeUp>
+        <section className="px-20 py-24 max-md:px-6 max-md:py-16">
+          <div
+            className="grid grid-cols-[1fr_1fr] gap-24 max-lg:gap-16 items-start max-lg:grid-cols-1"
+          >
+            {/* Form */}
+            <div>
+              <ContactForm />
+            </div>
 
-  return (
-    <div
-      className="fixed inset-0 z-[99] flex flex-col md:hidden transition-all duration-300 ease-in-out"
-      style={{
-        background: "var(--color-bg-page)",
-        opacity: open ? 1 : 0,
-        pointerEvents: open ? "auto" : "none",
-        visibility: open ? "visible" : "hidden",
-      }}
-    >
-      {/* Scrollable link area, starts below the fixed nav bar */}
-      <div className="flex-1 overflow-y-auto pt-[72px] pb-10 px-6">
-        <ul className="list-none flex flex-col mt-4">
-          {navLinks.map((link) => {
-            const hasChildren = "children" in link && link.children;
-            const active = isActive(link.href);
-            const isExpanded = expanded === link.href;
+            {/* Side info */}
+            <div>
+              <SectionTitle className="mb-10">
+                <em>Join the movement.</em>
+              </SectionTitle>
 
-            return (
-              <li
-                key={link.href}
-                style={{ borderBottom: "1px solid var(--color-border)" }}
+              <div
+                className="mb-12"
+                style={{ borderTop: "1px solid var(--color-border)" }}
               >
-                {/* Top-level link row */}
-                <div className="flex items-center">
-                  <Link
-                    href={link.href}
-                    onClick={onClose}
-                    className="flex-1 py-4 text-[1.1rem] font-medium no-underline transition-colors"
-                    style={{
-                      color: active
-                        ? "var(--color-accent)"
-                        : "#fff",
-                    }}
-                  >
-                    {link.label}
-                  </Link>
-                  {hasChildren && (
-                    <button
-                      className="flex items-center justify-center w-11 h-11 bg-transparent border-none -mr-2"
-                      aria-label={`Expand ${link.label}`}
-                      onClick={() =>
-                        setExpanded(isExpanded ? null : link.href)
-                      }
-                    >
-                      <svg
-                        width="16"
-                        height="16"
-                        viewBox="0 0 16 16"
-                        fill="none"
-                        className="transition-transform duration-200"
-                        style={{
-                          transform: isExpanded
-                            ? "rotate(180deg)"
-                            : "rotate(0deg)",
-                        }}
-                      >
-                        <path
-                          d="M4 6l4 4 4-4"
-                          stroke="var(--color-light)"
-                          strokeWidth="1.5"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                      </svg>
-                    </button>
-                  )}
-                </div>
-
-                {/* Expandable sub-links */}
-                {hasChildren && (
+                {sideInfo.map(({ cat, body }) => (
                   <div
-                    className="overflow-hidden transition-all duration-200 ease-in-out"
-                    style={{
-                      maxHeight: isExpanded
-                        ? `${(link as NavLinkType).children!.length * 44}px`
-                        : "0px",
-                      opacity: isExpanded ? 1 : 0,
-                    }}
+                    key={cat}
+                    className="py-7"
+                    style={{ borderBottom: "1px solid var(--color-border)" }}
                   >
-                    <div className="pl-4 pb-3 flex flex-col gap-0.5">
-                      {(link as NavLinkType).children!.map((child) => (
-                        <Link
-                          key={child.href}
-                          href={child.href}
-                          onClick={onClose}
-                          className="py-2 text-[0.88rem] no-underline transition-colors"
-                          style={{ color: "var(--color-light)" }}
-                        >
-                          {child.label}
-                        </Link>
-                      ))}
-                    </div>
+                    <h3 className="text-[1.15rem] leading-[1.3] mb-2" style={{ fontFamily: "var(--font-heading), Georgia, serif" }}>
+  {cat}
+</h3>
+<p className="text-[0.95rem] text-white leading-[1.7]">{body}</p>
                   </div>
-                )}
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-    </div>
-  );
-}
+                ))}
+              </div>
 
-// ── Desktop Nav Item ────────────────────────────────────────
-function DesktopNavItem({
-  link,
-  active,
-  isOpen,
-  onMouseEnter,
-  onMouseLeave,
-}: {
-  link: NavLinkType;
-  active: boolean;
-  isOpen: boolean;
-  onMouseEnter: () => void;
-  onMouseLeave: () => void;
-}) {
-  return (
-    <li
-      className="relative"
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-    >
-      <Link
-        href={link.href}
-        className="text-[0.95rem] no-underline transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0d0a14] rounded-sm"
-        style={{
-          color: "white",
-          fontFamily: "var(--font-heading), Georgia, serif",
-          fontWeight: active ? 600 : 400,
-        }}
-      >
-        {link.label}
-      </Link>
-      {link.children && isOpen && (
-        <div
-          className="absolute top-full left-0 mt-2 min-w-[200px] rounded border border-white/[0.08] py-1 z-[99999]"
-          style={{
-            background: "#1a0a2e",
-            boxShadow: "0 8px 32px rgba(0,0,0,0.5)",
-          }}
-        >
-          {link.children.map((child) => (
-            <Link
-              key={child.href}
-              href={child.href}
-              className="block px-4 py-2 text-[0.82rem] text-white no-underline whitespace-nowrap transition-colors hover:text-white hover:bg-[#9630a6]/30"
-            >
-              {child.label}
-            </Link>
-          ))}
-        </div>
-      )}
-    </li>
+              <div className="flex gap-4">
+                <Button
+                  href="https://linkedin.com/company/vindicated"
+                  variant="outline"
+                  className="flex-1 text-center"
+                  external
+                >
+                  LinkedIn
+                </Button>
+                <Button
+                  href="https://instagram.com"
+                  variant="outline"
+                  className="flex-1 text-center"
+                  external
+                >
+                  Instagram
+                </Button>
+              </div>
+            </div>
+          </div>
+        </section>
+      </FadeUp>
+    </>
   );
 }