diff --git a/.vscode/launch.json b/.vscode/launch.json
index 177bc7dfa..00695f097 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -1,15 +1,10 @@
 {
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
   "configurations": [
-    {
-      "type": "pwa-chrome",
-      "request": "launch",
-      "name": "Launch Chrome against localhost",
-      "url": "http://localhost:8080",
-      "webRoot": "${workspaceFolder}"
-    }
+  {
+    "name": "Attach to Chrome",
+    "port": 9222,
+    "request": "attach",
+    "type": "chrome"
+  }
   ]
 }
diff --git a/libs/angular-components/src/lib/public-form-utils.ts b/libs/angular-components/src/lib/public-form-utils.ts
index d2f87ae68..d896f5879 100644
--- a/libs/angular-components/src/lib/public-form-utils.ts
+++ b/libs/angular-components/src/lib/public-form-utils.ts
@@ -2,50 +2,235 @@ import { FieldValidator } from "./validation";
 
 export type FormStatus = "not-started" | "incomplete" | "complete";
 
-export class PublicFormComponent<T> {
-  state: AppState<T> = {
-    form: {},
-    history: [],
-    editting: "",
-    status: "not-started",
-  };
+// Public type to define the state of the form
+export type AppState<T> = {
+  uuid: string;
+  form: Record<string, Fieldset<T>>;
+  history: string[];
+  editting: string;
+  lastModified?: Date;
+  status: FormStatus;
+  currentFieldset?: { id: T; dispatchType: "change" | "continue" };
+};
+
+export type Fieldset<T> = {
+  heading: string;
+  skipSummary?: boolean;
+  data:
+    | { type: "details"; fieldsets: Record<string, FieldsetItemState> }
+    | { type: "list"; items: AppState<T>[] };
+};
+
+// Public type to define the state of the fieldset items
+export type FieldsetItemState = {
+  name: string;
+  label: string;
+  value: string;
+};
+
+export class PublicFormController<T> {
+  state?: AppState<T> | AppState<T>[];
   _formData?: Record<string, string> = undefined;
   _formRef?: HTMLElement = undefined;
 
+  constructor(private type: "details" | "list") {
+    console.log("constructor", this.type);
+    // nothing here
+  }
+
+  // Obtain reference to the form element
   init(e: Event) {
+    // FIXME: This condition should not be needed, but currently it is the only way to get things working
+    if (this._formRef) {
+      console.error("init: form element has already been set");
+      return;
+    }
+    this._formRef = (e as CustomEvent).detail.el;
+
+    this.state = {
+      uuid: crypto.randomUUID(),
+      form: {},
+      history: [],
+      editting: "",
+      status: "not-started",
+    };
+  }
+
+  initList(e: Event) {
     this._formRef = (e as CustomEvent).detail.el;
-    relay(this._formRef, "init", {});
+    this.state = [];
   }
 
-  initState(state: string | AppState<T>) {
+  // Public method to allow for the initialization of the state
+  initState(state: string | AppState<T> | AppState<T>[]) {
     relay(this._formRef, "external::init:state", state);
   }
 
-  updateState(e: Event) {
-    const state = (e as CustomEvent).detail as AppState<T>;
+  // ISSUE:
+  // The issue is that all the logic below is happening outside the form component, thereby resulting
+  // in the "fixed" data not being in sync with the data within the form component.
+  //
+
+  // Public method to allow for the updating of the state
+  // updateState(e: Event) {
+  //   console.debug(
+  //     "Utils:updateState",
+  //     this.type,
+  //     { state: this.state },
+  //     (e as CustomEvent).detail,
+  //   );
+  //   if (!this.state) {
+  //     console.error("updateState: state has not yet been set");
+  //     return;
+  //   }
+  //
+  //   const detail = (e as CustomEvent).detail;
+  //   } else if (this.type === "details" && Array.isArray(detail.data)) {
+  //     this.#updateObjectListState(detail);
+  //   } else {
+  //     this.#updateObjectState(detail);
+  //   }
+  // }
+
+  updateListState(e: Event) {
+    const detail = (e as CustomEvent).detail;
+
+    if (!Array.isArray(detail.data)) {
+      return;
+    }
+
+    this.state = detail.data;
+  }
+
+  #updateObjectListState(detail: { data: AppState<T>[]; index: number; id: string }) {
+    if (!Array.isArray(detail.data)) {
+      return;
+    }
+
+    if (Array.isArray(this.state)) {
+      return;
+    }
+
     this.state = {
       ...this.state,
-      form: state.form,
-      currentFieldset: state.currentFieldset,
-    };
+      form: {
+        ...(this.state?.form || {}),
+        [detail.id]: detail.data,
+      },
+    } as AppState<T>;
   }
 
-  getStateValue(group: string, key: string): string {
-    const data = this.state.form[group].data as Record<string, FieldsetItemState>[];
-    // @ts-expect-error "ignore"
-    return (data as Record<string, string>)[key]?.value ?? "";
+  updateObjectState(e: Event) {
+    if (Array.isArray(this.state)) {
+      return;
+    }
+
+    const detail = (e as CustomEvent).detail;
+    if (detail.type === "list") {
+      // form state being updated with subform array data
+      this.state = {
+        ...this.state,
+        form: { ...(this.state?.form || {}), [detail.id]: detail.data },
+        // currentFieldset: newState.currentFieldset,
+        // history: detail.data.,
+      } as AppState<T>;
+    } else {
+      // form state being updated with form data
+      this.state = {
+        ...this.state,
+        form: { ...(this.state?.form || {}), ...detail.data.form },
+        // currentFieldset: newState.currentFieldset,
+        history: detail.data.history,
+      } as AppState<T>;
+    }
   }
 
-  continueTo(name: T | undefined) {
-    if (!name) {
+  getStateList(): Record<string, string>[] {
+    if (!this.state) {
+      return [];
+    }
+    if (!Array.isArray(this.state)) {
+      console.warn(
+        "Utils:getStateList: unable to update the state of a non-multi form type",
+        this.state,
+      );
+      return [];
+    }
+    if (this.state.length === 0) {
+      return [];
+    }
+
+    return this.state.map((s) => {
+      return Object.values(s.form)
+        .filter((item) => {
+          return item?.data?.type === "details";
+        })
+        .map((item) => {
+          return (item.data.type === "details" && item.data?.fieldsets) || {};
+        })
+        .reduce(
+          (acc, item) => {
+            for (const [key, value] of Object.entries(item)) {
+              acc[key] = value.value;
+            }
+            return acc;
+          },
+          {} as Record<string, string>,
+        );
+    });
+  }
+
+  // getStateItems(group: string): Record<string, FieldsetItemState>[] {
+  //   if (Array.isArray(this.state)) {
+  //     console.error(
+  //       "Utils:getStateItems: unable to update the state of a multi form type",
+  //     );
+  //     return [];
+  //   }
+  //   if (!this.state) {
+  //     console.error("Utils:getStateItems: state has not yet been set");
+  //     return [];
+  //   }
+
+  //   console.debug("Utils:getStateItems", this.state, { group });
+  //   return (this.state.form[group]?.data ?? []) as Record<string, FieldsetItemState>[];
+  // }
+
+  // Public method to allow for the retrieval of the state value
+  // getStateValue(group: string, key: string): string {
+  //   if (Array.isArray(this.state)) {
+  //     console.error("getStateValue: unable to update the state of a multi form type");
+  //     return "";
+  //   }
+  //   if (!this.state) {
+  //     console.error("getStateValue: state has not yet been set");
+  //     return "";
+  //   }
+
+  //   const data = this.state.form[group].data as Record<string, FieldsetItemState>[];
+  //   // @ts-expect-error "ignore"
+  //   return (data as Record<string, string>)[key]?.value ?? "";
+  // }
+
+  // Public method to allow for the continuing to the next page
+  continueTo(next: T | undefined) {
+    if (!next) {
       console.error("continueTo [name] is undefined");
       return;
     }
-    relay<{ next: T }>(this._formRef, "external::continue", {
-      next: name,
+    // Relay the continue message to the form element which will
+    // set the visibility of the fieldsets
+    console.log("continueTo: TYPE", {
+      type: this.type,
+      state: this.state,
+      formRef: this._formRef,
+      next,
     });
+    // FIXME: this makes a call to the subform instead of the form
+    relay<{ next: T }>(this._formRef, "external::continue", { next });
   }
 
+  // Public method to perform validation and send the appropriate messages to the form elements
   validate(field: string, e: Event, validators: FieldValidator[]): [boolean, string] {
     const { el, state } = (e as CustomEvent).detail;
     const value = state?.[field]?.value;
@@ -60,6 +245,15 @@ export class PublicFormComponent<T> {
     return [true, value];
   }
 
+  edit(index: number) {
+    relay(this._formRef, "external::alter:state", { index, operation: "edit" });
+  }
+
+  remove(index: number) {
+    relay(this._formRef, "external::alter:state", { index, operation: "remove" });
+  }
+
+  // Private method to dispatch the error message to the form element
   #dispatchError(el: HTMLElement, name: string, msg: string) {
     el.dispatchEvent(
       new CustomEvent("msg", {
@@ -76,21 +270,7 @@ export class PublicFormComponent<T> {
   }
 }
 
-export type AppState<T> = {
-  form: Record<string, { heading: string; data: Record<string, FieldsetItemState>[] }>;
-  history: string[];
-  editting: string;
-  lastModified?: Date;
-  status: FormStatus;
-  currentFieldset?: { id: T; dispatchType: "change" | "continue" };
-};
-
-export type FieldsetItemState = {
-  name: string;
-  label: string;
-  value: string;
-};
-
+// Public helper function to dispatch messages
 export function dispatch<T>(
   el: HTMLElement | Element | null | undefined,
   eventName: string,
@@ -110,6 +290,7 @@ export function dispatch<T>(
   );
 }
 
+// Public helper function to relay messages
 export function relay<T>(
   el: HTMLElement | Element | null | undefined,
   eventName: string,
@@ -120,7 +301,6 @@ export function relay<T>(
     console.error("dispatch element is null");
     return;
   }
-  // console.log(`RELAY(${eventName}):`, data, el);
   el.dispatchEvent(
     new CustomEvent<{ action: string; data?: T }>("msg", {
       composed: true,
diff --git a/libs/angular-components/src/lib/validation.spec.ts b/libs/angular-components/src/lib/validation.spec.ts
index b9f197dfb..c75db71be 100644
--- a/libs/angular-components/src/lib/validation.spec.ts
+++ b/libs/angular-components/src/lib/validation.spec.ts
@@ -1,7 +1,11 @@
 import { describe, it, expect } from "vitest";
 
-import { lengthValidator, SINValidator } from "./validation";
-import { emailValidator, postalCodeValidator } from "./validation.ts";
+import {
+  lengthValidator,
+  SINValidator,
+  emailValidator,
+  postalCodeValidator,
+} from "./validation";
 
 describe("Validation", () => {
   describe("Email", () => {
diff --git a/libs/react-components/src/lib/fieldset/fieldset.tsx b/libs/react-components/src/lib/fieldset/fieldset.tsx
index cc32c0da0..94047f108 100644
--- a/libs/react-components/src/lib/fieldset/fieldset.tsx
+++ b/libs/react-components/src/lib/fieldset/fieldset.tsx
@@ -15,7 +15,7 @@ declare global {
   namespace JSX {
     // eslint-disable-next-line @typescript-eslint/no-empty-interface
     interface IntrinsicElements {
-      "goa-fieldset": WCProps & React.HTMLAttributes<HTMLElement>;
+      "goa-public-form-page": WCProps & React.HTMLAttributes<HTMLElement>;
     }
   }
 }
@@ -63,7 +63,7 @@ export function GoabFieldset({
   }, [ref.current, onContinue])
 
   return (
-    <goa-fieldset
+    <goa-public-form-page
       ref={ref}
       id={id}
       first={first}
@@ -76,7 +76,7 @@ export function GoabFieldset({
       ml={ml}
     >
       {children}
-    </goa-fieldset>
+    </goa-public-form-page>
   );
 }
 
diff --git a/libs/web-components/src/common/utils.spec.ts b/libs/web-components/src/common/utils.spec.ts
index 4013e7564..3dea260ed 100644
--- a/libs/web-components/src/common/utils.spec.ts
+++ b/libs/web-components/src/common/utils.spec.ts
@@ -1,4 +1,5 @@
-import { getTimestamp } from "./utils";
+import { waitFor } from "@testing-library/svelte";
+import { getTimestamp, performOnce } from "./utils";
 import { it, describe } from "vitest";
 
 describe("getTimestamp", () => {
@@ -48,3 +49,18 @@ describe("getTimestamp", () => {
     expect(getTimestamp(new Date(2023, 1, 1, 0, 23))).toContain("12:23 AM")
   })
 })
+
+describe("performOnce", () => {
+  it("calls the action only once", async () => {
+    let count = 0;
+    let timeoutId: any;
+
+    for (let i = 0; i < 10; i++) {
+      timeoutId = performOnce(timeoutId, () => count++);
+    }
+
+    await waitFor(() => {
+      expect(count).toBe(1);
+    });
+  })
+})
diff --git a/libs/web-components/src/common/utils.ts b/libs/web-components/src/common/utils.ts
index 064063389..fe66f3efa 100644
--- a/libs/web-components/src/common/utils.ts
+++ b/libs/web-components/src/common/utils.ts
@@ -36,7 +36,7 @@ export const msg = {
 
 export function receive(
   el: HTMLElement | Element | null | undefined,
-  handler: (action: string, data: Record<string, unknown>, event: Event) => void,
+  handler: (action: string, data: unknown, event: Event) => void,
 ) {
   if (!el) {
     console.warn("receive() el is null | undefined");
@@ -83,8 +83,6 @@ export function dispatch<T>(
   detail?: T,
   opts?: { bubbles?: boolean; cancelable?: boolean; timeout?: number },
 ) {
-  // console.log(`DISPATCH(${eventName}):`, detail, el);
-
   const dispatch = () => {
     el?.dispatchEvent(
       new CustomEvent<T>(eventName, {
@@ -113,8 +111,10 @@ export function getSlottedChildren(
   } else {
     // for unit tests only
     if (parentTestSelector) {
-      // @ts-expect-error testing
-      return [...rootEl.querySelector(parentTestSelector).children] as Element[];
+      return [
+        // @ts-expect-error testing
+        ...rootEl.querySelector(parentTestSelector).children,
+      ] as Element[];
     }
     // @ts-expect-error testing
     return [...rootEl.children] as Element[];
@@ -142,7 +142,10 @@ export function isValidDate(d: Date): boolean {
   return !isNaN(d.getDate());
 }
 
-export function validateRequired(componentName: string, props: Record<string, unknown>) {
+export function validateRequired(
+  componentName: string,
+  props: Record<string, unknown>,
+) {
   Object.entries(props).forEach((prop) => {
     if (!prop[1]) {
       console.warn(`${componentName}: ${prop[0]} is required`);
@@ -235,6 +238,17 @@ export function padLeft(
   return `${padding}${value}`;
 }
 
+export function performOnce(
+  timeoutId: any,
+  action: () => void,
+  delay = 100,
+): any {
+  if (timeoutId) {
+    clearTimeout(timeoutId);
+  }
+  return setTimeout(action, delay);
+}
+
 export function ensureSlotExists(el: HTMLElement) {
   if (!el.querySelector("slot")) {
     el.appendChild(document.createElement("slot"));
diff --git a/libs/web-components/src/components/checkbox/Checkbox.svelte b/libs/web-components/src/components/checkbox/Checkbox.svelte
index 485ca064a..e434552c3 100644
--- a/libs/web-components/src/components/checkbox/Checkbox.svelte
+++ b/libs/web-components/src/components/checkbox/Checkbox.svelte
@@ -7,8 +7,8 @@
 
   import { dispatch, fromBoolean, receive, relay, toBoolean } from "../../common/utils";
   import {
-    FormSetValueMsg,
-    FormSetValueRelayDetail,
+    FieldsetSetValueMsg,
+    FieldsetSetValueRelayDetail,
     FieldsetSetErrorMsg,
     FieldsetResetErrorsMsg,
     FormFieldMountRelayDetail,
@@ -75,10 +75,9 @@
 
   function addRelayListener() {
     receive(_rootEl, (action, data) => {
-      // console.log(`  RECEIVE(Form => ${action}):`, action, data);
       switch (action) {
-        case FormSetValueMsg:
-          onSetValue(data as FormSetValueRelayDetail);
+        case FieldsetSetValueMsg:
+          onSetValue(data as FieldsetSetValueRelayDetail);
           break;
         case FieldsetSetErrorMsg:
           setError(data as FieldsetErrorRelayDetail);
@@ -132,7 +131,7 @@
     }
   }
 
-  function onSetValue(detail: FormSetValueRelayDetail) {
+  function onSetValue(detail: FieldsetSetValueRelayDetail) {
     // @ts-expect-error
     value = detail.value;
     checked = detail.value ? "true" : "false";
diff --git a/libs/web-components/src/components/date-picker/DatePicker.svelte b/libs/web-components/src/components/date-picker/DatePicker.svelte
index 6ebfe983f..cb5385a5f 100644
--- a/libs/web-components/src/components/date-picker/DatePicker.svelte
+++ b/libs/web-components/src/components/date-picker/DatePicker.svelte
@@ -13,8 +13,8 @@
   import { padLeft, toBoolean } from "../../common/utils";
   import { receive, dispatch, relay } from "../../common/utils";
   import {
-    FormSetValueMsg,
-    FormSetValueRelayDetail,
+    FieldsetSetValueMsg,
+    FieldsetSetValueRelayDetail,
     FieldsetSetErrorMsg,
     FieldsetResetErrorsMsg,
     FormFieldMountMsg,
@@ -86,8 +86,8 @@
   function addRelayListener() {
     receive(_rootEl, (action, data) => {
       switch (action) {
-        case FormSetValueMsg:
-          onSetValue(data as FormSetValueRelayDetail);
+        case FieldsetSetValueMsg:
+          onSetValue(data as FieldsetSetValueRelayDetail);
           break;
         case FieldsetSetErrorMsg:
           setError(data as FieldsetErrorRelayDetail);
@@ -103,7 +103,7 @@
     error = detail.error ? "true" : "false";
   }
 
-  function onSetValue(detail: FormSetValueRelayDetail) {
+  function onSetValue(detail: FieldsetSetValueRelayDetail) {
     // @ts-expect-error
     value = detail.value;
     dispatch(
diff --git a/libs/web-components/src/components/dropdown/Dropdown.svelte b/libs/web-components/src/components/dropdown/Dropdown.svelte
index a7d0d8aea..5f2b1bbdb 100644
--- a/libs/web-components/src/components/dropdown/Dropdown.svelte
+++ b/libs/web-components/src/components/dropdown/Dropdown.svelte
@@ -5,12 +5,14 @@
 
   import type { GoAIconType } from "../icon/Icon.svelte";
   import type { Spacing } from "../../common/styling";
+  import type {
+    DropdownItemDestroyRelayDetail,
+    DropdownItemMountedRelayDetail,
+    Option,
+  } from "./DropdownItem.svelte";
   import {
     DropdownItemDestroyMsg,
-    DropdownItemDestroyRelayDetail,
     DropdownItemMountedMsg,
-    DropdownItemMountedRelayDetail,
-    type Option,
   } from "./DropdownItem.svelte";
   import {
     dispatch,
@@ -22,12 +24,13 @@
   } from "../../common/utils";
   import { calculateMargin } from "../../common/styling";
   import {
+    FieldsetErrorRelayDetail,
     FieldsetResetErrorsMsg,
     FieldsetSetErrorMsg,
     FormFieldMountMsg,
     FormFieldMountRelayDetail,
-    FormSetValueMsg,
-    FormSetValueRelayDetail,
+    FieldsetSetValueMsg,
+    FieldsetSetValueRelayDetail,
   } from "../../types/relay-types";
 
   interface EventHandler {
@@ -145,11 +148,11 @@
   function addRelayListener() {
     receive(_rootEl, (action, data, event) => {
       switch (action) {
-        case FormSetValueMsg:
-          onSetValue(data as FormSetValueRelayDetail);
+        case FieldsetSetValueMsg:
+          onSetValue(data as FieldsetSetValueRelayDetail);
           break;
         case FieldsetSetErrorMsg:
-          error = "true";
+          setError(data as FieldsetErrorRelayDetail);
           break;
         case FieldsetResetErrorsMsg:
           error = "false";
@@ -164,8 +167,12 @@
     });
   }
 
-  function onSetValue(detail: FormSetValueRelayDetail) {
-    // @ts-expect-error ignore
+  function setError(detail: FieldsetErrorRelayDetail) {
+    error = detail.error ? "true" : "false";
+  }
+
+  function onSetValue(detail: FieldsetSetValueRelayDetail) {
+    // @ts-expect-error
     value = detail.value;
     dispatch(_rootEl, "_change", { name, value }, { bubbles: true });
   }
diff --git a/libs/web-components/src/components/form-item/FormItem.svelte b/libs/web-components/src/components/form-item/FormItem.svelte
index f7aa93958..eeeaf73ae 100644
--- a/libs/web-components/src/components/form-item/FormItem.svelte
+++ b/libs/web-components/src/components/form-item/FormItem.svelte
@@ -57,7 +57,7 @@
   export let requirement: RequirementType = "";
   export let maxwidth: string = "none";
 
-  // **For the public-form only** 
+  // **For the public-form only**
   // Overrides the label value within the form-summary to provide a shorter description of the value
   export let name: string = "blank";
 
@@ -72,7 +72,6 @@
     validateLabelSize(labelsize);
 
     receive(_rootEl, (action, data) => {
-      // console.log(`  RECEIVE(FormItem => ${action}):`, data);
       switch (action) {
         case FormFieldMountMsg:
           onInputMount(data as FormFieldMountRelayDetail);
@@ -168,11 +167,12 @@
       el.setAttribute("aria-label", label);
     }
 
-    bindElement(name);
+    sendMountedMessage(name);
   }
 
-  // Allows binding to Fieldset components
-  function bindElement(_name: string) {
+  // Allows binding to Fieldset components. The `_name` value is what was obtained from the "input" element's
+  // event, which ensures that the requirement of the "input" and formitem having the same name will be met.
+  function sendMountedMessage(_name: string) {
     relay<FormItemMountRelayDetail>(
       _rootEl,
       FormItemMountMsg,
diff --git a/libs/web-components/src/components/form/Fieldset.svelte b/libs/web-components/src/components/form/Fieldset.svelte
index 37436afb2..ac5e26317 100644
--- a/libs/web-components/src/components/form/Fieldset.svelte
+++ b/libs/web-components/src/components/form/Fieldset.svelte
@@ -1,19 +1,25 @@
 <svelte:options
   customElement={{
-    tag: "goa-fieldset",
+    tag: "goa-public-form-page",
     props: {
       buttonText: { type: "String", attribute: "button-text" },
-      secondaryButtonText: { type: "String", attribute: "secondary-button-text" },
+      secondaryButtonText: {
+        type: "String",
+        attribute: "secondary-button-text",
+      },
+      skipSummary: { type: "Boolean", attribute: "skip-summary" },
       preserveState: { type: "String", attribute: "preserve-state" },
-      showBackButton: { type: "String", attribute: "show-back-button" },
       sectionTitle: { type: "String", attribute: "section-title" },
-      dispatchOn: { attribute: "dispatch-on"},
+      dispatchOn: { attribute: "dispatch-on" },
+      first: { attribute: "first", type: "Boolean" },
+      last: { attribute: "last", type: "Boolean" },
+      active: { attribute: "active", type: "Boolean" },
     },
   }}
 />
 
-<script lang="ts">;
-  import { onMount } from "svelte"
+<script lang="ts">
+  import { onMount } from "svelte";
   import { calculateMargin, Spacing } from "../../common/styling";
   import { dispatch, receive, relay, styles } from "../../common/utils";
   import {
@@ -28,22 +34,24 @@
     FieldsetMountFormItemMsg,
     FieldsetMountFormRelayDetail,
     FieldsetResetErrorsMsg,
+    FieldsetResetFieldsMsg,
     FieldsetSetErrorMsg,
-    FieldsetSubmitMsg,
+    FieldsetSetValueMsg,
+    FieldsetSetValueRelayDetail,
+    FieldsetCompleteMsg,
     FieldsetValidationRelayDetail,
     FormBackUrlDetail,
     FormBackUrlMsg,
-    FormDispatchStateMsg,
-    FormDispatchStateRelayDetail,
+    FormDispatchEditMsg,
+    FormDispatchEditRelayDetail,
     FormFieldMountMsg,
     FormFieldMountRelayDetail,
     FormItemMountMsg,
     FormItemMountRelayDetail,
     FormResetErrorsMsg,
+    FormResetFormMsg,
     FormSetFieldsetMsg,
     FormSetFieldsetRelayDetail,
-    FormSetValueMsg,
-    FormSetValueRelayDetail,
     FormToggleActiveMsg,
     FormToggleActiveRelayDetail,
   } from "../../types/relay-types";
@@ -53,12 +61,11 @@
   // ======
 
   export let id: string = "";
+  export let skipSummary: boolean = false;
   export let heading: string = "";
   export let buttonText: string = "";
   export let secondaryButtonText: string = "";
-  export let showBackButton: string = "true";
   export let sectionTitle: string = "";
-  export let state: "subform" | "default" = "default";
 
   // when the changes will be dispatched to the form; `change` ~ immediately
   export let dispatchOn: "change" | "continue" = "continue";
@@ -68,6 +75,7 @@
   export let ml: Spacing = null;
   export let first: boolean = false;
   export let last: boolean = false;
+  export let active: boolean = false;
 
   // =======
   // Private
@@ -76,7 +84,6 @@
   let _rootEl: HTMLElement;
   let _active: boolean = false;
   let _editting: boolean = false;
-  let _detail: FieldsetBindRelayDetail;
   let _errors: Record<string, string> = {};
   let _backUrl: string;
 
@@ -90,7 +97,7 @@
   let _formItems: Record<string, { label: string; el: HTMLElement }> = {};
 
   // reference to child form input, dropdown, etc components to allow for relaying of error state
-  let _formFields: Record<string, { order: number, el: HTMLElement }> = {};
+  let _formFields: Record<string, { order: number; el: HTMLElement }> = {};
 
   // ========
   // Reactive
@@ -107,12 +114,6 @@
   // =====
 
   onMount(() => {
-    _detail = {
-      id,
-      heading,
-      el: _rootEl,
-    };
-
     dispatchBindMsg();
     addChildChangeListener();
     bindChannel();
@@ -123,8 +124,7 @@
   // =========
 
   function bindChannel() {
-    receive(_rootEl, (action, data) => {
-      // console.log(`  RECEIVE(Fieldset => ${action}):`, data);
+    receive(_rootEl, (action, data, event) => {
       switch (action) {
         case FormSetFieldsetMsg:
           onSetFieldset(data as FormSetFieldsetRelayDetail);
@@ -132,8 +132,8 @@
         case FormResetErrorsMsg:
           onErrorReset();
           break;
-        case FormDispatchStateMsg:
-          onFormDispatch(data as FormDispatchStateRelayDetail);
+        case FormDispatchEditMsg:
+          onFormDispatch(data as FormDispatchEditRelayDetail);
           break;
         case FormItemMountMsg:
           onFormItemMount(data as FormItemMountRelayDetail);
@@ -150,6 +150,9 @@
         case FormBackUrlMsg:
           setBackUrl(data as FormBackUrlDetail);
           break;
+        case FormResetFormMsg:
+          resetFields(event);
+          break;
       }
     });
   }
@@ -158,19 +161,45 @@
   // Dispatch handlers
   // *****************
 
+  function resetFields(event: Event) {
+    // prevent subform resets from resetting the parent
+    event.stopPropagation();
+
+    for (const { el } of Object.values(_formFields)) {
+      relay(el, FieldsetResetFieldsMsg);
+    }
+  }
+
   function setBackUrl(detail: FormBackUrlDetail) {
     _backUrl = detail.url;
   }
 
   function onSetFieldset(detail: FormSetFieldsetRelayDetail) {
-    for (const [id, item] of Object.entries(detail.value)) {
-      _state[id] = { ...item }
+    if (detail.value.type === "details") {
+      // set the local fieldset state
+      for (const [id, item] of Object.entries(detail.value.fieldsets)) {
+        _state[id] = { ...item };
+      }
+
+      // restore state in form items by relaying the message
+      for (const [name, data] of Object.entries(_state)) {
+        if (data.value) {
+          relay<FieldsetSetValueRelayDetail>(
+            _formFields[name].el,
+            FieldsetSetValueMsg,
+            {
+              name,
+              value: data.value,
+            },
+          );
+        }
+      }
     }
   }
 
-  function onFormDispatch(detail: FormDispatchStateRelayDetail) {
-    // allow customization of form if user has jumped back to a question (editting mode)
-    _editting = detail.editting === id;
+  // allow customization of form if user has jumped back to a question (editting mode)
+  function onFormDispatch(detail: FormDispatchEditRelayDetail) {
+    _editting = detail.id === id;
   }
 
   function onErrorReset() {
@@ -187,6 +216,7 @@
 
   function onToggleActiveState(detail: FormToggleActiveRelayDetail) {
     _active = detail.active;
+
     _stateSnapshot = { ..._state };
   }
 
@@ -214,46 +244,63 @@
 
   function onError(detail: ExternalErrorRelayDetail) {
     _errors[detail.name] = detail.msg;
-    
+
     // dispatch error down to fields
-    relay<FieldsetErrorRelayDetail>(_formFields[detail.name].el, FieldsetSetErrorMsg, {
-      error: detail.msg,
-    });
+    relay<FieldsetErrorRelayDetail>(
+      _formFields[detail.name].el,
+      FieldsetSetErrorMsg,
+      {
+        error: detail.msg,
+      },
+    );
 
     // dispatch error down to form items
-    relay<FieldsetErrorRelayDetail>(_formItems[detail.name].el, FieldsetSetErrorMsg, {
-      error: detail.msg,
-    });
+    relay<FieldsetErrorRelayDetail>(
+      _formItems[detail.name].el,
+      FieldsetSetErrorMsg,
+      {
+        error: detail.msg,
+      },
+    );
   }
 
   // **************
   // Event handlers
   // **************
 
+  // FIXME: refactor this
   // Dispatch _continue event to app's level allowing custom validation to be performed
   function saveAndContinue() {
     // Prevents looping form sections from sending no data to the form, thereby overwritting data
     // already collected and saved at the form level
-    const isDirty = Object.keys(_state).length > 0
-    if (isDirty) {
-      relayFieldsetChange();
-    }
-    
+    // const isDirty = Object.keys(_state).length > 0;
+    // if (isDirty) {
+    //   relayFieldsetChange();
+    // }
+
     // dispatch to on:_continue method allowing users to validate the data
     sendContinueMsg(false);
   }
 
   function sendContinueMsg(cancelled: boolean) {
-    if (cancelled) {
-      revertFormFieldValues();            
+    console.log("sendContinueMsg", cancelled, _state);
+
+    const isDirty = Object.keys(_state).length > 0;
+    if (isDirty) {
+      relayFieldsetChange();
     }
 
     dispatch<FieldsetValidationRelayDetail>(
       _rootEl,
       "_continue",
-      { el: _rootEl, state: cancelled ? _stateSnapshot : _state},
+      { el: _rootEl, state: cancelled ? _stateSnapshot : _state, last, first },
       { bubbles: true },
     );
+
+    if (cancelled) {
+      revertFormFieldValues();
+      _state = _stateSnapshot;
+    }
   }
 
   // *********
@@ -261,20 +308,27 @@
   // *********
 
   function onCancel() {
-    sendContinueMsg(true)
+    sendContinueMsg(true);
   }
 
   function revertFormFieldValues() {
     for (const [name, val] of Object.entries(_formFields)) {
       // some form elements not "form-bound" won't exist within the snapshot state
       if (_stateSnapshot[name]) {
-        relay<FormSetValueRelayDetail>(val.el, FormSetValueMsg, { name, value: _stateSnapshot[name].value});
+        relay<FieldsetSetValueRelayDetail>(val.el, FieldsetSetValueMsg, {
+          name,
+          value: _stateSnapshot[name].value,
+        });
       }
     }
   }
 
-  function onSubmit() {
-    relay(_rootEl, FieldsetSubmitMsg, {}, { bubbles: true });
+  function onComplete() {
+    // FIXME: this functions assumes that the submit button is being displayed within a summary page
+    // and that the all the form data has already been relayed up to the form. But if the last page
+    // is *not* a summary page this breaks.
+    sendContinueMsg(false); // This was added to ensure that above issue is "fixed"
+    relay(_rootEl, FieldsetCompleteMsg, null, { bubbles: true });
   }
 
   function onSecondaryClick() {
@@ -287,10 +341,12 @@
   }
 
   function dispatchBindMsg() {
-    relay<FieldsetBindRelayDetail>(_rootEl, FieldsetBindMsg, _detail, {
-      bubbles: true,
-      timeout: 10,
-    });
+    relay<FieldsetBindRelayDetail>(
+      _rootEl,
+      FieldsetBindMsg,
+      { id, heading, skipSummary, el: _rootEl },
+      { bubbles: true, timeout: 10 },
+    );
   }
 
   function addChildChangeListener() {
@@ -302,12 +358,17 @@
       }
 
       if (!_formFields[name]) {
-        return;  
+        return;
       }
-      _state[name] = { name, value, label: _formItems[name].label, order: _formFields[name].order };
+      _state[name] = {
+        name,
+        value,
+        label: _formItems[name].label,
+        order: _formFields[name].order,
+      };
 
       if (dispatchOn === "change") {
-        const isDirty = Object.keys(_state).length > 0
+        const isDirty = Object.keys(_state).length > 0;
         if (isDirty) {
           relayFieldsetChange();
         }
@@ -321,13 +382,10 @@
     relay<FieldsetChangeRelayDetail>(
       _rootEl,
       FieldsetChangeMsg,
-      { 
-        id, 
-        state: {
-          heading,
-          data: _state,
-        }, 
-        dispatchOn 
+      {
+        id,
+        state: { heading, data: _state },
+        dispatchOn,
       },
       { bubbles: true },
     );
@@ -343,78 +401,80 @@
   <fieldset
     style={styles(
       calculateMargin(mt, mr, mb, ml),
-      `display: ${_active ? "block" : "none"}`,
+      `display: ${_active || active ? "block" : "none"}`,
     )}
   >
-    {#if state === "default"}
-      {#if first && _backUrl}
-        <goa-link leadingicon="chevron-back" mb="2xl">
-          <a href={_backUrl}>Back</a>
-        </goa-link>
-      {/if}
-      {#if !first && !_editting && !last && showBackButton === "true"}
-        <goa-link-button leadingicon="chevron-back" mb="2xl" on:_click={handleBack}>
-          Back
-        </goa-link-button>
-      {/if}
+    {#if first && _backUrl && !_editting }
+      <goa-link leadingicon="chevron-back" mb="2xl">
+        <a href={_backUrl}>Back</a>
+      </goa-link>
+    {/if}
+    {#if (!first && !_editting && !last)}
+      <goa-link-button
+        leadingicon="chevron-back"
+        mb="2xl"
+        on:_click={handleBack}
+      >
+        Back
+      </goa-link-button>
+    {/if}
 
-      {#if Object.values(_errors).filter(err => !!err).length}
-        <goa-callout
-          type="emergency"
-          heading={`There is a problem`}
-        >
-          <ul class="errors">
-            {#each Object.keys(_errors) as key}
-              <li>
-                <a class="error" href={`#${key}`} on:click={(e) => jumpToError(e, key)}>
-                  {_errors[key]}
-                </a>
-              </li>
-            {/each}
-          </ul>
-        </goa-callout>
-      {/if}
+    {#if Object.values(_errors).filter((err) => !!err).length}
+      <goa-callout type="emergency" heading={`There is a problem`}>
+        <ul class="errors">
+          {#each Object.keys(_errors) as key}
+            <li>
+              <a
+                class="error"
+                href={`#${key}`}
+                on:click={(e) => jumpToError(e, key)}
+              >
+                {_errors[key]}
+              </a>
+            </li>
+          {/each}
+        </ul>
+      </goa-callout>
+    {/if}
+
+    {#if sectionTitle}
+      <goa-text class="section-title" size="body-l" mb="s">
+        {sectionTitle}
+      </goa-text>
+    {/if}
+
+    {#if heading}
+      <goa-text as="h2" size="heading-l">{heading}</goa-text>
+    {:else}
+      <br />
+    {/if}
 
-      {#if sectionTitle}
-        <goa-text class="section-title" size="body-l" mb="s">{sectionTitle}</goa-text>
+    <goa-block gap="m" direction="column">
+      <slot />
+    </goa-block>
+
+    <goa-block mt="xl">
+      {#if _editting && !secondaryButtonText}
+        <goa-button on:_click={onCancel} type="secondary">
+          Cancel
+        </goa-button>
+      {/if}
+      {#if secondaryButtonText}
+        <goa-button on:_click={onSecondaryClick} type="secondary">
+          {secondaryButtonText}
+        </goa-button>
       {/if}
 
-      {#if heading}
-        <goa-text as="h2" size="heading-l">{heading}</goa-text>
+      {#if last}
+        <goa-button on:_click={onComplete} type="primary">
+          {buttonText || "Confirm"}
+        </goa-button>
       {:else}
-        <br />
+        <goa-button on:_click={saveAndContinue} type="primary">
+          {buttonText || "Continue"}
+        </goa-button>
       {/if}
-
-      <goa-block gap="m" direction="column">
-        <slot />
-      </goa-block>
-
-      <goa-block mt="xl">
-        {#if _editting && !secondaryButtonText}
-          <goa-button on:_click={onCancel} type="secondary">
-            Cancel
-          </goa-button>
-        {/if}
-        {#if secondaryButtonText}
-          <goa-button on:_click={onSecondaryClick} type="secondary">
-            {secondaryButtonText}
-          </goa-button>
-        {/if}
-
-        {#if last}
-          <goa-button on:_click={onSubmit} type="primary">
-            {buttonText || "Confirm"}
-          </goa-button>
-        {:else}
-          <goa-button on:_click={saveAndContinue} type="primary">
-            {buttonText || "Continue"}
-          </goa-button>
-        {/if}
-      </goa-block>
-
-    {:else}
-      <slot name="subform" />
-    {/if}
+    </goa-block>
   </fieldset>
 </section>
 
diff --git a/libs/web-components/src/components/form/Form.svelte b/libs/web-components/src/components/form/Form.svelte
index d313ab33b..d2658264c 100644
--- a/libs/web-components/src/components/form/Form.svelte
+++ b/libs/web-components/src/components/form/Form.svelte
@@ -1,14 +1,17 @@
-<svelte:options customElement={{
-  tag: "goa-public-form",
-  props: {
-    backUrl: { attribute: "back-url", type: "String" }  
-  }
-}} />
+<svelte:options
+  customElement={{
+    tag: "goa-public-form",
+    props: {
+      backUrl: { attribute: "back-url", type: "String" },
+      subForm: { attribute: "sub-form", type: "Boolean" },
+    },
+  }}
+/>
 
 <script lang="ts">
   import { onMount } from "svelte";
   import { calculateMargin, Spacing } from "../../common/styling";
-  import { dispatch, receive, relay } from "../../common/utils";
+  import { dispatch, performOnce, receive, relay } from "../../common/utils";
   import {
     ExternalAlterDataMsg,
     ExternalAlterDataRelayDetail,
@@ -18,24 +21,26 @@
     ExternalContinueRelayDetail,
     ExternalInitStateDetail,
     ExternalInitStateMsg,
-    ExternalResetStateMsg,
     FieldsetBindMsg,
     FieldsetBindRelayDetail,
     FieldsetChangeMsg,
     FieldsetChangeRelayDetail,
-    FieldsetData,
     FieldsetMountFormItemMsg,
     FieldsetMountFormRelayDetail,
-    FieldsetSubmitMsg,
+    FieldsetCompleteMsg,
     FormBackUrlDetail,
     FormBackUrlMsg,
+    FormBindMsg,
+    FormBindRelayDetail,
+    FormDispatchEditMsg,
+    FormDispatchEditRelayDetail,
     FormDispatchStateMsg,
     FormDispatchStateRelayDetail,
+    FormDispatchStateRelayDetailList,
     FormResetErrorsMsg,
+    FormResetFormMsg,
     FormSetFieldsetMsg,
     FormSetFieldsetRelayDetail,
-    FormSetValueMsg,
-    FormSetValueRelayDetail,
     FormState,
     FormSummaryBindMsg,
     FormSummaryBindRelayDetail,
@@ -43,27 +48,64 @@
     FormSummaryEditPageRelayDetail,
     FormToggleActiveMsg,
     FormToggleActiveRelayDetail,
+    SubFormDeleteDataMsg,
+    SubFormDeleteDataRelayDetail,
+    StateChangeRelayDetail,
+    StateChangeEvent,
   } from "../../types/relay-types";
 
+  // ========
   // Required
+  // ========
+
   export let name: string;
 
+  // ========
   // Optional
-  export let storage: "none" | "local" | "session" = "none";
+  // ========
+
+  // Spacing
   export let mt: Spacing = null;
   export let mr: Spacing = null;
   export let mb: Spacing = null;
   export let ml: Spacing = null;
+
+  // Url that will be navigated back to when the back button in the first fieldset is clicked
   export let backUrl: string = "";
 
+  export let subForm: boolean = false;
+
+  // =======
   // Private
-  let _formEl: HTMLFormElement;
+  // =======
+
+  let _rootEl: HTMLFormElement;
+  let _childReceiverEl: HTMLElement;
+
+  // List of child forms to allow for form data to be passed down to the child form
+  let _childForms: Record<string, HTMLElement> = {};
+
+  // Fieldset binding details
   let _fieldsets: Record<string, FieldsetBindRelayDetail> = {};
-  let _formFields: Record<string, Record<string, HTMLElement>> = {};
-  let _formSummary: HTMLElement;
+
+  // Form field (inputs, selects, etc.) element list
+  // let _formFields: Record<string, Record<string, HTMLElement>> = {};
+
+  // Form summary element reference
+  let _formSummaryEl: HTMLElement;
+
+  // Timeout id for form item binding
   let _formItemBindingTimeoutId: any;
-  let _lastFieldset: string;
+
+  // Timeout id for subform binding
+  let _childFormStateTimeoutId: any;
+
+  // Last fieldset id in history
+  let _lastViewedFieldset: string;
+
+  // Form state
   let _state: FormState = {
+    uuid: crypto.randomUUID(),
     form: {},
     history: [],
     editting: "",
@@ -72,26 +114,53 @@
   };
 
   onMount(() => {
-    // Required to get the form summary to render
-    import("./FormSummary.svelte");
-
     // provide html element link to outside world
-    dispatch(_formEl, "_init", { el: _formEl });
+    dispatch(_rootEl, "_init", { el: _rootEl }, { bubbles: true });
 
-    if (storage !== "none") {
-      restoreState();
-    }
     addWindowPopStateListener();
     addRelayListener();
-    setTimeout(bindChildren, 100);
+    addSubformRelayListener();
+    setTimeout(setChildrenState, 100);  // FIXME: not liking this within a setTimeout
   });
 
+  /**
+   * Adds a listener to the form element to listen for _stateChange event from subforms,
+   * so data received will always be an array.
+   */
+  function addSubformRelayListener() {
+    _childReceiverEl.addEventListener(StateChangeEvent, (e) => {
+      const detail = (e as CustomEvent).detail as StateChangeRelayDetail;
+      if (detail.type === "details") {
+        console.warn("Form:addSubformRelayListener", name, "received details type, ignoring");
+        return;
+      }
+
+      // subform state is always a list
+      _state.form[detail.id] = { data: { type: "list", items: detail.data } };
+
+      // redispatch this form's data
+      dispatch<StateChangeRelayDetail>(_rootEl, StateChangeEvent, {
+        type: "details",
+        data: _state,
+      }, { bubbles: true });
+
+      syncFormSummaryState();
+    });
+  }
+
+  /**
+   * Adds a listener to the form element to handle relay messages
+   */
   function addRelayListener() {
-    receive(_formEl, (type, data, e) => {
-      // prevent fieldset events from going any higher to allow for subforms
-      e.stopPropagation(); 
-      // console.log(`  RECEIVE(Form => ${type}):`, type, data);
+    receive(_rootEl, (type, data, e) => {
+      e.stopPropagation();
       switch (type) {
+        case FormDispatchStateMsg:
+          onReceiveState(data as FormDispatchStateRelayDetail);
+          break;
+        case FormBindMsg:
+          onFormBind(data as FormBindRelayDetail);
+          break;
         case FieldsetBindMsg:
           onFieldsetBind(data as FieldsetBindRelayDetail);
           break;
@@ -99,7 +168,7 @@
           onFieldsetChange(data as FieldsetChangeRelayDetail);
           break;
         case FieldsetMountFormItemMsg:
-          onFieldsetMountFormItem(data as FieldsetMountFormRelayDetail);
+          // onFieldsetMountFormItem(data as FieldsetMountFormRelayDetail);
           break;
         case FormSummaryBindMsg:
           onFormSummaryBind(data as FormSummaryBindRelayDetail);
@@ -110,20 +179,20 @@
         case FormSummaryEditPageMsg:
           onSetPage(data as FormSummaryEditPageRelayDetail);
           break;
-        case FieldsetSubmitMsg:
+        case FieldsetCompleteMsg:
           onFormComplete();
           break;
         case ExternalAppendDataMsg:
           onAppendData(data as ExternalAppendDataRelayDetail);
           break;
-        case ExternalAlterDataMsg:
-          onAlterData(data as ExternalAlterDataRelayDetail);
+        case ExternalInitStateMsg:
+          initState(data as ExternalInitStateDetail);
           break;
-        case ExternalResetStateMsg:
+        case FormResetFormMsg:
           resetState();
           break;
-        case ExternalInitStateMsg:
-          initState(data as ExternalInitStateDetail);
+        case SubFormDeleteDataMsg:
+          // deleteSubFormData(data as SubFormDeleteDataRelayDetail);
           break;
       }
     });
@@ -133,117 +202,131 @@
   // Relay listeners
   // ***************
 
-  function onAlterData(detail: ExternalAlterDataRelayDetail) {
-    const state = _state.form[detail.id];
-    if (!Array.isArray(state)) {
-      return;
-    }
 
-    switch (detail.operation) {
-      case "edit": {
-        // @ts-ignore
-        _state.form[detail.id][detail.index] = detail.data || {};
-        break;
-      }
-      case "remove": {
-        const temp = [...state];
-        temp.splice(detail.index, 1);
-        _state.form[detail.id].data = [...temp];
-        break;
-      }
-    }
+  function onReceiveState(data: FormDispatchStateRelayDetail) {
+    _state = { ..._state, ...data };
+    setChildrenState();
+  }
 
-    dispatchStateChange("continue", detail.id);
-    saveState(_state);
+  function onFormBind(detail: FormBindRelayDetail) {
+    _childForms[detail.id] = detail.el;
+
+    // bind all the child forms
+    performOnce(_childFormStateTimeoutId, dispatchChildFormState, 100)
   }
 
+  /**
+   * Handles appending new data to array-type form data
+   * @param detail Contains the id of the array and the new data to append
+   */
   function onAppendData(detail: ExternalAppendDataRelayDetail) {
-    const { id, data } = detail;
-    // @ts-ignore
-    const temp = [...(_state.form[id] || [])];
-    temp.push(data)
-    _state.form[id].data = [...temp];
-
-    dispatchStateChange("continue", id);
-    saveState(_state);
-  }
+    // const { id, data } = detail;
+    // // @ts-expect-error ignore
+    // const temp = [...(_state.form[id] || [])];
+    // temp.push(data);
+    // _state.form[id].data = [...temp];
 
-  function onFormSummaryBind(detail: FormSummaryBindRelayDetail) {
-    _formSummary = detail.el;
-    syncFormSummaryState();
+    // dispatchStateChange("continue", id);
   }
 
-  function onFieldsetMountFormItem(detail: FieldsetMountFormRelayDetail) {
-    const { name, el, id } = detail;
-    const old = _formFields[id] || {};
-    _formFields[id] = { ...old, [name]: el };
+  /**
+   * Handles binding of the form-summary component to enable state synchronization
+   * @param detail Contains the form summary element to bind
+   */
+  function onFormSummaryBind(detail: FormSummaryBindRelayDetail) {
+    // save the form-summary element reference for relaying messages
+    _formSummaryEl = detail.el;
 
-    // TODO: store the element's form-item index here as well
+    // sync any initial state
+    syncFormSummaryState();
   }
 
-  // listen for child fieldsets
+  /**
+   * Handles mounting of form items within fieldsets
+   * @param detail Contains the name, element, and id of the form item
+   */
+  // function onFieldsetMountFormItem(detail: FieldsetMountFormRelayDetail) {
+  //   const { name, el, id } = detail;
+  //   const old = _formFields[id] || {};
+  //   _formFields[id] = { ...old, [name]: el };
+  //
+  //   // TODO: store the element's form-item index here as well
+  // }
+
+  /**
+   * Create collection of fieldsets and relay messages to them to make the current item visible
+   * @param detail Contains the child fieldset to bind
+   */
   function onFieldsetBind(detail: FieldsetBindRelayDetail) {
-    _fieldsets[detail.id] = detail;
+    // save the fieldsets to allow for later sending of messages
+    _fieldsets = { ..._fieldsets, [detail.id]: detail };
 
-    // send the back url to child fieldsets
+    // save the initial state of the fieldset (data prop not set)
+    _state.form[detail.id] = { ..._state.form[detail.id], skipSummary: detail.skipSummary,  heading: detail.heading };
+
+    // send the back url to child fieldsets, however only the first will need it
     if (backUrl) {
       relay<FormBackUrlDetail>(detail.el, FormBackUrlMsg, { url: backUrl });
     }
 
-    // run the final binding code block below once
-    if (_formItemBindingTimeoutId) {
-      clearTimeout(_formItemBindingTimeoutId);
-    }
-
-    // show the appropriate fieldset
-    _formItemBindingTimeoutId = setTimeout(() => {
-      // if _lastFieldset is set that means previous history is present, so it is shown
-      if (_lastFieldset) {
+    // run on the last fieldset
+    _formItemBindingTimeoutId = performOnce(_formItemBindingTimeoutId, () => {
+      if (_lastViewedFieldset) {
         // last page has priority
-        const item = _fieldsets[_lastFieldset];
+        const item = _fieldsets[_lastViewedFieldset];
         sendToggleActiveStateMsg(item.id);
       } else {
         // mark the first fieldset as active
         const [id] = Object.entries(_fieldsets)[0];
         _state.history.push(id);
-        saveState(_state);
         sendToggleActiveStateMsg(id);
       }
-    }, 100);
+    });
   }
 
-  // listen to `_change` events by input elements nested within fieldsets and update the state
+  /**
+   * Listens to `_change` events by input elements nested within fieldsets and update the state
+   * @param detail Contains the id, state, and dispatch type of the changed fieldset
+   */
   function onFieldsetChange(detail: FieldsetChangeRelayDetail) {
     const { id, state, dispatchOn } = detail;
 
     // clean empty values from the data
+    // TODO: add comment about why this is needed
     for (const [name, fieldsetState] of Object.entries(state.data)) {
       if (fieldsetState.value === "") {
         delete state.data[name];
       }
     }
 
-    _state.form[id] = state;
+    // TODO: subform needs to dispatch this event...
+    _state.form[id] = { heading: state.heading, data: { type: "details", fieldsets: state.data } };
     _state.lastModified = new Date();
 
-    if (dispatchOn === "change") {
-      dispatchStateChange("change", id);
-    }
-
-    saveState(_state);
+    // if (true || dispatchOn === "change") {
+    dispatchStateChange(dispatchOn, id);
+    // }
   }
 
-  // Listening for the event dispatched from the app's form page within the on:continue handler
+  /**
+   * Handles continue events from fieldsets to navigate between pages
+   * @param detail Contains the next page to navigate to
+   */
   function onContinue(detail: ExternalContinueRelayDetail) {
     const { next } = detail;
+    const lastPage = _state.history[_state.history.length - 1];
+    if (!lastPage) {
+      console.error("Form:onContinue", name, "no last page");
+      return;
+    }
 
-    // dispatch state to app to allow dynamic binding, along with the page where a state change occured
-    dispatchStateChange("continue", _state.history[_state.history.length - 1]);
+    console.debug("2. Form:onContinue", name, { _state });
+    // dispatch state to app to allow dynamic binding, along with the page where a state change occurred
+    dispatchStateChange("continue", lastPage);
 
-    // if no page is currently being editted just go to the next page
+    // if no page is currently being edited just go to the next page
     if (_state.editting) {
-
-      // clear the errors of the current page being editted
+      // clear the errors of the current page being edited
       resetFieldsetErrors(_state.editting);
 
       // when editting a previous value, we need to determine if the `next` page is in the same
@@ -256,8 +339,7 @@
       // has altered their path and the history must be clear from this point forward
       const jumpToSummary = _state.history[oldNextIndex] === next;
       if (jumpToSummary) {
-        const last = _state.history[_state.history.length - 1];
-        sendToggleActiveStateMsg(last);
+        sendToggleActiveStateMsg(lastPage);
       } else {
         _state.history = [..._state.history.slice(0, oldNextIndex), next];
         sendToggleActiveStateMsg(next);
@@ -266,114 +348,177 @@
         _state.editting = "";
       }
     } else {
+      // clear most recent fieldset's errors, to prevent previously fixed errors from still being seen
+      resetFieldsetErrors(lastPage);
 
-      // clear most recent fieldset's errors
-      const page = _state.history[_state.history.length - 1];
-      resetFieldsetErrors(page);
-    
       // prevent duplicates in history
-      if (_state.history[_state.history.length - 1] !== next) {
+      if (lastPage !== next) {
         _state.history.push(next);
       }
+
+      // show the next page and hide the others
       sendToggleActiveStateMsg(next);
     }
 
+    // sync the new state
     syncFormSummaryState();
-
-    // save history updates
-    saveState(_state);
   }
 
-  function dispatchStateChange(dispatchType: "change" | "continue", fieldSetId: string) {
-    dispatch(_formEl, "_stateChange", {..._state, currentFieldset: { id: fieldSetId, dispatchType } }, { bubbles: true, timeout: 100 });
+  /**
+   * Dispatches state change events to the app to trigger any dynamic binding
+   * @param dispatchType Indicates the type of state change (change | continue)
+   * @param fieldSetId The id of the fieldset where the state change occurred
+   */
+  function dispatchStateChange(
+    dispatchType: "change" | "continue",
+    fieldSetId: string,
+  ) {
+    dispatch<StateChangeRelayDetail>(
+      _rootEl,
+      StateChangeEvent, { type: "details", data: _state },
+      { bubbles: true, timeout: 100 },
+    );
   }
 
+  /**
+   * Synchronizes the form summary state with the app to ensure consistent display of form data
+   */
   function syncFormSummaryState() {
-    relay<FormDispatchStateRelayDetail>(_formSummary, FormDispatchStateMsg, _state);
+    relay<FormDispatchStateRelayDetail>(
+      _formSummaryEl,
+      FormDispatchStateMsg,
+      _state,
+    );
   }
 
+  /**
+   * Handles setting the page to edit mode and updating the state accordingly
+   * @param detail Contains the id of the page to set as the current editing page
+   */
   function onSetPage(detail: FormSummaryEditPageRelayDetail) {
     // editting mode is an ephemeral value and is *not* saved to local storage
-    _state.editting = detail.id; 
+    _state.editting = detail.id;
 
     sendToggleActiveStateMsg(detail.id);
     sendEdittingStateMsg();
   }
 
-  // notify fieldsets of editting state to allow it to not show the `back` link
+  /**
+   * Notifies fieldsets of editting state to allow them to not show the `back` link
+   */
   function sendEdittingStateMsg() {
     for (const fieldset of Object.values(_fieldsets)) {
-      relay<FormDispatchStateRelayDetail>(fieldset.el, FormDispatchStateMsg, _state);
+      relay<FormDispatchEditRelayDetail>(
+        fieldset.el,
+        FormDispatchEditMsg,
+        { id: _state.editting }
+      );
     }
   }
 
+  /**
+   * Handles marking the form as complete and dispatching the final state to the app
+   */
   function onFormComplete() {
     _state.status = "complete";
-    saveState(_state);
 
-    const cleanedState = _state.history.reduce<Record<string, FieldsetData>>((acc, fieldsetId) => {
-      acc[fieldsetId] = _state.form[fieldsetId]
-      return acc;
-    }, {})
-    dispatch(_formEl, "_complete", { form: cleanedState }, { bubbles: true });
+    // NOTE: don't do this now -- Initially it was thought that at this point we would submit the
+    // cleaned data and the backend would move this data into it's own table structure, but since
+    // the data may to have notes added by an admin on the backend, the data does not need to be
+    // cleaned until a later time.
+    // removes any data collected that doesn't correspond with the final history path
+    // const cleanedState = _state.history.reduce<Record<string, FieldsetData>>((acc, fieldsetId) => {
+    //   acc[fieldsetId] = _state.form[fieldsetId]
+    //   return acc;
+    // }, {})
+
+    dispatch<FormState>(_rootEl, "_complete", _state, { bubbles: true });
+  }
+
+  function resetState() {
+    const [id] = Object.entries(_fieldsets)[0];
+
+    _state = {
+      uuid: crypto.randomUUID(),
+      form: {},
+      history: [id],
+      editting: "",
+      lastModified: undefined,
+      status: "not-started",
+    };
+
+    // resetting html inputs within form components
+    for (const { el } of Object.values(_fieldsets)) {
+      relay(el, FormResetFormMsg);
+    }
+    // reset form summary
+    syncFormSummaryState();
+
+    // reset the active fieldset
+    sendToggleActiveStateMsg(id);
   }
 
   // *********
   // Functions
   // *********
 
-  function resetFieldsetErrors(name: string) {
-    relay(_fieldsets[name].el, FormResetErrorsMsg, null);
+  /**
+   * Resets the errors for a specific fieldset
+   * @param fieldsetName The id of the fieldset to reset errors for
+   */
+  function resetFieldsetErrors(fieldsetName: string) {
+    relay(_fieldsets[fieldsetName].el, FormResetErrorsMsg, null);
   }
 
+  /**
+   * Sends a toggle active state message to fieldsets to highlight the current active page
+   * @param page The id of the page to set as active
+   */
   function sendToggleActiveStateMsg(page: string) {
     const keys = Object.keys(_fieldsets);
     keys.forEach((key) => {
-      relay<FormToggleActiveRelayDetail>(_fieldsets[key].el, FormToggleActiveMsg, {
-        first: false, //key === _firstElement,
-        active: key === page,
-      });
+      relay<FormToggleActiveRelayDetail>(
+        _fieldsets[key].el,
+        FormToggleActiveMsg,
+        {
+          first: false, //key === _firstElement,
+          active: key === page,
+        },
+      );
     });
   }
 
-  // listen to url changes or location back
+  /**
+   * Listens to url changes or location back events to update the form state and active page
+   */
   function addWindowPopStateListener() {
+    // event should only be created on top level form, not subforms
+    if (subForm) {
+      return;
+    }
+
+    // TODO: ensure this listener is removed when another form becomes active
     window.addEventListener("popstate", (e: PopStateEvent) => {
       const history = [..._state.history];
       history.pop();
       _state.history = history;
-      saveState(_state);
+
       sendToggleActiveStateMsg(history[history.length - 1]);
       e.stopPropagation();
     });
   }
 
-  function getStorage(): Storage | null {
-    if (storage === "none") return null;
-    return storage === "local" ? localStorage : sessionStorage;
-  }
-
-  function saveState(state: FormState) {
-    const storage = getStorage();
-    storage?.setItem(name, JSON.stringify(state));
-  }
-
-  // Restore state from local/session storage
-  function restoreState() {
-    const state = getStorage()?.getItem(name);
-    if (state) {
-      initState(state);
-    }
-  }
-
-  // initialize the state from the passed in data
+  /**
+   * Initializes the form state from the passed in data
+   * @param detail The data to initialize the form state with
+   */
   function initState(detail: ExternalInitStateDetail) {
     if (!detail) {
       return;
     }
 
     if (typeof detail === "string") {
-      _state = JSON.parse(detail) as FormState;
+      _state = JSON.parse(detail);
     } else {
       _state = detail;
     }
@@ -381,58 +526,46 @@
     // initialize history with first page if history is empty
     let historyPageCount = _state.history.length;
     if (historyPageCount > 0) {
-      _lastFieldset = _state.history[historyPageCount - 1];
+      _lastViewedFieldset = _state.history[historyPageCount - 1];
+    }
+
+    // show the fieldset
+    dispatchStateChange("continue", _lastViewedFieldset);
+  }
+
+  /**
+   * Dispatches the state to the child forms
+   */
+  function dispatchChildFormState() {
+    for (const [id, el] of Object.entries(_childForms)) {
+     const data = _state.form[id]?.data;
+      // data is only sent to child forms and all child forms are lists
+      if (data?.type === "list") {
+        relay<FormDispatchStateRelayDetailList>(el, FormDispatchStateMsg, data.items);
+      }
     }
-      
-    dispatchStateChange("continue", _lastFieldset);
   }
 
-  function bindChildren() {
-    // restore state in fieldsets
+  /**
+   * Restores the fieldset and subform states
+   */
+  function setChildrenState() {
     for (const [name, detail] of Object.entries(_fieldsets)) {
       const value = _state.form[name]?.data;
-      if (value)
+      if (value) {
         relay<FormSetFieldsetRelayDetail>(detail.el, FormSetFieldsetMsg, {
           name,
           value,
         });
-    }
-
-    // restore state in form items
-    for (const id of Object.keys(_formFields)) {
-      for (const [name, el] of Object.entries(_formFields[id])) {
-        const fieldset = _state.form[id];
-        if (Array.isArray(fieldset?.data)) {
-          // TODO: restore the state when multiple items exist
-          console.log("Array is multiple values!!", fieldset);
-        } else {
-          const value = fieldset?.data?.[name]?.value;
-          if (value) {
-            relay<FormSetValueRelayDetail>(el, FormSetValueMsg, {
-              name,
-              value,
-            });
-          }
-        }
       }
     }
   }
-
-  function resetState() {
-    const storage = getStorage();
-    if (!storage) return;
-
-    storage.removeItem(name);
-    _state = {
-      form: {},
-      history: [_fieldsets[0]?.id],
-      editting: "",
-      lastModified: undefined,
-      status: "not-started",
-    };
-  }
 </script>
 
-<form bind:this={_formEl} style={calculateMargin(mt, mr, mb, ml)}>
-  <slot />
+<form bind:this={_rootEl} style={calculateMargin(mt, mr, mb, ml)}
+      data-id={`form: ${name}`}
+>
+  <div bind:this={_childReceiverEl}>
+    <slot />
+  </div>
 </form>
diff --git a/libs/web-components/src/components/form/FormSummary.svelte b/libs/web-components/src/components/form/FormSummary.svelte
index 5a8b99c41..e8881eec5 100644
--- a/libs/web-components/src/components/form/FormSummary.svelte
+++ b/libs/web-components/src/components/form/FormSummary.svelte
@@ -3,6 +3,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import {
+  FieldsetItemState,
     FormDispatchStateMsg,
     FormDispatchStateRelayDetail,
     FormState,
@@ -18,7 +19,7 @@
 
   let _rootEl: HTMLElement;
   let _state: FormState;
-  
+
   onMount(() => {
     addRelayListener();
 
@@ -40,8 +41,12 @@
     });
   }
 
+  /**
+   * Receive state updates from the form
+   * @param detail
+   */
   function onFormDispatch(detail: FormDispatchStateRelayDetail) {
-    _state = detail
+    _state = detail;
   }
 
   function changePage(e: Event, pageId: string) {
@@ -50,15 +55,42 @@
   }
 
   function getHeading(page: string): string {
-    return _state.form[page].heading || "";
+    return _state.form?.[page]?.heading || "";
+  }
+
+  function getData(state: FormState, page: string): Record<string, FieldsetItemState> {
+    if (state.form[page]?.data?.type !== "details") {
+      return;
+    }
+
+    const data = Object
+        .entries(state.form[page].data.fieldsets || {})
+        .sort((itemsA, itemsB) => itemsA[1].order > itemsB[1].order ? 1 : -1)
+        .reduce((acc, [name, fieldsetState]) => {
+          acc[name] = fieldsetState;
+          return acc;
+        }, {});
+      return data;
   }
 
-  function getData(page: string) {
-    return Object
-      .entries(_state.form?.[page].data)
-      .sort((itemsA, itemsB) => itemsA[1].order > itemsB[1].order ? 1 : -1)
+  function getDataList(state: FormState, page: string): Record<string, FieldsetItemState>[] {
+    const pageData = state.form[page]?.data;
+    if (pageData?.type !== "list") {
+      return;
+    }
+
+    const data = pageData.items.reduce((acc, formState) => {
+      const data = formState.history.reduce((acc, fieldsetId) => {
+        acc = {...acc, ...getData(formState, fieldsetId)};
+        return acc;
+      }, {})
+      acc.push(data);
+      return acc;
+    }, []);
+
+    return data;
   }
-  
+
 </script>
 
 <div bind:this={_rootEl}>
@@ -67,26 +99,45 @@
   {/if}
   {#if _state}
     {#each _state.history as page}
-      {#if _state.form[page]}
+      {#if _state.form[page] && !_state.form[page]?.skipSummary}
         <goa-container>
-
           <div class="summary" class:summary-with-header={!!getHeading(page)}>
             {#if getHeading(page)}
               <goa-text class="heading" color="secondary">{getHeading(page)}</goa-text>
             {/if}
-            <table class="data">
-              {#each getData(page) as [_key, data]}
-                <tr>
-                  <td class="label">{data.label}</td>
-                  <td class="value">{data.value}</td>
-                </tr>
-              {/each}
-            </table>
+
+            <div class="data">
+              {#if _state.form[page]?.data?.type}
+                {#if _state.form[page]?.data?.type === "details"}
+                  <table>
+                    {#each Object.entries(getData(_state, page)) as [_, data]}
+                      <tr>
+                        <td class="label">{data.label}</td>
+                        <td class="value">{data.value}</td>
+                      </tr>
+                    {/each}
+                  </table>
+                {:else}
+                  {#each getDataList(_state, page) as item, index}
+                    <table>
+                      {#each Object.entries(item) as [_, data]}
+                        <tr>
+                          <td class="label">{data.label}</td>
+                          <td class="value">{data.value}</td>
+                        </tr>
+                      {/each}
+                    </table>
+                    {#if index < getDataList(_state, page).length - 1}
+                      <goa-divider mt="m" mb="m" />
+                    {/if}
+                  {/each}
+                {/if}
+              {/if}
+            </div>
             <div class="action">
               <goa-link leadingicon="pencil" on:click={(e) => changePage(e, page)}>Change</goa-link>
             </div>
           </div>
-        
         </goa-container>
       {/if}
     {/each}
@@ -101,11 +152,11 @@
       display: block;
       grid-template-rows: min-content auto;
       grid-template-columns: auto;
-      grid-template-areas: 
+      grid-template-areas:
         "top top top"
     }
 
-    .data tr:last-of-type {      
+    .data tr:last-of-type {
       padding-bottom: var(--goa-space-m);
     }
     .data td:first-of-type {
@@ -125,15 +176,17 @@
       display: grid;
       grid-auto-rows: 1fr;
       grid-template-columns: 1fr min-content;
-      grid-template-areas: 
+      grid-template-areas:
         "data action"
     }
 
     .summary-with-header {
       display: grid;
-      grid-auto-rows: min-content auto;
+      /*grid-auto-rows: min-content auto;*/
+      grid-auto-rows: auto;
+      /*grid-auto-rows: minmax(100px, auto);*/
       grid-template-columns: 1fr min-content;
-      grid-template-areas: 
+      grid-template-areas:
         "heading action"
         "data ."
     }
@@ -151,7 +204,11 @@
     .data {
       grid-area: data;
     }
-  
+
+    table {
+      width: 100%;
+    }
+
     .label {
       width: 50%;
       font: var(--goa-typography-heading-s);
diff --git a/libs/web-components/src/components/form/SubForm.svelte b/libs/web-components/src/components/form/SubForm.svelte
new file mode 100644
index 000000000..310aaeeab
--- /dev/null
+++ b/libs/web-components/src/components/form/SubForm.svelte
@@ -0,0 +1,379 @@
+<svelte:options customElement={{
+  tag: "goa-subform",
+  props: {
+    continueMsg: { attribute: "continue-msg", type: "String" }
+  }
+}}
+/>
+
+<script lang="ts">
+  import { onMount, tick } from "svelte";
+  import { dispatch, receive, relay, style, styles } from "../../common/utils";
+  import {
+    ExternalAlterDataMsg,
+    ExternalAlterDataRelayDetail,
+    ExternalContinueMsg,
+    ExternalInitStateMsg,
+    FieldsetBindMsg,
+    FieldsetBindRelayDetail,
+    FormBindMsg,
+    FormBindRelayDetail,
+    FormDispatchStateMsg, FormDispatchStateRelayDetail,
+    FormDispatchStateRelayDetailList,
+    FormResetFormMsg,
+    FormSetFieldsetMsg,
+    FormState,
+    FormToggleActiveMsg,
+    FormToggleActiveRelayDetail, StateChangeEvent, StateChangeRelayDetail, SubFormBindMsg, SubFormBindRelayDetail,
+    SubFormIndexContinueToParentMsg,
+    SubFormIndexContinueToSubFormMsg,
+  } from "../../types/relay-types";
+  import { calculateMargin, Spacing } from "../../common/styling";
+
+  // Subform props
+  export let id: string = "";
+  export let heading: string = "";
+
+  // Form props
+  export let name: string;
+  export let backUrl: string = "";
+  export let dispatchOn: "continue" | "complete" = "continue";
+  export let mt: Spacing = null;
+  export let mr: Spacing = null;
+  export let mb: Spacing = null;
+  export let ml: Spacing = null;
+
+  let _formEl: HTMLElement;
+
+  // Receives the events from the goa-public-form element
+  let _receiverEl: HTMLElement;
+
+  // Allows the subform to dispatch off messages to parent form without intercepting it's own messages
+  let _relayEl: HTMLElement;
+
+  // Allows the subform to be hidden/shown, much like a fieldset
+  let _active: boolean = false;
+
+  // List of all the looped items
+  let _state: FormState[] = [];
+
+  // reference to child fieldsets to allow data to be relayed to them when the subform item index is changed
+  let _fieldsets: Record<string, HTMLElement> = {};
+
+  // Whether the SubForm is showing the index list or the child form component
+  let _mode: "form" | "index" = "index";
+
+  onMount(() => {
+    addRelayListener();
+    dispatchBindMsg();
+    bindWithParentForm();
+    bindWithSubformIndex();
+  });
+
+  /**
+   * Handler internal form component's _init handler
+   * @param e
+   */
+  function onInit(e: Event) {
+    e.stopPropagation();
+
+    // reference to child form element to allow for later messages to be sent
+    _formEl = (e as CustomEvent).detail.el as HTMLElement;
+
+    // redispatch event, but with a subform reference instead
+    dispatch(_relayEl, "_init", { el: _receiverEl }, { bubbles: true });
+  }
+
+  // FIXME: why does the subformindex not just send a bind message, then this sends a
+  // message back?
+  function bindWithSubformIndex() {
+    setTimeout(() => {
+      const el = document
+        .querySelector("goa-subform-index")
+        .shadowRoot
+        .querySelector("[data-bind]") as HTMLElement;
+      relay<SubFormBindRelayDetail>(el, SubFormBindMsg, { el: _receiverEl});
+    }, 10)
+  }
+
+  function addRelayListener() {
+    receive(_receiverEl, (action, data, e) => {
+      e.stopPropagation();
+      switch (action) {
+        // handle data being sent to this component
+        case FormDispatchStateMsg:
+          onDispatchState(data as FormDispatchStateRelayDetailList);
+          break;
+
+        // sets the fieldset/subform data
+        case FormSetFieldsetMsg:
+          onSetFieldset(data as FormState[]);
+          break;
+        case FormToggleActiveMsg:
+          onToggleActiveState(data as FormToggleActiveRelayDetail);
+          break;
+        case FieldsetBindMsg:
+          onFieldsetMount(data as FieldsetBindRelayDetail);
+          break;
+
+        case SubFormIndexContinueToSubFormMsg:
+          onSubFormIndexContinueToSubForm();
+          break;
+
+        case SubFormIndexContinueToParentMsg:
+          onSubFormIndexContinueToParent();
+          break;
+
+        // Form event interceptions
+        case "_init":
+          interceptFormInit(data as { el: HTMLElement });
+          break;
+
+        case ExternalInitStateMsg:
+          initState(data as FormState[]);
+          break;
+
+        // pass directly down to the form
+        case ExternalContinueMsg:
+          console.log("1. subform passing continue down to form", _formEl);
+          relay(_formEl, ExternalContinueMsg, data);
+          break;
+
+        // bind the list item to the child form
+        case ExternalAlterDataMsg:
+          alterItem(data as ExternalAlterDataRelayDetail);
+          break;
+      }
+    });
+  }
+
+  function alterItem(detail: ExternalAlterDataRelayDetail) {
+    switch (detail.operation) {
+      case "remove":
+        removeItem(detail.index);
+        break;
+      case "edit":
+        editItem(detail.index);
+        break;
+    }
+  }
+
+  function editItem(index: number) {
+    _mode = "form";
+
+    // send selected item to child form
+    relay<FormDispatchStateRelayDetail>(_formEl, FormDispatchStateMsg, _state[index]);
+  }
+
+  function removeItem(index: number) {
+    _state = [..._state.slice(0, index), ..._state.slice(index + 1)];
+    dispatch<StateChangeRelayDetail>(_relayEl, StateChangeEvent, {
+      type: "list",
+      data: _state,
+      id
+    }, { bubbles: true });
+  }
+
+  function initState(data: FormState[]) {
+    _state = data;
+  }
+
+  //
+  function interceptFormInit(detail: { el: HTMLElement }) {
+    alert("intercepting init");
+    // save a reference to the child form
+    _formEl = detail.el;
+
+    // redispatch event, but with a subform reference instead
+    dispatch(_relayEl, "_init", { el: _receiverEl }, { bubbles: true });
+  }
+
+  function onSubFormIndexContinueToSubForm() {
+    _mode = "form";
+  }
+
+  function onSubFormIndexContinueToParent() {
+    _mode = "index";
+    dispatch(_relayEl, "_continue", { el: _receiverEl }, { bubbles: true });
+  }
+
+  // Handled event when data is dispatched down from the parent
+  function onDispatchState(data: FormDispatchStateRelayDetailList) {
+    if (!Array.isArray(data)) {
+      return;
+    }
+
+    _state = data;
+
+    // dispatch up to the form-utils to ensure it's state is in sync
+    dispatch(_relayEl, "_stateChange", { data: _state, id }, { bubbles: true });
+  }
+
+  // Collect list of child form item (input, dropdown, etc) elements
+  function onFieldsetMount(detail: FieldsetBindRelayDetail) {
+    const { id, el } = detail;
+    if (!id) return;
+
+    _fieldsets[id] = el;
+  }
+
+  // Parent form sends data to the child fieldsets/subforms
+  function onSetFieldset(detail: FormState[]) {
+    for (const [id, item] of Object.entries(detail)) {
+      _state[id] = { ...item };
+    }
+  }
+
+  // TODO: use this function when the user clicks an edit/delete link
+  // there would be a helper method to properly dispatch the message
+  // function setValues(index: number) {
+  //   // restore state in form items
+  //   for (const [name, data] of Object.entries(_state)) {
+  //     if (data.value) {
+  //       relay<FieldsetSetValueRelayDetail>(_fieldsets[name], FieldsetSetValueMsg, {
+  //         name,
+  //         value: data.value,
+  //       });
+  //     }
+  //   }
+  // }
+
+  /**
+   * Binds the subform to the parent form to allow state to be relayed back to subforms
+   */
+  // TODO: come up with a better name for this function
+  function bindWithParentForm() {
+    relay<FormBindRelayDetail>(_relayEl, FormBindMsg, { id, el: _receiverEl }, { bubbles: true, timeout: 10 });
+  }
+
+
+  /**
+   * Bind as a "fieldset" like component to allow parent to control the visibility of this subform
+   */
+  function dispatchBindMsg() {
+    // relay reference to the goa-public-form element as if it were a fieldset to allow it's visibility to be controlled
+    relay<FieldsetBindRelayDetail>(
+      _relayEl,
+      FieldsetBindMsg,
+      { id, heading, el: _receiverEl },
+      { bubbles: true, timeout: 10 },
+    );
+  }
+
+  /**
+   * Toggles the subform's active state
+   * @param detail
+   */
+  function onToggleActiveState(detail: FormToggleActiveRelayDetail) {
+    _active = detail.active;
+  }
+
+
+  /**
+   * Handles the state change event triggered by a child form and updates the internal state accordingly.
+   * This method processes the event, checks if the incoming detail is compatible,
+   * updates the internal `_state` array, and dispatches a new event with the updated state array.
+   *
+   * @param {Event} e - The event object triggered by a child form's state change.
+   * @return {void} No value is returned from this function; it handles state updates and event dispatching internally.
+   */
+  function onChildFormStateChange(e: Event) {
+    const detail = (e as CustomEvent).detail as StateChangeRelayDetail;
+    if (detail.type === "list") {
+      console.warn("SubForm: onChildFormStateChange: list not supported");
+      return;
+    }
+
+    // FIXME: these ids don't align...
+    const editStateIndex = _state.findIndex((s) => s.uuid === detail.data.uuid);
+
+    // Required to prevent the detail from being changed after being added to the array
+    const deepCopiedData = JSON.parse(JSON.stringify(detail.data));
+
+    if (editStateIndex >= 0) {
+      _state[editStateIndex] = deepCopiedData;
+    } else {
+      _state.push(deepCopiedData);
+    }
+
+    // stop original event to prevent just the single subform data from being sent, and
+    // send the array of data instead
+    dispatch<StateChangeRelayDetail>(_relayEl, StateChangeEvent, {
+      type: "list",
+      data: _state,
+      id
+    }, { bubbles: true });
+
+    // initial event will be overridden with a custom _stateChange event containing a state array
+    e.stopPropagation();
+  }
+
+  /**
+   * Handles the completion of a child form's lifecycle. Updates or adds the child form state
+   * into the parent state, changes the mode to "index," and sends a reset message to the form.
+   *
+   * @param {Event} e - The event object triggered when the child form completes. It must contain a
+   *                    `detail` field with the child form state as a `FormState` object.
+   *
+   * @return {void} - This method does not return a value.
+   */
+  function onChildFormComplete(e: Event) {
+    // const childFormState = (e as CustomEvent).detail as FormState;
+
+    // determine if the child state is being added or replacing existing data
+    // const index = _state.findIndex(s => s.uuid === childFormState.uuid);
+    // const deepCopiedData = JSON.parse(JSON.stringify(childFormState));
+    // if (index >= 0) {
+    //   _state[index] = deepCopiedData;
+    // } else {
+    //   _state.push(deepCopiedData);
+    // }
+
+    // change back to list mode
+    _mode = "index";
+
+    // send message to form to reset it's state
+    relay(_formEl, FormResetFormMsg);
+
+    e.stopPropagation();
+  }
+
+  function onFormContinue(e: Event) {
+    e.stopPropagation();
+  }
+</script>
+
+<div
+  bind:this={_relayEl}
+  data-id="subform"
+>
+  <section
+    style={
+      style("display", `${_active && _mode === "index" ? "block" : "none"}`)
+    }
+  >
+    <slot name="subform-index" />
+  </section>
+  <goa-public-form
+    data-id="subform-form"
+    sub-form
+    bind:this={_receiverEl}
+    on:_stateChange={onChildFormStateChange}
+    on:_continue={onFormContinue}
+    on:_complete={onChildFormComplete}
+    on:_init={onInit}
+    style={styles(
+      calculateMargin(mt, mr, mb, ml),
+      `display: ${_active && _mode === "form" ? "block" : "none"}`,
+    )}
+    {name}
+    {dispatchOn}
+    {backUrl}
+    {mt}
+    {mr}
+    {mb}
+    {ml}
+  >
+    <slot />
+  </goa-public-form>
+</div>
diff --git a/libs/web-components/src/components/form/SubFormIndex.svelte b/libs/web-components/src/components/form/SubFormIndex.svelte
new file mode 100644
index 000000000..0fc989023
--- /dev/null
+++ b/libs/web-components/src/components/form/SubFormIndex.svelte
@@ -0,0 +1,63 @@
+<svelte:options customElement={{
+  tag: "goa-subform-index",
+  props: {
+    actionButtonText: { type: "String", attribute: "action-button-text" },
+    continueButtonText: { type: "String", attribute: "continue-button-text" },
+    continueButtonVisibility: { type: "String", attribute: "continue-button-visibility" },
+  }
+}} />
+
+<script lang="ts">
+  import { receive, relay } from "../../common/utils";
+  import {
+    SubFormBindMsg, SubFormBindRelayDetail,
+    SubFormIndexContinueToParentMsg,
+    SubFormIndexContinueToSubFormMsg,
+  } from "../../types/relay-types";
+  import { onMount } from "svelte";
+
+  export let actionButtonText: string;
+  export let continueButtonText: string;
+  export let continueButtonVisibility: "visible" | "hidden" = "hidden";
+
+  let _el: HTMLElement;
+  let _subformEl: HTMLElement;
+
+  onMount(() => {
+    receiveMsgs();
+  })
+
+  function receiveMsgs() {
+    // For some reason the way that the SubFormIndex exists within the Subform doesn't allow
+    // the SubFormIndex from bubbling up messages to the SubForm, but instead can only be
+    // received by the subform's parent Form element. So the only way to get around this
+    // was to get the parent Subform to send a bind message here.
+    receive(_el, (action, data, e) => {
+      switch (action) {
+        case SubFormBindMsg:
+          _subformEl = (data as SubFormBindRelayDetail).el;
+          break;
+      }
+    });
+  }
+
+  function continueToParent(e: Event) {
+    e.stopPropagation();
+    relay(_subformEl, SubFormIndexContinueToParentMsg, null, { bubbles: true });
+  }
+
+  function continueToSubform(e: Event) {
+    e.stopPropagation();
+    relay(_subformEl, SubFormIndexContinueToSubFormMsg, null, { bubbles: true });
+  }
+</script>
+
+<div data-bind bind:this={_el}>
+  <slot />
+  <goa-block direction="column" gap="3xl">
+    <goa-button type="secondary" on:_click={continueToSubform}>{actionButtonText}</goa-button>
+    {#if continueButtonVisibility === "visible"}
+      <goa-button type="primary" on:_click={continueToParent}>{continueButtonText}</goa-button>
+    {/if}
+  </goa-block>
+</div>
diff --git a/libs/web-components/src/components/input/Input.spec.ts b/libs/web-components/src/components/input/Input.spec.ts
index 024db9059..91062ba58 100644
--- a/libs/web-components/src/components/input/Input.spec.ts
+++ b/libs/web-components/src/components/input/Input.spec.ts
@@ -352,9 +352,7 @@ describe("GoAInput Component", () => {
         type: "text",
         suffix: "per item",
       });
-      expect(container.querySelector(".suffix")?.innerHTML).toContain(
-        "per item",
-      );
+      expect(container.querySelector(".suffix")?.innerHTML).toContain("per item");
       await waitFor(() => {
         expect(console.warn["mock"].calls.length).toBeGreaterThan(0);
       });
@@ -393,9 +391,7 @@ describe("GoAInput Component", () => {
       const el = render(GoAInputWrapper, { leadingContent: content });
       expect(el.container.innerHTML).toContain(content);
 
-      const leadingContent = el.container.querySelector(
-        "[slot=leadingContent]",
-      );
+      const leadingContent = el.container.querySelector("[slot=leadingContent]");
       expect(leadingContent).toBeTruthy();
       expect(leadingContent?.innerHTML).toContain(content);
     });
@@ -403,9 +399,7 @@ describe("GoAInput Component", () => {
     it("should have a slot for the trailing content", async () => {
       const content = "items";
       const el = render(GoAInputWrapper, { trailingContent: content });
-      const trailingContent = el.container.querySelector(
-        "[slot=trailingContent]",
-      );
+      const trailingContent = el.container.querySelector("[slot=trailingContent]");
 
       expect(el.container.innerHTML).toContain(content);
       expect(trailingContent?.innerHTML).toContain(content);
diff --git a/libs/web-components/src/components/input/Input.svelte b/libs/web-components/src/components/input/Input.svelte
index 838ed877f..fcdd8353b 100644
--- a/libs/web-components/src/components/input/Input.svelte
+++ b/libs/web-components/src/components/input/Input.svelte
@@ -23,8 +23,8 @@
     FieldsetSetErrorMsg,
     FormFieldMountMsg,
     FormFieldMountRelayDetail,
-    FormSetValueMsg,
-    FormSetValueRelayDetail,
+    FieldsetSetValueMsg,
+    FieldsetSetValueRelayDetail,
   } from "../../types/relay-types";
 
   // Validators
@@ -147,8 +147,8 @@
   function addRelayListener() {
     receive(_inputEl, (action, data) => {
       switch (action) {
-        case FormSetValueMsg:
-          setValue(data as FormSetValueRelayDetail);
+        case FieldsetSetValueMsg:
+          setValue(data as FieldsetSetValueRelayDetail);
           break;
         case FieldsetSetErrorMsg:
           setError(data as FieldsetErrorRelayDetail);
@@ -167,12 +167,15 @@
     error = detail.error ? "true" : "false";
   }
 
-  function setValue(detail: FormSetValueRelayDetail) {
+  function setValue(detail: FieldsetSetValueRelayDetail) {
     // @ts-expect-error
     value = detail.value;
-    dispatch(_inputEl, "_change", { name, value }, { bubbles: true });
+
+    // dispatch the change event to the form-item element to ensure the state is in sync
+    // dispatch(_inputEl, "_change", { name, value }, { bubbles: true });
   }
 
+  // Relay message up the chain to allow any parent element to have a reference to the input element
   function sendMountedMessage() {
     relay<FormFieldMountRelayDetail>(
       _rootEl,
@@ -237,7 +240,6 @@
   }
 
   function doClick() {
-    // @ts-ignore
     this.dispatchEvent(
       new CustomEvent("_trailingIconClick", { composed: true }),
     );
diff --git a/libs/web-components/src/components/link/Link.svelte b/libs/web-components/src/components/link/Link.svelte
index bc30f2099..4829e038d 100644
--- a/libs/web-components/src/components/link/Link.svelte
+++ b/libs/web-components/src/components/link/Link.svelte
@@ -14,8 +14,8 @@
 
 </script>
 
-<div 
-  class={`link`}
+<div
+  class="link"
   style={styles(
     calculateMargin(mt, mr, mb, ml),
   )}
@@ -38,7 +38,7 @@
   }
 
   .link:hover {
-    text-decoration: underline;  
+    text-decoration: underline;
   }
 
   :global(::slotted(a)) {
diff --git a/libs/web-components/src/components/radio-group/RadioGroup.svelte b/libs/web-components/src/components/radio-group/RadioGroup.svelte
index 26f591816..e2ec97d6c 100644
--- a/libs/web-components/src/components/radio-group/RadioGroup.svelte
+++ b/libs/web-components/src/components/radio-group/RadioGroup.svelte
@@ -16,8 +16,8 @@
     RadioItemSelectProps,
   } from "../radio-item/RadioItem.svelte";
   import {
-    FormSetValueMsg,
-    FormSetValueRelayDetail,
+    FieldsetSetValueMsg,
+    FieldsetSetValueRelayDetail,
     FieldsetSetErrorMsg,
     FieldsetResetErrorsMsg,
     FormFieldMountRelayDetail,
@@ -97,8 +97,8 @@
   function addRelayListener() {
     receive(_rootEl, (action, data) => {
       switch (action) {
-        case FormSetValueMsg:
-          onSetValue(data as FormSetValueRelayDetail);
+        case FieldsetSetValueMsg:
+          onSetValue(data as FieldsetSetValueRelayDetail);
           break;
         case FieldsetSetErrorMsg:
           setError(data as FieldsetErrorRelayDetail);
@@ -114,7 +114,7 @@
     error = detail.error ? "true" : "false";
   }
 
-  function onSetValue(detail: FormSetValueRelayDetail) {
+  function onSetValue(detail: FieldsetSetValueRelayDetail) {
     // @ts-expect-error
     value = detail.value;
     dispatch(_rootEl, "_change", { name, value }, { bubbles: true });
diff --git a/libs/web-components/src/components/radio-item/RadioItem.spec.ts b/libs/web-components/src/components/radio-item/RadioItem.spec.ts
index 6602b1984..970de60e4 100644
--- a/libs/web-components/src/components/radio-item/RadioItem.spec.ts
+++ b/libs/web-components/src/components/radio-item/RadioItem.spec.ts
@@ -34,8 +34,11 @@ describe("RadioItem", () => {
       radioDescriptionDiv?.getAttribute("id"),
     );
 
-    const radioContainerDiv = result.container.querySelector("[data-testid=root]");
-    expect(radioContainerDiv?.getAttribute("style")).toContain("max-width: 480px;");
+    const radioContainerDiv =
+      result.container.querySelector("[data-testid=root]");
+    expect(radioContainerDiv?.getAttribute("style")).toContain(
+      "max-width: 480px;",
+    );
   });
 
   it("should render the radio item with slot description", async () => {
@@ -44,9 +47,9 @@ describe("RadioItem", () => {
       value: "foobar",
     });
     await waitFor(() => {
-      expect(result.container.querySelector("[slot=description]")?.innerHTML).toContain(
-        "Radio Item 1 description",
-      );
+      expect(
+        result.container.querySelector("[slot=description]")?.innerHTML,
+      ).toContain("Radio Item 1 description");
     });
   });
 
@@ -75,10 +78,18 @@ describe("RadioItem", () => {
 
     const radio = baseElement.container.querySelector("[data-testid=root]");
     expect(radio).toBeTruthy();
-    expect(radio?.getAttribute("style")).toContain("margin-top:var(--goa-space-s)");
-    expect(radio?.getAttribute("style")).toContain("margin-right:var(--goa-space-m)");
-    expect(radio?.getAttribute("style")).toContain("margin-bottom:var(--goa-space-l)");
-    expect(radio?.getAttribute("style")).toContain("margin-left:var(--goa-space-xl)");
+    expect(radio?.getAttribute("style")).toContain(
+      "margin-top:var(--goa-space-s)",
+    );
+    expect(radio?.getAttribute("style")).toContain(
+      "margin-right:var(--goa-space-m)",
+    );
+    expect(radio?.getAttribute("style")).toContain(
+      "margin-bottom:var(--goa-space-l)",
+    );
+    expect(radio?.getAttribute("style")).toContain(
+      "margin-left:var(--goa-space-xl)",
+    );
   });
 
   it("should handle the change event and emit _click event", async () => {
diff --git a/libs/web-components/src/components/table/Table.svelte b/libs/web-components/src/components/table/Table.svelte
index fdf6a2533..879a8517d 100644
--- a/libs/web-components/src/components/table/Table.svelte
+++ b/libs/web-components/src/components/table/Table.svelte
@@ -77,7 +77,6 @@
         // relay state to all children
         headings.forEach((child) => {
           if (child.getAttribute("name") === sortBy) {
-            // @ts-expect-error
             const direction = child["direction"] as GoATableSortDirection;
             // starting direction is asc
             const newDirection = direction === "asc" ? "desc" : "asc";
@@ -96,7 +95,6 @@
 
       // dispatch the default sort params if initially set
       const initialSortBy = heading.getAttribute("name");
-      // @ts-ignore
       const initialDirection = heading["direction"] as GoATableSortDirection;
       if (initialSortBy && initialDirection && initialDirection !== "none") {
         setTimeout(() => {
diff --git a/libs/web-components/src/components/text-area/TextArea.svelte b/libs/web-components/src/components/text-area/TextArea.svelte
index c75f850a1..aa2da45b2 100644
--- a/libs/web-components/src/components/text-area/TextArea.svelte
+++ b/libs/web-components/src/components/text-area/TextArea.svelte
@@ -15,7 +15,15 @@
     type Spacing,
   } from "../../common/styling";
   import { onMount } from "svelte";
-  import { FieldsetErrorRelayDetail, FieldsetResetErrorsMsg, FieldsetSetErrorMsg, FormFieldMountMsg, FormFieldMountRelayDetail, FormSetValueMsg, FormSetValueRelayDetail } from "../../types/relay-types";
+  import {
+    FieldsetErrorRelayDetail,
+    FieldsetResetErrorsMsg,
+    FieldsetSetErrorMsg,
+    FormFieldMountMsg,
+    FormFieldMountRelayDetail,
+    FieldsetSetValueMsg,
+    FieldsetSetValueRelayDetail,
+  } from "../../types/relay-types";
 
   export let name: string;
   export let value: string = "";
@@ -79,8 +87,8 @@
   function addRelayListener() {
     receive(_textareaEl, (action, data) => {
       switch (action) {
-        case FormSetValueMsg:
-          onSetValue(data as FormSetValueRelayDetail);
+        case FieldsetSetValueMsg:
+          onSetValue(data as FieldsetSetValueRelayDetail);
           break;
         case FieldsetSetErrorMsg:
           setError(data as FieldsetErrorRelayDetail);
@@ -96,7 +104,7 @@
     error = detail.error ? "true" : "false";
   }
 
-  function onSetValue(detail: FormSetValueRelayDetail) {
+  function onSetValue(detail: FieldsetSetValueRelayDetail) {
     // @ts-expect-error
     value = detail.value;
     dispatch(_textareaEl, "_change", { name, value }, { bubbles: true });
diff --git a/libs/web-components/src/index.ts b/libs/web-components/src/index.ts
index 4f357fe69..715fe5575 100644
--- a/libs/web-components/src/index.ts
+++ b/libs/web-components/src/index.ts
@@ -33,6 +33,9 @@ export { default as FooterMetaSection } from "./components/footer-meta-section/F
 export { default as FooterNavSection } from "./components/footer-nav-section/FooterNavSection.svelte";
 export { default as Fieldset } from "./components/form/Fieldset.svelte";
 export { default as Form } from "./components/form/Form.svelte";
+export { default as FormSummary } from "./components/form/FormSummary.svelte";
+export { default as SubForm } from "./components/form/SubForm.svelte";
+export { default as SubFormIndex } from "./components/form/SubFormIndex.svelte";
 export { default as Task } from "./components/form/Task.svelte";
 export { default as TaskList } from "./components/form/TaskList.svelte";
 export { default as FormItem } from "./components/form-item/FormItem.svelte";
diff --git a/libs/web-components/src/types/relay-types.ts b/libs/web-components/src/types/relay-types.ts
index fcd0e5de1..576f73484 100644
--- a/libs/web-components/src/types/relay-types.ts
+++ b/libs/web-components/src/types/relay-types.ts
@@ -1,36 +1,63 @@
 export type FormStatus = "not-started" | "incomplete" | "complete";
 
-// FIXME: Can the existing AppState be used in place of this
 export type FormState = {
-  form: Record<string, FieldsetData>;
+  uuid: string;
+  // TODO: rename form to "data" or "detail"
+  form: Record<string, Fieldset>;
   history: string[];
   editting: string;
   lastModified?: Date;
   status: FormStatus;
 };
 
-export type FieldsetData = {
-  heading: string;
-  data: Record<string, FieldsetItemState> | Record<string, FieldsetItemState>[];
+export type Fieldset = {
+  heading?: string;
+  skipSummary?: boolean;
+  data?: FieldsetData;
 };
 
+export type FieldsetData =
+  | { type: "details"; fieldsets: Record<string, FieldsetItemState> }
+  | { type: "list"; items: FormState[] }; // TODO: rename `items` to `form`
+
+// ===========
+// StateChange
+// ===========
+
+export const StateChangeEvent = "_stateChange";
+export type StateChangeRelayDetail =
+  | {
+      type: "details";
+      data: FormState;
+    }
+  | {
+      id: string;
+      type: "list";
+      data: FormState[];
+    };
+
 // ====
 // Form
 // ====
 
 export const FormResetErrorsMsg = "form::reset:errors";
 export const FormSetFieldsetMsg = "form::set:fieldset";
-export const FormSetValueMsg = "form::set:value";
 export const FormDispatchStateMsg = "form::dispatch:state";
 export const FormToggleActiveMsg = "form::toggle:active";
 export const FormStateChangeMsg = "form::state:change";
-export const FormBindMsg = "form::bind";
 export const FormBackUrlMsg = "form::back-url";
 
+export const FormResetFormMsg = "form::reset:form";
+
+// Message to allow forms to register themselves with their parent form to allow for
+// form data to be passed down to the child form
+export const FormBindMsg = "form::bind";
 export type FormBindRelayDetail = {
+  id: string;
   el: HTMLElement;
 };
-export type FormStateChangeRelayDetail = FieldsetData;
+
+export type FormStateChangeRelayDetail = Fieldset;
 
 export type FormToggleActiveRelayDetail = {
   first: boolean;
@@ -39,20 +66,40 @@ export type FormToggleActiveRelayDetail = {
 
 export type FormSetFieldsetRelayDetail = {
   name: string;
-  value: Record<string, FieldsetItemState> | Record<string, FieldsetItemState>[];
-};
-
-export type FormSetValueRelayDetail = {
-  name: string;
-  value: string | number | Date;
+  value: FieldsetData;
 };
 
 export type FormDispatchStateRelayDetail = FormState;
+export type FormDispatchStateRelayDetailList = FormState[];
+
+export const FormDispatchEditMsg = "form::edit";
+export type FormDispatchEditRelayDetail = { id: string };
 
 export type FormBackUrlDetail = {
   url: string;
 };
 
+// ======
+// Subform
+// ======
+
+export type SubFormDeleteDataRelayDetail = {
+  data: FormState[];
+  id: string;
+};
+export const SubFormDeleteDataMsg = "subform::delete:data";
+
+export const SubFormBindMsg = "subform::bind";
+export type SubFormBindRelayDetail = {
+  el: HTMLElement;
+};
+// ============
+// SubformIndex
+// ============
+export const SubFormIndexContinueToParentMsg = "subform::indexContinueToParent";
+export const SubFormIndexContinueToSubFormMsg =
+  "subform::indexContinueToSubForm";
+
 // ========
 // Fieldset
 // ========
@@ -61,7 +108,7 @@ export const FieldsetToggleActiveMsg = "fieldset::toggle-active";
 export const FieldsetResetErrorsMsg = "fieldset::reset:errors";
 export const FieldsetResetFieldsMsg = "fieldset::reset:fields";
 export const FieldsetBindMsg = "fieldset::bind";
-export const FieldsetSubmitMsg = "fieldset::submit";
+export const FieldsetCompleteMsg = "fieldset::submit";
 export const FieldsetSetErrorMsg = "fieldset::set:error";
 // Sent after fieldset handles _change events from goa input-like components
 export const FieldsetChangeMsg = "fieldset::change";
@@ -70,6 +117,7 @@ export const FieldsetMountFormItemMsg = "fieldset::bind:form-item";
 
 export type FieldsetBindRelayDetail = {
   id: string;
+  skipSummary?: boolean;
   heading: string;
   el: HTMLElement;
 };
@@ -103,6 +151,14 @@ export type FieldsetItemState = {
 export type FieldsetValidationRelayDetail = {
   el: HTMLElement;
   state: Record<string, FieldsetItemState>;
+  first: boolean;
+  last: boolean;
+};
+
+export const FieldsetSetValueMsg = "fieldset::set:value";
+export type FieldsetSetValueRelayDetail = {
+  name: string;
+  value: string | number | Date;
 };
 
 // ========
@@ -125,7 +181,6 @@ export const ExternalSetErrorMsg = "external::set:error";
 export const ExternalContinueMsg = "external::continue";
 export const ExternalAppendDataMsg = "external::append:state";
 export const ExternalAlterDataMsg = "external::alter:state";
-export const ExternalResetStateMsg = "external::reset:state";
 export const ExternalInitStateMsg = "external::init:state";
 
 export type ExternalAlterDataRelayDetail =
@@ -138,7 +193,6 @@ export type ExternalAlterDataRelayDetail =
       id: string;
       operation: "edit";
       index: number;
-      data: FieldsetData;
     };
 
 export type ExternalContinueRelayDetail = {
diff --git a/package-lock.json b/package-lock.json
index 436e8850c..9b9d68d5e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,9 +29,9 @@
         "zone.js": "0.14.3"
       },
       "devDependencies": {
-        "@abgov/design-tokens": "^1.4.2",
-        "@abgov/nx-release": "8.0.0",
-        "@angular-devkit/build-angular": "18.2.8",
+        "@abgov/design-tokens": "^1.4.3",
+        "@abgov/nx-release": "^8.1.4",
+        "@angular-devkit/build-angular": "18.2.2",
         "@angular-devkit/core": "18.1.4",
         "@angular-devkit/schematics": "18.1.4",
         "@angular-eslint/eslint-plugin": "18.0.1",
diff --git a/package.json b/package.json
index 5269d80de..b0f512cc2 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "build": "nx affected --base=alpha -t build --exclude=angular --exclude=react --exclude=web",
     "build:vscode-doc": "node libs/web-components/custom-element-manifest-analyze.js",
     "pretest": "npx nx run common:build",
-    "test": "vitest --run && nx test angular-components && nx test react-components",
+    "test": "vitest && nx test angular-components && nx test react-components",
     "test:web-components": "vitest -w",
     "test:angular": "nx test angular-components --watch",
     "test:react": "nx test react-components --watch",
@@ -25,9 +25,9 @@
   },
   "private": true,
   "devDependencies": {
-    "@abgov/design-tokens": "^1.4.2",
-    "@abgov/nx-release": "8.0.0",
-    "@angular-devkit/build-angular": "18.2.8",
+    "@abgov/design-tokens": "^1.4.3",
+    "@abgov/nx-release": "^8.1.4",
+    "@angular-devkit/build-angular": "18.2.2",
     "@angular-devkit/core": "18.1.4",
     "@angular-devkit/schematics": "18.1.4",
     "@angular-eslint/eslint-plugin": "18.0.1",