diff --git a/package.json b/package.json
index ebd916c..52215ad 100644
--- a/package.json
+++ b/package.json
@@ -1,12 +1,13 @@
 {
   "dependencies": {
-    "@colonydb/anthill": "0.2.0-13",
+    "@colonydb/anthill": "0.2.0-14",
     "jsdom": "^26.0.0",
     "next": "15.2.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "swr": "^2.3.3",
-    "uuid": "^11.1.0"
+    "uuid": "^11.1.0",
+    "valibot": "^1.1.0"
   },
   "devDependencies": {
     "@biomejs/biome": "2.1.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 520535c..71adfc6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@colonydb/anthill':
-        specifier: 0.2.0-13
-        version: 0.2.0-13(@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-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))
       jsdom:
         specifier: ^26.0.0
         version: 26.1.0
@@ -29,6 +29,9 @@ importers:
       uuid:
         specifier: ^11.1.0
         version: 11.1.0
+      valibot:
+        specifier: ^1.1.0
+        version: 1.1.0(typescript@5.9.2)
     devDependencies:
       '@biomejs/biome':
         specifier: 2.1.4
@@ -110,8 +113,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@colonydb/anthill@0.2.0-13':
-    resolution: {integrity: sha512-soPF9RXIKocRXrTrYzYzZEv8aikcu4yvrZvyQjn2lMGYeZrkJBI0dOVGsLqKGq5WndhuS6WyNvt+fSbiYdAr4A==}
+  '@colonydb/anthill@0.2.0-14':
+    resolution: {integrity: sha512-6cOqJWlAiHdtPWIjgOyoXCFFBfPzCdXqpV/eWzIM49dFhH3guEsKVpwpOnvak+wI4mFmWu8lseRRzCSR+e0mTw==}
     peerDependencies:
       react: ^19.0.0
       react-dom: ^19.0.0
@@ -931,7 +934,7 @@ snapshots:
   '@biomejs/cli-win32-x64@2.1.4':
     optional: true
 
-  '@colonydb/anthill@0.2.0-13(@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-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))':
     dependencies:
       '@haydn/universal': 0.0.4
       clsx: 2.1.1
diff --git a/src/app/ListForm.tsx b/src/app/ListForm.tsx
index 6e8bb2d..0d2e5a0 100644
--- a/src/app/ListForm.tsx
+++ b/src/app/ListForm.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@colonydb/anthill/Button";
 import { RegularField } from "@colonydb/anthill/RegularField";
 import { Stack } from "@colonydb/anthill/Stack";
+import { StringInput } from "@colonydb/anthill/StringInput";
 import { useState } from "react";
 import type { ListConfig } from ".";
 import List from "./List";
@@ -21,97 +22,73 @@ const ListForm = ({ list: initialList, onSubmit }: Props) => {
     >
       <Stack>
         <RegularField label="Name" name="name" required>
-          <input
-            id="name"
-            type="text"
-            required
-            value={list.name}
-            onChange={(event) => {
-              setList({ ...list, name: event.target.value });
-            }}
-            size={100}
+          <StringInput
+            name="name"
             placeholder="Reddit"
-            style={{ all: "revert" }}
+            setValue={(name) => {
+              setList({ ...list, name });
+            }}
+            value={list.name}
           />
         </RegularField>
         <RegularField label="URL" name="url" required>
-          <input
-            id="url"
-            type="url"
-            required
-            value={list.url}
-            onChange={(event) => {
-              setList({ ...list, url: event.target.value });
-            }}
-            size={100}
+          <StringInput
+            name="url"
             placeholder="https://www.reddit.com/"
-            style={{ all: "revert" }}
+            setValue={(url) => {
+              setList({ ...list, url });
+            }}
+            value={list.url}
           />
         </RegularField>
         <RegularField label="Item Selector" name="itemSelector" required>
-          <input
-            id="itemSelector"
-            type="text"
-            required
-            value={list.itemSelector}
-            onChange={(event) => {
-              setList({ ...list, itemSelector: event.target.value });
-            }}
-            size={100}
+          <StringInput
+            name="itemSelector"
             placeholder="article"
-            style={{ all: "revert" }}
+            setValue={(itemSelector) => {
+              setList({ ...list, itemSelector });
+            }}
+            value={list.itemSelector}
           />
         </RegularField>
         <RegularField label="Title Selector" name="titleSelector">
-          <input
-            id="titleSelector"
-            type="text"
-            value={list.titleSelector}
-            onChange={(event) => {
-              setList({ ...list, titleSelector: event.target.value });
-            }}
-            size={100}
+          <StringInput
+            name="titleSelector"
             placeholder="a"
-            style={{ all: "revert" }}
+            setValue={(titleSelector) => {
+              setList({ ...list, titleSelector });
+            }}
+            value={list.titleSelector}
           />
         </RegularField>
         <RegularField label="Link Selector" name="linkSelector">
-          <input
-            id="linkSelector"
-            type="text"
-            value={list.linkSelector}
-            onChange={(event) => {
-              setList({ ...list, linkSelector: event.target.value });
-            }}
-            size={100}
+          <StringInput
+            name="linkSelector"
             placeholder="a"
-            style={{ all: "revert" }}
+            setValue={(linkSelector) => {
+              setList({ ...list, linkSelector });
+            }}
+            value={list.linkSelector}
           />
         </RegularField>
         <RegularField label="Include" name="include">
-          <input
-            id="include"
-            type="text"
-            value={list.include}
-            onChange={(event) => {
-              setList({ ...list, include: event.target.value });
-            }}
-            size={100}
+          <StringInput
+            name="include"
             placeholder="example, example two"
-            style={{ all: "revert" }}
+            setValue={(include) => {
+              setList({ ...list, include });
+            }}
+            value={list.include}
           />
         </RegularField>
         <RegularField label="Exclude" name="exclude">
-          <input
-            id="exclude"
-            type="text"
-            value={list.exclude}
-            onChange={(event) => {
-              setList({ ...list, exclude: event.target.value });
-            }}
-            size={100}
+          <StringInput
+            name="exclude"
             placeholder="example, example two"
-            style={{ all: "revert" }}
+            setValue={(exclude) => {
+              setList({ ...list, exclude });
+            }}
+            value={list.exclude}
           />
         </RegularField>
         {list.name.trim() === "" ||
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 76a312a..43efd3b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { ActionSet } from "@colonydb/anthill/ActionSet";
 import { Button } from "@colonydb/anthill/Button";
 import { Card } from "@colonydb/anthill/Card";
 import { CardContent } from "@colonydb/anthill/CardContent";
@@ -7,10 +8,11 @@ import { Dialog } from "@colonydb/anthill/Dialog";
 import { Header } from "@colonydb/anthill/Header";
 import { Heading } from "@colonydb/anthill/Heading";
 import { Icon } from "@colonydb/anthill/Icon";
+import { MutliColumnStack } from "@colonydb/anthill/MutliColumnStack";
 import { Section } from "@colonydb/anthill/Section";
-import { Stack } from "@colonydb/anthill/Stack";
 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";
@@ -33,6 +35,19 @@ const HomePage = () => {
   const addList = (list: ListConfig) =>
     mutate(
       async (current) => {
+        v.parse(
+          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()),
+          }),
+          list,
+        );
         const value = current ? [...current, list] : [list];
         localStorage.setItem("lists", JSON.stringify(value));
         return value;
@@ -94,6 +109,7 @@ const HomePage = () => {
                   </CardContent>
                 </Card>
               )}
+              width="medium"
             >
               Add list
             </Dialog>
@@ -103,82 +119,88 @@ const HomePage = () => {
         </Header>
       }
     >
-      <div
-        style={{
-          columns: "20rem",
-          gap: "2rlh",
-        }}
-      >
-        <Stack>
-          {(lists ?? [])
-            .sort((a, b) => a.name.localeCompare(b.name))
-            .map((list) => (
-              <div key={list.id} style={{ breakInside: "avoid" }}>
-                <List
-                  actions={
-                    <div style={{ display: "flex", gap: "1rem" }}>
-                      <Dialog
-                        dismissible
-                        icon={<Icon symbol="Remove" />}
-                        render={(closeDialog) => (
-                          <Card
-                            header={<Heading>Remove List</Heading>}
-                            footer={
-                              <>
-                                <Button
-                                  dangerous
-                                  onClick={() => {
-                                    deleteList(list);
+      <MutliColumnStack columns="20rem">
+        {(lists ?? [])
+          .sort((a, b) => a.name.localeCompare(b.name))
+          .map((list) => (
+            <List
+              actions={
+                <ActionSet
+                  actions={[
+                    {
+                      content: (
+                        <Dialog
+                          dismissible
+                          icon={<Icon symbol="Remove" />}
+                          render={(closeDialog) => (
+                            <Card
+                              header={<Heading>Remove List</Heading>}
+                              footer={
+                                <>
+                                  <Button
+                                    dangerous
+                                    onClick={() => {
+                                      deleteList(list);
+                                      closeDialog();
+                                    }}
+                                    submit
+                                  >
+                                    Confirm
+                                  </Button>
+                                  <Button
+                                    onClick={() => {
+                                      closeDialog();
+                                    }}
+                                  >
+                                    Cancel
+                                  </Button>
+                                </>
+                              }
+                            >
+                              <CardContent>Are you sure you want to remove this list?</CardContent>
+                            </Card>
+                          )}
+                          width="narrow"
+                        >
+                          Remove list
+                        </Dialog>
+                      ),
+                      key: "remove",
+                    },
+                    {
+                      content: (
+                        <Dialog
+                          dismissible
+                          icon={<Icon symbol="Add" />}
+                          render={(closeDialog) => (
+                            <Card header={<Heading>Edit List</Heading>}>
+                              <CardContent>
+                                <ListForm
+                                  list={list}
+                                  onSubmit={(list) => {
+                                    updateList(list);
                                     closeDialog();
                                   }}
-                                  submit
-                                >
-                                  Confirm
-                                </Button>
-                                <Button
-                                  onClick={() => {
-                                    closeDialog();
-                                  }}
-                                >
-                                  Cancel
-                                </Button>
-                              </>
-                            }
-                          >
-                            <CardContent>Are you sure you want to remove this list?</CardContent>
-                          </Card>
-                        )}
-                        width="narrow"
-                      >
-                        Remove list
-                      </Dialog>
-                      <Dialog
-                        dismissible
-                        icon={<Icon symbol="Add" />}
-                        render={(closeDialog) => (
-                          <Card header={<Heading>Edit List</Heading>}>
-                            <CardContent>
-                              <ListForm
-                                list={list}
-                                onSubmit={(list) => {
-                                  updateList(list);
-                                  closeDialog();
-                                }}
-                              />
-                            </CardContent>
-                          </Card>
-                        )}
-                      >
-                        Edit list
-                      </Dialog>
-                    </div>
-                  }
-                  {...list}
+                                />
+                              </CardContent>
+                            </Card>
+                          )}
+                          width="medium"
+                        >
+                          Edit list
+                        </Dialog>
+                      ),
+                      key: "edit",
+                    },
+                  ]}
+                  title="Edit"
                 />
-              </div>
-            ))}
-        </Stack>
-      </div>
+              }
+              key={list.id}
+              {...list}
+            />
+          ))}
+      </MutliColumnStack>
     </Section>
   );
 };