diff --git a/frontend/src/components/Dialog/Dialog.module.css b/frontend/src/components/Dialog/Dialog.module.css
index 6770cb54f..0011bd29e 100644
--- a/frontend/src/components/Dialog/Dialog.module.css
+++ b/frontend/src/components/Dialog/Dialog.module.css
@@ -13,26 +13,36 @@
  * limitations under the License.
  */
 
-
-.overlay {
+.overlay,
+.scroll-container {
     position: fixed;
     inset: 0;
     background: rgba(3 12 27 / 52.8%);
 }
 
+.scroll-container {
+    overflow-y: auto;
+}
+
+.container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100svh;
+}
+
 .dialog {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: calc(496px + var(--cpd-space-3x) * 2);
-    max-width: calc(100vw - var(--cpd-space-4x));
+    /* To position the close icon */
+    position: relative;
+    margin: var(--cpd-space-4x);
+    min-width: 0;
+    flex: 0 1 520px;
 }
 
 .body {
     display: flex;
     flex-direction: column;
-    gap: var(--cpd-space-8x);
+    gap: var(--cpd-space-4x);
     background: var(--cpd-color-bg-canvas-default);
 }
 
@@ -43,17 +53,13 @@
     margin-block-start: var(--cpd-space-4x);
 }
 
-.actions {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cpd-space-4x);
-}
-
 .dialog .body {
     padding: var(--cpd-space-4x) var(--cpd-space-10x) var(--cpd-space-10x);
 }
 
 .dialog .title {
+    /* This adds a padding to the title to make sure it overflows correctly
+     * and not behind the close button */
     padding-inline-end: var(--cpd-space-7x);
 }
 
diff --git a/frontend/src/components/Dialog/Dialog.stories.tsx b/frontend/src/components/Dialog/Dialog.stories.tsx
index b4f32961a..3c4547fbe 100644
--- a/frontend/src/components/Dialog/Dialog.stories.tsx
+++ b/frontend/src/components/Dialog/Dialog.stories.tsx
@@ -54,3 +54,10 @@ export default meta;
 type Story = StoryObj<typeof Template>;
 
 export const Basic: Story = {};
+
+export const LongText: Story = {
+  args: {
+    description:
+      "Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.",
+  },
+};
diff --git a/frontend/src/components/Dialog/Dialog.tsx b/frontend/src/components/Dialog/Dialog.tsx
index 6d118c659..6c5e4ef19 100644
--- a/frontend/src/components/Dialog/Dialog.tsx
+++ b/frontend/src/components/Dialog/Dialog.tsx
@@ -83,20 +83,23 @@ export const Dialog: React.FC<Props> = ({
     <DialogRoot open={open} onOpenChange={onOpenChange}>
       {trigger && <Trigger asChild>{trigger}</Trigger>}
       <Portal>
-        <DialogOverlay className={styles.overlay} />
-        <DialogContent asChild>
-          <Glass className={styles.dialog}>
-            <div className={styles.body}>
-              {children}
+        {/* This container has a fixed position and scrolls over the Y axis if needed */}
+        <DialogOverlay className={styles.scrollContainer}>
+          {/* This container is used as a flexbox parent to center the dialog */}
+          <div className={styles.container}>
+            <Glass className={styles.dialog}>
+              <DialogContent className={styles.body}>
+                {children}
 
-              <Tooltip label={t("action.close")}>
-                <Close className={styles.close}>
-                  <IconClose />
-                </Close>
-              </Tooltip>
-            </div>
-          </Glass>
-        </DialogContent>
+                <Tooltip label={t("action.close")}>
+                  <Close className={styles.close}>
+                    <IconClose />
+                  </Close>
+                </Tooltip>
+              </DialogContent>
+            </Glass>
+          </div>
+        </DialogOverlay>
       </Portal>
     </DialogRoot>
   );
@@ -106,8 +109,4 @@ export const Title: React.FC<PropsWithChildren> = ({ children }) => (
   <DialogTitle className={styles.title}>{children}</DialogTitle>
 );
 
-export const Actions: React.FC<PropsWithChildren> = ({ children }) => (
-  <div className={styles.actions}>{children}</div>
-);
-
 export { Description, Close } from "@radix-ui/react-dialog";
diff --git a/frontend/src/components/Dialog/index.ts b/frontend/src/components/Dialog/index.ts
index 176e5490a..fd24249d2 100644
--- a/frontend/src/components/Dialog/index.ts
+++ b/frontend/src/components/Dialog/index.ts
@@ -12,4 +12,4 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-export { Close, Dialog, Title, Description, Actions } from "./Dialog";
+export { Close, Dialog, Title, Description } from "./Dialog";