diff --git a/src/components/features/wizard-form.tsx b/src/components/features/wizard-form.tsx
new file mode 100644
index 0000000..dbba96c
--- /dev/null
+++ b/src/components/features/wizard-form.tsx
@@ -0,0 +1,211 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { CheckCircle2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { panelService } from "@/api/services/panel-service";
+
+const schema = z.object({
+  name: z.string().min(3, "Use at least three characters."),
+  domain: z.string().min(4, "Enter a valid domain or identifier."),
+  owner: z.string().min(2, "Owner is required."),
+});
+
+type WizardValues = z.infer<typeof schema>;
+
+export function WizardForm({ kind, steps }: { kind: string; steps: string[] }) {
+  const queryClient = useQueryClient();
+  const [step, setStep] = useState(0);
+  const [submitted, setSubmitted] = useState(false);
+  const [invalidSubmit, setInvalidSubmit] = useState(false);
+  const [submitError, setSubmitError] = useState("");
+  const form = useForm<WizardValues>({
+    resolver: zodResolver(schema),
+    defaultValues: { name: "", domain: "example.com", owner: "coaxys" },
+  });
+
+  const mutation = useMutation({
+    mutationFn: async (values: WizardValues) => {
+      if (kind === "website") {
+        return panelService.websites.create({
+          name: values.name,
+          domain: values.domain,
+          runtime: "PHP",
+          environment: "production",
+        });
+      }
+      if (kind === "database") return panelService.databases.create(values.name);
+      if (kind === "backup") return panelService.backups.create(values.name);
+      return panelService.files.operation(`${kind}: ${values.name}`);
+    },
+    onSuccess: async (response) => {
+      if (response.error) {
+        setSubmitError(response.error.message);
+        for (const [field, message] of Object.entries(response.error.fields ?? {})) {
+          if (field === "name" || field === "domain" || field === "owner") {
+            form.setError(field, { message });
+          }
+        }
+        return;
+      }
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["dashboard-summary"] }),
+        queryClient.invalidateQueries({ queryKey: ["websites"] }),
+        queryClient.invalidateQueries({ queryKey: ["databases"] }),
+        queryClient.invalidateQueries({ queryKey: ["backups"] }),
+      ]);
+      setSubmitted(true);
+    },
+    onError: (error) => {
+      setSubmitError(error instanceof Error ? error.message : "The request failed.");
+    },
+  });
+
+  function onSubmit(values: WizardValues) {
+    setInvalidSubmit(false);
+    setSubmitError("");
+    if (step < steps.length - 1) {
+      setStep((value) => value + 1);
+      return;
+    }
+    mutation.mutate(values);
+  }
+
+  if (submitted) {
+    return (
+      <Card>
+        <CardContent className="flex min-h-72 flex-col items-center justify-center text-center">
+          <CheckCircle2 className="mb-3 h-10 w-10 text-success" />
+          <h3 className="text-lg font-semibold">{kind} queued successfully</h3>
+          <p className="mt-1 max-w-md text-sm text-muted-foreground">
+            The request was accepted by the CoaxysPanel service layer and the related views are
+            refreshing with the latest control-plane data.
+          </p>
+          <Button className="mt-4" onClick={() => setSubmitted(false)}>
+            Create another
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="grid gap-4 lg:grid-cols-[260px_1fr]">
+      <Card className="h-fit">
+        <CardContent className="p-3">
+          <ol className="flex gap-1 overflow-x-auto lg:flex-col lg:overflow-visible">
+            {steps.map((item, index) => {
+              const state = index === step ? "current" : index < step ? "done" : "todo";
+              return (
+                <li key={item} className="shrink-0 lg:shrink">
+                  <button
+                    className={`focus-ring flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-left text-sm transition-colors ${
+                      state === "current"
+                        ? "bg-primary/10 font-medium text-primary"
+                        : "text-muted-foreground hover:bg-muted/70 hover:text-foreground"
+                    }`}
+                    onClick={() => setStep(index)}
+                    type="button"
+                  >
+                    <span
+                      className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold transition-colors ${
+                        state === "current"
+                          ? "bg-primary text-primary-foreground shadow-glow-sm"
+                          : state === "done"
+                            ? "bg-success/15 text-success"
+                            : "bg-muted text-muted-foreground"
+                      }`}
+                    >
+                      {state === "done" ? <CheckCircle2 className="h-3.5 w-3.5" /> : index + 1}
+                    </span>
+                    <span className="whitespace-nowrap lg:whitespace-normal">{item}</span>
+                  </button>
+                </li>
+              );
+            })}
+          </ol>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>{steps[step]}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form
+            className="grid gap-4 lg:grid-cols-2"
+            onSubmit={form.handleSubmit(onSubmit, () => setInvalidSubmit(true))}
+          >
+            <label className="space-y-1 text-sm">
+              <span className="font-medium">Name</span>
+              <Input {...form.register("name")} placeholder={`${kind} name`} />
+              {form.formState.errors.name ? (
+                <span className="text-xs text-destructive">
+                  {form.formState.errors.name.message}
+                </span>
+              ) : invalidSubmit ? (
+                <span className="text-xs text-destructive">Use at least three characters.</span>
+              ) : null}
+            </label>
+            <label className="space-y-1 text-sm">
+              <span className="font-medium">Domain or target</span>
+              <Input {...form.register("domain")} />
+              {form.formState.errors.domain ? (
+                <span className="text-xs text-destructive">
+                  {form.formState.errors.domain.message}
+                </span>
+              ) : null}
+            </label>
+            <label className="space-y-1 text-sm">
+              <span className="font-medium">Owner</span>
+              <Input {...form.register("owner")} />
+              {form.formState.errors.owner ? (
+                <span className="text-xs text-destructive">
+                  {form.formState.errors.owner.message}
+                </span>
+              ) : null}
+            </label>
+            <div className="rounded-md border border-border/60 bg-muted/40 p-3 text-sm lg:col-span-2">
+              <div className="mb-2 font-medium">Configuration preview</div>
+              <div className="flex flex-wrap gap-2">
+                <Badge variant="outline">validation enabled</Badge>
+                <Badge variant="outline">mock latency</Badge>
+                <Badge variant="outline">audit metadata</Badge>
+                <Badge variant="outline">permission check</Badge>
+              </div>
+            </div>
+            {submitError ? (
+              <div className="rounded-md border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive lg:col-span-2">
+                {submitError}
+              </div>
+            ) : null}
+            <div className="relative z-10 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end lg:col-span-2">
+              <Button
+                type="button"
+                variant="outline"
+                disabled={step === 0 || mutation.isPending}
+                onClick={() => setStep((value) => value - 1)}
+                className="w-full sm:w-auto"
+              >
+                Back
+              </Button>
+              <Button type="submit" className="w-full sm:w-auto" disabled={mutation.isPending}>
+                {mutation.isPending
+                  ? "Submitting..."
+                  : step === steps.length - 1
+                    ? "Create"
+                    : "Continue"}
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}