diff --git a/landing/keyservers.css b/landing/keyservers.css
--- a/landing/keyservers.css
+++ b/landing/keyservers.css
@@ -26,14 +26,63 @@
   color: #7e57c2;
 }
 
+.heading {
+  color: var(--white-80);
+  margin-bottom: 40px;
+}
+
+.heading + p {
+  padding-bottom: 24px;
+}
+
+span.purple_gradient {
+  background: linear-gradient(90deg, #5d34b3 0%, #a314d5 49.31%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.keyserver_company_section {
+  display: flex;
+  padding: 120px 32px;
+  justify-content: center;
+}
+
+.keyserver_company_container {
+  display: flex;
+  width: 1376px;
+  max-width: 90vw;
+}
+
+.read_the_docs {
+  width: 100%;
+  align-self: flex-end;
+  margin-bottom: 24px;
+  margin-left: 112px;
+}
+
+@media (max-width: 1440px) {
+  .keyserver_company_container {
+    flex-direction: column;
+  }
+
+  .keyserver_company_copy {
+    margin-bottom: 48px;
+  }
+
+  .read_the_docs {
+    max-width: 504px;
+    align-self: flex-start;
+    margin: 0;
+  }
+}
+
 /* ===== CSS BODY GRID LAYOUT ===== */
 div.body_grid {
   grid-template-columns: 1fr 1fr;
   grid-template-areas:
     'hero_copy hero_image'
-    'server_image server_copy'
-    'keyserver_company keyserver_company'
-    'keyserver_copy read_the_docs';
+    'server_image server_copy';
 }
 
 div.hero_copy {
@@ -54,20 +103,6 @@
   grid-area: server_copy;
   align-self: center;
 }
-div.keyserver_company {
-  grid-area: keyserver_company;
-  text-align: center;
-  padding-top: 80px;
-}
-
-.keyserver_company > h1 {
-  padding-bottom: 24px;
-}
-div.read_the_docs {
-  grid-area: read_the_docs;
-  align-self: center;
-  padding-bottom: 40px;
-}
 
 /* ===== LAYOUT HACKS ===== */
 div.body_grid > div + .starting_section {
@@ -102,22 +137,7 @@
       'hero_image'
       'hero_copy'
       'server_image'
-      'server_copy'
-      'keyserver_company'
-      'keyserver_copy'
-      'read_the_docs';
-  }
-
-  div.keyserver_company {
-    text-align: left;
-    padding-top: 60px;
-  }
-  div.keyserver_copy {
-    padding-bottom: 0;
-  }
-  div.read_the_docs {
-    padding-top: 20px;
-    padding-bottom: 0;
+      'server_copy';
   }
 
   /* ===== LAYOUT HACKS ===== */
diff --git a/landing/keyservers.react.js b/landing/keyservers.react.js
--- a/landing/keyservers.react.js
+++ b/landing/keyservers.react.js
@@ -1,6 +1,7 @@
 // @flow
 
 import { create } from '@lottiefiles/lottie-interactivity';
+import classNames from 'classnames';
 import * as React from 'react';
 
 import { useIsomorphicLayoutEffect } from 'lib/hooks/isomorphic-layout-effect.react.js';
@@ -10,6 +11,7 @@
 import css from './keyservers.css';
 import ReadDocsButton from './read-docs-btn.react.js';
 import RequestAccess from './request-access.react.js';
+import typography from './typography.css';
 
 function Keyservers(): React.Node {
   React.useEffect(() => {
@@ -67,8 +69,14 @@
     return () => cloudNode.removeEventListener('load', onCloudIllustrationLoad);
   }, [cloudNode, onCloudIllustrationLoad]);
 
+  const headingClassName = classNames([typography.heading1, css.heading]);
+  const descriptionClassName = classNames([
+    typography.subheading2,
+    css.description,
+  ]);
+
   return (
-    <div>
+    <main>
       <div className={css.body_grid}>
         <div className={`${css.hero_image} ${css.starting_section}`}>
           <lottie-player
@@ -115,34 +123,34 @@
             access to your data without leaking that data to corporations.
           </p>
         </div>
+      </div>
 
-        <div className={css.keyserver_company}>
-          <h1>
-            Comm
-            <span className={css.mono}>
-              {' '}
-              is the <span className={css.purple_accent}>keyserver </span>
+      <section className={css.keyserver_company_section}>
+        <div className={css.keyserver_company_container}>
+          <div className={css.keyserver_company_copy}>
+            <h1 className={headingClassName}>
+              Comm is the
+              <span className={css.purple_gradient}> keyserver </span>
               company.
-            </span>
-          </h1>
+            </h1>
+            <p className={descriptionClassName}>
+              In the future, people have their own servers.
+            </p>
+            <p className={descriptionClassName}>
+              Your keyserver is the home of your digital identity. It owns your
+              private keys and your personal data. It&rsquo;s your password
+              manager, your crypto bank, your digital surrogate, and your second
+              brain.
+            </p>
+          </div>
+          <div className={css.read_the_docs}>
+            <ReadDocsButton />
+          </div>
         </div>
-
-        <div className={css.keyserver_copy}>
-          <p>In the future, people have their own servers.</p>
-          <p>
-            Your keyserver is the home of your digital identity. It owns your
-            private keys and your personal data. It&rsquo;s your password
-            manager, your crypto bank, your digital surrogate, and your second
-            brain.
-          </p>
-        </div>
-        <div className={css.read_the_docs}>
-          <ReadDocsButton />
-        </div>
-      </div>
+      </section>
       <KeyserverFAQ />
       <RequestAccess />
-    </div>
+    </main>
   );
 }
 
diff --git a/landing/read-docs-btn.css b/landing/read-docs-btn.css
--- a/landing/read-docs-btn.css
+++ b/landing/read-docs-btn.css
@@ -41,11 +41,11 @@
   padding-left: 5px;
 }
 
-@media (max-width: 1099px) {
+@media (max-width: 1440px) {
   .button {
     font-size: 18px;
     padding: 15px 20px;
-    height: auto;
+    height: 88px;
   }
   .buttonText {
     align-self: center;