diff --git a/landing/header.react.js b/landing/header.react.js
index 404e7c36b..af422edc8 100644
--- a/landing/header.react.js
+++ b/landing/header.react.js
@@ -1,82 +1,77 @@
 // @flow
 
 import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
 import headerStyles from './header.css';
 import type { LandingPageName } from './landing.react';
 
 type HeaderProps = {
   +isLegalPage: boolean,
   +activePageName: LandingPageName,
+  +onRequestAccess: (e: Event) => Promise<void>,
 };
 function Header(props: HeaderProps): React.Node {
-  const { isLegalPage, activePageName } = props;
+  const { isLegalPage, activePageName, onRequestAccess } = props;
 
   const headerStyle = isLegalPage
     ? `${headerStyles.header_grid} ${headerStyles.header_legal}`
     : headerStyles.header_grid;
 
-  const onRequestAccess = React.useCallback(async (e: Event) => {
-    e.preventDefault();
-    window?.scrollTo(0, document.body?.scrollHeight);
-    document.getElementById('subscription-form')?.focus();
-  }, []);
-
   return (
     <div>
       <div className={headerStyle}>
         <div className={headerStyles.logo}>
           <Link to="/">
             <h1>Comm</h1>
           </Link>
         </div>
         <div className={headerStyles.top_nav}>
           <div
             className={
               activePageName === 'app'
                 ? headerStyles.active_tab
                 : headerStyles.inactive_tab
             }
           >
             <Link to="/">
               <h1>App</h1>
             </Link>
           </div>
           <div
             className={
               activePageName === 'keyservers'
                 ? headerStyles.active_tab
                 : headerStyles.inactive_tab
             }
           >
             <Link to="/keyservers">
               <h1>Keyservers</h1>
             </Link>
           </div>
         </div>
         <div className={headerStyles.social_icons}>
           <a href="#" onClick={onRequestAccess}>
             <div className={headerStyles.request_access}>
               <p>Request Access</p>
             </div>
           </a>
           <a href="https://twitter.com/commdotapp">
             <div className={headerStyles.twitter_icon}>
               <FontAwesomeIcon size="lg" color="#ebedee" icon={faTwitter} />
             </div>
           </a>
           <a href="https://github.com/CommE2E/comm">
             <div className={headerStyles.github_icon}>
               <FontAwesomeIcon size="lg" color="#ebedee" icon={faGithub} />
             </div>
           </a>
         </div>
       </div>
     </div>
   );
 }
 
 export default Header;
diff --git a/landing/landing.react.js b/landing/landing.react.js
index 74df19f04..93b700d91 100644
--- a/landing/landing.react.js
+++ b/landing/landing.react.js
@@ -1,58 +1,68 @@
 // @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';
 
 export type LandingPageName =
   | 'app'
   | 'keyservers'
   | 'privacy'
   | 'terms'
   | 'support';
 
 type ActivePage = { name: LandingPageName, node: React.Node };
 
 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 isLegalPage: boolean = React.useMemo(
     () => !!(onPrivacy || onTerms || onSupport),
     [onPrivacy, onSupport, onTerms],
   );
 
+  const scrollToSubscriptionForm = React.useCallback(async (e: Event) => {
+    e.preventDefault();
+    window?.scrollTo(0, document.body?.scrollHeight);
+    document.getElementById('subscription-form')?.focus();
+  }, []);
+
   const activePage: ActivePage = React.useMemo(() => {
     if (onPrivacy) {
       return { name: 'privacy', node: <Privacy /> };
     } else if (onTerms) {
       return { name: 'terms', node: <Terms /> };
     } else if (onSupport) {
       return { name: 'support', node: <Support /> };
     } else if (onKeyservers) {
       return { name: 'keyservers', node: <Keyservers /> };
     } else {
       return { name: 'app', node: <AppLanding /> };
     }
   }, [onKeyservers, onPrivacy, onSupport, onTerms]);
 
   return (
     <>
-      <Header isLegalPage={isLegalPage} activePageName={activePage.name} />
+      <Header
+        isLegalPage={isLegalPage}
+        activePageName={activePage.name}
+        onRequestAccess={scrollToSubscriptionForm}
+      />
       {activePage.node}
       <Footer isLegalPage={isLegalPage} activePageName={activePage.name} />
     </>
   );
 }
 
 export default Landing;