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/Form/DynamicZone/DynamicZone.tsx b/packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx
index 5845e30d..2b4b3f9f 100644
--- a/packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx
+++ b/packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx
@@ -11,7 +11,7 @@ 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';
 
@@ -19,6 +19,7 @@ import classes from './DynamicZone.module.css';
 import { DynamicZoneBlock } from './DynamicZoneBlock/DynamicZoneBlock';
 
 export interface IDynamicZoneInternalComponentProps {
+  arrayRootRef?: Ref<HTMLDivElement>;
   blockCardProps?: CardProps;
   blocksStackProps?: StackProps;
   bottomContainerProps?: ContainerProps;
@@ -60,7 +61,11 @@ 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
             {...internalComponentProps?.blockCardProps}
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.tsx b/packages/storybook-pages/src/Form/ReactHookFormDynamicZone/ReactHookFormDynamicZone.tsx
index e2554096..95b5504c 100644
--- a/packages/storybook-pages/src/Form/ReactHookFormDynamicZone/ReactHookFormDynamicZone.tsx
+++ b/packages/storybook-pages/src/Form/ReactHookFormDynamicZone/ReactHookFormDynamicZone.tsx
@@ -8,6 +8,7 @@ import type {
 } 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';
@@ -186,6 +187,8 @@ export function ReactHookFormDynamicZone(
     control,
     name: 'content',
   });
+  const [parent] = useAutoAnimate();
+
   const onValidSubmit: SubmitHandler<IFields> = (data) => onFormSubmit(data);
   const onInvalidSubmit: SubmitErrorHandler<IFields> = (errors) =>
     onFormErrors(errors);
@@ -206,6 +209,9 @@ export function ReactHookFormDynamicZone(
           <FormDynamicZone<IDynamicContents>
             availableBlocks={availableBlock(register, errors)}
             blocksArray={fields}
+            internalDynamicZoneProps={{
+              internalComponentProps: { arrayRootRef: parent },
+            }}
             onAppendUpdate={(newBlock: IDynamicContents) => append(newBlock)}
             onRemoveUpdate={(i: number) => remove(i)}
             onSwapUpdate={(i: number, ii: number) => swap(i, ii)}