diff --git a/landing/keyservers.css b/landing/keyservers.css
index 7a2382579..f6794fb05 100644
--- a/landing/keyservers.css
+++ b/landing/keyservers.css
@@ -1,127 +1,147 @@
 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;
+}
+
+.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 {
   grid-area: hero_copy;
   align-self: center;
 }
 div.hero_image {
   grid-area: hero_image;
   object-fit: scale-down;
   align-self: center;
 }
 div.server_image {
   grid-area: server_image;
   object-fit: scale-down;
   align-self: center;
 }
 div.server_copy {
   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 {
   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'
       '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 ===== */
   .section {
     padding-top: 20px;
   }
 }
diff --git a/landing/keyservers.react.js b/landing/keyservers.react.js
index 1dc5ff302..11bb84d5e 100644
--- a/landing/keyservers.react.js
+++ b/landing/keyservers.react.js
@@ -1,149 +1,157 @@
 // @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';
 
 import { assetsCacheURLPrefix } from './asset-meta-data.js';
 import KeyserverFAQ from './keyserver-faq.react.js';
 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(() => {
     import('@lottiefiles/lottie-player');
   }, []);
 
   const onEyeIllustrationLoad = React.useCallback(() => {
     create({
       mode: 'scroll',
       player: '#eye-illustration',
       actions: [
         {
           visibility: [0, 1],
           type: 'seek',
           frames: [0, 720],
         },
       ],
     });
   }, []);
 
   const onCloudIllustrationLoad = React.useCallback(() => {
     create({
       mode: 'scroll',
       player: '#cloud-illustration',
       actions: [
         {
           visibility: [0, 0.2],
           type: 'stop',
           frames: [0],
         },
         {
           visibility: [0.2, 1],
           type: 'seek',
           frames: [0, 300],
         },
       ],
     });
   }, []);
 
   const [eyeNode, setEyeNode] = React.useState(null);
   useIsomorphicLayoutEffect(() => {
     if (!eyeNode) {
       return undefined;
     }
     eyeNode.addEventListener('load', onEyeIllustrationLoad);
     return () => eyeNode.removeEventListener('load', onEyeIllustrationLoad);
   }, [eyeNode, onEyeIllustrationLoad]);
 
   const [cloudNode, setCloudNode] = React.useState(null);
   useIsomorphicLayoutEffect(() => {
     if (!cloudNode) {
       return undefined;
     }
     cloudNode.addEventListener('load', onCloudIllustrationLoad);
     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
             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}>
             Reclaim your
             <span className={css.purple_accent}> digital&nbsp;identity.</span>
           </h1>
           <p>
             The Internet is broken today. Private user data is owned by
             mega-corporations and farmed for their benefit.
           </p>
           <p>
             E2E encryption has the potential to change this equation. But
             it&rsquo;s constrained by a crucial limitation.
           </p>
         </div>
 
         <div className={`${css.server_image} ${css.starting_section}`}>
           <lottie-player
             id="cloud-illustration"
             ref={setCloudNode}
             mode="normal"
             src={`${assetsCacheURLPrefix}/animated_cloud.json`}
             speed={1}
           />
         </div>
         <div className={`${css.server_copy} ${css.section}`}>
           <h1 className={css.mono}>Apps need servers.</h1>
           <p>
             Sophisticated applications rely on servers to do things that your
             devices simply can&rsquo;t.
           </p>
           <p>
             That&rsquo;s why E2E encryption only works for simple chat apps
             today. There&rsquo;s no way to build a robust server layer that has
             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>
   );
 }
 
 export default Keyservers;
diff --git a/landing/read-docs-btn.css b/landing/read-docs-btn.css
index bac5b5bd0..e0a93e1f1 100644
--- a/landing/read-docs-btn.css
+++ b/landing/read-docs-btn.css
@@ -1,56 +1,56 @@
 .buttonContainer {
   text-decoration: none;
 }
 
 .button {
   display: flex;
   justify-content: space-between;
   width: 100%;
   border: 2px solid white;
   color: white;
   background: transparent;
   cursor: pointer;
   text-align: left;
   border-radius: 8px;
   font-family: var(--sans-serif);
   font-size: 24px;
   padding: 30px;
   height: 160px;
   transition: 0.2s;
 }
 
 .buttonText {
   align-self: flex-end;
 }
 
 .button:hover {
   background-color: white;
   color: black;
 }
 
 .button img {
   transition: 0.8s;
 }
 
 .button:hover img {
   filter: invert(1);
 }
 
 .cornerIcon {
   align-self: flex-start;
   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;
   }
   .cornerIcon {
     align-self: center;
   }
 }