diff --git a/webui/src/web-components/demo/mock-git-data-service.ts b/webui/src/web-components/demo/mock-git-data-service.ts
index 70bf26b..92fae9e 100644
--- a/webui/src/web-components/demo/mock-git-data-service.ts
+++ b/webui/src/web-components/demo/mock-git-data-service.ts
@@ -10,6 +10,8 @@
 export class MockGitDataService implements GitDataService {
   constructor() {
     console.log("MockGitDataService instance created");
+    // Setup mock push endpoints when service is created
+    setupMockPushEndpoints();
   }
 
   // Mock commit history
@@ -573,3 +575,70 @@
     ];
   }
 }
+
+// Mock HTTP endpoints for push demo
+export function setupMockPushEndpoints() {
+  // Mock the git/pushinfo endpoint
+  const originalFetch = window.fetch;
+
+  window.fetch = async (url: RequestInfo | URL, init?: RequestInit) => {
+    const urlString = typeof url === "string" ? url : url.toString();
+
+    // Mock pushinfo endpoint
+    if (urlString.includes("/git/pushinfo")) {
+      await new Promise((resolve) => setTimeout(resolve, 500)); // Simulate network delay
+
+      return new Response(
+        JSON.stringify({
+          hash: "abc123456789",
+          subject: "Implement new file picker UI",
+          remotes: [
+            {
+              name: "origin",
+              url: "https://github.com/boldsoftware/bold.git",
+              display_name: "boldsoftware/bold",
+              is_github: true,
+            },
+            {
+              name: "upstream",
+              url: "https://github.com/anotheruser/bold.git",
+              display_name: "anotheruser/bold",
+              is_github: true,
+            },
+          ],
+        }),
+        {
+          status: 200,
+          headers: { "Content-Type": "application/json" },
+        },
+      );
+    }
+
+    // Mock push endpoint
+    if (urlString.includes("/git/push")) {
+      await new Promise((resolve) => setTimeout(resolve, 1500)); // Simulate push delay
+
+      const body = init?.body ? JSON.parse(init.body as string) : {};
+      const isDryRun = body.dry_run || false;
+
+      const mockOutput = isDryRun
+        ? `To https://github.com/boldsoftware/bold.git\n   abc1234..def5678  ${body.branch || "main"} -> ${body.branch || "main"} (dry-run)`
+        : `To https://github.com/boldsoftware/bold.git\n   abc1234..def5678  ${body.branch || "main"} -> ${body.branch || "main"}\n\nCreate a pull request for '${body.branch || "main"}' on GitHub by visiting:\n  https://github.com/boldsoftware/bold/pull/new/${body.branch || "main"}`;
+
+      return new Response(
+        JSON.stringify({
+          success: true,
+          output: mockOutput,
+          dry_run: isDryRun,
+        }),
+        {
+          status: 200,
+          headers: { "Content-Type": "application/json" },
+        },
+      );
+    }
+
+    // Fall back to original fetch for other requests
+    return originalFetch(url, init);
+  };
+}
diff --git a/webui/src/web-components/demo/sketch-push-button.demo.html b/webui/src/web-components/demo/sketch-push-button.demo.html
new file mode 100644
index 0000000..41f750b
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-push-button.demo.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Push Button Demo</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        margin: 0;
+        padding: 20px;
+        background-color: #f9fafb;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="max-w-4xl mx-auto">
+      <h1 class="text-2xl font-bold mb-8 text-gray-800">
+        Push Button Component Demo
+      </h1>
+
+      <div class="bg-white rounded-lg shadow-lg p-6">
+        <sketch-push-button-demo></sketch-push-button-demo>
+      </div>
+    </div>
+
+    <script type="module" src="./sketch-push-button.demo.ts"></script>
+  </body>
+</html>
diff --git a/webui/src/web-components/demo/sketch-push-button.demo.ts b/webui/src/web-components/demo/sketch-push-button.demo.ts
new file mode 100644
index 0000000..9b54c01
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-push-button.demo.ts
@@ -0,0 +1,47 @@
+import { html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { MockGitDataService } from "./mock-git-data-service.js";
+import "../sketch-push-button.js";
+
+@customElement("sketch-push-button-demo")
+export class SketchPushButtonDemo extends LitElement {
+  @state()
+  private _gitDataService = new MockGitDataService();
+
+  protected createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    return html`
+      <div
+        class="p-4 bg-white rounded-lg shadow-sm border border-gray-200 max-w-md mx-auto"
+      >
+        <h2 class="text-lg font-semibold mb-4">Push Button Demo</h2>
+
+        <div class="mb-4">
+          <p class="text-sm text-gray-600 mb-2">
+            Test the push button component:
+          </p>
+          <sketch-push-button></sketch-push-button>
+        </div>
+
+        <div class="text-xs text-gray-500">
+          <p>Click the push button to test:</p>
+          <ul class="list-disc list-inside mt-1">
+            <li>Modal opens with git information</li>
+            <li>Input fields can be disabled during loading</li>
+            <li>Buttons show individual spinners</li>
+            <li>No full modal overwrite during operations</li>
+          </ul>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-push-button-demo": SketchPushButtonDemo;
+  }
+}