diff --git a/website/src/app/page.tsx b/website/src/app/page.tsx
index c650f4d80..5dbf0c92e 100644
--- a/website/src/app/page.tsx
+++ b/website/src/app/page.tsx
@@ -33,6 +33,7 @@ import SpeedChart from "@/components/Animations/SpeedChart";
 import UpgradeDiagram from "@/components/Animations/UpgradeDiagram";
 import ComplianceDiagram from "@/components/Animations/ComplianceDiagram";
 import SimpleArchitecture from "@/components/Animations/SimpleArchitecture";
+import "@/styles/hero.css";
 
 export const metadata: Metadata = {
   title: "Firezone: Zero trust access that scales",
@@ -43,95 +44,99 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <>
-      <section className="bg-neutral-900 pt-32 md:pt-48 pb-14 md:pb-22">
-        <div className="md:flex md:flex-wrap mx-auto max-w-screen-xl px-8 mb-8 md:mb-16">
-          <div className="md:w-2/3 px-4">
-            <h1 className="mb-8 md:text-7xl text-4xl inline-block font-semibold tracking-tight leading-none text-neutral-200">
-              <SlideIn
-                direction="right"
-                delay={0.0}
-                className="md:inline-block"
-              >
-                Secure, remote access.
-              </SlideIn>
-              <SlideIn
-                direction="left"
-                delay={0.25}
-                className="text-primary-450 underline md:inline-block"
-              >
-                That scales.
-              </SlideIn>
-            </h1>
-            <div className="flex items-center">
-              <SlideIn delay={0.5} direction="top" className="mr-4">
-                <Image
-                  src="/images/ross-oss.svg"
-                  width={250}
-                  height={100}
-                  alt="Ross OSS"
-                  className="bg-neutral-50 rounded shadow shadow-neutral-300"
-                />
-              </SlideIn>
-              <SlideIn delay={0.75} direction="top">
-                <Link href="https://www.ycombinator.com/companies/firezone">
+      <section className="hero-background">
+        <div className="pt-24 md:pt-32 xl:pt-48 pb-14 md:pb-24 xl:pb-36 bg-gradient-to-br from-neutral-900/10 to-neutral-900/10 via-primary-700/10">
+          <div className="md:flex md:flex-wrap mx-auto max-w-screen-xl px-8 mb-8 md:mb-16 lg:mb-22 xl:mb-28">
+            <div className="md:w-2/3 px-4">
+              <h1 className="mb-8 inline-block font-medium tracking-tight leading-none text-neutral-200">
+                <SlideIn
+                  direction="right"
+                  delay={0.0}
+                  className="md:text-7xl text-4xl md:block"
+                >
+                  Zero-trust access
+                </SlideIn>
+                <SlideIn
+                  direction="left"
+                  delay={0.25}
+                  className="md:text-4xl text-2xl text-primary-450 underline underline-offset-4 md:block"
+                >
+                  For humans.
+                </SlideIn>
+              </h1>
+              <div className="flex items-center">
+                <SlideIn delay={0.5} direction="top" className="mr-4">
                   <Image
-                    width={125}
-                    height={125}
-                    src="/images/yc-logo.svg"
-                    alt="YC Logo"
+                    src="/images/ross-oss.svg"
+                    width={250}
+                    height={100}
+                    alt="Ross OSS"
                     className="bg-neutral-50 rounded shadow shadow-neutral-300"
                   />
-                </Link>
-              </SlideIn>
-            </div>
-          </div>
-          <div className="md:w-1/3 px-4 my-auto">
-            <h3 className="md:mt-0 my-4 text-xl tracking-tight font-medium text-neutral-200 inline-block">
-              Firezone is a fast, flexible VPN replacement built on WireGuard®
-              that{" "}
-              <span className="text-primary-450 font-semibold inline-block">
-                simplifies
-              </span>{" "}
-              access management for a{" "}
-              <span className="text-primary-450 font-semibold">fraction</span>{" "}
-              of the cost.
-            </h3>
-            <div className="flex flex-wrap justify-between mt-4">
-              <div className="my-4 mr-4 flex items-center">
-                <Link
-                  href="https://app.firezone.dev/sign_up"
-                  className="group inline-flex items-center py-0.5 text-neutral-200 text-lg font-semibold border-b-2 border-neutral-200 hover:border-primary-450 hover:text-primary-450 transition transform duration-50"
-                >
-                  Sign up now
-                  <HiArrowLongRight className="group-hover:translate-x-1 group-hover:scale-110 duration-50 transition transform ml-2 -mr-1 w-7 h-7" />
-                </Link>
+                </SlideIn>
+                <SlideIn delay={0.75} direction="top">
+                  <Link href="https://www.ycombinator.com/companies/firezone">
+                    <Image
+                      width={125}
+                      height={125}
+                      src="/images/yc-logo.svg"
+                      alt="YC Logo"
+                      className="bg-neutral-50 rounded shadow shadow-neutral-300"
+                    />
+                  </Link>
+                </SlideIn>
               </div>
-              <div className="my-4 flex items-center">
-                <button
-                  type="button"
-                  className="group shadow-lg shadow-primary-700 text-lg w-48 inline-flex shadow-lg justify-center items-center py-3 px-5 font-semibold text-center text-white rounded bg-primary-450 hover:ring-1 hover:ring-primary-450 duration-50 transform transition"
-                >
-                  <Link href="/contact/sales">Book a demo</Link>
-                  <HiArrowLongRight className="group-hover:translate-x-1 group-hover:scale-110 duration-50 transition transform ml-2 -mr-1 w-7 h-7" />
-                </button>
+            </div>
+            <div className="md:w-1/3 px-4 my-auto">
+              <h3 className="md:mt-0 my-4 text-xl tracking-tight font-medium text-neutral-200 inline-block">
+                Firezone is a fast, flexible VPN replacement built on
+                WireGuard® that{" "}
+                <span className="text-primary-450 font-semibold inline-block">
+                  conceals
+                </span>{" "}
+                your apps and networks{" "}
+                <span className="text-primary-450 font-semibold inline-block">
+                  without
+                </span>{" "}
+                tedious configuration.
+              </h3>
+              <div className="flex flex-wrap justify-between mt-4">
+                <div className="my-4 mr-4 flex items-center">
+                  <Link
+                    href="https://app.firezone.dev/sign_up"
+                    className="group inline-flex items-center py-0.5 text-neutral-200 text-lg font-semibold border-b-2 border-neutral-200 hover:border-primary-450 hover:text-primary-450 transition transform duration-50"
+                  >
+                    Sign up now
+                    <HiArrowLongRight className="group-hover:translate-x-1 group-hover:scale-110 duration-50 transition transform ml-2 -mr-1 w-7 h-7" />
+                  </Link>
+                </div>
+                <div className="my-4 flex items-center">
+                  <button
+                    type="button"
+                    className="group shadow-lg shadow-primary-700 text-lg w-48 inline-flex shadow-lg justify-center items-center py-3 px-5 font-semibold text-center text-white rounded bg-primary-450 hover:ring-1 hover:ring-primary-450 duration-50 transform transition"
+                  >
+                    <Link href="/contact/sales">Book a demo</Link>
+                    <HiArrowLongRight className="group-hover:translate-x-1 group-hover:scale-110 duration-50 transition transform ml-2 -mr-1 w-7 h-7" />
+                  </button>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div className="flex items-center justify-center px-4 md:px-0">
-          <video
-            className="shadow-lg rounded"
-            width="960"
-            height="540"
-            loop
-            autoPlay
-            playsInline
-            muted
-          >
-            <source src="/images/overview-screencap.webm" type="video/webm" />
-            Your browser does not support the video tag with WebM-formatted
-            videos.
-          </video>
+          <div className="flex items-center justify-center px-4 md:px-0">
+            <video
+              className="shadow-lg rounded"
+              width="960"
+              height="540"
+              loop
+              autoPlay
+              playsInline
+              muted
+            >
+              <source src="/images/overview-screencap.webm" type="video/webm" />
+              Your browser does not support the video tag with WebM-formatted
+              videos.
+            </video>
+          </div>
         </div>
       </section>
 
diff --git a/website/src/styles/hero.css b/website/src/styles/hero.css
new file mode 100644
index 000000000..dde8212e2
--- /dev/null
+++ b/website/src/styles/hero.css
@@ -0,0 +1,4 @@
+.hero-background {
+  background-color: #1b140e;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23ff7300' fill-opacity='0.125'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
+}