diff --git a/web/src/demo_organizations_ui.ts b/web/src/demo_organizations_ui.ts
index f6d73bd6ab..d5dcdf0bfd 100644
--- a/web/src/demo_organizations_ui.ts
+++ b/web/src/demo_organizations_ui.ts
@@ -3,12 +3,13 @@ import assert from "minimalistic-assert";
 import {z} from "zod";
 
 import render_convert_demo_organization_form from "../templates/settings/convert_demo_organization_form.hbs";
-import render_demo_organization_warning from "../templates/settings/demo_organization_warning.hbs";
+import render_demo_organization_warning_container from "../templates/settings/demo_organization_warning.hbs";
 
+import * as banners from "./banners.ts";
+import type {ActionButton} from "./buttons.ts";
 import * as channel from "./channel.ts";
 import * as dialog_widget from "./dialog_widget.ts";
 import {$t} from "./i18n.ts";
-import * as keydown_util from "./keydown_util.ts";
 import * as settings_config from "./settings_config.ts";
 import * as settings_data from "./settings_data.ts";
 import * as settings_org from "./settings_org.ts";
@@ -26,13 +27,46 @@ export function get_demo_organization_deadline_days_remaining(): number {
 }
 
 export function insert_demo_organization_warning(): void {
-    const days_remaining = get_demo_organization_deadline_days_remaining();
-    const rendered_demo_organization_warning = render_demo_organization_warning({
-        is_demo_organization: realm.demo_organization_scheduled_deletion_date,
-        is_owner: current_user.is_owner,
-        days_remaining,
+    const demo_organization_warning_container = render_demo_organization_warning_container({
+        is_demo_organization: true,
     });
-    $(".organization-box").find(".settings-section").prepend($(rendered_demo_organization_warning));
+    $(".organization-box")
+        .find(".settings-section")
+        .prepend($(demo_organization_warning_container));
+    const days_remaining = get_demo_organization_deadline_days_remaining();
+    let buttons: ActionButton[] = [
+        {
+            attention: "borderless",
+            label: $t({defaultMessage: "Learn more"}),
+            custom_classes: "demo-organizations-help",
+        },
+    ];
+    if (current_user.is_owner) {
+        buttons = [
+            ...buttons,
+            {
+                attention: "quiet",
+                label: $t({defaultMessage: "Convert"}),
+                custom_classes: "convert-demo-organization",
+            },
+        ];
+    }
+    const demo_organization_warning_banner: banners.Banner = {
+        intent: days_remaining <= 7 ? "danger" : "info",
+        label: $t(
+            {
+                defaultMessage:
+                    "This demo organization will be automatically deleted in {days_remaining} days, unless it's converted into a permanent organization.",
+            },
+            {
+                days_remaining,
+            },
+        ),
+        buttons,
+        close_button: false,
+        custom_classes: "organization-settings-banner",
+    };
+    banners.append(demo_organization_warning_banner, $(".demo-organization-warning"));
 }
 
 export function do_convert_demo_organization(): void {
@@ -108,21 +142,13 @@ export function do_convert_demo_organization(): void {
 }
 
 export function handle_demo_organization_conversion(): void {
-    $(".convert-demo-organization-button").on("click", (e) => {
+    $(".demo-organization-warning").on("click", ".convert-demo-organization", (e) => {
         e.stopPropagation();
         e.preventDefault();
         do_convert_demo_organization();
     });
 
-    // Treat Enter with convert demo organization link as a click.
-    $(".demo-organization-warning").on(
-        "keyup",
-        ".convert-demo-organization-button[role=button]",
-        function (e) {
-            e.stopPropagation();
-            if (keydown_util.is_enter_event(e)) {
-                $(this).trigger("click");
-            }
-        },
-    );
+    $(".demo-organization-warning").on("click", ".demo-organizations-help", () => {
+        window.open("https://zulip.com/help/demo-organizations", "_blank", "noopener,noreferrer");
+    });
 }
diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index 0d1a5c53d7..b705f4dfba 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -541,30 +541,7 @@ input.settings_text_input {
 }
 
 .demo-organization-warning {
-    position: relative;
-    display: block;
-    background-color: var(
-        --color-background-settings-demo-organization-warning
-    );
-    border: 1px solid var(--color-border-settings-demo-organization-warning);
-    border-radius: 4px;
-    padding: 10px;
     margin: 10px 0;
-    font-size: 1rem;
-    line-height: 1.5;
-    color: var(--color-text-settings-demo-organization-warning);
-
-    a {
-        text-decoration: none;
-    }
-
-    .convert-demo-organization-button {
-        &:focus {
-            outline: 1px solid
-                var(--color-focus-outline-settings-convert-demo-organization);
-            outline-offset: 0;
-        }
-    }
 }
 
 .user_status_icon_wrapper {
diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index b18c018952..303a567c89 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -1420,24 +1420,6 @@
         hsl(200deg 79% 66%)
     );
 
-    /* Demo Organization colors */
-    --color-text-settings-demo-organization-warning: light-dark(
-        hsl(4deg 58% 33%),
-        hsl(3deg 73% 80%)
-    );
-    --color-background-settings-demo-organization-warning: light-dark(
-        hsl(4deg 35% 90%),
-        hsl(0deg 60% 19%)
-    );
-    --color-border-settings-demo-organization-warning: light-dark(
-        hsl(3deg 57% 33% / 40%),
-        hsl(3deg 73% 74% / 40%)
-    );
-    --color-focus-outline-settings-convert-demo-organization: light-dark(
-        hsl(200deg 100% 25%),
-        hsl(200deg 79% 66%)
-    );
-
     /* Widgets colors */
     --color-border-dropdown-widget-button: light-dark(
         hsl(0deg 0% 80%),
diff --git a/web/templates/settings/demo_organization_warning.hbs b/web/templates/settings/demo_organization_warning.hbs
index 7a550431da..1eb05db402 100644
--- a/web/templates/settings/demo_organization_warning.hbs
+++ b/web/templates/settings/demo_organization_warning.hbs
@@ -1,15 +1,3 @@
 {{#if is_demo_organization }}
-<div class="demo-organization-warning">
-    {{#if is_owner }}
-    {{#tr}}
-        This demo organization will be automatically deleted in {days_remaining} days, unless it's <z-link>converted into a permanent organization</z-link>.
-        {{#*inline "z-link"}}<a class="convert-demo-organization-button" role="button" tabindex=0>{{> @partial-block}}</a>{{/inline}}
-    {{/tr}}
-    {{else}}
-    {{#tr}}
-        This demo organization will be automatically deleted in {days_remaining} days, unless it's <z-link>converted into a permanent organization</z-link>.
-        {{#*inline "z-link"}}<a href="/help/demo-organizations" target="_blank" rel="noopener noreferrer">{{> @partial-block }}</a>{{/inline}}
-    {{/tr}}
-    {{/if}}
-</div>
+<div class="demo-organization-warning banner-wrapper"></div>
 {{/if}}