diff --git a/landing/app-landing.react.js b/landing/app-landing.react.js
index 54c93f5f3..365635643 100644
--- a/landing/app-landing.react.js
+++ b/landing/app-landing.react.js
@@ -1,141 +1,107 @@
 // @flow
 
 import * as React from 'react';
 
+import { assetUrl, assetMetaData } from './asset-meta-data';
 import CyclingHeader from './cycling-header.react';
 import InfoCard from './info-card.react';
 import css from './landing.css';
 import StarBackground from './star-background.react';
 
-const screenshots = [
-  {
-    alt: 'a mobile phone conversation list screen',
-    file: 'federated-prototype',
-  },
-  {
-    alt: 'a mobile phone with customized dashboard screen',
-    file: 'customizable-prototype',
-  },
-  {
-    alt: 'a mobile phone chat conversation screen',
-    file: 'e2e-encrypted-prototype',
-  },
-  {
-    alt: 'a mobile phone user information screen',
-    file: 'sovereign-prototype',
-  },
-  {
-    alt: 'a mobile phone addon app selection screen',
-    file: 'open-source-prototype',
-  },
-  {
-    alt: 'a mobile phone notification options screen',
-    file: 'less-noisy-prototype',
-  },
-];
-
-const LandingAssetsS3URL = 'https://dh9fld3hutpxf.cloudfront.net';
-
 function AppLanding(): React.Node {
+  const [
+    hero,
+    federated,
+    customizable,
+    encrypted,
+    sovereign,
+    openSource,
+    lessNoisy,
+  ] = assetMetaData;
+
   React.useEffect(() => {
     const testWEBP = 'UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
     const testImg = new Image();
 
     // preload webp if supported
     testImg.onload = () => {
-      for (const imageFileName of screenshots) {
+      for (const imageFileName of assetMetaData) {
         const image = new Image();
-        image.src = `${LandingAssetsS3URL}/${imageFileName.file}.webp`;
+        image.src = `${assetUrl}/${imageFileName.url}.webp`;
       }
     };
 
     // preload png if webp not supported
     testImg.onerror = () => {
-      for (const imageFileName of screenshots) {
+      for (const imageFileName of assetMetaData) {
         const image = new Image();
-        image.src = `${LandingAssetsS3URL}/${imageFileName.file}.png`;
+        image.src = `${assetUrl}/${imageFileName.url}.png`;
       }
     };
 
     testImg.src = `data:image/webp;base64,${testWEBP}`;
   }, []);
 
   return (
     <>
       <StarBackground />
       <div className={css.app_landing_grid}>
         <div className={css.app_preview}>
           <picture>
-            <source
-              srcSet={`${LandingAssetsS3URL}/${screenshots[0].file}.webp`}
-              type="image/webp"
-            />
-            <source
-              srcSet={`${LandingAssetsS3URL}/${screenshots[0].file}.png`}
-              type="image/png"
-            />
-            <img
-              src={`${LandingAssetsS3URL}/${screenshots[0].file}.png`}
-              alt={screenshots[0].alt}
-            />
+            <source srcSet={`${hero.url}.webp`} type="image/webp" />
+            <source srcSet={`${hero.url}.png`} type="image/png" />
+            <img src={`${hero.url}.png`} alt={hero.alt} />
           </picture>
         </div>
         <div className={css.app_copy}>
           <div className={css.app_copy_wrapper}>
             <CyclingHeader />
             <p className={css.app_landing_subheading}>
               (think &quot;Web3 Discord&quot;)
             </p>
           </div>
 
           <div className={css.tile_grid}>
             <InfoCard
-              title="Federated"
-              description="Comm is a protocol paired with an app. Each community hosts its
-                own backend, which we call a keyserver. Our keyserver software
-                is built to be forked."
+              title={federated.title}
+              description={federated.description}
               baseStyle={css.tile_one}
             />
 
             <InfoCard
-              title="Customizable"
-              description="Write mini-apps and custom modules in React. Skin your
-                community. Customize your tabs and your home page."
+              title={customizable.title}
+              description={customizable.description}
               baseStyle={css.tile_two}
             />
 
             <InfoCard
-              title="E2E-encrypted"
-              description="Comm started as a project to build a private, decentralized
-                alternative to Discord. Privacy is in our DNA."
+              title={encrypted.title}
+              description={encrypted.description}
               baseStyle={css.tile_three}
             />
 
             <InfoCard
-              title="Sovereign"
-              description="Log in with your ETH wallet. Use ENS as your username. On Comm,
-                your identity and data are yours to control."
+              title={sovereign.title}
+              description={sovereign.description}
               baseStyle={css.tile_four}
             />
 
             <InfoCard
-              title="Open Source"
-              description="All of our code is open source. Keyservers, iOS/Android app, our
-                cloud services… all of it. We believe in open platforms."
+              title={openSource.title}
+              description={openSource.description}
               baseStyle={css.tile_five}
             />
 
             <InfoCard
-              title="Less Noisy"
-              description="We let each user decide what they want to follow with detailed
-                notif controls and a powerful unified inbox."
+              title={lessNoisy.title}
+              description={lessNoisy.description}
               baseStyle={css.tile_six}
             />
           </div>
         </div>
       </div>
     </>
   );
 }
 
 export default AppLanding;
diff --git a/landing/asset-meta-data.js b/landing/asset-meta-data.js
new file mode 100644
index 000000000..6b751af5d
--- /dev/null
+++ b/landing/asset-meta-data.js
@@ -0,0 +1,54 @@
+// @flow
+export const assetUrl = 'https://dh9fld3hutpxf.cloudfront.net';
+export const assetMetaData = [
+  {
+    alt: 'a mobile phone screen highlighting chat and DAO voting',
+    url: `${assetUrl}/Header`,
+    title: 'Header',
+    description: '',
+  },
+  {
+    alt: 'a mobile phone screen highlighting chat organization',
+    url: `${assetUrl}/Federated`,
+    title: 'Federated',
+    description: `Comm is a protocol paired with an app.
+                   Each community hosts its own backend,
+                   which we call a keyserver.
+                   Our keyserver software is built to be forked.`,
+  },
+  {
+    alt: 'a web app screen highlighting web3 apps in Comm',
+    url: `${assetUrl}/'Customizable`,
+    title: 'Customizable',
+    description: `Write mini-apps and custom modules in React.
+                   Skin your community. Customize your tabs and your home page.`,
+  },
+  {
+    alt: 'a mobile phone screen highlighting a conversation',
+    url: `${assetUrl}/E2E-encrypted`,
+    title: 'E2E-encrypted',
+    description: `Comm started as a project to build a private, decentralized
+                 alternative to Discord. Privacy is in our DNA.`,
+  },
+  {
+    alt: 'a mobile phone user information screen',
+    url: `${assetUrl}/Sovereign`,
+    title: 'Sovereign',
+    description: `Log in with your ETH wallet. Use ENS as your username. On Comm,
+                 your identity and data are yours to control.`,
+  },
+  {
+    alt: 'a web app screen highlighting web3 apps in Comm',
+    url: `${assetUrl}/Open-Source`,
+    title: 'Open Source',
+    description: `All of our code is open source. Keyservers, iOS/Android app, our
+                 cloud services… all of it. We believe in open platforms.`,
+  },
+  {
+    alt: 'a mobile phone notification options screen',
+    url: `${assetUrl}/Less-Noisy`,
+    title: 'Less Noisy',
+    description: `We let each user decide what they want to follow with detailed
+                 notif controls and a powerful unified inbox.`,
+  },
+];
diff --git a/landing/keyservers.react.js b/landing/keyservers.react.js
index e63a14c31..41f591890 100644
--- a/landing/keyservers.react.js
+++ b/landing/keyservers.react.js
@@ -1,149 +1,148 @@
 // @flow
 
 import { create } from '@lottiefiles/lottie-interactivity';
 import * as React from 'react';
 
+import { assetUrl } from './asset-meta-data';
 import css from './landing.css';
 import ReadDocsButton from './read-docs-btn.react';
 import StarBackground from './star-background.react';
 
 const useIsomorphicLayoutEffect =
   typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
 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;
     }
     eyeNode.addEventListener('load', onEyeIllustrationLoad);
     return () => eyeNode.removeEventListener('load', onEyeIllustrationLoad);
   }, [eyeNode, onEyeIllustrationLoad]);
 
   const [cloudNode, setCloudNode] = React.useState(null);
   useIsomorphicLayoutEffect(() => {
     if (!cloudNode) {
       return;
     }
     cloudNode.addEventListener('load', onCloudIllustrationLoad);
     return () => cloudNode.removeEventListener('load', onCloudIllustrationLoad);
   }, [cloudNode, onCloudIllustrationLoad]);
 
-  const LandingAssetsS3URL = 'https://dh9fld3hutpxf.cloudfront.net';
-
   return (
     <div>
       <StarBackground />
       <div className={css.body_grid}>
         <div className={`${css.hero_image} ${css.starting_section}`}>
           <lottie-player
             id="eye-illustration"
             ref={setEyeNode}
             mode="normal"
-            src={`${LandingAssetsS3URL}/animated_eye.json`}
+            src={`${assetUrl}/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&apos;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={`${LandingAssetsS3URL}/animated_cloud.json`}
+            src={`${assetUrl}/animated_cloud.json`}
             speed={1}
           />
         </div>
         <div className={`${css.server_copy} ${css.section}`}>
           <h2 className={css.mono}>Apps need servers.</h2>
           <p>
             Sophisticated applications rely on servers to do things that your
             devices simply can&apos;t.
           </p>
           <p>
             That&apos;s why E2E encryption only works for simple chat apps
             today. There&apos;s no way to build a robust server layer that has
             access to your data without leaking that data to corporations.
           </p>
         </div>
 
         <div className={css.keyserver_company}>
           <h1>
             Comm
             <span className={css.mono}>
               {' '}
               is the <span className={css.purple_accent}>keyserver</span>{' '}
               company.
             </span>
           </h1>
         </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&apos;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>
   );
 }
 
 export default Keyservers;