diff --git a/data/workflows.json b/data/workflows.json
new file mode 100644
index 00000000..6d87952f
--- /dev/null
+++ b/data/workflows.json
@@ -0,0 +1,69 @@
+[
+  {
+    "id": "wf-oncall-triage",
+    "name": "On-call Alert Triage",
+    "description": "Ingest alerts, score severity, and assign to the correct owner.",
+    "enabled": true,
+    "createdAt": "2026-02-01T08:00:00.000Z",
+    "updatedAt": "2026-02-01T08:00:00.000Z",
+    "steps": [
+      { "id": "step-1", "name": "Collect incoming alerts", "description": "Read PagerDuty and Slack alert feeds" },
+      { "id": "step-2", "name": "Classify severity", "description": "Apply severity rules and confidence score" },
+      { "id": "step-3", "name": "Route to service owner", "description": "Assign incident to the owning squad" },
+      { "id": "step-4", "name": "Post timeline update", "description": "Publish initial status update in incident channel" }
+    ]
+  },
+  {
+    "id": "wf-content-ops",
+    "name": "Content Ops Publishing",
+    "description": "Turn approved drafts into scheduled posts across channels.",
+    "enabled": true,
+    "createdAt": "2026-02-02T09:30:00.000Z",
+    "updatedAt": "2026-02-02T09:30:00.000Z",
+    "steps": [
+      { "id": "step-1", "name": "Pull approved drafts", "description": "Fetch approved content from Notion" },
+      { "id": "step-2", "name": "Generate social snippets", "description": "Create channel-specific excerpts" },
+      { "id": "step-3", "name": "Schedule posts", "description": "Queue publication in social scheduler" }
+    ]
+  },
+  {
+    "id": "wf-release-checklist",
+    "name": "Release Checklist Automation",
+    "description": "Automate pre-release quality checks and release notes generation.",
+    "enabled": false,
+    "createdAt": "2026-02-03T12:15:00.000Z",
+    "updatedAt": "2026-02-03T12:15:00.000Z",
+    "steps": [
+      { "id": "step-1", "name": "Run CI test suite", "description": "Execute unit and integration tests" },
+      { "id": "step-2", "name": "Summarize changes", "description": "Aggregate merged PR highlights" },
+      { "id": "step-3", "name": "Draft release notes", "description": "Generate release notes markdown" },
+      { "id": "step-4", "name": "Create release ticket", "description": "Open release ticket with checklist" },
+      { "id": "step-5", "name": "Notify launch channel", "description": "Share release candidate status" }
+    ]
+  },
+  {
+    "id": "wf-customer-escalation",
+    "name": "Customer Escalation Flow",
+    "description": "Detect high-risk tickets and escalate them to response leads.",
+    "enabled": true,
+    "createdAt": "2026-02-04T14:00:00.000Z",
+    "updatedAt": "2026-02-04T14:00:00.000Z",
+    "steps": [
+      { "id": "step-1", "name": "Watch support inbox", "description": "Poll incoming support tickets" },
+      { "id": "step-2", "name": "Identify risk signals", "description": "Flag churn and outage keywords" },
+      { "id": "step-3", "name": "Escalate to response lead", "description": "Assign lead and start SLA timer" }
+    ]
+  },
+  {
+    "id": "wf-data-quality",
+    "name": "Data Quality Guardrail",
+    "description": "Validate critical datasets before they are used for reporting.",
+    "enabled": false,
+    "createdAt": "2026-02-05T10:45:00.000Z",
+    "updatedAt": "2026-02-05T10:45:00.000Z",
+    "steps": [
+      { "id": "step-1", "name": "Load daily extract", "description": "Read warehouse export" },
+      { "id": "step-2", "name": "Run schema checks", "description": "Ensure required fields and types" }
+    ]
+  }
+]
diff --git a/src/app/api/agents/[handle]/route.ts b/src/app/api/agents/[handle]/route.ts
index 526596cb..efd69f8f 100644
--- a/src/app/api/agents/[handle]/route.ts
+++ b/src/app/api/agents/[handle]/route.ts
@@ -51,7 +51,7 @@ export async function GET(
   return NextResponse.json(
     {
       agent: mergedAgent,
-      totalActivity: activity.total,
+      totalActivity: activity.items.length,
     },
     {
       headers: {
diff --git a/src/app/api/bounties/[id]/route.ts b/src/app/api/bounties/[id]/route.ts
index b08be1b6..cfbf6e53 100644
--- a/src/app/api/bounties/[id]/route.ts
+++ b/src/app/api/bounties/[id]/route.ts
@@ -39,7 +39,7 @@ function validateTransitionBody(
   return {
     ok: true,
     value: {
-      action,
+      action: action as BountyAction,
       agentHandle,
       ...(notes ? { notes } : {}),
     },
diff --git a/src/app/api/bounties/route.ts b/src/app/api/bounties/route.ts
index 3aabbb94..8e509ef1 100644
--- a/src/app/api/bounties/route.ts
+++ b/src/app/api/bounties/route.ts
@@ -117,7 +117,7 @@ function validateTransitionBody(
     ok: true,
     value: {
       bountyId,
-      action,
+      action: action as BountyAction,
       agentHandle,
       ...(notes ? { notes } : {}),
     },
diff --git a/src/app/api/skills/[slug]/route.ts b/src/app/api/skills/[slug]/route.ts
index 34974de0..7389d5c3 100644
--- a/src/app/api/skills/[slug]/route.ts
+++ b/src/app/api/skills/[slug]/route.ts
@@ -45,7 +45,7 @@ export async function GET(
       ? reviews.reduce((sum, review) => sum + review.rating, 0) / reviewsCount
       : 0;
 
-  const allVersions = versionsData as SkillVersionEntry[];
+  const allVersions = versionsData as unknown as SkillVersionEntry[];
   const versions = allVersions.find((entry) => entry.slug === slug)?.versions ?? [];
 
   const compatibility =
diff --git a/src/app/api/workflows/[id]/route.ts b/src/app/api/workflows/[id]/route.ts
new file mode 100644
index 00000000..504cb7d4
--- /dev/null
+++ b/src/app/api/workflows/[id]/route.ts
@@ -0,0 +1,98 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import { normalizeSteps, readWorkflows, writeWorkflows } from "@/lib/server/workflowStore";
+
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { id } = await params;
+  const workflows = await readWorkflows();
+  const workflow = workflows.find((item) => item.id === id);
+
+  if (!workflow) {
+    return NextResponse.json({ error: "Workflow not found" }, { status: 404 });
+  }
+
+  return NextResponse.json({ workflow });
+}
+
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { id } = await params;
+
+  try {
+    const body = await request.json() as {
+      name?: unknown;
+      description?: unknown;
+      steps?: unknown;
+      enabled?: unknown;
+    };
+
+    const workflows = await readWorkflows();
+    const index = workflows.findIndex((item) => item.id === id);
+
+    if (index === -1) {
+      return NextResponse.json({ error: "Workflow not found" }, { status: 404 });
+    }
+
+    const current = workflows[index];
+    const now = new Date().toISOString();
+
+    const next = {
+      ...current,
+      updatedAt: now,
+    };
+
+    if (typeof body.name === "string") {
+      const trimmed = body.name.trim();
+      if (!trimmed) {
+        return NextResponse.json({ error: "name cannot be empty" }, { status: 400 });
+      }
+      next.name = trimmed;
+    }
+
+    if (typeof body.description === "string") {
+      next.description = body.description.trim();
+    }
+
+    if (body.steps !== undefined) {
+      const steps = normalizeSteps(body.steps);
+      if (steps.length === 0) {
+        return NextResponse.json({ error: "steps must be a non-empty array" }, { status: 400 });
+      }
+      next.steps = steps;
+    }
+
+    if (typeof body.enabled === "boolean") {
+      next.enabled = body.enabled;
+    }
+
+    workflows[index] = next;
+    await writeWorkflows(workflows);
+
+    return NextResponse.json({ workflow: next });
+  } catch {
+    return NextResponse.json({ error: "Invalid request body. Expected JSON." }, { status: 400 });
+  }
+}
+
+export async function DELETE(
+  _request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { id } = await params;
+
+  const workflows = await readWorkflows();
+  const nextWorkflows = workflows.filter((item) => item.id !== id);
+
+  if (nextWorkflows.length === workflows.length) {
+    return NextResponse.json({ error: "Workflow not found" }, { status: 404 });
+  }
+
+  await writeWorkflows(nextWorkflows);
+
+  return new NextResponse(null, { status: 204 });
+}
diff --git a/src/app/api/workflows/route.ts b/src/app/api/workflows/route.ts
new file mode 100644
index 00000000..b8339edd
--- /dev/null
+++ b/src/app/api/workflows/route.ts
@@ -0,0 +1,67 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import {
+  normalizeSteps,
+  readWorkflows,
+  writeWorkflows,
+  type WorkflowRecord,
+} from "@/lib/server/workflowStore";
+
+export async function GET(request: NextRequest) {
+  const search = request.nextUrl.searchParams.get("search")?.trim().toLowerCase() || "";
+
+  const workflows = await readWorkflows();
+  const filtered = !search
+    ? workflows
+    : workflows.filter((workflow) => {
+        return (
+          workflow.name.toLowerCase().includes(search)
+          || workflow.description.toLowerCase().includes(search)
+          || workflow.steps.some((step) => step.name.toLowerCase().includes(search))
+        );
+      });
+
+  return NextResponse.json({ workflows: filtered });
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json() as {
+      name?: unknown;
+      description?: unknown;
+      steps?: unknown;
+    };
+
+    const name = typeof body.name === "string" ? body.name.trim() : "";
+    const description = typeof body.description === "string" ? body.description.trim() : "";
+    const steps = normalizeSteps(body.steps);
+
+    if (!name) {
+      return NextResponse.json({ error: "name is required" }, { status: 400 });
+    }
+
+    if (steps.length === 0) {
+      return NextResponse.json({ error: "steps must be a non-empty array" }, { status: 400 });
+    }
+
+    const workflows = await readWorkflows();
+    const now = new Date().toISOString();
+
+    const workflow: WorkflowRecord = {
+      id: `wf-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`,
+      name,
+      description,
+      steps,
+      enabled: true,
+      createdAt: now,
+      updatedAt: now,
+    };
+
+    workflows.unshift(workflow);
+    await writeWorkflows(workflows);
+
+    return NextResponse.json({ workflow }, { status: 201 });
+  } catch {
+    return NextResponse.json({ error: "Invalid request body. Expected JSON." }, { status: 400 });
+  }
+}
diff --git a/src/app/collections/[slug]/page.tsx b/src/app/collections/[slug]/page.tsx
index c66c66f3..c009dde8 100644
--- a/src/app/collections/[slug]/page.tsx
+++ b/src/app/collections/[slug]/page.tsx
@@ -139,7 +139,7 @@ export default async function CollectionRoute(props: {
                 <div className="min-w-0">
                   <div className="text-white font-semibold truncate flex items-center gap-2">
                     <span className="truncate">🧰 {s.name}</span>
-                    <VerifiedSkillBadge info={s.verification ?? null} mode="icon" />
+                    <VerifiedSkillBadge info={(s.verification as { slug: string } | null) ? (s.verification as import("@/lib/verification").VerifiedSkillInfo) : null} mode="icon" />
                   </div>
                   <div className="text-xs text-slate-400 mt-1">by {s.author}</div>
                   <div className="text-sm text-slate-300/80 mt-2 line-clamp-2">{s.description}</div>
diff --git a/src/app/governance/page.tsx b/src/app/governance/page.tsx
index 4ebbf607..c55779b2 100644
--- a/src/app/governance/page.tsx
+++ b/src/app/governance/page.tsx
@@ -39,7 +39,7 @@ export const metadata: Metadata = {
 };
 
 export default function GovernancePage() {
-  const data = governanceFramework as FrameworkData;
+  const data = governanceFramework as unknown as FrameworkData;
 
   return (
     <div className="min-h-screen bg-[#0a0a0a]">
diff --git a/src/app/mcp/[slug]/mcp-detail-client.tsx b/src/app/mcp/[slug]/mcp-detail-client.tsx
index 30578c94..54af9c0c 100644
--- a/src/app/mcp/[slug]/mcp-detail-client.tsx
+++ b/src/app/mcp/[slug]/mcp-detail-client.tsx
@@ -96,11 +96,13 @@ export function McpDetailClient({ slug, initialServer }: { slug: string; initial
       const response = await fetch(`/api/mcp/${encodeURIComponent(slug)}/install`, { method: "POST" });
       const json = (await response.json()) as { installs?: number };
 
-      if (typeof json.installs === "number") {
+      const installCount = json.installs;
+
+      if (typeof installCount === "number") {
         setPayload((prev) => ({
           server: prev?.server ?? activeServer,
           health: prev?.health ?? health ?? UNKNOWN_HEALTH,
-          installs: json.installs,
+          installs: installCount,
         }));
       }
 
diff --git a/src/app/setup/SetupWizardClient.tsx b/src/app/setup/SetupWizardClient.tsx
index 40f0bc04..20851202 100644
--- a/src/app/setup/SetupWizardClient.tsx
+++ b/src/app/setup/SetupWizardClient.tsx
@@ -91,6 +91,10 @@ function HostDetectionStep({
   onHostChange: (host: HostId) => void;
 }) {
   const detectedHint = useMemo(() => {
+    if (typeof window === "undefined" || typeof navigator === "undefined") {
+      return "Auto-detect hint: host detection runs after the page loads.";
+    }
+
     const userAgent = navigator.userAgent.toLowerCase();
     const platform = navigator.platform.toLowerCase();
 
@@ -370,7 +374,7 @@ function VerificationStep({ report }: { report: VerificationReport }) {
 }
 
 function copyText(text: string) {
-  if (navigator?.clipboard?.writeText) {
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
     void navigator.clipboard.writeText(text);
   }
 }
diff --git a/src/app/workflows/[id]/page.tsx b/src/app/workflows/[id]/page.tsx
index 8cab2ea5..d09588cc 100644
--- a/src/app/workflows/[id]/page.tsx
+++ b/src/app/workflows/[id]/page.tsx
@@ -1,330 +1,210 @@
-import { notFound } from "next/navigation";
+/* eslint-disable react/no-unescaped-entities */
+"use client";
+
 import Link from "next/link";
-import { getWorkflows, getWorkflowById, getSkills } from "@/lib/data";
+import { useEffect, useMemo, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { ArrowLeft, Loader2, Save, Trash2 } from "lucide-react";
+
 import { Badge } from "@/components/ui/badge";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-import { Breadcrumbs } from "@/components/breadcrumbs";
-import { ArrowRight, Check, Clock, Layers, Zap, ExternalLink } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { parseStepsFromText, stepsToText, type Workflow } from "@/lib/workflows";
+
+export default function WorkflowDetailPage() {
+  const params = useParams<{ id: string }>();
+  const router = useRouter();
+
+  const id = params?.id || "";
+
+  const [workflow, setWorkflow] = useState<Workflow | null>(null);
+  const [stepsText, setStepsText] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const run = async () => {
+      if (!id) return;
+
+      setLoading(true);
+      setError(null);
+
+      try {
+        const response = await fetch(`/api/workflows/${id}`, { cache: "no-store" });
+        if (!response.ok) {
+          throw new Error("Workflow not found");
+        }
+
+        const payload = await response.json() as { workflow: Workflow };
+        setWorkflow(payload.workflow);
+        setStepsText(stepsToText(payload.workflow.steps));
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to load workflow");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    void run();
+  }, [id]);
+
+  const stepCount = useMemo(
+    () => parseStepsFromText(stepsText).length,
+    [stepsText],
+  );
 
-export function generateStaticParams() {
-  return getWorkflows().map((workflow) => ({ id: workflow.id }));
-}
-
-export function generateMetadata({ params }: { params: { id: string } }) {
-  const workflow = getWorkflowById(params.id);
-  if (!workflow) return { title: "Workflow Not Found" };
-
-  return {
-    title: `${workflow.name} Workflow — forAgents.dev`,
-    description: workflow.description,
-    openGraph: {
-      title: `${workflow.name} Workflow — forAgents.dev`,
-      description: workflow.description,
-      url: `https://foragents.dev/workflows/${workflow.id}`,
-      siteName: "forAgents.dev",
-      type: "website",
-    },
-    twitter: {
-      card: "summary_large_image",
-      title: `${workflow.name} Workflow — forAgents.dev`,
-      description: workflow.description,
-    },
+  const save = async () => {
+    if (!workflow) return;
+
+    setSaving(true);
+    setError(null);
+
+    try {
+      const response = await fetch(`/api/workflows/${id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: workflow.name,
+          description: workflow.description,
+          steps: parseStepsFromText(stepsText),
+          enabled: workflow.enabled,
+        }),
+      });
+
+      const payload = await response.json().catch(() => ({})) as { error?: string; workflow?: Workflow };
+
+      if (!response.ok) {
+        throw new Error(payload.error || "Failed to save workflow");
+      }
+
+      if (payload.workflow) {
+        setWorkflow(payload.workflow);
+        setStepsText(stepsToText(payload.workflow.steps));
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to save workflow");
+    } finally {
+      setSaving(false);
+    }
   };
-}
-
-const difficultyColors = {
-  beginner: "bg-green-500/10 text-green-400 border-green-500/20",
-  intermediate: "bg-yellow-500/10 text-yellow-400 border-yellow-500/20",
-  advanced: "bg-red-500/10 text-red-400 border-red-500/20",
-};
-
-const categoryEmoji: Record<string, string> = {
-  development: "💻",
-  marketing: "📢",
-  analytics: "📊",
-  devops: "🚀",
-  security: "🔒",
-  hr: "👥",
-};
-
-export default async function WorkflowDetailPage({
-  params,
-}: {
-  params: Promise<{ id: string }>;
-}) {
-  const { id } = await params;
-  const workflow = getWorkflowById(id);
 
-  if (!workflow) notFound();
-
-  const allSkills = getSkills();
-  const skillMap = new Map(allSkills.map((s) => [s.slug, s]));
-
-  // Map required skills to actual skill objects
-  const requiredSkillObjects = workflow.requiredSkills
-    .map((slug) => skillMap.get(slug))
-    .filter((s) => s !== undefined);
+  const remove = async () => {
+    setDeleting(true);
+    setError(null);
+
+    try {
+      const response = await fetch(`/api/workflows/${id}`, { method: "DELETE" });
+      if (!response.ok) {
+        throw new Error("Failed to delete workflow");
+      }
+      router.push("/workflows");
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete workflow");
+      setDeleting(false);
+    }
+  };
 
-  const automatedStepsCount = workflow.steps.filter((s) => s.automated).length;
-  const automationPercentage = Math.round(
-    (automatedStepsCount / workflow.steps.length) * 100
-  );
+  if (loading) {
+    return <div className="max-w-4xl mx-auto px-4 py-16 text-muted-foreground">Loading workflow...</div>;
+  }
+
+  if (!workflow) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 py-16 space-y-4">
+        <p className="text-red-300">{error || "Workflow not found."}</p>
+        <Button asChild variant="outline">
+          <Link href="/workflows">Back to workflows</Link>
+        </Button>
+      </div>
+    );
+  }
 
   return (
-    <div className="min-h-screen">
-      {/* Breadcrumbs */}
-      <div className="max-w-5xl mx-auto px-4 py-6">
-        <Breadcrumbs
-          items={[
-            { label: "Workflows", href: "/workflows" },
-            { label: workflow.name },
-          ]}
-        />
+    <div className="max-w-4xl mx-auto px-4 py-10 space-y-6">
+      <div className="flex items-center justify-between gap-3">
+        <Button asChild variant="ghost" size="sm">
+          <Link href="/workflows">
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            Back
+          </Link>
+        </Button>
+
+        <Badge
+          variant="outline"
+          className={workflow.enabled
+            ? "bg-green-500/10 text-green-300 border-green-500/20"
+            : "bg-white/10 text-white/70 border-white/20"}
+        >
+          {workflow.enabled ? "Enabled" : "Disabled"}
+        </Badge>
       </div>
 
-      {/* Header */}
-      <section className="relative overflow-hidden">
-        <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[700px] max-h-[700px] bg-purple-500/5 rounded-full blur-[120px]" />
-        </div>
-
-        <div className="relative max-w-5xl mx-auto px-4 py-12">
-          <div className="flex items-start gap-3 mb-4">
-            <span className="text-5xl">{categoryEmoji[workflow.category] || "📦"}</span>
-            <div className="flex-1">
-              <div className="flex items-center gap-3 mb-2">
-                <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-[#F8FAFC]">
-                  {workflow.name}
-                </h1>
-                <Badge
-                  variant="outline"
-                  className={difficultyColors[workflow.difficulty]}
-                >
-                  {workflow.difficulty}
-                </Badge>
-              </div>
-              <p className="text-lg text-muted-foreground mb-6">{workflow.description}</p>
-
-              {/* Meta */}
-              <div className="flex flex-wrap gap-4 text-sm text-muted-foreground">
-                <div className="flex items-center gap-2">
-                  <Clock className="w-4 h-4 text-cyan" />
-                  <span>{workflow.estimatedTime}</span>
-                </div>
-                <span className="text-white/20">•</span>
-                <div className="flex items-center gap-2">
-                  <Layers className="w-4 h-4 text-purple-400" />
-                  <span>{workflow.steps.length} steps</span>
-                </div>
-                <span className="text-white/20">•</span>
-                <div className="flex items-center gap-2">
-                  <Zap className="w-4 h-4 text-green-400" />
-                  <span>{automationPercentage}% automated</span>
-                </div>
-                <span className="text-white/20">•</span>
-                <div className="flex items-center gap-2">
-                  <span className="font-medium">Category:</span>
-                  <Badge variant="outline" className="bg-white/5 border-white/10">
-                    {workflow.category}
-                  </Badge>
-                </div>
-              </div>
-
-              {/* Tags */}
-              <div className="flex flex-wrap gap-2 mt-4">
-                {workflow.tags.map((tag) => (
-                  <Badge
-                    key={tag}
-                    variant="outline"
-                    className="bg-white/5 text-white/60 border-white/10"
-                  >
-                    {tag}
-                  </Badge>
-                ))}
-              </div>
-            </div>
+      <Card className="bg-card/30 border-white/10">
+        <CardHeader>
+          <CardTitle>Edit workflow</CardTitle>
+          <CardDescription>Make changes and save them to the workflow API.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div>
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              value={workflow.name}
+              onChange={(e) => setWorkflow({ ...workflow, name: e.target.value })}
+            />
           </div>
-        </div>
-      </section>
-
-      <Separator className="opacity-10" />
 
-      {/* Main Content */}
-      <section className="max-w-5xl mx-auto px-4 py-12">
-        <div className="grid gap-8 lg:grid-cols-[1fr,300px]">
-          {/* Left Column: Steps */}
-          <div className="space-y-6">
-            <div>
-              <h2 className="text-2xl font-bold mb-4">Workflow Steps</h2>
-              <p className="text-sm text-muted-foreground mb-6">
-                Follow these steps to implement the {workflow.name.toLowerCase()} workflow. 
-                {automatedStepsCount > 0 && (
-                  <> {automatedStepsCount} out of {workflow.steps.length} steps can be fully automated.</>
-                )}
-              </p>
-            </div>
+          <div>
+            <Label htmlFor="description">Description</Label>
+            <Textarea
+              id="description"
+              rows={3}
+              value={workflow.description}
+              onChange={(e) => setWorkflow({ ...workflow, description: e.target.value })}
+            />
+          </div>
 
-            <div className="space-y-4">
-              {workflow.steps.map((step, index) => (
-                <Card
-                  key={step.id}
-                  className="bg-card/50 border-white/5 hover:border-purple-400/20 transition-all"
-                >
-                  <CardHeader>
-                    <div className="flex items-start gap-4">
-                      <div className="flex items-center justify-center w-8 h-8 rounded-full bg-purple-500/10 text-purple-400 font-bold text-sm flex-shrink-0">
-                        {index + 1}
-                      </div>
-                      <div className="flex-1">
-                        <div className="flex items-center gap-2 mb-2">
-                          <CardTitle className="text-lg">{step.name}</CardTitle>
-                          {step.automated && (
-                            <Badge
-                              variant="outline"
-                              className="bg-green-500/10 text-green-400 border-green-500/20 text-xs"
-                            >
-                              <Check className="w-3 h-3 mr-1" />
-                              Auto
-                            </Badge>
-                          )}
-                        </div>
-                        <CardDescription className="text-sm">
-                          {step.description}
-                        </CardDescription>
-                      </div>
-                    </div>
-                  </CardHeader>
-                  {step.skills.length > 0 && (
-                    <CardContent>
-                      <div className="text-xs text-muted-foreground mb-2">
-                        Required skills:
-                      </div>
-                      <div className="flex flex-wrap gap-2">
-                        {step.skills.map((skillSlug) => {
-                          const skill = skillMap.get(skillSlug);
-                          return skill ? (
-                            <Link key={skillSlug} href={`/skills/${skillSlug}`}>
-                              <Badge
-                                variant="outline"
-                                className="bg-cyan/5 text-cyan border-cyan/20 hover:bg-cyan/10 transition-colors cursor-pointer"
-                              >
-                                {skill.name}
-                                <ExternalLink className="w-3 h-3 ml-1" />
-                              </Badge>
-                            </Link>
-                          ) : (
-                            <Badge
-                              key={skillSlug}
-                              variant="outline"
-                              className="bg-white/5 text-white/60 border-white/10"
-                            >
-                              {skillSlug}
-                            </Badge>
-                          );
-                        })}
-                      </div>
-                    </CardContent>
-                  )}
-                </Card>
-              ))}
-            </div>
+          <div>
+            <Label htmlFor="steps">Steps (one per line)</Label>
+            <Textarea
+              id="steps"
+              rows={7}
+              value={stepsText}
+              onChange={(e) => setStepsText(e.target.value)}
+            />
+            <p className="text-xs text-muted-foreground mt-1">{stepCount} steps</p>
+          </div>
 
-            {/* Flow Visualization */}
-            <div className="mt-8">
-              <h3 className="text-xl font-bold mb-4">Workflow Flow</h3>
-              <Card className="bg-card/30 border-white/5 p-6">
-                <div className="flex flex-col gap-2">
-                  {workflow.steps.map((step, index) => (
-                    <div key={step.id} className="flex items-center gap-3">
-                      <div className="flex items-center gap-2 flex-1">
-                        <div
-                          className={`w-3 h-3 rounded-full ${
-                            step.automated ? "bg-green-400" : "bg-yellow-400"
-                          }`}
-                        />
-                        <span className="text-sm font-medium">{step.name}</span>
-                      </div>
-                      {index < workflow.steps.length - 1 && (
-                        <ArrowRight className="w-4 h-4 text-white/30" />
-                      )}
-                    </div>
-                  ))}
-                </div>
-                <div className="mt-6 pt-4 border-t border-white/5 flex items-center gap-4 text-xs text-muted-foreground">
-                  <div className="flex items-center gap-2">
-                    <div className="w-3 h-3 rounded-full bg-green-400" />
-                    <span>Automated</span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <div className="w-3 h-3 rounded-full bg-yellow-400" />
-                    <span>Manual</span>
-                  </div>
-                </div>
-              </Card>
-            </div>
+          <div className="flex items-center gap-3">
+            <Switch
+              checked={workflow.enabled}
+              onCheckedChange={(value) => setWorkflow({ ...workflow, enabled: value })}
+              id="enabled"
+            />
+            <Label htmlFor="enabled">Enabled</Label>
           </div>
 
-          {/* Right Column: Required Skills */}
-          <div className="space-y-6">
-            <Card className="bg-card/30 border-white/5 sticky top-6">
-              <CardHeader>
-                <CardTitle className="text-lg">Required Skills</CardTitle>
-                <CardDescription className="text-xs">
-                  Install these skills to use this workflow
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-3">
-                  {requiredSkillObjects.length > 0 ? (
-                    requiredSkillObjects.map((skill) => (
-                      <Link
-                        key={skill.slug}
-                        href={`/skills/${skill.slug}`}
-                        className="block"
-                      >
-                        <div className="p-3 rounded-lg bg-white/5 hover:bg-white/10 border border-white/5 hover:border-cyan/20 transition-all group">
-                          <div className="font-medium text-sm group-hover:text-cyan transition-colors">
-                            {skill.name}
-                          </div>
-                          <div className="text-xs text-muted-foreground mt-1 line-clamp-2">
-                            {skill.description}
-                          </div>
-                          <div className="mt-2 flex items-center gap-1 text-xs text-cyan group-hover:underline">
-                            View skill
-                            <ExternalLink className="w-3 h-3" />
-                          </div>
-                        </div>
-                      </Link>
-                    ))
-                  ) : (
-                    <div className="space-y-2">
-                      {workflow.requiredSkills.map((slug) => (
-                        <div
-                          key={slug}
-                          className="p-3 rounded-lg bg-white/5 border border-white/5"
-                        >
-                          <div className="font-medium text-sm text-white/60">
-                            {slug}
-                          </div>
-                          <div className="text-xs text-muted-foreground mt-1">
-                            Skill not yet available
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </div>
-                <Separator className="my-4 opacity-10" />
-                <Button variant="outline" className="w-full" asChild>
-                  <Link href="/skills">Browse Skills Directory</Link>
-                </Button>
-              </CardContent>
-            </Card>
+          {error ? <p className="text-sm text-red-300">{error}</p> : null}
+
+          <div className="flex flex-wrap gap-2">
+            <Button onClick={() => void save()} disabled={saving || deleting}>
+              {saving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />}
+              Save changes
+            </Button>
+            <Button variant="destructive" onClick={() => void remove()} disabled={saving || deleting}>
+              {deleting ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Trash2 className="w-4 h-4 mr-2" />}
+              Delete workflow
+            </Button>
           </div>
-        </div>
-      </section>
+        </CardContent>
+      </Card>
     </div>
   );
 }
diff --git a/src/app/workflows/builder/page.tsx b/src/app/workflows/builder/page.tsx
index 34e1ea4d..46f6ab5d 100644
--- a/src/app/workflows/builder/page.tsx
+++ b/src/app/workflows/builder/page.tsx
@@ -1,511 +1,407 @@
+/* eslint-disable react/no-unescaped-entities */
 "use client";
 
-import { useState } from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+import { ArrowDown, ArrowUp, Loader2, Plus, Save, Trash2 } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
-import {
-  ArrowUp,
-  ArrowDown,
-  Trash2,
-  Download,
-  Upload,
-  Code2,
-  Workflow,
-  Play,
-  Zap,
-  GitBranch,
-  Filter,
-  Activity,
-  FileOutput,
-} from "lucide-react";
-import workflowTemplates from "@/data/workflow-templates.json";
-
-// Types
-type StepType = "trigger" | "transform" | "condition" | "action" | "output";
-
-type WorkflowStep = {
-  id: string;
-  name: string;
-  type: StepType;
-  description: string;
-  config: Record<string, unknown>;
-};
-
-type Workflow = {
-  id: string;
-  name: string;
-  description: string;
-  category: string;
-  steps: WorkflowStep[];
-};
-
-// Step type configuration
-const stepTypes: Record<StepType, { icon: typeof Play; color: string; description: string }> = {
-  trigger: { icon: Zap, color: "text-yellow-400", description: "Initiates the workflow" },
-  transform: { icon: GitBranch, color: "text-blue-400", description: "Transforms data" },
-  condition: { icon: Filter, color: "text-purple-400", description: "Conditional logic" },
-  action: { icon: Activity, color: "text-green-400", description: "Performs an action" },
-  output: { icon: FileOutput, color: "text-cyan-400", description: "Outputs results" },
-};
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { type Workflow, type WorkflowStep } from "@/lib/workflows";
+
+type WorkflowResponse = { workflows: Workflow[] };
+type SingleWorkflowResponse = { workflow: Workflow };
+
+function emptyStep(index: number): WorkflowStep {
+  return {
+    id: `step-${index + 1}`,
+    name: "",
+    description: "",
+  };
+}
+
+function createDraft(): Workflow {
+  const now = new Date().toISOString();
+  return {
+    id: "",
+    name: "",
+    description: "",
+    enabled: true,
+    steps: [emptyStep(0)],
+    createdAt: now,
+    updatedAt: now,
+  };
+}
 
 export default function WorkflowBuilderPage() {
-  const [workflow, setWorkflow] = useState<Workflow>(() => ({
-    id: `workflow-${crypto.randomUUID()}`,
-    name: "New Workflow",
-    description: "Describe your workflow",
-    category: "Custom",
-    steps: [],
-  }));
-  const [selectedStepIndex, setSelectedStepIndex] = useState<number | null>(null);
-  const [showTemplateDialog, setShowTemplateDialog] = useState(false);
-  const [previewTab, setPreviewTab] = useState("yaml");
-
-  // Load template
-  const loadTemplate = (template: Workflow) => {
-    setWorkflow({
-      ...template,
-      id: `workflow-${crypto.randomUUID()}`,
-    });
-    setShowTemplateDialog(false);
-    setSelectedStepIndex(null);
+  const [initialId, setInitialId] = useState<string | null>(null);
+  const [allWorkflows, setAllWorkflows] = useState<Workflow[]>([]);
+  const [selectedId, setSelectedId] = useState("");
+  const [draft, setDraft] = useState<Workflow>(createDraft());
+
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const value = new URLSearchParams(window.location.search).get("id");
+    setInitialId(value);
+  }, []);
+
+  const loadWorkflows = async () => {
+    const response = await fetch("/api/workflows", { cache: "no-store" });
+    if (!response.ok) {
+      throw new Error("Failed to load workflows");
+    }
+
+    const payload = await response.json() as WorkflowResponse;
+    setAllWorkflows(payload.workflows);
+    return payload.workflows;
   };
 
-  // Add new step
-  const addStep = (type: StepType) => {
-    const newStep: WorkflowStep = {
-      id: `step-${crypto.randomUUID()}`,
-      name: `New ${type} step`,
-      type,
-      description: "",
-      config: {},
+  const loadWorkflowById = async (id: string) => {
+    const response = await fetch(`/api/workflows/${id}`, { cache: "no-store" });
+    if (!response.ok) {
+      throw new Error("Failed to load selected workflow");
+    }
+
+    const payload = await response.json() as SingleWorkflowResponse;
+    setDraft(payload.workflow);
+  };
+
+  useEffect(() => {
+    const run = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const workflows = await loadWorkflows();
+        if (initialId) {
+          await loadWorkflowById(initialId);
+          setSelectedId(initialId);
+        } else if (workflows[0]) {
+          setSelectedId(workflows[0].id);
+          await loadWorkflowById(workflows[0].id);
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to load workflows");
+      } finally {
+        setLoading(false);
+      }
     };
-    setWorkflow({
-      ...workflow,
-      steps: [...workflow.steps, newStep],
+
+    void run();
+  }, [initialId]);
+
+  const setStep = (index: number, updates: Partial<WorkflowStep>) => {
+    setDraft((current) => {
+      const steps = [...current.steps];
+      steps[index] = { ...steps[index], ...updates };
+      return { ...current, steps };
     });
-    setSelectedStepIndex(workflow.steps.length);
   };
 
-  // Remove step
+  const addStep = () => {
+    setDraft((current) => ({
+      ...current,
+      steps: [...current.steps, emptyStep(current.steps.length)],
+    }));
+  };
+
   const removeStep = (index: number) => {
-    const newSteps = workflow.steps.filter((_, i) => i !== index);
-    setWorkflow({ ...workflow, steps: newSteps });
-    if (selectedStepIndex === index) {
-      setSelectedStepIndex(null);
-    } else if (selectedStepIndex !== null && selectedStepIndex > index) {
-      setSelectedStepIndex(selectedStepIndex - 1);
-    }
+    setDraft((current) => {
+      if (current.steps.length <= 1) return current;
+      return {
+        ...current,
+        steps: current.steps.filter((_, i) => i !== index),
+      };
+    });
   };
 
-  // Move step
   const moveStep = (index: number, direction: "up" | "down") => {
-    const newSteps = [...workflow.steps];
-    const targetIndex = direction === "up" ? index - 1 : index + 1;
-    if (targetIndex < 0 || targetIndex >= newSteps.length) return;
+    setDraft((current) => {
+      const next = [...current.steps];
+      const target = direction === "up" ? index - 1 : index + 1;
 
-    [newSteps[index], newSteps[targetIndex]] = [newSteps[targetIndex], newSteps[index]];
-    setWorkflow({ ...workflow, steps: newSteps });
-    setSelectedStepIndex(targetIndex);
-  };
+      if (target < 0 || target >= next.length) {
+        return current;
+      }
 
-  // Update step
-  const updateStep = (index: number, updates: Partial<WorkflowStep>) => {
-    const newSteps = [...workflow.steps];
-    newSteps[index] = { ...newSteps[index], ...updates };
-    setWorkflow({ ...workflow, steps: newSteps });
+      [next[index], next[target]] = [next[target], next[index]];
+      return { ...current, steps: next };
+    });
   };
 
-  // Generate YAML
-  const generateYAML = () => {
-    const yaml = `# ${workflow.name}
-# ${workflow.description}
-
-name: ${workflow.name}
-category: ${workflow.category}
-description: ${workflow.description}
-
-steps:
-${workflow.steps
-  .map(
-    (step) => `  - id: ${step.id}
-    name: ${step.name}
-    type: ${step.type}
-    description: ${step.description}
-    config:
-${Object.entries(step.config)
-  .map(([key, value]) => `      ${key}: ${typeof value === "string" ? `"${value}"` : value}`)
-  .join("\n")}`,
-  )
-  .join("\n")}
-`;
-    return yaml;
+  const resetForNew = () => {
+    setSelectedId("");
+    setDraft(createDraft());
+    setSuccess(null);
+    setError(null);
   };
 
-  // Generate JSON
-  const generateJSON = () => {
-    return JSON.stringify(workflow, null, 2);
+  const save = async () => {
+    setSaving(true);
+    setError(null);
+    setSuccess(null);
+
+    try {
+      const cleanSteps = draft.steps
+        .map((step, index) => ({
+          id: step.id || `step-${index + 1}`,
+          name: step.name.trim(),
+          description: step.description.trim(),
+        }))
+        .filter((step) => step.name.length > 0);
+
+      if (!draft.name.trim()) {
+        throw new Error("Workflow name is required");
+      }
+
+      if (cleanSteps.length === 0) {
+        throw new Error("Add at least one step before saving");
+      }
+
+      const method = selectedId ? "PATCH" : "POST";
+      const endpoint = selectedId ? `/api/workflows/${selectedId}` : "/api/workflows";
+
+      const response = await fetch(endpoint, {
+        method,
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: draft.name,
+          description: draft.description,
+          enabled: draft.enabled,
+          steps: cleanSteps,
+        }),
+      });
+
+      const payload = await response.json().catch(() => ({})) as {
+        error?: string;
+        workflow?: Workflow;
+      };
+
+      if (!response.ok) {
+        throw new Error(payload.error || "Failed to save workflow");
+      }
+
+      if (payload.workflow) {
+        setDraft(payload.workflow);
+        setSelectedId(payload.workflow.id);
+      }
+
+      await loadWorkflows();
+      setSuccess("Workflow saved successfully.");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to save workflow");
+    } finally {
+      setSaving(false);
+    }
   };
 
-  // Export
-  const exportWorkflow = (format: "yaml" | "json") => {
-    const content = format === "yaml" ? generateYAML() : generateJSON();
-    const blob = new Blob([content], { type: "text/plain" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = `${workflow.name.toLowerCase().replace(/\s+/g, "-")}.${format}`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
+  const remove = async () => {
+    if (!selectedId) return;
+
+    setDeleting(true);
+    setError(null);
+    setSuccess(null);
+
+    try {
+      const response = await fetch(`/api/workflows/${selectedId}`, { method: "DELETE" });
+      if (!response.ok) {
+        throw new Error("Failed to delete workflow");
+      }
+
+      const remaining = await loadWorkflows();
+      if (remaining[0]) {
+        setSelectedId(remaining[0].id);
+        await loadWorkflowById(remaining[0].id);
+      } else {
+        resetForNew();
+      }
+      setSuccess("Workflow deleted.");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete workflow");
+    } finally {
+      setDeleting(false);
+    }
   };
 
-  const selectedStep = selectedStepIndex !== null ? workflow.steps[selectedStepIndex] : null;
+  const stepCount = useMemo(
+    () => draft.steps.filter((step) => step.name.trim().length > 0).length,
+    [draft.steps],
+  );
+
+  if (loading) {
+    return <div className="max-w-5xl mx-auto px-4 py-16 text-muted-foreground">Loading workflow builder...</div>;
+  }
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-background to-background/50">
-      {/* Header */}
-      <div className="border-b border-white/10 bg-background/50 backdrop-blur-sm sticky top-0 z-10">
-        <div className="max-w-7xl mx-auto px-4 py-4">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <Workflow className="w-8 h-8 text-purple-400" />
-              <div>
-                <h1 className="text-2xl font-bold text-white">{workflow.name}</h1>
-                <p className="text-sm text-muted-foreground">{workflow.description}</p>
-              </div>
-            </div>
-            <div className="flex items-center gap-2">
-              <Dialog open={showTemplateDialog} onOpenChange={setShowTemplateDialog}>
-                <DialogTrigger asChild>
-                  <Button variant="outline" size="sm">
-                    <Upload className="w-4 h-4 mr-2" />
-                    Load Template
-                  </Button>
-                </DialogTrigger>
-                <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
-                  <DialogHeader>
-                    <DialogTitle>Workflow Templates</DialogTitle>
-                    <DialogDescription>
-                      Choose a pre-built workflow template to get started quickly
-                    </DialogDescription>
-                  </DialogHeader>
-                  <div className="grid gap-4 mt-4">
-                    {workflowTemplates.map((template) => (
-                      <Card
-                        key={template.id}
-                        className="cursor-pointer hover:border-purple-500/50 transition-colors"
-                        onClick={() => loadTemplate(template as Workflow)}
-                      >
-                        <CardHeader>
-                          <div className="flex items-start justify-between">
-                            <div>
-                              <CardTitle className="text-lg">{template.name}</CardTitle>
-                              <CardDescription>{template.description}</CardDescription>
-                            </div>
-                            <Badge variant="outline" className="bg-purple-500/10 text-purple-400 border-purple-500/20">
-                              {template.category}
-                            </Badge>
-                          </div>
-                        </CardHeader>
-                        <CardContent>
-                          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                            <Workflow className="w-4 h-4" />
-                            <span>{template.steps.length} steps</span>
-                          </div>
-                        </CardContent>
-                      </Card>
-                    ))}
-                  </div>
-                </DialogContent>
-              </Dialog>
-              <Button variant="outline" size="sm" onClick={() => exportWorkflow("yaml")}>
-                <Download className="w-4 h-4 mr-2" />
-                Export YAML
-              </Button>
-              <Button variant="outline" size="sm" onClick={() => exportWorkflow("json")}>
-                <Download className="w-4 h-4 mr-2" />
-                Export JSON
-              </Button>
-            </div>
-          </div>
+    <div className="max-w-5xl mx-auto px-4 py-10 space-y-6">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <h1 className="text-3xl font-bold">Workflow Builder</h1>
+          <p className="text-muted-foreground text-sm mt-1">Build and persist workflows with live CRUD APIs.</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" asChild>
+            <Link href="/workflows">Back to workflows</Link>
+          </Button>
+          <Button variant="outline" onClick={resetForNew}>New workflow</Button>
         </div>
       </div>
 
-      {/* Main Content */}
-      <div className="max-w-7xl mx-auto px-4 py-8">
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* Left Panel - Workflow Steps */}
-          <div className="lg:col-span-2 space-y-6">
-            {/* Workflow Metadata */}
-            <Card>
-              <CardHeader>
-                <CardTitle>Workflow Details</CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div>
-                  <Label htmlFor="workflow-name">Name</Label>
-                  <Input
-                    id="workflow-name"
-                    value={workflow.name}
-                    onChange={(e) => setWorkflow({ ...workflow, name: e.target.value })}
-                    placeholder="Enter workflow name"
-                  />
-                </div>
-                <div>
-                  <Label htmlFor="workflow-description">Description</Label>
-                  <Textarea
-                    id="workflow-description"
-                    value={workflow.description}
-                    onChange={(e) => setWorkflow({ ...workflow, description: e.target.value })}
-                    placeholder="Describe what this workflow does"
-                    rows={2}
-                  />
-                </div>
-                <div>
-                  <Label htmlFor="workflow-category">Category</Label>
-                  <Input
-                    id="workflow-category"
-                    value={workflow.category}
-                    onChange={(e) => setWorkflow({ ...workflow, category: e.target.value })}
-                    placeholder="e.g., Data, DevOps, Marketing"
-                  />
-                </div>
-              </CardContent>
-            </Card>
+      <Card className="bg-card/30 border-white/10">
+        <CardHeader>
+          <CardTitle>Select workflow</CardTitle>
+          <CardDescription>Pick an existing workflow or create a new one.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <select
+            className="w-full bg-background border border-white/15 rounded-md px-3 py-2 text-sm"
+            value={selectedId}
+            onChange={(e) => {
+              const id = e.target.value;
+              setSelectedId(id);
+              if (!id) {
+                resetForNew();
+                return;
+              }
+              void loadWorkflowById(id).catch((err: unknown) => {
+                setError(err instanceof Error ? err.message : "Failed to load workflow");
+              });
+            }}
+          >
+            <option value="">Create a new workflow</option>
+            {allWorkflows.map((workflow) => (
+              <option key={workflow.id} value={workflow.id}>
+                {workflow.name}
+              </option>
+            ))}
+          </select>
 
-            {/* Step Builder */}
-            <Card>
-              <CardHeader>
-                <div className="flex items-center justify-between">
-                  <CardTitle>Workflow Steps</CardTitle>
-                  <div className="flex gap-2">
-                    {(Object.keys(stepTypes) as StepType[]).map((type) => {
-                      const StepIcon = stepTypes[type].icon;
-                      return (
-                        <Button
-                          key={type}
-                          size="sm"
-                          variant="outline"
-                          onClick={() => addStep(type)}
-                          className="h-8"
-                          title={`Add ${type} step`}
-                        >
-                          <StepIcon className={`w-4 h-4 ${stepTypes[type].color}`} />
-                        </Button>
-                      );
-                    })}
-                  </div>
-                </div>
-                <CardDescription>Build your workflow by adding and configuring steps</CardDescription>
-              </CardHeader>
-              <CardContent>
-                {workflow.steps.length === 0 ? (
-                  <div className="text-center py-12 text-muted-foreground">
-                    <Workflow className="w-12 h-12 mx-auto mb-4 opacity-50" />
-                    <p>No steps yet. Add your first step to begin.</p>
-                  </div>
-                ) : (
-                  <div className="space-y-3">
-                    {workflow.steps.map((step, index) => {
-                      const StepIcon = stepTypes[step.type].icon;
-                      const isSelected = selectedStepIndex === index;
-                      return (
-                        <div key={step.id}>
-                          <Card
-                            className={`cursor-pointer transition-all ${
-                              isSelected
-                                ? "border-purple-500 bg-purple-500/5"
-                                : "border-white/10 hover:border-white/20"
-                            }`}
-                            onClick={() => setSelectedStepIndex(index)}
-                          >
-                            <CardContent className="p-4">
-                              <div className="flex items-center justify-between">
-                                <div className="flex items-center gap-3 flex-1">
-                                  <div className="flex flex-col items-center gap-1">
-                                    <StepIcon className={`w-5 h-5 ${stepTypes[step.type].color}`} />
-                                    <span className="text-xs text-muted-foreground">{index + 1}</span>
-                                  </div>
-                                  <div className="flex-1">
-                                    <div className="flex items-center gap-2">
-                                      <h4 className="font-medium text-white">{step.name}</h4>
-                                      <Badge variant="outline" className="text-xs">
-                                        {step.type}
-                                      </Badge>
-                                    </div>
-                                    {step.description && (
-                                      <p className="text-sm text-muted-foreground mt-1">{step.description}</p>
-                                    )}
-                                  </div>
-                                </div>
-                                <div className="flex items-center gap-1">
-                                  <Button
-                                    size="sm"
-                                    variant="ghost"
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      moveStep(index, "up");
-                                    }}
-                                    disabled={index === 0}
-                                    className="h-8 w-8 p-0"
-                                  >
-                                    <ArrowUp className="w-4 h-4" />
-                                  </Button>
-                                  <Button
-                                    size="sm"
-                                    variant="ghost"
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      moveStep(index, "down");
-                                    }}
-                                    disabled={index === workflow.steps.length - 1}
-                                    className="h-8 w-8 p-0"
-                                  >
-                                    <ArrowDown className="w-4 h-4" />
-                                  </Button>
-                                  <Button
-                                    size="sm"
-                                    variant="ghost"
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      removeStep(index);
-                                    }}
-                                    className="h-8 w-8 p-0 text-red-400 hover:text-red-300"
-                                  >
-                                    <Trash2 className="w-4 h-4" />
-                                  </Button>
-                                </div>
-                              </div>
-                            </CardContent>
-                          </Card>
-                          {index < workflow.steps.length - 1 && (
-                            <div className="flex justify-center py-2">
-                              <div className="w-px h-4 bg-white/20" />
-                            </div>
-                          )}
-                        </div>
-                      );
-                    })}
-                  </div>
-                )}
-              </CardContent>
-            </Card>
+          <div className="flex items-center gap-3 text-xs text-muted-foreground">
+            <Badge variant="outline" className="bg-white/5 border-white/10">
+              {stepCount} configured steps
+            </Badge>
+            {draft.id ? <span>ID: {draft.id}</span> : <span>Unsaved draft</span>}
           </div>
+        </CardContent>
+      </Card>
 
-          {/* Right Panel - Step Config & Preview */}
-          <div className="space-y-6">
-            {/* Step Configuration */}
-            {selectedStep && selectedStepIndex !== null && (
-              <Card>
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2">
-                    {(() => {
-                      const StepIcon = stepTypes[selectedStep.type].icon;
-                      return <StepIcon className={`w-5 h-5 ${stepTypes[selectedStep.type].color}`} />;
-                    })()}
-                    Step Configuration
-                  </CardTitle>
-                  <CardDescription>{stepTypes[selectedStep.type].description}</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div>
-                    <Label htmlFor="step-name">Name</Label>
-                    <Input
-                      id="step-name"
-                      value={selectedStep.name}
-                      onChange={(e) => updateStep(selectedStepIndex, { name: e.target.value })}
-                      placeholder="Step name"
-                    />
-                  </div>
-                  <div>
-                    <Label htmlFor="step-type">Type</Label>
-                    <Select
-                      value={selectedStep.type}
-                      onValueChange={(value: StepType) => updateStep(selectedStepIndex, { type: value })}
+      <Card className="bg-card/30 border-white/10">
+        <CardHeader>
+          <CardTitle>Workflow details</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div>
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              value={draft.name}
+              onChange={(e) => setDraft((current) => ({ ...current, name: e.target.value }))}
+              placeholder="On-call incident response"
+            />
+          </div>
+          <div>
+            <Label htmlFor="description">Description</Label>
+            <Textarea
+              id="description"
+              value={draft.description}
+              onChange={(e) => setDraft((current) => ({ ...current, description: e.target.value }))}
+              rows={3}
+              placeholder="Collect alerts, score impact, and route to the right owner"
+            />
+          </div>
+          <div className="flex items-center gap-3">
+            <Switch
+              id="enabled"
+              checked={draft.enabled}
+              onCheckedChange={(enabled) => setDraft((current) => ({ ...current, enabled }))}
+            />
+            <Label htmlFor="enabled">Enabled</Label>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="bg-card/30 border-white/10">
+        <CardHeader>
+          <CardTitle>Steps</CardTitle>
+          <CardDescription>Add 2 to 5 steps for best results.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {draft.steps.map((step, index) => (
+            <Card key={`${step.id}-${index}`} className="bg-background/50 border-white/10">
+              <CardContent className="pt-4 space-y-3">
+                <div className="flex items-center justify-between gap-2">
+                  <Badge variant="outline">Step {index + 1}</Badge>
+                  <div className="flex items-center gap-1">
+                    <Button size="icon" variant="ghost" onClick={() => moveStep(index, "up")} disabled={index === 0}>
+                      <ArrowUp className="w-4 h-4" />
+                    </Button>
+                    <Button
+                      size="icon"
+                      variant="ghost"
+                      onClick={() => moveStep(index, "down")}
+                      disabled={index === draft.steps.length - 1}
                     >
-                      <SelectTrigger id="step-type">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {(Object.keys(stepTypes) as StepType[]).map((type) => (
-                          <SelectItem key={type} value={type}>
-                            {type}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div>
-                    <Label htmlFor="step-description">Description</Label>
-                    <Textarea
-                      id="step-description"
-                      value={selectedStep.description}
-                      onChange={(e) => updateStep(selectedStepIndex, { description: e.target.value })}
-                      placeholder="Describe what this step does"
-                      rows={3}
-                    />
-                  </div>
-                  <Separator />
-                  <div>
-                    <Label htmlFor="step-config">Configuration (JSON)</Label>
-                    <Textarea
-                      id="step-config"
-                      value={JSON.stringify(selectedStep.config, null, 2)}
-                      onChange={(e) => {
-                        try {
-                          const config = JSON.parse(e.target.value);
-                          updateStep(selectedStepIndex, { config });
-                        } catch {
-                          // Invalid JSON, don't update
-                        }
-                      }}
-                      placeholder='{"key": "value"}'
-                      rows={8}
-                      className="font-mono text-sm"
-                    />
+                      <ArrowDown className="w-4 h-4" />
+                    </Button>
+                    <Button
+                      size="icon"
+                      variant="ghost"
+                      onClick={() => removeStep(index)}
+                      disabled={draft.steps.length <= 1}
+                      className="text-red-300 hover:text-red-200"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
                   </div>
-                </CardContent>
-              </Card>
-            )}
-
-            {/* Preview Panel */}
-            <Card>
-              <CardHeader>
-                <div className="flex items-center gap-2">
-                  <Code2 className="w-5 h-5 text-cyan-400" />
-                  <CardTitle>Preview</CardTitle>
                 </div>
-              </CardHeader>
-              <CardContent>
-                <Tabs value={previewTab} onValueChange={setPreviewTab}>
-                  <TabsList className="grid w-full grid-cols-2">
-                    <TabsTrigger value="yaml">YAML</TabsTrigger>
-                    <TabsTrigger value="json">JSON</TabsTrigger>
-                  </TabsList>
-                  <TabsContent value="yaml" className="mt-4">
-                    <pre className="bg-black/20 rounded-lg p-4 text-xs overflow-x-auto border border-white/10">
-                      <code className="text-white/80">{generateYAML()}</code>
-                    </pre>
-                  </TabsContent>
-                  <TabsContent value="json" className="mt-4">
-                    <pre className="bg-black/20 rounded-lg p-4 text-xs overflow-x-auto border border-white/10">
-                      <code className="text-white/80">{generateJSON()}</code>
-                    </pre>
-                  </TabsContent>
-                </Tabs>
+                <Input
+                  value={step.name}
+                  onChange={(e) => setStep(index, { name: e.target.value })}
+                  placeholder="Step name"
+                />
+                <Textarea
+                  value={step.description}
+                  onChange={(e) => setStep(index, { description: e.target.value })}
+                  rows={2}
+                  placeholder="Step description"
+                />
               </CardContent>
             </Card>
-          </div>
-        </div>
+          ))}
+
+          <Button variant="outline" onClick={addStep}>
+            <Plus className="w-4 h-4 mr-2" />
+            Add step
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Separator className="opacity-10" />
+
+      {error ? <p className="text-sm text-red-300">{error}</p> : null}
+      {success ? <p className="text-sm text-green-300">{success}</p> : null}
+
+      <div className="flex flex-wrap gap-2">
+        <Button onClick={() => void save()} disabled={saving || deleting}>
+          {saving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />}
+          Save workflow
+        </Button>
+        <Button variant="destructive" onClick={() => void remove()} disabled={!selectedId || saving || deleting}>
+          {deleting ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Trash2 className="w-4 h-4 mr-2" />}
+          Delete workflow
+        </Button>
       </div>
     </div>
   );
diff --git a/src/app/workflows/page.tsx b/src/app/workflows/page.tsx
index 9e9256d9..08a0a007 100644
--- a/src/app/workflows/page.tsx
+++ b/src/app/workflows/page.tsx
@@ -1,173 +1,285 @@
+/* eslint-disable react/no-unescaped-entities */
+"use client";
+
 import Link from "next/link";
-import { getWorkflows } from "@/lib/data";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Loader2, Plus, RefreshCcw, Search, Trash2 } from "lucide-react";
+
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
-import { Clock, Layers, Zap } from "lucide-react";
-
-export const revalidate = 300;
-
-export const metadata = {
-  title: "Workflow Templates — forAgents.dev",
-  description: "Pre-built agent workflow templates for common automation tasks.",
-  openGraph: {
-    title: "Workflow Templates — forAgents.dev",
-    description: "Pre-built agent workflow templates for common automation tasks.",
-    url: "https://foragents.dev/workflows",
-    siteName: "forAgents.dev",
-    type: "website",
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "Workflow Templates — forAgents.dev",
-    description: "Pre-built agent workflow templates for common automation tasks.",
-  },
-};
-
-const difficultyColors = {
-  beginner: "bg-green-500/10 text-green-400 border-green-500/20",
-  intermediate: "bg-yellow-500/10 text-yellow-400 border-yellow-500/20",
-  advanced: "bg-red-500/10 text-red-400 border-red-500/20",
-};
-
-const categoryEmoji: Record<string, string> = {
-  development: "💻",
-  marketing: "📢",
-  analytics: "📊",
-  devops: "🚀",
-  security: "🔒",
-  hr: "👥",
-};
+import { Textarea } from "@/components/ui/textarea";
+import { parseStepsFromText, type Workflow } from "@/lib/workflows";
+
+async function fetchWorkflows(search: string): Promise<Workflow[]> {
+  const params = new URLSearchParams();
+  if (search.trim()) {
+    params.set("search", search.trim());
+  }
+
+  const response = await fetch(`/api/workflows?${params.toString()}`, { cache: "no-store" });
+  if (!response.ok) {
+    throw new Error("Failed to load workflows");
+  }
+
+  const payload = await response.json() as { workflows: Workflow[] };
+  return payload.workflows;
+}
 
 export default function WorkflowsPage() {
-  const workflows = getWorkflows();
+  const [search, setSearch] = useState("");
+  const [workflows, setWorkflows] = useState<Workflow[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [stepsText, setStepsText] = useState("Research\nDraft\nReview\nPublish");
+  const [submitting, setSubmitting] = useState(false);
+
+  const load = useCallback(async (term: string) => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const items = await fetchWorkflows(term);
+      setWorkflows(items);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load workflows");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      void load(search);
+    }, 250);
+
+    return () => clearTimeout(timer);
+  }, [load, search]);
+
+  const enabledCount = useMemo(
+    () => workflows.filter((workflow) => workflow.enabled).length,
+    [workflows],
+  );
+
+  const handleCreate = async () => {
+    setSubmitting(true);
+    setError(null);
+
+    try {
+      const response = await fetch("/api/workflows", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name,
+          description,
+          steps: parseStepsFromText(stepsText),
+        }),
+      });
+
+      if (!response.ok) {
+        const payload = await response.json() as { error?: string };
+        throw new Error(payload.error || "Failed to create workflow");
+      }
+
+      setName("");
+      setDescription("");
+      setStepsText("Research\nDraft\nReview\nPublish");
+      await load(search);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create workflow");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const toggleEnabled = async (workflow: Workflow) => {
+    setBusyId(workflow.id);
+    setError(null);
+
+    try {
+      const response = await fetch(`/api/workflows/${workflow.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ enabled: !workflow.enabled }),
+      });
 
-  const categories = Array.from(new Set(workflows.map((w) => w.category)));
+      if (!response.ok) {
+        throw new Error("Failed to update workflow");
+      }
+
+      await load(search);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to update workflow");
+    } finally {
+      setBusyId(null);
+    }
+  };
+
+  const removeWorkflow = async (id: string) => {
+    setBusyId(id);
+    setError(null);
+
+    try {
+      const response = await fetch(`/api/workflows/${id}`, { method: "DELETE" });
+      if (!response.ok) {
+        throw new Error("Failed to delete workflow");
+      }
+      await load(search);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete workflow");
+    } finally {
+      setBusyId(null);
+    }
+  };
 
   return (
     <div className="min-h-screen">
-      {/* Hero */}
-      <section className="relative overflow-hidden">
-        <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[700px] max-h-[700px] bg-purple-500/5 rounded-full blur-[120px]" />
+      <section className="max-w-5xl mx-auto px-4 py-12 space-y-6">
+        <div>
+          <h1 className="text-4xl font-bold tracking-tight text-[#F8FAFC]">Workflow Builder</h1>
+          <p className="text-muted-foreground mt-2">
+            Create, update, and manage reusable workflows with API-backed persistence.
+          </p>
         </div>
 
-        <div className="relative max-w-5xl mx-auto px-4 py-16 text-center">
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-[#F8FAFC] mb-4">
-            🔗 Workflow Templates
-          </h1>
-          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-            Pre-built agent workflow templates for common automation tasks. Connect skills together into powerful automation pipelines.
-          </p>
-          <div className="mt-6 flex items-center justify-center gap-4 text-sm text-muted-foreground">
-            <div className="flex items-center gap-2">
-              <Layers className="w-4 h-4 text-cyan" />
-              <span>{workflows.length} workflows</span>
+        <div className="flex flex-wrap gap-3 text-sm text-muted-foreground">
+          <Badge variant="outline" className="bg-white/5 border-white/10">{workflows.length} total</Badge>
+          <Badge variant="outline" className="bg-green-500/10 text-green-300 border-green-500/20">
+            {enabledCount} enabled
+          </Badge>
+          <Badge variant="outline" className="bg-white/5 border-white/10">
+            {Math.max(workflows.length - enabledCount, 0)} disabled
+          </Badge>
+        </div>
+
+        <Card className="bg-card/40 border-white/10">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Plus className="w-4 h-4" />
+              Create workflow
+            </CardTitle>
+            <CardDescription>Name, description, and one step per line.</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="grid md:grid-cols-2 gap-3">
+              <div>
+                <Label htmlFor="name">Name</Label>
+                <Input id="name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Incident triage" />
+              </div>
+              <div>
+                <Label htmlFor="description">Description</Label>
+                <Input
+                  id="description"
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  placeholder="Route, score, and assign incoming alerts"
+                />
+              </div>
             </div>
-            <span className="text-white/20">•</span>
-            <div className="flex items-center gap-2">
-              <Zap className="w-4 h-4 text-purple-400" />
-              <span>{categories.length} categories</span>
+            <div>
+              <Label htmlFor="steps">Steps (one per line)</Label>
+              <Textarea id="steps" rows={4} value={stepsText} onChange={(e) => setStepsText(e.target.value)} />
             </div>
+            <Button onClick={handleCreate} disabled={submitting}>
+              {submitting ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : null}
+              Save workflow
+            </Button>
+          </CardContent>
+        </Card>
+
+        <Separator className="opacity-10" />
+
+        <div className="flex gap-2 items-center">
+          <div className="relative flex-1">
+            <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search by name, description, or step"
+              className="pl-9"
+            />
           </div>
+          <Button variant="outline" onClick={() => void load(search)}>
+            <RefreshCcw className="w-4 h-4 mr-2" />
+            Refresh
+          </Button>
+          <Button asChild>
+            <Link href="/workflows/builder">Open Builder</Link>
+          </Button>
         </div>
-      </section>
 
-      <Separator className="opacity-10" />
-
-      {/* Categories Overview */}
-      <section className="max-w-5xl mx-auto px-4 py-8">
-        <div className="flex flex-wrap gap-2 justify-center">
-          {categories.map((category) => {
-            const count = workflows.filter((w) => w.category === category).length;
-            return (
-              <Badge
-                key={category}
-                variant="outline"
-                className="bg-white/5 text-white/80 border-white/10 hover:border-cyan/30 transition-colors"
-              >
-                {categoryEmoji[category] || "📦"} {category} ({count})
-              </Badge>
-            );
-          })}
-        </div>
-      </section>
+        {error ? (
+          <Card className="border-red-500/30 bg-red-500/10">
+            <CardContent className="py-3 text-sm text-red-200">{error}</CardContent>
+          </Card>
+        ) : null}
 
-      {/* Workflows List */}
-      <section className="max-w-5xl mx-auto px-4 py-12">
-        <div className="grid gap-6 md:grid-cols-2">
-          {workflows.map((workflow) => (
-            <Link key={workflow.id} href={`/workflows/${workflow.id}`}>
-              <Card className="bg-card/50 border-white/5 hover:border-purple-400/20 transition-all group h-full">
+        {loading ? (
+          <div className="py-12 text-center text-muted-foreground">Loading workflows...</div>
+        ) : workflows.length === 0 ? (
+          <div className="py-12 text-center text-muted-foreground">No workflows found.</div>
+        ) : (
+          <div className="grid gap-4 md:grid-cols-2">
+            {workflows.map((workflow) => (
+              <Card key={workflow.id} className="bg-card/30 border-white/10">
                 <CardHeader>
-                  <div className="flex items-start justify-between gap-2 mb-2">
-                    <CardTitle className="text-xl group-hover:text-purple-400 transition-colors flex items-center gap-2">
-                      <span>{categoryEmoji[workflow.category] || "📦"}</span>
-                      <span>{workflow.name}</span>
-                    </CardTitle>
+                  <div className="flex items-start justify-between gap-2">
+                    <CardTitle className="text-xl">{workflow.name}</CardTitle>
                     <Badge
                       variant="outline"
-                      className={difficultyColors[workflow.difficulty]}
+                      className={workflow.enabled
+                        ? "bg-green-500/10 text-green-300 border-green-500/20"
+                        : "bg-white/10 text-white/70 border-white/20"}
                     >
-                      {workflow.difficulty}
+                      {workflow.enabled ? "Enabled" : "Disabled"}
                     </Badge>
                   </div>
-                  <CardDescription className="text-sm">
-                    {workflow.description}
-                  </CardDescription>
+                  <CardDescription>{workflow.description || "No description provided."}</CardDescription>
                 </CardHeader>
-                <CardContent>
-                  <div className="space-y-3">
-                    {/* Meta Info */}
-                    <div className="flex items-center gap-4 text-xs text-muted-foreground">
-                      <div className="flex items-center gap-1.5">
-                        <Clock className="w-3.5 h-3.5" />
-                        <span>{workflow.estimatedTime}</span>
-                      </div>
-                      <span className="text-white/20">•</span>
-                      <div className="flex items-center gap-1.5">
-                        <Layers className="w-3.5 h-3.5" />
-                        <span>{workflow.steps.length} steps</span>
-                      </div>
-                      <span className="text-white/20">•</span>
-                      <div className="flex items-center gap-1.5">
-                        <Zap className="w-3.5 h-3.5" />
-                        <span>{workflow.requiredSkills.length} skills</span>
-                      </div>
-                    </div>
-
-                    {/* Tags */}
-                    <div className="flex flex-wrap gap-1.5">
-                      {workflow.tags.slice(0, 3).map((tag) => (
-                        <Badge
-                          key={tag}
-                          variant="outline"
-                          className="text-xs bg-white/5 text-white/60 border-white/10"
-                        >
-                          {tag}
-                        </Badge>
-                      ))}
-                      {workflow.tags.length > 3 && (
-                        <Badge
-                          variant="outline"
-                          className="text-xs bg-white/5 text-white/60 border-white/10"
-                        >
-                          +{workflow.tags.length - 3}
-                        </Badge>
-                      )}
-                    </div>
-
-                    <div className="pt-2">
-                      <span className="text-xs text-purple-400 group-hover:underline">
-                        View workflow →
-                      </span>
-                    </div>
+                <CardContent className="space-y-4">
+                  <div className="text-xs text-muted-foreground">{workflow.steps.length} steps</div>
+                  <div className="space-y-1">
+                    {workflow.steps.slice(0, 3).map((step) => (
+                      <div key={step.id} className="text-sm text-white/90">• {step.name}</div>
+                    ))}
+                    {workflow.steps.length > 3 ? (
+                      <div className="text-xs text-muted-foreground">+{workflow.steps.length - 3} more</div>
+                    ) : null}
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    <Button size="sm" variant="outline" asChild>
+                      <Link href={`/workflows/${workflow.id}`}>Edit</Link>
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      disabled={busyId === workflow.id}
+                      onClick={() => void toggleEnabled(workflow)}
+                    >
+                      {workflow.enabled ? "Disable" : "Enable"}
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="destructive"
+                      disabled={busyId === workflow.id}
+                      onClick={() => void removeWorkflow(workflow.id)}
+                    >
+                      <Trash2 className="w-4 h-4 mr-1" />
+                      Delete
+                    </Button>
                   </div>
                 </CardContent>
               </Card>
-            </Link>
-          ))}
-        </div>
+            ))}
+          </div>
+        )}
       </section>
     </div>
   );
diff --git a/src/lib/server/workflowStore.ts b/src/lib/server/workflowStore.ts
new file mode 100644
index 00000000..99c60eab
--- /dev/null
+++ b/src/lib/server/workflowStore.ts
@@ -0,0 +1,101 @@
+import "server-only";
+
+import { promises as fs } from "fs";
+import path from "path";
+
+export type WorkflowStep = {
+  id: string;
+  name: string;
+  description: string;
+};
+
+export type WorkflowRecord = {
+  id: string;
+  name: string;
+  description: string;
+  steps: WorkflowStep[];
+  enabled: boolean;
+  createdAt: string;
+  updatedAt: string;
+};
+
+const WORKFLOWS_PATH = path.join(process.cwd(), "data", "workflows.json");
+
+function normalizeStep(step: unknown, index: number): WorkflowStep {
+  if (typeof step === "string") {
+    return {
+      id: `step-${index + 1}`,
+      name: step.trim() || `Step ${index + 1}`,
+      description: "",
+    };
+  }
+
+  if (!step || typeof step !== "object") {
+    return {
+      id: `step-${index + 1}`,
+      name: `Step ${index + 1}`,
+      description: "",
+    };
+  }
+
+  const maybeStep = step as Record<string, unknown>;
+  const name = typeof maybeStep.name === "string" ? maybeStep.name.trim() : "";
+  const description = typeof maybeStep.description === "string" ? maybeStep.description.trim() : "";
+  const id = typeof maybeStep.id === "string" && maybeStep.id.trim().length > 0
+    ? maybeStep.id.trim()
+    : `step-${index + 1}`;
+
+  return {
+    id,
+    name: name || `Step ${index + 1}`,
+    description,
+  };
+}
+
+export function normalizeSteps(steps: unknown): WorkflowStep[] {
+  if (!Array.isArray(steps)) return [];
+  return steps.map((step, index) => normalizeStep(step, index));
+}
+
+function normalizeWorkflow(item: unknown): WorkflowRecord | null {
+  if (!item || typeof item !== "object") return null;
+
+  const maybeWorkflow = item as Record<string, unknown>;
+  const id = typeof maybeWorkflow.id === "string" ? maybeWorkflow.id.trim() : "";
+  const name = typeof maybeWorkflow.name === "string" ? maybeWorkflow.name.trim() : "";
+  const description = typeof maybeWorkflow.description === "string" ? maybeWorkflow.description.trim() : "";
+  const enabled = typeof maybeWorkflow.enabled === "boolean" ? maybeWorkflow.enabled : true;
+
+  if (!id || !name) return null;
+
+  const now = new Date().toISOString();
+
+  return {
+    id,
+    name,
+    description,
+    enabled,
+    steps: normalizeSteps(maybeWorkflow.steps),
+    createdAt: typeof maybeWorkflow.createdAt === "string" ? maybeWorkflow.createdAt : now,
+    updatedAt: typeof maybeWorkflow.updatedAt === "string" ? maybeWorkflow.updatedAt : now,
+  };
+}
+
+export async function readWorkflows(): Promise<WorkflowRecord[]> {
+  try {
+    const raw = await fs.readFile(WORKFLOWS_PATH, "utf-8");
+    const parsed = JSON.parse(raw) as unknown;
+    if (!Array.isArray(parsed)) return [];
+
+    return parsed
+      .map((item) => normalizeWorkflow(item))
+      .filter((item): item is WorkflowRecord => item !== null);
+  } catch {
+    return [];
+  }
+}
+
+export async function writeWorkflows(workflows: WorkflowRecord[]): Promise<void> {
+  await fs.mkdir(path.dirname(WORKFLOWS_PATH), { recursive: true });
+  await fs.writeFile(WORKFLOWS_PATH, `${JSON.stringify(workflows, null, 2)}\n`, "utf-8");
+}
diff --git a/src/lib/workflows.ts b/src/lib/workflows.ts
new file mode 100644
index 00000000..3e5d971b
--- /dev/null
+++ b/src/lib/workflows.ts
@@ -0,0 +1,31 @@
+export type WorkflowStep = {
+  id: string;
+  name: string;
+  description: string;
+};
+
+export type Workflow = {
+  id: string;
+  name: string;
+  description: string;
+  steps: WorkflowStep[];
+  enabled: boolean;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export function parseStepsFromText(text: string): WorkflowStep[] {
+  return text
+    .split("\n")
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .map((name, index) => ({
+      id: `step-${index + 1}`,
+      name,
+      description: "",
+    }));
+}
+
+export function stepsToText(steps: WorkflowStep[]): string {
+  return steps.map((step) => step.name).join("\n");
+}