diff --git a/landing/app-landing.react.js b/landing/app-landing.react.js
index a0d5c9cc9..2d45be922 100644
--- a/landing/app-landing.react.js
+++ b/landing/app-landing.react.js
@@ -1,25 +1,29 @@
 // @flow
 
 import * as React from 'react';
 
 import { imageAssetMetaData } from './asset-meta-data.js';
 import HeroContent from './hero-content.react.js';
 import css from './landing.css';
 import Picture from './Picture.react.js';
 import usePreloadImageAssets from './use-pre-load-image-assets.react.js';
 
 function AppLanding(): React.Node {
   usePreloadImageAssets(imageAssetMetaData);
   const [hero] = imageAssetMetaData;
 
   return (
-    <main className={css.wrapper}>
-      <div className={hero.imageStyle}>
-        <Picture url={hero.url} alt={hero.alt} />
-      </div>
-      <HeroContent />
+    <main>
+      <section className={css.heroSection}>
+        <div className={css.heroContainer}>
+          <div className={css.heroImage}>
+            <Picture url={hero.url} alt={hero.alt} />
+          </div>
+          <HeroContent />
+        </div>
+      </section>
     </main>
   );
 }
 
 export default AppLanding;
diff --git a/landing/asset-meta-data.js b/landing/asset-meta-data.js
index 0cead5fcd..7f645d4c0 100644
--- a/landing/asset-meta-data.js
+++ b/landing/asset-meta-data.js
@@ -1,24 +1,14 @@
 // @flow
 
-import css from './landing.css';
-
 export type ImageAsset = {
   +alt: string,
   +url: string,
-  +title: string,
-  +description: string,
-  +imageStyle: string,
-  +infoStyle: string,
 };
 
 export const assetsCacheURLPrefix = 'https://dh9fld3hutpxf.cloudfront.net';
 export const imageAssetMetaData = [
   {
-    alt: 'a mobile phone screen highlighting chat and DAO voting',
-    url: `${assetsCacheURLPrefix}/Header`,
-    imageStyle: css.heroImage,
-    infoStyle: css.heroInfo,
-    title: 'Header',
-    description: '',
+    alt: 'hero image showcasing Comm',
+    url: `${assetsCacheURLPrefix}/hero`,
   },
 ];
diff --git a/landing/hero-content.css b/landing/hero-content.css
index 517d16c8e..7bd9ddcc9 100644
--- a/landing/hero-content.css
+++ b/landing/hero-content.css
@@ -1,29 +1,39 @@
 .header {
   color: var(--white-80);
   margin-bottom: 24px;
 }
 
 .header span {
   background: linear-gradient(90deg, #5d34b3 0%, #a314d5 49.31%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 
 .subHeader {
   color: var(--white-80);
   margin-bottom: 56px;
 }
 
+.heroInfo {
+  display: flex;
+  padding: 144px 0 224px 32px;
+  flex-direction: column;
+  flex: 1;
+}
+
 form {
   width: 92%;
 }
-@media (max-width: 1099px) {
+@media screen and (max-width: 848px) {
   form {
     width: 100%;
   }
 }
 
-.contentWrapper {
-  flex-basis: 300px;
+@media screen and (max-width: 1280px) {
+  .heroInfo {
+    padding: 0;
+    max-width: 716px;
+  }
 }
diff --git a/landing/hero-content.react.js b/landing/hero-content.react.js
index 340a07806..ff3d81f6f 100644
--- a/landing/hero-content.react.js
+++ b/landing/hero-content.react.js
@@ -1,36 +1,31 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 
-import { imageAssetMetaData } from './asset-meta-data.js';
 import css from './hero-content.css';
 import SubscriptionForm from './subscription-form.react.js';
 import typography from './typography.css';
 
 function HeroContent(): React.Node {
-  const [hero] = imageAssetMetaData;
-
   const headerClassName = classNames([typography.display3, css.header]);
   const subheaderClassName = classNames([
     typography.subheading2,
     css.subHeader,
   ]);
 
   return (
-    <section className={hero.infoStyle}>
-      <div className={css.contentWrapper}>
-        <h1 className={headerClassName}>
-          Comm is an encrypted messaging app for <span>communities</span>
-        </h1>
-        <p className={subheaderClassName}>
-          We extend Signal&rsquo;s model of E2E encryption with personal servers
-          to enable richer functionality.
-        </p>
-        <SubscriptionForm />
-      </div>
+    <section className={css.heroInfo}>
+      <h1 className={headerClassName}>
+        Comm is an encrypted messaging app for <span>communities</span>
+      </h1>
+      <p className={subheaderClassName}>
+        We extend Signal&rsquo;s model of E2E encryption with personal servers
+        to enable richer functionality.
+      </p>
+      <SubscriptionForm />
     </section>
   );
 }
 
 export default HeroContent;
diff --git a/landing/landing.css b/landing/landing.css
index 46748054e..90e7eae14 100644
--- a/landing/landing.css
+++ b/landing/landing.css
@@ -1,78 +1,75 @@
 .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: var(--landing-page-z-index);
 }
 
 .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 .';
+.heroSection {
+  display: flex;
+  justify-content: center;
 }
 
-@media screen and (max-width: 1099px) {
-  .wrapper {
-    margin-left: auto;
-    margin-right: auto;
-    display: grid;
+.heroContainer {
+  width: 1850px;
+  display: flex;
+  flex-direction: row-reverse;
+  overflow: hidden;
+}
+
+.heroImage {
+  flex: 1;
+  position: relative;
+}
+
+.heroImage picture img {
+  object-fit: cover;
+  object-position: left center;
+  position: absolute;
+  left: 120px;
+  top: 120px;
+  width: 624px;
+  height: 472px;
+}
+
+@media screen and (max-width: 1280px) {
+  .heroContainer {
+    flex-direction: column;
     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 .';
+    padding: 16px 32px;
   }
 
   .heroImage {
-    display: none;
+    margin-bottom: 24px;
+    max-width: 600px;
   }
 
-  .heroInfo {
-    display: flex;
-    flex-direction: column;
-    padding-bottom: 1.5rem;
+  .heroImage picture img {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    position: relative;
   }
 }
-
-.heroImage {
-  grid-area: hImg;
-}
-
-.heroInfo {
-  grid-area: hInfo;
-}
diff --git a/landing/subscription-form.css b/landing/subscription-form.css
index a356b44a3..88062e0b9 100644
--- a/landing/subscription-form.css
+++ b/landing/subscription-form.css
@@ -1,97 +1,97 @@
 form {
   display: flex;
 }
 
 .button {
   cursor: pointer;
   border: none;
   padding: 17px 32px; /* We have 17 to compensate for no border */
   border-radius: 4px;
   color: var(--white-100);
   background: var(--violet-dark-60);
   min-width: 184px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .buttonSuccess {
   background-color: var(--success-dark-90);
 }
 
 .buttonFailure {
   background-color: var(--error-dark-50);
 }
 
 .button:hover {
   background-color: var(--violet-dark-80);
 }
 
 .buttonSuccess:hover {
   background-color: var(--success-dark-90);
 }
 
 .buttonFailure:hover {
   background: var(--error-dark-50);
 }
 
 div.inputContainer {
   display: flex;
   flex: 1;
   flex-direction: column;
 }
 
 input.emailInput {
   flex: 1;
   padding: 16px 24px;
   background-color: transparent;
   color: var(--white-100);
   border: 1px solid var(--white-80);
   border-radius: 4px;
   outline: none;
   transition: 300ms;
   margin-right: 12px;
 }
 
 input.emailInput:focus {
   border: 1.5px solid var(--white-100);
   transition: 300ms;
 }
 
 input.emailInputFailure {
   border: 1px solid var(--error-dark-50);
 }
 
 p.feedbackText {
   margin-top: 8px;
 }
 
 p.feedbackTextSuccess {
   color: var(--success-dark-50);
 }
 
 p.feedbackTextFailure {
   color: var(--error-dark-50);
 }
 
-@media (max-width: 1099px) {
+@media screen and (max-width: 848px) {
   form {
     display: block;
   }
   .button {
     width: 100%;
     height: 50px;
     margin-top: 8px;
   }
 
   input.emailInput {
     width: 100%;
     height: 50px;
     margin-bottom: 8px;
   }
 
   p.feedbackText {
     text-align: center;
     margin-top: 0;
   }
 }