diff --git a/src/assets/locales/ja.json b/src/assets/locales/ja.json
index 9da9611183..77e5496198 100644
--- a/src/assets/locales/ja.json
+++ b/src/assets/locales/ja.json
@@ -43,7 +43,7 @@
   "header.sign-out": "サインアウト",
   "header.signed-in-as": "ログインしました {email}",
   "header.source": "ソース",
-  "home-page.add-to-discord": "Discordに <a>{appName} Bot</a> を追加する",
+  "home-page.add-to-discord": "Discordに {appName} Bot を追加する",
   "home-page.have-code": "ルームコードをお持ちですか？",
   "hubs-cloud-page.get-started": "クイックスタートガイド",
   "hubs-cloud-page.hero-button.enterprise": "Get Hubs Cloud Enterprise",
diff --git a/src/assets/locales/pt.json b/src/assets/locales/pt.json
index 47789280fe..f1366ce0c3 100644
--- a/src/assets/locales/pt.json
+++ b/src/assets/locales/pt.json
@@ -42,7 +42,7 @@
   "header.sign-in": "Entrar",
   "header.sign-out": "Sair",
   "header.signed-in-as": "Entrou como {email}",
-  "home-page.add-to-discord": "Adicionar o <a>Bot {appName}</a> ao Discord",
+  "home-page.add-to-discord": "Adicionar o Bot {appName} ao Discord",
   "home-page.have-code": "Tém um código de sala?",
   "hubs-cloud-page.get-started": "Guia rápido",
   "hubs-cloud-page.hero-button.enterprise": "Adquira o Hubs Cloud Enterprise",
diff --git a/src/assets/locales/ru.json b/src/assets/locales/ru.json
index b56518ade1..ca9e666619 100644
--- a/src/assets/locales/ru.json
+++ b/src/assets/locales/ru.json
@@ -46,7 +46,7 @@
   "header.sign-out": "Выйти из системы",
   "header.signed-in-as": "Учётная запись {email}",
   "header.source": "Источник",
-  "home-page.add-to-discord": "Добавить <a>бот {appName}</a> в Discord",
+  "home-page.add-to-discord": "Добавить бот {appName} в Discord",
   "home-page.have-code": "У вас есть код комнаты?",
   "hubs-cloud-page.get-started": "Руководство для быстрого старта",
   "hubs-cloud-page.hero-button.enterprise": "Настроить корпоративный Hubs Cloud",
diff --git a/src/assets/locales/zh.json b/src/assets/locales/zh.json
index d35db5509b..3fb3b7157d 100644
--- a/src/assets/locales/zh.json
+++ b/src/assets/locales/zh.json
@@ -46,7 +46,7 @@
   "header.sign-out": "退出",
   "header.signed-in-as": "登录为 {email}",
   "header.source": "来源",
-  "home-page.add-to-discord": "添加 <a>{appName} 自动程序</a> 到Discord",
+  "home-page.add-to-discord": "添加 {appName} 自动程序 到Discord",
   "home-page.have-code": "持有房间号?",
   "hubs-cloud-page.get-started": "快速开始指南",
   "hubs-cloud-page.hero-button.enterprise": "获得企业 Hubs Cloud",
diff --git a/src/assets/stylesheets/cloud.scss b/src/assets/stylesheets/cloud.scss
index da50fd05fb..8f126b1ccc 100644
--- a/src/assets/stylesheets/cloud.scss
+++ b/src/assets/stylesheets/cloud.scss
@@ -1,8 +1,15 @@
-@import 'root-vars';
-@import 'shared';
+@use "../../react-components/styles/theme.scss";
 
 :local(.hero) {
-  background-color: #F3F3F3;
+  background-color: theme.$recessed-bg;
+
+  h1 {
+    margin-bottom: 20px;
+  }
+
+  iframe {
+    margin-bottom: 20px;
+  }
 
   & > section {
     display: flex; 
@@ -17,20 +24,20 @@
     height: 240px;
     width: 100%;
 
-    @media(min-width: $breakpoint-sm) {
+    @media(min-width: theme.$breakpoint-sm) {
       height: 300px;
     }
 
-    @media(min-width: $breakpoint-md) {
+    @media(min-width: theme.$breakpoint-md) {
       height: 360px;
     }
 
-    @media(min-width: $breakpoint-lg) {
+    @media(min-width: theme.$breakpoint-lg) {
       height: 100%;
     }
   }
 
-  @media(min-width: $breakpoint-lg) {
+  @media(min-width: theme.$breakpoint-lg) {
     margin-right: 40px;
   }
 }
@@ -38,34 +45,12 @@
 :local(.hero-content) {
   flex: 10;
 
-  :local(.primary-button) {
-    margin-top: 20px;
-
-    @media(min-width: $breakpoint-lg) {
-      margin-top: 0;
-    }
-  }
-}
-
-:local(.get-started) {
-  margin-top: 20px;
-
-  a {
-    color: var(--home-text-color);
+  & > * {
+    margin-bottom: theme.$spacing-md;
   }
-}
 
-:local(.primary-button) {
-  @extend %action-button;
-  height: 64px;
-  border-radius: 4px;
-  background-color: $action-color;
-  font-size: 1.2em;
-  max-width: 300px;
-
-  @media(min-width: $breakpoint-md) {
-    font-size: 1em;
-    height: 56px;
+  & > :last-child {
+    margin-bottom: 0;
   }
 }
 
@@ -74,19 +59,29 @@
   padding: 5px;
   
   & > * {
-    margin: 5px;
+    margin: theme.$spacing-md;
+  }
+
+  :local(.center) {
+    & > * {
+      margin-bottom: theme.$spacing-md;
+    }
+  
+    & > :last-child {
+      margin-bottom: 0;
+    }
   }
 }
 
 // Utility Classes
 :local(.hide-lg-down) {
-  @media(max-width: $breakpoint-lg) {
+  @media(max-width: theme.$breakpoint-lg) {
     display: none;
   }
 }
 
 :local(.hide-lg-up) {
-  @media(min-width: $breakpoint-lg) {
+  @media(min-width: theme.$breakpoint-lg) {
     display: none;
   }
 }
@@ -94,23 +89,29 @@
 :local(.row) {
   display: flex;
   justify-content: space-evenly !important;
+
+  & > * {
+    margin: theme.$spacing-sm;
+  }
 }
 
 :local(.col-lg) {
   flex-direction: column;
 
-  @media(min-width: $breakpoint-lg) {
+  @media(min-width: theme.$breakpoint-lg) {
     flex-direction: row;
   }
 }
 
 :local(.center) {
-  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   text-align: center;
 }
 
 :local(.center-lg) {
-  @media(max-width: $breakpoint-lg) {
+  @media(max-width: theme.$breakpoint-lg) {
     text-align: center;
     align-items: center;
   }
diff --git a/src/assets/stylesheets/shared.scss b/src/assets/stylesheets/shared.scss
index c199ea6f83..48d5d2416f 100644
--- a/src/assets/stylesheets/shared.scss
+++ b/src/assets/stylesheets/shared.scss
@@ -28,11 +28,11 @@ $breakpoint-xxl: 1600px; // Extra Large Desktops
 }
 
 %default-font {
-  font-family: 'Open Sans', sans-serif;
+  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 %glass-text {
-  font-family: 'Open Sans', sans-serif;
+  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: var(--panel-text-color);
 }
 
diff --git a/src/assets/stylesheets/support.scss b/src/assets/stylesheets/support.scss
index d33506cf02..cb548f7746 100644
--- a/src/assets/stylesheets/support.scss
+++ b/src/assets/stylesheets/support.scss
@@ -1,5 +1,5 @@
 :local(.support-main) {
-  font-family: 'Open Sans', sans-serif;
+  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   z-index: 10000;
   position: absolute;
   width: 100%;
diff --git a/src/assets/stylesheets/ui-root.scss b/src/assets/stylesheets/ui-root.scss
index fa2aaafb83..637591ae3e 100644
--- a/src/assets/stylesheets/ui-root.scss
+++ b/src/assets/stylesheets/ui-root.scss
@@ -144,7 +144,6 @@ body.vr-mode {
   span {
     font-size: 22px;
     font-weight: bold;
-    font-family: 'Open Sans', sans-serif;
   }
   @media(min-width: 501px) {
     width: 90px;
diff --git a/src/assets/stylesheets/whats-new.scss b/src/assets/stylesheets/whats-new.scss
index 5fa1fe0e36..464d922c83 100644
--- a/src/assets/stylesheets/whats-new.scss
+++ b/src/assets/stylesheets/whats-new.scss
@@ -1,58 +1,25 @@
-@import 'shared';
-@import 'loader';
-
-body {
-  margin: 0;
-  padding: 0;
-  @extend %default-font;
-}
-
-html, body, #ui-root, .container {
-  height: 100%;
-}
-#ui-root > div {
-  display: flex;
-  flex-direction: column;
-}
-.container {
-  display: flex;
-  flex-direction: column;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-.logo {
-  height: 3em;
-  margin-left: 1.5em;
-  vertical-align: middle;
-}
+@use "../../react-components/styles/theme.scss";
 
 .main {
-  background: linear-gradient(to bottom, #ecfaff 0, white 30em);
   display: flex;
   justify-content: center;
   flex: 1;
+
+  h1 {
+    font-size: theme.$font-size-xl;
+    text-align: center;
+    margin-bottom: 20px;
+  }
 }
 
 .content {
   padding: 1em;
-  width: 45em;
+  width: 100%;
+  max-width: 45em;
   display: flex;
   flex-direction: column;
 }
 
-.loader-wrap {
-  align-self: center;
-}
-
-h1 {
-  text-align: center;
-}
-
 .note-header { 
   display: flex; 
   @media (max-width: 768px) {
@@ -63,10 +30,11 @@ h1 {
   margin: 0;
 }
 .title a:link, .title a:active .title a:hover, .title a:visited {
-  color: var(--home-text-color);
+  color: theme.$black;
 }
 .title {
   flex: 1;
+  margin-bottom: 16px;
   @media (max-width: 768px) {
     align-self: flex-start;
   }
@@ -82,8 +50,14 @@ h1 {
 
 .body {
   margin-left: 120px;
+
+  p {
+    margin-bottom: 16px;
+  }
+  
   @media (max-width: 768px) {
     margin-left: 0;
   }
+
   img { width: 100%; }
 }
diff --git a/src/avatar.html b/src/avatar.html
index 68296d3ba0..7ec816df42 100644
--- a/src/avatar.html
+++ b/src/avatar.html
@@ -9,7 +9,7 @@
 
     <link rel="shortcut icon" type="image/png" href="/favicon.ico">
     <title>Avatar</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
     <script>
     if (navigator.doNotTrack !== "1") {
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
diff --git a/src/cloud.html b/src/cloud.html
index b82e86644a..8d8fe05b1e 100644
--- a/src/cloud.html
+++ b/src/cloud.html
@@ -18,7 +18,7 @@
     <meta name="twitter:url" value="https://hubs.mozilla.com/cloud">
     <link rel="shortcut icon" type="image/png" href="/favicon.ico">
     <title>Get Hubs Cloud</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
     <!-- Google Analytics -->
     <!-- NOTE GA tracking is disabled by default. You'll need to set the GA_TRACKING_ID build variable to enable it. -->
     <script>
diff --git a/src/cloud.js b/src/cloud.js
index d03fa7eadf..3cac2ff3e7 100644
--- a/src/cloud.js
+++ b/src/cloud.js
@@ -7,6 +7,8 @@ import { WrappedIntlProvider } from "./react-components/wrapped-intl-provider";
 import { PageContainer } from "./react-components/layout/PageContainer";
 import { AuthContextProvider } from "./react-components/auth/AuthContext";
 import Store from "./storage/store";
+import { Container } from "./react-components/layout/Container";
+import { Button } from "./react-components/input/Button";
 
 import registerTelemetry from "./telemetry";
 import { FormattedMessage } from "react-intl";
@@ -17,7 +19,7 @@ function HubsCloudPage() {
   return (
     <PageContainer>
       <div className={styles.hero}>
-        <section className={styles.colLg}>
+        <Container className={styles.colLg}>
           <div className={classNames(styles.hideLgUp, styles.centerLg)}>
             <h1>
               <FormattedMessage id="hubs-cloud-page.page-heading" defaultMessage="Introducing Hubs Cloud" />
@@ -49,25 +51,25 @@ function HubsCloudPage() {
               <FormattedMessage id="hubs-cloud-page.hero-cta" defaultMessage="Get it today on the AWS Marketplace" />
             </h3>
             <div className={classNames(styles.row, styles.colLg, styles.centerLg)}>
-              <a className={styles.primaryButton} href="https://aws.amazon.com/marketplace/pp/B084RZH56R">
+              <Button as="a" preset="blue" href="https://aws.amazon.com/marketplace/pp/B084RZH56R">
                 <FormattedMessage id="hubs-cloud-page.hero-button.personal" defaultMessage="Get Hubs Cloud Personal" />
-              </a>
-              <a className={styles.primaryButton} href="https://aws.amazon.com/marketplace/pp/B084WNGRRP">
+              </Button>
+              <Button as="a" preset="blue" href="https://aws.amazon.com/marketplace/pp/B084WNGRRP">
                 <FormattedMessage
                   id="hubs-cloud-page.hero-button.enterprise"
                   defaultMessage="Get Hubs Cloud Enterprise"
                 />
-              </a>
+              </Button>
             </div>
             <div className={classNames(styles.getStarted, styles.center)}>
-              <a href="https://hubs.mozilla.com/docs/hubs-cloud-aws-quick-start.html">
+              <Button as="a" preset="transparent" href="https://hubs.mozilla.com/docs/hubs-cloud-aws-quick-start.html">
                 <FormattedMessage id="hubs-cloud-page.get-started" defaultMessage="Quick Start Guide" />
-              </a>
+              </Button>
             </div>
           </div>
-        </section>
+        </Container>
       </div>
-      <section className={classNames(styles.features, styles.colLg, styles.centerLg)}>
+      <Container className={classNames(styles.features, styles.colLg, styles.centerLg)}>
         <div className={styles.center}>
           <h3>
             <FormattedMessage id="hubs-cloud-page.features.diy-events-title" defaultMessage="Do-It-Yourself Events" />
@@ -108,7 +110,7 @@ function HubsCloudPage() {
             />
           </p>
         </div>
-      </section>
+      </Container>
     </PageContainer>
   );
 }
diff --git a/src/discord.html b/src/discord.html
index a3b3a118e3..cebc7b2680 100644
--- a/src/discord.html
+++ b/src/discord.html
@@ -18,7 +18,7 @@
     <meta name="twitter:url" value="https://hubs.mozilla.com/discord">
     <link rel="shortcut icon" type="image/png" href="/favicon.ico">
     <title>Hubs by Mozilla for Discord</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
     <!-- Google Analytics -->
     <!-- NOTE GA tracking is disabled by default. You'll need to set the GA_TRACKING_ID build variable to enable it. -->
     <script>
diff --git a/src/index.html b/src/index.html
index 8a35b5dcae..fc22dbc8d2 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,7 +12,7 @@
     <meta name="mobile-web-app-capable" content="yes">
     <!-- Web-App Manifest (https://w3c.github.io/manifest/) -->
     <link rel="manifest" href="/manifest.webmanifest">
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
 
     <!-- Google Analytics -->
     <!-- NOTE GA tracking is disabled by default. You'll need to set the GA_TRACKING_ID build variable to enable it. -->
diff --git a/src/index.js b/src/index.js
index a9199de3ef..114ef37273 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,7 +5,6 @@ import registerTelemetry from "./telemetry";
 import Store from "./storage/store";
 import "./utils/theme";
 import { HomePage } from "./react-components/home/HomePage";
-import "./assets/stylesheets/globals.scss";
 import { AuthContextProvider } from "./react-components/auth/AuthContext";
 
 registerTelemetry("/home", "Hubs Home Page");
diff --git a/src/link.html b/src/link.html
index 6d037c516c..89b754cae8 100644
--- a/src/link.html
+++ b/src/link.html
@@ -12,7 +12,7 @@
     <meta name="mobile-web-app-capable" content="yes">
     <!-- Web-App Manifest (https://w3c.github.io/manifest/) -->
     <title>Enter Code</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <!-- Google Analytics -->
     <!-- NOTE GA tracking is disabled by default. You'll need to set the GA_TRACKING_ID build variable to enable it. -->
diff --git a/src/react-components/auth/OAuthScreenContainer.js b/src/react-components/auth/OAuthScreenContainer.js
index d26bc5377e..c8057c1035 100644
--- a/src/react-components/auth/OAuthScreenContainer.js
+++ b/src/react-components/auth/OAuthScreenContainer.js
@@ -8,7 +8,6 @@ export function OAuthScreenContainer({ oauthInfo }) {
 
   return (
     <OAuthScreen
-      style={{ backgroundImage: configs.image("home_background", true) }}
       provider={type}
       redirectUrl={url}
       termsUrl={
diff --git a/src/react-components/home/Button.scss b/src/react-components/home/Button.scss
index 7538b88639..ea08dc4541 100644
--- a/src/react-components/home/Button.scss
+++ b/src/react-components/home/Button.scss
@@ -1,9 +1,8 @@
 
-@import '../../assets/stylesheets/root-vars';
-@import '../../assets/stylesheets/shared';
+@use "../styles/theme.scss";
 
 :local(.primary-button) {
-  @extend %big-action-button;
+
 }
 
 :local(.cta-button) {
@@ -17,7 +16,6 @@
 }
 
 :local(.secondary-button) {
-  @extend %action-button-secondary;
   display: flex;
   flex-direction: row;
   width: 250px;
diff --git a/src/react-components/home/CreateRoomButton.js b/src/react-components/home/CreateRoomButton.js
index e9ecf24722..41a47f6d51 100644
--- a/src/react-components/home/CreateRoomButton.js
+++ b/src/react-components/home/CreateRoomButton.js
@@ -1,13 +1,17 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
 import { createAndRedirectToNewHub } from "../../utils/phoenix-utils";
-import { Button } from "./Button";
+import { Button } from "../input/Button";
+import { useCssBreakpoints } from "react-use-css-breakpoints";
 
 export function CreateRoomButton() {
+  const breakpoint = useCssBreakpoints();
+
   return (
     <Button
-      primary
-      cta
+      lg={breakpoint === "sm" || breakpoint === "md"}
+      xl={breakpoint !== "sm" && breakpoint !== "md"}
+      preset="blue"
       onClick={e => {
         e.preventDefault();
         createAndRedirectToNewHub(null, null, false);
diff --git a/src/react-components/home/HomePage.js b/src/react-components/home/HomePage.js
index a21dd32548..6df8bd14b1 100644
--- a/src/react-components/home/HomePage.js
+++ b/src/react-components/home/HomePage.js
@@ -1,23 +1,25 @@
 import React, { useContext, useEffect } from "react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import classNames from "classnames";
 import configs from "../../utils/configs";
-import IfFeature from "../if-feature";
 import { CreateRoomButton } from "./CreateRoomButton";
 import { PWAButton } from "./PWAButton";
 import { useFavoriteRooms } from "./useFavoriteRooms";
 import { usePublicRooms } from "./usePublicRooms";
 import styles from "./HomePage.scss";
-import discordLogoUrl from "../../assets/images/discord-logo-small.png";
 import { AuthContext } from "../auth/AuthContext";
 import { createAndRedirectToNewHub } from "../../utils/phoenix-utils";
 import { MediaGrid } from "../room/MediaGrid";
 import { MediaTile } from "../room/MediaTiles";
 import { PageContainer } from "../layout/PageContainer";
 import { scaledThumbnailUrlFor } from "../../utils/media-url-utils";
+import { Column } from "../layout/Column";
+import { Button } from "../input/Button";
+import { Container } from "../layout/Container";
 
 export function HomePage() {
   const auth = useContext(AuthContext);
+  const intl = useIntl();
 
   const { results: favoriteRooms } = useFavoriteRooms();
   const { results: publicRooms } = usePublicRooms();
@@ -47,113 +49,99 @@ export function HomePage() {
 
   const canCreateRooms = !configs.feature("disable_room_creation") || auth.isAdmin;
 
-  const pageStyle = { backgroundImage: configs.image("home_background", true) };
-
-  const logoUrl = configs.image("logo");
-
-  const showDescription = featuredRooms.length === 0;
-
-  const logoStyles = classNames(styles.logoContainer, {
-    [styles.centerLogo]: !showDescription
-  });
-
   return (
-    <PageContainer className={styles.homePage} style={pageStyle}>
-      <section>
-        <div className={styles.appInfo}>
-          <div className={logoStyles}>
-            <img src={logoUrl} />
+    <PageContainer className={styles.homePage}>
+      <Container>
+        <div className={styles.hero}>
+          <div className={styles.logoContainer}>
+            <img alt={configs.translation("app-name")} src={configs.image("logo")} />
+          </div>
+          <div className={styles.appInfo}>
+            <div className={styles.appDescription}>{configs.translation("app-description")}</div>
+            {canCreateRooms && <CreateRoomButton />}
+            <PWAButton />
+          </div>
+          <div className={styles.heroImageContainer}>
+            <img
+              alt={intl.formatMessage(
+                {
+                  id: "home-page.hero-image-alt",
+                  defaultMessage: "Screenshot of {appName}"
+                },
+                { appName: configs.translation("app-name") }
+              )}
+              src={configs.image("home_background")}
+            />
           </div>
-          {showDescription && <div className={styles.appDescription}>{configs.translation("app-description")}</div>}
-        </div>
-        <div className={styles.ctaButtons}>
-          {canCreateRooms && <CreateRoomButton />}
-          <PWAButton />
         </div>
-      </section>
-      {featuredRooms.length === 0 && (
-        <IfFeature name="show_feature_panels">
-          <section className={classNames(styles.features, styles.colLg, styles.centerLg)}>
-            <div className={styles.center}>
+      </Container>
+      {featuredRooms.length === 0 &&
+        configs.feature("show_feature_panels") && (
+          <Container className={classNames(styles.features, styles.colLg, styles.centerLg)}>
+            <Column padding gap="xl" className={styles.card}>
+              <img src={configs.image("landing_rooms_thumb")} />
               <h3>
                 <FormattedMessage id="home-page.rooms-title" defaultMessage="Instantly create rooms" />
               </h3>
-              <img src={configs.image("landing_rooms_thumb")} />
               <p>
                 <FormattedMessage
                   id="home-page.rooms-blurb"
                   defaultMessage="Share virtual spaces with your friends, co-workers, and communities. When you create a room with Hubs, you’ll have a private virtual meeting space that you can instantly share - no downloads or VR headset necessary."
                 />
               </p>
-            </div>
-            <div className={styles.center}>
+            </Column>
+            <Column padding gap="xl" className={styles.card}>
+              <img src={configs.image("landing_communicate_thumb")} />
               <h3>
                 <FormattedMessage id="home-page.communicate-title" defaultMessage="Communicate naturally" />
               </h3>
-              <img src={configs.image("landing_communicate_thumb")} />
               <p>
                 <FormattedMessage
                   id="home-page.communicate-blurb"
                   defaultMessage="Choose an avatar to represent you, put on your headphones, and jump right in. Hubs makes it easy to stay connected with voice and text chat to other people in your private room."
                 />
               </p>
-            </div>
-            <div className={styles.center}>
+            </Column>
+            <Column padding gap="xl" className={styles.card}>
+              <img src={configs.image("landing_media_thumb")} />
               <h3>
                 <FormattedMessage id="home-page.media-title" defaultMessage="An easier way to share media" />
               </h3>
-              <img src={configs.image("landing_media_thumb")} />
               <p>
                 <FormattedMessage
                   id="home-page.media-blurb"
                   defaultMessage="Share content with others in your room by dragging and dropping photos, videos, PDF files, links, and 3D models into your space."
                 />
               </p>
-            </div>
-          </section>
-        </IfFeature>
-      )}
+            </Column>
+          </Container>
+        )}
       {featuredRooms.length > 0 && (
-        <section className={styles.featuredRooms}>
-          <MediaGrid center>
-            {featuredRooms.map(room => {
-              return (
-                <MediaTile
-                  key={room.id}
-                  entry={room}
-                  processThumbnailUrl={(entry, width, height) =>
-                    scaledThumbnailUrlFor(entry.images.preview.url, width, height)
-                  }
-                />
-              );
-            })}
-          </MediaGrid>
-        </section>
+        <Container>
+          <Column grow padding className={styles.rooms}>
+            <MediaGrid center>
+              {featuredRooms.map(room => {
+                return (
+                  <MediaTile
+                    key={room.id}
+                    entry={room}
+                    processThumbnailUrl={(entry, width, height) =>
+                      scaledThumbnailUrlFor(entry.images.preview.url, width, height)
+                    }
+                  />
+                );
+              })}
+            </MediaGrid>
+          </Column>
+        </Container>
       )}
-      <section>
-        <div className={styles.secondaryLinks}>
-          <a href="/link">
+      <Container>
+        <Column center grow>
+          <Button lg preset="blue" as="a" href="/link">
             <FormattedMessage id="home-page.have-code" defaultMessage="Have a room code?" />
-          </a>
-          <div>
-            <IfFeature name="show_discord_bot_link">
-              <FormattedMessage
-                id="home-page.add-to-discord"
-                defaultMessage="Add the <a>{appName} Bot</a> to Discord"
-                values={{
-                  a: chunks => (
-                    <>
-                      <img src={discordLogoUrl} />
-                      <a href="/discord">{chunks}</a>
-                    </>
-                  ),
-                  appName: configs.translation("app-name")
-                }}
-              />
-            </IfFeature>
-          </div>
-        </div>
-      </section>
+          </Button>
+        </Column>
+      </Container>
     </PageContainer>
   );
 }
diff --git a/src/react-components/home/HomePage.scss b/src/react-components/home/HomePage.scss
index 5975e30d44..e17722d787 100644
--- a/src/react-components/home/HomePage.scss
+++ b/src/react-components/home/HomePage.scss
@@ -1,4 +1,4 @@
-@import '../../assets/stylesheets/shared';
+@use "../styles/theme.scss";
 
 :local(.home-page) {
   flex: 1;
@@ -6,7 +6,8 @@
   padding: 1.5em;
   flex-direction: column;
   align-items: center;
-  @media (min-width: $breakpoint-lg) {
+
+  @media (min-width: theme.$breakpoint-lg) {
     align-items: center;
     justify-content: flex-start;
   }
@@ -16,98 +17,101 @@
   }
 }
 
-:local(.app-info) {
+:local(.logo-container) {
   display: flex;
-  flex-direction: column;
   justify-content: center;
-  align-items: center;
-  padding: 0;
-  margin-top: 36px;
-}
-
-:local(.app-description) {
-  white-space: pre-wrap;
-  align-self: auto;
-  font-size: 14pt;
-  text-align: center;
-  margin: 0.5em 0;
-  margin-bottom: 1em;
-
-  @media (min-width: $breakpoint-lg) {
-    font-size: 18pt;
-    align-self: flex-start;
-    text-align: start;
-  }
-}
-
-:local(.logo-container) {
-  max-width: 250px;
-  align-self: auto;
-
-  @media (min-width: $breakpoint-lg) {
-    align-self: flex-start;
-  }
+  padding: 20px;
+  width: 250px;
 
   img {
     width: 100%;
-    height: auto;
+    align-self: flex-start;
   }
-}
-
 
-:local(.center-logo) {
-  align-self: auto;
-  margin: 24px 0;
+  @media (min-width: theme.$breakpoint-lg) {
+    display: none;
+  }
 }
 
-:local(.cta-buttons) {
+:local(.hero) {
   display: flex;
   flex-direction: column;
   align-items: center;
+
+  @media (min-width: theme.$breakpoint-lg) {
+    flex-direction: row;
+  }
 }
 
-:local(.featured-rooms) {
-  width: 100%;
-  background-color: var(--home-media-panel-background-color);
+:local(.hero-image-container) {
+  img {
+    border-radius: 16px;
+  }
 }
 
-:local(.secondary-links) {
+:local(.app-info) {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  font-weight: bold;
-  color: var(--home-header-link-color);
+
+  margin-bottom: 20px;
 
   & > * {
-    display: flex;
-    align-items: center;
-    margin-top: 8px;
+    margin-bottom: 20px;
   }
-
-  img {
-    width: 24px;
-    height: 24px;
+  
+  @media (min-width: theme.$breakpoint-lg) {
+    margin-bottom: 0;
   }
+}
 
-  a { 
-    color: var(--home-header-link-color);
-    margin-right: 4px;
-    margin-left: 2px;
+:local(.app-description) {
+  white-space: pre-wrap;
+  align-self: auto;
+  font-size: theme.$font-size-lg;
+  font-weight: theme.$font-weight-medium;
+  text-align: center;
+  margin: 0 48px 20px 48px;
+
+  @media (min-width: theme.$breakpoint-lg) {
+    font-size: theme.$font-size-2xl;
   }
 }
 
+:local(.center-logo) {
+  align-self: auto;
+  margin: 24px 0;
+}
+
+:local(.cta-buttons) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 :local(.features) {
+  width: 100%;
   display: flex;
-  padding: 1em;
-  background-color: var(--home-media-panel-background-color);
-  margin-bottom: 2em;
+  justify-content: space-between;
+  margin-bottom: 24px;
   
   & > * {
-    margin: 0 2em;
-    @media(min-width: $breakpoint-lg) {
+    margin-bottom: 24px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    @media(min-width: theme.$breakpoint-lg) {
+      margin-right: 24px;
+      margin-bottom: 0;
       flex-direction: row;
-      max-width: 310px;
+      max-width: 364px;
+
+      &:last-child {
+        margin-right: 0;
+      }
     }
   }
   
@@ -117,6 +121,11 @@
   }
 }
 
+:local(.rooms) {
+  background-color: theme.$recessed-bg;
+  border-radius: 16px;
+}
+
 :local(.row) {
   display: flex;
   justify-content: space-evenly !important;
@@ -125,18 +134,20 @@
 :local(.col-lg) {
   flex-direction: column;
 
-  @media(min-width: $breakpoint-lg) {
+  @media(min-width: theme.$breakpoint-lg) {
     flex-direction: row;
   }
 }
 
-:local(.center) {
-  justify-content: center;
-  text-align: center;
+:local(.card) {
+  background-color: theme.$recessed-bg;
+  border-radius: 16px;
+  font-weight: theme.$font-weight-medium;
+  padding-bottom: 32px !important;
 }
 
 :local(.center-lg) {
-  @media(max-width: $breakpoint-lg) {
+  @media(max-width: theme.$breakpoint-lg) {
     text-align: center;
     align-items: center;
   }
diff --git a/src/react-components/home/PWAButton.js b/src/react-components/home/PWAButton.js
index 64988294ef..ca35b87e99 100644
--- a/src/react-components/home/PWAButton.js
+++ b/src/react-components/home/PWAButton.js
@@ -1,10 +1,10 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
-import { faPlus } from "@fortawesome/free-solid-svg-icons/faPlus";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Button } from "./Button";
+import { ReactComponent as AddIcon } from "../icons/Add.svg";
+import { IconButton } from "../input/IconButton";
 import checkIsMobile from "../../utils/is-mobile";
 import { useInstallPWA } from "./useInstallPWA";
+import styles from "./PWAButton.scss";
 
 const isMobile = checkIsMobile();
 
@@ -14,16 +14,14 @@ export function PWAButton() {
   return (
     <>
       {pwaAvailable && (
-        <Button secondary onClick={installPWA}>
-          <i>
-            <FontAwesomeIcon icon={faPlus} />
-          </i>
+        <IconButton className={styles.pwaButton} lg onClick={installPWA}>
+          <AddIcon width={16} height={16} />
           {isMobile ? (
             <FormattedMessage id="pwa-button.mobile" defaultMessage="Add to Home Screen" />
           ) : (
             <FormattedMessage id="pwa-button.desktop" defaultMessage="Install Desktop App" />
           )}
-        </Button>
+        </IconButton>
       )}
     </>
   );
diff --git a/src/react-components/home/PWAButton.scss b/src/react-components/home/PWAButton.scss
new file mode 100644
index 0000000000..a521e34dd9
--- /dev/null
+++ b/src/react-components/home/PWAButton.scss
@@ -0,0 +1,13 @@
+@use "../styles/theme.scss";
+
+:local(.pwa-button) {
+  color: theme.$blue;
+
+  *[stroke=\#000] {
+    stroke: theme.$blue;
+  }
+
+  *[fill=\#000] {
+    fill: theme.$blue;
+  }
+}
\ No newline at end of file
diff --git a/src/react-components/input/Button.js b/src/react-components/input/Button.js
index e3b17d2e83..cbd1bcdfb4 100644
--- a/src/react-components/input/Button.js
+++ b/src/react-components/input/Button.js
@@ -8,13 +8,19 @@ import { FormattedMessage } from "react-intl";
 export const presets = ["transparent", "basic", "accept", "cancel", "red", "orange", "green", "blue", "purple"];
 
 export const Button = memo(
-  forwardRef(({ as, sm, preset, className, children, ...rest }, ref) => {
+  forwardRef(({ as, sm, lg, xl, preset, className, children, ...rest }, ref) => {
     const ButtonComponent = as;
     const buttonProps = ButtonComponent === "button" ? { type: "button" } : {};
 
     return (
       <ButtonComponent
-        className={classNames(styles.button, textInputStyles.button, styles[preset], { [styles.sm]: sm }, className)}
+        className={classNames(
+          styles.button,
+          textInputStyles.button,
+          styles[preset],
+          { [styles.sm]: sm, [styles.lg]: lg, [styles.xl]: xl },
+          className
+        )}
         {...buttonProps}
         {...rest}
         ref={ref}
diff --git a/src/react-components/input/Button.scss b/src/react-components/input/Button.scss
index 4ec5f77a79..a4ea71cd92 100644
--- a/src/react-components/input/Button.scss
+++ b/src/react-components/input/Button.scss
@@ -148,4 +148,18 @@
   min-height: 32px;
   min-width: 100px;
   padding: 0 8px;
+}
+
+:local(.lg), :local(.xl) {
+  border-radius: 32px;
+  padding: 0 48px;
+  font-size: 16px;
+}
+
+:local(.lg) {
+  height: 48px;
+}
+
+:local(.xl) {
+  height: 64px;
 }
\ No newline at end of file
diff --git a/src/react-components/layout/Center.scss b/src/react-components/layout/Center.scss
index d77ffebc15..133a2df38e 100644
--- a/src/react-components/layout/Center.scss
+++ b/src/react-components/layout/Center.scss
@@ -3,4 +3,5 @@
   justify-content: center;
   align-items: center;
   flex: 1;
+  height: 100%;
 }
\ No newline at end of file
diff --git a/src/react-components/layout/Container.js b/src/react-components/layout/Container.js
new file mode 100644
index 0000000000..6b8d458873
--- /dev/null
+++ b/src/react-components/layout/Container.js
@@ -0,0 +1,22 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import styles from "./Container.scss";
+
+export function Container({ as: Component, children, className, ...rest }) {
+  return (
+    <Component className={classNames(styles.container, className)} {...rest}>
+      {children}
+    </Component>
+  );
+}
+
+Container.defaultProps = {
+  as: "section"
+};
+
+Container.propTypes = {
+  as: PropTypes.elementType,
+  children: PropTypes.node,
+  className: PropTypes.string
+};
diff --git a/src/react-components/layout/Container.scss b/src/react-components/layout/Container.scss
new file mode 100644
index 0000000000..bdaa18ac47
--- /dev/null
+++ b/src/react-components/layout/Container.scss
@@ -0,0 +1,27 @@
+@use "../styles/theme.scss";
+
+:local(.container) {
+  display: flex;
+  margin: auto;
+  max-width: 100%;
+
+  @media(min-width: theme.$breakpoint-sm) {
+    max-width: 540px;
+  }
+
+  @media(min-width: theme.$breakpoint-md) {
+    max-width: 720px;
+  }
+
+  @media(min-width: theme.$breakpoint-lg) {
+    max-width: 960px;
+  }
+
+  @media(min-width: theme.$breakpoint-xl) {
+    max-width: 1140px;
+  }
+
+  @media(min-width: theme.$breakpoint-xxl) {
+    max-width: 1140px;
+  }
+}
\ No newline at end of file
diff --git a/src/react-components/layout/Footer.js b/src/react-components/layout/Footer.js
index 0e42432f96..6dbbb0f684 100644
--- a/src/react-components/layout/Footer.js
+++ b/src/react-components/layout/Footer.js
@@ -2,6 +2,8 @@ import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import styles from "./Footer.scss";
+import discordLogoUrl from "../../assets/images/discord-logo-small.png";
+import { Container } from "./Container";
 
 export function Footer({
   hidePoweredBy,
@@ -11,60 +13,78 @@ export function Footer({
   showPrivacy,
   privacyUrl,
   showCompanyLogo,
-  companyLogoUrl
+  companyLogoUrl,
+  showDiscordBotLink,
+  appName
 }) {
   return (
     <footer>
-      <div className={styles.poweredBy}>
-        {!hidePoweredBy && (
-          <FormattedMessage
-            id="footer.powered-by"
-            defaultMessage="Powered by <a>Hubs Cloud</a>"
-            values={{
-              // eslint-disable-next-line react/display-name
-              a: chunks => (
-                <a className={styles.link} href="https://hubs.mozilla.com/cloud">
-                  {chunks}
-                </a>
-              )
-            }}
-          />
-        )}
-      </div>
-      <nav>
-        <ul>
-          {showWhatsNewLink && (
-            <li>
-              <a href="/whats-new">
-                <FormattedMessage id="footer.whats-new" defaultMessage="What's New" />
-              </a>
-            </li>
-          )}
-          {showTerms && (
-            <li>
-              <a target="_blank" rel="noopener noreferrer" href={termsUrl}>
-                <FormattedMessage id="footer.terms-of-use" defaultMessage="Terms of Use" />
-              </a>
-            </li>
-          )}
-          {showPrivacy && (
-            <li>
-              <a className={styles.link} target="_blank" rel="noopener noreferrer" href={privacyUrl}>
-                <FormattedMessage id="footer.privacy-notice" defaultMessage="Privacy Notice" />
-              </a>
-            </li>
-          )}
-          {showCompanyLogo && (
-            <li>
-              <img
-                className={styles.companyLogo}
-                src={companyLogoUrl}
-                alt={<FormattedMessage id="footer.logo-alt" defaultMessage="Logo" />}
-              />
-            </li>
+      <Container as="div" className={styles.container}>
+        <div className={styles.poweredBy}>
+          {!hidePoweredBy && (
+            <FormattedMessage
+              id="footer.powered-by"
+              defaultMessage="Powered by <a>Hubs Cloud</a>"
+              values={{
+                // eslint-disable-next-line react/display-name
+                a: chunks => (
+                  <a className={styles.link} href="https://hubs.mozilla.com/cloud">
+                    {chunks}
+                  </a>
+                )
+              }}
+            />
           )}
-        </ul>
-      </nav>
+        </div>
+        <nav>
+          <ul>
+            {showDiscordBotLink && (
+              <li>
+                <img className={styles.discordLogo} src={discordLogoUrl} />
+                <a href="/discord">
+                  <FormattedMessage
+                    id="home-page.add-to-discord"
+                    defaultMessage="Add the {appName} Bot to Discord"
+                    values={{
+                      appName
+                    }}
+                  />
+                </a>
+              </li>
+            )}
+            {showWhatsNewLink && (
+              <li>
+                <a href="/whats-new">
+                  <FormattedMessage id="footer.whats-new" defaultMessage="What's New" />
+                </a>
+              </li>
+            )}
+            {showTerms && (
+              <li>
+                <a target="_blank" rel="noopener noreferrer" href={termsUrl}>
+                  <FormattedMessage id="footer.terms-of-use" defaultMessage="Terms of Use" />
+                </a>
+              </li>
+            )}
+            {showPrivacy && (
+              <li>
+                <a className={styles.link} target="_blank" rel="noopener noreferrer" href={privacyUrl}>
+                  <FormattedMessage id="footer.privacy-notice" defaultMessage="Privacy Notice" />
+                </a>
+              </li>
+            )}
+            {showCompanyLogo && (
+              <li>
+                <img
+                  className={styles.companyLogo}
+                  src={companyLogoUrl}
+                  alt={<FormattedMessage id="footer.logo-alt" defaultMessage="Logo" />}
+                />
+              </li>
+            )}
+          </ul>
+        </nav>
+      </Container>
     </footer>
   );
 }
@@ -77,5 +97,7 @@ Footer.propTypes = {
   showPrivacy: PropTypes.bool,
   privacyUrl: PropTypes.string,
   showCompanyLogo: PropTypes.bool,
-  companyLogoUrl: PropTypes.string
+  companyLogoUrl: PropTypes.string,
+  showDiscordBotLink: PropTypes.bool,
+  appName: PropTypes.string
 };
diff --git a/src/react-components/layout/Footer.scss b/src/react-components/layout/Footer.scss
index 77be0dcc42..4a48dbdfa7 100644
--- a/src/react-components/layout/Footer.scss
+++ b/src/react-components/layout/Footer.scss
@@ -1,69 +1,89 @@
-@import '../../assets/stylesheets/shared';
+@use "../styles/theme.scss";
 
 footer {
   display: block;
-  background-color: var(--home-footer-background-color);
+  background-color: theme.$recessed-bg;
+  font-size: theme.$font-size-md;
+  padding: 20px;
 
-  @media(min-width: $breakpoint-lg) {
-    display: flex;
-    flex-direction: row;
-    margin-top: auto;
-    justify-content: space-between;
-    padding: 1em 0;
-    align-items: center;
-    background-color: transparent;
-  }
-
-  :local(.powered-by) {
-    text-align: center;
-    align-self: flex-end;
-    color: var(--home-footer-text-color);
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
+  @media(min-width: theme.$breakpoint-lg) {
+    padding: 0;
   }
 
   nav {
-    margin-bottom: 20px;
+    display: flex;
 
-    @media(min-width: $breakpoint-lg) {
-      margin-bottom: 0;
+    @media(min-width: theme.$breakpoint-lg) {
+      flex: 1;
+      justify-content: flex-end;
     }
 
+
     ul {
       display: flex;
       margin: 0;
       padding: 0;
       list-style: none;
-      flex-direction: column;
       align-items: center;
+      flex-direction: column;
 
-      @media(min-width: $breakpoint-lg) {
-        justify-content: flex-end;
+      @media(min-width: theme.$breakpoint-lg) {
         flex-direction: row;
       }
     }
 
     a {
-      color: var(--home-footer-link-color);
+      color: theme.$black;
       font-weight: bold;
     }
 
     li {
+      display: flex;
       padding-top: 20px;
+      align-items: center;
 
-      @media(min-width: $breakpoint-lg) {
+      @media(min-width: theme.$breakpoint-lg) {
         padding-top: 0;
         margin-right: 20px;
       }
     }
+  }
+}
 
-    :local(.company-logo) {
-      height: 49px;
+:local(.container) {
+  flex-direction: column;
+  align-items: center;
 
-      @media(min-width: $breakpoint-lg) {
-        margin-left: 18px;
-      }
-    }
+  @media(min-width: theme.$breakpoint-lg) {
+    height: 80px;
+    flex-direction: row;
+    align-items: inherit;
+  }
+}
+
+:local(.powered-by) {
+  text-align: center;
+  color: theme.$black;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+
+  @media(min-width: theme.$breakpoint-lg) {
+    margin-left: 20px;
   }
 }
+
+:local(.company-logo) {
+  height: 49px;
+
+  @media(min-width: theme.$breakpoint-lg) {
+    margin-left: 18px;
+  }
+}
+
+:local(.discord-logo) {
+  height: 24px;
+  width: 24px;
+  display: inline;
+  margin-right: 4px;
+}
diff --git a/src/react-components/layout/Header.js b/src/react-components/layout/Header.js
index df8528a704..d9a4df4c5d 100644
--- a/src/react-components/layout/Header.js
+++ b/src/react-components/layout/Header.js
@@ -5,8 +5,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCog } from "@fortawesome/free-solid-svg-icons/faCog";
 import maskEmail from "../../utils/mask-email";
 import styles from "./Header.scss";
+import { Container } from "./Container";
 
 export function Header({
+  appName,
+  appLogo,
   showCloud,
   enableSpoke,
   editorName,
@@ -22,84 +25,88 @@ export function Header({
 }) {
   return (
     <header>
-      <nav>
-        <ul>
-          <li>
-            <a href="/">
-              <FormattedMessage id="header.home" defaultMessage="Home" />
-            </a>
-          </li>
-          {showCloud && (
+      <Container as="div" className={styles.container}>
+        <nav>
+          <ul>
             <li>
-              <a href="/cloud">
-                <FormattedMessage id="header.cloud" defaultMessage="Hubs Cloud" />
+              <a href="/" className={styles.homeLink}>
+                <img alt={appName} src={appLogo} />
               </a>
             </li>
-          )}
-          {enableSpoke && (
-            <li>
-              <a href="/spoke">{editorName}</a>
-            </li>
-          )}
-          {showDocsLink && (
-            <li>
-              <a href={docsUrl}>
-                <FormattedMessage id="header.docs" defaultMessage="Docs" />
+            {showCloud && (
+              <li>
+                <a href="/cloud">
+                  <FormattedMessage id="header.cloud" defaultMessage="Hubs Cloud" />
+                </a>
+              </li>
+            )}
+            {enableSpoke && (
+              <li>
+                <a href="/spoke">{editorName}</a>
+              </li>
+            )}
+            {showDocsLink && (
+              <li>
+                <a href={docsUrl}>
+                  <FormattedMessage id="header.docs" defaultMessage="Docs" />
+                </a>
+              </li>
+            )}
+            {showSourceLink && (
+              <li>
+                <a href="https://github.com/mozilla/hubs">
+                  <FormattedMessage id="header.source" defaultMessage="Source" />
+                </a>
+              </li>
+            )}
+            {showCommunityLink && (
+              <li>
+                <a href={communityUrl}>
+                  <FormattedMessage id="header.community" defaultMessage="Community" />
+                </a>
+              </li>
+            )}
+            {isAdmin && (
+              <li>
+                <a href="/admin" rel="noreferrer noopener">
+                  <i>
+                    <FontAwesomeIcon icon={faCog} />
+                  </i>
+                  &nbsp;
+                  <FormattedMessage id="header.admin" defaultMessage="Admin" />
+                </a>
+              </li>
+            )}
+          </ul>
+        </nav>
+        <div className={styles.signIn}>
+          {isSignedIn ? (
+            <div>
+              <span>
+                <FormattedMessage
+                  id="header.signed-in-as"
+                  defaultMessage="Signed in as {email}"
+                  values={{ email: maskEmail(email) }}
+                />
+              </span>{" "}
+              <a href="#" onClick={onSignOut}>
+                <FormattedMessage id="header.sign-out" defaultMessage="Sign Out" />
               </a>
-            </li>
-          )}
-          {showSourceLink && (
-            <li>
-              <a href="https://github.com/mozilla/hubs">
-                <FormattedMessage id="header.source" defaultMessage="Source" />
-              </a>
-            </li>
-          )}
-          {showCommunityLink && (
-            <li>
-              <a href={communityUrl}>
-                <FormattedMessage id="header.community" defaultMessage="Community" />
-              </a>
-            </li>
-          )}
-          {isAdmin && (
-            <li>
-              <a href="/admin" rel="noreferrer noopener">
-                <i>
-                  <FontAwesomeIcon icon={faCog} />
-                </i>
-                &nbsp;
-                <FormattedMessage id="header.admin" defaultMessage="Admin" />
-              </a>
-            </li>
-          )}
-        </ul>
-      </nav>
-      <div className={styles.signIn}>
-        {isSignedIn ? (
-          <div>
-            <span>
-              <FormattedMessage
-                id="header.signed-in-as"
-                defaultMessage="Signed in as {email}"
-                values={{ email: maskEmail(email) }}
-              />
-            </span>{" "}
-            <a href="#" onClick={onSignOut}>
-              <FormattedMessage id="header.sign-out" defaultMessage="Sign Out" />
+            </div>
+          ) : (
+            <a href="/signin" rel="noreferrer noopener">
+              <FormattedMessage id="header.sign-in" defaultMessage="Sign In" />
             </a>
-          </div>
-        ) : (
-          <a href="/signin" rel="noreferrer noopener">
-            <FormattedMessage id="header.sign-in" defaultMessage="Sign In" />
-          </a>
-        )}
-      </div>
+          )}
+        </div>
+      </Container>
     </header>
   );
 }
 
 Header.propTypes = {
+  appName: PropTypes.string,
+  appLogo: PropTypes.string,
   showCloud: PropTypes.bool,
   enableSpoke: PropTypes.bool,
   editorName: PropTypes.string,
diff --git a/src/react-components/layout/Header.scss b/src/react-components/layout/Header.scss
index dde901b542..0d29780e08 100644
--- a/src/react-components/layout/Header.scss
+++ b/src/react-components/layout/Header.scss
@@ -1,18 +1,15 @@
-@import '../../assets/stylesheets/shared';
+@use "../styles/theme.scss";
 
 header {
   display: block;
+  padding: 20px;
 
-  @media(min-width: $breakpoint-lg) {
-    display: flex;
-    flex-direction: row;
-    height: 65px;
-    min-height: 65px;
-    padding: 0 1.75em;
+  @media(min-width: theme.$breakpoint-lg) {
+    padding: 0;
   }
 
   a {
-    color: var(--home-header-link-color);
+    color: theme.$black;
     font-weight: bold;
     text-decoration: none;
     white-space: nowrap;
@@ -22,21 +19,22 @@ header {
     display: flex;
     flex-direction: column;
 
-    @media(min-width: $breakpoint-lg) {
+    @media(min-width: theme.$breakpoint-lg) {
       flex-direction: row;
     }
 
     li {
       padding-top: 20px;
 
-      @media(min-width: $breakpoint-lg) {
+      @media(min-width: theme.$breakpoint-lg) {
         padding-top: 0;
       }
     }
 
     a {
       margin: 0 16px;
-      font-size: 1.4em;
+      font-size: theme.$font-size-md;
+      color: theme.$black;
     }
 
     ul {
@@ -47,28 +45,50 @@ header {
       flex-direction: column;
       align-items: center;
 
-      @media(min-width: $breakpoint-lg) {
+      @media(min-width: theme.$breakpoint-lg) {
         justify-content: flex-end;
         flex-direction: row;
       }
     }
   }
+}
 
-  :local(.sign-in) {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding-top: 20px;
-  
-    @media(min-width: $breakpoint-lg) {
-      flex-direction: row;
-      justify-content: flex-end;
-      flex: 1;
-      padding-top: 0;
-    }
+:local(.container) {
+  flex-direction: column;
+  align-items: center;
+
+  @media(min-width: theme.$breakpoint-lg) {
+    height: 140px;
+    flex-direction: row;
+    align-items: inherit;
+  }
+}
+
+:local(.home-link) {
+  display: inline-block;
+
+  img {
+    height: 32px;
+  }
+}
+
+:local(.sign-in) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 20px;
+  font-size: theme.$font-size-md;
+  font-weight: theme.$font-weight-bold;
   
-    a {
-      text-decoration: underline;
-    }
+  a {
+    margin-left: 8px;
+    color: theme.$blue;
+  }
+
+  @media(min-width: theme.$breakpoint-lg) {
+    flex-direction: row;
+    justify-content: flex-end;
+    flex: 1;
+    padding-top: 0;
   }
 }
diff --git a/src/react-components/layout/Page.js b/src/react-components/layout/Page.js
index f4f4224992..f5876afdf1 100644
--- a/src/react-components/layout/Page.js
+++ b/src/react-components/layout/Page.js
@@ -5,6 +5,7 @@ import { Header } from "./Header";
 import { Footer } from "./Footer";
 
 export function Page({
+  appLogo,
   showCloud,
   enableSpoke,
   editorName,
@@ -25,12 +26,16 @@ export function Page({
   privacyUrl,
   showCompanyLogo,
   companyLogoUrl,
+  showDiscordBotLink,
+  appName,
   children,
   ...rest
 }) {
   return (
     <>
       <Header
+        appName={appName}
+        appLogo={appLogo}
         showCloud={showCloud}
         enableSpoke={enableSpoke}
         editorName={editorName}
@@ -54,12 +59,15 @@ export function Page({
         privacyUrl={privacyUrl}
         showCompanyLogo={showCompanyLogo}
         companyLogoUrl={companyLogoUrl}
+        showDiscordBotLink={showDiscordBotLink}
+        appName={appName}
       />
     </>
   );
 }
 
 Page.propTypes = {
+  appLogo: PropTypes.string,
   showCloud: PropTypes.bool,
   enableSpoke: PropTypes.bool,
   editorName: PropTypes.string,
@@ -80,5 +88,7 @@ Page.propTypes = {
   privacyUrl: PropTypes.string,
   showCompanyLogo: PropTypes.bool,
   companyLogoUrl: PropTypes.string,
+  showDiscordBotLink: PropTypes.bool,
+  appName: PropTypes.string,
   children: PropTypes.node
 };
diff --git a/src/react-components/layout/Page.scss b/src/react-components/layout/Page.scss
index 3914fe0306..e3cfe881dd 100644
--- a/src/react-components/layout/Page.scss
+++ b/src/react-components/layout/Page.scss
@@ -1,6 +1,4 @@
-@import '../../assets/stylesheets/root-vars';
-@import '../../assets/stylesheets/shared';
-@import '../../assets/stylesheets/loader';
+@use "../styles/theme.scss";
 
 * {
   box-sizing: border-box;
@@ -12,7 +10,6 @@ html, body, :global(#root), :global(#ui-root), :global(.home-root) {
 }
 
 body {
-  @extend %default-font;
   background: var(--home-background-color);
   color: var(--home-text-color);
 }
@@ -35,34 +32,9 @@ main {
   order: -1;
   flex: 1;
 
-  @media(min-width: $breakpoint-lg) {
+  @media(min-width: theme.$breakpoint-lg) {
     order: 0;
     display: flex;
     flex-direction: column;
   }
-
-  section {
-    margin: auto;
-    max-width: 100%;
-
-    @media(min-width: $breakpoint-sm) {
-      max-width: 540px;
-    }
-
-    @media(min-width: $breakpoint-md) {
-      max-width: 720px;
-    }
-
-    @media(min-width: $breakpoint-lg) {
-      max-width: 960px;
-    }
-
-    @media(min-width: $breakpoint-xl) {
-      max-width: 1140px;
-    }
-
-    @media(min-width: $breakpoint-xxl) {
-      max-width: 1410px;
-    }
-  }
 }
diff --git a/src/react-components/layout/PageContainer.js b/src/react-components/layout/PageContainer.js
index ee4ca9833a..88b19df97c 100644
--- a/src/react-components/layout/PageContainer.js
+++ b/src/react-components/layout/PageContainer.js
@@ -3,12 +3,16 @@ import PropTypes from "prop-types";
 import { Page } from "./Page";
 import { AuthContext } from "../auth/AuthContext";
 import configs from "../../utils/configs";
+import { useAccessibleOutlineStyle } from "../input/useAccessibleOutlineStyle";
+import "../styles/global.scss";
 
 export function PageContainer({ children, ...rest }) {
   const auth = useContext(AuthContext);
+  useAccessibleOutlineStyle();
 
   return (
     <Page
+      appLogo={configs.image("logo")}
       showCloud={configs.feature("show_cloud")}
       enableSpoke={configs.feature("enable_spoke")}
       editorName={configs.translation("editor-name")}
@@ -29,6 +33,8 @@ export function PageContainer({ children, ...rest }) {
       privacyUrl={configs.link("privacy_notice", "https://github.com/mozilla/hubs/blob/master/PRIVACY.md")}
       showCompanyLogo={configs.feature("show_company_logo")}
       companyLogoUrl={configs.image("company_logo")}
+      showDiscordBotLink={configs.feature("show_discord_bot_link")}
+      appName={configs.translation("app-name")}
       {...rest}
     >
       {children}
diff --git a/src/react-components/modal/Modal.scss b/src/react-components/modal/Modal.scss
index 9546918999..3d06d2283c 100644
--- a/src/react-components/modal/Modal.scss
+++ b/src/react-components/modal/Modal.scss
@@ -9,7 +9,6 @@
   border: 1px solid theme.$lightgrey;
   border-radius: theme.$border-radius-regular;
   margin: 24px;
-  width: 204px;
   z-index: 1;
 
   @media (min-width: theme.$breakpoint-lg) {
diff --git a/src/react-components/styles/global.scss b/src/react-components/styles/global.scss
index 9d5ea6e179..1f22e1669a 100644
--- a/src/react-components/styles/global.scss
+++ b/src/react-components/styles/global.scss
@@ -66,7 +66,7 @@ ul {
  */
 
 html {
- font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
+ font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 textarea {
diff --git a/src/react-components/styles/theme.scss b/src/react-components/styles/theme.scss
index 2ede603c2f..21754274d8 100644
--- a/src/react-components/styles/theme.scss
+++ b/src/react-components/styles/theme.scss
@@ -61,6 +61,7 @@ $font-size-sm: 12px;
 $font-size-md: 14px;
 $font-size-lg: 20px;
 $font-size-xl: 24px;
+$font-size-2xl: 28px;
 
 $font-weight-regular: 400;
 $font-weight-medium: 500;
diff --git a/src/scene.html b/src/scene.html
index 014070ef9a..68fd8a551b 100644
--- a/src/scene.html
+++ b/src/scene.html
@@ -9,7 +9,7 @@
 
     <link rel="shortcut icon" type="image/png" href="/favicon.ico">
     <title>Scene</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
     <!-- Google Analytics -->
     <!-- NOTE GA tracking is disabled by default. You'll need to set the GA_TRACKING_ID build variable to enable it. -->
     <script>
diff --git a/src/signin.html b/src/signin.html
index d4f9d0603a..60072e14f0 100644
--- a/src/signin.html
+++ b/src/signin.html
@@ -9,7 +9,7 @@
 
     <link rel="shortcut icon" type="image/png" href="/favicon.ico">
     <title>Sign In</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
     <script>
     if (navigator.doNotTrack !== "1") {
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
diff --git a/src/signin.js b/src/signin.js
index 0827a77fbf..506870096a 100644
--- a/src/signin.js
+++ b/src/signin.js
@@ -7,7 +7,6 @@ import "./utils/theme";
 import { AuthContextProvider } from "./react-components/auth/AuthContext";
 import { SignInModalContainer } from "./react-components/auth/SignInModalContainer";
 import { PageContainer } from "./react-components/layout/PageContainer";
-import configs from "./utils/configs";
 import "./assets/stylesheets/globals.scss";
 import { Center } from "./react-components/layout/Center";
 
@@ -20,7 +19,7 @@ function Root() {
   return (
     <WrappedIntlProvider>
       <AuthContextProvider store={store}>
-        <PageContainer style={{ backgroundImage: configs.image("home_background", true), backgroundSize: "cover" }}>
+        <PageContainer>
           <Center>
             <SignInModalContainer />
           </Center>
diff --git a/src/verify.html b/src/verify.html
index 4dcfb10f30..26416068ba 100644
--- a/src/verify.html
+++ b/src/verify.html
@@ -9,7 +9,7 @@
 
     <link rel="shortcut icon" type="image/png" href="/favicon.ico">
     <title>Verify Email</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
     <script>
     if (navigator.doNotTrack !== "1") {
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
diff --git a/src/verify.js b/src/verify.js
index 63f1ebdd38..9706602495 100644
--- a/src/verify.js
+++ b/src/verify.js
@@ -6,7 +6,6 @@ import Store from "./storage/store";
 import "./utils/theme";
 import { AuthContextProvider } from "./react-components/auth/AuthContext";
 import { VerifyModalContainer } from "./react-components/auth/VerifyModalContainer";
-import configs from "./utils/configs";
 import "./assets/stylesheets/globals.scss";
 import { PageContainer } from "./react-components/layout/PageContainer";
 import { Center } from "./react-components/layout/Center";
@@ -20,7 +19,7 @@ function Root() {
   return (
     <WrappedIntlProvider>
       <AuthContextProvider store={store}>
-        <PageContainer style={{ backgroundImage: configs.image("home_background", true), backgroundSize: "cover" }}>
+        <PageContainer>
           <Center>
             <VerifyModalContainer />
           </Center>
diff --git a/src/whats-new.html b/src/whats-new.html
index 65f8c31891..fed586fe50 100644
--- a/src/whats-new.html
+++ b/src/whats-new.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <link rel="shortcut icon" type="image/png" href="/favicon.ico"/>
     <title>What's New</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
     <!-- Google Analytics -->
     <!-- NOTE GA tracking is disabled by default. You'll need to set the GA_TRACKING_ID build variable to enable it. -->
     <script>
diff --git a/src/whats-new.js b/src/whats-new.js
index 575da9d7f3..01ad4437cd 100644
--- a/src/whats-new.js
+++ b/src/whats-new.js
@@ -4,10 +4,17 @@ import InfiniteScroll from "react-infinite-scroller";
 import markdownit from "markdown-it";
 import { FormattedMessage } from "react-intl";
 import { WrappedIntlProvider } from "./react-components/wrapped-intl-provider";
+import Store from "./storage/store";
+import { AuthContextProvider } from "./react-components/auth/AuthContext";
+
+const store = new Store();
+window.APP = { store };
 
-import configs from "./utils/configs";
 import registerTelemetry from "./telemetry";
 import "./assets/stylesheets/whats-new.scss";
+import { PageContainer } from "./react-components/layout/PageContainer";
+import { Spinner } from "./react-components/misc/Spinner";
+import { Center } from "./react-components/layout/Center";
 
 registerTelemetry("/whats-new", "Hubs What's New");
 
@@ -78,45 +85,44 @@ class WhatsNew extends Component {
     this.setState({ currentDate, notes: [...this.state.notes, ...merged] });
   }
   render() {
-    const loader = (
-      <div className="loader-wrap" key="0">
-        <div className="loader">
-          <div className="loader-center" />
-        </div>
-      </div>
-    );
     return (
-      <InfiniteScroll pageStart={0} loadMore={this.getNotes.bind(this)} hasMore={this.state.hasMore} loader={loader}>
-        <div className="container">
-          <div className="header">
-            <a href="/">
-              <img className="logo" src={configs.image("logo")} />
-            </a>
-          </div>
-          <div className="main">
-            <div className="content">
-              <h1>
-                <FormattedMessage id="whats-new-page.title" defaultMessage="What's New" />
-              </h1>
-              {this.state.notes.map((note, i) => {
-                return (
-                  <div key={i} className="note">
-                    <div className="note-header">
-                      <h2 className={note.merged_at ? "date" : "date-blank"}>{formatDate(note.merged_at)}</h2>
-                      <h2 className="title">
-                        <a href={note.html_url}>{note.title}</a>
-                      </h2>
-                    </div>
-                    {/* Setting HTML generated directly by markdownit, which is safe by default:
+      <PageContainer>
+        <InfiniteScroll
+          pageStart={0}
+          loadMore={this.getNotes.bind(this)}
+          hasMore={this.state.hasMore}
+          loader={
+            <Center>
+              <Spinner />
+            </Center>
+          }
+        >
+          <div className="container">
+            <div className="main">
+              <div className="content">
+                <h1>
+                  <FormattedMessage id="whats-new-page.title" defaultMessage="What's New" />
+                </h1>
+                {this.state.notes.map((note, i) => {
+                  return (
+                    <div key={i} className="note">
+                      <div className="note-header">
+                        <h2 className={note.merged_at ? "date" : "date-blank"}>{formatDate(note.merged_at)}</h2>
+                        <h2 className="title">
+                          <a href={note.html_url}>{note.title}</a>
+                        </h2>
+                      </div>
+                      {/* Setting HTML generated directly by markdownit, which is safe by default:
                       https://github.com/markdown-it/markdown-it/blob/master/docs/security.md */}
-                    <p className="body" dangerouslySetInnerHTML={{ __html: note.body }} />
-                  </div>
-                );
-              })}
+                      <p className="body" dangerouslySetInnerHTML={{ __html: note.body }} />
+                    </div>
+                  );
+                })}
+              </div>
             </div>
           </div>
-        </div>
-      </InfiniteScroll>
+        </InfiniteScroll>
+      </PageContainer>
     );
   }
 }
@@ -124,7 +130,9 @@ class WhatsNew extends Component {
 document.addEventListener("DOMContentLoaded", async () => {
   ReactDOM.render(
     <WrappedIntlProvider>
-      <WhatsNew />
+      <AuthContextProvider store={store}>
+        <WhatsNew />
+      </AuthContextProvider>
     </WrappedIntlProvider>,
     document.getElementById("ui-root")
   );