diff --git a/.changeset/olive-months-admire.md b/.changeset/olive-months-admire.md
new file mode 100644
index 00000000..82bf5f90
--- /dev/null
+++ b/.changeset/olive-months-admire.md
@@ -0,0 +1,6 @@
+---
+'storybook-pages': minor
+'@smile/haring-react': minor
+---
+
+Renamed components into Zone, DynamicZone, and the example page into FormDynamicZone, added example page with animations using AutoAnimate
diff --git a/package-lock.json b/package-lock.json
index de8c08c9..2981c0f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3453,6 +3453,11 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz",
       "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA=="
     },
+    "node_modules/@formkit/auto-animate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-0.8.2.tgz",
+      "integrity": "sha512-SwPWfeRa5veb1hOIBMdzI+73te5puUBHmqqaF1Bu7FjvxlYSz/kJcZKSa9Cg60zL0uRNeJL2SbRxV6Jp6Q1nFQ=="
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -36084,6 +36089,7 @@
       "version": "0.15.0",
       "license": "LGPL-3.0",
       "dependencies": {
+        "@formkit/auto-animate": "^0.8.2",
         "@hookform/error-message": "^2.0.1",
         "@mantine/carousel": "^7.11.0",
         "@mantine/charts": "^7.11.0",
diff --git a/packages/haring-react/src/Components/DynamicZone/DynamicZone.mock.tsx b/packages/haring-react/src/Components/DynamicZone/DynamicZone.mock.tsx
new file mode 100644
index 00000000..2690b082
--- /dev/null
+++ b/packages/haring-react/src/Components/DynamicZone/DynamicZone.mock.tsx
@@ -0,0 +1,133 @@
+import type {
+  IBaseBlock,
+  IBaseBlockFull,
+  IDynamicZoneBlock,
+} from '../../types';
+import type { ReactElement } from 'react';
+
+import { Group } from '@mantine/core';
+import { Cube, Leaf } from '@phosphor-icons/react';
+
+export interface IExampleBlock extends IBaseBlock {
+  value?: string;
+}
+
+export const dynamicZoneBlocksMock: IBaseBlockFull<IExampleBlock>[] = [
+  {
+    blockHeader: (
+      <>
+        <Cube key="1" />
+        <span key="2">Example A</span>
+      </>
+    ),
+    blockType: 'exampleA',
+    id: '0',
+    opened: true,
+    value: 'existing value',
+  },
+  {
+    blockHeader: (
+      <>
+        <Cube key="1" />
+        <span key="2">Example A</span>
+      </>
+    ),
+    blockType: 'exampleA',
+    id: '1',
+    opened: false,
+  },
+  {
+    blockHeader: (
+      <>
+        <Leaf key="1" />
+        <span key="2">Example B</span>
+      </>
+    ),
+    blockType: 'exampleB',
+    id: '2',
+    opened: true,
+    value: 'selectB',
+  },
+];
+
+export const dynamicZoneAvailableBlocksMock: IDynamicZoneBlock<IExampleBlock>[] =
+  [
+    {
+      block: {
+        blockType: 'exampleA',
+        opened: true,
+        value: '',
+      },
+      blockButtonOptions: {
+        blockType: 'exampleA',
+        label: 'Example A',
+        leftSection: <Cube />,
+      },
+      blockCardOptions: {
+        blockHeader: (
+          <>
+            <Cube key="1" />
+            <span key="2">Example A</span>
+          </>
+        ),
+      },
+      renderFunc: (b: IExampleBlock, i: number): ReactElement => {
+        return (
+          <Group>
+            <input
+              key={b.id + 1}
+              defaultValue={b.value}
+              id={`example.${i}.input1`}
+              placeholder="nested field 1"
+              required
+            />
+            <input
+              key={b.id + 2}
+              id={`example.${i}.input2`}
+              placeholder="nested field 2"
+              required
+            />
+          </Group>
+        );
+      },
+    },
+    {
+      block: {
+        blockType: 'exampleB',
+        opened: true,
+        value: '',
+      },
+      blockButtonOptions: {
+        blockType: 'exampleB',
+        label: 'Example B',
+        leftSection: <Leaf />,
+        maxInstances: 1,
+        tooltipLabel: (b) => (b.disabled ? 'Cannot add more than 1' : ''),
+        variant: 'outline',
+      },
+      blockCardOptions: {
+        blockHeader: (
+          <>
+            <Leaf key="1" />
+            <span key="2">Example B</span>
+          </>
+        ),
+      },
+      renderFunc: (b: IExampleBlock, i: number): ReactElement => {
+        return (
+          <select
+            key={b.id}
+            defaultValue={b.value}
+            id={`example.${i}`}
+            required
+          >
+            <option disabled value="">
+              -- Please choose an option --
+            </option>
+            <option value="selectA">Value A</option>
+            <option value="selectB">Value B</option>
+          </select>
+        );
+      },
+    },
+  ];
diff --git a/packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.stories.tsx b/packages/haring-react/src/Components/DynamicZone/DynamicZone.stories.tsx
similarity index 69%
rename from packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.stories.tsx
rename to packages/haring-react/src/Components/DynamicZone/DynamicZone.stories.tsx
index a42a5e5e..c6b00748 100644
--- a/packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.stories.tsx
+++ b/packages/haring-react/src/Components/DynamicZone/DynamicZone.stories.tsx
@@ -1,24 +1,27 @@
-import type { IExampleBlock } from './FormDynamicZone.mock';
+import type { IExampleBlock } from './DynamicZone.mock';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { action } from '@storybook/addon-actions';
 
-import { FormDynamicZone as Cmp } from './FormDynamicZone';
-import { availableBlocksMock, blocksMock } from './FormDynamicZone.mock';
+import { DynamicZone as Cmp } from './DynamicZone';
+import {
+  dynamicZoneAvailableBlocksMock,
+  dynamicZoneBlocksMock,
+} from './DynamicZone.mock';
 
 const meta = {
   component: Cmp<IExampleBlock>,
   tags: ['autodocs'],
-  title: '3-custom/Form/FormDynamicZone',
+  title: '3-custom/Components/DynamicZone',
 } satisfies Meta<typeof Cmp<IExampleBlock>>;
 
 export default meta;
 type IStory = StoryObj<typeof meta>;
 
-export const FormDynamicZone: IStory = {
+export const DynamicZone: IStory = {
   args: {
-    availableBlocks: availableBlocksMock,
-    blocksArray: blocksMock,
+    availableBlocks: dynamicZoneAvailableBlocksMock,
+    blocksArray: dynamicZoneBlocksMock,
     onAppendUpdate: action('append'),
     onRemoveUpdate: action('remove'),
     onSwapUpdate: action('swap'),
@@ -28,8 +31,8 @@ export const FormDynamicZone: IStory = {
 
 export const CustomInternalProps: IStory = {
   args: {
-    availableBlocks: availableBlocksMock,
-    blocksArray: blocksMock,
+    availableBlocks: dynamicZoneAvailableBlocksMock,
+    blocksArray: dynamicZoneBlocksMock,
     internalDynamicZoneProps: {
       internalBlockComponentProps: {
         headerActionListProps: {
diff --git a/packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.test.tsx b/packages/haring-react/src/Components/DynamicZone/DynamicZone.test.tsx
similarity index 54%
rename from packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.test.tsx
rename to packages/haring-react/src/Components/DynamicZone/DynamicZone.test.tsx
index 475893a3..4ee76028 100644
--- a/packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.test.tsx
+++ b/packages/haring-react/src/Components/DynamicZone/DynamicZone.test.tsx
@@ -1,17 +1,20 @@
-import type { IExampleBlock } from './FormDynamicZone.mock';
+import type { IExampleBlock } from './DynamicZone.mock';
 
 import { renderWithProviders } from '@smile/haring-react-shared/test-utils';
 import { action } from '@storybook/addon-actions';
 
-import { FormDynamicZone } from './FormDynamicZone';
-import { availableBlocksMock, blocksMock } from './FormDynamicZone.mock';
+import { DynamicZone } from './DynamicZone';
+import {
+  dynamicZoneAvailableBlocksMock,
+  dynamicZoneBlocksMock,
+} from './DynamicZone.mock';
 
-describe('FormDynamicZone', () => {
+describe('DynamicZone', () => {
   it('matches snapshot', () => {
     const { container } = renderWithProviders(
-      <FormDynamicZone<IExampleBlock>
-        availableBlocks={availableBlocksMock}
-        blocksArray={blocksMock}
+      <DynamicZone<IExampleBlock>
+        availableBlocks={dynamicZoneAvailableBlocksMock}
+        blocksArray={dynamicZoneBlocksMock}
         onAppendUpdate={action('append')}
         onRemoveUpdate={action('remove')}
         onSwapUpdate={action('swap')}
diff --git a/packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.tsx b/packages/haring-react/src/Components/DynamicZone/DynamicZone.tsx
similarity index 76%
rename from packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.tsx
rename to packages/haring-react/src/Components/DynamicZone/DynamicZone.tsx
index e40d6aee..7299bf59 100644
--- a/packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.tsx
+++ b/packages/haring-react/src/Components/DynamicZone/DynamicZone.tsx
@@ -2,14 +2,14 @@ import type {
   IBaseBlock,
   IBaseBlockButtonOptions,
   IBaseBlockFull,
-  IFormDynamicZoneBlock,
+  IDynamicZoneBlock,
 } from '../../types';
-import type { IDynamicZoneInternalComponentProps } from '../DynamicZone/DynamicZone';
-import type { IBaseBlockType } from '@smile/haring-react';
+import type { IZoneInternalComponentProps } from '../Zone/Zone';
 import type {
-  IDynamicZoneBlockInternalComponentProps,
-  IDynamicZoneBlockReference,
-} from '@smile/haring-react/src/Form/DynamicZone/DynamicZoneBlock/DynamicZoneBlock';
+  IZoneBlockInternalComponentProps,
+  IZoneBlockReference,
+} from '../Zone/ZoneBlock/ZoneBlock';
+import type { IBaseBlockType } from '@smile/haring-react';
 import type { IAction } from '@smile/haring-react-shared';
 import type { ReactElement } from 'react';
 
@@ -17,27 +17,27 @@ import { ArrowDown, ArrowUp, Trash } from '@phosphor-icons/react';
 import { isNotNullNorEmpty } from '@smile/haring-react-shared';
 import { useMemo } from 'react';
 
-import { DynamicZone } from '../DynamicZone/DynamicZone';
+import { Zone } from '../Zone/Zone';
 
-interface IFormDynamicZoneActionLabels {
+interface IDynamicZoneActionLabels {
   deleteLabel: string;
   moveDownLabel: string;
   moveUpLabel: string;
 }
 
-const defaultActionLabels: IFormDynamicZoneActionLabels = {
+const defaultActionLabels: IDynamicZoneActionLabels = {
   deleteLabel: 'Delete',
   moveDownLabel: 'Move Down',
   moveUpLabel: 'Move Up',
 };
 
-export interface IFormDynamicZoneProps<Block extends IBaseBlock> {
-  actionLabels?: IFormDynamicZoneActionLabels;
-  availableBlocks: IFormDynamicZoneBlock<Block>[];
+export interface IDynamicZoneProps<Block extends IBaseBlock> {
+  actionLabels?: IDynamicZoneActionLabels;
+  availableBlocks: IDynamicZoneBlock<Block>[];
   blocksArray: Block[];
   internalDynamicZoneProps?: {
-    internalBlockComponentProps?: IDynamicZoneBlockInternalComponentProps;
-    internalComponentProps?: IDynamicZoneInternalComponentProps;
+    internalBlockComponentProps?: IZoneBlockInternalComponentProps;
+    internalComponentProps?: IZoneInternalComponentProps;
   };
   onAppendUpdate: (newBlock: Block) => void;
   onRemoveUpdate: (index: number) => void;
@@ -45,8 +45,8 @@ export interface IFormDynamicZoneProps<Block extends IBaseBlock> {
   onToggleUpdate: (index: number, opened: boolean) => void;
 }
 
-export function FormDynamicZone<Block extends IBaseBlock>(
-  props: IFormDynamicZoneProps<Block>,
+export function DynamicZone<Block extends IBaseBlock>(
+  props: IDynamicZoneProps<Block>,
 ): ReactElement {
   const {
     actionLabels = defaultActionLabels,
@@ -82,20 +82,17 @@ export function FormDynamicZone<Block extends IBaseBlock>(
     );
     if (correspondingType === undefined) {
       throw Error(
-        `Could not render a block of blockType '${block.blockType} in given IFormDynamicZoneBlock[]'`,
+        `Could not render a block of blockType '${block.blockType} in given IDynamicZoneBlock[]'`,
       );
     }
     return correspondingType.renderFunc(block, index);
   }
 
-  function onRemove(ref: IDynamicZoneBlockReference): void {
+  function onRemove(ref: IZoneBlockReference): void {
     onRemoveUpdate(ref.index);
   }
 
-  function onSwap(
-    ref: IDynamicZoneBlockReference,
-    direction: 'down' | 'up',
-  ): void {
+  function onSwap(ref: IZoneBlockReference, direction: 'down' | 'up'): void {
     const secondIndex = ref.index + (direction === 'up' ? -1 : 1);
     if (secondIndex >= 0 && secondIndex < ref.arrayLength) {
       onSwapUpdate(ref.index, secondIndex);
@@ -111,7 +108,7 @@ export function FormDynamicZone<Block extends IBaseBlock>(
   }
 
   function isMoveDisabled(
-    ref: IDynamicZoneBlockReference,
+    ref: IZoneBlockReference,
     direction: 'down' | 'up',
   ): boolean {
     return direction === 'up'
@@ -119,7 +116,7 @@ export function FormDynamicZone<Block extends IBaseBlock>(
       : ref.index === ref.arrayLength - 1;
   }
 
-  const formDynamicZoneDefaultActions: IAction<IDynamicZoneBlockReference>[] = [
+  const dynamicZoneDefaultActions: IAction<IZoneBlockReference>[] = [
     {
       componentProps: (ref) => ({ disabled: isMoveDisabled(ref, 'up') }),
       icon: <ArrowUp size={16} />,
@@ -148,7 +145,7 @@ export function FormDynamicZone<Block extends IBaseBlock>(
     );
     if (correspondingType === undefined) {
       throw Error(
-        `Could not append a block of blockType '${type} in given IFormDynamicZoneBlock[]'`,
+        `Could not append a block of blockType '${type} in given IDynamicZoneBlock[]'`,
       );
     }
     const newBlock = {
@@ -162,13 +159,13 @@ export function FormDynamicZone<Block extends IBaseBlock>(
     .filter(isNotNullNorEmpty)
     .map((b) => ({
       ...b,
-      blockActions: formDynamicZoneDefaultActions,
+      blockActions: dynamicZoneDefaultActions,
       ...availableBlocks.find((o) => o.block.blockType === b.blockType)
         ?.blockCardOptions,
     }));
 
   return (
-    <DynamicZone
+    <Zone
       blockOptions={blockOptions}
       blocks={blocksWithOptionsAndActions}
       fluid
diff --git a/packages/haring-react/src/Form/DynamicZone/__snapshots__/DynamicZone.test.tsx.snap b/packages/haring-react/src/Components/DynamicZone/__snapshots__/DynamicZone.test.tsx.snap
similarity index 88%
rename from packages/haring-react/src/Form/DynamicZone/__snapshots__/DynamicZone.test.tsx.snap
rename to packages/haring-react/src/Components/DynamicZone/__snapshots__/DynamicZone.test.tsx.snap
index 8860d6a4..169d46fa 100644
--- a/packages/haring-react/src/Form/DynamicZone/__snapshots__/DynamicZone.test.tsx.snap
+++ b/packages/haring-react/src/Components/DynamicZone/__snapshots__/DynamicZone.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`DynamicZone matches snapshot 1`] = `
   <div
     class="m_7485cace mantine-Container-root"
     data-fluid="true"
-    style="padding: 0rem;"
+    style="margin: 0rem; padding: 0rem;"
   >
     <div
       class="m_6d731127 mantine-Stack-root"
@@ -29,6 +29,7 @@ exports[`DynamicZone matches snapshot 1`] = `
         <div
           class="m_599a2148 mantine-Card-section"
           data-first-section="true"
+          data-with-border="true"
           role="button"
         >
           <div
@@ -56,7 +57,7 @@ exports[`DynamicZone matches snapshot 1`] = `
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z"
+                      d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"
                     />
                   </svg>
                 </span>
@@ -72,10 +73,12 @@ exports[`DynamicZone matches snapshot 1`] = `
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M128,16a96.11,96.11,0,0,0-96,96c0,24,12.56,55.06,33.61,83,21.18,28.15,44.5,45,62.39,45s41.21-16.81,62.39-45c21.05-28,33.61-59,33.61-83A96.11,96.11,0,0,0,128,16Zm49.61,169.42C160.24,208.49,140.31,224,128,224s-32.24-15.51-49.61-38.58C59.65,160.5,48,132.37,48,112a80,80,0,0,1,160,0C208,132.37,196.35,160.5,177.61,185.42ZM120,136A40,40,0,0,0,80,96a16,16,0,0,0-16,16,40,40,0,0,0,40,40A16,16,0,0,0,120,136ZM80,112a24,24,0,0,1,24,24h0A24,24,0,0,1,80,112Zm96-16a40,40,0,0,0-40,40,16,16,0,0,0,16,16,40,40,0,0,0,40-40A16,16,0,0,0,176,96Zm-24,40a24,24,0,0,1,24-24A24,24,0,0,1,152,136Zm0,48a8,8,0,0,1-8,8H112a8,8,0,0,1,0-16h32A8,8,0,0,1,152,184Z"
+                  d="M223.68,66.15,135.68,18h0a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32h0l80.34,44L128,120,47.66,76ZM40,90l80,43.78v85.79L40,175.82Zm96,129.57V133.82L216,90v85.78Z"
                 />
               </svg>
-              First
+              <span>
+                Example A
+              </span>
             </div>
             <div
               class="m_4081bf90 mantine-Group-root"
@@ -83,8 +86,10 @@ exports[`DynamicZone matches snapshot 1`] = `
             >
               <button
                 aria-label="Move Up"
-                class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
+                class="haring-focus m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
+                data-disabled="true"
                 data-variant="subtle"
+                disabled=""
                 style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-cyan-light-hover); --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
                 type="button"
               >
@@ -154,15 +159,30 @@ exports[`DynamicZone matches snapshot 1`] = `
           </div>
         </div>
         <div
-          aria-hidden="true"
+          aria-hidden="false"
           class=""
-          style="box-sizing: border-box; opacity: 0; transition: opacity 200ms ease; display: none; height: 0px; overflow: hidden;"
+          style="box-sizing: border-box; opacity: 1; transition: opacity 200ms ease;"
         >
           <div
             class="m_7485cace mantine-Container-root"
             data-fluid="true"
           >
-            <input />
+            <div
+              class="m_4081bf90 mantine-Group-root"
+              style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: flex-start; --group-wrap: wrap;"
+            >
+              <input
+                id="example.0.input1"
+                placeholder="nested field 1"
+                required=""
+                value="existing value"
+              />
+              <input
+                id="example.0.input2"
+                placeholder="nested field 2"
+                required=""
+              />
+            </div>
           </div>
         </div>
         <div
@@ -179,7 +199,6 @@ exports[`DynamicZone matches snapshot 1`] = `
         <div
           class="m_599a2148 mantine-Card-section"
           data-first-section="true"
-          data-with-border="true"
           role="button"
         >
           <div
@@ -207,7 +226,7 @@ exports[`DynamicZone matches snapshot 1`] = `
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"
+                      d="M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z"
                     />
                   </svg>
                 </span>
@@ -223,10 +242,12 @@ exports[`DynamicZone matches snapshot 1`] = `
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M223.45,40.07a8,8,0,0,0-7.52-7.52C139.8,28.08,78.82,51,52.82,94a87.09,87.09,0,0,0-12.76,49c.57,15.92,5.21,32,13.79,47.85l-19.51,19.5a8,8,0,0,0,11.32,11.32l19.5-19.51C81,210.73,97.09,215.37,113,215.94q1.67.06,3.33.06A86.93,86.93,0,0,0,162,203.18C205,177.18,227.93,116.21,223.45,40.07ZM153.75,189.5c-22.75,13.78-49.68,14-76.71.77l88.63-88.62a8,8,0,0,0-11.32-11.32L65.73,179c-13.19-27-13-54,.77-76.71,22.09-36.47,74.6-56.44,141.31-54.06C210.2,114.89,190.22,167.41,153.75,189.5Z"
+                  d="M223.68,66.15,135.68,18h0a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32h0l80.34,44L128,120,47.66,76ZM40,90l80,43.78v85.79L40,175.82Zm96,129.57V133.82L216,90v85.78Z"
                 />
               </svg>
-              Second
+              <span>
+                Example A
+              </span>
             </div>
             <div
               class="m_4081bf90 mantine-Group-root"
@@ -305,24 +326,37 @@ exports[`DynamicZone matches snapshot 1`] = `
           </div>
         </div>
         <div
-          aria-hidden="false"
+          aria-hidden="true"
           class=""
-          style="box-sizing: border-box; opacity: 1; transition: opacity 200ms ease;"
+          style="box-sizing: border-box; opacity: 0; transition: opacity 200ms ease; display: none; height: 0px; overflow: hidden;"
         >
           <div
             class="m_7485cace mantine-Container-root"
             data-fluid="true"
           >
-            <input />
+            <div
+              class="m_4081bf90 mantine-Group-root"
+              style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: flex-start; --group-wrap: wrap;"
+            >
+              <input
+                id="example.1.input1"
+                placeholder="nested field 1"
+                required=""
+                value=""
+              />
+              <input
+                id="example.1.input2"
+                placeholder="nested field 2"
+                required=""
+              />
+            </div>
           </div>
         </div>
         <div
           class="m_599a2148 mantine-Card-section"
           data-last-section="true"
-          data-with-border="true"
-        >
-          footer
-        </div>
+          style="padding: 0rem;"
+        />
       </div>
       <div
         class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root"
@@ -360,7 +394,7 @@ exports[`DynamicZone matches snapshot 1`] = `
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z"
+                      d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"
                     />
                   </svg>
                 </span>
@@ -376,10 +410,12 @@ exports[`DynamicZone matches snapshot 1`] = `
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M184,40H72A56.06,56.06,0,0,0,16,96v96a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V96A56.06,56.06,0,0,0,184,40Zm40,56v8H192V56.8A40.07,40.07,0,0,1,224,96Zm-88,40H120V104h16Zm-24,16h32a8,8,0,0,0,8-8V120h24v72H80V120h24v24A8,8,0,0,0,112,152Zm40-48V96a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v8H80V56h96v48ZM64,56.8V104H32V96A40.07,40.07,0,0,1,64,56.8ZM32,120H64v72H32Zm192,72H192V120h32v72Z"
+                  d="M223.45,40.07a8,8,0,0,0-7.52-7.52C139.8,28.08,78.82,51,52.82,94a87.09,87.09,0,0,0-12.76,49c.57,15.92,5.21,32,13.79,47.85l-19.51,19.5a8,8,0,0,0,11.32,11.32l19.5-19.51C81,210.73,97.09,215.37,113,215.94q1.67.06,3.33.06A86.93,86.93,0,0,0,162,203.18C205,177.18,227.93,116.21,223.45,40.07ZM153.75,189.5c-22.75,13.78-49.68,14-76.71.77l88.63-88.62a8,8,0,0,0-11.32-11.32L65.73,179c-13.19-27-13-54,.77-76.71,22.09-36.47,74.6-56.44,141.31-54.06C210.2,114.89,190.22,167.41,153.75,189.5Z"
                 />
               </svg>
-              Third
+              <span>
+                Example B
+              </span>
             </div>
             <div
               class="m_4081bf90 mantine-Group-root"
@@ -410,8 +446,10 @@ exports[`DynamicZone matches snapshot 1`] = `
               </button>
               <button
                 aria-label="Move Down"
-                class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
+                class="haring-focus m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
+                data-disabled="true"
                 data-variant="subtle"
+                disabled=""
                 style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-cyan-light-hover); --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
                 type="button"
               >
@@ -458,23 +496,43 @@ exports[`DynamicZone matches snapshot 1`] = `
           </div>
         </div>
         <div
-          aria-hidden="true"
+          aria-hidden="false"
           class=""
-          style="box-sizing: border-box; opacity: 0; transition: opacity 200ms ease; display: none; height: 0px; overflow: hidden;"
+          style="box-sizing: border-box; opacity: 1; transition: opacity 200ms ease;"
         >
           <div
             class="m_7485cace mantine-Container-root"
             data-fluid="true"
           >
-            <input />
+            <select
+              id="example.2"
+              required=""
+            >
+              <option
+                disabled=""
+                value=""
+              >
+                -- Please choose an option --
+              </option>
+              <option
+                value="selectA"
+              >
+                Value A
+              </option>
+              <option
+                selected=""
+                value="selectB"
+              >
+                Value B
+              </option>
+            </select>
           </div>
         </div>
         <div
           class="m_599a2148 mantine-Card-section"
           data-last-section="true"
-        >
-          footer
-        </div>
+          style="padding: 0rem;"
+        />
       </div>
     </div>
     <div
@@ -508,23 +566,25 @@ exports[`DynamicZone matches snapshot 1`] = `
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M128,16a96.11,96.11,0,0,0-96,96c0,24,12.56,55.06,33.61,83,21.18,28.15,44.5,45,62.39,45s41.21-16.81,62.39-45c21.05-28,33.61-59,33.61-83A96.11,96.11,0,0,0,128,16Zm49.61,169.42C160.24,208.49,140.31,224,128,224s-32.24-15.51-49.61-38.58C59.65,160.5,48,132.37,48,112a80,80,0,0,1,160,0C208,132.37,196.35,160.5,177.61,185.42ZM120,136A40,40,0,0,0,80,96a16,16,0,0,0-16,16,40,40,0,0,0,40,40A16,16,0,0,0,120,136ZM80,112a24,24,0,0,1,24,24h0A24,24,0,0,1,80,112Zm96-16a40,40,0,0,0-40,40,16,16,0,0,0,16,16,40,40,0,0,0,40-40A16,16,0,0,0,176,96Zm-24,40a24,24,0,0,1,24-24A24,24,0,0,1,152,136Zm0,48a8,8,0,0,1-8,8H112a8,8,0,0,1,0-16h32A8,8,0,0,1,152,184Z"
+                  d="M223.68,66.15,135.68,18h0a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32h0l80.34,44L128,120,47.66,76ZM40,90l80,43.78v85.79L40,175.82Zm96,129.57V133.82L216,90v85.78Z"
                 />
               </svg>
             </span>
             <span
               class="m_811560b9 mantine-Button-label"
             >
-              Default
+              Example A
             </span>
           </span>
         </button>
         <button
-          class="haring-focus haring-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
+          class="haring-focus m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
+          data-disabled="true"
           data-size="md"
-          data-variant="default"
+          data-variant="outline"
           data-with-left-section="true"
-          style="--button-height: var(--button-height-md); --button-padding-x: var(--button-padding-x-md); --button-fz: var(--mantine-font-size-md); --button-radius: var(--mantine-radius-md); --button-bg: var(--mantine-color-default); --button-hover: var(--mantine-color-default-hover); --button-color: var(--mantine-color-default-color); --button-bd: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);"
+          disabled=""
+          style="--button-height: var(--button-height-md); --button-padding-x: var(--button-padding-x-md); --button-fz: var(--mantine-font-size-md); --button-radius: var(--mantine-radius-md); --button-bg: transparent; --button-hover: var(--mantine-color-cyan-outline-hover); --button-color: var(--mantine-color-cyan-outline); --button-bd: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-cyan-outline);"
           type="button"
         >
           <span
@@ -549,41 +609,7 @@ exports[`DynamicZone matches snapshot 1`] = `
             <span
               class="m_811560b9 mantine-Button-label"
             >
-              Other
-            </span>
-          </span>
-        </button>
-        <button
-          class="haring-focus haring-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
-          data-size="md"
-          data-variant="default"
-          data-with-left-section="true"
-          style="--button-height: var(--button-height-md); --button-padding-x: var(--button-padding-x-md); --button-fz: var(--mantine-font-size-md); --button-radius: var(--mantine-radius-md); --button-bg: var(--mantine-color-default); --button-hover: var(--mantine-color-default-hover); --button-color: var(--mantine-color-default-color); --button-bd: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);"
-          type="button"
-        >
-          <span
-            class="m_80f1301b mantine-Button-inner"
-          >
-            <span
-              class="m_a74036a mantine-Button-section"
-              data-position="left"
-            >
-              <svg
-                fill="currentColor"
-                height="1em"
-                viewBox="0 0 256 256"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M184,40H72A56.06,56.06,0,0,0,16,96v96a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V96A56.06,56.06,0,0,0,184,40Zm40,56v8H192V56.8A40.07,40.07,0,0,1,224,96Zm-88,40H120V104h16Zm-24,16h32a8,8,0,0,0,8-8V120h24v72H80V120h24v24A8,8,0,0,0,112,152Zm40-48V96a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v8H80V56h96v48ZM64,56.8V104H32V96A40.07,40.07,0,0,1,64,56.8ZM32,120H64v72H32Zm192,72H192V120h32v72Z"
-                />
-              </svg>
-            </span>
-            <span
-              class="m_811560b9 mantine-Button-label"
-            >
-              Stuff
+              Example B
             </span>
           </span>
         </button>
diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZone.mock.tsx b/packages/haring-react/src/Components/Zone/Zone.mock.tsx
similarity index 59%
rename from packages/haring-react/src/Form/DynamicZone/DynamicZone.mock.tsx
rename to packages/haring-react/src/Components/Zone/Zone.mock.tsx
index 54d01eb3..b525f9ee 100644
--- a/packages/haring-react/src/Form/DynamicZone/DynamicZone.mock.tsx
+++ b/packages/haring-react/src/Components/Zone/Zone.mock.tsx
@@ -1,4 +1,4 @@
-import type { IDynamicZoneBlockReference } from './DynamicZoneBlock/DynamicZoneBlock';
+import type { IZoneBlockReference } from './ZoneBlock/ZoneBlock';
 import type { IBaseBlockButtonOptions, IBaseBlockFull } from '../../types';
 import type { IAction } from '@smile/haring-react-shared';
 
@@ -12,7 +12,7 @@ import {
 } from '@phosphor-icons/react';
 import { action } from '@storybook/addon-actions';
 
-const dynamicZoneBlockActionsMock: IAction<IDynamicZoneBlockReference>[] = [
+const zoneBlockActionsMock: IAction<IZoneBlockReference>[] = [
   {
     icon: <ArrowUp size={16} />,
     id: 'move-up',
@@ -33,9 +33,8 @@ const dynamicZoneBlockActionsMock: IAction<IDynamicZoneBlockReference>[] = [
   },
 ];
 
-export const dynamicZoneBlocks: IBaseBlockFull[] = [
+export const zoneBlocksMock: IBaseBlockFull[] = [
   {
-    blockActions: dynamicZoneBlockActionsMock,
     blockHeader: (
       <>
         <Alien />
@@ -48,7 +47,6 @@ export const dynamicZoneBlocks: IBaseBlockFull[] = [
     value: 'initial',
   },
   {
-    blockActions: dynamicZoneBlockActionsMock,
     blockFooter: 'footer',
     blockHeader: (
       <>
@@ -62,7 +60,6 @@ export const dynamicZoneBlocks: IBaseBlockFull[] = [
     value: 'initial',
   },
   {
-    blockActions: dynamicZoneBlockActionsMock,
     blockFooter: 'footer',
     blockHeader: (
       <>
@@ -77,7 +74,51 @@ export const dynamicZoneBlocks: IBaseBlockFull[] = [
   },
 ];
 
-export const dynamicZoneButtons: IBaseBlockButtonOptions[] = [
+export const withActionsMock: IBaseBlockFull[] = [
+  {
+    blockActions: zoneBlockActionsMock,
+    blockHeader: (
+      <>
+        <Alien />
+        First
+      </>
+    ),
+    blockType: 'default',
+    id: '1',
+    opened: false,
+    value: 'initial',
+  },
+  {
+    blockActions: zoneBlockActionsMock,
+    blockFooter: 'footer',
+    blockHeader: (
+      <>
+        <Leaf />
+        Second
+      </>
+    ),
+    blockType: 'default',
+    id: '2',
+    opened: true,
+    value: 'initial',
+  },
+  {
+    blockActions: zoneBlockActionsMock,
+    blockFooter: 'footer',
+    blockHeader: (
+      <>
+        <TreasureChest />
+        Third
+      </>
+    ),
+    blockType: 'default',
+    id: '3',
+    opened: false,
+    value: 'initial',
+  },
+];
+
+export const zoneButtonsMock: IBaseBlockButtonOptions[] = [
   { blockType: 'default', label: 'Default', leftSection: <Alien /> },
   { blockType: 'other', label: 'Other', leftSection: <Leaf /> },
   { blockType: 'stuff', label: 'Stuff', leftSection: <TreasureChest /> },
diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZone.module.css b/packages/haring-react/src/Components/Zone/Zone.module.css
similarity index 100%
rename from packages/haring-react/src/Form/DynamicZone/DynamicZone.module.css
rename to packages/haring-react/src/Components/Zone/Zone.module.css
diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZone.stories.tsx b/packages/haring-react/src/Components/Zone/Zone.stories.tsx
similarity index 62%
rename from packages/haring-react/src/Form/DynamicZone/DynamicZone.stories.tsx
rename to packages/haring-react/src/Components/Zone/Zone.stories.tsx
index abebb507..94021922 100644
--- a/packages/haring-react/src/Form/DynamicZone/DynamicZone.stories.tsx
+++ b/packages/haring-react/src/Components/Zone/Zone.stories.tsx
@@ -2,22 +2,33 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { action } from '@storybook/addon-actions';
 
-import { DynamicZone as Cmp } from './DynamicZone';
-import { dynamicZoneBlocks, dynamicZoneButtons } from './DynamicZone.mock';
+import { Zone as Cmp } from './Zone';
+import { withActionsMock, zoneBlocksMock, zoneButtonsMock } from './Zone.mock';
 
 const meta = {
   component: Cmp,
   tags: ['autodocs'],
-  title: '3-custom/Form/DynamicZone',
+  title: '3-custom/Components/Zone',
 } satisfies Meta<typeof Cmp>;
 
 export default meta;
 type IStory = StoryObj<typeof meta>;
 
-export const DynamicZone: IStory = {
+export const Zone: IStory = {
   args: {
-    blockOptions: dynamicZoneButtons,
-    blocks: dynamicZoneBlocks,
+    blockOptions: zoneButtonsMock,
+    blocks: zoneBlocksMock,
+    buttonsText: 'Ajouter un block',
+    onAppendBlock: action('onAppendBlock, id'),
+    onRenderBlockContent: (_b, index) => <input key={index} />,
+    onToggleBlock: action('onToggleBlock'),
+  },
+};
+
+export const ZoneWithActions: IStory = {
+  args: {
+    blockOptions: zoneButtonsMock,
+    blocks: withActionsMock,
     buttonsText: 'Ajouter un block',
     onAppendBlock: action('onAppendBlock, id'),
     onRenderBlockContent: (_b, index) => <input key={index} />,
@@ -27,8 +38,8 @@ export const DynamicZone: IStory = {
 
 export const CustomInternalProps: IStory = {
   args: {
-    blockOptions: dynamicZoneButtons,
-    blocks: dynamicZoneBlocks,
+    blockOptions: zoneButtonsMock,
+    blocks: withActionsMock,
     internalBlockComponentProps: {
       headerActionListProps: {
         actionIconDefaultProps: {
diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZone.test.tsx b/packages/haring-react/src/Components/Zone/Zone.test.tsx
similarity index 73%
rename from packages/haring-react/src/Form/DynamicZone/DynamicZone.test.tsx
rename to packages/haring-react/src/Components/Zone/Zone.test.tsx
index 56e26ef7..7fe485c6 100644
--- a/packages/haring-react/src/Form/DynamicZone/DynamicZone.test.tsx
+++ b/packages/haring-react/src/Components/Zone/Zone.test.tsx
@@ -5,19 +5,19 @@ import { renderWithProviders } from '@smile/haring-react-shared/test-utils';
 import { action } from '@storybook/addon-actions';
 import { expect } from '@storybook/jest';
 
-import { DynamicZone } from './DynamicZone';
-import { dynamicZoneBlocks, dynamicZoneButtons } from './DynamicZone.mock';
+import { Zone } from './Zone';
+import { zoneBlocksMock, zoneButtonsMock } from './Zone.mock';
 
-describe('DynamicZone', () => {
+describe('Zone', () => {
   it('matches snapshot', () => {
     const onRender = (
       _b: IBaseBlockCardOptions,
       index: number,
     ): ReactElement => <input key={index} />;
     const { container } = renderWithProviders(
-      <DynamicZone
-        blockOptions={dynamicZoneButtons}
-        blocks={dynamicZoneBlocks}
+      <Zone
+        blockOptions={zoneButtonsMock}
+        blocks={zoneBlocksMock}
         onAppendBlock={action('onAppendBlock, id')}
         onRenderBlockContent={onRender}
         onToggleBlock={action('onToggleBlock')}
diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx b/packages/haring-react/src/Components/Zone/Zone.tsx
similarity index 83%
rename from packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx
rename to packages/haring-react/src/Components/Zone/Zone.tsx
index 5845e30d..741da904 100644
--- a/packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx
+++ b/packages/haring-react/src/Components/Zone/Zone.tsx
@@ -1,4 +1,4 @@
-import type { IDynamicZoneBlockInternalComponentProps } from './DynamicZoneBlock/DynamicZoneBlock';
+import type { IZoneBlockInternalComponentProps } from './ZoneBlock/ZoneBlock';
 import type {
   IBaseBlockButtonOptions,
   IBaseBlockFull,
@@ -11,14 +11,15 @@ import type {
   StackProps,
   TextProps,
 } from '@mantine/core';
-import type { ReactElement } from 'react';
+import type { ReactElement, Ref } from 'react';
 
 import { Button, Container, Group, Stack, Text, Tooltip } from '@mantine/core';
 
-import classes from './DynamicZone.module.css';
-import { DynamicZoneBlock } from './DynamicZoneBlock/DynamicZoneBlock';
+import classes from './Zone.module.css';
+import { ZoneBlock } from './ZoneBlock/ZoneBlock';
 
-export interface IDynamicZoneInternalComponentProps {
+export interface IZoneInternalComponentProps {
+  arrayRootRef?: Ref<HTMLDivElement>;
   blockCardProps?: CardProps;
   blocksStackProps?: StackProps;
   bottomContainerProps?: ContainerProps;
@@ -26,12 +27,12 @@ export interface IDynamicZoneInternalComponentProps {
   buttonsTextProps?: TextProps;
 }
 
-export interface IDynamicZoneProps extends ContainerProps {
+export interface IZoneProps extends ContainerProps {
   blockOptions: IBaseBlockButtonOptions[];
   blocks: IBaseBlockFull[];
   buttonsText?: string;
-  internalBlockComponentProps?: IDynamicZoneBlockInternalComponentProps;
-  internalComponentProps?: IDynamicZoneInternalComponentProps;
+  internalBlockComponentProps?: IZoneBlockInternalComponentProps;
+  internalComponentProps?: IZoneInternalComponentProps;
   onAppendBlock: (blockType: IBaseBlockType) => void;
   onRenderBlockContent: (block: IBaseBlockFull, index: number) => ReactElement;
   onToggleBlock: (
@@ -41,7 +42,7 @@ export interface IDynamicZoneProps extends ContainerProps {
   ) => void;
 }
 
-export function DynamicZone(props: IDynamicZoneProps): ReactElement {
+export function Zone(props: IZoneProps): ReactElement {
   const {
     blockOptions,
     blocks,
@@ -60,9 +61,13 @@ export function DynamicZone(props: IDynamicZoneProps): ReactElement {
 
   return (
     <Container fluid p={0} {...rootContainerProps}>
-      <Stack gap="sm" {...internalComponentProps?.blocksStackProps}>
+      <Stack
+        gap="sm"
+        {...internalComponentProps?.blocksStackProps}
+        ref={internalComponentProps?.arrayRootRef}
+      >
         {blocks.map((block, index) => (
-          <DynamicZoneBlock
+          <ZoneBlock
             {...internalComponentProps?.blockCardProps}
             {...block.blockCardProps}
             key={block.id}
@@ -83,7 +88,7 @@ export function DynamicZone(props: IDynamicZoneProps): ReactElement {
             reference={{ arrayLength: blocks.length, id: block.id, index }}
           >
             {onRenderBlockContent(block, index)}
-          </DynamicZoneBlock>
+          </ZoneBlock>
         ))}
       </Stack>
       <Container
diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZoneBlock/DynamicZoneBlock.module.css b/packages/haring-react/src/Components/Zone/ZoneBlock/ZoneBlock.module.css
similarity index 100%
rename from packages/haring-react/src/Form/DynamicZone/DynamicZoneBlock/DynamicZoneBlock.module.css
rename to packages/haring-react/src/Components/Zone/ZoneBlock/ZoneBlock.module.css
diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZoneBlock/DynamicZoneBlock.tsx b/packages/haring-react/src/Components/Zone/ZoneBlock/ZoneBlock.tsx
similarity index 75%
rename from packages/haring-react/src/Form/DynamicZone/DynamicZoneBlock/DynamicZoneBlock.tsx
rename to packages/haring-react/src/Components/Zone/ZoneBlock/ZoneBlock.tsx
index 436607a3..4636d0dc 100644
--- a/packages/haring-react/src/Form/DynamicZone/DynamicZoneBlock/DynamicZoneBlock.tsx
+++ b/packages/haring-react/src/Components/Zone/ZoneBlock/ZoneBlock.tsx
@@ -1,4 +1,4 @@
-import type { IActionListProps } from '../../../Components/ActionList/ActionList';
+import type { IActionListProps } from '../../ActionList/ActionList';
 import type {
   ActionIconProps,
   CardProps,
@@ -20,47 +20,47 @@ import {
 } from '@mantine/core';
 import { CaretDown, CaretUp } from '@phosphor-icons/react';
 
-import { ActionList } from '../../../Components/ActionList/ActionList';
+import { ActionList } from '../../ActionList/ActionList';
 
-import classes from './DynamicZoneBlock.module.css';
+import classes from './ZoneBlock.module.css';
 
-export interface IDynamicZoneBlockInternalComponentProps {
+export interface IZoneBlockInternalComponentProps {
   contentCollapseProps?: CollapseProps;
   contentContainerProps?: ContainerProps;
   footerCardSectionProps?: CardSectionProps;
   headerActionListProps?: Omit<
-    IActionListProps<IDynamicZoneBlockReference>,
+    IActionListProps<IZoneBlockReference>,
     'actions' | 'isCompactStyle' | 'selectedElements'
   >;
   headerCardSectionProps?: CardSectionProps;
   headerGroupProps?: GroupProps;
-  toggleComponentProps?: IDynamicZoneBlockToggleProps;
+  toggleComponentProps?: IZoneBlockToggleProps;
 }
 
-export interface IDynamicZoneBlockToggleProps {
+export interface IZoneBlockToggleProps {
   actionIconProps?: ActionIconProps;
   downIcon?: ReactNode;
   upIcon?: ReactNode;
 }
 
-export interface IDynamicZoneBlockReference extends Record<string, unknown> {
+export interface IZoneBlockReference extends Record<string, unknown> {
   arrayLength: number;
   id: string;
   index: number;
 }
 
-export interface IDynamicZoneBlockProps extends CardProps {
-  actions?: IAction<IDynamicZoneBlockReference>[];
+export interface IZoneBlockProps extends CardProps {
+  actions?: IAction<IZoneBlockReference>[];
   children: ReactNode;
   footerChildren?: ReactNode;
   headerChildren?: ReactNode;
-  internalComponentProps?: IDynamicZoneBlockInternalComponentProps;
+  internalComponentProps?: IZoneBlockInternalComponentProps;
   onToggle: (opened: boolean) => void;
   opened: boolean;
-  reference: IDynamicZoneBlockReference;
+  reference: IZoneBlockReference;
 }
 
-export function DynamicZoneBlock(props: IDynamicZoneBlockProps): ReactElement {
+export function ZoneBlock(props: IZoneBlockProps): ReactElement {
   const {
     actions,
     children,
@@ -72,7 +72,7 @@ export function DynamicZoneBlock(props: IDynamicZoneBlockProps): ReactElement {
     reference,
     ...cardProps
   } = props;
-  const toggleProps: IDynamicZoneBlockToggleProps = {
+  const toggleProps: IZoneBlockToggleProps = {
     downIcon: <CaretDown />,
     upIcon: <CaretUp />,
     ...internalComponentProps?.toggleComponentProps,
@@ -103,7 +103,7 @@ export function DynamicZoneBlock(props: IDynamicZoneBlockProps): ReactElement {
             {headerChildren}
           </Group>
           {actions && actions.length > 0 ? (
-            <ActionList<IDynamicZoneBlockReference>
+            <ActionList<IZoneBlockReference>
               actions={actions}
               isCompactStyle
               selectedElements={reference}
diff --git a/packages/haring-react/src/Form/FormDynamicZone/__snapshots__/FormDynamicZone.test.tsx.snap b/packages/haring-react/src/Components/Zone/__snapshots__/Zone.test.tsx.snap
similarity index 62%
rename from packages/haring-react/src/Form/FormDynamicZone/__snapshots__/FormDynamicZone.test.tsx.snap
rename to packages/haring-react/src/Components/Zone/__snapshots__/Zone.test.tsx.snap
index 9a8ea739..cc77fbf4 100644
--- a/packages/haring-react/src/Form/FormDynamicZone/__snapshots__/FormDynamicZone.test.tsx.snap
+++ b/packages/haring-react/src/Components/Zone/__snapshots__/Zone.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FormDynamicZone matches snapshot 1`] = `
+exports[`Zone matches snapshot 1`] = `
 <div>
   <style
     data-mantine-styles="true"
@@ -15,7 +15,7 @@ exports[`FormDynamicZone matches snapshot 1`] = `
   <div
     class="m_7485cace mantine-Container-root"
     data-fluid="true"
-    style="margin: 0rem; padding: 0rem;"
+    style="padding: 0rem;"
   >
     <div
       class="m_6d731127 mantine-Stack-root"
@@ -29,7 +29,6 @@ exports[`FormDynamicZone matches snapshot 1`] = `
         <div
           class="m_599a2148 mantine-Card-section"
           data-first-section="true"
-          data-with-border="true"
           role="button"
         >
           <div
@@ -57,7 +56,7 @@ exports[`FormDynamicZone matches snapshot 1`] = `
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"
+                      d="M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z"
                     />
                   </svg>
                 </span>
@@ -73,116 +72,23 @@ exports[`FormDynamicZone matches snapshot 1`] = `
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M223.68,66.15,135.68,18h0a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32h0l80.34,44L128,120,47.66,76ZM40,90l80,43.78v85.79L40,175.82Zm96,129.57V133.82L216,90v85.78Z"
+                  d="M128,16a96.11,96.11,0,0,0-96,96c0,24,12.56,55.06,33.61,83,21.18,28.15,44.5,45,62.39,45s41.21-16.81,62.39-45c21.05-28,33.61-59,33.61-83A96.11,96.11,0,0,0,128,16Zm49.61,169.42C160.24,208.49,140.31,224,128,224s-32.24-15.51-49.61-38.58C59.65,160.5,48,132.37,48,112a80,80,0,0,1,160,0C208,132.37,196.35,160.5,177.61,185.42ZM120,136A40,40,0,0,0,80,96a16,16,0,0,0-16,16,40,40,0,0,0,40,40A16,16,0,0,0,120,136ZM80,112a24,24,0,0,1,24,24h0A24,24,0,0,1,80,112Zm96-16a40,40,0,0,0-40,40,16,16,0,0,0,16,16,40,40,0,0,0,40-40A16,16,0,0,0,176,96Zm-24,40a24,24,0,0,1,24-24A24,24,0,0,1,152,136Zm0,48a8,8,0,0,1-8,8H112a8,8,0,0,1,0-16h32A8,8,0,0,1,152,184Z"
                 />
               </svg>
-              <span>
-                Example A
-              </span>
-            </div>
-            <div
-              class="m_4081bf90 mantine-Group-root"
-              style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: flex-start; --group-wrap: wrap;"
-            >
-              <button
-                aria-label="Move Up"
-                class="haring-focus m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
-                data-disabled="true"
-                data-variant="subtle"
-                disabled=""
-                style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-cyan-light-hover); --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
-                type="button"
-              >
-                <span
-                  class="m_8d3afb97 mantine-ActionIcon-icon"
-                >
-                  <svg
-                    fill="currentColor"
-                    height="16"
-                    viewBox="0 0 256 256"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M205.66,117.66a8,8,0,0,1-11.32,0L136,59.31V216a8,8,0,0,1-16,0V59.31L61.66,117.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0l72,72A8,8,0,0,1,205.66,117.66Z"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <button
-                aria-label="Move Down"
-                class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
-                data-variant="subtle"
-                style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-cyan-light-hover); --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
-                type="button"
-              >
-                <span
-                  class="m_8d3afb97 mantine-ActionIcon-icon"
-                >
-                  <svg
-                    fill="currentColor"
-                    height="16"
-                    viewBox="0 0 256 256"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M205.66,149.66l-72,72a8,8,0,0,1-11.32,0l-72-72a8,8,0,0,1,11.32-11.32L120,196.69V40a8,8,0,0,1,16,0V196.69l58.34-58.35a8,8,0,0,1,11.32,11.32Z"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <button
-                aria-label="Delete"
-                class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
-                data-variant="subtle"
-                style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-cyan-light-hover); --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
-                type="button"
-              >
-                <span
-                  class="m_8d3afb97 mantine-ActionIcon-icon"
-                >
-                  <svg
-                    fill="currentColor"
-                    height="16"
-                    viewBox="0 0 256 256"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"
-                    />
-                  </svg>
-                </span>
-              </button>
+              First
             </div>
           </div>
         </div>
         <div
-          aria-hidden="false"
+          aria-hidden="true"
           class=""
-          style="box-sizing: border-box; opacity: 1; transition: opacity 200ms ease;"
+          style="box-sizing: border-box; opacity: 0; transition: opacity 200ms ease; display: none; height: 0px; overflow: hidden;"
         >
           <div
             class="m_7485cace mantine-Container-root"
             data-fluid="true"
           >
-            <div
-              class="m_4081bf90 mantine-Group-root"
-              style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: flex-start; --group-wrap: wrap;"
-            >
-              <input
-                id="example.0.input1"
-                placeholder="nested field 1"
-                required=""
-                value="existing value"
-              />
-              <input
-                id="example.0.input2"
-                placeholder="nested field 2"
-                required=""
-              />
-            </div>
+            <input />
           </div>
         </div>
         <div
@@ -199,6 +105,7 @@ exports[`FormDynamicZone matches snapshot 1`] = `
         <div
           class="m_599a2148 mantine-Card-section"
           data-first-section="true"
+          data-with-border="true"
           role="button"
         >
           <div
@@ -226,7 +133,7 @@ exports[`FormDynamicZone matches snapshot 1`] = `
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z"
+                      d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"
                     />
                   </svg>
                 </span>
@@ -242,121 +149,32 @@ exports[`FormDynamicZone matches snapshot 1`] = `
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M223.68,66.15,135.68,18h0a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32h0l80.34,44L128,120,47.66,76ZM40,90l80,43.78v85.79L40,175.82Zm96,129.57V133.82L216,90v85.78Z"
+                  d="M223.45,40.07a8,8,0,0,0-7.52-7.52C139.8,28.08,78.82,51,52.82,94a87.09,87.09,0,0,0-12.76,49c.57,15.92,5.21,32,13.79,47.85l-19.51,19.5a8,8,0,0,0,11.32,11.32l19.5-19.51C81,210.73,97.09,215.37,113,215.94q1.67.06,3.33.06A86.93,86.93,0,0,0,162,203.18C205,177.18,227.93,116.21,223.45,40.07ZM153.75,189.5c-22.75,13.78-49.68,14-76.71.77l88.63-88.62a8,8,0,0,0-11.32-11.32L65.73,179c-13.19-27-13-54,.77-76.71,22.09-36.47,74.6-56.44,141.31-54.06C210.2,114.89,190.22,167.41,153.75,189.5Z"
                 />
               </svg>
-              <span>
-                Example A
-              </span>
-            </div>
-            <div
-              class="m_4081bf90 mantine-Group-root"
-              style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: flex-start; --group-wrap: wrap;"
-            >
-              <button
-                aria-label="Move Up"
-                class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
-                data-variant="subtle"
-                style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-cyan-light-hover); --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
-                type="button"
-              >
-                <span
-                  class="m_8d3afb97 mantine-ActionIcon-icon"
-                >
-                  <svg
-                    fill="currentColor"
-                    height="16"
-                    viewBox="0 0 256 256"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M205.66,117.66a8,8,0,0,1-11.32,0L136,59.31V216a8,8,0,0,1-16,0V59.31L61.66,117.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0l72,72A8,8,0,0,1,205.66,117.66Z"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <button
-                aria-label="Move Down"
-                class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
-                data-variant="subtle"
-                style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-cyan-light-hover); --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
-                type="button"
-              >
-                <span
-                  class="m_8d3afb97 mantine-ActionIcon-icon"
-                >
-                  <svg
-                    fill="currentColor"
-                    height="16"
-                    viewBox="0 0 256 256"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M205.66,149.66l-72,72a8,8,0,0,1-11.32,0l-72-72a8,8,0,0,1,11.32-11.32L120,196.69V40a8,8,0,0,1,16,0V196.69l58.34-58.35a8,8,0,0,1,11.32,11.32Z"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <button
-                aria-label="Delete"
-                class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
-                data-variant="subtle"
-                style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-cyan-light-hover); --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
-                type="button"
-              >
-                <span
-                  class="m_8d3afb97 mantine-ActionIcon-icon"
-                >
-                  <svg
-                    fill="currentColor"
-                    height="16"
-                    viewBox="0 0 256 256"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"
-                    />
-                  </svg>
-                </span>
-              </button>
+              Second
             </div>
           </div>
         </div>
         <div
-          aria-hidden="true"
+          aria-hidden="false"
           class=""
-          style="box-sizing: border-box; opacity: 0; transition: opacity 200ms ease; display: none; height: 0px; overflow: hidden;"
+          style="box-sizing: border-box; opacity: 1; transition: opacity 200ms ease;"
         >
           <div
             class="m_7485cace mantine-Container-root"
             data-fluid="true"
           >
-            <div
-              class="m_4081bf90 mantine-Group-root"
-              style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: flex-start; --group-wrap: wrap;"
-            >
-              <input
-                id="example.1.input1"
-                placeholder="nested field 1"
-                required=""
-                value=""
-              />
-              <input
-                id="example.1.input2"
-                placeholder="nested field 2"
-                required=""
-              />
-            </div>
+            <input />
           </div>
         </div>
         <div
           class="m_599a2148 mantine-Card-section"
           data-last-section="true"
-          style="padding: 0rem;"
-        />
+          data-with-border="true"
+        >
+          footer
+        </div>
       </div>
       <div
         class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root"
@@ -394,7 +212,7 @@ exports[`FormDynamicZone matches snapshot 1`] = `
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"
+                      d="M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z"
                     />
                   </svg>
                 </span>
@@ -410,129 +228,31 @@ exports[`FormDynamicZone matches snapshot 1`] = `
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M223.45,40.07a8,8,0,0,0-7.52-7.52C139.8,28.08,78.82,51,52.82,94a87.09,87.09,0,0,0-12.76,49c.57,15.92,5.21,32,13.79,47.85l-19.51,19.5a8,8,0,0,0,11.32,11.32l19.5-19.51C81,210.73,97.09,215.37,113,215.94q1.67.06,3.33.06A86.93,86.93,0,0,0,162,203.18C205,177.18,227.93,116.21,223.45,40.07ZM153.75,189.5c-22.75,13.78-49.68,14-76.71.77l88.63-88.62a8,8,0,0,0-11.32-11.32L65.73,179c-13.19-27-13-54,.77-76.71,22.09-36.47,74.6-56.44,141.31-54.06C210.2,114.89,190.22,167.41,153.75,189.5Z"
+                  d="M184,40H72A56.06,56.06,0,0,0,16,96v96a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V96A56.06,56.06,0,0,0,184,40Zm40,56v8H192V56.8A40.07,40.07,0,0,1,224,96Zm-88,40H120V104h16Zm-24,16h32a8,8,0,0,0,8-8V120h24v72H80V120h24v24A8,8,0,0,0,112,152Zm40-48V96a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v8H80V56h96v48ZM64,56.8V104H32V96A40.07,40.07,0,0,1,64,56.8ZM32,120H64v72H32Zm192,72H192V120h32v72Z"
                 />
               </svg>
-              <span>
-                Example B
-              </span>
-            </div>
-            <div
-              class="m_4081bf90 mantine-Group-root"
-              style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: flex-start; --group-wrap: wrap;"
-            >
-              <button
-                aria-label="Move Up"
-                class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
-                data-variant="subtle"
-                style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-cyan-light-hover); --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
-                type="button"
-              >
-                <span
-                  class="m_8d3afb97 mantine-ActionIcon-icon"
-                >
-                  <svg
-                    fill="currentColor"
-                    height="16"
-                    viewBox="0 0 256 256"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M205.66,117.66a8,8,0,0,1-11.32,0L136,59.31V216a8,8,0,0,1-16,0V59.31L61.66,117.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0l72,72A8,8,0,0,1,205.66,117.66Z"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <button
-                aria-label="Move Down"
-                class="haring-focus m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
-                data-disabled="true"
-                data-variant="subtle"
-                disabled=""
-                style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-cyan-light-hover); --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
-                type="button"
-              >
-                <span
-                  class="m_8d3afb97 mantine-ActionIcon-icon"
-                >
-                  <svg
-                    fill="currentColor"
-                    height="16"
-                    viewBox="0 0 256 256"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M205.66,149.66l-72,72a8,8,0,0,1-11.32,0l-72-72a8,8,0,0,1,11.32-11.32L120,196.69V40a8,8,0,0,1,16,0V196.69l58.34-58.35a8,8,0,0,1,11.32,11.32Z"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <button
-                aria-label="Delete"
-                class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
-                data-variant="subtle"
-                style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-cyan-light-hover); --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
-                type="button"
-              >
-                <span
-                  class="m_8d3afb97 mantine-ActionIcon-icon"
-                >
-                  <svg
-                    fill="currentColor"
-                    height="16"
-                    viewBox="0 0 256 256"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"
-                    />
-                  </svg>
-                </span>
-              </button>
+              Third
             </div>
           </div>
         </div>
         <div
-          aria-hidden="false"
+          aria-hidden="true"
           class=""
-          style="box-sizing: border-box; opacity: 1; transition: opacity 200ms ease;"
+          style="box-sizing: border-box; opacity: 0; transition: opacity 200ms ease; display: none; height: 0px; overflow: hidden;"
         >
           <div
             class="m_7485cace mantine-Container-root"
             data-fluid="true"
           >
-            <select
-              id="example.2"
-              required=""
-            >
-              <option
-                disabled=""
-                value=""
-              >
-                -- Please choose an option --
-              </option>
-              <option
-                value="selectA"
-              >
-                Value A
-              </option>
-              <option
-                selected=""
-                value="selectB"
-              >
-                Value B
-              </option>
-            </select>
+            <input />
           </div>
         </div>
         <div
           class="m_599a2148 mantine-Card-section"
           data-last-section="true"
-          style="padding: 0rem;"
-        />
+        >
+          footer
+        </div>
       </div>
     </div>
     <div
@@ -566,25 +286,23 @@ exports[`FormDynamicZone matches snapshot 1`] = `
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M223.68,66.15,135.68,18h0a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32h0l80.34,44L128,120,47.66,76ZM40,90l80,43.78v85.79L40,175.82Zm96,129.57V133.82L216,90v85.78Z"
+                  d="M128,16a96.11,96.11,0,0,0-96,96c0,24,12.56,55.06,33.61,83,21.18,28.15,44.5,45,62.39,45s41.21-16.81,62.39-45c21.05-28,33.61-59,33.61-83A96.11,96.11,0,0,0,128,16Zm49.61,169.42C160.24,208.49,140.31,224,128,224s-32.24-15.51-49.61-38.58C59.65,160.5,48,132.37,48,112a80,80,0,0,1,160,0C208,132.37,196.35,160.5,177.61,185.42ZM120,136A40,40,0,0,0,80,96a16,16,0,0,0-16,16,40,40,0,0,0,40,40A16,16,0,0,0,120,136ZM80,112a24,24,0,0,1,24,24h0A24,24,0,0,1,80,112Zm96-16a40,40,0,0,0-40,40,16,16,0,0,0,16,16,40,40,0,0,0,40-40A16,16,0,0,0,176,96Zm-24,40a24,24,0,0,1,24-24A24,24,0,0,1,152,136Zm0,48a8,8,0,0,1-8,8H112a8,8,0,0,1,0-16h32A8,8,0,0,1,152,184Z"
                 />
               </svg>
             </span>
             <span
               class="m_811560b9 mantine-Button-label"
             >
-              Example A
+              Default
             </span>
           </span>
         </button>
         <button
-          class="haring-focus m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
-          data-disabled="true"
+          class="haring-focus haring-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
           data-size="md"
-          data-variant="outline"
+          data-variant="default"
           data-with-left-section="true"
-          disabled=""
-          style="--button-height: var(--button-height-md); --button-padding-x: var(--button-padding-x-md); --button-fz: var(--mantine-font-size-md); --button-radius: var(--mantine-radius-md); --button-bg: transparent; --button-hover: var(--mantine-color-cyan-outline-hover); --button-color: var(--mantine-color-cyan-outline); --button-bd: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-cyan-outline);"
+          style="--button-height: var(--button-height-md); --button-padding-x: var(--button-padding-x-md); --button-fz: var(--mantine-font-size-md); --button-radius: var(--mantine-radius-md); --button-bg: var(--mantine-color-default); --button-hover: var(--mantine-color-default-hover); --button-color: var(--mantine-color-default-color); --button-bd: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);"
           type="button"
         >
           <span
@@ -609,7 +327,41 @@ exports[`FormDynamicZone matches snapshot 1`] = `
             <span
               class="m_811560b9 mantine-Button-label"
             >
-              Example B
+              Other
+            </span>
+          </span>
+        </button>
+        <button
+          class="haring-focus haring-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
+          data-size="md"
+          data-variant="default"
+          data-with-left-section="true"
+          style="--button-height: var(--button-height-md); --button-padding-x: var(--button-padding-x-md); --button-fz: var(--mantine-font-size-md); --button-radius: var(--mantine-radius-md); --button-bg: var(--mantine-color-default); --button-hover: var(--mantine-color-default-hover); --button-color: var(--mantine-color-default-color); --button-bd: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);"
+          type="button"
+        >
+          <span
+            class="m_80f1301b mantine-Button-inner"
+          >
+            <span
+              class="m_a74036a mantine-Button-section"
+              data-position="left"
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 256 256"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M184,40H72A56.06,56.06,0,0,0,16,96v96a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V96A56.06,56.06,0,0,0,184,40Zm40,56v8H192V56.8A40.07,40.07,0,0,1,224,96Zm-88,40H120V104h16Zm-24,16h32a8,8,0,0,0,8-8V120h24v72H80V120h24v24A8,8,0,0,0,112,152Zm40-48V96a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v8H80V56h96v48ZM64,56.8V104H32V96A40.07,40.07,0,0,1,64,56.8ZM32,120H64v72H32Zm192,72H192V120h32v72Z"
+                />
+              </svg>
+            </span>
+            <span
+              class="m_811560b9 mantine-Button-label"
+            >
+              Stuff
             </span>
           </span>
         </button>
diff --git a/packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.mock.tsx b/packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.mock.tsx
deleted file mode 100644
index 1a64c392..00000000
--- a/packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.mock.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import type {
-  IBaseBlock,
-  IBaseBlockFull,
-  IFormDynamicZoneBlock,
-} from '../../types';
-import type { ReactElement } from 'react';
-
-import { Group } from '@mantine/core';
-import { Cube, Leaf } from '@phosphor-icons/react';
-
-export interface IExampleBlock extends IBaseBlock {
-  value?: string;
-}
-
-export const blocksMock: IBaseBlockFull<IExampleBlock>[] = [
-  {
-    blockHeader: (
-      <>
-        <Cube key="1" />
-        <span key="2">Example A</span>
-      </>
-    ),
-    blockType: 'exampleA',
-    id: '0',
-    opened: true,
-    value: 'existing value',
-  },
-  {
-    blockHeader: (
-      <>
-        <Cube key="1" />
-        <span key="2">Example A</span>
-      </>
-    ),
-    blockType: 'exampleA',
-    id: '1',
-    opened: false,
-  },
-  {
-    blockHeader: (
-      <>
-        <Leaf key="1" />
-        <span key="2">Example B</span>
-      </>
-    ),
-    blockType: 'exampleB',
-    id: '2',
-    opened: true,
-    value: 'selectB',
-  },
-];
-
-export const availableBlocksMock: IFormDynamicZoneBlock<IExampleBlock>[] = [
-  {
-    block: {
-      blockType: 'exampleA',
-      opened: true,
-      value: '',
-    },
-    blockButtonOptions: {
-      blockType: 'exampleA',
-      label: 'Example A',
-      leftSection: <Cube />,
-    },
-    blockCardOptions: {
-      blockHeader: (
-        <>
-          <Cube key="1" />
-          <span key="2">Example A</span>
-        </>
-      ),
-    },
-    renderFunc: (b: IExampleBlock, i: number): ReactElement => {
-      return (
-        <Group>
-          <input
-            key={b.id + 1}
-            defaultValue={b.value}
-            id={`example.${i}.input1`}
-            placeholder="nested field 1"
-            required
-          />
-          <input
-            key={b.id + 2}
-            id={`example.${i}.input2`}
-            placeholder="nested field 2"
-            required
-          />
-        </Group>
-      );
-    },
-  },
-  {
-    block: {
-      blockType: 'exampleB',
-      opened: true,
-      value: '',
-    },
-    blockButtonOptions: {
-      blockType: 'exampleB',
-      label: 'Example B',
-      leftSection: <Leaf />,
-      maxInstances: 1,
-      tooltipLabel: (b) => (b.disabled ? 'Cannot add more than 1' : ''),
-      variant: 'outline',
-    },
-    blockCardOptions: {
-      blockHeader: (
-        <>
-          <Leaf key="1" />
-          <span key="2">Example B</span>
-        </>
-      ),
-    },
-    renderFunc: (b: IExampleBlock, i: number): ReactElement => {
-      return (
-        <select key={b.id} defaultValue={b.value} id={`example.${i}`} required>
-          <option disabled value="">
-            -- Please choose an option --
-          </option>
-          <option value="selectA">Value A</option>
-          <option value="selectB">Value B</option>
-        </select>
-      );
-    },
-  },
-];
diff --git a/packages/haring-react/src/index.tsx b/packages/haring-react/src/index.tsx
index 31629b95..89509e5a 100644
--- a/packages/haring-react/src/index.tsx
+++ b/packages/haring-react/src/index.tsx
@@ -10,10 +10,10 @@ export type { IFetchAutocompleteFieldProps } from './Form/FetchAutocompleteField
 export { FetchAutocompleteField } from './Form/FetchAutocompleteField/FetchAutocompleteField';
 export type { IAddressAutocompleteFieldProps } from './Form/AddressGouvAutocompleteField/AddressGouvAutocompleteField';
 export { AddressGouvAutocompleteField } from './Form/AddressGouvAutocompleteField/AddressGouvAutocompleteField';
-export type { IDynamicZoneProps } from './Form/DynamicZone/DynamicZone';
-export { DynamicZone } from './Form/DynamicZone/DynamicZone';
-export type { IFormDynamicZoneProps } from './Form/FormDynamicZone/FormDynamicZone';
-export { FormDynamicZone } from './Form/FormDynamicZone/FormDynamicZone';
+export type { IZoneProps } from './Components/Zone/Zone';
+export { Zone } from './Components/Zone/Zone';
+export type { IDynamicZoneProps } from './Components/DynamicZone/DynamicZone';
+export { DynamicZone } from './Components/DynamicZone/DynamicZone';
 export type { IAddressFieldsProps } from './Form/AddressFields/AddressFields';
 export { AddressFields } from './Form/AddressFields/AddressFields';
 export type { IIconCardProps } from './Components/IconCard/IconCard';
@@ -137,5 +137,5 @@ export type {
   IBaseBlockFull,
   IBaseBlockButtonOptions,
   IBaseBlockType,
-  IFormDynamicZoneBlock,
+  IDynamicZoneBlock,
 } from './types';
diff --git a/packages/haring-react/src/types/dynamic-zone.ts b/packages/haring-react/src/types/dynamic-zone.ts
index 6c9dae17..34e1b8fa 100644
--- a/packages/haring-react/src/types/dynamic-zone.ts
+++ b/packages/haring-react/src/types/dynamic-zone.ts
@@ -1,4 +1,4 @@
-import type { IDynamicZoneBlockReference } from '../Form/DynamicZone/DynamicZoneBlock/DynamicZoneBlock';
+import type { IZoneBlockReference } from '../Components/Zone/ZoneBlock/ZoneBlock';
 import type { ButtonProps, CardProps, TooltipProps } from '@mantine/core';
 import type {
   IAction,
@@ -15,7 +15,7 @@ export interface IBaseBlock extends Record<string, unknown> {
 }
 
 export interface IBaseBlockCardOptions {
-  blockActions?: IAction<IDynamicZoneBlockReference>[];
+  blockActions?: IAction<IZoneBlockReference>[];
   blockCardProps?: CardProps;
   blockFooter?:
     | ReactNode
@@ -39,7 +39,7 @@ export interface IBaseBlockButtonFullOptions extends IBaseBlockButtonOptions {
   maxInstances?: number;
 }
 
-export interface IFormDynamicZoneBlock<Block extends IBaseBlock> {
+export interface IDynamicZoneBlock<Block extends IBaseBlock> {
   block: IOmitRespectIndexSignature<Block, 'id'>;
   blockButtonOptions: IBaseBlockButtonFullOptions;
   blockCardOptions: IBaseBlockCardOptions;
diff --git a/packages/storybook-pages/package.json b/packages/storybook-pages/package.json
index f48614d5..ee805734 100644
--- a/packages/storybook-pages/package.json
+++ b/packages/storybook-pages/package.json
@@ -30,6 +30,7 @@
     "embla-carousel-react": "^7.1.0",
     "react-hook-form": "^7.50.1",
     "@hookform/error-message": "^2.0.1",
+    "@formkit/auto-animate": "^0.8.2",
     "recharts": "^2.12.3"
   },
   "devDependencies": {
diff --git a/packages/storybook-pages/src/Form/ReactHookFormDynamicZone/ReactHookFormDynamicZone.mock.tsx b/packages/storybook-pages/src/Form/FormDynamicZone/FormDynamicZone.mock.tsx
similarity index 65%
rename from packages/storybook-pages/src/Form/ReactHookFormDynamicZone/ReactHookFormDynamicZone.mock.tsx
rename to packages/storybook-pages/src/Form/FormDynamicZone/FormDynamicZone.mock.tsx
index 02b9244b..21629011 100644
--- a/packages/storybook-pages/src/Form/ReactHookFormDynamicZone/ReactHookFormDynamicZone.mock.tsx
+++ b/packages/storybook-pages/src/Form/FormDynamicZone/FormDynamicZone.mock.tsx
@@ -1,5 +1,10 @@
+import type { IBaseBlock } from '@smile/haring-react/src';
 import type { ReactElement } from 'react';
 
+export interface IExampleBlock extends IBaseBlock {
+  value?: string;
+}
+
 export function CommonFormErrorText(props: { message: string }): ReactElement {
   const { message } = props;
   return (
diff --git a/packages/storybook-pages/src/Form/ReactHookFormDynamicZone/ReactHookFormDynamicZone.stories.tsx b/packages/storybook-pages/src/Form/FormDynamicZone/FormDynamicZone.stories.tsx
similarity index 63%
rename from packages/storybook-pages/src/Form/ReactHookFormDynamicZone/ReactHookFormDynamicZone.stories.tsx
rename to packages/storybook-pages/src/Form/FormDynamicZone/FormDynamicZone.stories.tsx
index 4362f07e..20755691 100644
--- a/packages/storybook-pages/src/Form/ReactHookFormDynamicZone/ReactHookFormDynamicZone.stories.tsx
+++ b/packages/storybook-pages/src/Form/FormDynamicZone/FormDynamicZone.stories.tsx
@@ -2,12 +2,12 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { action } from '@storybook/addon-actions';
 
-import { ReactHookFormDynamicZone } from './ReactHookFormDynamicZone';
+import { FormDynamicZone } from './FormDynamicZone';
 
 const meta = {
-  component: ReactHookFormDynamicZone,
-  title: '2-mantine/Form',
-} satisfies Meta<typeof ReactHookFormDynamicZone>;
+  component: FormDynamicZone,
+  title: '2-mantine/Form/FormDynamicZone',
+} satisfies Meta<typeof FormDynamicZone>;
 
 export default meta;
 type IStory = StoryObj<typeof meta>;
diff --git a/packages/storybook-pages/src/Form/ReactHookFormDynamicZone/ReactHookFormDynamicZone.tsx b/packages/storybook-pages/src/Form/FormDynamicZone/FormDynamicZone.tsx
similarity index 91%
rename from packages/storybook-pages/src/Form/ReactHookFormDynamicZone/ReactHookFormDynamicZone.tsx
rename to packages/storybook-pages/src/Form/FormDynamicZone/FormDynamicZone.tsx
index e2554096..e67c45ad 100644
--- a/packages/storybook-pages/src/Form/ReactHookFormDynamicZone/ReactHookFormDynamicZone.tsx
+++ b/packages/storybook-pages/src/Form/FormDynamicZone/FormDynamicZone.tsx
@@ -1,5 +1,5 @@
-import type { IBaseBlock, IFormDynamicZoneBlock } from '@smile/haring-react';
-import type { IExampleBlock } from '@smile/haring-react/src/Form/FormDynamicZone/FormDynamicZone.mock';
+import type { IExampleBlock } from './FormDynamicZone.mock';
+import type { IBaseBlock, IDynamicZoneBlock } from '@smile/haring-react';
 import type { ReactElement } from 'react';
 import type {
   FieldErrors,
@@ -11,12 +11,12 @@ import type { UseFormRegister } from 'react-hook-form/dist/types/form';
 import { ErrorMessage } from '@hookform/error-message';
 import { Box, Group, Stack } from '@mantine/core';
 import { Cube, Leaf } from '@phosphor-icons/react';
-import { FormDynamicZone } from '@smile/haring-react';
+import { DynamicZone } from '@smile/haring-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 
 import { withExceptionCapturing } from '../utilities/react-hook-form-utilities';
 
-import { CommonFormErrorText } from './ReactHookFormDynamicZone.mock';
+import { CommonFormErrorText } from './FormDynamicZone.mock';
 
 interface IContentA extends IBaseBlock {
   value: string;
@@ -46,7 +46,7 @@ const initialBlocks: IDynamicContents[] = [
 const availableBlock: (
   register: UseFormRegister<IFields>,
   errors: object,
-) => IFormDynamicZoneBlock<IDynamicContents>[] = (register, errors) => [
+) => IDynamicZoneBlock<IDynamicContents>[] = (register, errors) => [
   {
     block: {
       blockType: 'exampleA',
@@ -165,9 +165,7 @@ export interface IReactHookFormProps {
   onFormSubmit: (data: IFields) => void;
 }
 
-export function ReactHookFormDynamicZone(
-  props: IReactHookFormProps,
-): ReactElement {
+export function FormDynamicZone(props: IReactHookFormProps): ReactElement {
   const { onFormErrors, onFormSubmit } = props;
   const {
     control,
@@ -203,7 +201,7 @@ export function ReactHookFormDynamicZone(
         )}
       >
         <Stack>
-          <FormDynamicZone<IDynamicContents>
+          <DynamicZone<IDynamicContents>
             availableBlocks={availableBlock(register, errors)}
             blocksArray={fields}
             onAppendUpdate={(newBlock: IDynamicContents) => append(newBlock)}
diff --git a/packages/storybook-pages/src/Form/FormDynamicZone/FormDynamicZoneWithAnimations.stories.tsx b/packages/storybook-pages/src/Form/FormDynamicZone/FormDynamicZoneWithAnimations.stories.tsx
new file mode 100644
index 00000000..5282aec5
--- /dev/null
+++ b/packages/storybook-pages/src/Form/FormDynamicZone/FormDynamicZoneWithAnimations.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { action } from '@storybook/addon-actions';
+
+import { FormDynamicZoneWithAnimations } from './FormDynamicZoneWithAnimations';
+
+const meta = {
+  component: FormDynamicZoneWithAnimations,
+  title: '2-mantine/Form/FormDynamicZone',
+} satisfies Meta<typeof FormDynamicZoneWithAnimations>;
+
+export default meta;
+type IStory = StoryObj<typeof meta>;
+
+export const WithAnimations: IStory = {
+  args: {
+    onFormErrors: action('Form Errors'),
+    onFormSubmit: action('Form Submit'),
+  },
+};
diff --git a/packages/storybook-pages/src/Form/FormDynamicZone/FormDynamicZoneWithAnimations.tsx b/packages/storybook-pages/src/Form/FormDynamicZone/FormDynamicZoneWithAnimations.tsx
new file mode 100644
index 00000000..d1daba6b
--- /dev/null
+++ b/packages/storybook-pages/src/Form/FormDynamicZone/FormDynamicZoneWithAnimations.tsx
@@ -0,0 +1,241 @@
+import type { IExampleBlock } from './FormDynamicZone.mock';
+import type { IBaseBlock, IDynamicZoneBlock } from '@smile/haring-react';
+import type { ReactElement } from 'react';
+import type {
+  FieldErrors,
+  SubmitErrorHandler,
+  SubmitHandler,
+} from 'react-hook-form';
+import type { UseFormRegister } from 'react-hook-form/dist/types/form';
+
+import { useAutoAnimate } from '@formkit/auto-animate/react';
+import { ErrorMessage } from '@hookform/error-message';
+import { Box, Group, Stack } from '@mantine/core';
+import { Cube, Leaf } from '@phosphor-icons/react';
+import { DynamicZone } from '@smile/haring-react';
+import { useFieldArray, useForm } from 'react-hook-form';
+
+import { withExceptionCapturing } from '../utilities/react-hook-form-utilities';
+
+import { CommonFormErrorText } from './FormDynamicZone.mock';
+
+interface IContentA extends IBaseBlock {
+  value: string;
+}
+
+interface IContentB extends IBaseBlock {
+  selected: string;
+}
+
+type IDynamicContents = IContentA | IContentB;
+
+const initialBlocks: IDynamicContents[] = [
+  {
+    blockType: 'exampleA',
+    id: '0',
+    opened: true,
+    value: 'existing value',
+  },
+  {
+    blockType: 'exampleB',
+    id: '1',
+    opened: true,
+    selected: 'existing selection',
+  },
+];
+
+const availableBlock: (
+  register: UseFormRegister<IFields>,
+  errors: object,
+) => IDynamicZoneBlock<IDynamicContents>[] = (register, errors) => [
+  {
+    block: {
+      blockType: 'exampleA',
+      opened: true,
+      value: '',
+    },
+    blockButtonOptions: {
+      blockType: 'exampleA',
+      label: 'Example A',
+      leftSection: <Cube />,
+    },
+    blockCardOptions: {
+      blockFooter: (_b, i) => (
+        <Stack>
+          <ErrorMessage
+            errors={errors}
+            name={`content.${i}.value.input1`}
+            render={({ message }: { message: string }) => (
+              <CommonFormErrorText message={message} />
+            )}
+          />
+          <ErrorMessage
+            errors={errors}
+            name={`content.${i}.value.input2`}
+            render={({ message }: { message: string }) => (
+              <CommonFormErrorText message={message} />
+            )}
+          />
+        </Stack>
+      ),
+      blockHeader: (
+        <>
+          <Cube key="1" />
+          <span key="2">Example A</span>
+        </>
+      ),
+    },
+    renderFunc: (b: IExampleBlock, i: number): ReactElement => {
+      return (
+        <Group>
+          <input
+            key={b.id + 1}
+            {...register(`content.${i}.value.input1`, {
+              minLength: { message: '3 characters minimum', value: 3 },
+              required: 'The first field is required',
+            })}
+            placeholder="nested field 1"
+          />
+          <input
+            key={b.id + 2}
+            {...register(`content.${i}.value.input2`, {
+              minLength: { message: '3 characters minimum', value: 3 },
+              required: 'The second field is required',
+            })}
+            placeholder="nested field 2"
+          />
+        </Group>
+      );
+    },
+  },
+  {
+    block: {
+      blockType: 'exampleB',
+      opened: true,
+      selected: '',
+    },
+    blockButtonOptions: {
+      blockType: 'exampleB',
+      label: 'Example B',
+      leftSection: <Leaf />,
+    },
+    blockCardOptions: {
+      blockFooter: (_b, i) => (
+        <ErrorMessage
+          errors={errors}
+          name={`content.${i}.selected`}
+          render={({ message }: { message: string }) => (
+            <CommonFormErrorText message={message} />
+          )}
+        />
+      ),
+      blockHeader: (
+        <>
+          <Leaf key="1" />
+          <span key="2">Example B</span>
+        </>
+      ),
+    },
+    renderFunc: (b: IExampleBlock, i: number): ReactElement => {
+      return (
+        <select
+          key={b.id}
+          {...register(`content.${i}.selected`, {
+            required: 'This field is required',
+          })}
+        >
+          <option disabled value="">
+            -- Please choose an option --
+          </option>
+          <option value="selectA">Value A</option>
+          <option value="selectB">Value B</option>
+        </select>
+      );
+    },
+  },
+];
+
+interface IFields {
+  content: IDynamicContents[];
+  email: string;
+  termsOfService: boolean;
+}
+
+export interface IReactHookFormProps {
+  onFormErrors: (errors: FieldErrors<IFields>) => void;
+  onFormSubmit: (data: IFields) => void;
+}
+
+export function FormDynamicZoneWithAnimations(
+  props: IReactHookFormProps,
+): ReactElement {
+  const { onFormErrors, onFormSubmit } = props;
+  const {
+    control,
+    handleSubmit,
+    register,
+    getValues,
+    formState: { errors },
+  } = useForm<IFields>({
+    defaultValues: {
+      content: initialBlocks,
+      email: '',
+      termsOfService: false,
+    },
+  });
+  const { fields, append, remove, swap, update } = useFieldArray({
+    control,
+    name: 'content',
+  });
+  const [parent, enable] = useAutoAnimate();
+
+  const onValidSubmit: SubmitHandler<IFields> = (data) => onFormSubmit(data);
+  const onInvalidSubmit: SubmitErrorHandler<IFields> = (errors) =>
+    onFormErrors(errors);
+
+  function onAppend(newBlock: IDynamicContents): void {
+    enable(false);
+    append(newBlock);
+  }
+
+  function onRemove(i: number): void {
+    enable(true);
+    remove(i);
+  }
+
+  function onSwap(i: number, ii: number): void {
+    enable(true);
+    swap(i, ii);
+  }
+
+  function onToggle(index: number, opened: boolean): void {
+    enable(false);
+    const updatedBlock = getValues('content')[index];
+    update(index, { ...updatedBlock, opened });
+  }
+
+  return (
+    <Box mx="auto">
+      <form
+        onSubmit={withExceptionCapturing(
+          handleSubmit(onValidSubmit, onInvalidSubmit),
+        )}
+      >
+        <Stack>
+          <DynamicZone<IDynamicContents>
+            availableBlocks={availableBlock(register, errors)}
+            blocksArray={fields}
+            internalDynamicZoneProps={{
+              internalComponentProps: { arrayRootRef: parent },
+            }}
+            onAppendUpdate={onAppend}
+            onRemoveUpdate={onRemove}
+            onSwapUpdate={onSwap}
+            onToggleUpdate={onToggle}
+          />
+          <input type="submit" />
+        </Stack>
+      </form>
+    </Box>
+  );
+}