diff --git a/landing/keyservers.css b/landing/keyservers.css
index f6794fb05..b2900d2bd 100644
--- a/landing/keyservers.css
+++ b/landing/keyservers.css
@@ -1,147 +1,158 @@
 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;
 }
 
+.servers_section,
 .keyserver_company_section {
   display: flex;
   padding: 120px 32px;
   justify-content: center;
 }
 
+.servers_section {
+  background-color: var(--light-dark-page-background);
+}
+
+.servers_container,
 .keyserver_company_container {
   display: flex;
   width: 1376px;
   max-width: 90vw;
 }
 
+.servers_image {
+  width: 100%;
+  max-height: 480px;
+}
+
+.servers_copy {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-left: 72px;
+}
+
 .read_the_docs {
   width: 100%;
   align-self: flex-end;
   margin-bottom: 24px;
   margin-left: 112px;
 }
 
 @media (max-width: 1440px) {
+  .servers_container,
   .keyserver_company_container {
     flex-direction: column;
   }
 
+  .servers_copy {
+    padding-left: 0;
+    margin-top: 64px;
+  }
+
   .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';
+  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;
 }
-div.server_image {
-  grid-area: server_image;
-  object-fit: scale-down;
-  align-self: center;
-}
-div.server_copy {
-  grid-area: server_copy;
-  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'
-      'server_image'
-      'server_copy';
+      'hero_copy';
   }
 
   /* ===== LAYOUT HACKS ===== */
   .section {
     padding-top: 20px;
   }
 }
diff --git a/landing/keyservers.react.js b/landing/keyservers.react.js
index 11bb84d5e..60478440b 100644
--- a/landing/keyservers.react.js
+++ b/landing/keyservers.react.js
@@ -1,157 +1,160 @@
 // @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 (
     <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>
 
+      <section className={css.servers_section}>
+        <div className={css.servers_container}>
+          <div className={css.servers_image}>
+            <lottie-player
+              id="cloud-illustration"
+              ref={setCloudNode}
+              mode="normal"
+              src={`${assetsCacheURLPrefix}/animated_cloud.json`}
+              speed={1}
+            />
+          </div>
+          <div className={css.servers_copy}>
+            <h1 className={headingClassName}>Apps need servers.</h1>
+            <p className={descriptionClassName}>
+              Sophisticated applications rely on servers to do things that your
+              devices simply can&rsquo;t.
+            </p>
+            <p className={descriptionClassName}>
+              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>
+      </section>
       <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.
             </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>
       </section>
       <KeyserverFAQ />
       <RequestAccess />
     </main>
   );
 }
 
 export default Keyservers;