diff --git a/apps/spotlight/public/uswds b/apps/spotlight/public/uswds
new file mode 120000
index 00000000..bb61b72f
--- /dev/null
+++ b/apps/spotlight/public/uswds
@@ -0,0 +1 @@
+../../../packages/design/static/uswds
\ No newline at end of file
diff --git a/apps/spotlight/src/components/AppFormManager.tsx b/apps/spotlight/src/components/AppFormManager.tsx
index 610526f6..394120a1 100644
--- a/apps/spotlight/src/components/AppFormManager.tsx
+++ b/apps/spotlight/src/components/AppFormManager.tsx
@@ -16,6 +16,7 @@ export default function () {
         config: ctx.formConfig,
         components: defaultFormElementComponents,
         editComponents: defaultFormElementEditComponents,
+        uswdsRoot: ctx.uswdsRoot,
       }}
       formService={ctx.formService}
       baseUrl={ctx.baseUrl}
diff --git a/apps/spotlight/src/components/AppFormRouter.tsx b/apps/spotlight/src/components/AppFormRouter.tsx
index 4ea3c405..7164b641 100644
--- a/apps/spotlight/src/components/AppFormRouter.tsx
+++ b/apps/spotlight/src/components/AppFormRouter.tsx
@@ -10,6 +10,7 @@ export default function AppFormRouter() {
       context={{
         config: ctx.formConfig,
         components: defaultFormElementComponents,
+        uswdsRoot: ctx.uswdsRoot,
       }}
       formService={ctx.formService}
     />
diff --git a/apps/spotlight/src/context.ts b/apps/spotlight/src/context.ts
index 12330e79..4b943864 100644
--- a/apps/spotlight/src/context.ts
+++ b/apps/spotlight/src/context.ts
@@ -13,6 +13,7 @@ export type AppContext = {
   github: GithubRepository;
   formConfig: FormConfig;
   formService: FormService;
+  uswdsRoot: `${string}/`;
 };
 
 let _context: AppContext | null = null;
@@ -24,12 +25,13 @@ export const getAppContext = (): AppContext => {
   return _context;
 };
 
-const createAppContext = (env: any) => {
+const createAppContext = (env: any): AppContext => {
   return {
     github: env.GITHUB,
     baseUrl: env.BASE_URL,
     formConfig: defaultFormConfig,
     formService: createAppFormService(),
+    uswdsRoot: `${env.BASE_URL}uswds/`,
   };
 };
 
diff --git a/apps/spotlight/src/layouts/Layout.astro b/apps/spotlight/src/layouts/Layout.astro
index bf87c867..4b87ba98 100644
--- a/apps/spotlight/src/layouts/Layout.astro
+++ b/apps/spotlight/src/layouts/Layout.astro
@@ -45,7 +45,10 @@ const context = getAppContext();
     />
     <link href="/favicon/favicon.ico" rel="shortcut icon" />
     <meta name="generator" content={Astro.generator} />
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
     <script src="../lib/initialize.ts"></script>
     <title>{title}</title>
   </head>
@@ -54,7 +57,7 @@ const context = getAppContext();
       <UsaBanner />
       <Header />
       <slot />
-      <Footer github={context.github} />  
+      <Footer github={context.github} />
     </div>
   </body>
 </html>
diff --git a/packages/design/.storybook/main.ts b/packages/design/.storybook/main.ts
index 1dbb0120..8a89b70f 100644
--- a/packages/design/.storybook/main.ts
+++ b/packages/design/.storybook/main.ts
@@ -26,5 +26,6 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
+  staticDirs: ['../static'],
 };
 export default config;
diff --git a/packages/design/sass/styles.scss b/packages/design/sass/styles.scss
index 9661c79f..b89232c1 100644
--- a/packages/design/sass/styles.scss
+++ b/packages/design/sass/styles.scss
@@ -3,7 +3,7 @@
 
 h1 {
   font-size: 2.5em;
-  
+
   span {
     display: inline-block;
     vertical-align: top;
@@ -51,11 +51,11 @@ main {
   max-width: 75rem;
 }
 
-.usa-combo-box__input, 
-.usa-input, 
-.usa-input-group, 
-.usa-range, 
-.usa-select, 
+.usa-combo-box__input,
+.usa-input,
+.usa-input-group,
+.usa-range,
+.usa-select,
 .usa-textarea {
   max-width: 40rem;
   height: 3rem;
@@ -166,7 +166,7 @@ main {
           padding: 15px;
           font-size: 20px;
           text-align: center;
-           
+
           &:hover {
             background: #f5f2ff;
             border: 1px solid #e4deff;
@@ -187,9 +187,9 @@ main {
   }
 }
 
-[contentEditable=true]:focus, 
-[href]:focus, 
-[tabindex]:focus, 
+[contentEditable=true]:focus,
+[href]:focus,
+[tabindex]:focus,
 iframe:focus {
   outline: 0.25rem solid #783cb9;
 }
@@ -218,7 +218,7 @@ iframe:focus {
       .edit-button-icon {
         padding: 0 10px;
         flex: none;
-      }     
+      }
     }
 
     &.field-selected {
diff --git a/packages/design/src/Form/index.tsx b/packages/design/src/Form/index.tsx
index decb8d7e..ff6a550a 100644
--- a/packages/design/src/Form/index.tsx
+++ b/packages/design/src/Form/index.tsx
@@ -7,8 +7,9 @@ import {
   createPrompt,
   type FormConfig,
   type FormSession,
-  type Prompt,
   type Pattern,
+  type Prompt,
+  type PromptPart,
 } from '@atj/forms';
 
 import ActionBar from './ActionBar';
@@ -16,6 +17,7 @@ import ActionBar from './ActionBar';
 export type FormUIContext = {
   config: FormConfig;
   components: ComponentForPattern;
+  uswdsRoot: `${string}/`;
 };
 
 export type ComponentForPattern<T extends Pattern = Pattern<unknown>> = Record<
@@ -26,6 +28,7 @@ export type ComponentForPattern<T extends Pattern = Pattern<unknown>> = Record<
 export type FormElementComponent<T extends Pattern = Pattern<unknown>> =
   React.ComponentType<{
     pattern: T;
+    children?: React.ReactNode;
   }>;
 
 const usePrompt = (
@@ -101,12 +104,15 @@ export default function Form({
         })}
       >
         <fieldset className="usa-fieldset">
-          {prompt.parts
-            .map((pattern, index) => {
-              const Component = context.components[pattern.type];
-              return <Component key={index} pattern={pattern} />;
-            })
-            .filter(a => a)}
+          {prompt.parts.map((part, index) => {
+            return (
+              <PromptComponent
+                key={index}
+                context={context}
+                promptPart={part}
+              />
+            );
+          })}
           {/* Add submit button or other controls as needed */}
         </fieldset>
         <ActionBar actions={prompt.actions} />
@@ -114,3 +120,22 @@ export default function Form({
     </FormProvider>
   );
 }
+
+const PromptComponent = ({
+  context,
+  promptPart,
+}: {
+  context: FormUIContext;
+  promptPart: PromptPart;
+}) => {
+  const Component = context.components[promptPart.pattern.type];
+  return (
+    <Component pattern={promptPart.pattern}>
+      {promptPart.children?.map((child, index) => {
+        return (
+          <PromptComponent key={index} context={context} promptPart={child} />
+        );
+      })}
+    </Component>
+  );
+};
diff --git a/packages/design/src/FormManager/DocumentImporter/index.tsx b/packages/design/src/FormManager/DocumentImporter/index.tsx
index ed61a5d0..3a300059 100644
--- a/packages/design/src/FormManager/DocumentImporter/index.tsx
+++ b/packages/design/src/FormManager/DocumentImporter/index.tsx
@@ -9,9 +9,8 @@ import {
   createFormSession,
 } from '@atj/forms';
 
+import Form, { FormUIContext } from '../../Form';
 import { onFileInputChangeGetFile } from '../FormList/PDFFileSelect/file-input';
-import Form from '../../Form';
-import { FormUIContext } from 'config';
 
 const DocumentImporter = ({
   baseUrl,
diff --git a/packages/design/src/FormManager/FormEdit/DraggableList.tsx b/packages/design/src/FormManager/FormEdit/DraggableList.tsx
new file mode 100644
index 00000000..0cadabd5
--- /dev/null
+++ b/packages/design/src/FormManager/FormEdit/DraggableList.tsx
@@ -0,0 +1,128 @@
+import React, { Children, useState } from 'react';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+import {
+  getFormElement,
+  type FormDefinition,
+  type FormElement,
+  FormElementId,
+} from '@atj/forms';
+
+import { SequenceElement } from '@atj/forms/src/config/elements/sequence';
+
+const SortableItem = ({
+  id,
+  children,
+}: {
+  id: string;
+  children: React.ReactNode;
+}) => {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <li ref={setNodeRef} style={style}>
+      <div className="editFieldsRowWrapper grid-row grid-gap">
+        <div
+          className="editPageGrabButtonWrapper grid-col-1 grid-col"
+          {...listeners}
+          {...attributes}
+          style={{ cursor: 'grab' }}
+        >
+          <span className="grabber1">:::</span>
+          <span className="grabber2">:::</span>
+        </div>
+        <div className="editFieldsWrapper grid-col-11 grid-col">{children}</div>
+      </div>
+    </li>
+  );
+};
+
+type DraggableListProps = React.PropsWithChildren<{
+  element: FormElement<SequenceElement>;
+  form: FormDefinition;
+  setSelectedElement: (element: FormElement) => void;
+}>;
+export const DraggableList: React.FC<DraggableListProps> = ({
+  element,
+  form,
+  setSelectedElement,
+  children,
+}) => {
+  const [elements, setElements] = useState<FormElement[]>(
+    element.data.elements.map((elementId: FormElementId) => {
+      return getFormElement(form, elementId);
+    })
+  );
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+
+  const arrayChildren = Children.toArray(children);
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragEnd={event => {
+        const { active, over } = event;
+        if (over === null) {
+          return;
+        }
+        if (active.id !== over.id) {
+          const oldIndex = elements.findIndex(element => {
+            return element.id === active.id;
+          });
+          const newIndex = elements.findIndex(element => {
+            return element.id === over.id;
+          });
+          const newOrder = arrayMove(elements, oldIndex, newIndex);
+          setElements(newOrder);
+          setSelectedElement({
+            id: element.id,
+            type: element.type,
+            data: {
+              elements: newOrder.map(element => element.id),
+            },
+            default: {
+              elements: [],
+            },
+            required: element.required,
+          } satisfies SequenceElement);
+        }
+      }}
+    >
+      <SortableContext items={elements} strategy={verticalListSortingStrategy}>
+        <ul className="editFormWrapper">
+          {arrayChildren.map((child, index) => (
+            <SortableItem key={index} id={elements[index].id}>
+              {child}
+            </SortableItem>
+          ))}
+        </ul>
+      </SortableContext>
+    </DndContext>
+  );
+};
+
+export default DraggableList;
diff --git a/packages/design/src/FormManager/FormEdit/FormElementEdit.tsx b/packages/design/src/FormManager/FormEdit/FormElementEdit.tsx
index 7115f51b..6e809d81 100644
--- a/packages/design/src/FormManager/FormEdit/FormElementEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/FormElementEdit.tsx
@@ -1,54 +1,67 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import {
-  FormDefinition,
-  FormElement,
-  FormElementMap,
+  getFormElementConfig,
   updateElement,
+  type FormElementMap,
 } from '@atj/forms';
 import { FormEditUIContext } from '../../config';
+import { usePreviewContext } from './context';
 
 export const FormElementEdit = ({
   context,
-  initialForm,
-  formElement,
-  onChange,
 }: {
   context: FormEditUIContext;
-  initialForm: FormDefinition;
-  formElement: FormElement;
-  onChange: (form: FormDefinition) => void;
 }) => {
+  const { form, selectedElement, setCurrentForm } = usePreviewContext();
+  if (!selectedElement) {
+    return;
+  }
+
   const methods = useForm<FormElementMap>({
     defaultValues: {
-      [formElement.id]: formElement,
+      [selectedElement.id]: selectedElement,
     },
   });
-  const SelectedEditComponent = context.editComponents[formElement.type];
+  useEffect(() => {
+    methods.setValue(selectedElement.id, selectedElement);
+  }, [selectedElement]);
+
+  const SelectedEditComponent = context.editComponents[selectedElement.type];
   return (
     <FormProvider {...methods}>
-      <form
-        className="editForm"
-        onSubmit={methods.handleSubmit(formData => {
-          const updatedForm = updateElement(
-            context.config,
-            initialForm,
-            formElement.id,
-            formData
-          );
-          onChange(updatedForm);
-        })}
-      >      
-        <SelectedEditComponent
-          context={context}
-          form={initialForm}
-          element={formElement}
-        />
-        <p>
-          <input className="usa-button" type="submit" value="Save" />
-        </p>    
-      </form>
+      <div className="settingsContainer">
+        <h2>Editing {selectedElement.id}...</h2>
+        <form
+          className="editForm"
+          onSubmit={methods.handleSubmit(formData => {
+            const elementConfig = getFormElementConfig(
+              context.config,
+              selectedElement.type
+            );
+            const data = formData[selectedElement.id].data;
+            const result = elementConfig.parseConfigData(data);
+            if (!result.success) {
+              return;
+            }
+            const updatedForm = updateElement(form, {
+              ...selectedElement,
+              data: result.data,
+            });
+            setCurrentForm(updatedForm);
+          })}
+        >
+          <SelectedEditComponent
+            context={context}
+            form={form}
+            element={selectedElement}
+          />
+          <p>
+            <input className="usa-button" type="submit" value="Save" />
+          </p>
+        </form>
+      </div>
     </FormProvider>
   );
 };
diff --git a/packages/design/src/FormManager/FormEdit/Preview.tsx b/packages/design/src/FormManager/FormEdit/Preview.tsx
index 1a9c923e..e0b597a0 100644
--- a/packages/design/src/FormManager/FormEdit/Preview.tsx
+++ b/packages/design/src/FormManager/FormEdit/Preview.tsx
@@ -1,12 +1,13 @@
-import React, { createContext, useContext } from 'react';
+import React from 'react';
 
 import {
   type FormDefinition,
-  type FormElementId,
   type Pattern,
   createFormSession,
+  getFormElement,
 } from '@atj/forms';
 
+import { usePreviewContext } from './context';
 import Form, {
   type ComponentForPattern,
   type FormElementComponent,
@@ -21,55 +22,92 @@ type PreviewFormProps = {
 export const PreviewForm = ({ uiContext, form }: PreviewFormProps) => {
   const previewUiContext: FormUIContext = {
     config: uiContext.config,
-    // I think we want to hoist this definition up to a higher level, so we
+    // TODO: We'll want to hoist this definition up to a higher level, so we
     // don't have to regenerate it every time we render the form.
-    components: createPreviewComponents(uiContext.components),
+    components: createPreviewComponents(
+      uiContext.components,
+      uiContext.uswdsRoot
+    ),
+    uswdsRoot: uiContext.uswdsRoot,
   };
   const disposable = createFormSession(form); // nullSession instead?
   return <Form context={previewUiContext} session={disposable}></Form>;
 };
 
 const createPreviewComponents = (
-  components: ComponentForPattern
+  components: ComponentForPattern,
+  uswdsRoot: string
 ): ComponentForPattern => {
   const previewComponents: ComponentForPattern = {};
-  // TODO: Create a configurable way to to defined preview components.
+  // TODO: Create a configurable way to to define preview components.
   for (const [patternType, Component] of Object.entries(components)) {
-    if (patternType === 'sequence') {
+    if (patternType === 'sequence' || patternType === 'fieldset') {
+      previewComponents[patternType] = Component;
+      /*
+      previewComponents[patternType] = createSequencePatternPreviewComponent(
+        Component,
+        previewComponents
+      );
+      */
+    } else if (patternType === 'form-summary') {
       previewComponents[patternType] = Component;
     } else {
-      previewComponents[patternType] = createPatternPreviewComponent(Component);
+      //previewComponents[patternType] = Component;
+      previewComponents[patternType] = createPatternPreviewComponent(
+        Component,
+        uswdsRoot
+      );
     }
   }
   return previewComponents;
 };
 
-type PreviewContextValue = {
-  selectedId?: FormElementId | null;
-  setSelectedId: (id: FormElementId | null) => void;
+/*
+const createSequencePatternPreviewComponent = (
+  Component: FormElementComponent,
+  previewComponents: ComponentForPattern
+) => {
+  const PatternPreviewSequenceComponent: FormElementComponent = ({
+    pattern,
+  }) => {
+    const { form, setSelectedElement } = usePreviewContext();
+    const element = getFormElement(form, pattern._elementId);
+    const Component = previewComponents[pattern.type];
+    return (
+      <DraggableList
+        form={form}
+        element={element}
+        setSelectedElement={setSelectedElement}
+      >
+        <Component pattern={pattern} />
+      </DraggableList>
+    );
+  };
+  return PatternPreviewSequenceComponent;
 };
+*/
 
-export const PreviewContext = createContext<PreviewContextValue>(
-  null as unknown as PreviewContextValue
-);
-
-const createPatternPreviewComponent = (Component: FormElementComponent) => {
+const createPatternPreviewComponent = (
+  Component: FormElementComponent,
+  uswdsRoot: string
+) => {
   const PatternPreviewComponent: FormElementComponent = ({
     pattern,
   }: {
     pattern: Pattern;
   }) => {
-    const { selectedId, setSelectedId } = useContext(PreviewContext);
+    const { form, selectedElement, setSelectedElement } = usePreviewContext();
 
     const handleEditClick = () => {
-      if (selectedId === pattern._elementId) {
-        setSelectedId(null);
+      if (selectedElement.id === pattern._elementId) {
+        //setSelectedElement(null);
       } else {
-        setSelectedId(pattern._elementId);
+        const element = getFormElement(form, pattern._elementId);
+        setSelectedElement(element);
       }
     };
 
-    const isSelected = selectedId === pattern._elementId;
+    const isSelected = selectedElement.id === pattern._elementId;
     const divClassNames = isSelected
       ? 'form-group-row field-selected'
       : 'form-group-row';
@@ -80,8 +118,6 @@ const createPatternPreviewComponent = (Component: FormElementComponent) => {
     // console.log("setSelectedId : ", setSelectedId );
     // console.log("Is Selected:", isSelected);
     // console.log("Class Names:", divClassNames);
-    const staticRoot =
-      '/@fs/Users/npierrelouis/Documents/Git Repos/atj-platform/packages/design/';
     return (
       <div
         onClick={handleEditClick}
@@ -107,9 +143,7 @@ const createPatternPreviewComponent = (Component: FormElementComponent) => {
             >
               <title>Edit form group</title>
               <desc>Click here to edit form group</desc>
-              <use
-                xlinkHref={`${staticRoot}static/uswds/img/sprite.svg#settings`}
-              ></use>
+              <use xlinkHref={`${uswdsRoot}img/sprite.svg#settings`}></use>
             </svg>
           </a>
         </span>
diff --git a/packages/design/src/FormManager/FormEdit/context.tsx b/packages/design/src/FormManager/FormEdit/context.tsx
new file mode 100644
index 00000000..66a64f30
--- /dev/null
+++ b/packages/design/src/FormManager/FormEdit/context.tsx
@@ -0,0 +1,52 @@
+import React, { createContext, useContext, useState } from 'react';
+
+import {
+  type FormConfig,
+  type FormDefinition,
+  type FormElement,
+  getFirstFormElement,
+} from '@atj/forms';
+
+type PreviewContextValue = {
+  form: FormDefinition;
+  setCurrentForm: (form: FormDefinition) => void;
+  selectedElement: FormElement;
+  setSelectedElement: (element: FormElement) => void;
+};
+
+export const PreviewContext = createContext<PreviewContextValue>(
+  null as unknown as PreviewContextValue
+);
+
+export const PreviewContextProvider = ({
+  config,
+  initialForm,
+  children,
+}: {
+  config: FormConfig;
+  initialForm: FormDefinition;
+  children: React.ReactNode;
+}) => {
+  const [form, setCurrentForm] = useState(initialForm);
+  const element = getFirstFormElement(config, form);
+  if (!element) {
+    throw new Error('Form has no elements');
+  }
+  const [selectedElement, setSelectedElement] = useState<FormElement>(element);
+  return (
+    <PreviewContext.Provider
+      value={{
+        form,
+        setCurrentForm,
+        selectedElement,
+        setSelectedElement,
+      }}
+    >
+      {children}
+    </PreviewContext.Provider>
+  );
+};
+
+export const usePreviewContext = () => {
+  return useContext(PreviewContext);
+};
diff --git a/packages/design/src/FormManager/FormEdit/index.tsx b/packages/design/src/FormManager/FormEdit/index.tsx
index 4aa75010..eaa9973e 100644
--- a/packages/design/src/FormManager/FormEdit/index.tsx
+++ b/packages/design/src/FormManager/FormEdit/index.tsx
@@ -1,16 +1,12 @@
-import React, { useState } from 'react';
+import React, { useEffect } from 'react';
 
 import { type FormService } from '@atj/form-service';
-import {
-  type FormDefinition,
-  getRootFormElement,
-  FormElementId,
-  getFormElement,
-} from '@atj/forms';
 
 import { type FormEditUIContext } from '../../config';
-import { PreviewContext, PreviewForm } from './Preview';
+import { PreviewContextProvider, usePreviewContext } from './context';
 import { FormElementEdit } from './FormElementEdit';
+import { PreviewForm } from './Preview';
+import { FormDefinition } from '@atj/forms';
 
 export default function FormEdit({
   context,
@@ -28,78 +24,39 @@ export default function FormEdit({
   const form = result.data;
   return (
     <div className="editFormPage">
-      <h1>Form Editor Portal</h1>
-      <p className="usa-intro">
-        Welcome to the Form Editor Portal, where you can effortlessly
-        personalize your form by modifying labels, attributes, and other
-        settings to better suit your needs.
-      </p>
-      <EditForm
-        context={context}
-        initialForm={form}
-        onSave={form => formService.saveForm(formId, form)}
-      />
+      <h1>Edit form</h1>
+      <p className="usa-intro">Your form has been imported for web delivery.</p>
+      <PreviewContextProvider config={context.config} initialForm={form}>
+        <EditForm
+          context={context}
+          saveForm={form => formService.saveForm(formId, form)}
+        />
+      </PreviewContextProvider>
     </div>
   );
 }
 
 const EditForm = ({
   context,
-  initialForm,
-  //onSave,
+  saveForm,
 }: {
   context: FormEditUIContext;
-  initialForm: FormDefinition;
-  //onSave: (form: FormDefinition) => void;
+  saveForm: (form: FormDefinition) => void;
 }) => {
-  const [currentForm, setCurrentForm] = useState(initialForm);
-  const [selectedId, setSelectedId] = useState<FormElementId | null>(null);
-  const [isSettingsVisible, setIsSettingsVisible] = useState(false);
-
-  const rootField = getRootFormElement(currentForm);
-  const formElement = getFormElement(currentForm, selectedId || rootField.id);
-
-  const handleSelect = (id: FormElementId | null) => {
-    setSelectedId(id); // Always update the selectedId
-    setIsSettingsVisible(selectedId !== id || !isSettingsVisible);
-  };
-
+  const { form, selectedElement } = usePreviewContext();
+  useEffect(() => {
+    saveForm(form);
+  }, [form]);
   return (
-    <>
-      <div className="editFormContentWrapper">
-        <div className="grid-row">
-          <div className="grid-col-8">
-            <PreviewContext.Provider
-              value={{
-                selectedId,
-                setSelectedId: handleSelect,
-              }}
-            >
-              <PreviewForm uiContext={context} form={currentForm} />
-            </PreviewContext.Provider>
-          </div>
-          {isSettingsVisible && (
-            <div
-              className={`grid-col-4 ${selectedId !== null ? 'show' : 'hide'}`}
-            >
-              <div className="settingsContainer">
-                <h2>Editing {selectedId}...</h2>
-                {formElement && (
-                  <FormElementEdit
-                    key={selectedId}
-                    context={context}
-                    initialForm={currentForm}
-                    formElement={formElement}
-                    onChange={function (form: FormDefinition): void {
-                      setCurrentForm(form);
-                    }}
-                  />
-                )}
-              </div>
-            </div>
-          )}
+    <div className="editFormContentWrapper">
+      <div className="grid-row">
+        <div className="grid-col-8">
+          <PreviewForm uiContext={context} form={form} />
+        </div>
+        <div className={`grid-col-4 ${selectedElement ? 'show' : 'hide'}`}>
+          <FormElementEdit context={context} />
         </div>
       </div>
-    </>
+    </div>
   );
 };
diff --git a/packages/design/src/FormManager/FormList/PDFFileSelect/hooks.ts b/packages/design/src/FormManager/FormList/PDFFileSelect/hooks.ts
index 63b4f84b..b3b8bcc8 100644
--- a/packages/design/src/FormManager/FormList/PDFFileSelect/hooks.ts
+++ b/packages/design/src/FormManager/FormList/PDFFileSelect/hooks.ts
@@ -2,8 +2,9 @@ import { useNavigate } from 'react-router-dom';
 
 import { type Result } from '@atj/common';
 import { addDocument } from '@atj/documents';
-import { createForm } from '@atj/forms';
+import { FormElement, createForm } from '@atj/forms';
 import { type FormService } from '@atj/form-service';
+import { FormSummary } from '@atj/forms/src/config/elements/form-summary';
 
 export const useDocumentImporter = (
   formService: FormService,
@@ -65,10 +66,25 @@ export const stepOneSelectPdfByUpload = async (
     data: Uint8Array;
   }
 ): Promise<Result<string>> => {
-  const emptyForm = createForm({
-    title: fileDetails.name,
-    description: '',
-  });
+  const emptyForm = createForm(
+    {
+      title: fileDetails.name,
+      description: '',
+    },
+    {
+      root: 'root',
+      elements: [
+        {
+          type: 'form-summary',
+          id: 'form-summary',
+          data: {
+            title: fileDetails.name,
+            description: '',
+          },
+        } as FormElement<FormSummary>,
+      ],
+    }
+  );
   const { updatedForm } = await addDocument(emptyForm, fileDetails);
   return ctx.formService.addForm(updatedForm);
 };
diff --git a/packages/design/src/FormManager/index.tsx b/packages/design/src/FormManager/index.tsx
index 4a570aa8..03d4f61d 100644
--- a/packages/design/src/FormManager/index.tsx
+++ b/packages/design/src/FormManager/index.tsx
@@ -37,7 +37,7 @@ export default function FormManager({
             }
             return (
               <FormPreviewById
-                config={context.config}
+                context={context}
                 formId={formId}
                 formService={formService}
               />
diff --git a/packages/design/src/config/edit/FormSummaryEdit.tsx b/packages/design/src/config/edit/FormSummaryEdit.tsx
new file mode 100644
index 00000000..1092e298
--- /dev/null
+++ b/packages/design/src/config/edit/FormSummaryEdit.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { type FormSummary } from '@atj/forms/src/config/elements/form-summary';
+
+import { FormElementEditComponent } from '..';
+
+const FormSummaryEdit: FormElementEditComponent<FormSummary> = ({
+  element,
+}) => {
+  const { register } = useFormContext();
+  return (
+    <div className="grid-row grid-gap">
+      <div className="grid-col grid-col-4">
+        <label className="usa-label">
+          Title
+          <input
+            className="usa-input"
+            {...register(`${element.id}.data.title`)}
+            type="text"
+          ></input>
+        </label>
+      </div>
+      <div className="grid-col grid-col-2">
+        <label className="usa-label">
+          Description
+          <textarea
+            className="usa-textarea"
+            {...register(`${element.id}.data.description`)}
+          ></textarea>
+        </label>
+      </div>
+    </div>
+  );
+};
+
+export default FormSummaryEdit;
diff --git a/packages/design/src/config/edit/InputElementEdit.tsx b/packages/design/src/config/edit/InputElementEdit.tsx
index ea140a8e..a1d51612 100644
--- a/packages/design/src/config/edit/InputElementEdit.tsx
+++ b/packages/design/src/config/edit/InputElementEdit.tsx
@@ -12,14 +12,14 @@ const InputElementEdit: FormElementEditComponent<InputElement> = ({
   return (
     <div className="grid-row grid-gap formRowEditFields">
       <div className="grid-col grid-col-4">
-        <label className="usa-label" htmlFor={`${element.id}.data.text`}>
-          Field label
+        <label className="usa-label" htmlFor={`${element.id}.data.label`}>
+          Field label or instructions
         </label>
         <input
           className="usa-input"
-          id={`${element.id}.data.text`}
+          id={`${element.id}.data.label`}
           defaultValue={`${element.id}`}
-          {...register(`${element.id}.data.text`)}
+          {...register(`${element.id}.data.label`)}
           type="text"
         ></input>
       </div>
diff --git a/packages/design/src/config/edit/SubmissionConfirmationEdit.tsx b/packages/design/src/config/edit/SubmissionConfirmationEdit.tsx
new file mode 100644
index 00000000..db5ec764
--- /dev/null
+++ b/packages/design/src/config/edit/SubmissionConfirmationEdit.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { type InputElement } from '@atj/forms/src/config/elements/input';
+
+import { FormElementEditComponent } from '..';
+
+const InputElementEdit: FormElementEditComponent<InputElement> = ({
+  element,
+}) => {
+  const { register } = useFormContext();
+  return (
+    <div className="grid-row grid-gap">
+      <div className="grid-col grid-col-4">
+        <label className="usa-label">
+          Field label
+          <input
+            className="usa-input"
+            {...register(`${element.id}.data.text`)}
+            type="text"
+          ></input>
+        </label>
+      </div>
+      <div className="grid-col grid-col-2">
+        <label className="usa-label">
+          Default field value
+          <input
+            className="usa-input"
+            type="text"
+            {...register(`${element.id}.data.initial`)}
+          ></input>
+        </label>
+      </div>
+      <div className="grid-col grid-col-2">
+        <label className="usa-label">
+          Maximum length
+          <input
+            className="usa-input"
+            type="text"
+            {...register(`${element.id}.data.maxLength`)}
+          ></input>
+        </label>
+      </div>
+      <div className="grid-col grid-col-2">
+        <label className="usa-label">
+          Field type
+          <select className="usa-select" {...register(`${element.id}.type`)}>
+            <option value={'input'}>Input</option>
+          </select>
+        </label>
+      </div>
+      <div className="grid-col grid-col-2">
+        <div className="usa-checkbox">
+          <input
+            className="usa-checkbox__input"
+            type="checkbox"
+            id={`${element.id}.required`}
+            {...register(`${element.id}.data.required`)}
+          />
+          <label
+            className="usa-checkbox__label"
+            htmlFor={`${element.id}.data.required`}
+          >
+            Required
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InputElementEdit;
diff --git a/packages/design/src/config/edit/index.ts b/packages/design/src/config/edit/index.ts
index 4dba3e26..3ea6c4b1 100644
--- a/packages/design/src/config/edit/index.ts
+++ b/packages/design/src/config/edit/index.ts
@@ -6,14 +6,17 @@ import {
   type FormElement,
 } from '@atj/forms';
 
+import { ComponentForPattern } from '../../Form';
+
 import InputElementEdit from './InputElementEdit';
 import SequenceElementEdit from './SequenceElementEdit';
-import { ComponentForPattern } from '../../Form';
+import SubmissionConfirmationEdit from './SubmissionConfirmationEdit';
 
 export type FormEditUIContext = {
   config: FormConfig;
   components: ComponentForPattern;
   editComponents: EditComponentForFormElement;
+  uswdsRoot: `${string}/`;
 };
 
 export type FormElementEditComponent<T extends FormElement> =
@@ -27,6 +30,7 @@ export type EditComponentForFormElement<T extends FormElement = FormElement> =
   Record<string, FormElementEditComponent<T>>;
 
 export const defaultFormElementEditComponents: EditComponentForFormElement = {
-  sequence: SequenceElementEdit,
   input: InputElementEdit,
+  sequence: SequenceElementEdit,
+  'submission-confirmation': SubmissionConfirmationEdit,
 };
diff --git a/packages/design/src/config/view/Fieldset/index.tsx b/packages/design/src/config/view/Fieldset/index.tsx
index 6b014ef5..cc59bfa5 100644
--- a/packages/design/src/config/view/Fieldset/index.tsx
+++ b/packages/design/src/config/view/Fieldset/index.tsx
@@ -1,17 +1,18 @@
 import React from 'react';
 
-import { type Pattern } from '@atj/forms';
-import { type ParagraphElement } from '@atj/forms/src/config/elements/paragraph';
+import { type FieldsetPattern, type Pattern } from '@atj/forms';
 
 import { type FormElementComponent } from '../../../Form';
 
-const FormSummary: FormElementComponent<Pattern<ParagraphElement>> = ({
+const FormSummary: FormElementComponent<Pattern<FieldsetPattern>> = ({
   pattern,
+  children,
 }) => {
   return (
-    <>
-      <p>{pattern.data.text}</p>
-    </>
+    <fieldset className="usa-fieldset">
+      <legend className="usa-legend">{pattern.legend}</legend>
+      {children}
+    </fieldset>
   );
 };
 export default FormSummary;
diff --git a/packages/design/src/config/view/Sequence/index.tsx b/packages/design/src/config/view/Sequence/index.tsx
new file mode 100644
index 00000000..92e92d75
--- /dev/null
+++ b/packages/design/src/config/view/Sequence/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { type Pattern } from '@atj/forms';
+import { SequenceElement } from '@atj/forms/src/config/elements/sequence';
+
+import { FormElementComponent } from '../../../Form';
+
+const Sequence: FormElementComponent<Pattern<SequenceElement>> = ({
+  children,
+}) => {
+  return <>{children}</>;
+};
+
+export default Sequence;
diff --git a/packages/design/src/config/view/TextInput/TestInput.stories.tsx b/packages/design/src/config/view/TextInput/TestInput.stories.tsx
index a4c2dbf4..dd1b139b 100644
--- a/packages/design/src/config/view/TextInput/TestInput.stories.tsx
+++ b/packages/design/src/config/view/TextInput/TestInput.stories.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { type Pattern, type TextInputPattern } from '@atj/forms';
 import TextInput from '.';
-import { Pattern, TextInputPattern } from '@atj/forms';
 
 export default {
   title: 'patterns/TextInput',
diff --git a/packages/design/src/config/view/index.tsx b/packages/design/src/config/view/index.tsx
index 385b4a7d..1e704d5e 100644
--- a/packages/design/src/config/view/index.tsx
+++ b/packages/design/src/config/view/index.tsx
@@ -1,14 +1,16 @@
+import Fieldset from './Fieldset';
 import FormSummary from './FormSummary';
 import Paragraph from './Paragraph';
+import Sequence from './Sequence';
 import SubmissionConfirmation from './SubmissionConfirmation';
 import TextInput from './TextInput';
-
 import { type ComponentForPattern } from '../../Form';
 
 export const defaultFormElementComponents: ComponentForPattern = {
+  fieldset: Fieldset,
   'form-summary': FormSummary,
   input: TextInput,
   paragraph: Paragraph,
-  sequence: SubmissionConfirmation,
+  sequence: Sequence,
   'submission-confirmation': SubmissionConfirmation,
 };
diff --git a/packages/design/src/test-form.ts b/packages/design/src/test-form.ts
index 3b2553a2..fe987f7b 100644
--- a/packages/design/src/test-form.ts
+++ b/packages/design/src/test-form.ts
@@ -1,9 +1,11 @@
 import { createForm, createFormSession, defaultFormConfig } from '@atj/forms';
 
 import {
+  FormEditUIContext,
   defaultFormElementComponents,
   defaultFormElementEditComponents,
 } from './config';
+import { FormUIContext } from 'Form';
 
 export const createTestForm = () => {
   return createForm(
@@ -60,18 +62,20 @@ export const createTestFormElementComponentMap = () => {
   return defaultFormElementComponents;
 };
 
-export const createTestFormContext = () => {
+export const createTestFormContext = (): FormUIContext => {
   return {
     config: defaultFormConfig,
     components: defaultFormElementComponents,
+    uswdsRoot: '/uswds/',
   };
 };
 
-export const createTestFormEditContext = () => {
+export const createTestFormEditContext = (): FormEditUIContext => {
   return {
     config: defaultFormConfig,
     components: defaultFormElementComponents,
     editComponents: defaultFormElementEditComponents,
+    uswdsRoot: `/static/uswds/`,
   };
 };
 
diff --git a/packages/documents/src/document.ts b/packages/documents/src/document.ts
index 8776b1f6..ff5a957c 100644
--- a/packages/documents/src/document.ts
+++ b/packages/documents/src/document.ts
@@ -4,9 +4,11 @@ import {
   FormElement,
   addFormOutput,
   addFormElements,
+  addFormElementMap,
 } from '@atj/forms';
 import { PDFDocument, getDocumentFieldData } from './pdf';
 import { getSuggestedFormElementsFromCache } from './suggestions';
+import { InputElement } from '@atj/forms/src/config/elements/input';
 
 export type DocumentTemplate = PDFDocument;
 
@@ -21,25 +23,19 @@ export const addDocument = async (
   const cachedPdf = await getSuggestedFormElementsFromCache(fileDetails.data);
 
   if (cachedPdf) {
-    const updatedForm = addFormElements(
+    const withElements = addFormElementMap(
       form,
-      [
-        ...cachedPdf.elements,
-        {
-          id: 'root',
-          type: 'sequence',
-          data: {
-            elements: cachedPdf.elements.map(element => element.id),
-          },
-          default: {
-            elements: [],
-          },
-          required: true,
-        },
-      ],
-      'root'
+      cachedPdf.elements,
+      cachedPdf.root
     );
-    // TODO: add form outputs
+    const updatedForm = addFormOutput(withElements, {
+      data: fileDetails.data,
+      path: fileDetails.name,
+      fields: cachedPdf.outputs,
+      formFields: Object.fromEntries(
+        Object.keys(fields).map(field => [field, field])
+      ),
+    });
     return {
       newFields: fields,
       updatedForm,
@@ -74,58 +70,76 @@ export const addDocumentFieldsToForm = (
         type: 'input',
         id: field.name,
         data: {
-          text: field.label,
+          label: field.label,
+        },
+        default: {
+          label: '',
+          initial: '',
+          required: false,
           maxLength: 128,
         },
-        default: field.value,
         required: field.required,
-      });
+      } satisfies InputElement);
     } else if (field.type === 'OptionList') {
       elements.push({
         type: 'input',
         id: field.name,
         data: {
-          text: field.label,
+          label: field.label,
+        },
+        default: {
+          label: '',
+          initial: '',
+          required: false,
           maxLength: 128,
         },
-        default: field.value,
         required: field.required,
-      });
+      } satisfies InputElement);
     } else if (field.type === 'Dropdown') {
       elements.push({
         type: 'input',
         id: field.name,
         data: {
-          text: field.label,
+          label: field.label,
+        },
+        default: {
+          label: '',
+          initial: '',
+          required: false,
           maxLength: 128,
         },
-        default: field.value,
         required: field.required,
-      });
+      } satisfies InputElement);
     } else if (field.type === 'TextField') {
       elements.push({
         type: 'input',
         id: field.name,
         data: {
-          text: field.label,
-          instructions: field.instructions,
+          label: field.label,
+        },
+        default: {
+          label: '',
+          initial: '',
+          required: false,
           maxLength: 128,
         },
-        default: field.value,
         required: field.required,
-      });
+      } satisfies InputElement);
     } else if (field.type === 'RadioGroup') {
       elements.push({
         type: 'input',
         id: field.name,
         data: {
-          text: field.label,
-          instructions: field.instructions,
+          label: field.label,
+        },
+        default: {
+          label: '',
+          initial: '',
+          required: false,
           maxLength: 128,
         },
-        default: field.value,
         required: field.required,
-      });
+      } satisfies InputElement);
     } else if (field.type === 'Paragraph') {
       elements.push({
         type: 'paragraph',
diff --git a/packages/documents/src/pdf/mock-api.ts b/packages/documents/src/pdf/mock-api.ts
index 146960ac..319b8391 100644
--- a/packages/documents/src/pdf/mock-api.ts
+++ b/packages/documents/src/pdf/mock-api.ts
@@ -1,9 +1,15 @@
 import * as z from 'zod';
 
-import { type FormElement } from '@atj/forms';
+import {
+  type DocumentFieldMap,
+  type FormElement,
+  type FormElementId,
+  type FormElementMap,
+} from '@atj/forms';
 import { type InputElement } from '@atj/forms/src/config/elements/input';
 
 import json from './al_name_change.json' assert { type: 'json' };
+import { FieldsetElement } from '@atj/forms/src/config/elements/fieldset';
 
 const TxInput = z.object({
   input_type: z.literal('Tx'),
@@ -81,15 +87,78 @@ const ExtractedObject = z.object({
   raw_fields: z.discriminatedUnion('type', [RawTxField, RawBtnField]).array(),
 });
 
-type ExtractedJsonType = z.infer<typeof ExtractedObject>;
+type ExtractedObject = z.infer<typeof ExtractedObject>;
 
-export type ParsedPdf = { elements: FormElement[] };
+export type ParsedPdf = {
+  elements: FormElementMap;
+  outputs: DocumentFieldMap; // to populate FormOutput
+  root: FormElementId;
+};
 
 export const parseAlabamaNameChangeForm = (): ParsedPdf => {
-  const parsedPDF: ExtractedJsonType = ExtractedObject.parse(json);
-  return {
-    elements: parsedPDF.elements.flatMap(getElementInputs),
+  const extracted: ExtractedObject = ExtractedObject.parse(json);
+  const parsedPdf: ParsedPdf = {
+    elements: {},
+    outputs: {},
+    root: 'root',
   };
+  const rootSequence: FormElementId[] = [];
+  for (const element of extracted.elements) {
+    const fieldsetElements: FormElementId[] = [];
+    for (const input of element.inputs) {
+      if (input.input_type === 'Tx') {
+        const id = PdfFieldMap[input.input_params.output_id];
+        console.log(input.input_params.output_id.toLowerCase(), id);
+        fieldsetElements.push(id);
+        parsedPdf.elements[id] = {
+          type: 'input',
+          id,
+          default: {} as unknown as any,
+          data: {
+            label: input.input_params.instructions,
+          },
+          required: false,
+        } satisfies FormElement<InputElement>;
+        parsedPdf.outputs[id] = {
+          type: 'TextField',
+          name: input.input_params.text,
+          label: input.input_params.instructions,
+          value: '',
+          maxLength: 1024,
+          required: input.input_params.required,
+        };
+      }
+    }
+    if (fieldsetElements.length === 1) {
+      rootSequence.push(fieldsetElements[0]);
+    } else if (fieldsetElements.length > 1) {
+      parsedPdf.elements[element.id] = {
+        id: element.id,
+        type: 'fieldset',
+        data: {
+          legend: element.element_params.text,
+          elements: fieldsetElements,
+        },
+        default: {
+          elements: [],
+        },
+        required: true,
+      } as FieldsetElement;
+      rootSequence.push(element.id);
+    }
+  }
+  parsedPdf.elements['root'] = {
+    id: 'root',
+    type: 'sequence',
+    data: {
+      elements: rootSequence,
+    },
+    default: {
+      elements: [],
+    },
+    required: true,
+  };
+  return parsedPdf;
 };
 
 const getElementInputs = (element: ExtractedElement): FormElement[] => {
@@ -99,19 +168,48 @@ const getElementInputs = (element: ExtractedElement): FormElement[] => {
         return {
           type: 'input',
           id: input.input_params.output_id,
-          default: {},
+          default: {} as unknown as any,
           data: {
-            text: input.input_params.text,
-            instructions: input.input_params.instructions,
+            label: input.input_params.instructions,
           },
           required: true,
-        } satisfies FormElement<InputElement>;
+        } satisfies InputElement;
       }
       return null as unknown as FormElement;
     })
     .filter((item): item is NonNullable<FormElement> => item !== null);
 };
 
+const PdfFieldMap: Record<string, string> = {
+  County_Name1: 'users1_address_county',
+  Current_First_Name1: 'users1_name_first',
+  Current_Middle_Name1: 'users1_name_middle',
+  Current_Last_Name1: 'users1_name_last',
+  Current_First_Name2: 'users1_name_first__2',
+  Current_Middle_Name2: 'users1_name_middle__2',
+  Current_Last_Name2: 'users1_name_last__2',
+  Street_Address: 'users1_address_line_one',
+  City: 'users1_address_city',
+  State: 'users1_address_state',
+  Zip: 'users1_address_zip',
+  Home_Phone: 'users1_phone',
+  Work_Phone: 'work_phone',
+  DOB: 'users1_birthdate',
+  Birth_First_Name: 'user1_preferred_name_first',
+  Birth_Middle_Name: 'user1_preferred_name_middle',
+  Birth_Last_Name: 'user1_preferred_name_last',
+  County_Name2: 'user1_address_county__2',
+  PhotoID: 'photo_id',
+  'DL#': 'driver_license_number',
+  'ID#': 'non_driver_id_number',
+  Why_change_name1: 'reasons_for_change', // pdf-lib combines the three input lines into a single input
+  Why_change_name2: 'reasons_for_change',
+  Why_change_name3: 'reasons_for_change',
+  New_First_Name: 'users1_previous_names1_first',
+  New_Middle_Name: 'users1_previous_names1_middle',
+  New_Last_Name: 'users1_previous_names1_last',
+};
+
 /*
 function parseJson(obj: ExtractedJsonType): Array<any> {
   return parseElements(obj.elements);
diff --git a/packages/form-service/src/operations/submit-form.test.ts b/packages/form-service/src/operations/submit-form.test.ts
index 86a408a4..c27d8038 100644
--- a/packages/form-service/src/operations/submit-form.test.ts
+++ b/packages/form-service/src/operations/submit-form.test.ts
@@ -4,7 +4,7 @@ import { createForm, createFormSession } from '@atj/forms';
 import { createTestFormService } from '../context/test';
 
 describe('submitForm', () => {
-  it('fails with empty form', async () => {
+  it('succeeds with empty form', async () => {
     const service = createTestFormService({
       'test-form': createForm({ title: 'test', description: 'description' }),
     });
@@ -15,8 +15,8 @@ describe('submitForm', () => {
     const session = createFormSession(formResult.data);
     const result = await service.submitForm(session, 'test-form', {});
     expect(result).toEqual({
-      success: false,
-      error: 'invalid action',
+      success: true,
+      data: [],
     });
   });
 });
diff --git a/packages/forms/src/config/config.ts b/packages/forms/src/config/config.ts
index 04b0a491..f3d19ed8 100644
--- a/packages/forms/src/config/config.ts
+++ b/packages/forms/src/config/config.ts
@@ -1,4 +1,5 @@
 import { type FormConfig } from '.';
+import { fieldsetConfig } from './elements/fieldset';
 import { inputConfig } from './elements/input';
 import { paragraphConfig } from './elements/paragraph';
 import { sequenceConfig } from './elements/sequence';
@@ -8,6 +9,7 @@ import { sequenceConfig } from './elements/sequence';
 // understand the usage scenarios better.
 export const defaultFormConfig: FormConfig = {
   elements: {
+    fieldset: fieldsetConfig,
     input: inputConfig,
     paragraph: paragraphConfig,
     sequence: sequenceConfig,
diff --git a/packages/forms/src/config/elements/fieldset.ts b/packages/forms/src/config/elements/fieldset.ts
index e95139b4..6fa993ab 100644
--- a/packages/forms/src/config/elements/fieldset.ts
+++ b/packages/forms/src/config/elements/fieldset.ts
@@ -2,16 +2,23 @@ import * as z from 'zod';
 
 import { type FormElementConfig } from '..';
 import { type FormElement, type FormElementId } from '../../element';
-import { type Pattern, createPromptForElement } from '../../pattern';
+import {
+  type FieldsetPattern,
+  type Pattern,
+  createPromptForElement,
+} from '../../pattern';
 import { safeZodParse } from '../../util/zod';
+import { getFormElement } from '../..';
 
 export type FieldsetElement = FormElement<{
-  legend: string;
-  elements: FormElementId;
+  legend?: string;
+  elements: FormElementId[];
 }>;
 
-const fieldsetSchema = z.object({
-  legend: z.string(),
+const FieldsetSchema = z.array(z.string());
+
+const configSchema = z.object({
+  legend: z.string().optional(),
   elements: z.array(z.string()),
 });
 
@@ -21,17 +28,27 @@ export const fieldsetConfig: FormElementConfig<FieldsetElement> = {
     elements: [],
   },
   parseData: (_, obj) => {
-    return safeZodParse(fieldsetSchema, obj);
+    return safeZodParse(FieldsetSchema, obj);
   },
+  parseConfigData: obj => safeZodParse(configSchema, obj),
   getChildren(element, elements) {
     return element.data.elements.map(
       (elementId: string) => elements[elementId]
     );
   },
-  createPrompt(config, session, element, options): Pattern[] {
-    return element.data.elements.map((elementId: string) => {
-      const element = session.form.elements[elementId];
+  createPrompt(config, session, element, options) {
+    const children = element.data.elements.map((elementId: string) => {
+      const element = getFormElement(session.form, elementId);
       return createPromptForElement(config, session, element, options);
     });
+    return {
+      pattern: {
+        _children: children,
+        _elementId: element.id,
+        type: 'fieldset',
+        legend: element.data.legend,
+      } satisfies Pattern<FieldsetPattern>,
+      children,
+    };
   },
 };
diff --git a/packages/forms/src/config/elements/form-summary.ts b/packages/forms/src/config/elements/form-summary.ts
new file mode 100644
index 00000000..4056510a
--- /dev/null
+++ b/packages/forms/src/config/elements/form-summary.ts
@@ -0,0 +1,38 @@
+import * as z from 'zod';
+
+import { type FormElementConfig } from '..';
+import { type FormElement } from '../../element';
+import { FormSummaryPattern, type Pattern } from '../../pattern';
+import { safeZodParse } from '../../util/zod';
+
+const configSchema = z.object({
+  title: z.string().max(128),
+  summary: z.string().max(2024),
+});
+export type FormSummary = FormElement<z.infer<typeof configSchema>>;
+
+export const formSummaryConfig: FormElementConfig<FormSummary> = {
+  acceptsInput: false,
+  initial: {
+    text: '',
+    initial: '',
+    required: true,
+    maxLength: 128,
+  },
+  parseData: obj => safeZodParse(configSchema, obj), // make this optional?
+  parseConfigData: obj => safeZodParse(configSchema, obj),
+  getChildren() {
+    return [];
+  },
+  createPrompt(_, session, element, options) {
+    return {
+      pattern: {
+        _elementId: element.id,
+        type: 'form-summary',
+        title: element.data.title,
+        description: element.data.description,
+      } as FormSummaryPattern,
+      children: [],
+    };
+  },
+};
diff --git a/packages/forms/src/config/elements/input.ts b/packages/forms/src/config/elements/input.ts
index cc77ed57..afe2c8a8 100644
--- a/packages/forms/src/config/elements/input.ts
+++ b/packages/forms/src/config/elements/input.ts
@@ -6,12 +6,13 @@ import { type Pattern, type TextInputPattern } from '../../pattern';
 import { getFormSessionValue } from '../../session';
 import { safeZodParse } from '../../util/zod';
 
-export type InputElement = FormElement<{
-  text: string;
-  initial: string;
-  required: boolean;
-  maxLength: number;
-}>;
+const configSchema = z.object({
+  label: z.string(),
+  initial: z.string(),
+  required: z.boolean(),
+  maxLength: z.coerce.number(),
+});
+export type InputElement = FormElement<z.infer<typeof configSchema>>;
 
 const createSchema = (data: InputElement['data']) =>
   z.string().max(data.maxLength);
@@ -19,17 +20,17 @@ const createSchema = (data: InputElement['data']) =>
 export const inputConfig: FormElementConfig<InputElement> = {
   acceptsInput: true,
   initial: {
-    text: '',
+    label: '',
     initial: '',
-    instructions: '',
     required: true,
     maxLength: 128,
   },
   parseData: (elementData, obj) => safeZodParse(createSchema(elementData), obj),
+  parseConfigData: obj => safeZodParse(configSchema, obj),
   getChildren() {
     return [];
   },
-  createPrompt(_, session, element, options): Pattern[] {
+  createPrompt(_, session, element, options) {
     const extraAttributes: Record<string, any> = {};
     const sessionValue = getFormSessionValue(session, element.id);
     if (options.validate) {
@@ -38,17 +39,17 @@ export const inputConfig: FormElementConfig<InputElement> = {
         extraAttributes['error'] = isValidResult.error;
       }
     }
-    return [
-      {
+    return {
+      pattern: {
         _elementId: element.id,
         type: 'input',
         inputId: element.id,
         value: sessionValue,
-        label: element.data.text,
-        instructions: element.data.instructions,
+        label: element.data.label,
         required: element.data.required,
         ...extraAttributes,
       } as Pattern<TextInputPattern>,
-    ];
+      children: [],
+    };
   },
 };
diff --git a/packages/forms/src/config/elements/paragraph.ts b/packages/forms/src/config/elements/paragraph.ts
index 04eba245..8a9a8ad6 100644
--- a/packages/forms/src/config/elements/paragraph.ts
+++ b/packages/forms/src/config/elements/paragraph.ts
@@ -23,13 +23,14 @@ export const paragraphConfig: FormElementConfig<ParagraphElement> = {
   getChildren() {
     return [];
   },
-  createPrompt(_, session, element, options): Pattern[] {
-    return [
-      {
+  createPrompt(_, session, element, options) {
+    return {
+      pattern: {
         _elementId: element.id,
         type: 'paragraph' as const,
         text: element.data.text,
       } as Pattern<ParagraphPattern>,
-    ];
+      children: [],
+    };
   },
 };
diff --git a/packages/forms/src/config/elements/sequence.ts b/packages/forms/src/config/elements/sequence.ts
index 0fc17e7d..089a9517 100644
--- a/packages/forms/src/config/elements/sequence.ts
+++ b/packages/forms/src/config/elements/sequence.ts
@@ -2,8 +2,9 @@ import * as z from 'zod';
 
 import { type FormElementConfig } from '..';
 import { type FormElement, type FormElementId } from '../../element';
-import { type Pattern, createPromptForElement } from '../../pattern';
+import { createPromptForElement } from '../../pattern';
 import { safeZodParse } from '../../util/zod';
+import { getFormElement, getFormElementMap } from '../..';
 
 export type SequenceElement = FormElement<{
   elements: FormElementId[];
@@ -11,6 +12,10 @@ export type SequenceElement = FormElement<{
 
 const sequenceSchema = z.array(z.string());
 
+const configSchema = z.object({
+  elements: z.array(z.string()),
+});
+
 export const sequenceConfig: FormElementConfig<SequenceElement> = {
   acceptsInput: false,
   initial: {
@@ -19,15 +24,24 @@ export const sequenceConfig: FormElementConfig<SequenceElement> = {
   parseData: (_, obj) => {
     return safeZodParse(sequenceSchema, obj);
   },
+  parseConfigData: obj => safeZodParse(configSchema, obj),
   getChildren(element, elements) {
     return element.data.elements.map(
       (elementId: string) => elements[elementId]
     );
   },
-  createPrompt(config, session, element, options): Pattern[] {
-    return element.data.elements.flatMap((elementId: string) => {
-      const element = session.form.elements[elementId];
+  createPrompt(config, session, element, options) {
+    const children = element.data.elements.map((elementId: string) => {
+      const element = getFormElement(session.form, elementId);
       return createPromptForElement(config, session, element, options);
     });
+    return {
+      pattern: {
+        _children: children,
+        _elementId: element.id,
+        type: 'sequence',
+      },
+      children,
+    };
   },
 };
diff --git a/packages/forms/src/config/index.ts b/packages/forms/src/config/index.ts
index e710daa3..fbb57c45 100644
--- a/packages/forms/src/config/index.ts
+++ b/packages/forms/src/config/index.ts
@@ -2,6 +2,7 @@ import {
   type FormElement,
   type FormElementId,
   type ParseFormElementData,
+  type ParseFormElementConfigData,
 } from '../element';
 import { type CreatePrompt } from '../pattern';
 
@@ -11,6 +12,7 @@ export type FormElementConfig<ThisFormElement extends FormElement> = {
   acceptsInput: boolean;
   initial: ThisFormElement['data'];
   parseData: ParseFormElementData<ThisFormElement>;
+  parseConfigData: ParseFormElementConfigData<ThisFormElement>;
   getChildren: (
     element: ThisFormElement,
     elements: Record<FormElementId, FormElement>
diff --git a/packages/forms/src/documents/index.ts b/packages/forms/src/documents/index.ts
index f035d44e..658aa192 100644
--- a/packages/forms/src/documents/index.ts
+++ b/packages/forms/src/documents/index.ts
@@ -4,7 +4,6 @@ export type DocumentFieldValue =
       name: string;
       label: string;
       value: string;
-      instructions?: string;
       maxLength?: number;
       required: boolean;
     }
@@ -13,7 +12,6 @@ export type DocumentFieldValue =
       name: string;
       label: string;
       value: boolean;
-      instructions?: string;
       required: boolean;
     }
   | {
@@ -21,7 +19,6 @@ export type DocumentFieldValue =
       name: string;
       label: string;
       value: string[];
-      instructions?: string;
       required: boolean;
     }
   | {
@@ -29,7 +26,6 @@ export type DocumentFieldValue =
       name: string;
       label: string;
       value: string[];
-      instructions?: string;
       required: boolean;
     }
   | {
@@ -38,7 +34,6 @@ export type DocumentFieldValue =
       options: string[];
       label: string;
       value: string;
-      instructions?: string;
       required: boolean;
     }
   | {
diff --git a/packages/forms/src/element.ts b/packages/forms/src/element.ts
index 1d706ee9..8a5d16bd 100644
--- a/packages/forms/src/element.ts
+++ b/packages/forms/src/element.ts
@@ -14,7 +14,8 @@ export type FormElement<T = any, C = any> = {
 };
 
 export type FormElementId = string;
-export type FormElementValue = any;
+export type FormElementValue<T extends FormElement = FormElement> =
+  T['default'];
 export type FormElementValueMap = Record<FormElementId, FormElementValue>;
 export type FormElementMap = Record<FormElementId, FormElement>;
 export type GetFormElement = (
@@ -27,6 +28,10 @@ export type ParseFormElementData<T extends FormElement = FormElement> = (
   obj: string
 ) => Result<T['data']>;
 
+export type ParseFormElementConfigData<T extends FormElement = FormElement> = (
+  elementData: T['data']
+) => Result<T['data']>;
+
 export const getFormElement: GetFormElement = (form, elementId) => {
   return form.elements[elementId];
 };
@@ -82,3 +87,19 @@ export const validateElement = (
     data: parseResult.data,
   };
 };
+
+export const getFirstFormElement = (
+  config: FormConfig,
+  form: FormDefinition,
+  element?: FormElement
+): FormElement => {
+  if (!element) {
+    element = form.elements[form.root];
+  }
+  const elemConfig = getFormElementConfig(config, element.type);
+  const children = elemConfig.getChildren(element, form.elements);
+  if (children?.length === 0) {
+    return element;
+  }
+  return getFirstFormElement(config, form, children[0]);
+};
diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts
index 90ec8e6a..27a5aa91 100644
--- a/packages/forms/src/index.ts
+++ b/packages/forms/src/index.ts
@@ -115,10 +115,10 @@ export const updateForm = (
   return nextForm;
 };
 
-const addValue = (
+const addValue = <T extends FormElement = FormElement>(
   form: FormSession,
   id: FormElementId,
-  value: FormElementValue
+  value: FormElementValue<T>
 ): FormSession => ({
   ...form,
   data: {
@@ -145,19 +145,27 @@ const addError = (
   },
 });
 
-export const addFormElements = (
+export const addFormElementMap = (
   form: FormDefinition,
-  elements: FormElement[],
+  elements: FormElementMap,
   root?: FormElementId
 ) => {
-  const formElementMap = getFormElementMap(elements);
   return {
     ...form,
-    elements: { ...form.elements, ...formElementMap },
+    elements: { ...form.elements, ...elements },
     root: root !== undefined ? root : form.root,
   };
 };
 
+export const addFormElements = (
+  form: FormDefinition,
+  elements: FormElement[],
+  root?: FormElementId
+) => {
+  const formElementMap = getFormElementMap(elements);
+  return addFormElementMap(form, formElementMap, root);
+};
+
 export const replaceFormElements = (
   form: FormDefinition,
   elements: FormElement[]
@@ -194,21 +202,14 @@ export const updateElements = (
 };
 
 export const updateElement = (
-  config: FormConfig,
   form: FormDefinition,
-  elementId: FormElementId,
-  data: FormElementMap
+  formElement: FormElement
 ): FormDefinition => {
-  if (form.elements[elementId] === undefined) {
-    console.error(`Element "${elementId}" does not exist on form.`);
-    return form;
-  }
-  const formElement = data[elementId];
   return {
     ...form,
     elements: {
       ...form.elements,
-      [elementId]: formElement,
+      [formElement.id]: formElement,
     },
   };
 };
diff --git a/packages/forms/src/pattern.ts b/packages/forms/src/pattern.ts
index 44c0679b..695fc386 100644
--- a/packages/forms/src/pattern.ts
+++ b/packages/forms/src/pattern.ts
@@ -13,7 +13,6 @@ export type TextInputPattern = {
   value: string;
   label: string;
   required: boolean;
-  instructions?: string;
   error?: string;
 };
 
@@ -40,8 +39,14 @@ export type ParagraphPattern = {
   text: string;
 };
 
+export type FieldsetPattern = {
+  type: 'fieldset';
+  legend: string;
+};
+
 export type Pattern<T = {}> = {
   _elementId: FormElementId;
+  _children: PromptPart[];
   type: string;
 } & T;
 
@@ -51,9 +56,14 @@ export type SubmitAction = {
 };
 export type PromptAction = SubmitAction;
 
+export type PromptPart = {
+  pattern: Pattern;
+  children: PromptPart[];
+};
+
 export type Prompt = {
   actions: PromptAction[];
-  parts: Pattern[];
+  parts: PromptPart[];
 };
 
 export const createPrompt = (
@@ -61,35 +71,41 @@ export const createPrompt = (
   session: FormSession,
   options: { validate: boolean }
 ): Prompt => {
-  if (sessionIsComplete(config, session)) {
+  if (options.validate && sessionIsComplete(config, session)) {
     return {
       actions: [],
       parts: [
         {
-          _elementId: 'submission-confirmation',
-          type: 'submission-confirmation',
-          table: Object.entries(session.data.values).map(
-            ([elementId, value]) => {
-              return {
-                label: session.form.elements[elementId].id,
-                value: value,
-              };
-            }
-          ),
-        } as Pattern<SubmissionConfirmationPattern>,
+          pattern: {
+            _elementId: 'submission-confirmation',
+            type: 'submission-confirmation',
+            table: Object.entries(session.data.values).map(
+              ([elementId, value]) => {
+                return {
+                  label: session.form.elements[elementId].id,
+                  value: value,
+                };
+              }
+            ),
+          } as Pattern<SubmissionConfirmationPattern>,
+          children: [],
+        },
       ],
     };
   }
-  const parts: Pattern[] = [
+  const parts: PromptPart[] = [
     {
-      _elementId: 'form-summary',
-      type: 'form-summary',
-      title: session.form.summary.title,
-      description: session.form.summary.description,
-    } as Pattern<FormSummaryPattern>,
+      pattern: {
+        _elementId: 'form-summary',
+        type: 'form-summary',
+        title: session.form.summary.title,
+        description: session.form.summary.description,
+      } as Pattern<FormSummaryPattern>,
+      children: [],
+    },
   ];
   const root = getRootFormElement(session.form);
-  parts.push(...createPromptForElement(config, session, root, options));
+  parts.push(createPromptForElement(config, session, root, options));
   return {
     actions: [
       {
@@ -106,7 +122,7 @@ export type CreatePrompt<T> = (
   session: FormSession,
   element: T,
   options: { validate: boolean }
-) => Pattern[];
+) => PromptPart;
 
 export const createPromptForElement: CreatePrompt<FormElement> = (
   config,
@@ -131,9 +147,11 @@ export const createNullPrompt = ({
 }): Prompt => {
   const formElementConfig = getFormElementConfig(config, element.type);
   return {
-    parts: formElementConfig.createPrompt(config, nullSession, element, {
-      validate: false,
-    }),
+    parts: [
+      formElementConfig.createPrompt(config, nullSession, element, {
+        validate: false,
+      }),
+    ],
     actions: [],
   };
 };
diff --git a/packages/forms/src/session.ts b/packages/forms/src/session.ts
index f59a7596..87659159 100644
--- a/packages/forms/src/session.ts
+++ b/packages/forms/src/session.ts
@@ -1,6 +1,7 @@
 import {
   type FormConfig,
   type FormDefinition,
+  type FormElement,
   getFormElementConfig,
   validateElement,
 } from '.';
@@ -73,7 +74,7 @@ export const getFormSessionValue = (
 export const updateSessionValue = (
   session: FormSession,
   id: FormElementId,
-  value: any
+  value: FormElementValue
 ): FormSession => {
   if (!(id in session.form.elements)) {
     console.error(`FormElement "${id}" does not exist on form.`);
@@ -126,10 +127,10 @@ export const sessionIsComplete = (config: FormConfig, session: FormSession) => {
   });
 };
 
-const addValue = (
+const addValue = <T extends FormElement = FormElement>(
   form: FormSession,
   id: FormElementId,
-  value: FormElementValue
+  value: FormElementValue<T>
 ): FormSession => ({
   ...form,
   data: {