diff --git a/bedrock/mozorg/templates/mozorg/home/home-m24.html b/bedrock/mozorg/templates/mozorg/home/home-m24.html
index cd9fb2aa437..c31beb7964c 100644
--- a/bedrock/mozorg/templates/mozorg/home/home-m24.html
+++ b/bedrock/mozorg/templates/mozorg/home/home-m24.html
@@ -42,7 +42,11 @@
   {% include 'mozorg/home/includes/m24/donate.html'%}
   {% include 'mozorg/home/includes/m24/ai-gallery.html'%}
   {% include 'mozorg/home/includes/m24/media-springboard.html'%}
-  {% include 'mozorg/home/includes/m24/showcase.html'%}
+  {% if ftl_has_messages('m24-home-state-of-mozilla', 'm24-home-mozilla-is-reinventing-itself', 'm24-home-read-the-report') %}
+    {% include 'mozorg/home/includes/m24/showcase-som.html'%}
+  {% else %}
+    {% include 'mozorg/home/includes/m24/showcase.html'%}
+  {% endif %}
   {% include 'mozorg/home/includes/m24/issues-gallery.html'%}
 
 </main>
diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/media-springboard.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/media-springboard.html
index a75c66516fe..7ad3d3ca3d0 100644
--- a/bedrock/mozorg/templates/mozorg/home/includes/m24/media-springboard.html
+++ b/bedrock/mozorg/templates/mozorg/home/includes/m24/media-springboard.html
@@ -132,5 +132,3 @@ <h3 class="m24-c-intro-title m24-t-sm">{{ ftl('m24-home-headline-you-ai-v2', fal
     ) }}
   </ul>
 </section>
-
-<div class="m24-c-transition m24-t-top-light m24-t-bottom-green"><hr></div>
diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/showcase-som.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/showcase-som.html
new file mode 100644
index 00000000000..a73bebcf96e
--- /dev/null
+++ b/bedrock/mozorg/templates/mozorg/home/includes/m24/showcase-som.html
@@ -0,0 +1,47 @@
+{#
+ This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+<div class="m24-c-transition m24-t-top-light m24-t-bottom-pink"><hr></div>
+
+<section class="m24-c-showcase m24-t-pink">
+  <div class="m24-c-content">
+    <header class="m24-c-showcase-text">
+      <h2 class="m24-c-showcase-title">{{ ftl('m24-home-state-of-mozilla') }}</h2>
+      <p class="m24-c-showcase-body">{{ ftl('m24-home-mozilla-is-reinventing-itself') }}</p>
+    </header>
+
+    <div class="m24-c-showcase">
+      <div class="m24-c-showcase-media">
+        {{ resp_img(
+          url='img/home/2024//showcase/showcase-som-1440.png',
+          srcset={
+            'img/home/2024//showcase/showcase-som-375.png': '375w',
+            'img/home/2024//showcase/showcase-som-686.png': '686w',
+            'img/home/2024//showcase/showcase-som-1440.png': '1440w',
+            'img/home/2024//showcase/showcase-som-2752.png': '2752w',
+          },
+          sizes={
+            'default': '100vw',
+          },
+          optional_attributes={
+            'width': '1376',
+            'height': '590',
+            'alt': ftl('m24-home-state-of-mozilla-alt'),
+          }
+        ) }}
+      </div>
+    </div>
+
+    <header class="m24-c-showcase-text m24-l-two-columns">
+      <h3 class="m24-c-showcase-subtitle">2024</h3>
+
+      <p class="m24-c-showcase-body m24-c-section-cta">
+        <a href="#TODO-foundation.annualreport.2024.index" class="m24-c-cta" rel="external noopener" data-cta-text="Read the report">{{ ftl('m24-home-read-the-report') }}</a>
+      </p>
+    </footer>
+
+  </div>
+</section>
diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/showcase.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/showcase.html
index 31d2b75c28f..8c391161aee 100644
--- a/bedrock/mozorg/templates/mozorg/home/includes/m24/showcase.html
+++ b/bedrock/mozorg/templates/mozorg/home/includes/m24/showcase.html
@@ -4,6 +4,8 @@
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
+<div class="m24-c-transition m24-t-top-light m24-t-bottom-green"><hr></div>
+
 <section class="m24-c-showcase m24-t-green">
   <div class="m24-c-content">
     <header class="m24-c-showcase-text">
diff --git a/l10n/en/mozorg/home-m24.ftl b/l10n/en/mozorg/home-m24.ftl
index b204816cc26..503e7078db7 100644
--- a/l10n/en/mozorg/home-m24.ftl
+++ b/l10n/en/mozorg/home-m24.ftl
@@ -116,6 +116,11 @@ m24-home-alt-rise25-proud = A proud honoree at { -brand-name-rise25 }.
 m24-home-alt-rise25-smiling = A confident smiling speaker at { -brand-name-rise25 }.
 # Used as an accessible text alternative for an image
 m24-home-alt-rise25-joyous = A joyous honoree at { -brand-name-rise25 }.
+m24-home-state-of-mozilla = State of { -brand-name-mozilla }
+m24-home-mozilla-is-reinventing-itself = { -brand-name-mozilla } is reinventing itself, diversifying around a constellation of organizations, reimagining advertising and creating an open source AI ecosystem. Read about it in the State of { -brand-name-mozilla } 2024 Report.
+# Used as an accessible text alternative for an image
+m24-home-state-of-mozilla-alt = Abstract pixel art in shades of green, orange and pink
+m24-home-read-the-report = Read the report
 
 ## Issues
 
diff --git a/media/css/m24/base.scss b/media/css/m24/base.scss
index 5ba6a69383c..7f40bf2784d 100644
--- a/media/css/m24/base.scss
+++ b/media/css/m24/base.scss
@@ -89,8 +89,9 @@ a:link {
     font-family: var(--title-font-family);
     font-size: $text-button-xl;
     font-weight: 600;
+    line-height: 1.1;
     background-image:
-    linear-gradient(to right, $m24-color-black 0, $m24-color-black 33%,transparent 33%, transparent 66%, $m24-color-black 66%, $m24-color-black 100%);
+        linear-gradient(to right, $m24-color-black 0, $m24-color-black 33%,transparent 33%, transparent 66%, $m24-color-black 66%, $m24-color-black 100%);
     background-repeat: no-repeat;
     background-position:
         left var(--cta-bg-position, 100%) top 100%;
diff --git a/media/css/m24/showcase.scss b/media/css/m24/showcase.scss
index 685a1a7fb07..d06429fec69 100644
--- a/media/css/m24/showcase.scss
+++ b/media/css/m24/showcase.scss
@@ -9,6 +9,12 @@
     margin-bottom: $spacer-sm;
 }
 
+.m24-c-showcase-subtitle {
+    font-size: $text-button-xl;
+    padding: $spacer-xs 0;
+    text-align: end;
+}
+
 .m24-c-showcase-body {
     font-weight: 500;
     font-size: $text-body-lg;
@@ -106,8 +112,10 @@
     .m24-c-showcase-text.m24-l-two-columns {
         @include grid;
 
-        .m24-c-showcase-title {
+        .m24-c-showcase-title,
+        .m24-c-showcase-subtitle {
             grid-column: 1/7;
+            text-align: start;
         }
 
         .m24-c-showcase-body {
@@ -115,6 +123,18 @@
             max-width: none;
         }
     }
+
+    .m24-c-showcase-foot {
+        @include grid;
+
+        .m24-c-showcase-foot-content {
+            grid-column: 1/7;
+        }
+
+        .m24-c-section-cta {
+            grid-column: 7/-1;
+        }
+    }
 }
 
 @media #{$mq-lg} and (prefers-reduced-motion: no-preference) {
diff --git a/media/img/home/2024/showcase/showcase-som-1440.png b/media/img/home/2024/showcase/showcase-som-1440.png
new file mode 100644
index 00000000000..e19d8bc7aea
Binary files /dev/null and b/media/img/home/2024/showcase/showcase-som-1440.png differ
diff --git a/media/img/home/2024/showcase/showcase-som-2752.png b/media/img/home/2024/showcase/showcase-som-2752.png
new file mode 100644
index 00000000000..591ad29feee
Binary files /dev/null and b/media/img/home/2024/showcase/showcase-som-2752.png differ
diff --git a/media/img/home/2024/showcase/showcase-som-375.png b/media/img/home/2024/showcase/showcase-som-375.png
new file mode 100644
index 00000000000..3c10e2e5652
Binary files /dev/null and b/media/img/home/2024/showcase/showcase-som-375.png differ
diff --git a/media/img/home/2024/showcase/showcase-som-686.png b/media/img/home/2024/showcase/showcase-som-686.png
new file mode 100644
index 00000000000..dd559c43587
Binary files /dev/null and b/media/img/home/2024/showcase/showcase-som-686.png differ