diff --git a/web/app/workflows/page.tsx b/web/app/workflows/page.tsx
new file mode 100644
index 0000000..d93d55a
--- /dev/null
+++ b/web/app/workflows/page.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { api, Workflow } from "@/lib/api";
+import { Button, Card } from "@/components/ui";
+import { Table, Thead, Tbody, Tr, Th, Td } from "@/components/ui";
+
+export default function WorkflowsPage() {
+  const qc = useQueryClient();
+  const router = useRouter();
+  const [error, setError] = useState<string | null>(null);
+
+  const { data: workflows, isLoading, error: loadError } = useQuery({
+    queryKey: ["workflows"],
+    queryFn: api.listWorkflows,
+  });
+
+  const { mutate: create, isPending } = useMutation({
+    mutationFn: () => api.createWorkflow({ name: "Untitled workflow", target_server_ids: [], steps: [] }),
+    onSuccess: (workflow) => {
+      qc.invalidateQueries({ queryKey: ["workflows"] });
+      router.push(`/workflows/${workflow.workflow_id}`);
+    },
+    onError: (err) => setError((err as Error).message),
+  });
+
+  return (
+    <div className="p-8">
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-text-primary">Workflows</h1>
+          <p className="mt-1 text-sm text-text-secondary">
+            {workflows?.length ?? 0} workflow{workflows?.length !== 1 ? "s" : ""} · run reusable steps across servers
+          </p>
+        </div>
+        <Button variant="primary" loading={isPending} onClick={() => create()}>
+          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+          </svg>
+          New Workflow
+        </Button>
+      </div>
+
+      {error && (
+        <div className="mb-4 rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-sm text-danger">
+          {error}
+        </div>
+      )}
+
+      <Card padding={false}>
+        {isLoading ? (
+          <div className="flex items-center justify-center py-20">
+            <div className="h-8 w-8 animate-spin rounded-full border-2 border-border border-t-accent" />
+          </div>
+        ) : loadError ? (
+          <div className="py-20 text-center text-danger">Failed to load workflows. Is the backend running?</div>
+        ) : workflows && workflows.length > 0 ? (
+          <Table>
+            <Thead>
+              <Tr>
+                <Th>Name</Th>
+                <Th>Targets</Th>
+                <Th>Steps</Th>
+                <Th />
+              </Tr>
+            </Thead>
+            <Tbody>
+              {workflows.map((w: Workflow) => (
+                <Tr key={w.workflow_id}>
+                  <Td>
+                    <span className="font-medium text-text-primary">{w.name}</span>
+                  </Td>
+                  <Td>
+                    <span className="text-text-secondary">
+                      {w.target_server_ids.length} server{w.target_server_ids.length !== 1 ? "s" : ""}
+                    </span>
+                  </Td>
+                  <Td>
+                    <span className="text-text-secondary">{w.steps.length}</span>
+                  </Td>
+                  <Td>
+                    <Link href={`/workflows/${w.workflow_id}`}>
+                      <Button variant="ghost" size="sm">Open →</Button>
+                    </Link>
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        ) : (
+          <div className="py-20 text-center">
+            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-surface-2">
+              <svg className="h-6 w-6 text-text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
+            </div>
+            <p className="text-text-secondary">No workflows yet.</p>
+            <Button variant="primary" size="sm" className="mt-4" loading={isPending} onClick={() => create()}>
+              Create your first workflow
+            </Button>
+          </div>
+        )}
+      </Card>
+    </div>
+  );
+}
diff --git a/web/components/Sidebar.tsx b/web/components/Sidebar.tsx
index ed9ade6..387bf2d 100644
--- a/web/components/Sidebar.tsx
+++ b/web/components/Sidebar.tsx
@@ -35,6 +35,14 @@ function SecretIcon() {
   );
 }
 
+function WorkflowIcon() {
+  return (
+    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M9 3.75H6.912a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.012 1.244h3.22a2.25 2.25 0 002.012-1.244l.256-.512a2.25 2.25 0 012.012-1.244h3.86M12 3v8.25m0 0l-3-3m3 3l3-3" />
+    </svg>
+  );
+}
+
 function AuditIcon() {
   return (
     <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
@@ -56,6 +64,7 @@ const navItems: NavItem[] = [
   { href: "/servers", label: "Servers", icon: <ServerIcon /> },
   { href: "/keys", label: "SSH Keys", icon: <KeyIcon /> },
   { href: "/secrets", label: "Secrets", icon: <SecretIcon /> },
+  { href: "/workflows", label: "Workflows", icon: <WorkflowIcon /> },
   { href: "/audit", label: "Audit Log", icon: <AuditIcon /> },
   { href: "/settings", label: "Settings", icon: <SettingsIcon /> },
 ];