diff --git a/src/App.css b/src/App.css
index a1426c2..69ac53c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,6 +3,13 @@
 .page-section {
   display: block;
   overflow: hidden;
+  background: #f5f5f7;
+}
+
+.section-content {
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  max-width: 692px;
 }
 
 .section {
@@ -55,23 +62,69 @@
   margin-right: auto;
 }
 
-.profile-image {
-  width: 550px;
-  height: 275px;
-  clip-path: circle();
+.hero-tile {
+  display: flex;
+  flex-direction: row;
+  min-width: 100%;
+
+  @media screen and (max-width: 749px) {
+    flex-direction: column;
+  }
+}
+
+.tile-media {
+  width: 100%;
+  height: auto;
+  max-height: 400px;
+  flex-basis: 400px;
+  flex-shrink: 1;
   overflow: hidden;
+  border-radius: 25px 0 0 25px;
+}
+
+.tile-content {
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  width: 40%;
+  text-align: left;
+}
+
+.hero-tile {
+  justify-content: space-between;
+  flex-basis: 0;
+  background: #fff;
+  border-radius: 25px;
+}
+
+.profile-image {
   object-fit: cover;
-  object-position: 0 38%;
+  object-position: 80% 100%;
+  width: auto;
+  height: auto;
+  max-width: 450px;
+  max-height: 525px;
+  position: relative;
 }
 
 .profile-heading {
-  margin-bottom: 0;
-  font-size: 64px;
+  font-size: 28px;
+  line-height: 1.1904761905;
+  font-weight: 700;
+  letter-spacing: .011em;
+  font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica",
+    "Arial", sans-serif;
 }
 
 .profile-caption {
-  color: #86868b;
-  margin: 0;
+  font-size: 12px;
+  line-height: 1.3333733333;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
+    "Arial", sans-serif;
+  margin-bottom: 24px;
+  color: #6e6e73;
 }
 
 .profile-caption-invert {
@@ -80,9 +133,12 @@
 }
 
 .profile-intro {
-  font-size: 24px;
-  width: 80%;
-  margin: 50px auto;
+  font-size: 21px;
+  line-height: 1.1904761905;
+  font-weight: 700;
+  letter-spacing: .011em;
+  font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica",
+    "Arial", sans-serif;
 }
 
 .biscuit-image-row {
diff --git a/src/App.tsx b/src/App.tsx
index 179919a..9b557f2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,7 +10,9 @@ export const App: FC = () => {
 
   return (
     <main className="page-section">
-      <Hero {...heroContent} />
+      <div className="section-content">
+        <Hero {...heroContent} />
+      </div>
       <Biscuit {...biscuitContent} />
       <Work {...workContent} />
       <Cool {...coolContent} />
diff --git a/src/components/HeroSection/Assets/profile-picture.png b/src/components/HeroSection/Assets/profile-picture.png
new file mode 100644
index 0000000..aed5461
Binary files /dev/null and b/src/components/HeroSection/Assets/profile-picture.png differ
diff --git a/src/components/HeroSection/hero.tsx b/src/components/HeroSection/hero.tsx
index 274a304..3a33852 100644
--- a/src/components/HeroSection/hero.tsx
+++ b/src/components/HeroSection/hero.tsx
@@ -1,27 +1,28 @@
 import React, { type FC } from 'react';
 import type { BasicContent } from '../../../types';
-import profilePicture from './Assets/profile-picture.jpeg';
+import profilePicture from './Assets/profile-picture.png';
 
 export const Hero: FC<BasicContent> = ({ heading, caption, intro }) => (
   <section className="section section-hero">
-    <div className="flex-row">
-      <img
-        src={profilePicture}
-        alt="profile of Alex"
-        className="profile-image"
-      />
-      <h2 className="profile-heading" data-testid="profile-heading">
-        {heading}
-      </h2>
-      <p className="profile-caption" data-testid="profile-caption">
-        {caption}
-      </p>
-      <p className="profile-intro" data-testid="profile-intro">
-        {intro}
-      </p>
-      <code style={{ display: 'none' }}>
-        need a graphic here to push the other sections out of initial view
-      </code>
+    <div className="hero-tile">
+      <div className="tile-media">
+        <img
+          src={profilePicture}
+          alt="profile of Alex"
+          className="profile-image"
+        />
+      </div>
+      <div className="tile-content">
+        <div className="profile-caption" data-testid="profile-caption">
+          {caption}
+        </div>
+        <div className="profile-heading" data-testid="profile-heading">
+          {heading}
+          <div className="profile-intro" data-testid="profile-intro">
+            {intro}
+          </div>
+        </div>
+      </div>
     </div>
   </section>
 );
diff --git a/src/fixtures/content.ts b/src/fixtures/content.ts
index f6c0c78..6af6a8f 100644
--- a/src/fixtures/content.ts
+++ b/src/fixtures/content.ts
@@ -1,7 +1,7 @@
 export const content = {
   hero: {
     heading: 'Alex Billson',
-    caption: '://developer',
+    caption: 'Senior Software Engineer',
     intro: 'Software engineer, coffee enthusiast'
   },
   biscuit: {