diff --git a/packages/haring-react/src/Components/ActionList/ActionList.tsx b/packages/haring-react/src/Components/ActionList/ActionList.tsx
index 80871669..7bfa8940 100644
--- a/packages/haring-react/src/Components/ActionList/ActionList.tsx
+++ b/packages/haring-react/src/Components/ActionList/ActionList.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import type {
+  ActionIconProps,
   ButtonProps,
   FloatingPosition,
   GroupProps,
@@ -34,7 +35,8 @@ export type IActionListAction<Data extends Record<string, unknown>> =
 
 export interface IActionListProps<Data extends Record<string, unknown>>
   extends GroupProps {
-  actionButtonProps?: ButtonProps;
+  actionButtonDefaultProps?: ButtonProps;
+  actionIconDefaultProps?: ActionIconProps;
   actionTooltipProps?: TooltipProps;
   actions: IActionListAction<Data>[];
   isCompactStyle?: boolean;
@@ -48,7 +50,8 @@ export function ActionList<Data extends Record<string, unknown>>(
   props: IActionListProps<Data>,
 ): ReactNode {
   const {
-    actionButtonProps,
+    actionButtonDefaultProps,
+    actionIconDefaultProps,
     actionTooltipProps,
     actions,
     isCompactStyle = false,
@@ -140,6 +143,7 @@ export function ActionList<Data extends Record<string, unknown>>(
         leftSection={getActionIcon(action)}
         onClick={() => handleAction(action)}
         variant={action.color ? 'filled' : 'default'}
+        {...actionButtonDefaultProps}
         {...getActionComponentProps(action)}
       >
         {getActionLabel(action)}
@@ -159,6 +163,7 @@ export function ActionList<Data extends Record<string, unknown>>(
           radius={4}
           type="button"
           variant="subtle"
+          {...actionIconDefaultProps}
           {...getActionComponentProps(action)}
         >
           {getActionIcon(action)}
diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZone.mock.tsx b/packages/haring-react/src/Form/DynamicZone/DynamicZone.mock.tsx
index 33f179df..54d01eb3 100644
--- a/packages/haring-react/src/Form/DynamicZone/DynamicZone.mock.tsx
+++ b/packages/haring-react/src/Form/DynamicZone/DynamicZone.mock.tsx
@@ -1,5 +1,5 @@
 import type { IDynamicZoneBlockReference } from './DynamicZoneBlock/DynamicZoneBlock';
-import type { IBaseBlockButton, IBaseBlockFull } from '../../types';
+import type { IBaseBlockButtonOptions, IBaseBlockFull } from '../../types';
 import type { IAction } from '@smile/haring-react-shared';
 
 import {
@@ -14,21 +14,18 @@ import { action } from '@storybook/addon-actions';
 
 const dynamicZoneBlockActionsMock: IAction<IDynamicZoneBlockReference>[] = [
   {
-    color: 'white',
     icon: <ArrowUp size={16} />,
     id: 'move-up',
     label: 'Move Up',
     onAction: action('Move block up'),
   },
   {
-    color: 'white',
     icon: <ArrowDown size={16} />,
     id: 'move-down',
     label: 'Move Down',
     onAction: action('Move block down'),
   },
   {
-    color: 'white',
     icon: <Trash size={16} />,
     id: 'delete',
     label: 'Delete',
@@ -80,7 +77,7 @@ export const dynamicZoneBlocks: IBaseBlockFull[] = [
   },
 ];
 
-export const dynamicZoneButtons: IBaseBlockButton[] = [
+export const dynamicZoneButtons: 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/Form/DynamicZone/DynamicZone.module.css
index 93edbb47..cab2f8ff 100644
--- a/packages/haring-react/src/Form/DynamicZone/DynamicZone.module.css
+++ b/packages/haring-react/src/Form/DynamicZone/DynamicZone.module.css
@@ -10,3 +10,11 @@
 
   margin-bottom: 10px;
 }
+
+.button {
+  &:disabled,
+  &[data-disabled] {
+    border-color: var(--mantine-color-gray-4);
+    background-color: transparent;
+  }
+}
diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZone.stories.tsx b/packages/haring-react/src/Form/DynamicZone/DynamicZone.stories.tsx
index e3e9754d..abebb507 100644
--- a/packages/haring-react/src/Form/DynamicZone/DynamicZone.stories.tsx
+++ b/packages/haring-react/src/Form/DynamicZone/DynamicZone.stories.tsx
@@ -19,7 +19,22 @@ export const DynamicZone: IStory = {
     blockOptions: dynamicZoneButtons,
     blocks: dynamicZoneBlocks,
     buttonsText: 'Ajouter un block',
-    internalBlockCardProps: {
+    onAppendBlock: action('onAppendBlock, id'),
+    onRenderBlockContent: (_b, index) => <input key={index} />,
+    onToggleBlock: action('onToggleBlock'),
+  },
+};
+
+export const CustomInternalProps: IStory = {
+  args: {
+    blockOptions: dynamicZoneButtons,
+    blocks: dynamicZoneBlocks,
+    internalBlockComponentProps: {
+      headerActionListProps: {
+        actionIconDefaultProps: {
+          color: 'white',
+        },
+      },
       headerCardSectionProps: {
         bg: 'cadetblue',
         c: 'white',
diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZone.test.tsx b/packages/haring-react/src/Form/DynamicZone/DynamicZone.test.tsx
index dc499208..56e26ef7 100644
--- a/packages/haring-react/src/Form/DynamicZone/DynamicZone.test.tsx
+++ b/packages/haring-react/src/Form/DynamicZone/DynamicZone.test.tsx
@@ -1,4 +1,4 @@
-import type { IBaseBlockOptions } from '../../types';
+import type { IBaseBlockCardOptions } from '../../types';
 import type { ReactElement } from 'react';
 
 import { renderWithProviders } from '@smile/haring-react-shared/test-utils';
@@ -10,9 +10,10 @@ import { dynamicZoneBlocks, dynamicZoneButtons } from './DynamicZone.mock';
 
 describe('DynamicZone', () => {
   it('matches snapshot', () => {
-    const onRender = (_b: IBaseBlockOptions, index: number): ReactElement => (
-      <input key={index} />
-    );
+    const onRender = (
+      _b: IBaseBlockCardOptions,
+      index: number,
+    ): ReactElement => <input key={index} />;
     const { container } = renderWithProviders(
       <DynamicZone
         blockOptions={dynamicZoneButtons}
diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx b/packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx
index c3ffa4d4..4a937af8 100644
--- a/packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx
+++ b/packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx
@@ -1,6 +1,6 @@
 import type { IDynamicZoneBlockInternalComponentProps } from './DynamicZoneBlock/DynamicZoneBlock';
 import type {
-  IBaseBlockButton,
+  IBaseBlockButtonOptions,
   IBaseBlockFull,
   IBaseBlockType,
 } from '../../types';
@@ -13,21 +13,25 @@ import type {
 } from '@mantine/core';
 import type { ReactElement } from 'react';
 
-import { Button, Container, Group, Stack, Text } from '@mantine/core';
+import { Button, Container, Group, Stack, Text, Tooltip } from '@mantine/core';
 
 import classes from './DynamicZone.module.css';
 import { DynamicZoneBlock } from './DynamicZoneBlock/DynamicZoneBlock';
 
-export interface IDynamicZoneProps extends ContainerProps {
+export interface IDynamicZoneInternalComponentProps {
   blockCardProps?: CardProps;
-  blockOptions: IBaseBlockButton[];
-  blocks: IBaseBlockFull[];
   blocksStackProps?: StackProps;
   bottomContainerProps?: ContainerProps;
   buttonsGroupProps?: GroupProps;
-  buttonsText?: string;
   buttonsTextProps?: TextProps;
-  internalBlockCardProps?: IDynamicZoneBlockInternalComponentProps;
+}
+
+export interface IDynamicZoneProps extends ContainerProps {
+  blockOptions: IBaseBlockButtonOptions[];
+  blocks: IBaseBlockFull[];
+  buttonsText?: string;
+  internalBlockComponentProps?: IDynamicZoneBlockInternalComponentProps;
+  internalComponentProps?: IDynamicZoneInternalComponentProps;
   onAppendBlock: (blockType: IBaseBlockType) => void;
   onRenderBlockContent: (block: IBaseBlockFull, index: number) => ReactElement;
   onToggleBlock: (
@@ -39,15 +43,11 @@ export interface IDynamicZoneProps extends ContainerProps {
 
 export function DynamicZone(props: IDynamicZoneProps): ReactElement {
   const {
-    blockCardProps,
     blockOptions,
     blocks,
-    blocksStackProps,
-    bottomContainerProps,
-    buttonsGroupProps,
     buttonsText,
-    buttonsTextProps,
-    internalBlockCardProps,
+    internalComponentProps,
+    internalBlockComponentProps,
     onAppendBlock,
     onRenderBlockContent,
     onToggleBlock,
@@ -60,15 +60,16 @@ export function DynamicZone(props: IDynamicZoneProps): ReactElement {
 
   return (
     <Container fluid p={0} {...rootContainerProps}>
-      <Stack gap="sm" {...blocksStackProps}>
+      <Stack gap="sm" {...internalComponentProps?.blocksStackProps}>
         {blocks.map((block, index) => (
           <DynamicZoneBlock
-            {...blockCardProps}
+            {...internalComponentProps?.blockCardProps}
+            {...block.blockCardProps}
             key={block.id}
             actions={block.blockActions}
             footerChildren={block.blockFooter}
             headerChildren={block.blockHeader}
-            internalComponentProps={internalBlockCardProps}
+            internalComponentProps={internalBlockComponentProps}
             onToggle={(opened) => onToggleBlock(block, index, opened)}
             opened={block.opened}
             reference={{ arrayLength: blocks.length, id: block.id, index }}
@@ -82,25 +83,48 @@ export function DynamicZone(props: IDynamicZoneProps): ReactElement {
         fluid
         mt="lg"
         p="sm"
-        {...bottomContainerProps}
+        {...internalComponentProps?.bottomContainerProps}
       >
-        <Text className={classes.buttonsLabel} fw="bold" {...buttonsTextProps}>
-          {buttonsText}
-        </Text>
-        <Group {...buttonsGroupProps}>
-          {blockOptions.map(({ blockType, ...button }) => (
-            <Button
-              radius="md"
-              size="md"
-              type="button"
-              variant="default"
-              {...button}
-              key={`button-${blockType}`}
-              onClick={() => onAddBlock(blockType)}
-            >
-              {button.label}
-            </Button>
-          ))}
+        {Boolean(buttonsText) && (
+          <Text
+            className={classes.buttonsLabel}
+            fw="bold"
+            {...internalComponentProps?.buttonsTextProps}
+          >
+            {buttonsText}
+          </Text>
+        )}
+        <Group {...internalComponentProps?.buttonsGroupProps}>
+          {blockOptions.map(
+            ({ blockType, label, tooltipLabel, tooltipProps, ...button }) => (
+              <Tooltip
+                key={`button-${blockType}`}
+                disabled={
+                  tooltipLabel === '' ||
+                  tooltipLabel === undefined ||
+                  (typeof tooltipLabel === 'function' &&
+                    tooltipLabel(button) === '')
+                }
+                label={
+                  typeof tooltipLabel === 'function' && tooltipLabel(button)
+                }
+                {...tooltipProps}
+              >
+                <Button
+                  className={classes.button}
+                  radius="md"
+                  size="md"
+                  type="button"
+                  variant="default"
+                  {...button}
+                  onClick={() => onAddBlock(blockType)}
+                >
+                  {(typeof label === 'function' && label(button)) ||
+                    (typeof label === 'string' && label)}
+                </Button>
+              </Tooltip>
+            ),
+          )}
         </Group>
       </Container>
     </Container>
diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZoneBlock/DynamicZoneBlock.tsx b/packages/haring-react/src/Form/DynamicZone/DynamicZoneBlock/DynamicZoneBlock.tsx
index 34c6ce0f..436607a3 100644
--- a/packages/haring-react/src/Form/DynamicZone/DynamicZoneBlock/DynamicZoneBlock.tsx
+++ b/packages/haring-react/src/Form/DynamicZone/DynamicZoneBlock/DynamicZoneBlock.tsx
@@ -28,7 +28,10 @@ export interface IDynamicZoneBlockInternalComponentProps {
   contentCollapseProps?: CollapseProps;
   contentContainerProps?: ContainerProps;
   footerCardSectionProps?: CardSectionProps;
-  headerActionListProps?: IActionListProps<IDynamicZoneBlockReference>;
+  headerActionListProps?: Omit<
+    IActionListProps<IDynamicZoneBlockReference>,
+    'actions' | 'isCompactStyle' | 'selectedElements'
+  >;
   headerCardSectionProps?: CardSectionProps;
   headerGroupProps?: GroupProps;
   toggleComponentProps?: IDynamicZoneBlockToggleProps;
diff --git a/packages/haring-react/src/Form/DynamicZone/__snapshots__/DynamicZone.test.tsx.snap b/packages/haring-react/src/Form/DynamicZone/__snapshots__/DynamicZone.test.tsx.snap
index 7cc3c59d..8860d6a4 100644
--- a/packages/haring-react/src/Form/DynamicZone/__snapshots__/DynamicZone.test.tsx.snap
+++ b/packages/haring-react/src/Form/DynamicZone/__snapshots__/DynamicZone.test.tsx.snap
@@ -85,7 +85,7 @@ exports[`DynamicZone matches snapshot 1`] = `
                 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: rgba(0, 0, 0, 0.12); --ai-color: white; --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
+                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
@@ -108,7 +108,7 @@ exports[`DynamicZone matches snapshot 1`] = `
                 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: rgba(0, 0, 0, 0.12); --ai-color: white; --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
+                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
@@ -131,7 +131,7 @@ exports[`DynamicZone matches snapshot 1`] = `
                 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: rgba(0, 0, 0, 0.12); --ai-color: white; --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
+                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
@@ -236,7 +236,7 @@ exports[`DynamicZone matches snapshot 1`] = `
                 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: rgba(0, 0, 0, 0.12); --ai-color: white; --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
+                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
@@ -259,7 +259,7 @@ exports[`DynamicZone matches snapshot 1`] = `
                 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: rgba(0, 0, 0, 0.12); --ai-color: white; --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
+                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
@@ -282,7 +282,7 @@ exports[`DynamicZone matches snapshot 1`] = `
                 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: rgba(0, 0, 0, 0.12); --ai-color: white; --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
+                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
@@ -389,7 +389,7 @@ exports[`DynamicZone matches snapshot 1`] = `
                 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: rgba(0, 0, 0, 0.12); --ai-color: white; --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
+                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
@@ -412,7 +412,7 @@ exports[`DynamicZone matches snapshot 1`] = `
                 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: rgba(0, 0, 0, 0.12); --ai-color: white; --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
+                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
@@ -435,7 +435,7 @@ exports[`DynamicZone matches snapshot 1`] = `
                 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: rgba(0, 0, 0, 0.12); --ai-color: white; --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
+                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
@@ -481,10 +481,6 @@ exports[`DynamicZone matches snapshot 1`] = `
       class="m_7485cace mantine-Container-root"
       data-fluid="true"
     >
-      <p
-        class="haring-focus m_b6d8b162 mantine-Text-root"
-        style="font-weight: bold;"
-      />
       <div
         class="m_4081bf90 mantine-Group-root"
         style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: flex-start; --group-wrap: wrap;"
@@ -494,7 +490,6 @@ exports[`DynamicZone matches snapshot 1`] = `
           data-size="md"
           data-variant="default"
           data-with-left-section="true"
-          label="Default"
           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"
         >
@@ -529,7 +524,6 @@ exports[`DynamicZone matches snapshot 1`] = `
           data-size="md"
           data-variant="default"
           data-with-left-section="true"
-          label="Other"
           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"
         >
@@ -564,7 +558,6 @@ exports[`DynamicZone matches snapshot 1`] = `
           data-size="md"
           data-variant="default"
           data-with-left-section="true"
-          label="Stuff"
           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"
         >
diff --git a/packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.mock.tsx b/packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.mock.tsx
index b6976fff..1a64c392 100644
--- a/packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.mock.tsx
+++ b/packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.mock.tsx
@@ -25,6 +25,17 @@ export const blocksMock: IBaseBlockFull<IExampleBlock>[] = [
     opened: true,
     value: 'existing value',
   },
+  {
+    blockHeader: (
+      <>
+        <Cube key="1" />
+        <span key="2">Example A</span>
+      </>
+    ),
+    blockType: 'exampleA',
+    id: '1',
+    opened: false,
+  },
   {
     blockHeader: (
       <>
@@ -33,7 +44,7 @@ export const blocksMock: IBaseBlockFull<IExampleBlock>[] = [
       </>
     ),
     blockType: 'exampleB',
-    id: '1',
+    id: '2',
     opened: true,
     value: 'selectB',
   },
@@ -46,7 +57,12 @@ export const availableBlocksMock: IFormDynamicZoneBlock<IExampleBlock>[] = [
       opened: true,
       value: '',
     },
-    blockOptions: {
+    blockButtonOptions: {
+      blockType: 'exampleA',
+      label: 'Example A',
+      leftSection: <Cube />,
+    },
+    blockCardOptions: {
       blockHeader: (
         <>
           <Cube key="1" />
@@ -54,11 +70,6 @@ export const availableBlocksMock: IFormDynamicZoneBlock<IExampleBlock>[] = [
         </>
       ),
     },
-    button: {
-      blockType: 'exampleA',
-      label: 'Example A',
-      leftSection: <Cube />,
-    },
     renderFunc: (b: IExampleBlock, i: number): ReactElement => {
       return (
         <Group>
@@ -85,7 +96,15 @@ export const availableBlocksMock: IFormDynamicZoneBlock<IExampleBlock>[] = [
       opened: true,
       value: '',
     },
-    blockOptions: {
+    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" />
@@ -93,11 +112,6 @@ export const availableBlocksMock: IFormDynamicZoneBlock<IExampleBlock>[] = [
         </>
       ),
     },
-    button: {
-      blockType: 'exampleB',
-      label: 'Example B',
-      leftSection: <Leaf />,
-    },
     renderFunc: (b: IExampleBlock, i: number): ReactElement => {
       return (
         <select key={b.id} defaultValue={b.value} id={`example.${i}`} required>
diff --git a/packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.stories.tsx b/packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.stories.tsx
index d0e461a1..a42a5e5e 100644
--- a/packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.stories.tsx
+++ b/packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.stories.tsx
@@ -25,3 +25,31 @@ export const FormDynamicZone: IStory = {
     onToggleUpdate: action('toggle'),
   },
 };
+
+export const CustomInternalProps: IStory = {
+  args: {
+    availableBlocks: availableBlocksMock,
+    blocksArray: blocksMock,
+    internalDynamicZoneProps: {
+      internalBlockComponentProps: {
+        headerActionListProps: {
+          actionIconDefaultProps: {
+            color: 'white',
+            variant: 'subtle',
+          },
+        },
+        headerCardSectionProps: {
+          bg: 'cadetblue',
+          c: 'white',
+        },
+        toggleComponentProps: {
+          actionIconProps: { color: 'white', variant: 'subtle' },
+        },
+      },
+    },
+    onAppendUpdate: action('append'),
+    onRemoveUpdate: action('remove'),
+    onSwapUpdate: action('swap'),
+    onToggleUpdate: action('toggle'),
+  },
+};
diff --git a/packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.tsx b/packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.tsx
index b3acfd79..e40d6aee 100644
--- a/packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.tsx
+++ b/packages/haring-react/src/Form/FormDynamicZone/FormDynamicZone.tsx
@@ -1,15 +1,21 @@
 import type {
   IBaseBlock,
+  IBaseBlockButtonOptions,
   IBaseBlockFull,
   IFormDynamicZoneBlock,
 } from '../../types';
-import type { IBaseBlockButton, IBaseBlockType } from '@smile/haring-react';
-import type { IDynamicZoneBlockReference } from '@smile/haring-react/src/Form/DynamicZone/DynamicZoneBlock/DynamicZoneBlock';
+import type { IDynamicZoneInternalComponentProps } from '../DynamicZone/DynamicZone';
+import type { IBaseBlockType } from '@smile/haring-react';
+import type {
+  IDynamicZoneBlockInternalComponentProps,
+  IDynamicZoneBlockReference,
+} from '@smile/haring-react/src/Form/DynamicZone/DynamicZoneBlock/DynamicZoneBlock';
 import type { IAction } from '@smile/haring-react-shared';
 import type { ReactElement } from 'react';
 
 import { ArrowDown, ArrowUp, Trash } from '@phosphor-icons/react';
 import { isNotNullNorEmpty } from '@smile/haring-react-shared';
+import { useMemo } from 'react';
 
 import { DynamicZone } from '../DynamicZone/DynamicZone';
 
@@ -29,6 +35,10 @@ export interface IFormDynamicZoneProps<Block extends IBaseBlock> {
   actionLabels?: IFormDynamicZoneActionLabels;
   availableBlocks: IFormDynamicZoneBlock<Block>[];
   blocksArray: Block[];
+  internalDynamicZoneProps?: {
+    internalBlockComponentProps?: IDynamicZoneBlockInternalComponentProps;
+    internalComponentProps?: IDynamicZoneInternalComponentProps;
+  };
   onAppendUpdate: (newBlock: Block) => void;
   onRemoveUpdate: (index: number) => void;
   onSwapUpdate: (firstIndex: number, secondIndex: number) => void;
@@ -42,13 +52,29 @@ export function FormDynamicZone<Block extends IBaseBlock>(
     actionLabels = defaultActionLabels,
     availableBlocks,
     blocksArray,
+    internalDynamicZoneProps,
     onAppendUpdate,
     onRemoveUpdate,
     onSwapUpdate,
     onToggleUpdate,
   } = props;
 
-  const blockOptions: IBaseBlockButton[] = availableBlocks.map((b) => b.button);
+  const blockOptions: IBaseBlockButtonOptions[] = useMemo(
+    () =>
+      availableBlocks.map((b) => {
+        const { maxInstances, ...options } = b.blockButtonOptions;
+        // compare buttonOptions maxInstances with current number of instances, disable button if the limit is hit
+        const max = maxInstances ?? -1;
+        const current = blocksArray.filter(
+          (bl) => bl.blockType === b.block.blockType,
+        ).length;
+        return {
+          ...options,
+          disabled: max > -1 && current >= max,
+        };
+      }),
+    [availableBlocks, blocksArray],
+  );
 
   function renderBlock(block: IBaseBlockFull, index: number): ReactElement {
     const correspondingType = availableBlocks.find(
@@ -138,7 +164,7 @@ export function FormDynamicZone<Block extends IBaseBlock>(
       ...b,
       blockActions: formDynamicZoneDefaultActions,
       ...availableBlocks.find((o) => o.block.blockType === b.blockType)
-        ?.blockOptions,
+        ?.blockCardOptions,
     }));
 
   return (
@@ -150,6 +176,7 @@ export function FormDynamicZone<Block extends IBaseBlock>(
       onAppendBlock={onAppend}
       onRenderBlockContent={renderBlock}
       onToggleBlock={onToggle}
+      {...internalDynamicZoneProps}
     />
   );
 }
diff --git a/packages/haring-react/src/Form/FormDynamicZone/__snapshots__/FormDynamicZone.test.tsx.snap b/packages/haring-react/src/Form/FormDynamicZone/__snapshots__/FormDynamicZone.test.tsx.snap
index e24ff726..9a8ea739 100644
--- a/packages/haring-react/src/Form/FormDynamicZone/__snapshots__/FormDynamicZone.test.tsx.snap
+++ b/packages/haring-react/src/Form/FormDynamicZone/__snapshots__/FormDynamicZone.test.tsx.snap
@@ -191,6 +191,173 @@ exports[`FormDynamicZone matches snapshot 1`] = `
           style="padding: 0rem;"
         />
       </div>
+      <div
+        class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root"
+        data-with-border="true"
+        style="--paper-radius: var(--mantine-radius-md); --paper-shadow: var(--mantine-shadow-sm);"
+      >
+        <div
+          class="m_599a2148 mantine-Card-section"
+          data-first-section="true"
+          role="button"
+        >
+          <div
+            class="m_4081bf90 mantine-Group-root"
+            style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: space-between; --group-wrap: wrap;"
+          >
+            <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
+                class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
+                data-variant="default"
+                style="--ai-bg: var(--mantine-color-default); --ai-hover: var(--mantine-color-default-hover); --ai-color: var(--mantine-color-default-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);"
+                type="button"
+              >
+                <span
+                  class="m_8d3afb97 mantine-ActionIcon-icon"
+                >
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 256 256"
+                    width="1em"
+                    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"
+                    />
+                  </svg>
+                </span>
+              </button>
+              <div
+                class=""
+              />
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 256 256"
+                width="1em"
+                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"
+                />
+              </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>
+            </div>
+          </div>
+        </div>
+        <div
+          aria-hidden="true"
+          class=""
+          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.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"
+          style="padding: 0rem;"
+        />
+      </div>
       <div
         class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root"
         data-with-border="true"
@@ -338,7 +505,7 @@ exports[`FormDynamicZone matches snapshot 1`] = `
             data-fluid="true"
           >
             <select
-              id="example.1"
+              id="example.2"
               required=""
             >
               <option
@@ -372,10 +539,6 @@ exports[`FormDynamicZone matches snapshot 1`] = `
       class="m_7485cace mantine-Container-root"
       data-fluid="true"
     >
-      <p
-        class="haring-focus m_b6d8b162 mantine-Text-root"
-        style="font-weight: bold;"
-      />
       <div
         class="m_4081bf90 mantine-Group-root"
         style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: flex-start; --group-wrap: wrap;"
@@ -385,7 +548,6 @@ exports[`FormDynamicZone matches snapshot 1`] = `
           data-size="md"
           data-variant="default"
           data-with-left-section="true"
-          label="Example A"
           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"
         >
@@ -416,12 +578,13 @@ exports[`FormDynamicZone matches snapshot 1`] = `
           </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"
-          label="Example B"
-          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
diff --git a/packages/haring-react/src/index.tsx b/packages/haring-react/src/index.tsx
index aef5e17a..31629b95 100644
--- a/packages/haring-react/src/index.tsx
+++ b/packages/haring-react/src/index.tsx
@@ -133,9 +133,9 @@ export type {
   IThumbnailAction,
   IThumbnailData,
   IBaseBlock,
-  IBaseBlockOptions,
+  IBaseBlockCardOptions,
   IBaseBlockFull,
-  IBaseBlockButton,
+  IBaseBlockButtonOptions,
   IBaseBlockType,
   IFormDynamicZoneBlock,
 } from './types';
diff --git a/packages/haring-react/src/types/dynamic-zone.ts b/packages/haring-react/src/types/dynamic-zone.ts
index 039d4fc6..3dd4dc57 100644
--- a/packages/haring-react/src/types/dynamic-zone.ts
+++ b/packages/haring-react/src/types/dynamic-zone.ts
@@ -1,5 +1,5 @@
 import type { IDynamicZoneBlockReference } from '../Form/DynamicZone/DynamicZoneBlock/DynamicZoneBlock';
-import type { ButtonProps } from '@mantine/core';
+import type { ButtonProps, CardProps, TooltipProps } from '@mantine/core';
 import type {
   IAction,
   IOmitRespectIndexSignature,
@@ -14,23 +14,30 @@ export interface IBaseBlock extends Record<string, unknown> {
   opened: boolean;
 }
 
-export interface IBaseBlockOptions {
+export interface IBaseBlockCardOptions {
   blockActions?: IAction<IDynamicZoneBlockReference>[];
+  blockCardProps?: CardProps;
   blockFooter?: ReactNode;
   blockHeader?: ReactNode;
 }
 
 export type IBaseBlockFull<Block extends IBaseBlock = IBaseBlock> = Block &
-  IBaseBlockOptions;
+  IBaseBlockCardOptions;
 
-export interface IBaseBlockButton extends ButtonProps {
+export interface IBaseBlockButtonOptions extends ButtonProps {
   blockType: IBaseBlockType;
-  label: string;
+  label: string | ((buttonProps: ButtonProps) => string);
+  tooltipLabel?: string | ((buttonProps: ButtonProps) => string);
+  tooltipProps?: Omit<TooltipProps, 'children' | 'key' | 'label'>;
+}
+
+export interface IBaseBlockButtonFullOptions extends IBaseBlockButtonOptions {
+  maxInstances?: number;
 }
 
 export interface IFormDynamicZoneBlock<Block extends IBaseBlock> {
   block: IOmitRespectIndexSignature<Block, 'id'>;
-  blockOptions: IBaseBlockOptions;
-  button: IBaseBlockButton;
+  blockButtonOptions: IBaseBlockButtonFullOptions;
+  blockCardOptions: IBaseBlockCardOptions;
   renderFunc: (block: IBaseBlockFull, index: number) => ReactElement;
 }
diff --git a/packages/storybook-pages/src/Form/ReactHookFormDynamicZone/ReactHookFormDynamicZone.tsx b/packages/storybook-pages/src/Form/ReactHookFormDynamicZone/ReactHookFormDynamicZone.tsx
index 5821b66e..bf94e0ea 100644
--- a/packages/storybook-pages/src/Form/ReactHookFormDynamicZone/ReactHookFormDynamicZone.tsx
+++ b/packages/storybook-pages/src/Form/ReactHookFormDynamicZone/ReactHookFormDynamicZone.tsx
@@ -88,7 +88,12 @@ export function ReactHookFormDynamicZone(
         opened: true,
         value: '',
       },
-      blockOptions: {
+      blockButtonOptions: {
+        blockType: 'exampleA',
+        label: 'Example A',
+        leftSection: <Cube />,
+      },
+      blockCardOptions: {
         blockHeader: (
           <>
             <Cube key="1" />
@@ -96,11 +101,6 @@ export function ReactHookFormDynamicZone(
           </>
         ),
       },
-      button: {
-        blockType: 'exampleA',
-        label: 'Example A',
-        leftSection: <Cube />,
-      },
       renderFunc: (b: IExampleBlock, i: number): ReactElement => {
         return (
           <Group>
@@ -130,7 +130,12 @@ export function ReactHookFormDynamicZone(
         opened: true,
         selected: '',
       },
-      blockOptions: {
+      blockButtonOptions: {
+        blockType: 'exampleB',
+        label: 'Example B',
+        leftSection: <Leaf />,
+      },
+      blockCardOptions: {
         blockHeader: (
           <>
             <Leaf key="1" />
@@ -138,11 +143,6 @@ export function ReactHookFormDynamicZone(
           </>
         ),
       },
-      button: {
-        blockType: 'exampleB',
-        label: 'Example B',
-        leftSection: <Leaf />,
-      },
       renderFunc: (b: IExampleBlock, i: number): ReactElement => {
         return (
           <select
@@ -167,7 +167,6 @@ export function ReactHookFormDynamicZone(
   //  feeding it into the form defaultValues and sending it down into the dynamic zone,
   //  then maybe some way to give default values on register?,
   //  then test error display and various complex use cases,
-  //  then add the feature of limited quantity of some blocks (through the blockOptions probably, and i'd assume at the FormDynamicZone level?)
   //  then maybe test animations
 
   return (