diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/_components/variables/ConfigFields.tsx b/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/_components/variables/ConfigFields.tsx
index 79b2c953..89a6586c 100644
--- a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/_components/variables/ConfigFields.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/_components/variables/ConfigFields.tsx
@@ -34,16 +34,25 @@ import { TargetConditionDialog } from "~/app/[workspaceSlug]/_components/target-
 export const ConfigTypeSelector: React.FC<{
   value: string | undefined;
   onChange: (type: string) => void;
-}> = ({ value, onChange }) => (
+  exclude?: string[];
+}> = ({ value, onChange, exclude }) => (
   <Select value={value} onValueChange={onChange}>
     <SelectTrigger>
       <SelectValue placeholder="Select type" />
     </SelectTrigger>
     <SelectContent>
-      <SelectItem value="string">String</SelectItem>
-      <SelectItem value="number">Number</SelectItem>
-      <SelectItem value="boolean">Boolean</SelectItem>
-      <SelectItem value="choice">Choice</SelectItem>
+      {!exclude?.includes("string") && (
+        <SelectItem value="string">String</SelectItem>
+      )}
+      {!exclude?.includes("number") && (
+        <SelectItem value="number">Number</SelectItem>
+      )}
+      {!exclude?.includes("boolean") && (
+        <SelectItem value="boolean">Boolean</SelectItem>
+      )}
+      {!exclude?.includes("choice") && (
+        <SelectItem value="choice">Choice</SelectItem>
+      )}
     </SelectContent>
   </Select>
 );
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/CreateVariableDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/CreateVariableDialog.tsx
index af347036..fd6d3d6a 100644
--- a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/CreateVariableDialog.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/CreateVariableDialog.tsx
@@ -3,7 +3,6 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { IconBulb } from "@tabler/icons-react";
-import _ from "lodash";
 import { z } from "zod";
 
 import { Alert, AlertTitle } from "@ctrlplane/ui/alert";
@@ -32,7 +31,6 @@ import { VariableConfig } from "@ctrlplane/validators/variables";
 
 import {
   BooleanConfigFields,
-  ChoiceConfigFields,
   ConfigTypeSelector,
   NumberConfigFields,
   StringConfigFields,
@@ -60,8 +58,6 @@ export const CreateVariableDialog: React.FC<{
     },
   });
 
-  const { config } = form.watch();
-
   const onSubmit = form.handleSubmit(async (values) => {
     await create.mutateAsync({
       ...values,
@@ -118,13 +114,8 @@ export const CreateVariableDialog: React.FC<{
                     <FormControl>
                       <ConfigTypeSelector
                         value={value.type}
-                        onChange={(type: string) => {
-                          if (type === "choice") {
-                            onChange({ type, options: [] });
-                            return;
-                          }
-                          onChange({ type });
-                        }}
+                        onChange={(type: string) => onChange({ type })}
+                        exclude={["choice"]}
                       />
                     </FormControl>
                   </FormItem>
@@ -155,21 +146,10 @@ export const CreateVariableDialog: React.FC<{
                       }
                     />
                   )}
-
-                  {value.type === "choice" && (
-                    <ChoiceConfigFields
-                      config={value}
-                      updateConfig={(updates) =>
-                        onChange({ ...value, ...updates })
-                      }
-                    />
-                  )}
                 </>
               )}
             />
 
-            <pre className="text-xs">{JSON.stringify(config, null, 2)}</pre>
-
             <FormField
               control={form.control}
               name="description"
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/EditRunbookDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/EditRunbookDialog.tsx
new file mode 100644
index 00000000..fe6a47e3
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/EditRunbookDialog.tsx
@@ -0,0 +1,198 @@
+"use client";
+
+import type {
+  JobAgent,
+  Runbook,
+  RunbookVariable,
+  Workspace,
+} from "@ctrlplane/db/schema";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { z } from "zod";
+
+import { createRunbookVariable } from "@ctrlplane/db/schema";
+import { Button } from "@ctrlplane/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@ctrlplane/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormRootError,
+  useForm,
+} from "@ctrlplane/ui/form";
+import { Input } from "@ctrlplane/ui/input";
+import { Textarea } from "@ctrlplane/ui/textarea";
+
+import { JobAgentConfig } from "~/components/form/job-agent/JobAgentConfig";
+import { JobAgentSelector } from "~/components/form/job-agent/JobAgentSelector";
+import { api } from "~/trpc/react";
+import { RunbookVariablesEditor } from "./create/RunbookVariableEditor";
+
+const updateRunbookSchema = z.object({
+  name: z.string().min(1),
+  description: z.string(),
+  variables: z.array(createRunbookVariable),
+  jobAgentId: z.string().uuid({ message: "Must be a valid job agent ID" }),
+  jobAgentConfig: z.record(z.any()),
+});
+
+export const EditRunbookDialog: React.FC<{
+  workspace: Workspace;
+  jobAgents: JobAgent[];
+  runbook: Runbook & { variables: RunbookVariable[] };
+  children: React.ReactNode;
+}> = ({ workspace, jobAgents, runbook, children }) => {
+  const [open, setOpen] = useState(false);
+  const update = api.runbook.update.useMutation();
+  const form = useForm({
+    schema: updateRunbookSchema,
+    disabled: update.isPending,
+    defaultValues: {
+      ...runbook,
+      description: runbook.description ?? "",
+      jobAgentId: runbook.jobAgentId ?? "",
+    },
+  });
+
+  const router = useRouter();
+  const onSubmit = form.handleSubmit(async (data) =>
+    update
+      .mutateAsync({ id: runbook.id, data })
+      .then(() => router.refresh())
+      .then(() => setOpen(false)),
+  );
+
+  const jobAgentId = form.watch("jobAgentId");
+  const jobAgent = jobAgents.find((j) => j.id === jobAgentId);
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="scrollbar-thin scrollbar-track-neutral-900 scrollbar-thumb-neutral-800 max-h-[95vh] max-w-3xl overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Edit Runbook</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={onSubmit} className="space-y-8">
+            <div className="space-y-3">
+              <div>General</div>
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Name</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Deploy Hotfix, Rollback Release, Scale Service..."
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Description</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="Describe the purpose of this runbook..."
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className="space-y-3">
+              <div>Variables</div>
+
+              <div className="text-sm text-muted-foreground">
+                Variables in runbooks make automation flexible and reusable.
+                They let you customize runbooks with user inputs and use
+                environment-specific values without hardcoding. This allows
+                runbooks to adapt to different scenarios without changing their
+                core logic.
+              </div>
+
+              <FormField
+                control={form.control}
+                name="variables"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <RunbookVariablesEditor
+                        value={field.value}
+                        onChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className="space-y-3">
+              <div>Agent</div>
+
+              <FormField
+                control={form.control}
+                name="jobAgentId"
+                render={({ field: { value, onChange } }) => (
+                  <FormItem>
+                    <FormLabel>Job Agent</FormLabel>
+                    <FormControl>
+                      <JobAgentSelector
+                        jobAgents={jobAgents}
+                        workspace={workspace}
+                        value={value}
+                        onChange={onChange}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="jobAgentConfig"
+                render={({ field: { value, onChange } }) => (
+                  <FormItem>
+                    <FormLabel>Config</FormLabel>
+                    <FormControl>
+                      <JobAgentConfig
+                        jobAgent={jobAgent}
+                        workspace={workspace}
+                        value={value}
+                        onChange={onChange}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <Button type="submit">Save</Button>
+            <FormRootError />
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/RunbookRow.tsx b/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/RunbookRow.tsx
index 850da283..292e81f0 100644
--- a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/RunbookRow.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/RunbookRow.tsx
@@ -2,7 +2,7 @@
 
 import type * as schema from "@ctrlplane/db/schema";
 import { useState } from "react";
-import { IconDotsVertical } from "@tabler/icons-react";
+import { IconBolt, IconDotsVertical, IconEdit } from "@tabler/icons-react";
 
 import { Button } from "@ctrlplane/ui/button";
 import {
@@ -12,8 +12,7 @@ import {
   DropdownMenuTrigger,
 } from "@ctrlplane/ui/dropdown-menu";
 
-import { api } from "~/trpc/react";
-import { EditAgentConfigDialog } from "../_components/EditAgentConfigDialog";
+import { EditRunbookDialog } from "./EditRunbookDialog";
 import { TriggerRunbookDialog } from "./TriggerRunbook";
 
 export const RunbookRow: React.FC<{
@@ -24,7 +23,6 @@ export const RunbookRow: React.FC<{
   workspace: schema.Workspace;
   jobAgents: schema.JobAgent[];
 }> = ({ runbook, workspace, jobAgents }) => {
-  const updateRunbook = api.runbook.update.useMutation();
   const [open, setOpen] = useState(false);
 
   return (
@@ -45,33 +43,27 @@ export const RunbookRow: React.FC<{
             runbook={runbook}
             onSuccess={() => setOpen(false)}
           >
-            <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+            <DropdownMenuItem
+              onSelect={(e) => e.preventDefault()}
+              className="flex cursor-pointer items-center gap-2"
+            >
+              <IconBolt className="h-4 w-4" />
               Trigger Runbook
             </DropdownMenuItem>
           </TriggerRunbookDialog>
-          {runbook.jobAgent != null && (
-            <EditAgentConfigDialog
-              jobAgent={runbook.jobAgent}
-              workspace={workspace}
-              jobAgents={jobAgents}
-              value={runbook.jobAgentConfig}
-              onSubmit={(data) =>
-                updateRunbook
-                  .mutateAsync({
-                    id: runbook.id,
-                    data: {
-                      jobAgentId: data.jobAgentId,
-                      jobAgentConfig: data.config,
-                    },
-                  })
-                  .then(() => setOpen(false))
-              }
+          <EditRunbookDialog
+            runbook={runbook}
+            workspace={workspace}
+            jobAgents={jobAgents}
+          >
+            <DropdownMenuItem
+              onSelect={(e) => e.preventDefault()}
+              className="flex cursor-pointer items-center gap-2"
             >
-              <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
-                Edit Job Agent
-              </DropdownMenuItem>
-            </EditAgentConfigDialog>
-          )}
+              <IconEdit className="h-4 w-4" />
+              Edit Runbook
+            </DropdownMenuItem>
+          </EditRunbookDialog>
         </DropdownMenuContent>
       </DropdownMenu>
     </div>
diff --git a/packages/api/src/router/runbook.ts b/packages/api/src/router/runbook.ts
index 3e7c5ae2..68038e30 100644
--- a/packages/api/src/router/runbook.ts
+++ b/packages/api/src/router/runbook.ts
@@ -100,13 +100,32 @@ export const runbookRouter = createTRPCRouter({
     .input(
       z.object({
         id: z.string().uuid(),
-        data: SCHEMA.updateRunbook,
+        data: SCHEMA.updateRunbook.extend({
+          variables: z.array(createRunbookVariable),
+        }),
       }),
     )
     .mutation(async ({ ctx, input }) =>
-      ctx.db
-        .update(SCHEMA.runbook)
-        .set(input.data)
-        .where(eq(SCHEMA.runbook.id, input.id)),
+      ctx.db.transaction((tx) =>
+        tx
+          .update(SCHEMA.runbook)
+          .set(input.data)
+          .where(eq(SCHEMA.runbook.id, input.id))
+          .returning()
+          .then(takeFirst)
+          .then((rb) =>
+            tx
+              .delete(SCHEMA.runbookVariable)
+              .where(eq(SCHEMA.runbookVariable.runbookId, rb.id))
+              .then(() =>
+                tx.insert(SCHEMA.runbookVariable).values(
+                  input.data.variables.map((v) => ({
+                    ...v,
+                    runbookId: rb.id,
+                  })),
+                ),
+              ),
+          ),
+      ),
     ),
 });