diff --git a/landing/app-landing.react.js b/landing/app-landing.react.js
--- a/landing/app-landing.react.js
+++ b/landing/app-landing.react.js
@@ -13,11 +13,15 @@
   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>
   );
 }
diff --git a/landing/asset-meta-data.js b/landing/asset-meta-data.js
--- 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
--- a/landing/hero-content.css
+++ b/landing/hero-content.css
@@ -15,15 +15,25 @@
   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
--- a/landing/hero-content.react.js
+++ b/landing/hero-content.react.js
@@ -3,14 +3,11 @@
 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,
@@ -18,17 +15,15 @@
   ]);
 
   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>
   );
 }
diff --git a/landing/landing.css b/landing/landing.css
--- a/landing/landing.css
+++ b/landing/landing.css
@@ -26,53 +26,50 @@
   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
--- a/landing/subscription-form.css
+++ b/landing/subscription-form.css
@@ -74,7 +74,7 @@
   color: var(--error-dark-50);
 }
 
-@media (max-width: 1099px) {
+@media screen and (max-width: 848px) {
   form {
     display: block;
   }