diff --git a/landing/keyservers.css b/landing/keyservers.css
--- a/landing/keyservers.css
+++ b/landing/keyservers.css
@@ -1,31 +1,3 @@
-div.body_grid {
-  max-width: 1920px;
-  margin-left: auto;
-  margin-right: auto;
-  display: grid;
-  column-gap: 6em;
-  padding: 20px 60px 40px;
-  transition-property: max-width;
-  transition: 300ms;
-}
-
-div.body_grid h1 {
-  font-size: clamp(1.5rem, 1.0817rem + 2.0915vw, 3.5rem);
-}
-
-.mono {
-  font-family: 'iA Writer Duo S', monospace;
-  padding-bottom: 24px;
-}
-
-.mono + p {
-  padding-bottom: 24px;
-}
-
-span.purple_accent {
-  color: #7e57c2;
-}
-
 .heading {
   color: var(--white-80);
   margin-bottom: 40px;
@@ -42,6 +14,7 @@
   -webkit-text-fill-color: transparent;
 }
 
+.hero_section,
 .servers_section,
 .keyserver_company_section {
   display: flex;
@@ -49,10 +22,15 @@
   justify-content: center;
 }
 
+.hero_section {
+  padding-top: 64px;
+}
+
 .servers_section {
   background-color: var(--light-dark-page-background);
 }
 
+.hero_container,
 .servers_container,
 .keyserver_company_container {
   display: flex;
@@ -60,6 +38,20 @@
   max-width: 90vw;
 }
 
+.hero_container {
+  flex-direction: column;
+}
+
+.hero_image {
+  width: 100%;
+  max-height: 376px;
+  margin-bottom: 72px;
+}
+
+.heroText {
+  text-align: center;
+}
+
 .servers_image {
   width: 100%;
   max-height: 480px;
@@ -100,59 +92,3 @@
     margin: 0;
   }
 }
-
-/* ===== CSS BODY GRID LAYOUT ===== */
-div.body_grid {
-  grid-template-columns: 1fr 1fr;
-  grid-template-areas: 'hero_copy hero_image';
-}
-
-div.hero_copy {
-  grid-area: hero_copy;
-  align-self: center;
-}
-div.hero_image {
-  grid-area: hero_image;
-  object-fit: scale-down;
-  align-self: center;
-}
-
-/* ===== LAYOUT HACKS ===== */
-div.body_grid > div + .starting_section {
-  padding-top: 80px;
-}
-
-.section {
-  padding-top: 80px;
-}
-
-/* ===== MEDIUM BREAKPOINT ===== */
-@media (max-width: 1499px) {
-  div.body_grid {
-    padding-left: 60px;
-    padding-right: 60px;
-  }
-}
-
-/* ===== SMALLEST BREAKPOINT ===== */
-@media (max-width: 1099px) {
-  /* ===== COMMON CSS GRID LAYOUT ===== */
-  div.body_grid,
-  div.app_landing_grid {
-    grid-template-columns: minmax(auto, 540px);
-    justify-content: center;
-    padding: 0 3% 2vh;
-  }
-
-  /* ===== CSS BODY GRID LAYOUT ===== */
-  div.body_grid {
-    grid-template-areas:
-      'hero_image'
-      'hero_copy';
-  }
-
-  /* ===== LAYOUT HACKS ===== */
-  .section {
-    padding-top: 20px;
-  }
-}
diff --git a/landing/keyservers.react.js b/landing/keyservers.react.js
--- a/landing/keyservers.react.js
+++ b/landing/keyservers.react.js
@@ -75,34 +75,39 @@
     css.description,
   ]);
 
+  const heroHeadingClassName = classNames([headingClassName, css.heroText]);
+  const heroDescriptionClassName = classNames([
+    descriptionClassName,
+    css.heroText,
+  ]);
+
   return (
     <main>
-      <div className={css.body_grid}>
-        <div className={`${css.hero_image} ${css.starting_section}`}>
-          <lottie-player
-            id="eye-illustration"
-            ref={setEyeNode}
-            mode="normal"
-            src={`${assetsCacheURLPrefix}/animated_eye.json`}
-            speed={1}
-          />
-        </div>
-        <div className={`${css.hero_copy} ${css.section}`}>
-          <h1 className={css.mono}>
+      <section className={css.hero_section}>
+        <div className={css.hero_container}>
+          <div className={css.hero_image}>
+            <lottie-player
+              id="eye-illustration"
+              ref={setEyeNode}
+              mode="normal"
+              src={`${assetsCacheURLPrefix}/animated_eye.json`}
+              speed={1}
+            />
+          </div>
+          <h1 className={heroHeadingClassName}>
             Reclaim your
-            <span className={css.purple_accent}> digital&nbsp;identity.</span>
+            <span className={css.purple_gradient}> digital&nbsp;identity</span>
           </h1>
-          <p>
+          <p className={heroDescriptionClassName}>
             The Internet is broken today. Private user data is owned by
             mega-corporations and farmed for their benefit.
           </p>
-          <p>
+          <p className={heroDescriptionClassName}>
             E2E encryption has the potential to change this equation. But
             it&rsquo;s constrained by a crucial limitation.
           </p>
         </div>
-      </div>
-
+      </section>
       <section className={css.servers_section}>
         <div className={css.servers_container}>
           <div className={css.servers_image}>