diff --git a/landing/landing.css b/landing/landing.css
index db834877e..31d535469 100644
--- a/landing/landing.css
+++ b/landing/landing.css
@@ -1,151 +1,159 @@
 .container {
   background: radial-gradient(ellipse at bottom, #1f252e, #111827) fixed;
   font-family: var(--sans-serif);
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
   color: white;
   word-break: break-word;
   height: 100%;
   position: relative;
   z-index: 0;
 }
 
 .innerContainer {
   background-color: var(--page-background);
   margin: 0;
   padding: 0;
   height: 100%;
   overflow: auto;
 }
 
+.innerContainerMobileNav {
+  overflow-y: hidden;
+}
+
+.pageContentContainer {
+  position: relative;
+}
+
 .wrapper {
   transition-property: max-width;
   transition: 300ms;
   max-width: 1850px;
   margin-left: auto;
   margin-right: auto;
   display: grid;
   align-items: center;
   padding-top: 7vh;
   padding-bottom: 235px;
   grid-template-columns: 40px repeat(12, 1fr) 40px;
   grid-template-rows: repeat(auto-fill, 1fr);
   column-gap: 1.5%;
   row-gap: 75px;
   grid-template-areas:
     '.    hImg  hImg  hImg  hImg  .     hInfo hInfo hInfo hInfo hInfo hInfo hInfo .'
     '.    fImg  fImg  fImg  fImg  fImg  .     fInfo fInfo fInfo fInfo fInfo fInfo .'
     '.    cInfo cInfo cInfo cInfo cInfo cInfo .     cImg  cImg  cImg  cImg  cImg  cImg'
     '.    eImg  eImg  eImg  eImg  eImg  .     eInfo eInfo eInfo eInfo eInfo eInfo .'
     '.    sInfo sInfo sInfo sInfo sInfo sInfo .     sImg  sImg  sImg  sImg  sImg  .'
     'oImg oImg  oImg  oImg  oImg  oImg  .     oInfo oInfo oInfo oInfo oInfo oInfo .'
     '.    lInfo lInfo lInfo lInfo lInfo lInfo .     lImg  lImg  lImg  lImg  lImg  .';
 }
 
 @media screen and (max-width: 1099px) {
   .wrapper {
     margin-left: auto;
     margin-right: auto;
     display: grid;
     align-items: center;
     padding-top: 7vh;
     padding-bottom: 235px;
     grid-template-columns: 16px repeat(6, 1fr) 16px;
     grid-template-rows: repeat(auto-fill, 1fr);
     column-gap: 1.5%;
     row-gap: 75px;
     grid-template-areas:
       '.    hInfo hInfo hInfo hInfo hInfo hInfo .'
       '.    fInfo fInfo fInfo fInfo fInfo fInfo .'
       '.    fImg  fImg  fImg  fImg  fImg  fImg  .'
       '.    cInfo cInfo cInfo cInfo cInfo cInfo .'
       '.    cImg  cImg  cImg  cImg  cImg  cImg  cImg'
       '.    eInfo eInfo eInfo eInfo eInfo eInfo .'
       '.    eImg  eImg  eImg  eImg  eImg  eImg  .'
       '.    sInfo sInfo sInfo sInfo sInfo sInfo .'
       '.    sImg  sImg  sImg  sImg  sImg  sImg  .'
       '.    oInfo oInfo oInfo oInfo oInfo oInfo .'
       'oImg oImg  oImg  oImg  oImg  oImg  oImg  .'
       '.    lInfo lInfo lInfo lInfo lInfo lInfo .'
       '.    lImg  lImg  lImg  lImg  lImg  lImg  .';
   }
 
   .heroImage {
     display: none;
   }
 
   .heroInfo {
     display: flex;
     flex-direction: column;
     padding-bottom: 1.5rem;
   }
 
   .federatedImage {
     justify-self: center;
   }
 
   .encryptedImage {
     justify-self: center;
     max-width: 585px;
   }
 
   .sovereignImage {
     justify-self: center;
   }
 }
 
 .heroImage {
   grid-area: hImg;
 }
 
 .heroInfo {
   grid-area: hInfo;
 }
 
 .federatedImage {
   grid-area: fImg;
 }
 
 .federatedInfo {
   grid-area: fInfo;
 }
 
 .customizableImage {
   grid-area: cImg;
 }
 
 .customizableInfo {
   grid-area: cInfo;
 }
 
 .encryptedImage {
   grid-area: eImg;
 }
 
 .encryptedInfo {
   grid-area: eInfo;
 }
 
 .sovereignImage {
   grid-area: sImg;
 }
 
 .sovereignInfo {
   grid-area: sInfo;
 }
 
 .openSourceImage {
   grid-area: oImg;
 }
 
 .openSourceInfo {
   grid-area: oInfo;
 }
 
 .lessNoisyImage {
   grid-area: lImg;
 }
 
 .lessNoisyInfo {
   grid-area: lInfo;
 }
diff --git a/landing/landing.react.js b/landing/landing.react.js
index 1113cfceb..ca8ed57da 100644
--- a/landing/landing.react.js
+++ b/landing/landing.react.js
@@ -1,101 +1,116 @@
 // @flow
 
+import classNames from 'classnames';
 import * as React from 'react';
 import { useRouteMatch } from 'react-router-dom';
 
 import {
   ModalProvider,
   useModalContext,
 } from 'lib/components/modal-provider.react.js';
 
 import AppLanding from './app-landing.react.js';
 import Footer from './footer.react.js';
 import Header from './header.react.js';
 import Investors from './investors.react.js';
 import Keyservers from './keyservers.react.js';
 import css from './landing.css';
+import MobileNav from './mobile-nav.react.js';
 import Privacy from './privacy.react.js';
 import QR from './qr.react.js';
 import SIWE from './siwe.react.js';
 import Support from './support.react.js';
 import Team from './team.react.js';
 import Terms from './terms.react.js';
 import useScrollToTopOnNavigate from './use-scroll-to-top-on-navigate.react.js';
 import './reset.css';
 import './global.css';
 
 function Landing(): React.Node {
   const onSIWE = useRouteMatch({ path: '/siwe' });
   if (onSIWE) {
     return <SIWE />;
   }
   return (
     <ModalProvider>
       <LandingSite />
     </ModalProvider>
   );
 }
 
 function LandingSite(): React.Node {
   const modalContext = useModalContext();
 
   const modals = React.useMemo(
     () =>
       modalContext.modals.map(([modal, key]) => (
         <React.Fragment key={key}>{modal}</React.Fragment>
       )),
     [modalContext.modals],
   );
 
+  const [showMobileNav, setShowMobileNav] = React.useState<boolean>(false);
+
+  const innerContainerClassName = classNames({
+    [css.innerContainer]: true,
+    [css.innerContainerMobileNav]: showMobileNav,
+  });
+
   useScrollToTopOnNavigate();
   const onPrivacy = useRouteMatch({ path: '/privacy' });
   const onTerms = useRouteMatch({ path: '/terms' });
   const onSupport = useRouteMatch({ path: '/support' });
   const onKeyservers = useRouteMatch({ path: '/keyservers' });
   const onQR = useRouteMatch({ path: '/qr' });
   const onTeam = useRouteMatch({ path: '/team' });
   const onInvestors = useRouteMatch({ path: '/investors' });
 
   const activePage = React.useMemo(() => {
     if (onPrivacy) {
       return <Privacy />;
     } else if (onTerms) {
       return <Terms />;
     } else if (onSupport) {
       return <Support />;
     } else if (onKeyservers) {
       return <Keyservers />;
     } else if (onQR) {
       return <QR />;
     } else if (onTeam) {
       return <Team />;
     } else if (onInvestors) {
       return <Investors />;
     } else {
       return <AppLanding />;
     }
   }, [onKeyservers, onPrivacy, onSupport, onTerms, onTeam, onInvestors, onQR]);
 
   let header = <Header />;
   if (onQR) {
     header = null;
   }
 
   let footer = <Footer />;
   if (onQR) {
     footer = null;
   }
 
   return (
     <div className={css.container}>
-      <div className={css.innerContainer}>
+      <div className={innerContainerClassName}>
         {header}
-        {activePage}
-        {footer}
-        {modals}
+        <div className={css.pageContentContainer}>
+          <MobileNav
+            showMobileNav={showMobileNav}
+            setShowMobileNav={setShowMobileNav}
+          />
+          {activePage}
+          {footer}
+          {modals}
+        </div>
       </div>
     </div>
   );
 }
 
 export default Landing;
diff --git a/landing/mobile-nav.css b/landing/mobile-nav.css
index 2547b07aa..df9b04e3a 100644
--- a/landing/mobile-nav.css
+++ b/landing/mobile-nav.css
@@ -1,44 +1,52 @@
 nav.mobileNav {
   position: absolute;
   top: -110vh;
   bottom: auto;
   left: 0;
   right: 0;
   height: 100vh;
   z-index: 1;
   background-color: var(--comparison-cards);
   padding: 8px 16px 0;
+  transition: 500ms;
+  transition-property: top;
+}
+
+nav.activeMobileNav {
+  top: 0;
+  transition: 500ms;
+  transition-property: top;
 }
 
 div.tabContainer {
   border-bottom: 1px solid var(--black-90);
   -webkit-tap-highlight-color: transparent;
 }
 
 .tab {
   color: var(--white-60);
   transition: 150ms;
   transition-property: color;
 }
 
 .activeTab {
   color: var(--white-100);
 }
 
 .tabContent {
   padding: 16px 0;
 }
 
 div.socialIconsContainer {
   display: flex;
   column-gap: 24px;
   margin-top: 16px;
 }
 
 div.socialIconsContainer a {
   -webkit-tap-highlight-color: transparent;
 }
 
 .icon {
   color: var(--white-60);
 }
diff --git a/landing/mobile-nav.react.js b/landing/mobile-nav.react.js
index 404e95e4c..b4e995ed5 100644
--- a/landing/mobile-nav.react.js
+++ b/landing/mobile-nav.react.js
@@ -1,59 +1,83 @@
 // @flow
 
 import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import * as React from 'react';
 import { NavLink } from 'react-router-dom';
 
+import type { SetState } from 'lib/types/hook-types.js';
+
 import css from './mobile-nav.css';
 import typography from './typography.css';
 
-function MobileNav(): React.Node {
+type Props = {
+  +showMobileNav: boolean,
+  +setShowMobileNav: SetState<boolean>,
+};
+
+function MobileNav(props: Props): React.Node {
+  const { showMobileNav, setShowMobileNav } = props;
+
   const navLinkClassName = classNames([typography.paragraph2, css.tab]);
 
+  const mobileNavClassName = classNames({
+    [css.mobileNav]: true,
+    [css.activeMobileNav]: showMobileNav,
+  });
+
+  const onClickTab = React.useCallback(() => {
+    setShowMobileNav(false);
+  }, [setShowMobileNav]);
+
   return (
-    <nav className={css.mobileNav}>
+    <nav className={mobileNavClassName}>
       <div className={css.tabContainer}>
         <NavLink
           to="/keyservers"
           exact
           className={navLinkClassName}
           activeClassName={css.activeTab}
         >
-          <div className={css.tabContent}>Keyserver</div>
+          <div onClick={onClickTab} className={css.tabContent}>
+            Keyserver
+          </div>
         </NavLink>
       </div>
       <div className={css.tabContainer}>
         <NavLink
           to="/team"
           exact
           className={navLinkClassName}
           activeClassName={css.activeTab}
         >
-          <div className={css.tabContent}>Team</div>
+          <div onClick={onClickTab} className={css.tabContent}>
+            Team
+          </div>
         </NavLink>
       </div>
       <div className={css.tabContainer}>
         <NavLink
           to="/investors"
           exact
           className={navLinkClassName}
           activeClassName={css.activeTab}
         >
-          <div className={css.tabContent}>Investors</div>
+          <div onClick={onClickTab} className={css.tabContent}>
+            Investors
+          </div>
         </NavLink>
       </div>
       <div className={css.socialIconsContainer}>
         <a href="https://twitter.com/commdotapp">
           <FontAwesomeIcon icon={faTwitter} className={css.icon} size="xl" />
         </a>
         <a href="https://github.com/CommE2E/comm">
           <FontAwesomeIcon icon={faGithub} className={css.icon} size="xl" />
         </a>
       </div>
     </nav>
   );
 }
 
 export default MobileNav;