diff --git a/package.json b/package.json
index 52215ad..1f2a444 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@colonydb/anthill": "0.2.0-14",
+    "@colonydb/anthill": "0.2.0-17",
     "jsdom": "^26.0.0",
     "next": "15.2.1",
     "react": "^19.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 71adfc6..90e9fff 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@colonydb/anthill':
-        specifier: 0.2.0-14
-        version: 0.2.0-14(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(valibot@1.1.0(typescript@5.9.2))
+        specifier: 0.2.0-17
+        version: 0.2.0-17(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(valibot@1.1.0(typescript@5.9.2))
       jsdom:
         specifier: ^26.0.0
         version: 26.1.0
@@ -113,8 +113,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@colonydb/anthill@0.2.0-14':
-    resolution: {integrity: sha512-6cOqJWlAiHdtPWIjgOyoXCFFBfPzCdXqpV/eWzIM49dFhH3guEsKVpwpOnvak+wI4mFmWu8lseRRzCSR+e0mTw==}
+  '@colonydb/anthill@0.2.0-17':
+    resolution: {integrity: sha512-8HCKpNJUNDHlAiHg3wIxndPJjbuGmbHqTM8jYot4lFrlqswasbOGSoKWL1C/Xe6mUJ/IdvxsT7nXnix+0AIgjA==}
     peerDependencies:
       react: ^19.0.0
       react-dom: ^19.0.0
@@ -934,7 +934,7 @@ snapshots:
   '@biomejs/cli-win32-x64@2.1.4':
     optional: true
 
-  '@colonydb/anthill@0.2.0-14(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(valibot@1.1.0(typescript@5.9.2))':
+  '@colonydb/anthill@0.2.0-17(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(valibot@1.1.0(typescript@5.9.2))':
     dependencies:
       '@haydn/universal': 0.0.4
       clsx: 2.1.1
diff --git a/src/app/ListForm.tsx b/src/app/ListForm.tsx
index 0d2e5a0..9cf6e01 100644
--- a/src/app/ListForm.tsx
+++ b/src/app/ListForm.tsx
@@ -1,115 +1,86 @@
 import { Button } from "@colonydb/anthill/Button";
+import { Form } from "@colonydb/anthill/Form";
 import { RegularField } from "@colonydb/anthill/RegularField";
 import { Stack } from "@colonydb/anthill/Stack";
 import { StringInput } from "@colonydb/anthill/StringInput";
-import { useState } from "react";
+import { useForm } from "@colonydb/anthill/useForm";
+import * as v from "valibot";
 import type { ListConfig } from ".";
 import List from "./List";
 
 type Props = {
+  id: string;
   list: ListConfig;
   onSubmit: (list: ListConfig) => void;
 };
 
-const ListForm = ({ list: initialList, onSubmit }: Props) => {
-  const [list, setList] = useState(initialList);
-  return (
-    <form
-      onSubmit={(event) => {
-        event.preventDefault();
-        onSubmit(list);
-      }}
-    >
-      <Stack>
-        <RegularField label="Name" name="name" required>
-          <StringInput
-            name="name"
-            placeholder="Reddit"
-            setValue={(name) => {
-              setList({ ...list, name });
-            }}
-            value={list.name}
-          />
-        </RegularField>
-        <RegularField label="URL" name="url" required>
-          <StringInput
-            name="url"
-            placeholder="https://www.reddit.com/"
-            setValue={(url) => {
-              setList({ ...list, url });
-            }}
-            value={list.url}
-          />
-        </RegularField>
-        <RegularField label="Item Selector" name="itemSelector" required>
-          <StringInput
-            name="itemSelector"
-            placeholder="article"
-            setValue={(itemSelector) => {
-              setList({ ...list, itemSelector });
-            }}
-            value={list.itemSelector}
-          />
-        </RegularField>
-        <RegularField label="Title Selector" name="titleSelector">
-          <StringInput
-            name="titleSelector"
-            placeholder="a"
-            setValue={(titleSelector) => {
-              setList({ ...list, titleSelector });
-            }}
-            value={list.titleSelector}
-          />
-        </RegularField>
-        <RegularField label="Link Selector" name="linkSelector">
-          <StringInput
-            name="linkSelector"
-            placeholder="a"
-            setValue={(linkSelector) => {
-              setList({ ...list, linkSelector });
-            }}
-            value={list.linkSelector}
-          />
-        </RegularField>
-        <RegularField label="Include" name="include">
-          <StringInput
-            name="include"
-            placeholder="example, example two"
-            setValue={(include) => {
-              setList({ ...list, include });
-            }}
-            value={list.include}
-          />
-        </RegularField>
-        <RegularField label="Exclude" name="exclude">
-          <StringInput
-            name="exclude"
-            placeholder="example, example two"
-            setValue={(exclude) => {
-              setList({ ...list, exclude });
-            }}
-            value={list.exclude}
-          />
-        </RegularField>
-        {list.name.trim() === "" ||
-        list.url.trim() === "" ||
-        list.itemSelector.trim() === "" ? null : (
-          <List
-            exclude={list.exclude}
-            include={list.include}
-            itemSelector={list.itemSelector}
-            linkSelector={list.linkSelector}
-            name={list.name}
-            titleSelector={list.titleSelector}
-            url={list.url}
-          />
-        )}
-        <div>
-          <Button submit>Save</Button>
-        </div>
-      </Stack>
-    </form>
-  );
+const schema = v.object({
+  exclude: v.optional(v.string()),
+  id: v.string(),
+  include: v.optional(v.string()),
+  itemSelector: v.pipe(v.string(), v.nonEmpty()),
+  linkSelector: v.optional(v.string()),
+  name: v.pipe(v.string(), v.nonEmpty()),
+  titleSelector: v.optional(v.string()),
+  url: v.pipe(v.string(), v.nonEmpty(), v.url()),
+});
+
+const ListForm = ({ id, list: initialList, onSubmit }: Props) => (
+  <Form
+    action={async ({ data }) => {
+      onSubmit(data);
+      return {
+        data,
+        ok: true,
+      };
+    }}
+    id={id}
+    initialData={initialList}
+    schema={schema}
+  >
+    <Stack>
+      <RegularField label="Name" name="name" required>
+        <StringInput name="name" placeholder="Reddit" />
+      </RegularField>
+      <RegularField label="URL" name="url" required>
+        <StringInput name="url" placeholder="https://www.reddit.com/" />
+      </RegularField>
+      <RegularField label="Item Selector" name="itemSelector" required>
+        <StringInput name="itemSelector" placeholder="article" />
+      </RegularField>
+      <RegularField label="Title Selector" name="titleSelector">
+        <StringInput name="titleSelector" placeholder="a" />
+      </RegularField>
+      <RegularField label="Link Selector" name="linkSelector">
+        <StringInput name="linkSelector" placeholder="a" />
+      </RegularField>
+      <RegularField label="Include" name="include">
+        <StringInput name="include" placeholder="example, example two" />
+      </RegularField>
+      <RegularField label="Exclude" name="exclude">
+        <StringInput name="exclude" placeholder="example, example two" />
+      </RegularField>
+      <Preview />
+      <div>
+        <Button submit>Save</Button>
+      </div>
+    </Stack>
+  </Form>
+);
+
+const Preview = () => {
+  const { data } = useForm(schema);
+  return v.is(schema, data) ? (
+    <List
+      exclude={data.exclude}
+      include={data.include}
+      itemSelector={data.itemSelector}
+      linkSelector={data.linkSelector}
+      name={data.name}
+      titleSelector={data.titleSelector}
+      url={data.url}
+    />
+  ) : null;
 };
 
 export default ListForm;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 43efd3b..6a14221 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -14,7 +14,6 @@ import useSWR from "swr/immutable";
 import { v4 as uuid } from "uuid";
 import * as v from "valibot";
 import type { ListConfig } from ".";
-// import Dialog from "./Dialog";
 import List from "./List";
 import ListForm from "./ListForm";
 
@@ -91,6 +90,7 @@ const HomePage = () => {
                 <Card header={<Heading>Add List</Heading>}>
                   <CardContent>
                     <ListForm
+                      id="newList"
                       list={{
                         exclude: "",
                         id: uuid(),
@@ -176,6 +176,7 @@ const HomePage = () => {
                             <Card header={<Heading>Edit List</Heading>}>
                               <CardContent>
                                 <ListForm
+                                  id={`editList:${list.id}`}
                                   list={list}
                                   onSubmit={(list) => {
                                     updateList(list);