From bc856402e9314251ed77e49378ac82ea3d15335f Mon Sep 17 00:00:00 2001
From: gunshiz <spsshop1047@gmail.com>
Date: Mon, 27 Jul 2026 19:11:27 +0700
Subject: [PATCH] Improve admin form workspace UX

---
 .gitignore                                    |   3 +-
 app/actions/questions.ts                      |  22 +-
 app/admin/form/[id]/client.tsx                | 614 +++++++++---------
 app/admin/form/[id]/extra/client.tsx          | 301 ++++++---
 app/admin/form/[id]/extra/page.tsx            |  11 +-
 app/admin/form/[id]/layout.tsx                |  25 +-
 app/admin/form/[id]/loading.tsx               |  27 +
 app/admin/form/[id]/page.tsx                  |  11 +-
 app/admin/form/[id]/preview/page.tsx          |  39 ++
 .../[id]/result/[submissionId]/client.tsx     |  54 +-
 .../form/[id]/result/[submissionId]/page.tsx  |  55 +-
 app/admin/form/[id]/result/export/route.ts    | 104 +++
 app/admin/form/[id]/result/page.tsx           | 251 ++++---
 app/admin/form/actions.ts                     |  31 +
 app/admin/form/page.tsx                       |  64 +-
 app/form/client.tsx                           |  20 +-
 bun.lock                                      |  19 +
 components/delete-buttons.tsx                 |  38 +-
 components/form-admin-sidebar.tsx             | 163 +++++
 components/guarded-link.tsx                   |  39 ++
 components/results-filters.tsx                | 194 ++++++
 components/rich-text-editor.tsx               |  17 +
 components/ui/calendar.tsx                    | 222 +++++++
 components/ui/popover.tsx                     |  89 +++
 db/schema/form.ts                             |   6 +
 drizzle/0012_clammy_the_stranger.sql          |   1 +
 drizzle/meta/_journal.json                    |   7 +
 hooks/use-debounced-autosave.ts               | 104 +++
 lib/admin-form-results.ts                     | 133 ++++
 lib/admin-form-save-bridge.ts                 |  16 +
 lib/admin-form-ux.test.ts                     |  68 ++
 lib/discord-webhook-settings.ts               |  37 ++
 package.json                                  |   5 +
 33 files changed, 2194 insertions(+), 596 deletions(-)
 create mode 100644 app/admin/form/[id]/loading.tsx
 create mode 100644 app/admin/form/[id]/preview/page.tsx
 create mode 100644 app/admin/form/[id]/result/export/route.ts
 create mode 100644 components/form-admin-sidebar.tsx
 create mode 100644 components/guarded-link.tsx
 create mode 100644 components/results-filters.tsx
 create mode 100644 components/ui/calendar.tsx
 create mode 100644 components/ui/popover.tsx
 create mode 100644 drizzle/0012_clammy_the_stranger.sql
 create mode 100644 hooks/use-debounced-autosave.ts
 create mode 100644 lib/admin-form-results.ts
 create mode 100644 lib/admin-form-save-bridge.ts
 create mode 100644 lib/admin-form-ux.test.ts
 create mode 100644 lib/discord-webhook-settings.ts

diff --git a/.gitignore b/.gitignore
index 34573de..ed2a7fe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,4 +41,5 @@ yarn-error.log*
 next-env.d.ts
 
 public/form
-drizzle
\ No newline at end of file
+drizzle/*
+!drizzle/0012_clammy_the_stranger.sql
diff --git a/app/actions/questions.ts b/app/actions/questions.ts
index f4ce4f5..094eed5 100644
--- a/app/actions/questions.ts
+++ b/app/actions/questions.ts
@@ -22,15 +22,18 @@ export async function createQuestion(
   }
 ) {
   await requireAdmin();
-  await db.insert(questions).values({
-    formId,
-    type: data.type,
-    label: sanitizeHtml(data.label),
-    required: data.required,
-    displayOrder: data.displayOrder,
-    options: data.options ?? [],
-    allowOther: false,
-  });
+  const [question] = await db
+    .insert(questions)
+    .values({
+      formId,
+      type: data.type,
+      label: sanitizeHtml(data.label),
+      required: data.required,
+      displayOrder: data.displayOrder,
+      options: data.options ?? [],
+      allowOther: false,
+    })
+    .returning();
   void sse.forms.pub("update", {
     formId,
     entity: "question",
@@ -38,6 +41,7 @@ export async function createQuestion(
   });
   revalidatePath("/form");
   revalidatePath("/admin/form");
+  return question;
 }
 
 export async function updateQuestion(
diff --git a/app/admin/form/[id]/client.tsx b/app/admin/form/[id]/client.tsx
index f7d248e..943b9cd 100644
--- a/app/admin/form/[id]/client.tsx
+++ b/app/admin/form/[id]/client.tsx
@@ -1,18 +1,15 @@
 "use client";
 
 import React, { useState, useRef, useCallback, useEffect } from "react";
-import { useRouter, usePathname } from "next/navigation";
-import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } 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 { Switch } from "@/components/ui/switch";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Checkbox } from "@/components/ui/checkbox";
 import { toast } from "sonner";
 import { updateForm } from "@/app/admin/form/actions";
 import {
@@ -21,25 +18,49 @@ import {
   deleteQuestion,
   bulkUpdateQuestions,
 } from "@/app/actions/questions";
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarHeader,
-  SidebarFooter,
-} from "@/components/ui/sidebar";
-import { Plus, Trash, ArrowUp, ArrowDown, Loader2, Image as ImageIcon, X, Check, LayoutDashboard, ClipboardList, ArrowLeft, Webhook } from "lucide-react";
+import { Plus, Trash, ArrowUp, ArrowDown, Loader2, Image as ImageIcon, X, Check, GripVertical, AlertCircle } from "lucide-react";
 import Image from 'next/image';
 import { RichTextEditor } from "@/components/rich-text-editor";
-import { FormattedText } from "@/components/formatted-text";
-import { ThemeToggle } from "@/components/theme-toggle";
-import { DropdownMenuAvatar, DiscordMemberProfile } from "@/components/dropdown-menu-avatar";
 import { getErrorMessage } from "@/lib/errors";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+  useDebouncedAutoSave,
+  type AutoSaveStatus,
+} from "@/hooks/use-debounced-autosave";
+import { stripHtml } from "@/lib/utils";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 
 interface Question {
   id: string;
@@ -63,8 +84,6 @@ interface FormEditorClientProps {
   initialQuestions: Question[];
 }
 
-type AutoSaveStatus = "idle" | "saving" | "saved";
-
 export default function FormEditorClient({ form, initialQuestions }: FormEditorClientProps) {
   const router = useRouter();
   const [formTitle, setFormTitle] = useState(form.title);
@@ -72,20 +91,7 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
   const [formIsOpen, setFormIsOpen] = useState(form.isOpen);
   const [questions, setQuestions] = useState<Question[]>(initialQuestions);
   const [uploadingId, setUploadingId] = useState<string | null>(null);
-
-  const [formSaveStatus, setFormSaveStatus] = useState<AutoSaveStatus>("idle");
-  const [questionsSaveStatus, setQuestionsSaveStatus] = useState<AutoSaveStatus>("idle");
-
-  const formTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const questionsTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const formDirtyRef = useRef(false);
-  const questionsDirtyRef = useRef(false);
-  const formSavingRef = useRef(false);
-  const questionsSavingRef = useRef(false);
-  const formRevisionRef = useRef(0);
-  const questionsRevisionRef = useRef(0);
-  const activeFormSaveRef = useRef(0);
-  const activeQuestionsSaveRef = useRef(0);
+  const [addingQuestion, setAddingQuestion] = useState(false);
 
   // Refs to always read latest state inside debounced callbacks
   const formTitleRef = useRef(formTitle);
@@ -100,125 +106,89 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
     questionsRef.current = questions;
   }, [formDescription, formIsOpen, formTitle, questions]);
 
-  const autoSaveForm = useCallback(() => {
-    if (formTimerRef.current) clearTimeout(formTimerRef.current);
-    setFormSaveStatus("idle");
-    formTimerRef.current = setTimeout(async () => {
+  const saveForm = useCallback(async () => {
       const title = formTitleRef.current;
-      if (!title.trim()) return;
-      const revision = formRevisionRef.current;
-      activeFormSaveRef.current = revision;
-      formSavingRef.current = true;
-      setFormSaveStatus("saving");
-      try {
-        await updateForm(form.id, {
-          title,
-          description: formDescriptionRef.current,
-          isOpen: formIsOpenRef.current,
-        });
-        if (formRevisionRef.current === revision) {
-          formDirtyRef.current = false;
-        }
-        setFormSaveStatus("saved");
-        router.refresh();
-        setTimeout(() => setFormSaveStatus("idle"), 2000);
-      } catch {
-        toast.error("Failed to auto-save form settings.");
-        setFormSaveStatus("idle");
-      } finally {
-        if (activeFormSaveRef.current === revision) {
-          formSavingRef.current = false;
-        }
+      if (!title.trim()) {
+        throw new Error("Form title is required.");
       }
-    }, 1000);
+      await updateForm(form.id, {
+        title: title.trim(),
+        description: formDescriptionRef.current,
+        isOpen: formIsOpenRef.current,
+      });
+      router.refresh();
   }, [form.id, router]);
 
-  const autoSaveQuestions = useCallback(() => {
-    if (questionsTimerRef.current) clearTimeout(questionsTimerRef.current);
-    setQuestionsSaveStatus("idle");
-    questionsTimerRef.current = setTimeout(async () => {
+  const saveQuestions = useCallback(async () => {
       const current = questionsRef.current;
-      if (current.length === 0) return;
-      const revision = questionsRevisionRef.current;
-      activeQuestionsSaveRef.current = revision;
-      questionsSavingRef.current = true;
-      setQuestionsSaveStatus("saving");
-      try {
-        const formattedUpdates = current.map(q => ({
-          ...q,
-          options: q.options === null ? [] : q.options,
-          allowOther: q.allowOther,
-        }));
-        await bulkUpdateQuestions(form.id, formattedUpdates);
-        if (questionsRevisionRef.current === revision) {
-          questionsDirtyRef.current = false;
-        }
-        setQuestionsSaveStatus("saved");
-        router.refresh();
-        setTimeout(() => setQuestionsSaveStatus("idle"), 2000);
-      } catch {
-        toast.error("Failed to auto-save questions.");
-        setQuestionsSaveStatus("idle");
-      } finally {
-        if (activeQuestionsSaveRef.current === revision) {
-          questionsSavingRef.current = false;
-        }
-      }
-    }, 1500);
+      const formattedUpdates = current.map(q => ({
+        ...q,
+        options: q.options === null ? [] : q.options,
+        allowOther: q.allowOther,
+      }));
+      await bulkUpdateQuestions(form.id, formattedUpdates);
+      router.refresh();
   }, [form.id, router]);
 
-  // Cleanup timers on unmount
-  useEffect(() => {
-    return () => {
-      if (formTimerRef.current) clearTimeout(formTimerRef.current);
-      if (questionsTimerRef.current) clearTimeout(questionsTimerRef.current);
-    };
-  }, []);
+  const formAutoSave = useDebouncedAutoSave({ save: saveForm, delay: 1000 });
+  const questionsAutoSave = useDebouncedAutoSave({
+    save: saveQuestions,
+    delay: 1200,
+  });
 
   const handleFormTitleChange = (val: string) => {
-    formDirtyRef.current = true;
-    formRevisionRef.current += 1;
+    formTitleRef.current = val;
     setFormTitle(val);
-    autoSaveForm();
+    formAutoSave.schedule();
   };
 
   const handleFormDescriptionChange = (val: string) => {
-    formDirtyRef.current = true;
-    formRevisionRef.current += 1;
+    formDescriptionRef.current = val;
     setFormDescription(val);
-    autoSaveForm();
+    formAutoSave.schedule();
   };
 
   const handleFormIsOpenChange = (val: boolean) => {
-    formDirtyRef.current = true;
-    formRevisionRef.current += 1;
+    formIsOpenRef.current = val;
     setFormIsOpen(val);
-    autoSaveForm();
+    formAutoSave.schedule();
   };
 
   const handleAddQuestion = async () => {
+    setAddingQuestion(true);
     try {
       const displayOrder = questions.length;
-      await createQuestion(form.id, {
+      const question = await createQuestion(form.id, {
         type: "text",
         label: `Untitled Question ${questions.length + 1}`,
         required: false,
         displayOrder,
         options: [],
       });
+      setQuestions((current) => {
+        const next = [...current, question];
+        questionsRef.current = next;
+        return next;
+      });
       router.refresh();
     } catch (err: unknown) {
-      console.error("Failed to add question:", err);
+      toast.error(getErrorMessage(err, "Could not add the question."));
+    } finally {
+      setAddingQuestion(false);
     }
   };
 
   const handleUpdateQuestion = (id: string, updates: Partial<Question>) => {
-    questionsDirtyRef.current = true;
-    questionsRevisionRef.current += 1;
     setQuestions((prev) =>
-      prev.map((q) => (q.id === id ? { ...q, ...updates } as Question : q))
+      {
+        const next = prev.map((q) =>
+          q.id === id ? { ...q, ...updates } as Question : q
+        );
+        questionsRef.current = next;
+        return next;
+      }
     );
-    autoSaveQuestions();
+    questionsAutoSave.schedule();
   };
 
   const handleDeleteQuestion = async (id: string) => {
@@ -231,7 +201,7 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
       });
       router.refresh();
     } catch (err: unknown) {
-      console.error("Failed to delete question:", err);
+      toast.error(getErrorMessage(err, "Could not delete the question."));
     }
   };
 
@@ -249,10 +219,9 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
       q.displayOrder = idx;
     });
 
-    questionsDirtyRef.current = true;
-    questionsRevisionRef.current += 1;
+    questionsRef.current = newQuestions;
     setQuestions(newQuestions);
-    autoSaveQuestions();
+    questionsAutoSave.schedule();
   };
 
   const handleImageUpload = async (questionId: string, e: React.ChangeEvent<HTMLInputElement>) => {
@@ -329,26 +298,28 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
     handleUpdateQuestion(question.id, { options });
   };
 
-  useEffect(() => {
-    if (formDirtyRef.current || formSavingRef.current) return;
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
 
-    setFormTitle(form.title);
-    setFormDescription(form.description || "");
-    setFormIsOpen(form.isOpen);
-    formTitleRef.current = form.title;
-    formDescriptionRef.current = form.description || "";
-    formIsOpenRef.current = form.isOpen;
-  }, [form]);
-
-  useEffect(() => {
-    if (questionsDirtyRef.current || questionsSavingRef.current) return;
-
-    setQuestions(initialQuestions);
-    questionsRef.current = initialQuestions;
-  }, [initialQuestions]);
+  const handleDragEnd = ({ active, over }: DragEndEvent) => {
+    if (!over || active.id === over.id) return;
+    const oldIndex = questions.findIndex((question) => question.id === active.id);
+    const newIndex = questions.findIndex((question) => question.id === over.id);
+    const next = arrayMove(questions, oldIndex, newIndex).map((question, index) => ({
+      ...question,
+      displayOrder: index,
+    }));
+    questionsRef.current = next;
+    setQuestions(next);
+    questionsAutoSave.schedule();
+  };
 
   return (
-    <div className="space-y-6">
+    <div className="flex flex-col gap-6">
       <Card>
         <CardHeader>
           <div className="flex items-center justify-between">
@@ -356,7 +327,11 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
               <CardTitle>Form Settings</CardTitle>
               <CardDescription>Configure the main title and description of your form.</CardDescription>
             </div>
-            <SaveStatusIndicator status={formSaveStatus} />
+            <SaveStatusIndicator
+              status={formAutoSave.status}
+              error={formAutoSave.error}
+              onRetry={formAutoSave.retry}
+            />
           </div>
         </CardHeader>
         <CardContent className="space-y-4">
@@ -367,7 +342,11 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
               value={formTitle}
               onChange={(e) => handleFormTitleChange(e.target.value)}
               placeholder="e.g. Untitled Form"
+              aria-invalid={!formTitle.trim()}
             />
+            {!formTitle.trim() && (
+              <p className="text-sm text-destructive">Form title is required.</p>
+            )}
           </div>
           <div className="space-y-2">
             <Label htmlFor="form-description">Description</Label>
@@ -396,18 +375,52 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
           <h2 className="text-xl font-bold">Questions</h2>
-          <SaveStatusIndicator status={questionsSaveStatus} />
+          <SaveStatusIndicator
+            status={questionsAutoSave.status}
+            error={questionsAutoSave.error}
+            onRetry={questionsAutoSave.retry}
+          />
         </div>
-        <Button onClick={handleAddQuestion} variant="outline" className="gap-2">
-          <Plus className="w-4 h-4" />
-          Add Question
+        <Button onClick={handleAddQuestion} variant="outline" disabled={addingQuestion}>
+          {addingQuestion ? (
+            <Loader2 data-icon="inline-start" className="animate-spin" />
+          ) : (
+            <Plus data-icon="inline-start" />
+          )}
+          {addingQuestion ? "Adding" : "Add question"}
         </Button>
       </div>
 
-      <div className="space-y-4">
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext
+          items={questions.map((question) => question.id)}
+          strategy={verticalListSortingStrategy}
+        >
+          <div className="flex flex-col gap-4">
         {questions.map((q, index) => (
-          <Card key={q.id} className="relative">
-            <CardContent className="pt-6 space-y-4">
+          <SortableQuestion key={q.id} id={q.id} position={index + 1}>
+            <Accordion type="single" collapsible defaultValue={index === 0 ? q.id : undefined}>
+              <AccordionItem value={q.id} className="border-0">
+                <Card>
+                  <CardHeader className="pl-12">
+                    <AccordionTrigger className="py-0 hover:no-underline">
+                      <div className="min-w-0 text-left">
+                        <CardTitle className="truncate text-base">
+                          {stripHtml(q.label) || `Untitled question ${index + 1}`}
+                        </CardTitle>
+                        <CardDescription>
+                          Question {index + 1} · {questionTypeLabel(q.type)}
+                          {q.required ? " · Required" : ""}
+                        </CardDescription>
+                      </div>
+                    </AccordionTrigger>
+                  </CardHeader>
+                  <AccordionContent>
+            <CardContent className="flex flex-col gap-4 pt-0">
               <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
                 <div className="flex-1 w-full">
                   <RichTextEditor
@@ -426,10 +439,12 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="text">Short Answer</SelectItem>
-                      <SelectItem value="textarea">Paragraph</SelectItem>
-                      <SelectItem value="radio">Choose one</SelectItem>
-                      <SelectItem value="checkbox">Multiple choose</SelectItem>
+                      <SelectGroup>
+                        <SelectItem value="text">Short answer</SelectItem>
+                        <SelectItem value="textarea">Paragraph</SelectItem>
+                        <SelectItem value="radio">Choose one</SelectItem>
+                        <SelectItem value="checkbox">Choose multiple</SelectItem>
+                      </SelectGroup>
                     </SelectContent>
                   </Select>
 
@@ -440,8 +455,9 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
                       className="h-8 w-8"
                       disabled={index === 0}
                       onClick={() => handleMove(index, "up")}
+                      aria-label={`Move question ${index + 1} up`}
                     >
-                      <ArrowUp className="w-4 h-4" />
+                      <ArrowUp />
                     </Button>
                     <Button
                       variant="ghost"
@@ -449,8 +465,9 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
                       className="h-8 w-8"
                       disabled={index === questions.length - 1}
                       onClick={() => handleMove(index, "down")}
+                      aria-label={`Move question ${index + 1} down`}
                     >
-                      <ArrowDown className="w-4 h-4" />
+                      <ArrowDown />
                     </Button>
                   </div>
                 </div>
@@ -470,10 +487,11 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
                     <Button
                       variant="destructive"
                       size="icon"
-                      className="absolute -top-2 -right-2 h-5 w-5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity shadow-sm"
+                      className="absolute -right-2 -top-2 size-6 rounded-full opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100"
                       onClick={() => handleRemoveImage(q.id)}
+                      aria-label={`Remove image from question ${index + 1}`}
                     >
-                      <X className="w-3 h-3" />
+                      <X />
                     </Button>
                   </div>
                 ) : (
@@ -518,8 +536,9 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
                           size="icon"
                           className="h-8 w-8 text-destructive"
                           onClick={() => handleRemoveOption(q, optIdx)}
+                          aria-label={`Remove option ${optIdx + 1}`}
                         >
-                          <Trash className="w-4 h-4" />
+                          <Trash />
                         </Button>
                       </div>
                     ))}
@@ -536,9 +555,6 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
                 </div>
               )}
 
-              {/* Preview answer field */}
-              <AnswerPreview question={q} />
-
               <div className="flex justify-between items-center pt-2 border-t border-border">
                 <div className="flex items-center flex-wrap gap-6">
                   <div className="flex items-center gap-2">
@@ -564,192 +580,146 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
                     </div>
                   )}
                 </div>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => handleDeleteQuestion(q.id)}
-                  className="text-destructive hover:bg-destructive/10"
-                >
-                  <Trash className="w-4 h-4" />
-                </Button>
+                <AlertDialog>
+                  <AlertDialogTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="text-destructive hover:bg-destructive/10"
+                      aria-label={`Delete question ${index + 1}`}
+                    >
+                      <Trash />
+                    </Button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>Delete question {index + 1}?</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        This permanently removes the question and its stored answers.
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>Keep question</AlertDialogCancel>
+                      <AlertDialogAction
+                        variant="destructive"
+                        onClick={() => void handleDeleteQuestion(q.id)}
+                      >
+                        Delete question
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
               </div>
             </CardContent>
-          </Card>
+                  </AccordionContent>
+                </Card>
+              </AccordionItem>
+            </Accordion>
+          </SortableQuestion>
         ))}
-      </div>
+          </div>
+        </SortableContext>
+      </DndContext>
     </div>
   );
 }
 
-function SaveStatusIndicator({ status }: { status: AutoSaveStatus }) {
-  if (status === "idle") return null;
+function SaveStatusIndicator({
+  status,
+  error,
+  onRetry,
+}: {
+  status: AutoSaveStatus;
+  error: string | null;
+  onRetry: () => Promise<void>;
+}) {
+  if (status === "clean") return null;
 
   return (
-    <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+    <span
+      className="flex items-center gap-1.5 text-xs text-muted-foreground"
+      aria-live="polite"
+    >
+      {status === "dirty" && "Unsaved"}
       {status === "saving" && (
         <>
-          <Loader2 className="w-3 h-3 animate-spin" />
-          Saving...
+          <Loader2 className="animate-spin" />
+          Saving
         </>
       )}
       {status === "saved" && (
         <>
-          <Check className="w-3 h-3 text-green-500" />
+          <Check />
           Saved
         </>
       )}
+      {status === "error" && (
+        <>
+          <AlertCircle />
+          <span>{error || "Could not save."}</span>
+          <Button
+            variant="link"
+            size="sm"
+            className="h-auto px-1"
+            onClick={() => void onRetry().catch(() => undefined)}
+          >
+            Retry
+          </Button>
+        </>
+      )}
     </span>
   );
 }
 
-function AnswerPreview({ question }: { question: Question }) {
-  const q = question;
+function questionTypeLabel(type: Question["type"]) {
+  return {
+    text: "Short answer",
+    textarea: "Paragraph",
+    radio: "Choose one",
+    checkbox: "Choose multiple",
+  }[type];
+}
+
+function SortableQuestion({
+  id,
+  position,
+  children,
+}: {
+  id: string;
+  position: number;
+  children: React.ReactNode;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
 
   return (
-    <div className="rounded-md border border-dashed border-muted-foreground/30 p-3 bg-muted/30">
-      <Label className="text-xs text-muted-foreground mb-2 block">Answer Preview</Label>
-
-      {q.type === "text" && (
-        <Input
-          placeholder="Short answer text"
-          disabled
-          className="max-w-sm"
-        />
-      )}
-
-      {q.type === "textarea" && (
-        <Textarea
-          placeholder="Long answer text"
-          disabled
-          className="max-w-sm min-h-20 resize-none"
-        />
-      )}
-
-      {q.type === "radio" && (
-        <RadioGroup className="space-y-2">
-          {(q.options || []).map((opt, idx) => (
-            <div key={idx} className="flex items-center space-x-2">
-              <RadioGroupItem value={opt} id={`preview-${q.id}-${idx}`} />
-              <Label htmlFor={`preview-${q.id}-${idx}`} className="font-normal text-sm cursor-pointer">
-                <FormattedText text={opt} />
-              </Label>
-            </div>
-          ))}
-          {q.allowOther && (
-            <div className="flex items-center space-x-2">
-              <RadioGroupItem value="__OTHER__" id={`preview-${q.id}-other`} />
-              <Label htmlFor={`preview-${q.id}-other`} className="font-normal text-sm text-muted-foreground cursor-pointer">
-                Other...
-              </Label>
-            </div>
-          )}
-        </RadioGroup>
-      )}
-
-      {q.type === "checkbox" && (
-        <div className="space-y-2">
-          {(q.options || []).map((opt, idx) => (
-            <div key={idx} className="flex items-center space-x-2">
-              <Checkbox id={`preview-${q.id}-${idx}`} />
-              <Label htmlFor={`preview-${q.id}-${idx}`} className="font-normal text-sm cursor-pointer">
-                <FormattedText text={opt} />
-              </Label>
-            </div>
-          ))}
-          {q.allowOther && (
-            <div className="flex items-center space-x-2">
-              <Checkbox id={`preview-${q.id}-other`} />
-              <Label htmlFor={`preview-${q.id}-other`} className="font-normal text-sm text-muted-foreground cursor-pointer">
-                Other...
-              </Label>
-            </div>
-          )}
-        </div>
-      )}
+    <div
+      ref={setNodeRef}
+      className="relative"
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.6 : 1,
+      }}
+    >
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="absolute left-2 top-4"
+        aria-label={`Drag question ${position} to reorder`}
+        {...attributes}
+        {...listeners}
+      >
+        <GripVertical />
+      </Button>
+      {children}
     </div>
   );
 }
-
-export function AdminSidebar({ 
-  formId,
-  userName,
-  userImage,
-  profile,
-}: { 
-  formId: string;
-  userName?: string;
-  userImage?: string;
-  profile?: DiscordMemberProfile | null;
-}) {
-  const pathname = usePathname();
-
-  return (
-    <Sidebar variant="sidebar" collapsible="icon">
-      <SidebarHeader className="border-b border-border py-4 px-4 flex flex-row items-center justify-between">
-        <span className="font-bold tracking-wider text-primary text-sm uppercase">
-          Form Admin
-        </span>
-        <div className="flex items-center gap-1">
-          {(userName || profile) && (
-            <DropdownMenuAvatar 
-              userName={userName || ""}
-              userImage={userImage || ""}
-              profile={profile || null}
-              showName={false}
-            />
-          )}
-          <ThemeToggle />
-        </div>
-      </SidebarHeader>
-
-      <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupLabel>Navigation</SidebarGroupLabel>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              <SidebarMenuItem>
-                <SidebarMenuButton asChild isActive={pathname === `/admin/form/${formId}`}>
-                  <Link href={`/admin/form/${formId}`}>
-                    <LayoutDashboard className="w-4 h-4" />
-                    <span>Editor</span>
-                  </Link>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-
-              <SidebarMenuItem>
-                <SidebarMenuButton asChild isActive={pathname.startsWith(`/admin/form/${formId}/result`)}>
-                  <Link href={`/admin/form/${formId}/result`}>
-                    <ClipboardList className="w-4 h-4" />
-                    <span>Responses</span>
-                  </Link>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-
-              <SidebarMenuItem>
-                <SidebarMenuButton asChild isActive={pathname.startsWith(`/admin/form/${formId}/extra`)}>
-                  <Link href={`/admin/form/${formId}/extra`}>
-                    <Webhook className="w-4 h-4" />
-                    <span>Extra</span>
-                  </Link>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-      </SidebarContent>
-
-      <SidebarFooter className="border-t border-border p-4">
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton asChild>
-              <Link href="/admin/form">
-                <ArrowLeft className="w-4 h-4" />
-                <span>All Forms</span>
-              </Link>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarFooter>
-    </Sidebar>
-  );
-}
diff --git a/app/admin/form/[id]/extra/client.tsx b/app/admin/form/[id]/extra/client.tsx
index a73915a..3fa4451 100644
--- a/app/admin/form/[id]/extra/client.tsx
+++ b/app/admin/form/[id]/extra/client.tsx
@@ -8,8 +8,8 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
 import { toast } from "sonner";
-import { updateForm } from "@/app/admin/form/actions";
-import { Loader2, ChevronDown, Check } from "lucide-react";
+import { testDiscordWebhook, updateForm } from "@/app/admin/form/actions";
+import { Loader2, ChevronDown, Check, AlertCircle, Send } from "lucide-react";
 import { getGuildRoles } from "@/app/actions/discord";
 import type { DiscordRole } from "@/lib/discord";
 import {
@@ -20,6 +20,15 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { getErrorMessage } from "@/lib/errors";
+import {
+  isValidDiscordWebhookUrl,
+  previewWebhookTemplate,
+} from "@/lib/discord-webhook-settings";
+import {
+  useDebouncedAutoSave,
+  type AutoSaveStatus,
+} from "@/hooks/use-debounced-autosave";
+import { Badge } from "@/components/ui/badge";
 
 interface FormExtraClientProps {
   form: {
@@ -32,8 +41,6 @@ interface FormExtraClientProps {
   };
 }
 
-type AutoSaveStatus = "idle" | "saving" | "saved";
-
 export default function FormExtraClient({ form }: FormExtraClientProps) {
   const router = useRouter();
   const [webhookUrl, setWebhookUrl] = useState(form.discordWebhookUrl || "");
@@ -44,15 +51,11 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
   const [deniedRoles, setDeniedRoles] = useState<string[]>(form.deniedRoles || []);
   const [roles, setRoles] = useState<DiscordRole[]>([]);
   const [loadingRoles, setLoadingRoles] = useState(true);
+  const [roleSearch, setRoleSearch] = useState("");
 
-  const [saveStatus, setSaveStatus] = useState<AutoSaveStatus>("idle");
   const [lastEdited, setLastEdited] = useState<"access" | "webhook" | null>(null);
+  const [testingWebhook, setTestingWebhook] = useState(false);
 
-  const saveTimeout = useRef<NodeJS.Timeout | null>(null);
-  const dirtyRef = useRef(false);
-  const savingRef = useRef(false);
-  const revisionRef = useRef(0);
-  const activeSaveRef = useRef(0);
   const valuesRef = useRef({
     webhookUrl,
     webhookTemplate,
@@ -84,83 +87,53 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
     webhookUrl,
   ]);
 
-  const scheduleSave = useCallback(() => {
-    if (saveTimeout.current) clearTimeout(saveTimeout.current);
-    setSaveStatus("idle");
-
-    saveTimeout.current = setTimeout(async () => {
-      const revision = revisionRef.current;
+  const saveSettings = useCallback(async () => {
       const values = valuesRef.current;
-      activeSaveRef.current = revision;
-      savingRef.current = true;
-      setSaveStatus("saving");
-
-      try {
-        await updateForm(form.id, {
-          discordWebhookUrl: values.webhookUrl.trim() || null,
-          discordWebhookTemplate: values.webhookTemplate.trim() || null,
-          discordWebhookUpdateTemplate: values.webhookUpdateTemplate.trim() || null,
-          allowedRoles: values.allowedRoles,
-          deniedRoles: values.deniedRoles,
-        });
-        if (revisionRef.current === revision) {
-          dirtyRef.current = false;
-        }
-        setSaveStatus("saved");
-        setTimeout(() => setSaveStatus("idle"), 2000);
-        router.refresh();
-      } catch (err: unknown) {
-        setSaveStatus("idle");
-        toast.error(getErrorMessage(err, "Failed to update settings."));
-      } finally {
-        if (activeSaveRef.current === revision) {
-          savingRef.current = false;
-        }
-      }
-    }, 1000);
+      await updateForm(form.id, {
+        discordWebhookUrl: values.webhookUrl.trim() || null,
+        discordWebhookTemplate: values.webhookTemplate.trim() || null,
+        discordWebhookUpdateTemplate: values.webhookUpdateTemplate.trim() || null,
+        allowedRoles: values.allowedRoles,
+        deniedRoles: values.deniedRoles,
+      });
+      router.refresh();
   }, [form.id, router]);
 
-  useEffect(() => {
-    return () => {
-      if (saveTimeout.current) clearTimeout(saveTimeout.current);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (dirtyRef.current || savingRef.current) return;
-
-    const nextValues = {
-      webhookUrl: form.discordWebhookUrl || "",
-      webhookTemplate: form.discordWebhookTemplate || "",
-      webhookUpdateTemplate: form.discordWebhookUpdateTemplate || "",
-      allowedRoles: form.allowedRoles || [],
-      deniedRoles: form.deniedRoles || [],
-    };
-    setWebhookUrl(nextValues.webhookUrl);
-    setWebhookTemplate(nextValues.webhookTemplate);
-    setWebhookUpdateTemplate(nextValues.webhookUpdateTemplate);
-    setAllowedRoles(nextValues.allowedRoles);
-    setDeniedRoles(nextValues.deniedRoles);
-    valuesRef.current = nextValues;
-  }, [form]);
+  const autoSave = useDebouncedAutoSave({ save: saveSettings, delay: 1000 });
 
   const markEdited = (section: "access" | "webhook") => {
-    dirtyRef.current = true;
-    revisionRef.current += 1;
     setLastEdited(section);
-    scheduleSave();
+    autoSave.schedule();
   };
 
-  const toggleRole = (list: string[], setList: (v: string[]) => void, roleId: string) => {
-    markEdited("access");
-    if (list.includes(roleId)) {
-      setList(list.filter(id => id !== roleId));
+  const toggleRole = (kind: "allowed" | "denied", roleId: string) => {
+    const list = kind === "allowed" ? allowedRoles : deniedRoles;
+    const nextList = list.includes(roleId)
+      ? list.filter((id) => id !== roleId)
+      : [...list, roleId];
+    if (kind === "allowed") {
+      const nextDenied = deniedRoles.filter((id) => id !== roleId);
+      setAllowedRoles(nextList);
+      setDeniedRoles(nextDenied);
+      valuesRef.current = {
+        ...valuesRef.current,
+        allowedRoles: nextList,
+        deniedRoles: nextDenied,
+      };
     } else {
-      setList([...list, roleId]);
+      const nextAllowed = allowedRoles.filter((id) => id !== roleId);
+      setDeniedRoles(nextList);
+      setAllowedRoles(nextAllowed);
+      valuesRef.current = {
+        ...valuesRef.current,
+        allowedRoles: nextAllowed,
+        deniedRoles: nextList,
+      };
     }
+    markEdited("access");
   };
 
-  const renderRoleList = (list: string[], setList: (v: string[]) => void, label: string, desc: string) => {
+  const renderRoleList = (kind: "allowed" | "denied", list: string[], label: string, desc: string) => {
     const selectedRoles = roles.filter(r => list.includes(r.id));
 
     return (
@@ -204,13 +177,24 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
           <DropdownMenuContent className="w-64 p-0">
             <ScrollArea className="h-72 max-h-[calc(var(--radix-dropdown-menu-content-available-height)-2rem)]">
               <div className="p-1">
-                {roles.map(role => {
+                <div className="p-1">
+                  <Input
+                    value={roleSearch}
+                    onChange={(event) => setRoleSearch(event.target.value)}
+                    onKeyDown={(event) => event.stopPropagation()}
+                    placeholder="Search roles"
+                    aria-label={`Search ${label.toLowerCase()}`}
+                  />
+                </div>
+                {roles.filter((role) =>
+                  role.name.toLowerCase().includes(roleSearch.toLowerCase())
+                ).map(role => {
                   const colorHex = role.color === 0 ? "#99aab5" : `#${role.color.toString(16).padStart(6, '0')}`;
                   return (
                     <DropdownMenuCheckboxItem
                       key={role.id}
                       checked={list.includes(role.id)}
-                      onCheckedChange={() => toggleRole(list, setList, role.id)}
+                      onCheckedChange={() => toggleRole(kind, role.id)}
                       onSelect={(e) => e.preventDefault()}
                     >
                       <div className="flex items-center gap-2">
@@ -220,7 +204,9 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
                     </DropdownMenuCheckboxItem>
                   );
                 })}
-                {roles.length === 0 && (
+                {roles.filter((role) =>
+                  role.name.toLowerCase().includes(roleSearch.toLowerCase())
+                ).length === 0 && (
                   <div className="p-2 text-sm text-muted-foreground text-center">No roles found.</div>
                 )}
               </div>
@@ -230,7 +216,52 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
       )}
     </div>
   );
-};
+  };
+
+  const webhookUrlValid =
+    !webhookUrl.trim() || isValidDiscordWebhookUrl(webhookUrl.trim());
+
+  const insertVariable = (
+    variable: string,
+    target: "new" | "update"
+  ) => {
+    if (target === "new") {
+      const next = `${webhookTemplate}${webhookTemplate ? " " : ""}{${variable}}`;
+      setWebhookTemplate(next);
+      valuesRef.current = { ...valuesRef.current, webhookTemplate: next };
+    } else {
+      const next = `${webhookUpdateTemplate}${webhookUpdateTemplate ? " " : ""}{${variable}}`;
+      setWebhookUpdateTemplate(next);
+      valuesRef.current = { ...valuesRef.current, webhookUpdateTemplate: next };
+    }
+    markEdited("webhook");
+  };
+
+  const updateWebhookValue = (
+    field: "webhookUrl" | "webhookTemplate" | "webhookUpdateTemplate",
+    value: string
+  ) => {
+    valuesRef.current = { ...valuesRef.current, [field]: value };
+    if (field === "webhookUrl") setWebhookUrl(value);
+    if (field === "webhookTemplate") setWebhookTemplate(value);
+    if (field === "webhookUpdateTemplate") setWebhookUpdateTemplate(value);
+    markEdited("webhook");
+  };
+
+  const handleTestWebhook = async () => {
+    setTestingWebhook(true);
+    try {
+      await testDiscordWebhook(
+        webhookUrl,
+        previewWebhookTemplate(webhookTemplate)
+      );
+      toast.success("Test message sent.");
+    } catch (error) {
+      toast.error(getErrorMessage(error, "Could not send the test message."));
+    } finally {
+      setTestingWebhook(false);
+    }
+  };
 
   return (
     <div className="space-y-6">
@@ -242,18 +273,22 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
               Restrict form access to specific Discord roles.
             </CardDescription>
           </div>
-          <SaveStatusIndicator status={lastEdited === "access" ? saveStatus : "idle"} />
+          <SaveStatusIndicator
+            status={lastEdited === "access" ? autoSave.status : "clean"}
+            error={autoSave.error}
+            onRetry={autoSave.retry}
+          />
         </CardHeader>
         <CardContent className="space-y-6">
           {renderRoleList(
+            "allowed",
             allowedRoles, 
-            setAllowedRoles, 
             "Allowed Roles", 
             "Users must have at least one of these roles to access the form. Leave empty to allow all."
           )}
           {renderRoleList(
+            "denied",
             deniedRoles, 
-            setDeniedRoles,   
             "Denied Roles", 
             "Users with any of these roles will be blocked from accessing the form, even if they have an allowed role."
           )}
@@ -269,7 +304,11 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
               Leave URL empty to disable.
             </CardDescription>
           </div>
-          <SaveStatusIndicator status={lastEdited === "webhook" ? saveStatus : "idle"} />
+          <SaveStatusIndicator
+            status={lastEdited === "webhook" ? autoSave.status : "clean"}
+            error={autoSave.error}
+            onRetry={autoSave.retry}
+          />
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="space-y-2">
@@ -277,59 +316,139 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
             <Input
               id="webhook-url"
               value={webhookUrl}
-              onChange={(e) => { markEdited("webhook"); setWebhookUrl(e.target.value); }}
+              onChange={(e) => updateWebhookValue("webhookUrl", e.target.value)}
               placeholder="https://discord.com/api/webhooks/..."
+              aria-invalid={!webhookUrlValid}
             />
+            {!webhookUrlValid && (
+              <p className="text-sm text-destructive">
+                Enter a valid Discord webhook URL.
+              </p>
+            )}
           </div>
           <div className="space-y-2">
             <Label htmlFor="webhook-template">New Submission</Label>
             <Textarea
               id="webhook-template"
               value={webhookTemplate}
-              onChange={(e) => { markEdited("webhook"); setWebhookTemplate(e.target.value); }}
+              onChange={(e) => updateWebhookValue("webhookTemplate", e.target.value)}
               placeholder="New submission received from {Name} for skill: {skill}!"
               className="min-h-24"
             />
             <p className="text-sm text-muted-foreground">
               Use <code>{`{1}`}</code>, <code>{`{2}`}</code> to insert answers according to question order, and <code>{`{username}`}</code>, <code>{`{displayname}`}</code>, <code>{`{id}`}</code> for user info.
             </p>
+            <div className="flex flex-wrap gap-2">
+              {["username", "displayname", "id", "1", "2"].map((variable) => (
+                <Button
+                  key={variable}
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => insertVariable(variable, "new")}
+                >
+                  {`{${variable}}`}
+                </Button>
+              ))}
+            </div>
+            <div className="rounded-md border bg-muted/30 p-3">
+              <Badge variant="secondary">Preview</Badge>
+              <p className="mt-2 whitespace-pre-wrap text-sm">
+                {previewWebhookTemplate(webhookTemplate)}
+              </p>
+            </div>
           </div>
           <div className="space-y-2">
             <Label htmlFor="webhook-update-template">Update Submission</Label>
             <Textarea
               id="webhook-update-template"
               value={webhookUpdateTemplate}
-              onChange={(e) => { markEdited("webhook"); setWebhookUpdateTemplate(e.target.value); }}
+              onChange={(e) => updateWebhookValue("webhookUpdateTemplate", e.target.value)}
               placeholder="Submission updated by {Name} for skill: {skill}!"
               className="min-h-24"
             />
             <p className="text-sm text-muted-foreground">
               Used when a user updates their existing submission. Use <code>{`{1}`}</code>, <code>{`{2}`}</code> for answers, <code>{`{update}`}</code> to show what was changed, and <code>{`{username}`}</code>, <code>{`{displayname}`}</code>, <code>{`{id}`}</code> for user info.
             </p>
+            <div className="flex flex-wrap gap-2">
+              {["username", "displayname", "id", "update", "1", "2"].map((variable) => (
+                <Button
+                  key={variable}
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => insertVariable(variable, "update")}
+                >
+                  {`{${variable}}`}
+                </Button>
+              ))}
+            </div>
+            <div className="rounded-md border bg-muted/30 p-3">
+              <Badge variant="secondary">Preview</Badge>
+              <p className="mt-2 whitespace-pre-wrap text-sm">
+                {previewWebhookTemplate(webhookUpdateTemplate, { update: true })}
+              </p>
+            </div>
           </div>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleTestWebhook}
+            disabled={!webhookUrlValid || !webhookUrl.trim() || testingWebhook}
+          >
+            {testingWebhook ? (
+              <Loader2 data-icon="inline-start" className="animate-spin" />
+            ) : (
+              <Send data-icon="inline-start" />
+            )}
+            {testingWebhook ? "Sending test" : "Send test message"}
+          </Button>
         </CardContent>
       </Card>
     </div>
   );
 }
 
-function SaveStatusIndicator({ status }: { status: AutoSaveStatus }) {
-  if (status === "idle") return null;
+function SaveStatusIndicator({
+  status,
+  error,
+  onRetry,
+}: {
+  status: AutoSaveStatus;
+  error: string | null;
+  onRetry: () => Promise<void>;
+}) {
+  if (status === "clean") return null;
 
   return (
     <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+      {status === "dirty" && "Unsaved"}
       {status === "saving" && (
         <>
-          <Loader2 className="w-3 h-3 animate-spin" />
-          Saving...
+          <Loader2 className="animate-spin" />
+          Saving
         </>
       )}
       {status === "saved" && (
         <>
-          <Check className="w-3 h-3 text-green-500" />
+          <Check />
           Saved
         </>
       )}
+      {status === "error" && (
+        <>
+          <AlertCircle />
+          <span>{error || "Could not save."}</span>
+          <Button
+            variant="link"
+            size="sm"
+            className="h-auto px-1"
+            onClick={() => void onRetry().catch(() => undefined)}
+          >
+            Retry
+          </Button>
+        </>
+      )}
     </span>
   );
 }
diff --git a/app/admin/form/[id]/extra/page.tsx b/app/admin/form/[id]/extra/page.tsx
index fb57f38..c234a5a 100644
--- a/app/admin/form/[id]/extra/page.tsx
+++ b/app/admin/form/[id]/extra/page.tsx
@@ -22,16 +22,7 @@ export default async function AdminExtraPage(
   return (
     <>
       <RealtimeRefresh topic="forms" formId={form.id} />
-      <div className="space-y-6 w-full max-w-6xl mx-auto p-4 md:p-6 pb-12">
-        <div className="flex items-center justify-between">
-          <div>
-            <h1 className="text-3xl font-bold tracking-tight">Extra Settings</h1>
-            <p className="text-muted-foreground mt-1">
-              Configure Discord webhook integrations.
-            </p>
-          </div>
-        </div>
-
+      <div className="mx-auto w-full max-w-6xl p-4 pb-12 md:p-6">
         <FormExtraClient form={form} />
       </div>
     </>
diff --git a/app/admin/form/[id]/layout.tsx b/app/admin/form/[id]/layout.tsx
index dc3b98d..2a2a8c9 100644
--- a/app/admin/form/[id]/layout.tsx
+++ b/app/admin/form/[id]/layout.tsx
@@ -1,10 +1,12 @@
 import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
-import { AdminSidebar } from "./client";
+import { FormAdminSidebar } from "@/components/form-admin-sidebar";
 import { Metadata } from "next";
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/lib/auth-options";
 import { getSessionDiscordId } from "@/lib/auth";
 import { getDiscordMemberProfile } from "@/lib/discord";
+import { db } from "@/db";
+import { notFound } from "next/navigation";
 
 export const metadata: Metadata = {
   title: {
@@ -20,7 +22,16 @@ export default async function AdminFormLayout(
   }
 ) {
   const params = await props.params;
-  const session = await getServerSession(authOptions);
+  const [session, form] = await Promise.all([
+    getServerSession(authOptions),
+    db.query.forms.findFirst({
+      where: (record, { eq }) => eq(record.id, params.id),
+    }),
+  ]);
+
+  if (!form) {
+    notFound();
+  }
   
   let profile = null;
   const discordId = getSessionDiscordId(session);
@@ -31,17 +42,19 @@ export default async function AdminFormLayout(
   return (
     <SidebarProvider>
       <div className="flex w-full bg-background text-foreground">
-        <AdminSidebar 
-          formId={params.id} 
+        <FormAdminSidebar
+          formId={params.id}
+          formTitle={form.title}
+          isOpen={form.isOpen}
           userName={session?.user?.name || ""}
           userImage={session?.user?.image || ""}
           profile={profile}
         />
-        <div className="flex-1 overflow-hidden">
+        <div className="min-w-0 flex-1 overflow-hidden">
           <div className="md:hidden p-2">
             <SidebarTrigger />
           </div>
-          {props.children}
+          <main>{props.children}</main>
         </div>
       </div>
     </SidebarProvider>
diff --git a/app/admin/form/[id]/loading.tsx b/app/admin/form/[id]/loading.tsx
new file mode 100644
index 0000000..415fbfa
--- /dev/null
+++ b/app/admin/form/[id]/loading.tsx
@@ -0,0 +1,27 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function AdminFormLoading() {
+  return (
+    <div className="mx-auto flex w-full max-w-6xl flex-col gap-4 p-4 md:p-6">
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-6 w-44" />
+          <Skeleton className="h-4 w-72 max-w-full" />
+        </CardHeader>
+        <CardContent className="flex flex-col gap-3">
+          <Skeleton className="h-9 w-full" />
+          <Skeleton className="h-24 w-full" />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-6 w-36" />
+        </CardHeader>
+        <CardContent>
+          <Skeleton className="h-48 w-full" />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/app/admin/form/[id]/page.tsx b/app/admin/form/[id]/page.tsx
index 2de6cab..a664d08 100644
--- a/app/admin/form/[id]/page.tsx
+++ b/app/admin/form/[id]/page.tsx
@@ -27,16 +27,7 @@ export default async function AdminDashboardPage(
   return (
     <>
       <RealtimeRefresh topic="forms" formId={form.id} />
-      <div className="space-y-6 w-full max-w-6xl mx-auto p-4 md:p-6 pb-12">
-        <div className="flex items-center justify-between">
-          <div>
-            <h1 className="text-3xl font-bold tracking-tight">Edit Form</h1>
-            <p className="text-muted-foreground mt-1">
-              Customize form settings, add/edit questions, or upload images.
-            </p>
-          </div>
-        </div>
-
+      <div className="mx-auto w-full max-w-6xl p-4 pb-12 md:p-6">
         <FormEditorClient form={form} initialQuestions={questionsList} />
       </div>
     </>
diff --git a/app/admin/form/[id]/preview/page.tsx b/app/admin/form/[id]/preview/page.tsx
new file mode 100644
index 0000000..b120a07
--- /dev/null
+++ b/app/admin/form/[id]/preview/page.tsx
@@ -0,0 +1,39 @@
+import { db } from "@/db";
+import { notFound } from "next/navigation";
+import { Badge } from "@/components/ui/badge";
+import { FormFillerClient } from "@/app/form/client";
+
+export const dynamic = "force-dynamic";
+
+export default async function AdminFormPreviewPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const form = await db.query.forms.findFirst({
+    where: (record, { eq }) => eq(record.id, id),
+  });
+
+  if (!form) notFound();
+
+  const questions = await db.query.questions.findMany({
+    where: (question, { eq }) => eq(question.formId, form.id),
+    orderBy: (question, { asc }) => [asc(question.displayOrder)],
+  });
+
+  return (
+    <div className="mx-auto flex w-full max-w-3xl flex-col gap-4 p-4 pb-12 md:p-6">
+      <div>
+        <Badge variant="secondary">Admin preview</Badge>
+      </div>
+      <FormFillerClient
+        form={{ ...form, isOpen: true }}
+        questions={questions}
+        totalAnswers={0}
+        queueNumber={null}
+        preview
+      />
+    </div>
+  );
+}
diff --git a/app/admin/form/[id]/result/[submissionId]/client.tsx b/app/admin/form/[id]/result/[submissionId]/client.tsx
index c2349a6..3f1e88e 100644
--- a/app/admin/form/[id]/result/[submissionId]/client.tsx
+++ b/app/admin/form/[id]/result/[submissionId]/client.tsx
@@ -14,6 +14,14 @@ import {
 } from "@/components/ui/context-menu";
 import { Copy, Check, Users, Calendar, Clock } from "lucide-react";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import Image from 'next/image';
 import { stripHtml } from "@/lib/utils";
 import { HtmlDisplay } from "@/components/html-display";
@@ -77,14 +85,14 @@ export default function SubmissionDetailClient({
           <div className="flex items-center gap-2 text-muted-foreground">
             <Calendar className="w-4 h-4 shrink-0" />
             <span className="font-semibold text-foreground">Initial Submission:</span>
-            <span>{new Date(submission.submittedAt).toLocaleString("en-US", { timeZone: "Asia/Bangkok", hour12: false })}</span>
+            <span>{new Date(submission.submittedAt).toLocaleString("en-GB", { timeZone: "Asia/Bangkok", hour12: false })}</span>
           </div>
           {editHistory.length > 0 && (
             <div className="flex flex-col mt-2 pt-2 border-t">
               <span className="font-semibold text-foreground mb-1">Edit History:</span>
               <ul className="list-disc list-inside text-xs text-muted-foreground space-y-1">
                 {editHistory.map((edit, idx) => (
-                  <li key={idx}>Edited at {new Date(edit.editedAt).toLocaleString("en-US", { timeZone: "Asia/Bangkok", hour12: false })}</li>
+                  <li key={idx}>Edited at {new Date(edit.editedAt).toLocaleString("en-GB", { timeZone: "Asia/Bangkok", hour12: false })}</li>
                 ))}
               </ul>
             </div>
@@ -119,9 +127,36 @@ export default function SubmissionDetailClient({
                     <HtmlDisplay html={q.label} />
                   </div>
                   {wasEdited && (
-                    <p className="text-xs text-muted-foreground italic flex items-center gap-1">
-                      edited
-                    </p>
+                    <Dialog>
+                      <DialogTrigger asChild>
+                        <Button variant="outline" size="sm">View history</Button>
+                      </DialogTrigger>
+                      <DialogContent>
+                        <DialogHeader>
+                          <DialogTitle>Answer history</DialogTitle>
+                          <DialogDescription>
+                            Previous values for {stripHtml(q.label)}
+                          </DialogDescription>
+                        </DialogHeader>
+                        <ScrollArea className="max-h-72">
+                          <div className="flex flex-col gap-3 pr-4">
+                            {qAnswerHistory.map((entry, idx) => (
+                              <div key={idx} className="flex flex-col gap-1 text-sm">
+                                <span className="text-xs text-muted-foreground">
+                                  {new Date(entry.editedAt).toLocaleString("en-GB", {
+                                    timeZone: "Asia/Bangkok",
+                                    hour12: false,
+                                  })}
+                                </span>
+                                <span className="whitespace-pre-wrap">
+                                  {entry.answer || "No response"}
+                                </span>
+                              </div>
+                            ))}
+                          </div>
+                        </ScrollArea>
+                      </DialogContent>
+                    </Dialog>
                   )}
                 </div>
                 {q.imageUrl && (
@@ -152,13 +187,14 @@ export default function SubmissionDetailClient({
                     <Button
                       variant="ghost"
                       size="icon"
-                      className="h-8 w-8 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                      className="shrink-0 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100"
                       onClick={() => handleCopy(answerValue, q.id)}
+                      aria-label={`Copy answer for ${stripHtml(q.label)}`}
                     >
                       {copiedId === q.id ? (
-                        <Check className="w-4 h-4 text-green-500" />
+                        <Check />
                       ) : (
-                        <Copy className="w-4 h-4 text-muted-foreground" />
+                        <Copy />
                       )}
                     </Button>
                   </div>
@@ -198,7 +234,7 @@ export default function SubmissionDetailClient({
                           >
                             <div className="flex items-center gap-1 text-xs text-muted-foreground">
                               <Clock className="w-3 h-3 shrink-0" />
-                              <span>{new Date(entry.editedAt).toLocaleString("en-US", { timeZone: "Asia/Bangkok", hour12: false })}</span>
+                              <span>{new Date(entry.editedAt).toLocaleString("en-GB", { timeZone: "Asia/Bangkok", hour12: false })}</span>
                             </div>
                             <span className="text-sm text-foreground/80 whitespace-pre-wrap leading-relaxed">
                               {entry.answer || <span className="italic text-muted-foreground">No response</span>}
diff --git a/app/admin/form/[id]/result/[submissionId]/page.tsx b/app/admin/form/[id]/result/[submissionId]/page.tsx
index cab7688..b2d98f0 100644
--- a/app/admin/form/[id]/result/[submissionId]/page.tsx
+++ b/app/admin/form/[id]/result/[submissionId]/page.tsx
@@ -12,13 +12,26 @@ interface SubmissionDetailPageProps {
     id: string;
     submissionId: string;
   }>;
+  searchParams: Promise<{ return?: string | string[] }>;
 }
 
-export default async function SubmissionDetailPage({ params }: SubmissionDetailPageProps) {
-  const { id: formId, submissionId } = await params;
+export default async function SubmissionDetailPage({
+  params,
+  searchParams,
+}: SubmissionDetailPageProps) {
+  const [{ id: formId, submissionId }, query] = await Promise.all([
+    params,
+    searchParams,
+  ]);
+  const returnValue = Array.isArray(query.return) ? query.return[0] : query.return;
+  const returnQuery = returnValue?.slice(0, 1000) || "";
+  const backHref = `/admin/form/${formId}/result${returnQuery ? `?${returnQuery}` : ""}`;
+  const detailHref = (id: string) =>
+    `/admin/form/${formId}/result/${id}${returnQuery ? `?return=${encodeURIComponent(returnQuery)}` : ""}`;
 
   const submission = await db.query.submissions.findFirst({
-    where: (s, { eq }) => eq(s.id, submissionId),
+    where: (s, { eq, and }) =>
+      and(eq(s.id, submissionId), eq(s.formId, formId)),
   });
 
   if (!submission) {
@@ -50,28 +63,14 @@ export default async function SubmissionDetailPage({ params }: SubmissionDetailP
   return (
     <div className="space-y-6 w-full max-w-6xl mx-auto p-4 md:p-6 pb-10">
       <RealtimeRefresh topic="submissions" formId={formId} />
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Link href={`/admin/form/${formId}/result`}>
-            <Button variant="ghost" size="icon">
-              <ArrowLeft className="w-4 h-4" />
-            </Button>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <Button variant="ghost" asChild className="self-start">
+          <Link href={backHref}>
+            <ArrowLeft data-icon="inline-start" />
+            Back to responses
           </Link>
-          <h1 className="text-3xl font-bold tracking-tight">Response Detail</h1>
-        </div>
-        <div className="flex items-center gap-2">
-          {prevId && (
-            <Link href={`/admin/form/${formId}/result/${prevId}`}>
-              <Button variant="outline" size="sm">Previous</Button>
-            </Link>
-          )}
-          {nextId && (
-            <Link href={`/admin/form/${formId}/result/${nextId}`}>
-              <Button variant="outline" size="sm">Next</Button>
-            </Link>
-          )}
-          <DeleteSubmissionButton id={submission.id} redirectUrl={`/admin/form/${formId}/result`} />
-        </div>
+        </Button>
+        <DeleteSubmissionButton id={submission.id} redirectUrl={backHref} />
       </div>
 
       <SubmissionDetailClient
@@ -82,18 +81,18 @@ export default async function SubmissionDetailPage({ params }: SubmissionDetailP
 
       <div className="flex justify-between items-center mt-8 pt-6 border-t">
         {prevId ? (
-          <Link href={`/admin/form/${formId}/result/${prevId}`}>
+            <Link href={detailHref(prevId)}>
             <Button variant="outline">
-              <ArrowLeft className="w-4 h-4 mr-2" /> Previous
+              <ArrowLeft data-icon="inline-start" /> Previous
             </Button>
           </Link>
         ) : (
           <div />
         )}
         {nextId && (
-          <Link href={`/admin/form/${formId}/result/${nextId}`}>
+            <Link href={detailHref(nextId)}>
             <Button variant="outline">
-              Next <ArrowRight className="w-4 h-4 ml-2" />
+              Next <ArrowRight data-icon="inline-end" />
             </Button>
           </Link>
         )}
diff --git a/app/admin/form/[id]/result/export/route.ts b/app/admin/form/[id]/result/export/route.ts
new file mode 100644
index 0000000..3ab84b5
--- /dev/null
+++ b/app/admin/form/[id]/result/export/route.ts
@@ -0,0 +1,104 @@
+import { NextResponse } from "next/server";
+import { db } from "@/db";
+import { answers } from "@/db/schema";
+import { inArray } from "drizzle-orm";
+import { requireAdmin } from "@/lib/auth";
+import {
+  getFilteredSubmissions,
+  parseResultFilters,
+} from "@/lib/admin-form-results";
+import { formatStoredAnswer } from "@/lib/form-answer-values";
+import { stripHtml } from "@/lib/utils";
+
+function csvCell(value: unknown) {
+  const text = String(value ?? "");
+  return `"${text.replaceAll('"', '""')}"`;
+}
+
+function safeFilename(value: string) {
+  return (
+    value
+      .normalize("NFKD")
+      .replace(/[^\p{L}\p{N}]+/gu, "-")
+      .replace(/^-|-$/g, "")
+      .slice(0, 60) || "form"
+  );
+}
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  await requireAdmin();
+  const { id } = await params;
+  const form = await db.query.forms.findFirst({
+    where: (record, { eq }) => eq(record.id, id),
+  });
+  if (!form) {
+    return NextResponse.json({ error: "Form not found" }, { status: 404 });
+  }
+
+  const url = new URL(request.url);
+  const filters = parseResultFilters(
+    Object.fromEntries(url.searchParams.entries())
+  );
+  const [{ rows }, questions] = await Promise.all([
+    getFilteredSubmissions(id, filters, { paginate: false }),
+    db.query.questions.findMany({
+      where: (question, { eq }) => eq(question.formId, id),
+      orderBy: (question, { asc }) => [asc(question.displayOrder)],
+    }),
+  ]);
+  const answerRows =
+    rows.length === 0
+      ? []
+      : await db
+          .select()
+          .from(answers)
+          .where(inArray(answers.submissionId, rows.map((row) => row.id)));
+  const answerMap = new Map(
+    answerRows.map((answer) => [
+      `${answer.submissionId}:${answer.questionId}`,
+      answer.value,
+    ])
+  );
+  const header = [
+    "Respondent",
+    "Discord ID",
+    "Submitted at (Asia/Bangkok)",
+    "Edit count",
+    ...questions.map((question) => stripHtml(question.label)),
+  ];
+  const lines = [
+    header.map(csvCell).join(","),
+    ...rows.map((submission) =>
+      [
+        submission.userName || "Anonymous",
+        submission.userDiscordId || "",
+        submission.submittedAt.toLocaleString("en-GB", {
+          timeZone: "Asia/Bangkok",
+          hour12: false,
+        }),
+        Array.isArray(submission.editHistory)
+          ? submission.editHistory.length
+          : 0,
+        ...questions.map((question) =>
+          formatStoredAnswer(
+            answerMap.get(`${submission.id}:${question.id}`) || "",
+            question.type
+          )
+        ),
+      ]
+        .map(csvCell)
+        .join(",")
+    ),
+  ];
+  const date = new Date().toISOString().slice(0, 10);
+
+  return new NextResponse(`\uFEFF${lines.join("\r\n")}`, {
+    headers: {
+      "Content-Type": "text/csv; charset=utf-8",
+      "Content-Disposition": `attachment; filename="${safeFilename(form.title)}-responses-${date}.csv"`,
+    },
+  });
+}
diff --git a/app/admin/form/[id]/result/page.tsx b/app/admin/form/[id]/result/page.tsx
index a4f152b..4d0270d 100644
--- a/app/admin/form/[id]/result/page.tsx
+++ b/app/admin/form/[id]/result/page.tsx
@@ -1,103 +1,194 @@
-import { db } from "@/db";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Button } from "@/components/ui/button";
 import Link from "next/link";
-import { Users, ArrowLeft } from "lucide-react";
-import { DeleteSubmissionButton, DeleteAllSubmissionsButton } from "@/components/delete-buttons";
+import { redirect } from "next/navigation";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+import {
+  getFilteredSubmissions,
+  parseResultFilters,
+  resultFiltersToSearchParams,
+  RESULTS_PAGE_SIZE,
+} from "@/lib/admin-form-results";
+import { DeleteAllSubmissionsButton, DeleteSubmissionButton } from "@/components/delete-buttons";
+import { ResultsFilters } from "@/components/results-filters";
 import { RealtimeRefresh } from "@/components/realtime-refresh";
 
 export const dynamic = "force-dynamic";
 
-export default async function ResultsListPage(
-  props: {
-    params: Promise<{ id: string }>;
-  }
-) {
-  const params = await props.params;
-  const submissionsList = await db.query.submissions.findMany({
-    where: (s, { eq }) => eq(s.formId, params.id),
-    orderBy: (s, { desc }) => [desc(s.submittedAt)],
+function formatDate(date: Date) {
+  return date.toLocaleString("en-GB", {
+    timeZone: "Asia/Bangkok",
+    hour12: false,
   });
+}
+
+export default async function ResultsListPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ id: string }>;
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  const [{ id }, rawFilters] = await Promise.all([params, searchParams]);
+  const filters = parseResultFilters(rawFilters);
+  const { rows, total } = await getFilteredSubmissions(id, filters);
+  const pageCount = Math.max(1, Math.ceil(total / RESULTS_PAGE_SIZE));
+  if (total > 0 && filters.page > pageCount) {
+    redirect(`?${resultFiltersToSearchParams(filters, { page: pageCount })}`);
+  }
+  const currentPage = Math.min(filters.page, pageCount);
+  const listQuery = resultFiltersToSearchParams(filters);
 
   return (
-    <div className="space-y-6 w-full max-w-6xl mx-auto p-4 md:p-6">
-      <RealtimeRefresh topic="submissions" formId={params.id} />
-      <div>
-        <Button variant="ghost" asChild className="mb-4">
-          <Link href={`/admin/form/${params.id}`}>
-            <ArrowLeft className="w-4 h-4 mr-2" />
-            Back to Form Editor
-          </Link>
-        </Button>
-      </div>
-      <div className="flex justify-between items-center">
+    <div className="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 pb-12 md:p-6">
+      <RealtimeRefresh topic="submissions" formId={id} />
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
         <div>
-          <h1 className="text-3xl font-bold tracking-tight">Form Submissions</h1>
-          <p className="text-muted-foreground mt-1">
-            Review all submissions and individual user answers.
+          <h2 className="text-2xl font-semibold">Responses</h2>
+          <p className="text-muted-foreground">
+            {total} matching {total === 1 ? "response" : "responses"}
           </p>
         </div>
-        {submissionsList.length > 0 && <DeleteAllSubmissionsButton formId={params.id} />}
+        {total > 0 && <DeleteAllSubmissionsButton formId={id} />}
       </div>
 
-      {submissionsList.length === 0 ? (
-        <Card className="border-dashed border-2 py-12 text-center">
+      <ResultsFilters formId={id} filters={filters} />
+
+      {rows.length === 0 ? (
+        <Card>
           <CardHeader>
-            <CardTitle>No submissions yet</CardTitle>
+            <CardTitle>No responses found</CardTitle>
             <CardDescription>
-              When users fill out your form, their responses will appear here.
+              {total === 0 && !listQuery
+                ? "Responses will appear here after people submit the form."
+                : "Try changing or clearing the current filters."}
             </CardDescription>
           </CardHeader>
         </Card>
       ) : (
-        <Card>
-          <CardHeader>
-            <CardTitle>Submissions</CardTitle>
-            <CardDescription>
-              Total {submissionsList.length} responses collected. Click on a submission to inspect individual answers.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="p-0">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>User (Discord)</TableHead>
-                  <TableHead>Submitted At</TableHead>
-                  <TableHead className="text-right">Action</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {submissionsList.map((sub) => {
-                  const userLabel = sub.userName
-                    ? `${sub.userName} (${sub.userDiscordId || "N/A"})`
-                    : sub.userDiscordId || "Anonymous";
+        <>
+          <Card className="hidden md:block">
+            <CardContent className="p-0">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Respondent</TableHead>
+                    <TableHead>Submitted</TableHead>
+                    <TableHead>Status</TableHead>
+                    <TableHead className="text-right">Actions</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {rows.map((submission) => {
+                    const detailHref = `/admin/form/${id}/result/${submission.id}${listQuery ? `?return=${encodeURIComponent(listQuery)}` : ""}`;
+                    const edited =
+                      Array.isArray(submission.editHistory) &&
+                      submission.editHistory.length > 0;
+                    return (
+                      <TableRow key={submission.id}>
+                        <TableCell>
+                          <Link href={detailHref} className="font-medium hover:underline">
+                            {submission.userName ||
+                              submission.userDiscordId ||
+                              "Anonymous"}
+                          </Link>
+                          {submission.userName && submission.userDiscordId && (
+                            <p className="text-xs text-muted-foreground">
+                              {submission.userDiscordId}
+                            </p>
+                          )}
+                        </TableCell>
+                        <TableCell>{formatDate(submission.submittedAt)}</TableCell>
+                        <TableCell>
+                          <Badge variant={edited ? "secondary" : "outline"}>
+                            {edited ? "Edited" : "Original"}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <DeleteSubmissionButton id={submission.id} compact />
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
 
-                  return (
-                    <TableRow key={sub.id} className="cursor-pointer group">
-                      <TableCell className="p-0">
-                        <Link href={`/admin/form/${params.id}/result/${sub.id}`} className="flex items-center gap-2 p-4 w-full h-full font-medium">
-                          <Users className="w-4 h-4 text-muted-foreground" />
-                          <span>{userLabel}</span>
-                        </Link>
-                      </TableCell>
-                      <TableCell className="p-0 text-muted-foreground">
-                        <Link href={`/admin/form/${params.id}/result/${sub.id}`} className="flex items-center p-4 w-full h-full">
-                          {new Date(sub.submittedAt).toLocaleString("en-US", { timeZone: "Asia/Bangkok", hour12: false })}
-                        </Link>
-                      </TableCell>
-                      <TableCell className="text-right p-4">
-                        <div className="flex justify-end gap-2">
-                          <DeleteSubmissionButton id={sub.id} />
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  );
-                })}
-              </TableBody>
-            </Table>
-          </CardContent>
-        </Card>
+          <div className="flex flex-col gap-3 md:hidden">
+            {rows.map((submission) => {
+              const detailHref = `/admin/form/${id}/result/${submission.id}${listQuery ? `?return=${encodeURIComponent(listQuery)}` : ""}`;
+              return (
+                <Card key={submission.id}>
+                  <CardHeader>
+                    <CardTitle className="text-base">
+                      <Link href={detailHref}>
+                        {submission.userName ||
+                          submission.userDiscordId ||
+                          "Anonymous"}
+                      </Link>
+                    </CardTitle>
+                    <CardDescription>
+                      {formatDate(submission.submittedAt)}
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="flex justify-end">
+                    <DeleteSubmissionButton id={submission.id} compact />
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+        </>
+      )}
+
+      {pageCount > 1 && (
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious
+                href={`?${resultFiltersToSearchParams(filters, {
+                  page: Math.max(1, currentPage - 1),
+                })}`}
+                aria-disabled={currentPage === 1}
+              />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href={`?${listQuery}`} isActive size="default">
+                {currentPage} / {pageCount}
+              </PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationNext
+                href={`?${resultFiltersToSearchParams(filters, {
+                  page: Math.min(pageCount, currentPage + 1),
+                })}`}
+                aria-disabled={currentPage === pageCount}
+              />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
       )}
     </div>
   );
diff --git a/app/admin/form/actions.ts b/app/admin/form/actions.ts
index b53b7f0..a8a4d7b 100644
--- a/app/admin/form/actions.ts
+++ b/app/admin/form/actions.ts
@@ -8,6 +8,7 @@ import { redirect } from "next/navigation";
 import { requireAdmin } from "@/lib/auth";
 import { sanitizeHtml } from "@/lib/sanitize-html";
 import { sse } from "@/lib/sse";
+import { isValidDiscordWebhookUrl } from "@/lib/discord-webhook-settings";
 
 export async function createForm(formData: FormData) {
   await requireAdmin();
@@ -48,6 +49,15 @@ export async function createDefaultForm() {
 
 export async function updateForm(id: string, data: { title?: string; description?: string | null; isOpen?: boolean; discordWebhookUrl?: string | null; discordWebhookTemplate?: string | null; discordWebhookUpdateTemplate?: string | null; allowedRoles?: string[]; deniedRoles?: string[] }) {
   await requireAdmin();
+  if (data.title !== undefined && !data.title.trim()) {
+    throw new Error("Form title is required.");
+  }
+  if (
+    data.discordWebhookUrl &&
+    !isValidDiscordWebhookUrl(data.discordWebhookUrl)
+  ) {
+    throw new Error("Enter a valid Discord webhook URL.");
+  }
 
   const nextData = {
     ...data,
@@ -68,6 +78,27 @@ export async function updateForm(id: string, data: { title?: string; description
   revalidatePath("/admin/form");
 }
 
+export async function testDiscordWebhook(url: string, content: string) {
+  await requireAdmin();
+  const trimmedUrl = url.trim();
+  if (!isValidDiscordWebhookUrl(trimmedUrl)) {
+    throw new Error("Enter a valid Discord webhook URL.");
+  }
+  if (!content.trim()) {
+    throw new Error("The test message is empty.");
+  }
+
+  const response = await fetch(trimmedUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ content: content.slice(0, 2000) }),
+  });
+  if (!response.ok) {
+    throw new Error(`Discord rejected the test message (${response.status}).`);
+  }
+  return { ok: true };
+}
+
 export async function deleteForm(id: string) {
   await requireAdmin();
 
diff --git a/app/admin/form/page.tsx b/app/admin/form/page.tsx
index 07435ca..a24562d 100644
--- a/app/admin/form/page.tsx
+++ b/app/admin/form/page.tsx
@@ -16,6 +16,7 @@ import { AdminShellServer } from "@/components/admin-shell-server";
 import { createDefaultForm } from "./actions";
 import { RealtimeRefresh } from "@/components/realtime-refresh";
 import { getFormSubmissionStats } from "@/lib/form-submission-stats";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 export const dynamic = "force-dynamic";
 
@@ -31,8 +32,8 @@ export default async function AdminFormsPage() {
   return (
     <AdminShellServer>
       <RealtimeRefresh topic="forms" />
-      <div className="space-y-6 p-4 md:p-6 pb-12 w-full">
-        <div className="flex items-center justify-between">
+      <div className="flex w-full flex-col gap-6 p-4 pb-12 md:p-6">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
           <div>
             <h1 className="text-3xl font-bold tracking-tight">Forms</h1>
             <p className="text-muted-foreground mt-1">
@@ -41,13 +42,13 @@ export default async function AdminFormsPage() {
           </div>
           <form action={createDefaultForm}>
             <Button type="submit">
-              <Plus className="mr-2 h-4 w-4" />
-              Create Form
+              <Plus data-icon="inline-start" />
+              Create form
             </Button>
           </form>
         </div>
 
-        <div className="border rounded-md">
+        <div className="hidden rounded-md border md:block">
           <Table>
             <TableHeader>
               <TableRow>
@@ -89,14 +90,20 @@ export default async function AdminFormsPage() {
                     </TableCell>
                     <TableCell className="p-0 align-middle">
                       <Link href={`/admin/form/${form.id}`} className="flex items-center p-3 h-full w-full">
-                        {form.createdAt ? new Date(form.createdAt).toLocaleDateString() : 'N/A'}
+                        {form.createdAt
+                          ? new Date(form.createdAt).toLocaleDateString("en-GB", {
+                              timeZone: "Asia/Bangkok",
+                            })
+                          : "N/A"}
                       </Link>
                     </TableCell>
-                    <TableCell className="text-right space-x-2 p-3">
-                      <Button variant="outline" asChild size="sm">
-                        <Link href={`/admin/form/${form.id}/result`}>Results</Link>
-                      </Button>
-                      <DeleteFormButton formId={form.id} />
+                    <TableCell className="p-3 text-right">
+                      <div className="flex justify-end gap-2">
+                        <Button variant="outline" asChild size="sm">
+                          <Link href={`/admin/form/${form.id}/result`}>Responses</Link>
+                        </Button>
+                        <DeleteFormButton formId={form.id} />
+                      </div>
                     </TableCell>
                   </TableRow>
                 ))
@@ -104,6 +111,41 @@ export default async function AdminFormsPage() {
             </TableBody>
           </Table>
         </div>
+        <div className="flex flex-col gap-3 md:hidden">
+          {formsList.map((form) => (
+            <Card key={form.id}>
+              <CardHeader>
+                <div className="flex items-start justify-between gap-3">
+                  <CardTitle className="text-base">
+                    <Link href={`/admin/form/${form.id}`}>{form.title}</Link>
+                  </CardTitle>
+                  <Badge variant={form.isOpen ? "default" : "secondary"}>
+                    {form.isOpen ? "Open" : "Closed"}
+                  </Badge>
+                </div>
+              </CardHeader>
+              <CardContent className="flex items-center justify-between gap-3">
+                <Link
+                  href={`/admin/form/${form.id}/result`}
+                  className="text-sm text-muted-foreground"
+                >
+                  {submissionStats.get(form.id)?.totalAnswers ?? 0} responses
+                </Link>
+                <DeleteFormButton formId={form.id} />
+              </CardContent>
+            </Card>
+          ))}
+          {formsList.length === 0 && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">No forms yet</CardTitle>
+              </CardHeader>
+              <CardContent className="text-sm text-muted-foreground">
+                Create a form to start collecting responses.
+              </CardContent>
+            </Card>
+          )}
+        </div>
       </div>
     </AdminShellServer>
   );
diff --git a/app/form/client.tsx b/app/form/client.tsx
index 81f6424..c4f4693 100644
--- a/app/form/client.tsx
+++ b/app/form/client.tsx
@@ -106,6 +106,7 @@ interface FormFillerClientProps {
   hasSubmission?: boolean;
   totalAnswers: number;
   queueNumber: number | null;
+  preview?: boolean;
 }
 
 const LS_KEY = (formId: string) => `form-draft-${formId}`;
@@ -216,6 +217,7 @@ export function FormFillerClient({
   hasSubmission = false,
   totalAnswers: initialTotalAnswers,
   queueNumber: initialQueueNumber,
+  preview = false,
 }: FormFillerClientProps) {
   const router = useRouter();
   const isUpdating = hasSubmission;
@@ -229,7 +231,7 @@ export function FormFillerClient({
   const [otherValues, setOtherValues] = useState<Record<string, string>>(
     serverInitialState.otherValues
   );
-  const [draftReady, setDraftReady] = useState(false);
+  const [draftReady, setDraftReady] = useState(preview);
   const [draftSaved, setDraftSaved] = useState(false);
   const [showSuccessDialog, setShowSuccessDialog] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -255,6 +257,7 @@ export function FormFillerClient({
   const watchedValues = useWatch({ control });
 
   useEffect(() => {
+    if (preview) return;
     const frame = requestAnimationFrame(() => {
       if (isUpdating) {
         setDraftReady(true);
@@ -282,10 +285,10 @@ export function FormFillerClient({
     });
 
     return () => cancelAnimationFrame(frame);
-  }, [form.id, isUpdating, questions, reset]);
+  }, [form.id, isUpdating, preview, questions, reset]);
 
   useEffect(() => {
-    if (!draftReady || !form.isOpen) {
+    if (preview || !draftReady || !form.isOpen) {
       return;
     }
 
@@ -300,9 +303,10 @@ export function FormFillerClient({
     } catch {
       queueMicrotask(() => setDraftSaved(false));
     }
-  }, [draftReady, form.id, form.isOpen, getValues, otherValues, watchedValues]);
+  }, [draftReady, form.id, form.isOpen, getValues, otherValues, preview, watchedValues]);
 
   const onSubmit = async (values: z.infer<typeof formSchema>) => {
+    if (preview) return;
     if (!form.isOpen) return;
 
     for (const question of questions) {
@@ -762,13 +766,15 @@ export function FormFillerClient({
           <Card size="sm" className="sticky bottom-3 shadow-md">
             <CardContent className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
               <p className="text-sm text-muted-foreground" aria-live="polite">
-                {!form.isOpen
+                {preview
+                  ? "ตัวอย่างสำหรับผู้ดูแลระบบ — ไม่มีการส่งคำตอบ"
+                  : !form.isOpen
                   ? "ปิดรับคำตอบแล้ว"
                   : draftSaved
                     ? "บันทึกฉบับร่างไว้ในอุปกรณ์นี้แล้ว"
                     : "กำลังเตรียมฉบับร่างในอุปกรณ์นี้"}
               </p>
-              <div className="flex flex-col-reverse gap-2 sm:flex-row">
+              {!preview && <div className="flex flex-col-reverse gap-2 sm:flex-row">
                 {isUpdating && (
                   <AlertDialog
                     open={deleteDialogOpen}
@@ -825,7 +831,7 @@ export function FormFillerClient({
                         : "ส่งคำตอบ"}
                   </Button>
                 )}
-              </div>
+              </div>}
             </CardContent>
           </Card>
         </form>
diff --git a/bun.lock b/bun.lock
index e25a8ae..f956f3c 100644
--- a/bun.lock
+++ b/bun.lock
@@ -6,6 +6,9 @@
       "name": "erika",
       "dependencies": {
         "@auth/drizzle-adapter": "^1.11.2",
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
         "@hookform/resolvers": "^5.4.0",
         "@radix-ui/react-label": "^2.1.11",
         "@radix-ui/react-slot": "^1.3.0",
@@ -18,6 +21,7 @@
         "@tiptap/starter-kit": "^3.27.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "date-fns": "^4.4.0",
         "drizzle-orm": "^0.45.2",
         "lucide-react": "^1.23.0",
         "next": "^16.2.10",
@@ -26,6 +30,7 @@
         "postgres": "^3.4.9",
         "radix-ui": "^1.6.1",
         "react": "19.2.7",
+        "react-day-picker": "^10.0.1",
         "react-dom": "19.2.7",
         "react-hook-form": "^7.81.0",
         "reconnecting-eventsource": "^1.6.5",
@@ -123,6 +128,16 @@
 
     "@babel/types": ["@babel/types@7.29.7", "", { "dependencies": { "@babel/helper-string-parser": "^7.29.7", "@babel/helper-validator-identifier": "^7.29.7" } }, "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA=="],
 
+    "@date-fns/tz": ["@date-fns/tz@1.5.0", "", {}, "sha512-lwYN/vDPeNRULcepoE/LO2Pgx+7/RV+S9ARfbc9lr2DtGkOD7pAiruHvbR1RX3Qyf6ja47EWJDMsNK5vK08DJg=="],
+
+    "@dnd-kit/accessibility": ["@dnd-kit/accessibility@3.1.1", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw=="],
+
+    "@dnd-kit/core": ["@dnd-kit/core@6.3.1", "", { "dependencies": { "@dnd-kit/accessibility": "^3.1.1", "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ=="],
+
+    "@dnd-kit/sortable": ["@dnd-kit/sortable@10.0.0", "", { "dependencies": { "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@dnd-kit/core": "^6.3.0", "react": ">=16.8.0" } }, "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg=="],
+
+    "@dnd-kit/utilities": ["@dnd-kit/utilities@3.2.2", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg=="],
+
     "@dotenvx/dotenvx": ["@dotenvx/dotenvx@1.75.1", "", { "dependencies": { "@dotenvx/primitives": "^0.8.0", "commander": "^11.1.0", "conf": "^10.2.0", "dotenv": "^17.2.1", "enquirer": "^2.4.1", "env-paths": "^2.2.1", "execa": "^5.1.1", "fdir": "^6.2.0", "ignore": "^5.3.0", "object-treeify": "1.1.33", "open": "^8.4.2", "picomatch": "^4.0.4", "systeminformation": "^5.22.11", "undici": "^7.11.0", "which": "^4.0.0", "yocto-spinner": "^1.1.0" }, "bin": { "dotenvx": "src/cli/dotenvx.js" } }, "sha512-/BITOC9dmS/edY2zQwZNicQ059O6RKabtQfyEafV0nGtfYRNHYy1DIPiYVcov40+tob9hfmBnbR963dS+EQ1DQ=="],
 
     "@dotenvx/primitives": ["@dotenvx/primitives@0.8.0", "", {}, "sha512-VYJy0uhFm9zTJ1TxBaW/pA8bjbOM/OttaNMwZ1RHG4JKyRG7DhSdiqD1ipQoAyoD22olUtxbP78W9xY3Wd11bg=="],
@@ -763,6 +778,8 @@
 
     "data-view-byte-offset": ["data-view-byte-offset@1.0.1", "", { "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", "is-data-view": "^1.0.1" } }, "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ=="],
 
+    "date-fns": ["date-fns@4.4.0", "", {}, "sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w=="],
+
     "debounce-fn": ["debounce-fn@4.0.0", "", { "dependencies": { "mimic-fn": "^3.0.0" } }, "sha512-8pYCQiL9Xdcg0UPSD3d+0KMlOjp+KGU5EPwYddgzQ7DATsg4fuUDjQtsYLmWjnk2obnNHgV3vE2Y4jejSOJVBQ=="],
 
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" }, "peerDependencies": { "supports-color": "*" }, "optionalPeers": ["supports-color"] }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
@@ -1359,6 +1376,8 @@
 
     "react": ["react@19.2.7", "", {}, "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ=="],
 
+    "react-day-picker": ["react-day-picker@10.0.1", "", { "dependencies": { "@date-fns/tz": "^1.4.1", "date-fns": "^4.1.0" }, "peerDependencies": { "@types/react": ">=16.8.0", "react": ">=16.8.0" }, "optionalPeers": ["@types/react"] }, "sha512-eNh6BlwcYInWaJtRv18mXQ06Ys/H6rdTZAnTaSdOYJuTpwP1JMCHNd1FDRadA+gbeinq+psdULN5Xnowy9mV8w=="],
+
     "react-dom": ["react-dom@19.2.7", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.7" } }, "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ=="],
 
     "react-hook-form": ["react-hook-form@7.81.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-ocbmr2p5KBMoAfj4WCUvped33lVi1Kd5DuDUvQDnB6VEAacOjPI/jMbtDdbhco4y9ct4xUuCmMY0b/C9L0QHjw=="],
diff --git a/components/delete-buttons.tsx b/components/delete-buttons.tsx
index d1a920c..e5d7f9c 100644
--- a/components/delete-buttons.tsx
+++ b/components/delete-buttons.tsx
@@ -57,8 +57,8 @@ export function DeleteFormButton({ formId }: DeleteFormButtonProps) {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button variant="ghost" size="icon">
-          <Trash2 className="w-4 h-4" />
+        <Button variant="ghost" size="icon" aria-label="Delete form">
+          <Trash2 />
         </Button>
       </DialogTrigger>
       <DialogContent>
@@ -75,7 +75,7 @@ export function DeleteFormButton({ formId }: DeleteFormButtonProps) {
           <Button variant="destructive" disabled={deleting} onClick={handleDelete}>
             {deleting ? (
               <>
-                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                <Loader2 data-icon="inline-start" className="animate-spin" />
                 Deleting...
               </>
             ) : (
@@ -88,7 +88,15 @@ export function DeleteFormButton({ formId }: DeleteFormButtonProps) {
   );
 }
 
-export function DeleteSubmissionButton({ id, redirectUrl }: { id: string, redirectUrl?: string }) {
+export function DeleteSubmissionButton({
+  id,
+  redirectUrl,
+  compact = false,
+}: {
+  id: string;
+  redirectUrl?: string;
+  compact?: boolean;
+}) {
   const [loading, setLoading] = useState(false);
   const router = useRouter();
 
@@ -113,9 +121,15 @@ export function DeleteSubmissionButton({ id, redirectUrl }: { id: string, redire
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button size="sm" variant="destructive" disabled={loading}>
-          {loading ? <Spinner /> : <Trash2 className="w-3.5 h-3.5" />}
-          Delete
+        <Button
+          size={compact ? "icon-sm" : "sm"}
+          variant={compact ? "ghost" : "destructive"}
+          disabled={loading}
+          aria-label="Delete response"
+          className={compact ? "text-destructive" : undefined}
+        >
+          {loading ? <Spinner /> : <Trash2 />}
+          {!compact && "Delete"}
         </Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
@@ -127,7 +141,7 @@ export function DeleteSubmissionButton({ id, redirectUrl }: { id: string, redire
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction onClick={handleDelete} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+          <AlertDialogAction onClick={handleDelete} variant="destructive">
             Delete
           </AlertDialogAction>
         </AlertDialogFooter>
@@ -158,8 +172,8 @@ export function DeleteAllSubmissionsButton({ formId }: { formId: string }) {
     <AlertDialog>
       <AlertDialogTrigger asChild>
         <Button variant="destructive" disabled={loading}>
-          {loading ? <Spinner /> : <Trash2 className="w-4 h-4" />}
-          Delete All Submissions
+          {loading ? <Spinner data-icon="inline-start" /> : <Trash2 data-icon="inline-start" />}
+          Delete all responses
         </Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
@@ -171,8 +185,8 @@ export function DeleteAllSubmissionsButton({ formId }: { formId: string }) {
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction onClick={handleDeleteAll}>
-            Delete All
+          <AlertDialogAction onClick={handleDeleteAll} variant="destructive">
+            Delete all responses
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
diff --git a/components/form-admin-sidebar.tsx b/components/form-admin-sidebar.tsx
new file mode 100644
index 0000000..7b6a61c
--- /dev/null
+++ b/components/form-admin-sidebar.tsx
@@ -0,0 +1,163 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar";
+import {
+  ArrowLeft,
+  ClipboardList,
+  Eye,
+  FilePenLine,
+  LayoutDashboard,
+  Settings,
+} from "lucide-react";
+import { ThemeToggle } from "@/components/theme-toggle";
+import {
+  DropdownMenuAvatar,
+  type DiscordMemberProfile,
+} from "@/components/dropdown-menu-avatar";
+import { GuardedLink } from "@/components/guarded-link";
+import { Badge } from "@/components/ui/badge";
+
+export function FormAdminSidebar({
+  formId,
+  formTitle,
+  isOpen,
+  userName,
+  userImage,
+  profile,
+}: {
+  formId: string;
+  formTitle: string;
+  isOpen: boolean;
+  userName?: string;
+  userImage?: string;
+  profile?: DiscordMemberProfile | null;
+}) {
+  const pathname = usePathname();
+  const currentSection = pathname.startsWith(`/admin/form/${formId}/result`)
+    ? "Responses"
+    : pathname.startsWith(`/admin/form/${formId}/extra`)
+      ? "Settings"
+      : pathname.startsWith(`/admin/form/${formId}/preview`)
+        ? "Preview"
+        : "Editor";
+  const items = [
+    {
+      href: `/admin/form/${formId}`,
+      label: "Editor",
+      icon: LayoutDashboard,
+      active: pathname === `/admin/form/${formId}`,
+    },
+    {
+      href: `/admin/form/${formId}/result`,
+      label: "Responses",
+      icon: ClipboardList,
+      active: pathname.startsWith(`/admin/form/${formId}/result`),
+    },
+    {
+      href: `/admin/form/${formId}/extra`,
+      label: "Settings",
+      icon: Settings,
+      active: pathname.startsWith(`/admin/form/${formId}/extra`),
+    },
+    {
+      href: `/admin/form/${formId}/preview`,
+      label: "Preview",
+      icon: Eye,
+      active: pathname.startsWith(`/admin/form/${formId}/preview`),
+    },
+  ];
+
+  return (
+    <Sidebar variant="sidebar" collapsible="icon">
+      <SidebarHeader className="border-b p-2">
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              asChild
+              size="lg"
+              tooltip={`${formTitle} · ${isOpen ? "Open" : "Closed"}`}
+              className="h-auto min-h-14"
+            >
+              <GuardedLink
+                href={`/admin/form/${formId}`}
+                aria-label={`${formTitle}, ${isOpen ? "open" : "closed"}. Open editor`}
+              >
+                <FilePenLine />
+                <div className="min-w-0 flex-1">
+                  <div className="flex min-w-0 items-center gap-2">
+                    <span className="min-w-0 flex-1 truncate font-medium">
+                      {formTitle}
+                    </span>
+                    <Badge
+                      variant={isOpen ? "default" : "secondary"}
+                      className="shrink-0"
+                    >
+                      {isOpen ? "Open" : "Closed"}
+                    </Badge>
+                  </div>
+                  <span className="mt-1 block text-xs text-muted-foreground">
+                    {currentSection}
+                  </span>
+                </div>
+              </GuardedLink>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+          <SidebarMenuItem>
+            <SidebarMenuButton asChild>
+              <GuardedLink href="/admin/form">
+                <ArrowLeft />
+                <span>All forms</span>
+              </GuardedLink>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Workspace</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {items.map(({ href, label, icon: Icon, active }) => (
+                <SidebarMenuItem key={href}>
+                  <SidebarMenuButton asChild isActive={active}>
+                    <GuardedLink href={href}>
+                      <Icon />
+                      <span>{label}</span>
+                    </GuardedLink>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter className="border-t p-4">
+        <div className="flex items-center gap-1">
+          {(userName || profile) && (
+            <DropdownMenuAvatar
+              userName={userName || ""}
+              userImage={userImage || ""}
+              profile={profile || null}
+              showName
+            />
+          )}
+          <div className="ml-auto">
+            <ThemeToggle />
+          </div>
+        </div>
+      </SidebarFooter>
+    </Sidebar>
+  );
+}
diff --git a/components/guarded-link.tsx b/components/guarded-link.tsx
new file mode 100644
index 0000000..5aa2777
--- /dev/null
+++ b/components/guarded-link.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import type { ComponentProps, MouseEvent } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { flushPendingSaves } from "@/lib/admin-form-save-bridge";
+
+export function GuardedLink({
+  href,
+  onClick,
+  ...props
+}: ComponentProps<typeof Link>) {
+  const router = useRouter();
+
+  const handleClick = async (event: MouseEvent<HTMLAnchorElement>) => {
+    onClick?.(event);
+    if (
+      event.defaultPrevented ||
+      event.button !== 0 ||
+      event.metaKey ||
+      event.ctrlKey ||
+      event.shiftKey ||
+      event.altKey ||
+      typeof href !== "string"
+    ) {
+      return;
+    }
+
+    event.preventDefault();
+    try {
+      await flushPendingSaves();
+      router.push(href);
+    } catch {
+      // The persistent save error remains visible on the current page.
+    }
+  };
+
+  return <Link href={href} onClick={handleClick} {...props} />;
+}
diff --git a/components/results-filters.tsx b/components/results-filters.tsx
new file mode 100644
index 0000000..8ab3505
--- /dev/null
+++ b/components/results-filters.tsx
@@ -0,0 +1,194 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import type { ResultFilters } from "@/lib/admin-form-results";
+import { Download, Search, X, CalendarDays } from "lucide-react";
+import { format, parseISO } from "date-fns";
+
+function DateFilterPicker({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const selected = value ? parseISO(value) : undefined;
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          data-empty={!selected}
+          className="w-full justify-start text-left font-normal data-[empty=true]:text-muted-foreground lg:w-44"
+        >
+          <CalendarDays data-icon="inline-start" />
+          {selected ? format(selected, "PP") : label}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="single"
+          selected={selected}
+          onSelect={(date) => onChange(date ? format(date, "yyyy-MM-dd") : "")}
+        />
+        {selected && (
+          <div className="border-t p-2">
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="w-full"
+              onClick={() => onChange("")}
+            >
+              Clear date
+            </Button>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export function ResultsFilters({
+  formId,
+  filters,
+}: {
+  formId: string;
+  filters: ResultFilters;
+}) {
+  const router = useRouter();
+  const [values, setValues] = useState(filters);
+  const base = `/admin/form/${formId}/result`;
+
+  const apply = () => {
+    const params = new URLSearchParams();
+    if (values.q) params.set("q", values.q);
+    if (values.sort !== "submittedAt") params.set("sort", values.sort);
+    if (values.direction !== "desc") params.set("direction", values.direction);
+    if (values.edited !== "all") params.set("edited", values.edited);
+    if (values.dateFrom) params.set("dateFrom", values.dateFrom);
+    if (values.dateTo) params.set("dateTo", values.dateTo);
+    router.push(`${base}?${params}`);
+  };
+
+  const exportParams = new URLSearchParams({
+    q: values.q,
+    sort: values.sort,
+    direction: values.direction,
+    edited: values.edited,
+    dateFrom: values.dateFrom,
+    dateTo: values.dateTo,
+  });
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-2 lg:flex-row">
+        <Input
+          value={values.q}
+          onChange={(event) =>
+            setValues((current) => ({ ...current, q: event.target.value }))
+          }
+          onKeyDown={(event) => {
+            if (event.key === "Enter") apply();
+          }}
+          placeholder="Search name or Discord ID"
+          aria-label="Search responses"
+        />
+        <Select
+          value={values.edited}
+          onValueChange={(edited: ResultFilters["edited"]) =>
+            setValues((current) => ({ ...current, edited }))
+          }
+        >
+          <SelectTrigger className="w-full lg:w-40" aria-label="Edit status">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="all">All responses</SelectItem>
+              <SelectItem value="edited">Edited</SelectItem>
+              <SelectItem value="unedited">Not edited</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <Select
+          value={`${values.sort}-${values.direction}`}
+          onValueChange={(value) => {
+            const [sort, direction] = value.split("-") as [
+              ResultFilters["sort"],
+              ResultFilters["direction"],
+            ];
+            setValues((current) => ({ ...current, sort, direction }));
+          }}
+        >
+          <SelectTrigger className="w-full lg:w-44" aria-label="Sort responses">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="submittedAt-desc">Newest first</SelectItem>
+              <SelectItem value="submittedAt-asc">Oldest first</SelectItem>
+              <SelectItem value="respondent-asc">Respondent A–Z</SelectItem>
+              <SelectItem value="respondent-desc">Respondent Z–A</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <DateFilterPicker
+          label="From date"
+          value={values.dateFrom}
+          onChange={(dateFrom) =>
+            setValues((current) => ({ ...current, dateFrom }))
+          }
+        />
+        <DateFilterPicker
+          label="Through date"
+          value={values.dateTo}
+          onChange={(dateTo) =>
+            setValues((current) => ({ ...current, dateTo }))
+          }
+        />
+        <Button onClick={apply}>
+          <Search data-icon="inline-start" />
+          Apply
+        </Button>
+        <Button variant="outline" asChild>
+          <a href={`${base}/export?${exportParams}`}>
+            <Download data-icon="inline-start" />
+            CSV
+          </a>
+        </Button>
+      </div>
+      {(filters.q ||
+        filters.edited !== "all" ||
+        filters.dateFrom ||
+        filters.dateTo) && (
+        <Button variant="ghost" size="sm" className="self-start" asChild>
+          <a href={base}>
+            <X data-icon="inline-start" />
+            Clear filters
+          </a>
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/components/rich-text-editor.tsx b/components/rich-text-editor.tsx
index 7b7e7fe..c8dbea9 100644
--- a/components/rich-text-editor.tsx
+++ b/components/rich-text-editor.tsx
@@ -108,6 +108,8 @@ export function RichTextEditor({ value, onChange, className }: RichTextEditorPro
           className={`h-8 w-8 ${editor.isActive("bold") ? "bg-muted" : ""}`}
           onClick={() => editor.chain().focus().toggleBold().run()}
           title="Bold"
+          aria-label="Bold"
+          aria-pressed={editor.isActive("bold")}
         >
           <Bold className="h-4 w-4" />
         </Button>
@@ -118,6 +120,8 @@ export function RichTextEditor({ value, onChange, className }: RichTextEditorPro
           className={`h-8 w-8 ${editor.isActive("italic") ? "bg-muted" : ""}`}
           onClick={() => editor.chain().focus().toggleItalic().run()}
           title="Italic"
+          aria-label="Italic"
+          aria-pressed={editor.isActive("italic")}
         >
           <Italic className="h-4 w-4" />
         </Button>
@@ -128,6 +132,8 @@ export function RichTextEditor({ value, onChange, className }: RichTextEditorPro
           className={`h-8 w-8 ${editor.isActive("underline") ? "bg-muted" : ""}`}
           onClick={() => editor.chain().focus().toggleUnderline().run()}
           title="Underline"
+          aria-label="Underline"
+          aria-pressed={editor.isActive("underline")}
         >
           <UnderlineIcon className="h-4 w-4" />
         </Button>
@@ -138,6 +144,8 @@ export function RichTextEditor({ value, onChange, className }: RichTextEditorPro
           className={`h-8 w-8 ${editor.isActive("strike") ? "bg-muted" : ""}`}
           onClick={() => editor.chain().focus().toggleStrike().run()}
           title="Strikethrough"
+          aria-label="Strikethrough"
+          aria-pressed={editor.isActive("strike")}
         >
           <Strikethrough className="h-4 w-4" />
         </Button>
@@ -149,6 +157,7 @@ export function RichTextEditor({ value, onChange, className }: RichTextEditorPro
           className={`h-8 w-8 ${editor.isActive("link") ? "bg-muted" : ""}`}
           onClick={toggleLink}
           title={editor.isActive("link") ? "Remove Link" : "Add Link"}
+          aria-label={editor.isActive("link") ? "Remove link" : "Add link"}
         >
           {editor.isActive("link") ? <Unlink className="h-4 w-4" /> : <LinkIcon className="h-4 w-4" />}
         </Button>
@@ -166,6 +175,8 @@ export function RichTextEditor({ value, onChange, className }: RichTextEditorPro
             className={`h-8 w-8 ${editor.isActive("bold") ? "bg-muted" : ""}`}
             onClick={() => editor.chain().focus().toggleBold().run()}
             title="Bold"
+            aria-label="Bold"
+            aria-pressed={editor.isActive("bold")}
           >
             <Bold className="h-4 w-4" />
           </Button>
@@ -176,6 +187,8 @@ export function RichTextEditor({ value, onChange, className }: RichTextEditorPro
             className={`h-8 w-8 ${editor.isActive("italic") ? "bg-muted" : ""}`}
             onClick={() => editor.chain().focus().toggleItalic().run()}
             title="Italic"
+            aria-label="Italic"
+            aria-pressed={editor.isActive("italic")}
           >
             <Italic className="h-4 w-4" />
           </Button>
@@ -186,6 +199,8 @@ export function RichTextEditor({ value, onChange, className }: RichTextEditorPro
             className={`h-8 w-8 ${editor.isActive("underline") ? "bg-muted" : ""}`}
             onClick={() => editor.chain().focus().toggleUnderline().run()}
             title="Underline"
+            aria-label="Underline"
+            aria-pressed={editor.isActive("underline")}
           >
             <UnderlineIcon className="h-4 w-4" />
           </Button>
@@ -196,6 +211,8 @@ export function RichTextEditor({ value, onChange, className }: RichTextEditorPro
             className={`h-8 w-8 ${editor.isActive("strike") ? "bg-muted" : ""}`}
             onClick={() => editor.chain().focus().toggleStrike().run()}
             title="Strikethrough"
+            aria-label="Strikethrough"
+            aria-pressed={editor.isActive("strike")}
           >
             <Strikethrough className="h-4 w-4" />
           </Button>
diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx
new file mode 100644
index 0000000..cb4859c
--- /dev/null
+++ b/components/ui/calendar.tsx
@@ -0,0 +1,222 @@
+"use client"
+
+import * as React from "react"
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButton,
+  type Locale,
+} from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  locale,
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "group/calendar bg-background p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      locale={locale}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString(locale?.code, { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative rounded-(--cell-radius)",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute inset-0 bg-popover opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "font-medium select-none",
+          captionLayout === "label"
+            ? "text-sm"
+            : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label
+        ),
+        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-(--cell-size) select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] text-muted-foreground select-none",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn(
+          "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_end
+        ),
+        today: cn(
+          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: ({ ...props }) => (
+          <CalendarDayButton locale={locale} {...props} />
+        ),
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  locale,
+  ...props
+}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString(locale?.code)}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx
new file mode 100644
index 0000000..e248f05
--- /dev/null
+++ b/components/ui/popover.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-2xl bg-popover p-4 text-sm text-popover-foreground shadow-2xl ring-1 ring-foreground/5 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-1 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
+  return (
+    <div
+      data-slot="popover-title"
+      className={cn("text-base font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+}
diff --git a/db/schema/form.ts b/db/schema/form.ts
index e7036d5..b2945d0 100644
--- a/db/schema/form.ts
+++ b/db/schema/form.ts
@@ -6,6 +6,7 @@ import {
   integer,
   jsonb,
   uniqueIndex,
+  index,
 } from "drizzle-orm/pg-core";
 import { uuidv7 } from "uuidv7";
 
@@ -65,6 +66,11 @@ export const submissions = formSchema.table(
       submission.formId,
       submission.userDiscordId
     ),
+    index("submission_form_submitted_at_id_idx").on(
+      submission.formId,
+      submission.submittedAt,
+      submission.id
+    ),
   ]
 );
 
diff --git a/drizzle/0012_clammy_the_stranger.sql b/drizzle/0012_clammy_the_stranger.sql
new file mode 100644
index 0000000..4d7edbb
--- /dev/null
+++ b/drizzle/0012_clammy_the_stranger.sql
@@ -0,0 +1 @@
+CREATE INDEX "submission_form_submitted_at_id_idx" ON "form"."submission" USING btree ("form_id","submitted_at","id");
diff --git a/drizzle/meta/_journal.json b/drizzle/meta/_journal.json
index 52cd48d..d741f7c 100644
--- a/drizzle/meta/_journal.json
+++ b/drizzle/meta/_journal.json
@@ -85,6 +85,13 @@
       "when": 1783613113217,
       "tag": "0011_unique_submission_user",
       "breakpoints": true
+    },
+    {
+      "idx": 12,
+      "version": "7",
+      "when": 1785152117830,
+      "tag": "0012_clammy_the_stranger",
+      "breakpoints": true
     }
   ]
 }
diff --git a/hooks/use-debounced-autosave.ts b/hooks/use-debounced-autosave.ts
new file mode 100644
index 0000000..d58da89
--- /dev/null
+++ b/hooks/use-debounced-autosave.ts
@@ -0,0 +1,104 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { registerPendingSave } from "@/lib/admin-form-save-bridge";
+
+export type AutoSaveStatus = "clean" | "dirty" | "saving" | "saved" | "error";
+
+export function useDebouncedAutoSave({
+  save,
+  delay = 1000,
+}: {
+  save: () => Promise<void>;
+  delay?: number;
+}) {
+  const [status, setStatus] = useState<AutoSaveStatus>("clean");
+  const [error, setError] = useState<string | null>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const revisionRef = useRef(0);
+  const savedRevisionRef = useRef(0);
+  const savingRef = useRef<Promise<void> | null>(null);
+  const saveRef = useRef(save);
+
+  useEffect(() => {
+    saveRef.current = save;
+  }, [save]);
+
+  const runSave = useCallback(async () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+
+    if (savingRef.current) {
+      await savingRef.current;
+      if (revisionRef.current === savedRevisionRef.current) return;
+    }
+
+    while (revisionRef.current !== savedRevisionRef.current) {
+      const revision = revisionRef.current;
+      setStatus("saving");
+      setError(null);
+
+      const request = saveRef.current()
+        .then(() => {
+          savedRevisionRef.current = revision;
+          setStatus(revisionRef.current === revision ? "saved" : "dirty");
+        })
+        .catch((reason: unknown) => {
+          setError(reason instanceof Error ? reason.message : "Could not save changes.");
+          setStatus("error");
+          throw reason;
+        })
+        .finally(() => {
+          savingRef.current = null;
+        });
+
+      savingRef.current = request;
+      await request;
+    }
+  }, []);
+
+  const schedule = useCallback(() => {
+    revisionRef.current += 1;
+    setStatus("dirty");
+    setError(null);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      void runSave().catch(() => undefined);
+    }, delay);
+  }, [delay, runSave]);
+
+  const flush = useCallback(async () => {
+    if (
+      revisionRef.current === savedRevisionRef.current &&
+      !savingRef.current
+    ) {
+      return;
+    }
+    await runSave();
+  }, [runSave]);
+
+  useEffect(() => registerPendingSave(flush), [flush]);
+
+  useEffect(() => {
+    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+      if (
+        revisionRef.current !== savedRevisionRef.current ||
+        savingRef.current
+      ) {
+        event.preventDefault();
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+      if (timerRef.current) clearTimeout(timerRef.current);
+      if (revisionRef.current !== savedRevisionRef.current) {
+        void saveRef.current().catch(() => undefined);
+      }
+    };
+  }, []);
+
+  return { status, error, schedule, flush, retry: runSave };
+}
diff --git a/lib/admin-form-results.ts b/lib/admin-form-results.ts
new file mode 100644
index 0000000..a01cb0d
--- /dev/null
+++ b/lib/admin-form-results.ts
@@ -0,0 +1,133 @@
+import { db } from "@/db";
+import { submissions } from "@/db/schema";
+import {
+  and,
+  asc,
+  count,
+  desc,
+  eq,
+  gte,
+  ilike,
+  lt,
+  or,
+  sql,
+  type SQL,
+} from "drizzle-orm";
+
+export const RESULTS_PAGE_SIZE = 25;
+
+export type ResultFilters = {
+  q: string;
+  page: number;
+  sort: "submittedAt" | "respondent";
+  direction: "asc" | "desc";
+  edited: "all" | "edited" | "unedited";
+  dateFrom: string;
+  dateTo: string;
+};
+
+export function parseResultFilters(
+  params: Record<string, string | string[] | undefined>
+): ResultFilters {
+  const value = (key: string) => {
+    const entry = params[key];
+    return Array.isArray(entry) ? entry[0] ?? "" : entry ?? "";
+  };
+  const page = Number.parseInt(value("page"), 10);
+  const sort = value("sort");
+  const direction = value("direction");
+  const edited = value("edited");
+
+  return {
+    q: value("q").trim().slice(0, 100),
+    page: Number.isFinite(page) && page > 0 ? page : 1,
+    sort: sort === "respondent" ? "respondent" : "submittedAt",
+    direction: direction === "asc" ? "asc" : "desc",
+    edited:
+      edited === "edited" || edited === "unedited" ? edited : "all",
+    dateFrom: /^\d{4}-\d{2}-\d{2}$/.test(value("dateFrom"))
+      ? value("dateFrom")
+      : "",
+    dateTo: /^\d{4}-\d{2}-\d{2}$/.test(value("dateTo"))
+      ? value("dateTo")
+      : "",
+  };
+}
+
+function bangkokBoundary(date: string, end: boolean) {
+  if (!date) return null;
+  const value = new Date(`${date}T00:00:00+07:00`);
+  if (end) value.setUTCDate(value.getUTCDate() + 1);
+  return value;
+}
+
+function buildWhere(formId: string, filters: ResultFilters) {
+  const conditions: SQL[] = [eq(submissions.formId, formId)];
+  if (filters.q) {
+    const query = `%${filters.q}%`;
+    conditions.push(
+      or(
+        ilike(submissions.userName, query),
+        ilike(submissions.userDiscordId, query)
+      )!
+    );
+  }
+  if (filters.edited === "edited") {
+    conditions.push(sql`jsonb_array_length(coalesce(${submissions.editHistory}, '[]'::jsonb)) > 0`);
+  }
+  if (filters.edited === "unedited") {
+    conditions.push(sql`jsonb_array_length(coalesce(${submissions.editHistory}, '[]'::jsonb)) = 0`);
+  }
+  const from = bangkokBoundary(filters.dateFrom, false);
+  const to = bangkokBoundary(filters.dateTo, true);
+  if (from) conditions.push(gte(submissions.submittedAt, from));
+  if (to) conditions.push(lt(submissions.submittedAt, to));
+  return and(...conditions)!;
+}
+
+export async function getFilteredSubmissions(
+  formId: string,
+  filters: ResultFilters,
+  options: { paginate?: boolean } = {}
+) {
+  const where = buildWhere(formId, filters);
+  const orderDirection = filters.direction === "asc" ? asc : desc;
+  const order =
+    filters.sort === "respondent"
+      ? orderDirection(submissions.userName)
+      : orderDirection(submissions.submittedAt);
+  const [{ total }] = await db
+    .select({ total: count() })
+    .from(submissions)
+    .where(where);
+
+  const baseQuery = db
+    .select()
+    .from(submissions)
+    .where(where)
+    .orderBy(order, orderDirection(submissions.id));
+  const rows =
+    options.paginate === false
+      ? await baseQuery
+      : await baseQuery
+          .limit(RESULTS_PAGE_SIZE)
+          .offset((filters.page - 1) * RESULTS_PAGE_SIZE);
+
+  return { rows, total };
+}
+
+export function resultFiltersToSearchParams(
+  filters: ResultFilters,
+  overrides: Partial<ResultFilters> = {}
+) {
+  const next = { ...filters, ...overrides };
+  const params = new URLSearchParams();
+  if (next.q) params.set("q", next.q);
+  if (next.page > 1) params.set("page", String(next.page));
+  if (next.sort !== "submittedAt") params.set("sort", next.sort);
+  if (next.direction !== "desc") params.set("direction", next.direction);
+  if (next.edited !== "all") params.set("edited", next.edited);
+  if (next.dateFrom) params.set("dateFrom", next.dateFrom);
+  if (next.dateTo) params.set("dateTo", next.dateTo);
+  return params.toString();
+}
diff --git a/lib/admin-form-save-bridge.ts b/lib/admin-form-save-bridge.ts
new file mode 100644
index 0000000..7ef504a
--- /dev/null
+++ b/lib/admin-form-save-bridge.ts
@@ -0,0 +1,16 @@
+"use client";
+
+type FlushSave = () => Promise<void>;
+
+const pendingSaves = new Set<FlushSave>();
+
+export function registerPendingSave(flush: FlushSave) {
+  pendingSaves.add(flush);
+  return () => {
+    pendingSaves.delete(flush);
+  };
+}
+
+export async function flushPendingSaves() {
+  await Promise.all([...pendingSaves].map((flush) => flush()));
+}
diff --git a/lib/admin-form-ux.test.ts b/lib/admin-form-ux.test.ts
new file mode 100644
index 0000000..fcd6fb2
--- /dev/null
+++ b/lib/admin-form-ux.test.ts
@@ -0,0 +1,68 @@
+import { describe, expect, test } from "bun:test";
+import {
+  isValidDiscordWebhookUrl,
+  previewWebhookTemplate,
+} from "@/lib/discord-webhook-settings";
+import {
+  parseResultFilters,
+  resultFiltersToSearchParams,
+} from "@/lib/admin-form-results";
+
+describe("Discord webhook settings", () => {
+  test("accepts only Discord webhook endpoints", () => {
+    expect(
+      isValidDiscordWebhookUrl(
+        "https://discord.com/api/webhooks/123/secret-token"
+      )
+    ).toBe(true);
+    expect(isValidDiscordWebhookUrl("https://example.com/api/webhooks/1/2")).toBe(
+      false
+    );
+    expect(isValidDiscordWebhookUrl("not a URL")).toBe(false);
+  });
+
+  test("previews known variables without removing unknown variables", () => {
+    expect(
+      previewWebhookTemplate("{username}: {1} {unknown}")
+    ).toBe("Example User: Example answer 1 {unknown}");
+    expect(previewWebhookTemplate("{update}", { update: true })).toContain(
+      "Previous answer"
+    );
+  });
+});
+
+describe("response filters", () => {
+  test("normalizes unsupported and unsafe query values", () => {
+    expect(
+      parseResultFilters({
+        page: "-5",
+        sort: "other",
+        direction: "sideways",
+        edited: "maybe",
+        dateFrom: "27/07/2026",
+      })
+    ).toEqual({
+      q: "",
+      page: 1,
+      sort: "submittedAt",
+      direction: "desc",
+      edited: "all",
+      dateFrom: "",
+      dateTo: "",
+    });
+  });
+
+  test("preserves active filters when changing page", () => {
+    const filters = parseResultFilters({
+      q: "Erika",
+      edited: "edited",
+      dateFrom: "2026-07-01",
+    });
+    const params = new URLSearchParams(
+      resultFiltersToSearchParams(filters, { page: 2 })
+    );
+    expect(params.get("q")).toBe("Erika");
+    expect(params.get("edited")).toBe("edited");
+    expect(params.get("page")).toBe("2");
+  });
+});
diff --git a/lib/discord-webhook-settings.ts b/lib/discord-webhook-settings.ts
new file mode 100644
index 0000000..301fc48
--- /dev/null
+++ b/lib/discord-webhook-settings.ts
@@ -0,0 +1,37 @@
+const DISCORD_WEBHOOK_HOSTS = new Set([
+  "discord.com",
+  "canary.discord.com",
+  "ptb.discord.com",
+]);
+
+export function isValidDiscordWebhookUrl(value: string) {
+  try {
+    const url = new URL(value);
+    return (
+      url.protocol === "https:" &&
+      DISCORD_WEBHOOK_HOSTS.has(url.hostname) &&
+      /^\/api\/webhooks\/[^/]+\/[^/]+\/?$/.test(url.pathname)
+    );
+  } catch {
+    return false;
+  }
+}
+
+export function previewWebhookTemplate(
+  template: string,
+  options: { update?: boolean } = {}
+) {
+  const source =
+    template.trim() ||
+    (options.update
+      ? "Submission updated by {username} ({id}).\n{update}"
+      : "New submission from {username} ({id}).");
+  return source.replace(/\{([^}]+)\}/g, (_match, variable: string) => {
+    const key = variable.toLowerCase();
+    if (key === "username" || key === "displayname") return "Example User";
+    if (key === "id") return "123456789";
+    if (key === "update") return "Question 1: Previous answer → Example answer";
+    if (/^\d+$/.test(key)) return `Example answer ${key}`;
+    return `{${variable}}`;
+  });
+}
diff --git a/package.json b/package.json
index 01862cb..1444416 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,9 @@
   },
   "dependencies": {
     "@auth/drizzle-adapter": "^1.11.2",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.4.0",
     "@radix-ui/react-label": "^2.1.11",
     "@radix-ui/react-slot": "^1.3.0",
@@ -30,6 +33,7 @@
     "@tiptap/starter-kit": "^3.27.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.4.0",
     "drizzle-orm": "^0.45.2",
     "lucide-react": "^1.23.0",
     "next": "^16.2.10",
@@ -38,6 +42,7 @@
     "postgres": "^3.4.9",
     "radix-ui": "^1.6.1",
     "react": "19.2.7",
+    "react-day-picker": "^10.0.1",
     "react-dom": "19.2.7",
     "react-hook-form": "^7.81.0",
     "reconnecting-eventsource": "^1.6.5",