diff --git a/landing/app-landing.react.js b/landing/app-landing.react.js
index 51894b69d..9a654cb4b 100644
--- a/landing/app-landing.react.js
+++ b/landing/app-landing.react.js
@@ -1,42 +1,47 @@
 // @flow
 
 import * as React from 'react';
 
 import { assetMetaData } from './asset-meta-data';
 import HeroContent from './hero-content.react';
 import InfoBlock from './info-block.react';
 import css from './landing.css';
 import Picture from './Picture.react';
 import StarBackground from './star-background.react';
 import usePreloadAssets from './use-pre-load-assets.react';
 
-function AppLanding(): React.Node {
+type AppLandingProps = {
+  +onRequestAccess: (e: Event) => Promise<void>,
+};
+
+function AppLanding(props: AppLandingProps): React.Node {
+  const { onRequestAccess } = props;
   usePreloadAssets(assetMetaData);
   const [
     hero,
     federated,
     customizable,
     encrypted,
     sovereign,
     openSource,
     lessNoisy,
   ] = assetMetaData;
 
   return (
     <main className={css.wrapper}>
       <StarBackground />
       <div className={hero.imageStyle}>
         <Picture url={hero.url} alt={hero.alt} />
       </div>
-      <HeroContent />
+      <HeroContent onRequestAccess={onRequestAccess} />
       <InfoBlock {...federated} />
       <InfoBlock {...customizable} />
       <InfoBlock {...encrypted} />
       <InfoBlock {...sovereign} />
       <InfoBlock {...openSource} />
       <InfoBlock {...lessNoisy} />
     </main>
   );
 }
 
 export default AppLanding;
diff --git a/landing/hero-content.css b/landing/hero-content.css
index 54d95b579..84bd90440 100644
--- a/landing/hero-content.css
+++ b/landing/hero-content.css
@@ -1,41 +1,61 @@
 .cycling_header {
   --smallest-font-size: 30px;
   --largest-font-size: 72px;
   --font-scale: calc(1rem + 2vw);
   font-weight: bold;
   font-family: 'iA Writer Duo S', monospace;
   padding-bottom: 16px;
   font-size: clamp(
     var(--smallest-font-size),
     var(--font-scale),
     var(--largest-font-size)
   );
 }
 
 .sub_heading {
   --smallest-font-size: 16px;
   --largest-font-size: 50px;
   --font-scale: calc(0.75rem + 1.25vw);
 
   font-size: clamp(
     var(--smallest-font-size),
     var(--font-scale),
     var(--largest-font-size)
   );
 }
 
 .cycling_content,
 .sub_heading {
   font-family: 'iA Writer Duo S', monospace;
   text-align: left;
   line-height: 1.35;
   letter-spacing: -0.01em;
 }
 
 .cycling_content {
   background: var(--sub-heading-color);
 }
 
 .sub_heading {
   color: var(--sub-heading-color);
 }
+
+button.request_access {
+  display: none;
+}
+
+@media screen and (max-width: 1099px) {
+  button.request_access {
+    display: none;
+    all: unset;
+    border-radius: 4px;
+    font-size: 16px;
+    background-color: var(--btn-bg);
+    color: var(--btn-color);
+    justify-content: center;
+    padding: 12px 18px;
+    transition: 300ms;
+    flex-basis: 130px;
+    text-align: center;
+  }
+}
diff --git a/landing/hero-content.react.js b/landing/hero-content.react.js
index e66c22e2b..685164d8a 100644
--- a/landing/hero-content.react.js
+++ b/landing/hero-content.react.js
@@ -1,32 +1,40 @@
 // @flow
 
 import * as React from 'react';
 import TextLoop from 'react-text-loop';
 
 import { assetMetaData } from './asset-meta-data';
 import css from './hero-content.css';
 
-function HeroContent(): React.Node {
+type HeroContentProps = {
+  +onRequestAccess: (e: Event) => Promise<void>,
+};
+
+function HeroContent(props: HeroContentProps): React.Node {
+  const { onRequestAccess } = props;
   const [hero] = assetMetaData;
 
   return (
     <section className={hero.infoStyle}>
       <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>
       <p className={css.sub_heading}>(think &quot;Web3 Discord&quot;)</p>
+      <button className={css.request_access} onClick={onRequestAccess}>
+        Request Access
+      </button>
     </section>
   );
 }
 
 export default HeroContent;
diff --git a/landing/landing.react.js b/landing/landing.react.js
index b306cb654..b0122351f 100644
--- a/landing/landing.react.js
+++ b/landing/landing.react.js
@@ -1,53 +1,53 @@
 // @flow
 
 import * as React from 'react';
 import { useRouteMatch } from 'react-router-dom';
 
 import AppLanding from './app-landing.react';
 import Footer from './footer.react';
 import Header from './header.react';
 import Keyservers from './keyservers.react';
 import Privacy from './privacy.react';
 import Support from './support.react';
 import Terms from './terms.react';
 import useScrollToTopOnNavigate from './use-scroll-to-top-on-navigate.react';
 import './reset.css';
 import './global.css';
 
 function Landing(): React.Node {
   useScrollToTopOnNavigate();
   const onPrivacy = useRouteMatch({ path: '/privacy' });
   const onTerms = useRouteMatch({ path: '/terms' });
   const onSupport = useRouteMatch({ path: '/support' });
   const onKeyservers = useRouteMatch({ path: '/keyservers' });
 
   const scrollToSubscriptionForm = React.useCallback(async (e: Event) => {
     e.preventDefault();
     window?.scrollTo(0, document.body?.scrollHeight);
     document.getElementById('subscription-form')?.focus();
   }, []);
 
   const activePage = React.useMemo(() => {
     if (onPrivacy) {
       return <Privacy />;
     } else if (onTerms) {
       return <Terms />;
     } else if (onSupport) {
       return <Support />;
     } else if (onKeyservers) {
       return <Keyservers />;
     } else {
-      return <AppLanding />;
+      return <AppLanding onRequestAccess={scrollToSubscriptionForm} />;
     }
-  }, [onKeyservers, onPrivacy, onSupport, onTerms]);
+  }, [onKeyservers, onPrivacy, onSupport, onTerms, scrollToSubscriptionForm]);
 
   return (
     <>
       <Header onRequestAccess={scrollToSubscriptionForm} />
       {activePage}
       <Footer />
     </>
   );
 }
 
 export default Landing;