diff --git a/.changeset/early-dryers-serve.md b/.changeset/early-dryers-serve.md
new file mode 100644
index 0000000..b0a3fd1
--- /dev/null
+++ b/.changeset/early-dryers-serve.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+♻️(react) add a scroller div inside modal
diff --git a/packages/react/src/components/Modal/index.scss b/packages/react/src/components/Modal/index.scss
index 95c7dd3..a638700 100644
--- a/packages/react/src/components/Modal/index.scss
+++ b/packages/react/src/components/Modal/index.scss
@@ -1,7 +1,6 @@
 @use "../../utils/responsive" as *;
 
 .c__modal {
-  padding: 1.5rem;
   background-color: var(--c--components--modal--background-color);
   border-radius: var(--c--components--modal--border-radius);
   border-color: var(--c--components--modal--border-color);
@@ -13,8 +12,12 @@
   top: 50%;
   transform: translate(-50%, -50%);
   max-width: calc(100% - 2em - 6px);
-  max-height: calc(100% - 2em - 6px);
-  overflow: auto;
+
+  &__scroller {
+    padding: 1.5rem;
+    max-height: calc(100% - 2em - 6px);
+    overflow: auto;
+  }
 
   &:focus-visible {
     outline: none;
diff --git a/packages/react/src/components/Modal/index.tsx b/packages/react/src/components/Modal/index.tsx
index ab4650a..516c691 100644
--- a/packages/react/src/components/Modal/index.tsx
+++ b/packages/react/src/components/Modal/index.tsx
@@ -94,26 +94,28 @@ export const ModalInner = ({ closeOnEsc = true, ...props }: ModalProps) => {
       shouldCloseOnEsc={closeOnEsc}
       bodyOpenClassName={classNames("c__modals--opened", NOSCROLL_CLASS)}
     >
-      {!props.hideCloseButton && !props.preventClose && (
-        <div className="c__modal__close">
-          <Button
-            icon={<span className="material-icons">close</span>}
-            color="tertiary-text"
-            size="small"
-            onClick={() => props.onClose()}
-          />
-        </div>
-      )}
-      {props.titleIcon && (
-        <div className="c__modal__title-icon">{props.titleIcon}</div>
-      )}
-      {props.title && <div className="c__modal__title">{props.title}</div>}
+      <div className="c__modal__scroller">
+        {!props.hideCloseButton && !props.preventClose && (
+          <div className="c__modal__close">
+            <Button
+              icon={<span className="material-icons">close</span>}
+              color="tertiary-text"
+              size="small"
+              onClick={props.onClose}
+            />
+          </div>
+        )}
+        {props.titleIcon && (
+          <div className="c__modal__title-icon">{props.titleIcon}</div>
+        )}
+        {props.title && <div className="c__modal__title">{props.title}</div>}
 
-      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
-      <div className="c__modal__content" tabIndex={0}>
-        {props.children}
+        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+        <div className="c__modal__content" tabIndex={0}>
+          {props.children}
+        </div>
+        <ModalFooter {...props} />
       </div>
-      <ModalFooter {...props} />
     </ReactModal>
   );
 };