diff --git a/landing/hero-content.css b/landing/hero-content.css
index a048c40fd..517d16c8e 100644
--- a/landing/hero-content.css
+++ b/landing/hero-content.css
@@ -1,41 +1,29 @@
-.cycling_header {
-  font-weight: bold;
-  font-family: 'iA Writer Duo S', monospace;
-  padding-bottom: 16px;
-  font-size: clamp(2.5rem, -0.5rem + 4vw, 4.25rem);
+.header {
+  color: var(--white-80);
+  margin-bottom: 24px;
 }
-@media (max-width: 1099px) {
-  .cycling_header {
-    font-size: clamp(1.5rem, 0.0122rem + 5.9514vw, 4.1rem);
-  }
+
+.header span {
+  background: linear-gradient(90deg, #5d34b3 0%, #a314d5 49.31%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
-.sub_heading {
-  color: var(--sub-heading-color);
-  font-size: clamp(1rem, 0.5556rem + 2.2222vw, 3.125rem);
-  margin-bottom: 60px;
+.subHeader {
+  color: var(--white-80);
+  margin-bottom: 56px;
 }
 
 form {
   width: 92%;
 }
 @media (max-width: 1099px) {
   form {
     width: 100%;
   }
 }
 
-.cycling_content,
-.sub_heading {
-  font-family: 'iA Writer Duo S', monospace;
-  text-align: left;
-  line-height: 1.35;
-}
-
-.cycling_content {
-  background: var(--sub-heading-color);
-}
-
 .contentWrapper {
   flex-basis: 300px;
 }
diff --git a/landing/hero-content.react.js b/landing/hero-content.react.js
index 9b1c198fb..0e2e18736 100644
--- a/landing/hero-content.react.js
+++ b/landing/hero-content.react.js
@@ -1,36 +1,36 @@
 // @flow
 
+import classNames from 'classnames';
 import * as React from 'react';
-import TextLoop from 'react-text-loop';
 
 import { assetMetaData } from './asset-meta-data.js';
 import css from './hero-content.css';
 import SubscriptionForm from './subscription-form.react.js';
+import typography from './typography.css';
 
 function HeroContent(): React.Node {
   const [hero] = assetMetaData;
 
+  const headerClassName = classNames([typography.display3, css.header]);
+  const subheaderClassName = classNames([
+    typography.subheading2,
+    css.subHeader,
+  ]);
+
   return (
     <section className={hero.infoStyle}>
       <div className={css.contentWrapper}>
-        <h1 className={css.cycling_header}>
-          {'Comm is crypto-native\nchat for '}
-          <TextLoop
-            interval={1750}
-            springConfig={{ stiffness: 180, damping: 16 }}
-          >
-            <span className={css.cycling_content}>DAOs</span>
-            <span className={css.cycling_content}>venture funds</span>
-            <span className={css.cycling_content}>open source</span>
-            <span className={css.cycling_content}>gaming guilds</span>
-            <span className={css.cycling_content}>social clubs</span>
-          </TextLoop>
+        <h1 className={headerClassName}>
+          Comm is an encrypted messaging app for <span>communities</span>
         </h1>
-        <p className={css.sub_heading}>(think &quot;Web3 Discord&quot;)</p>
+        <p className={subheaderClassName}>
+          We extend Signal&rsquo;s model of E2E encryption with personal servers
+          to enable richer functionality.
+        </p>
         <SubscriptionForm />
       </div>
     </section>
   );
 }
 
 export default HeroContent;