diff --git a/.changeset/silly-buses-prove.md b/.changeset/silly-buses-prove.md
new file mode 100644
index 00000000..4a592fb2
--- /dev/null
+++ b/.changeset/silly-buses-prove.md
@@ -0,0 +1,5 @@
+---
+"@telegraph/modal": patch
+---
+
+fix modal overflow issue
diff --git a/packages/modal/src/Modal/Modal.stories.tsx b/packages/modal/src/Modal/Modal.stories.tsx
index 054aa0e5..9c6d5723 100644
--- a/packages/modal/src/Modal/Modal.stories.tsx
+++ b/packages/modal/src/Modal/Modal.stories.tsx
@@ -63,6 +63,134 @@ export const Modal: Story = {
   },
 };
 
+export const ScrollingModal: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [open, setOpen] = React.useState(true);
+    const Modal = TelegraphModal;
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Modal</Button>
+        <Modal.Root open={open} onOpenChange={setOpen} a11yTitle="Modal title">
+          <Modal.Content>
+            <Modal.Header>
+              <Heading as="h2" size="3">
+                Modal title
+              </Heading>
+              <Modal.Close />
+            </Modal.Header>
+            <Modal.Body>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+              <h1>Modal body</h1>
+            </Modal.Body>
+            <Modal.Footer>
+              <Button variant="outline" size="1">
+                Cancel
+              </Button>
+              <Button color="accent" size="1">
+                Save
+              </Button>
+            </Modal.Footer>
+          </Modal.Content>
+        </Modal.Root>
+      </>
+    );
+  },
+};
+
 type NestedModalProps = {
   open: boolean;
   onOpenChange: (value: boolean) => void;
diff --git a/packages/modal/src/Modal/Modal.tsx b/packages/modal/src/Modal/Modal.tsx
index 9d78182c..a8782438 100755
--- a/packages/modal/src/Modal/Modal.tsx
+++ b/packages/modal/src/Modal/Modal.tsx
@@ -3,7 +3,7 @@ import { FocusScope } from "@radix-ui/react-focus-scope";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import { Button } from "@telegraph/button";
-import type { Required } from "@telegraph/helpers";
+import { RefToTgphRef, type Required } from "@telegraph/helpers";
 import type {
   PolymorphicProps,
   TgphComponentProps,
@@ -201,12 +201,14 @@ type ContentRef = React.ElementRef<typeof Dialog.Content>;
 const Content = React.forwardRef<ContentRef, ContentProps>(
   ({ children, ...props }, forwardedRef) => {
     return (
-      <FocusScope trapped={true}>
-        <Dialog.Content ref={forwardedRef} asChild {...props}>
-          <Stack direction="column" h="full" {...props}>
-            {children}
-          </Stack>
-        </Dialog.Content>
+      <FocusScope trapped={true} asChild>
+        <RefToTgphRef>
+          <Dialog.Content ref={forwardedRef} asChild {...props}>
+            <Stack direction="column" h="full" {...props}>
+              {children}
+            </Stack>
+          </Dialog.Content>
+        </RefToTgphRef>
       </FocusScope>
     );
   },
@@ -234,9 +236,22 @@ const Close = <T extends TgphElement>({
 type BodyProps<T extends TgphElement> = PolymorphicProps<T> &
   TgphComponentProps<typeof Stack>;
 
-const Body = <T extends TgphElement>({ children, ...props }: BodyProps<T>) => {
+const Body = <T extends TgphElement>({
+  style,
+  children,
+  ...props
+}: BodyProps<T>) => {
   return (
-    <Stack direction="column" px="6" py="4" {...props}>
+    <Stack
+      direction="column"
+      px="6"
+      py="4"
+      style={{
+        overflowY: "auto",
+        ...style,
+      }}
+      {...props}
+    >
       {children}
     </Stack>
   );