diff --git a/.changeset/seven-radios-suffer.md b/.changeset/seven-radios-suffer.md
new file mode 100644
index 0000000..2f736b0
--- /dev/null
+++ b/.changeset/seven-radios-suffer.md
@@ -0,0 +1,5 @@
+---
+"namesake": minor
+---
+
+Display form fields within quest steps
diff --git a/convex/questFields.ts b/convex/questFields.ts
index 39b807f..576a6cf 100644
--- a/convex/questFields.ts
+++ b/convex/questFields.ts
@@ -10,6 +10,19 @@ export const getAllFields = query({
   },
 });
 
+export const getFields = query({
+  args: { fieldIds: v.array(v.id("questFields")) },
+  handler: async (ctx, args) => {
+    const fields = await Promise.all(
+      args.fieldIds.map(async (fieldId) => {
+        const field = await ctx.db.get(fieldId);
+        if (field) return field;
+      }),
+    ).then((fields) => fields.filter((field) => field !== undefined));
+    return fields;
+  },
+});
+
 export const createField = userMutation({
   args: {
     type: field,
diff --git a/convex/questSteps.ts b/convex/questSteps.ts
index fbc84a7..9face07 100644
--- a/convex/questSteps.ts
+++ b/convex/questSteps.ts
@@ -10,6 +10,7 @@ export const create = userMutation({
     questId: v.id("quests"),
     title: v.string(),
     description: v.optional(v.string()),
+    fields: v.optional(v.array(v.id("questFields"))),
   },
   handler: async (ctx, args) => {
     const questStepId = await ctx.db.insert("questSteps", {
@@ -17,6 +18,7 @@ export const create = userMutation({
       title: args.title,
       description: args.description,
       creationUser: ctx.userId,
+      fields: args.fields,
     });
 
     const quest = await ctx.db.get(args.questId);
diff --git a/convex/schema.ts b/convex/schema.ts
index b66a471..d7b8f5c 100644
--- a/convex/schema.ts
+++ b/convex/schema.ts
@@ -31,13 +31,7 @@ const questSteps = defineTable({
   creationUser: v.id("users"),
   title: v.string(),
   description: v.optional(v.string()),
-  fields: v.optional(
-    v.array(
-      v.object({
-        fieldId: v.id("questFields"),
-      }),
-    ),
-  ),
+  fields: v.optional(v.array(v.id("questFields"))),
 }).index("questId", ["questId"]);
 
 /**
@@ -115,7 +109,7 @@ const userQuests = defineTable({
  */
 const userData = defineTable({
   userId: v.id("users"),
-  fieldId: v.id("fields"),
+  fieldId: v.id("questFields"),
   value: v.string(),
 }).index("userId", ["userId"]);
 
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index d3cef4a..c9c501d 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -4,7 +4,7 @@ import {
   Checkbox as AriaCheckbox,
   CheckboxGroup as AriaCheckboxGroup,
   type CheckboxGroupProps as AriaCheckboxGroupProps,
-  type CheckboxProps,
+  type CheckboxProps as AriaCheckboxProps,
   type ValidationResult,
   composeRenderProps,
 } from "react-aria-components";
@@ -40,7 +40,7 @@ export function CheckboxGroup(props: CheckboxGroupProps) {
 }
 
 const checkboxStyles = tv({
-  base: "flex gap-2 items-center group text-sm transition",
+  base: "flex gap-2 items-center group transition w-max",
   variants: {
     isDisabled: {
       false: "text-gray-normal cursor-pointer",
@@ -58,7 +58,7 @@ const boxStyles = tv({
       true: "bg-purple-9 dark:bg-purpledark-9 border-transparent",
     },
     isInvalid: {
-      true: "text-red-9 dark:text-reddark-9 forced-colors:![--color:Mark] group-pressed:[--color:theme(colors.red.800)] dark:group-pressed:[--color:theme(colors.red.700)]",
+      true: "text-red-9 dark:text-reddark-9 forced-colors:![--color:Mark]",
     },
     isDisabled: {
       true: "text-gray-7 dark:text-graydark-7 forced-colors:![--color:GrayText]",
@@ -69,31 +69,46 @@ const boxStyles = tv({
 const iconStyles =
   "w-5 h-5 text-white group-disabled:text-gray-4 dark:group-disabled:text-gray-9 forced-colors:text-[HighlightText]";
 
+export interface CheckboxProps extends AriaCheckboxProps {
+  label?: string;
+  description?: string;
+}
+
 export function Checkbox(props: CheckboxProps) {
   return (
-    <AriaCheckbox
-      {...props}
-      className={composeRenderProps(props.className, (className, renderProps) =>
-        checkboxStyles({ ...renderProps, className }),
-      )}
-    >
-      {({ isSelected, isIndeterminate, ...renderProps }) => (
-        <>
-          <div
-            className={boxStyles({
-              isSelected: isSelected || isIndeterminate,
-              ...renderProps,
-            })}
-          >
-            {isIndeterminate ? (
-              <RiSubtractLine aria-hidden className={iconStyles} />
-            ) : isSelected ? (
-              <RiCheckLine aria-hidden className={iconStyles} />
-            ) : null}
-          </div>
-          {props.children}
-        </>
+    <div>
+      <AriaCheckbox
+        {...props}
+        className={composeRenderProps(
+          props.className,
+          (className, renderProps) =>
+            checkboxStyles({ ...renderProps, className }),
+        )}
+      >
+        {({ isSelected, isIndeterminate, ...renderProps }) => (
+          <>
+            <div
+              className={boxStyles({
+                isSelected: isSelected || isIndeterminate,
+                ...renderProps,
+              })}
+            >
+              {isIndeterminate ? (
+                <RiSubtractLine aria-hidden className={iconStyles} />
+              ) : isSelected ? (
+                <RiCheckLine aria-hidden className={iconStyles} />
+              ) : null}
+            </div>
+            {props.label}
+            {props.children}
+          </>
+        )}
+      </AriaCheckbox>
+      {props.description && (
+        <FieldDescription className="ml-8">
+          {props.description}
+        </FieldDescription>
       )}
-    </AriaCheckbox>
+    </div>
   );
 }
diff --git a/src/components/QuestStep/QuestStep.tsx b/src/components/QuestStep/QuestStep.tsx
new file mode 100644
index 0000000..ea9c3ba
--- /dev/null
+++ b/src/components/QuestStep/QuestStep.tsx
@@ -0,0 +1,88 @@
+import { api } from "@convex/_generated/api";
+import type { Doc, Id } from "@convex/_generated/dataModel";
+import { useQuery } from "convex/react";
+import Markdown from "react-markdown";
+import { Card } from "../Card";
+import { Checkbox } from "../Checkbox";
+import { DateField } from "../DateField";
+import { NumberField } from "../NumberField";
+import { Select, SelectItem } from "../Select";
+import { TextArea } from "../TextArea";
+import { TextField } from "../TextField";
+
+export interface QuestStepProps {
+  title: string;
+  description?: string;
+  fields?: Id<"questFields">[];
+}
+
+export function QuestFields(props: { questFields: Doc<"questFields">[] }) {
+  const markupForField = (field: Doc<"questFields">) => {
+    switch (field.type) {
+      case "text":
+        return (
+          <TextField
+            label={field.label}
+            description={field.helpText}
+            type="text"
+          />
+        );
+      case "email":
+        return (
+          <TextField
+            label={field.label}
+            description={field.helpText}
+            type="email"
+          />
+        );
+      case "phone":
+        return (
+          <TextField
+            label={field.label}
+            description={field.helpText}
+            type="tel"
+          />
+        );
+      case "textarea":
+        return <TextArea label={field.label} description={field.helpText} />;
+      case "number":
+        return <NumberField label={field.label} description={field.helpText} />;
+      case "select":
+        return (
+          <Select label={field.label} description={field.helpText}>
+            {/* TODO: Add select options */}
+            <SelectItem />
+          </Select>
+        );
+      case "checkbox":
+        return <Checkbox label={field.label} description={field.helpText} />;
+      case "date":
+        return <DateField label={field.label} description={field.helpText} />;
+      default:
+        return undefined;
+    }
+  };
+
+  // TODO: Add skeleton loaders
+  return props.questFields.map((field) => (
+    <div key={field._id}>{markupForField(field)}</div>
+  ));
+}
+
+export function QuestStep({ title, description, fields }: QuestStepProps) {
+  const questFields = useQuery(api.questFields.getFields, {
+    fieldIds: fields ?? [],
+  });
+
+  return (
+    <Card className="flex flex-col gap-2">
+      <h2 className="text-xl font-semibold">{title}</h2>
+      {description && (
+        <div>
+          <Markdown className="prose dark:prose-invert">{description}</Markdown>
+        </div>
+      )}
+      {questFields && <QuestFields questFields={questFields} />}
+    </Card>
+  );
+}
diff --git a/src/routes/_authenticated/admin/quests/$questId.tsx b/src/routes/_authenticated/admin/quests/$questId.tsx
index 16024b7..1cc028d 100644
--- a/src/routes/_authenticated/admin/quests/$questId.tsx
+++ b/src/routes/_authenticated/admin/quests/$questId.tsx
@@ -3,19 +3,22 @@ import {
   Button,
   Card,
   Form,
+  Menu,
+  MenuItem,
   PageHeader,
   RichTextEditor,
   Select,
   SelectItem,
   TextField,
 } from "@/components";
+import { QuestStep } from "@/components/QuestStep/QuestStep";
 import { api } from "@convex/_generated/api";
 import type { Id } from "@convex/_generated/dataModel";
-import { FIELDS, type Field, ICONS } from "@convex/constants";
+import { FIELDS, ICONS } from "@convex/constants";
 import { createFileRoute } from "@tanstack/react-router";
 import { useMutation, useQuery } from "convex/react";
 import { useState } from "react";
-import Markdown from "react-markdown";
+import { MenuTrigger } from "react-aria-components";
 
 export const Route = createFileRoute("/_authenticated/admin/quests/$questId")({
   component: AdminQuestDetailRoute,
@@ -29,11 +32,12 @@ function AdminQuestDetailRoute() {
   const steps = useQuery(api.questSteps.getStepsForQuest, {
     questId: questId as Id<"quests">,
   });
+  const allFields = useQuery(api.questFields.getAllFields);
   const addQuestStep = useMutation(api.questSteps.create);
   const [isNewStepFormVisible, setIsNewStepFormVisible] = useState(false);
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
-  const [fields, setFields] = useState<Field[]>([]);
+  const [fields, setFields] = useState<Id<"questFields">[]>([]);
 
   // TODO: Loading and empty states
   if (quest === undefined) return;
@@ -42,6 +46,7 @@ function AdminQuestDetailRoute() {
   const clearForm = () => {
     setTitle("");
     setDescription("");
+    setFields([]);
   };
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
@@ -50,6 +55,7 @@ function AdminQuestDetailRoute() {
       questId: questId as Id<"quests">,
       title,
       description,
+      fields,
     });
     clearForm();
     setIsNewStepFormVisible(false);
@@ -69,16 +75,11 @@ function AdminQuestDetailRoute() {
               (step, i) =>
                 step && (
                   <li key={`${quest.title}-step-${i}`}>
-                    <Card className="flex flex-col gap-2">
-                      <h2 className="text-xl font-semibold">{step.title}</h2>
-                      {step.description && (
-                        <div>
-                          <Markdown className="prose dark:prose-invert">
-                            {step.description}
-                          </Markdown>
-                        </div>
-                      )}
-                    </Card>
+                    <QuestStep
+                      title={step.title}
+                      description={step.description}
+                      fields={step.fields}
+                    />
                   </li>
                 ),
             )}
@@ -95,37 +96,74 @@ function AdminQuestDetailRoute() {
           <Card>
             <Form onSubmit={handleSubmit}>
               <h2 className="text-lg">New step</h2>
-              <TextField label="Title" value={title} onChange={setTitle} />
+              <TextField
+                label="Title"
+                value={title}
+                onChange={setTitle}
+                isRequired
+              />
               <RichTextEditor
                 markdown={description}
                 onChange={setDescription}
               />
-              {fields.map((field, i) => (
-                <Card key={`${field}`} className="flex flex-col gap-4">
-                  <Select label="Field type" placeholder="Select a field type">
-                    {Object.entries(FIELDS).map(([id, field]) => {
-                      const Icon = field.icon;
+              {allFields &&
+                fields.map((field, i) => (
+                  <Card key={field} className="flex flex-col gap-4">
+                    <Select
+                      label="Field"
+                      placeholder="Select a field"
+                      selectedKey={field}
+                      onSelectionChange={(key) => {
+                        setFields(
+                          fields.map((f, index) =>
+                            index === i ? (key as Id<"questFields">) : f,
+                          ),
+                        );
+                      }}
+                    >
+                      {allFields.map((field) => {
+                        const Icon = FIELDS[field.type].icon;
+                        return (
+                          <SelectItem
+                            key={field._id}
+                            id={field._id}
+                            textValue={field.label}
+                          >
+                            <Icon size={20} />
+                            {field.label}
+                          </SelectItem>
+                        );
+                      })}
+                    </Select>
+                    <Button
+                      onPress={() =>
+                        setFields(fields.filter((_, index) => index !== i))
+                      }
+                    >
+                      Remove
+                    </Button>
+                  </Card>
+                ))}
+              {allFields && (
+                <MenuTrigger>
+                  <Button variant="secondary">Add field</Button>
+                  <Menu>
+                    {allFields.map((field) => {
+                      const Icon = FIELDS[field.type].icon;
                       return (
-                        <SelectItem key={id} textValue={field.label}>
+                        <MenuItem
+                          key={field._id}
+                          textValue={field.label}
+                          onAction={() => setFields([...fields, field._id])}
+                        >
                           <Icon size={20} />
                           {field.label}
-                        </SelectItem>
+                        </MenuItem>
                       );
                     })}
-                  </Select>
-                  <TextField label="Label" />
-                  <Button
-                    onPress={() =>
-                      setFields(fields.filter((_, index) => index !== i))
-                    }
-                  >
-                    Remove
-                  </Button>
-                </Card>
-              ))}
-              <Button onPress={() => setFields([...fields, ""])}>
-                Add field
-              </Button>
+                  </Menu>
+                </MenuTrigger>
+              )}
               <div className="flex gap-2 justify-end">
                 <Button onPress={() => setIsNewStepFormVisible(false)}>
                   Cancel
diff --git a/src/routes/_authenticated/quests/$questId.tsx b/src/routes/_authenticated/quests/$questId.tsx
index 3479095..dd3d91f 100644
--- a/src/routes/_authenticated/quests/$questId.tsx
+++ b/src/routes/_authenticated/quests/$questId.tsx
@@ -1,19 +1,18 @@
 import {
   Badge,
   Button,
-  Card,
   Menu,
   MenuItem,
   MenuTrigger,
   PageHeader,
 } from "@/components";
+import { QuestStep } from "@/components/QuestStep/QuestStep";
 import { api } from "@convex/_generated/api";
 import type { Id } from "@convex/_generated/dataModel";
 import { ICONS } from "@convex/constants";
 import { RiMoreLine } from "@remixicon/react";
 import { createFileRoute } from "@tanstack/react-router";
 import { useMutation, useQuery } from "convex/react";
-import Markdown from "react-markdown";
 
 export const Route = createFileRoute("/_authenticated/quests/$questId")({
   component: QuestDetailRoute,
@@ -82,10 +81,11 @@ function QuestDetailRoute() {
             (step, i) =>
               step && (
                 <li key={`${quest.title}-step-${i}`}>
-                  <Card>
-                    <h2 className="text-xl font-medium mb-2">{step.title}</h2>
-                    <Markdown>{step.description}</Markdown>
-                  </Card>
+                  <QuestStep
+                    title={step.title}
+                    description={step.description}
+                    fields={step.fields}
+                  />
                 </li>
               ),
           )}