diff --git a/web-ui/src/app/cases/new/page.tsx b/web-ui/src/app/cases/new/page.tsx
new file mode 100644
index 0000000..3fa0d32
--- /dev/null
+++ b/web-ui/src/app/cases/new/page.tsx
@@ -0,0 +1,26 @@
+import Link from "next/link";
+import { AppShell } from "@/components/app-shell";
+import { CaseWizard } from "@/components/wizard/case-wizard";
+
+export default function NewCasePage() {
+  return (
+    <AppShell>
+      <section className="space-y-6">
+        <header>
+          <nav className="text-[0.78rem] text-ink-muted flex items-center gap-2 mb-1">
+            <Link href="/" className="hover:text-gold-deep">בית</Link>
+            <span aria-hidden>·</span>
+            <span className="text-navy">תיק חדש</span>
+          </nav>
+          <h1 className="text-navy mb-0">יצירת תיק ערר</h1>
+          <p className="text-ink-muted text-sm mt-1 max-w-2xl">
+            שלושה שלבים קצרים — פרטי יסוד, צדדים, והשלמות. התיק ייווצר ב-DB
+            וב-Gitea מיד בשמירה.
+          </p>
+        </header>
+
+        <CaseWizard />
+      </section>
+    </AppShell>
+  );
+}
diff --git a/web-ui/src/app/page.tsx b/web-ui/src/app/page.tsx
index a8e3992..607232b 100644
--- a/web-ui/src/app/page.tsx
+++ b/web-ui/src/app/page.tsx
@@ -1,10 +1,12 @@
 "use client";
 
+import Link from "next/link";
 import { AppShell } from "@/components/app-shell";
 import { KPICards } from "@/components/cases/kpi-cards";
 import { StatusDonut } from "@/components/cases/status-donut";
 import { CasesTable } from "@/components/cases/cases-table";
 import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
 import { useCases } from "@/lib/api/cases";
 
 export default function HomePage() {
@@ -24,6 +26,9 @@ export default function HomePage() {
               12 הבלוקים.
             </p>
           </div>
+          <Button asChild className="bg-navy hover:bg-navy-soft text-parchment">
+            <Link href="/cases/new">+ תיק חדש</Link>
+          </Button>
         </header>
 
         <div className="h-[2px] bg-gradient-to-l from-transparent via-gold to-transparent" />
diff --git a/web-ui/src/components/wizard/case-wizard.tsx b/web-ui/src/components/wizard/case-wizard.tsx
new file mode 100644
index 0000000..30b89fe
--- /dev/null
+++ b/web-ui/src/components/wizard/case-wizard.tsx
@@ -0,0 +1,283 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useForm, Controller } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { toast } from "sonner";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import { PartiesField } from "@/components/wizard/parties-field";
+import { useCreateCase } from "@/lib/api/cases";
+import {
+  caseCreateSchema, committeeTypes, expectedOutcomes,
+  type CaseCreateInput,
+} from "@/lib/schemas/case";
+
+const STEPS = [
+  { key: "basics",  label: "פרטי יסוד" },
+  { key: "parties", label: "צדדים"      },
+  { key: "details", label: "השלמות"     },
+] as const;
+
+type StepKey = (typeof STEPS)[number]["key"];
+
+/* Fields validated at each step — lets the user fix just what's on screen
+ * before moving forward, instead of surfacing all errors from page 1. */
+const STEP_FIELDS: Record<StepKey, (keyof CaseCreateInput)[]> = {
+  basics:  ["case_number", "title", "committee_type"],
+  parties: ["appellants", "respondents"],
+  details: ["subject", "hearing_date", "expected_outcome", "notes", "property_address", "permit_number"],
+};
+
+function FieldError({ message }: { message?: string }) {
+  if (!message) return null;
+  return <p className="text-[0.72rem] text-danger mt-1">{message}</p>;
+}
+
+export function CaseWizard() {
+  const router = useRouter();
+  const [step, setStep] = useState<StepKey>("basics");
+  const mutate = useCreateCase();
+
+  const form = useForm<CaseCreateInput>({
+    resolver: zodResolver(caseCreateSchema),
+    mode: "onBlur",
+    defaultValues: {
+      case_number: "",
+      title: "",
+      appellants: [],
+      respondents: [],
+      subject: "",
+      property_address: "",
+      permit_number: "",
+      committee_type: "ועדה מקומית",
+      hearing_date: "",
+      notes: "",
+      expected_outcome: "",
+    },
+  });
+
+  const stepIndex = STEPS.findIndex((s) => s.key === step);
+  const isLast = stepIndex === STEPS.length - 1;
+
+  const goNext = async () => {
+    const ok = await form.trigger(STEP_FIELDS[step]);
+    if (!ok) return;
+    setStep(STEPS[stepIndex + 1].key);
+  };
+  const goBack = () => setStep(STEPS[stepIndex - 1].key);
+
+  const onSubmit = form.handleSubmit(async (values) => {
+    try {
+      const res = await mutate.mutateAsync(values);
+      toast.success("תיק חדש נוצר");
+      const created = res?.case_number || values.case_number;
+      router.push(`/cases/${encodeURIComponent(created)}`);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "שגיאה ביצירת תיק");
+    }
+  });
+
+  return (
+    <Card className="bg-surface border-rule shadow-sm max-w-3xl">
+      <CardContent className="px-6 py-6 space-y-6">
+        {/* Stepper */}
+        <ol className="flex items-center gap-2 text-sm">
+          {STEPS.map((s, i) => {
+            const active = i === stepIndex;
+            const done = i < stepIndex;
+            return (
+              <li key={s.key} className="flex items-center gap-2">
+                <span
+                  className={`
+                    inline-flex items-center justify-center w-7 h-7 rounded-full
+                    font-display font-bold text-sm tabular-nums transition-colors
+                    ${done ? "bg-success text-parchment" : active ? "bg-navy text-parchment" : "bg-rule text-ink-muted"}
+                  `}
+                >
+                  {done ? "✓" : i + 1}
+                </span>
+                <span className={active ? "text-navy font-semibold" : "text-ink-muted"}>
+                  {s.label}
+                </span>
+                {i < STEPS.length - 1 && (
+                  <span className="w-8 h-px bg-rule mx-1" aria-hidden />
+                )}
+              </li>
+            );
+          })}
+        </ol>
+
+        <form onSubmit={onSubmit} className="space-y-5">
+          {step === "basics" && (
+            <div className="space-y-4">
+              <div>
+                <Label htmlFor="case_number" className="text-navy">
+                  מספר תיק <span className="text-danger">*</span>
+                </Label>
+                <Input
+                  id="case_number"
+                  placeholder="1234 או 8001/2026"
+                  {...form.register("case_number")}
+                  className="mt-1 tabular-nums"
+                />
+                <FieldError message={form.formState.errors.case_number?.message} />
+              </div>
+              <div>
+                <Label htmlFor="title" className="text-navy">
+                  כותרת <span className="text-danger">*</span>
+                </Label>
+                <Input id="title" {...form.register("title")} className="mt-1" />
+                <FieldError message={form.formState.errors.title?.message} />
+              </div>
+              <div>
+                <Label className="text-navy">סוג ועדה</Label>
+                <Controller
+                  control={form.control}
+                  name="committee_type"
+                  render={({ field }) => (
+                    <Select value={field.value} onValueChange={field.onChange} dir="rtl">
+                      <SelectTrigger className="mt-1">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {committeeTypes.map((t) => (
+                          <SelectItem key={t} value={t}>{t}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  )}
+                />
+              </div>
+            </div>
+          )}
+
+          {step === "parties" && (
+            <div className="space-y-5">
+              <Controller
+                control={form.control}
+                name="appellants"
+                render={({ field, fieldState }) => (
+                  <PartiesField
+                    label="עוררים *"
+                    value={field.value}
+                    onChange={field.onChange}
+                    error={fieldState.error?.message}
+                  />
+                )}
+              />
+              <div className="h-px bg-rule" />
+              <Controller
+                control={form.control}
+                name="respondents"
+                render={({ field, fieldState }) => (
+                  <PartiesField
+                    label="משיבים *"
+                    value={field.value}
+                    onChange={field.onChange}
+                    error={fieldState.error?.message}
+                  />
+                )}
+              />
+            </div>
+          )}
+
+          {step === "details" && (
+            <div className="space-y-4">
+              <div>
+                <Label htmlFor="subject" className="text-navy">נושא</Label>
+                <Input id="subject" {...form.register("subject")} className="mt-1" />
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <Label htmlFor="property_address" className="text-navy">כתובת הנכס</Label>
+                  <Input id="property_address" {...form.register("property_address")} className="mt-1" />
+                </div>
+                <div>
+                  <Label htmlFor="permit_number" className="text-navy">מס׳ תכנית/בקשה</Label>
+                  <Input id="permit_number" {...form.register("permit_number")} className="mt-1" />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <Label htmlFor="hearing_date" className="text-navy">תאריך דיון</Label>
+                  <Input
+                    id="hearing_date"
+                    type="date"
+                    {...form.register("hearing_date")}
+                    className="mt-1 tabular-nums"
+                  />
+                  <FieldError message={form.formState.errors.hearing_date?.message} />
+                </div>
+                <div>
+                  <Label className="text-navy">תוצאה צפויה</Label>
+                  <Controller
+                    control={form.control}
+                    name="expected_outcome"
+                    render={({ field }) => (
+                      <Select
+                        value={field.value || "__none__"}
+                        onValueChange={(v) => field.onChange(v === "__none__" ? "" : v)}
+                        dir="rtl"
+                      >
+                        <SelectTrigger className="mt-1">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {expectedOutcomes.map((o) => (
+                            <SelectItem key={o.value || "none"} value={o.value || "__none__"}>
+                              {o.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    )}
+                  />
+                </div>
+              </div>
+              <div>
+                <Label htmlFor="notes" className="text-navy">הערות</Label>
+                <Textarea id="notes" rows={4} {...form.register("notes")} className="mt-1" />
+              </div>
+            </div>
+          )}
+
+          <div className="flex items-center justify-between gap-3 pt-2">
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={goBack}
+              disabled={stepIndex === 0 || mutate.isPending}
+            >
+              ← הקודם
+            </Button>
+            {isLast ? (
+              <Button
+                type="submit"
+                disabled={mutate.isPending}
+                className="bg-navy hover:bg-navy-soft text-parchment"
+              >
+                {mutate.isPending ? "יוצר תיק…" : "צור תיק"}
+              </Button>
+            ) : (
+              <Button
+                type="button"
+                onClick={goNext}
+                className="bg-navy hover:bg-navy-soft text-parchment"
+              >
+                הבא →
+              </Button>
+            )}
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web-ui/src/components/wizard/parties-field.tsx b/web-ui/src/components/wizard/parties-field.tsx
new file mode 100644
index 0000000..6b716f1
--- /dev/null
+++ b/web-ui/src/components/wizard/parties-field.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { useState } from "react";
+import { X, Plus } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+/*
+ * Minimal tag-style editor for a list of party names (appellants / respondents).
+ * Backed by a controlled string[] — submits as the same shape the FastAPI
+ * CaseCreateRequest expects. Enter adds the current draft; X removes a chip.
+ */
+
+export function PartiesField({
+  label,
+  value,
+  onChange,
+  error,
+}: {
+  label: string;
+  value: string[];
+  onChange: (next: string[]) => void;
+  error?: string;
+}) {
+  const [draft, setDraft] = useState("");
+
+  const add = () => {
+    const trimmed = draft.trim();
+    if (!trimmed) return;
+    if (value.includes(trimmed)) {
+      setDraft("");
+      return;
+    }
+    onChange([...value, trimmed]);
+    setDraft("");
+  };
+
+  const remove = (name: string) => {
+    onChange(value.filter((v) => v !== name));
+  };
+
+  return (
+    <div>
+      <label className="block text-sm font-medium text-navy mb-1.5">{label}</label>
+      {value.length > 0 && (
+        <ul className="flex flex-wrap gap-2 mb-2">
+          {value.map((name) => (
+            <li
+              key={name}
+              className="
+                inline-flex items-center gap-1.5 rounded-full
+                bg-gold-wash text-gold-deep border border-gold/40
+                px-3 py-1 text-sm
+              "
+            >
+              <span>{name}</span>
+              <button
+                type="button"
+                onClick={() => remove(name)}
+                className="hover:text-danger transition-colors"
+                aria-label={`הסר ${name}`}
+              >
+                <X className="w-3.5 h-3.5" />
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+      <div className="flex gap-2">
+        <Input
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              add();
+            }
+          }}
+          placeholder="שם מלא של הצד"
+          dir="rtl"
+        />
+        <Button type="button" variant="outline" size="sm" onClick={add}>
+          <Plus className="w-4 h-4" />
+        </Button>
+      </div>
+      {error && <p className="text-[0.72rem] text-danger mt-1">{error}</p>}
+    </div>
+  );
+}
diff --git a/web-ui/src/lib/schemas/case.ts b/web-ui/src/lib/schemas/case.ts
index 96e308b..022342c 100644
--- a/web-ui/src/lib/schemas/case.ts
+++ b/web-ui/src/lib/schemas/case.ts
@@ -51,15 +51,15 @@ export const caseCreateSchema = z.object({
   respondents: z
     .array(z.string().trim().min(1).refine((v) => hebrewPartyRe.test(v), "שם לא תקין"))
     .min(1, "חייב להיות לפחות משיב אחד"),
-  subject: z.string().trim().max(500).default(""),
-  property_address: z.string().trim().max(200).default(""),
-  permit_number: z.string().trim().max(100).default(""),
-  committee_type: z.enum(committeeTypes).default("ועדה מקומית"),
-  hearing_date: dateString.default(""),
-  notes: z.string().trim().max(2000).default(""),
-  expected_outcome: z
-    .enum(expectedOutcomes.map((o) => o.value) as [string, ...string[]])
-    .default(""),
+  subject: z.string().trim().max(500),
+  property_address: z.string().trim().max(200),
+  permit_number: z.string().trim().max(100),
+  committee_type: z.enum(committeeTypes),
+  hearing_date: dateString,
+  notes: z.string().trim().max(2000),
+  expected_outcome: z.enum(
+    expectedOutcomes.map((o) => o.value) as [string, ...string[]],
+  ),
 });
 
 export type CaseCreateInput = z.infer<typeof caseCreateSchema>;