diff --git a/DeepDrftPublic.Client/Pages/Home.razor b/DeepDrftPublic.Client/Pages/Home.razor
index edbeb7c..b08938b 100644
--- a/DeepDrftPublic.Client/Pages/Home.razor
+++ b/DeepDrftPublic.Client/Pages/Home.razor
@@ -40,47 +40,53 @@
     <div class="divider-line"></div>
 </div>
 
-@* Sound section *@
+@* Medium section *@
 <section class="section">
     <div class="section-header-grid">
         <MudGrid Style="margin-bottom: 5rem;">
             <MudItem xs="12" md="4">
-                <div class="section-label">Genres &amp; Moods</div>
-                <h2 class="section-title">Every<br /><em>Frequency</em><br />Explored</h2>
+                <div class="section-label">Format &amp; Medium</div>
+                <h2 class="section-title">Music through<br /><em>Every</em><br />Medium</h2>
             </MudItem>
             <MudItem xs="12" md="8">
                 <p class="section-body">
-                    From the hypnotic pulse of deep house to the fractal complexity of IDM, Deep DRFT refuses to be categorized. We treat genre as a palette &mdash; not a cage. Each session begins as something and ends as something else entirely.
+                    The same hands, three different rooms. A studio cut is built; a live set is risked; a DJ mix is woven. We release in every form the music asks for &mdash; each one a different relationship between the moment and the record of it.
                 </p>
             </MudItem>
         </MudGrid>
     </div>
 
-    <div class="genre-grid">
-        @* TODO Phase 2.2: wire each genre to /genres/{slug} *@
-        <div class="genre-card">
-            <div class="genre-name">House</div>
-            <div class="genre-count">Foundation</div>
+    <div class="medium-grid">
+        @* TODO Phase 3.x: wire each card to its format-filtered browse route once /tracks?format= exists *@
+        <div class="medium-card">
+            <div class="medium-image" style="background-image: url('img/dd-studio.jpg');">
+                <div class="medium-scrim"></div>
+            </div>
+            <div class="medium-body">
+                <div class="medium-type">Studio</div>
+                <div class="medium-name">Studio Releases</div>
+                <div class="medium-desc">Composed, layered, and finished &mdash; tracks built to be returned to.</div>
+            </div>
         </div>
-        <div class="genre-card">
-            <div class="genre-name">Techno</div>
-            <div class="genre-count">Architecture</div>
+        <div class="medium-card">
+            <div class="medium-image" style="background-image: url('img/dd-live.jpeg');">
+                <div class="medium-scrim"></div>
+            </div>
+            <div class="medium-body">
+                <div class="medium-type">Live</div>
+                <div class="medium-name">Live Releases</div>
+                <div class="medium-desc">Performances caught in the moment, unrepeatable and unedited.</div>
+            </div>
         </div>
-        <div class="genre-card">
-            <div class="genre-name">Trance</div>
-            <div class="genre-count">Ascension</div>
-        </div>
-        <div class="genre-card">
-            <div class="genre-name">IDM</div>
-            <div class="genre-count">Intelligence</div>
-        </div>
-        <div class="genre-card">
-            <div class="genre-name">Progressive</div>
-            <div class="genre-count">Journey</div>
-        </div>
-        <div class="genre-card">
-            <div class="genre-name">Ambient</div>
-            <div class="genre-count">Atmosphere</div>
+        <div class="medium-card">
+            <div class="medium-image" style="background-image: url('img/dd-dj.jpeg');">
+                <div class="medium-scrim"></div>
+            </div>
+            <div class="medium-body">
+                <div class="medium-type">Mix</div>
+                <div class="medium-name">DJ Mix Releases</div>
+                <div class="medium-desc">Uninterrupted sets &mdash; one track bleeding into the next, start to finish.</div>
+            </div>
         </div>
     </div>
 </section>
diff --git a/DeepDrftPublic.Client/Pages/Home.razor.css b/DeepDrftPublic.Client/Pages/Home.razor.css
index 0398e42..6fe4726 100644
--- a/DeepDrftPublic.Client/Pages/Home.razor.css
+++ b/DeepDrftPublic.Client/Pages/Home.razor.css
@@ -103,36 +103,36 @@
     align-self: end;
 }
 
-/* Genre grid */
-.genre-grid {
+/* ── MEDIUM GRID (Music through Every Medium) ── */
+.medium-grid {
     display: grid;
-    grid-template-columns: repeat(6, 1fr);
+    grid-template-columns: repeat(3, 1fr);
     gap: 1px;
     background: var(--deepdrft-border);
     border: 1px solid var(--deepdrft-border);
     margin-bottom: 4rem;
 }
 
-@media (max-width: 960px) {
-    .genre-grid { grid-template-columns: repeat(3, 1fr); }
+@media (max-width: 959px) {
+    .medium-grid { grid-template-columns: repeat(2, 1fr); }
+    .medium-card:last-child { grid-column: 1 / -1; }
 }
 
 @media (max-width: 599px) {
-    .genre-grid { grid-template-columns: repeat(2, 1fr); }
+    .medium-grid { grid-template-columns: 1fr; }
+    .medium-card:last-child { grid-column: auto; }
 }
 
-.genre-card {
+.medium-card {
     background: var(--deepdrft-white);
-    padding: 2rem 1.5rem;
-    transition: background 0.3s, color 0.3s;
     cursor: pointer;
-    position: relative;
     overflow: hidden;
     text-decoration: none;
     display: block;
+    position: relative;
 }
 
-.genre-card::after {
+.medium-card::after {
     content: '';
     position: absolute;
     bottom: 0;
@@ -143,25 +143,63 @@
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.3s;
+    z-index: 1;
 }
 
-.genre-card:hover::after { transform: scaleX(1); }
-.genre-card:hover { background: #f3f6f4; }
+.medium-card:hover::after { transform: scaleX(1); }
 
-.genre-name {
-    font-family: var(--deepdrft-font-display);
-    font-size: 1.5rem;
-    font-weight: 400;
-    color: var(--deepdrft-navy);
-    margin-bottom: 0.5rem;
+.medium-image {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 4 / 3;
+    background-size: cover;
+    background-position: center;
+    transition: transform 0.5s ease;
 }
 
-.genre-count {
+.medium-card:hover .medium-image { transform: scale(1.05); }
+
+.medium-scrim {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to bottom,
+        rgba(17, 35, 56, 0.0) 40%,
+        rgba(17, 35, 56, 0.35) 100%);
+    transition: opacity 0.3s;
+    opacity: 0.7;
+}
+
+.medium-card:hover .medium-scrim { opacity: 1; }
+
+.medium-body {
+    padding: 2rem 1.5rem;
+    position: relative;
+}
+
+.medium-type {
     font-family: var(--deepdrft-font-mono);
     font-size: 0.58rem;
     letter-spacing: 0.2em;
     color: var(--deepdrft-muted);
     text-transform: uppercase;
+    margin-bottom: 0.6rem;
+}
+
+.medium-name {
+    font-family: var(--deepdrft-font-display);
+    font-size: 1.6rem;
+    font-weight: 400;
+    color: var(--deepdrft-navy);
+    margin-bottom: 0.75rem;
+    line-height: 1.1;
+}
+
+.medium-desc {
+    font-family: var(--deepdrft-font-body);
+    font-size: 0.82rem;
+    line-height: 1.65;
+    color: var(--deepdrft-navy);
+    opacity: 0.6;
 }
 
 /* ── DARK FEATURE SECTION ── */