diff --git a/components/baseline-indicator/icons/status/pending-removal-dark.svg b/components/baseline-indicator/icons/status/pending-removal-dark.svg
new file mode 100644
index 000000000..64d6df0dc
--- /dev/null
+++ b/components/baseline-indicator/icons/status/pending-removal-dark.svg
@@ -0,0 +1,11 @@
+<svg width="540" height="300" viewBox="0 0 540 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M150 0L240 90L210 120L120 30L150 0Z" fill="#B3261E"/>
+<path d="M450 60L480 90L450 120L420 90L450 60Z" fill="#F9DEDC" fill-opacity="0.32"/>
+<path d="M510 120L540 150L510 180L480 150L510 120Z" fill="#F9DEDC" fill-opacity="0.32"/>
+<path d="M450 180L480 210L450 240L420 210L450 180Z" fill="#F9DEDC" fill-opacity="0.32"/>
+<path d="M90 60L60 90L90 120L120 90L90 60Z" fill="#F9DEDC" fill-opacity="0.32"/>
+<path d="M30 120L0 150L30 180L60 150L30 120Z" fill="#F9DEDC" fill-opacity="0.32"/>
+<path d="M90 180L60 210L90 240L120 210L90 180Z" fill="#F9DEDC" fill-opacity="0.32"/>
+<path d="M330 180L300 210L390 300L420 270L330 180Z" fill="#B3261E"/>
+<path d="M390 0L420 30L150 300L120 270L390 0Z" fill="#B3261E"/>
+</svg>
diff --git a/components/baseline-indicator/icons/status/pending-removal.svg b/components/baseline-indicator/icons/status/pending-removal.svg
new file mode 100644
index 000000000..69629e5a7
--- /dev/null
+++ b/components/baseline-indicator/icons/status/pending-removal.svg
@@ -0,0 +1,11 @@
+<svg width="540" height="300" viewBox="0 0 540 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M150 0L240 90L210 120L120 30L150 0Z" fill="#B3261E"/>
+<path d="M450 60L480 90L450 120L420 90L450 60Z" fill="#8C1D18" fill-opacity="0.32"/>
+<path d="M510 120L540 150L510 180L480 150L510 120Z" fill="#8C1D18" fill-opacity="0.32"/>
+<path d="M450 180L480 210L450 240L420 210L450 180Z" fill="#8C1D18" fill-opacity="0.32"/>
+<path d="M90 60L60 90L90 120L120 90L90 60Z" fill="#8C1D18" fill-opacity="0.32"/>
+<path d="M30 120L0 150L30 180L60 150L30 120Z" fill="#8C1D18" fill-opacity="0.32"/>
+<path d="M90 180L60 210L90 240L120 210L90 180Z" fill="#8C1D18" fill-opacity="0.32"/>
+<path d="M330 180L300 210L390 300L420 270L330 180Z" fill="#B3261E"/>
+<path d="M390 0L420 30L150 300L120 270L390 0Z" fill="#B3261E"/>
+</svg>
diff --git a/components/baseline-indicator/server.css b/components/baseline-indicator/server.css
index a77e28f38..d3332d8d8 100644
--- a/components/baseline-indicator/server.css
+++ b/components/baseline-indicator/server.css
@@ -46,6 +46,17 @@
 
     @mixin light-dark --baseline-img, url("./icons/status/obsolete.svg"),
       url("./icons/status/obsolete-dark.svg");
+
+    &.to-be-removed {
+      --baseline-bg: #fceeee;
+      --baseline-engine-bg: #f3dddd;
+      --baseline-pill-bg: #b3261e;
+      --baseline-pill-color: #f1f3f4;
+
+      @mixin light-dark --baseline-img,
+        url("./icons/status/pending-removal.svg"),
+        url("./icons/status/pending-removal-dark.svg");
+    }
   }
 
   &[open] {
diff --git a/components/baseline-indicator/server.js b/components/baseline-indicator/server.js
index 389bc5677..4cfc85754 100644
--- a/components/baseline-indicator/server.js
+++ b/components/baseline-indicator/server.js
@@ -1,5 +1,6 @@
 import { html } from "@lit-labs/ssr";
 import { nothing } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 import { ServerComponent } from "../server/index.js";
 
@@ -79,6 +80,7 @@ export class BaselineIndicator extends ServerComponent {
     const level = status.feature.discouraged
       ? "discouraged"
       : status.baseline || "not";
+    const removalDate = status.feature.discouraged?.removal_date;
 
     const feedbackLink = `${SURVEY_URL}?page=${encodeURIComponent(context.url)}&level=${level}`;
 
@@ -130,10 +132,35 @@ export class BaselineIndicator extends ServerComponent {
         }
       };
 
+    const renderAlternatives =
+      /**
+       * @param {string} instruction
+       * @param {import("@rari").Alternative[]} [alternatives]
+       */
+      (instruction, alternatives) =>
+        alternatives && alternatives.length > 0
+          ? html`<p>${instruction}</p>
+              <ul class="alternatives">
+                ${alternatives.map(
+                  ({ name, description, mdn_url }) =>
+                    html`<li>
+                      <a
+                        href=${mdn_url.replace(
+                          "/docs",
+                          `/${context.locale}/docs`,
+                        )}
+                        title=${description}
+                        >${name}</a
+                      >
+                    </li>`,
+                )}
+              </ul>`
+          : nothing;
+
     const openByDefault = level === "discouraged";
 
     return html`<details
-      class="baseline-indicator ${level}"
+      class="baseline-indicator ${level} ${removalDate ? "to-be-removed" : ""}"
       data-glean-toggle-open="baseline_toggle_open"
       ?open=${openByDefault}
       ?data-open-by-default=${openByDefault}
@@ -167,7 +194,9 @@ export class BaselineIndicator extends ServerComponent {
         </div>
         ${level === "low"
           ? html`<div class="pill">${context.l10n`Newly available`}</div>`
-          : nothing}
+          : level === "discouraged" && removalDate
+            ? html`<div class="pill">${context.l10n`To be removed`}</div>`
+            : nothing}
         <div class="browsers">
           ${ENGINES.map(
             ({ name, browsers }) =>
@@ -219,29 +248,28 @@ export class BaselineIndicator extends ServerComponent {
                 ? html`<p>* ${context.l10n("baseline-asterisk")}</p>`
                 : nothing}`
           : level === "discouraged"
-            ? html`<p>
-                  ${context.l10n`Avoid using this feature in new projects. This feature may be a candidate for removal from web standards or browsers.`}
-                </p>
-                ${status.alternatives && status.alternatives.length > 0
-                  ? html`<p>
-                        ${context.l10n`Consider using the following features instead:`}
-                      </p>
-                      <ul class="alternatives">
-                        ${status.alternatives.map(
-                          ({ name, description, mdn_url }) =>
-                            html`<li>
-                              <a
-                                href=${mdn_url.replace(
-                                  "/docs",
-                                  `/${context.locale}/docs`,
-                                )}
-                                title=${description}
-                                >${name}</a
-                              >
-                            </li>`,
-                        )}
-                      </ul>`
-                  : nothing}`
+            ? removalDate
+              ? html`<p>
+                  ${context.l10n`This feature is pending removal from browsers. Using it now may lead to broken functionality in future updates.`}
+                  ${unsafeHTML(
+                    status.feature.discouraged?.reason_html || nothing,
+                  )}
+                  ${renderAlternatives(
+                    context.l10n`Use the following features instead:`,
+                    status.alternatives,
+                  )}
+                </p>`
+              : html`<p>
+                    ${context.l10n`Avoid using this feature in new projects.`}
+                    ${unsafeHTML(
+                      status.feature.discouraged?.reason_html || nothing,
+                    )}
+                    ${context.l10n`This feature may be a candidate for removal from web standards or browsers.`}
+                  </p>
+                  ${renderAlternatives(
+                    context.l10n`Consider using the following features instead:`,
+                    status.alternatives,
+                  )}`
             : html`<p>${context.l10n("baseline-not-extra")}</p>`}
         <ul>
           <li>