diff --git a/_layouts/home.html b/_layouts/home.html
index 6e54808..ad099e1 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -4,20 +4,18 @@
   <body>
     {% include header.html %}
 
-    <div>
-      <section>
-        <h1>Cooperative Technologists</h1>
-        <p>Creative technology companies, fully owned and controlled by
-          the people who do the work. Cooperative ownership means tech
-          that’s better for its workers and customers.</p>
+    <section class="hero">
+      <h1 class="hero_title">Cooperative Technologists</h1>
+      <p class="hero_body">Creative technology companies, fully owned and controlled by
+        the people who do the work.<br />
+        Cooperative ownership means tech that’s better for its workers and customers.</p>
 
-        <span>
-          <a href="/about#manifesto">Our manifesto</a>
-        </span>
-      </section>
+      <span class="hero_button">
+        <a href="/about#manifesto">Our manifesto</a>
+      </span>
+    </section>
 
-      {{ content }}
-    </div>
+    {{ content }}
 
     {% include footer.html %}
   </body>
diff --git a/assets/css/app.css b/assets/css/app.css
index 333c44c..e97fd04 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -50,3 +50,41 @@ h1, h2, h3, h4, h5, h6 {
   font-size: 1rem;
   letter-spacing: 0.05em;
 }
+
+.hero {
+  width: 100%;
+  padding: 8rem;
+  background-image: url(/assets/img/banner-collage.jpg);
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  text-align: center;
+
+}
+
+.hero_body {
+  font-size: 1.5em;
+  font-weight: bold;
+  line-height: 1.6;
+  color: #ffffff;
+  max-width: 50ch;
+}
+
+.hero_title {
+  display: none;
+}
+
+.hero_button {
+  cursor: pointer;
+  padding: 1rem;
+  border: 1px solid white;
+  border-radius: 4px;
+}
+
+.hero_button a {
+  color: white;
+}
