diff --git a/landing/footer.css b/landing/footer.css
--- a/landing/footer.css
+++ b/landing/footer.css
@@ -1,8 +1,7 @@
 footer.wrapper {
   display: flex;
   justify-content: center;
-  background: rgba(235, 235, 235, 0.05);
-  backdrop-filter: blur(12px);
+  background: var(--black-100);
   position: sticky;
   top: 100vh;
 }
@@ -13,37 +12,75 @@
 }
 
 .navigation {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 40px;
+}
+
+.linksContainer {
   display: flex;
   flex-direction: column;
+  row-gap: 16px;
 }
 
-.navigation a {
-  font-size: clamp(1rem, 0.8954rem + 0.5229vw, 1.5rem);
-  font-weight: 400;
+.iconsContainer {
+  display: flex;
+  align-items: flex-end;
+  column-gap: 24px;
 }
 
-.navigation svg {
+.legalContainer {
+  border-top: 1px solid var(--black-70);
+  padding-top: 40px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.legalLinks {
+  display: flex;
+  column-gap: 32px;
+  align-items: center;
+}
+
+.navLinkIcons {
+  color: var(--white-60);
   margin-left: 8px;
 }
 
-.navigation a,
-.navigation svg {
-  color: #808080;
+.socialIcons {
+  color: var(--white-100);
+}
+
+.links {
+  color: var(--white-60);
   transition: 150ms;
   transition-property: color;
 }
 
-.navigation a:hover,
-.navigation a:hover svg {
-  color: #ffffff;
+.links:hover,
+.navLinkIcons:hover {
+  color: var(--white-100);
   transition: 150ms;
   transition-property: color;
 }
 
 a.logo {
-  font-family: var(--sans-serif);
-  font-weight: 500;
-  color: var(--logo-color);
-  font-size: 28px;
+  color: var(--white-100);
   padding-bottom: 16px;
 }
+
+.copyrightText {
+  color: var(--white-60);
+}
+
+@media screen and (max-width: 600px) {
+  .navigation,
+  .legalContainer {
+    flex-direction: column;
+  }
+
+  .socialIcons,
+  .legalLinks {
+    margin-top: 16px;
+  }
+}
diff --git a/landing/footer.react.js b/landing/footer.react.js
--- a/landing/footer.react.js
+++ b/landing/footer.react.js
@@ -1,11 +1,14 @@
 // @flow
 
-import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
+import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons';
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
 import * as React from 'react';
 import { NavLink } from 'react-router-dom';
 
 import css from './footer.css';
+import typography from './typography.css';
 
 const navLinkProps = {
   activeStyle: {
@@ -15,47 +18,116 @@
 };
 
 function Footer(): React.Node {
+  const logoClassName = classNames([typography.heading2, css.logo]);
+  const navLinkClassName = classNames([typography.paragraph1, css.links]);
+  const legalTextClassName = classNames([
+    typography.paragraph2,
+    css.copyrightText,
+  ]);
+  const legalLinksClassName = classNames([typography.paragraph2, css.links]);
+
   return (
     <footer className={css.wrapper}>
       <div className={css.contentWrapper}>
         <div className={css.navigation}>
-          <NavLink className={css.logo} to="/">
-            Comm
-          </NavLink>
-          <NavLink to="/keyservers" exact {...navLinkProps}>
-            Keyservers
-          </NavLink>
-          <NavLink to="/support" exact {...navLinkProps}>
-            Support
-          </NavLink>
-          <NavLink to="/team" exact {...navLinkProps}>
-            Team
-          </NavLink>
-          <NavLink to="/investors" exact {...navLinkProps}>
-            Investors
-          </NavLink>
-          <NavLink to="/terms" exact {...navLinkProps}>
-            Terms of Use
-          </NavLink>
-          <NavLink to="/privacy" exact {...navLinkProps}>
-            Privacy Policy
-          </NavLink>
-          <a href="https://www.notion.so/How-Comm-works-d6217941db7c4237b9d08b427aef3234">
-            Learn how Comm works
-            <FontAwesomeIcon
-              size="sm"
-              color="#ffffff"
-              icon={faExternalLinkSquareAlt}
-            />
-          </a>
-          <a href="https://commapp.notion.site/Learn-more-about-Comm-1efb9b646d504dddae30a20b4f33200e">
-            About Comm
-            <FontAwesomeIcon
-              size="sm"
-              color="#ffffff"
-              icon={faExternalLinkSquareAlt}
-            />
-          </a>
+          <div className={css.linksContainer}>
+            <NavLink className={logoClassName} to="/">
+              Comm
+            </NavLink>
+            <NavLink
+              to="/keyservers"
+              exact
+              {...navLinkProps}
+              className={navLinkClassName}
+            >
+              Keyservers
+            </NavLink>
+            <NavLink
+              to="/support"
+              exact
+              {...navLinkProps}
+              className={navLinkClassName}
+            >
+              Support
+            </NavLink>
+            <NavLink
+              to="/team"
+              exact
+              {...navLinkProps}
+              className={navLinkClassName}
+            >
+              Team
+            </NavLink>
+            <NavLink
+              to="/investors"
+              exact
+              {...navLinkProps}
+              className={navLinkClassName}
+            >
+              Investors
+            </NavLink>
+            <a
+              href="https://www.notion.so/How-Comm-works-d6217941db7c4237b9d08b427aef3234"
+              className={navLinkClassName}
+            >
+              Learn how Comm works
+              <FontAwesomeIcon
+                size="sm"
+                className={css.navLinkIcons}
+                icon={faExternalLinkAlt}
+              />
+            </a>
+            <a
+              href="https://commapp.notion.site/Learn-more-about-Comm-1efb9b646d504dddae30a20b4f33200e"
+              className={navLinkClassName}
+            >
+              About Comm
+              <FontAwesomeIcon
+                size="sm"
+                className={css.navLinkIcons}
+                icon={faExternalLinkAlt}
+              />
+            </a>
+          </div>
+          <div className={css.iconsContainer}>
+            <a href="https://twitter.com/commdotapp">
+              <FontAwesomeIcon
+                size="lg"
+                className={css.socialIcons}
+                icon={faTwitter}
+              />
+            </a>
+            <a href="https://github.com/CommE2E/comm">
+              <FontAwesomeIcon
+                size="lg"
+                className={css.socialIcons}
+                icon={faGithub}
+              />
+            </a>
+          </div>
+        </div>
+        <div className={css.legalContainer}>
+          <p className={legalTextClassName}>
+            &copy; 2023 Comm. All Rights Reserved
+          </p>
+          <div className={css.legalLinks}>
+            <NavLink
+              to="/terms"
+              exact
+              {...navLinkProps}
+              className={legalLinksClassName}
+            >
+              Terms of Use
+            </NavLink>
+            <NavLink
+              to="/privacy"
+              exact
+              {...navLinkProps}
+              className={legalLinksClassName}
+            >
+              Privacy Policy
+            </NavLink>
+          </div>
         </div>
       </div>
     </footer>