diff --git a/webui/src/web-components/demo/sketch-container-status.demo.ts b/webui/src/web-components/demo/sketch-container-status.demo.ts
new file mode 100644
index 0000000..20d6a47
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-container-status.demo.ts
@@ -0,0 +1,147 @@
+/**
+ * Demo module for sketch-container-status component
+ */
+
+import { DemoModule } from "./demo-framework/types";
+import {
+  demoUtils,
+  sampleContainerState,
+  lightUsageState,
+  heavyUsageState,
+} from "./demo-fixtures/index";
+
+const demo: DemoModule = {
+  title: "Container Status Demo",
+  description: "Display container status information with usage statistics",
+  imports: ["../sketch-container-status"],
+  styles: ["/dist/tailwind.css"],
+
+  setup: async (container: HTMLElement) => {
+    // Create demo sections
+    const basicSection = demoUtils.createDemoSection(
+      "Basic Container Status",
+      "Shows current container state with usage information",
+    );
+
+    const variationsSection = demoUtils.createDemoSection(
+      "Usage Variations",
+      "Different usage levels and states",
+    );
+
+    // Basic status component
+    const basicStatus = document.createElement(
+      "sketch-container-status",
+    ) as any;
+    basicStatus.id = "basic-status";
+    basicStatus.state = sampleContainerState;
+
+    // Light usage status
+    const lightStatus = document.createElement(
+      "sketch-container-status",
+    ) as any;
+    lightStatus.id = "light-status";
+    lightStatus.state = lightUsageState;
+
+    const lightLabel = document.createElement("h4");
+    lightLabel.textContent = "Light Usage";
+    lightLabel.style.cssText = "margin: 20px 0 10px 0; color: #24292f;";
+
+    // Heavy usage status
+    const heavyStatus = document.createElement(
+      "sketch-container-status",
+    ) as any;
+    heavyStatus.id = "heavy-status";
+    heavyStatus.state = heavyUsageState;
+
+    const heavyLabel = document.createElement("h4");
+    heavyLabel.textContent = "Heavy Usage";
+    heavyLabel.style.cssText = "margin: 20px 0 10px 0; color: #24292f;";
+
+    // Control buttons for interaction
+    const controlsDiv = document.createElement("div");
+    controlsDiv.style.cssText = "margin-top: 20px;";
+
+    const updateBasicButton = demoUtils.createButton(
+      "Update Basic Status",
+      () => {
+        const updatedState = {
+          ...sampleContainerState,
+          message_count: sampleContainerState.message_count + 1,
+          total_usage: {
+            ...sampleContainerState.total_usage!,
+            messages: sampleContainerState.total_usage!.messages + 1,
+            total_cost_usd: Number(
+              (sampleContainerState.total_usage!.total_cost_usd + 0.05).toFixed(
+                2,
+              ),
+            ),
+          },
+        };
+        basicStatus.state = updatedState;
+      },
+    );
+
+    const toggleSSHButton = demoUtils.createButton("Toggle SSH Status", () => {
+      const currentState = basicStatus.state;
+      basicStatus.state = {
+        ...currentState,
+        ssh_available: !currentState.ssh_available,
+        ssh_error: currentState.ssh_available ? "Connection failed" : undefined,
+      };
+    });
+
+    const resetButton = demoUtils.createButton("Reset to Defaults", () => {
+      basicStatus.state = sampleContainerState;
+      lightStatus.state = lightUsageState;
+      heavyStatus.state = heavyUsageState;
+    });
+
+    controlsDiv.appendChild(updateBasicButton);
+    controlsDiv.appendChild(toggleSSHButton);
+    controlsDiv.appendChild(resetButton);
+
+    // Assemble the demo
+    basicSection.appendChild(basicStatus);
+    basicSection.appendChild(controlsDiv);
+
+    variationsSection.appendChild(lightLabel);
+    variationsSection.appendChild(lightStatus);
+    variationsSection.appendChild(heavyLabel);
+    variationsSection.appendChild(heavyStatus);
+
+    container.appendChild(basicSection);
+    container.appendChild(variationsSection);
+
+    // Add some real-time updates
+    const updateInterval = setInterval(() => {
+      const states = [basicStatus, lightStatus, heavyStatus];
+      states.forEach((status) => {
+        if (status.state) {
+          const updatedState = {
+            ...status.state,
+            message_count:
+              status.state.message_count + Math.floor(Math.random() * 2),
+          };
+          if (Math.random() > 0.7) {
+            // 30% chance to update
+            status.state = updatedState;
+          }
+        }
+      });
+    }, 3000);
+
+    // Store interval for cleanup
+    (container as any).demoInterval = updateInterval;
+  },
+
+  cleanup: async () => {
+    // Clear any intervals
+    const container = document.getElementById("demo-container");
+    if (container && (container as any).demoInterval) {
+      clearInterval((container as any).demoInterval);
+      delete (container as any).demoInterval;
+    }
+  },
+};
+
+export default demo;