diff --git a/apps/www/src/app/examples/page.tsx b/apps/www/src/app/examples/page.tsx
index ba7352813..07a636ddb 100644
--- a/apps/www/src/app/examples/page.tsx
+++ b/apps/www/src/app/examples/page.tsx
@@ -1439,7 +1439,6 @@ const Page = () => {
               <Dialog.Content width='500px'>
                 <Dialog.Header>
                   <Dialog.Title>Dialog Title</Dialog.Title>
-                  <Dialog.CloseButton />
                 </Dialog.Header>
                 <Dialog.Body>
                   <Text>This is the dialog content. </Text>
diff --git a/apps/www/src/components/demo/demo-playground.tsx b/apps/www/src/components/demo/demo-playground.tsx
index 62ea31e85..0fefbe869 100644
--- a/apps/www/src/components/demo/demo-playground.tsx
+++ b/apps/www/src/components/demo/demo-playground.tsx
@@ -100,7 +100,11 @@ export default function DemoPlayground({
     <>
       <DemoPreview type='code' code={previewCode} scope={scope} />
       <Dialog open={openPlayground} onOpenChange={setOpenPlayground}>
-        <Dialog.Content className={styles.playgroundDialog}>
+        <Dialog.Content
+          className={styles.playgroundDialog}
+          showCloseButton={false}
+          showNestedAnimation={false}
+        >
           <Dialog.Header className={styles.playgroundHeader}>
             <DemoTitle className={styles.playgroundTitle} />
             <Flex gap={3} align='center'>
diff --git a/apps/www/src/components/docs/search.tsx b/apps/www/src/components/docs/search.tsx
index 3c35448fc..890b848c6 100644
--- a/apps/www/src/components/docs/search.tsx
+++ b/apps/www/src/components/docs/search.tsx
@@ -1,5 +1,4 @@
 'use client';
-import { getFileFromUrl, getFolderFromUrl } from '@/lib/utils';
 import {
   Cross1Icon,
   ExclamationTriangleIcon,
@@ -15,13 +14,14 @@ import {
 } from '@raystack/apsara';
 import { cx } from 'class-variance-authority';
 import {
+  flattenTree,
   type Item as PageItem,
-  Root,
-  flattenTree
+  Root
 } from 'fumadocs-core/page-tree';
 import { useDocsSearch } from 'fumadocs-core/search/client';
 import { useRouter } from 'next/navigation';
 import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { getFileFromUrl, getFolderFromUrl } from '@/lib/utils';
 import styles from './search.module.css';
 
 type Item = Omit<PageItem, 'type'> & {
@@ -134,10 +134,8 @@ export default function DocsSearch({ pageTree }: { pageTree: Root }) {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <Dialog.Trigger asChild>
-        <IconButton size={3} aria-label='Search docs'>
-          <MagnifyingGlassIcon />
-        </IconButton>
+      <Dialog.Trigger render={<IconButton size={3} aria-label='Search docs' />}>
+        <MagnifyingGlassIcon />
       </Dialog.Trigger>
       <Dialog.Content width={512} className={styles.searchContainer}>
         <Command className={styles.searchCommand} filter={() => 1}>
diff --git a/apps/www/src/components/playground/code-block-examples.tsx b/apps/www/src/components/playground/code-block-examples.tsx
index 5e84c6004..823af5482 100644
--- a/apps/www/src/components/playground/code-block-examples.tsx
+++ b/apps/www/src/components/playground/code-block-examples.tsx
@@ -25,8 +25,8 @@ export function CodeBlockExamples() {
           </CodeBlock.Header>
           <CodeBlock.Content>
             <CodeBlock.Code language='jsx'>{`<Dialog>
-  <Dialog.Trigger asChild>
-    <Button>Basic Dialog</Button>
+  <Dialog.Trigger render={<Button />}>
+    Basic Dialog
   </Dialog.Trigger>
   <Dialog.Content
     width={300}
@@ -35,7 +35,6 @@ export function CodeBlockExamples() {
   >
     <Dialog.Header>
       <Dialog.Title>A simple dialog example</Dialog.Title>
-      <Dialog.CloseButton />
     </Dialog.Header>
     <Dialog.Body>
       <Dialog.Description>
@@ -44,9 +43,7 @@ export function CodeBlockExamples() {
     </Dialog.Body>
     <Dialog.Footer>
       <Button>OK</Button>
-      <Dialog.Close asChild>
-        <Button color="neutral">Cancel</Button>
-      </Dialog.Close>
+      <Dialog.Close render={<Button color="neutral">Cancel</Button>} />
     </Dialog.Footer>
   </Dialog.Content>
 </Dialog>`}</CodeBlock.Code>
diff --git a/apps/www/src/components/playground/dialog-examples.tsx b/apps/www/src/components/playground/dialog-examples.tsx
index 83e1ddc12..2cc1074fb 100644
--- a/apps/www/src/components/playground/dialog-examples.tsx
+++ b/apps/www/src/components/playground/dialog-examples.tsx
@@ -8,14 +8,14 @@ export function DialogExamples() {
     <PlaygroundLayout title='Dialog'>
       <Flex gap='medium'>
         <Dialog>
-          <Dialog.Trigger asChild>
-            <Button> Dialog</Button>
-          </Dialog.Trigger>
+          <Dialog.Trigger render={<Button />}>Dialog</Dialog.Trigger>
           <Dialog.Content
             width='400px'
-            overlayBlur
-            overlayClassName='custom-overlay'
-            overlayStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
+            overlay={{
+              blur: true,
+              className: 'custom-overlay',
+              style: { backgroundColor: 'rgba(0, 0, 0, 0.5)' }
+            }}
           >
             <Dialog.Title>Custom Styled Dialog</Dialog.Title>
             <Dialog.Description className='custom-description'>
@@ -25,10 +25,10 @@ export function DialogExamples() {
           </Dialog.Content>
         </Dialog>
         <Dialog>
-          <Dialog.Trigger asChild>
-            <Button variant='outline'>Open Dialog</Button>
+          <Dialog.Trigger render={<Button variant='outline' />}>
+            Open Dialog
           </Dialog.Trigger>
-          <Dialog.Content width={600} close={false}>
+          <Dialog.Content width={600} showCloseButton={false}>
             <Dialog.Title>No Close Button</Dialog.Title>
             <Dialog.Description>
               This dialog doesn't show the close button.
diff --git a/apps/www/src/content/docs/components/code-block/demo.ts b/apps/www/src/content/docs/components/code-block/demo.ts
index bee5adfa7..04e4ef8de 100644
--- a/apps/www/src/content/docs/components/code-block/demo.ts
+++ b/apps/www/src/content/docs/components/code-block/demo.ts
@@ -11,8 +11,8 @@ const tsxCode = `{\`function add(a: number, b: number): number {
 }\`}`;
 
 const longCode = `{\`<Dialog>
-  <Dialog.Trigger asChild>
-    <Button>Basic Dialog</Button>
+  <Dialog.Trigger render={<Button />}>
+    Basic Dialog
   </Dialog.Trigger>
   <Dialog.Content
     width={300}
@@ -21,7 +21,6 @@ const longCode = `{\`<Dialog>
   >
     <Dialog.Header>
       <Dialog.Title>A simple dialog example</Dialog.Title>
-      <Dialog.CloseButton />
     </Dialog.Header>
     <Dialog.Body>
       <Dialog.Description>
@@ -30,9 +29,7 @@ const longCode = `{\`<Dialog>
     </Dialog.Body>
     <Dialog.Footer>
       <Button>OK</Button>
-      <Dialog.Close asChild>
-        <Button color="neutral">Cancel</Button>
-      </Dialog.Close>
+      <Dialog.Close render={<Button color="neutral">Cancel</Button>} />
     </Dialog.Footer>
   </Dialog.Content>
 </Dialog>\`}`;
diff --git a/apps/www/src/content/docs/components/dialog/demo.ts b/apps/www/src/content/docs/components/dialog/demo.ts
index a343b2928..6757548a2 100644
--- a/apps/www/src/content/docs/components/dialog/demo.ts
+++ b/apps/www/src/content/docs/components/dialog/demo.ts
@@ -1,11 +1,11 @@
 'use client';
 
-export const getCode = (props: any) => {
-  const { title, description, ...rest } = props;
+export const getCode = (props: { title?: string; description?: string }) => {
+  const { title, description } = props;
   return `
     <Dialog>
-      <Dialog.Trigger asChild>
-        <Button >Basic Dialog</Button>
+      <Dialog.Trigger render={<Button />}>
+        Basic Dialog
       </Dialog.Trigger>
       <Dialog.Content
         width={300}
@@ -14,7 +14,6 @@ export const getCode = (props: any) => {
       >
         <Dialog.Header>
           <Dialog.Title>${title}</Dialog.Title>
-          <Dialog.CloseButton />
         </Dialog.Header>
         <Dialog.Body>
           <Dialog.Description>
@@ -22,7 +21,7 @@ export const getCode = (props: any) => {
           </Dialog.Description>
         </Dialog.Body>
         <Dialog.Footer>
-        <Dialog.Close asChild><Button variant="outline" color="neutral">Cancel</Button></Dialog.Close>
+        <Dialog.Close render={<Button variant="outline" color="neutral">Cancel</Button>} />
         <Button>OK</Button>
         </Dialog.Footer>
       </Dialog.Content>
@@ -49,8 +48,8 @@ export const controlledDemo = {
 
     return (
       <Dialog open={open} onOpenChange={setOpen}>
-        <Dialog.Trigger asChild>
-          <Button>Controlled Dialog</Button>
+        <Dialog.Trigger render={<Button />}>
+          Controlled Dialog
         </Dialog.Trigger>
         <Dialog.Content width={600}>
           <Dialog.Body>
@@ -69,14 +68,12 @@ export const customDemo = {
   type: 'code',
   code: `
   <Dialog>
-    <Dialog.Trigger asChild>
-      <Button>Styled Dialog</Button>
+    <Dialog.Trigger render={<Button />}>
+      Styled Dialog
     </Dialog.Trigger>
     <Dialog.Content
       width="400px"
-      overlayBlur
-      overlayClassName="custom-overlay"
-      overlayStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
+      overlay={{ blur: true, className: 'custom-overlay', style: { backgroundColor: 'rgba(0, 0, 0, 0.5)' } }}
     >
       <Dialog.Body>
         <Dialog.Title>Custom Styled Dialog</Dialog.Title>
@@ -92,18 +89,15 @@ export const onlyHeaderDemo = {
   type: 'code',
   code: `
   <Dialog>
-    <Dialog.Trigger asChild>
-      <Button>Only Header and Body</Button>
+    <Dialog.Trigger render={<Button />}>
+      Only Header and Body
     </Dialog.Trigger>
     <Dialog.Content
       width="400px"
-      overlayBlur
-      overlayClassName="custom-overlay"
-      overlayStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
+      overlay={{ blur: true, className: 'custom-overlay', style: { backgroundColor: 'rgba(0, 0, 0, 0.5)' } }}
     >
       <Dialog.Header>
         <Dialog.Title>Title</Dialog.Title>
-        <Dialog.CloseButton />
       </Dialog.Header>
       <Dialog.Body>
         <Dialog.Description className="custom-description">
@@ -118,14 +112,12 @@ export const onlyFooterDemo = {
   type: 'code',
   code: `
   <Dialog>
-    <Dialog.Trigger asChild>
-      <Button>Only Footer and Body</Button>
+    <Dialog.Trigger render={<Button />}>
+      Only Footer and Body
     </Dialog.Trigger>
     <Dialog.Content
       width="400px"
-      overlayBlur
-      overlayClassName="custom-overlay"
-      overlayStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
+      overlay={{ blur: true, className: 'custom-overlay', style: { backgroundColor: 'rgba(0, 0, 0, 0.5)' } }}
     >
       <Dialog.Body>
         <Dialog.Title>Title</Dialog.Title>
@@ -134,9 +126,60 @@ export const onlyFooterDemo = {
         </Dialog.Description>
       </Dialog.Body>
       <Dialog.Footer>
-        <Dialog.Close asChild><Button color="neutral">Close</Button></Dialog.Close>
+        <Dialog.Close render={<Button color="neutral">Close</Button>} />
         <Button color="danger">Cancel</Button>
       </Dialog.Footer>
     </Dialog.Content>
   </Dialog>`
 };
+
+export const nestedDemo = {
+  type: 'code',
+  code: `
+  function NestedDialogExample() {
+    const [parentOpen, setParentOpen] = React.useState(false);
+    const [nestedOpen, setNestedOpen] = React.useState(false);
+
+    return (
+      <>
+        <Dialog open={parentOpen} onOpenChange={setParentOpen}>
+          <Dialog.Trigger render={<Button />}>
+            Open Parent Dialog
+          </Dialog.Trigger>
+          <Dialog.Content width={400}>
+            <Dialog.Header>
+              <Dialog.Title>Parent Dialog</Dialog.Title>
+            </Dialog.Header>
+            <Dialog.Body>
+              <Dialog.Description>
+                This is the parent dialog. Click the button below to open a nested dialog.
+              </Dialog.Description>
+              <Dialog open={nestedOpen} onOpenChange={setNestedOpen}>
+                <Dialog.Trigger render={<Button />}>
+                  Open Nested Dialog
+                </Dialog.Trigger>
+                <Dialog.Content width={400}>
+                  <Dialog.Header>
+                    <Dialog.Title>Nested Dialog</Dialog.Title>
+                  </Dialog.Header>
+                  <Dialog.Body>
+                    <Dialog.Description>
+                      This is a nested dialog. Notice how the parent dialog scales down
+                      and becomes slightly transparent when this dialog is open.
+                    </Dialog.Description>
+                  </Dialog.Body>
+                  <Dialog.Footer>
+                    <Dialog.Close render={<Button variant="outline" color="neutral">Close</Button>} />
+                  </Dialog.Footer>
+                </Dialog.Content>
+              </Dialog>
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Dialog.Close render={<Button variant="outline" color="neutral">Close Parent</Button>} />
+            </Dialog.Footer>
+          </Dialog.Content>
+        </Dialog>
+      </>
+    );
+  }`
+};
diff --git a/apps/www/src/content/docs/components/dialog/index.mdx b/apps/www/src/content/docs/components/dialog/index.mdx
index ddb87622a..78463f578 100644
--- a/apps/www/src/content/docs/components/dialog/index.mdx
+++ b/apps/www/src/content/docs/components/dialog/index.mdx
@@ -4,7 +4,7 @@ description: A window overlaid on either the primary window or another dialog wi
 source: packages/raystack/components/dialog
 ---
 
-import { playground, closeDemo, customDemo, controlledDemo, onlyHeaderDemo, onlyFooterDemo } from "./demo.ts";
+import { playground, closeDemo, customDemo, controlledDemo, onlyHeaderDemo, onlyFooterDemo, nestedDemo } from "./demo.ts";
 
 <Demo data={playground} />
 
@@ -79,6 +79,11 @@ Example with header and body.
 
 <Demo data={onlyFooterDemo} />
 
+### Nested Dialogs
+
+You can nest dialogs within one another. When a nested dialog opens, the parent dialog automatically scales down and becomes slightly transparent. The nested dialog's backdrop won't be rendered, allowing you to see the parent dialog behind it.
+
+<Demo data={nestedDemo} />
 
 ### Accessibility
 
diff --git a/apps/www/src/content/docs/components/dialog/props.ts b/apps/www/src/content/docs/components/dialog/props.ts
index 67a9ee7f2..2e517e8af 100644
--- a/apps/www/src/content/docs/components/dialog/props.ts
+++ b/apps/www/src/content/docs/components/dialog/props.ts
@@ -16,26 +16,28 @@ export interface DialogContentProps {
   /** Controls dialog width */
   width?: string | number;
 
-  /** Enables backdrop blur effect */
-  overlayBlur?: boolean;
+  /**
+   * Controls whether to show the close button
+   * @default true
+   */
+  showCloseButton?: boolean;
 
-  /** Custom class for overlay styling */
-  overlayClassName?: string;
+  /**
+   * Toggle nested dialog animation (scaling and translation)
+   * @default true
+   */
+  showNestedAnimation?: boolean;
 
-  /** Custom styles for overlay */
-  overlayStyle?: React.CSSProperties;
+  /** Overlay configuration including blur, className, and style */
+  overlay?: {
+    blur?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    forceRender?: boolean;
+  } & React.ComponentPropsWithoutRef<'div'>;
 
   /** Additional CSS class names */
   className?: string;
-
-  /** Position of the dialog */
-  side?: 'top' | 'right' | 'bottom' | 'left';
-
-  /** Accessible label for the dialog */
-  ariaLabel?: string;
-
-  /** Detailed description for screen readers */
-  ariaDescription?: string;
 }
 
 export interface DialogHeaderProps {
diff --git a/apps/www/src/styles.css b/apps/www/src/styles.css
index 68914c329..c3d2b6c94 100644
--- a/apps/www/src/styles.css
+++ b/apps/www/src/styles.css
@@ -1,5 +1,4 @@
 * {
-  overscroll-behavior: none;
   box-sizing: border-box;
 }
 :root {
diff --git a/packages/raystack/components/dialog/__tests__/dialog.test.tsx b/packages/raystack/components/dialog/__tests__/dialog.test.tsx
index fbc396b0e..893707000 100644
--- a/packages/raystack/components/dialog/__tests__/dialog.test.tsx
+++ b/packages/raystack/components/dialog/__tests__/dialog.test.tsx
@@ -24,7 +24,6 @@ const BasicDialog = ({
     <Dialog.Content>
       <Dialog.Header>
         <Dialog.Title>{DIALOG_TITLE}</Dialog.Title>
-        <Dialog.CloseButton />
       </Dialog.Header>
       <Dialog.Body>
         <Dialog.Description>{DIALOG_DESCRIPTION}</Dialog.Description>
diff --git a/packages/raystack/components/dialog/dialog-content.tsx b/packages/raystack/components/dialog/dialog-content.tsx
new file mode 100644
index 000000000..98c75eae2
--- /dev/null
+++ b/packages/raystack/components/dialog/dialog-content.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import { Dialog as DialogPrimitive } from '@base-ui/react';
+import { cx } from 'class-variance-authority';
+import { type ElementRef, forwardRef } from 'react';
+import styles from './dialog.module.css';
+import { CloseButton } from './dialog-misc';
+
+export interface DialogContentProps extends DialogPrimitive.Popup.Props {
+  showCloseButton?: boolean;
+  overlay?: DialogPrimitive.Backdrop.Props & { blur?: boolean };
+  width?: string | number;
+  /**
+   * Toggles nested dialog animation (scaling and translation)
+   * `@default` true
+   */
+  showNestedAnimation?: boolean;
+}
+
+export const DialogContent = forwardRef<
+  ElementRef<typeof DialogPrimitive.Popup>,
+  DialogContentProps
+>(
+  (
+    {
+      className,
+      children,
+      showCloseButton = true,
+      overlay,
+      width,
+      style,
+      showNestedAnimation = true,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Backdrop
+          {...overlay}
+          className={cx(
+            styles.dialogOverlay,
+            overlay?.blur && styles.overlayBlur,
+            overlay?.className
+          )}
+        />
+        <DialogPrimitive.Viewport className={styles.viewport}>
+          <DialogPrimitive.Popup
+            ref={ref}
+            className={cx(
+              styles.dialogContent,
+              showNestedAnimation && styles.showNestedAnimation,
+              className
+            )}
+            style={{ width, ...style }}
+            {...props}
+          >
+            {children}
+            {showCloseButton && <CloseButton className={styles.closeButton} />}
+          </DialogPrimitive.Popup>
+        </DialogPrimitive.Viewport>
+      </DialogPrimitive.Portal>
+    );
+  }
+);
+
+DialogContent.displayName = 'Dialog.Content';
diff --git a/packages/raystack/components/dialog/dialog-misc.tsx b/packages/raystack/components/dialog/dialog-misc.tsx
new file mode 100644
index 000000000..fd07ce9b7
--- /dev/null
+++ b/packages/raystack/components/dialog/dialog-misc.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import { Dialog as DialogPrimitive } from '@base-ui/react';
+import { Cross1Icon } from '@radix-ui/react-icons';
+import { cx } from 'class-variance-authority';
+import { ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react';
+import { Flex } from '../flex';
+import styles from './dialog.module.css';
+
+export const DialogHeader = forwardRef<
+  ElementRef<typeof Flex>,
+  ComponentPropsWithoutRef<typeof Flex>
+>(({ className, ...props }, ref) => (
+  <Flex
+    justify='between'
+    align='center'
+    className={cx(styles.header, className)}
+    ref={ref}
+    {...props}
+  />
+));
+
+DialogHeader.displayName = 'Dialog.Header';
+
+export const DialogFooter = forwardRef<
+  ElementRef<typeof Flex>,
+  ComponentPropsWithoutRef<typeof Flex>
+>(({ className, ...props }, ref) => (
+  <Flex
+    gap={5}
+    justify='end'
+    className={cx(styles.footer, className)}
+    ref={ref}
+    {...props}
+  />
+));
+
+DialogFooter.displayName = 'Dialog.Footer';
+
+export const DialogBody = forwardRef<
+  ElementRef<typeof Flex>,
+  ComponentPropsWithoutRef<typeof Flex>
+>(({ className, ...props }, ref) => (
+  <Flex
+    direction='column'
+    gap={3}
+    className={cx(styles.body, className)}
+    ref={ref}
+    {...props}
+  />
+));
+
+DialogBody.displayName = 'Dialog.Body';
+
+export const CloseButton = forwardRef<
+  ElementRef<typeof DialogPrimitive.Close>,
+  DialogPrimitive.Close.Props
+>(({ className, ...props }, ref) => {
+  return (
+    <DialogPrimitive.Close
+      ref={ref}
+      className={cx(styles.close, className)}
+      aria-label='Close dialog'
+      {...props}
+    >
+      <Cross1Icon aria-hidden='true' />
+    </DialogPrimitive.Close>
+  );
+});
+
+CloseButton.displayName = 'Dialog.CloseButton';
+
+export const DialogTitle = forwardRef<
+  ElementRef<typeof DialogPrimitive.Title>,
+  DialogPrimitive.Title.Props
+>(({ className, ...props }, ref) => {
+  return (
+    <DialogPrimitive.Title
+      ref={ref}
+      className={cx(styles.title, className)}
+      {...props}
+    />
+  );
+});
+
+DialogTitle.displayName = 'Dialog.Title';
+
+export const DialogDescription = forwardRef<
+  ElementRef<typeof DialogPrimitive.Description>,
+  DialogPrimitive.Description.Props
+>(({ className, ...props }, ref) => {
+  return (
+    <DialogPrimitive.Description
+      ref={ref}
+      className={cx(styles.description, className)}
+      {...props}
+    />
+  );
+});
+
+DialogDescription.displayName = 'Dialog.Description';
diff --git a/packages/raystack/components/dialog/dialog.module.css b/packages/raystack/components/dialog/dialog.module.css
index f2f4b0076..7cf020e82 100644
--- a/packages/raystack/components/dialog/dialog.module.css
+++ b/packages/raystack/components/dialog/dialog.module.css
@@ -2,28 +2,53 @@
   background-color: var(--rs-color-overlay-base-primary);
   position: fixed;
   inset: 0;
+  transition: opacity 150ms cubic-bezier(0.45, 1.005, 0, 1.005);
   z-index: var(--rs-z-index-portal);
 }
 
+.dialogOverlay[data-starting-style],
+.dialogOverlay[data-ending-style] {
+  opacity: 0;
+}
+
 .dialogContent {
   background-color: var(--rs-color-background-base-primary);
   border-radius: var(--rs-radius-2);
   box-shadow: var(--rs-shadow-floating);
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 90vw;
+  max-width: 90vw;
   min-width: 200px;
   min-height: 100px;
   max-height: 85vh;
   padding: 0;
-  z-index: var(--rs-z-index-portal);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transition: all 150ms;
+  transform: translate(-50%, -50%);
+}
+
+.dialogContent.showNestedAnimation {
+  transform: translate(-50%, -50%)
+    scale(calc(1 - 0.1 * var(--nested-dialogs, 0)));
+  translate: 0 calc(0px + 1.25rem * var(--nested-dialogs, 0));
 }
 
 .dialogContent:focus {
   outline: none;
 }
+.dialogContent[data-nested-dialog-open]::after {
+  content: "";
+  inset: 0;
+  position: absolute;
+  border-radius: inherit;
+  background-color: rgb(0 0 0 / 0.05);
+}
+
+.dialogContent.showNestedAnimation[data-starting-style],
+.dialogContent.showNestedAnimation[data-ending-style] {
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.9);
+}
 
 .close {
   all: unset;
@@ -35,6 +60,12 @@
   cursor: pointer;
 }
 
+.closeButton {
+  position: absolute;
+  top: var(--rs-space-5);
+  right: var(--rs-space-7);
+}
+
 .close:hover {
   background-color: var(--rs-color-background-base-primary-hover);
   color: var(--rs-color-foreground-base-primary);
@@ -44,15 +75,18 @@
   backdrop-filter: var(--rs-blur-lg);
 }
 
-.dialogOverlay[data-state="open"] {
-  animation: fadeIn 150ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-.dialogOverlay[data-state="close"] {
-  animation: fadeOut 150ms cubic-bezier(0.22, 1, 0.36, 1);
+.viewport {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  inset: 0;
+  z-index: var(--rs-z-index-portal);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .overlay {
+  .dialogOverlay,
+  .dialogContent {
     animation: none;
     transition: none;
   }
@@ -65,7 +99,6 @@
 
 .title {
   color: var(--rs-color-foreground-base-primary);
-  /* Body/Large Plus */
   font-size: var(--rs-font-size-large);
   font-style: normal;
   font-weight: var(--rs-font-weight-medium);
diff --git a/packages/raystack/components/dialog/dialog.tsx b/packages/raystack/components/dialog/dialog.tsx
index 08b1ee094..f8da8188e 100644
--- a/packages/raystack/components/dialog/dialog.tsx
+++ b/packages/raystack/components/dialog/dialog.tsx
@@ -1,194 +1,20 @@
-import { Cross1Icon } from '@radix-ui/react-icons';
-import { cva, cx, VariantProps } from 'class-variance-authority';
-import { Dialog as DialogPrimitive } from 'radix-ui';
+import { Dialog as DialogPrimitive } from '@base-ui/react';
+import { DialogContent } from './dialog-content';
 import {
-  ComponentProps,
-  ComponentPropsWithoutRef,
-  ElementRef,
-  forwardRef
-} from 'react';
-import { Flex } from '../flex';
-import styles from './dialog.module.css';
-
-const dialogContent = cva(styles.dialogContent);
-
-export interface DialogContentProps
-  extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
-    VariantProps<typeof dialogContent> {
-  ariaLabel?: string;
-  ariaDescription?: string;
-  overlayBlur?: boolean;
-  overlayClassName?: string;
-  overlayStyle?: React.CSSProperties;
-  width?: string | number;
-  scrollableOverlay?: boolean;
-}
-
-const DialogContent = forwardRef<
-  ElementRef<typeof DialogPrimitive.Content>,
-  DialogContentProps
->(
-  (
-    {
-      className,
-      children,
-      ariaLabel,
-      ariaDescription,
-      overlayBlur = false,
-      overlayClassName,
-      overlayStyle,
-      width,
-      scrollableOverlay = false,
-      ...props
-    },
-    ref
-  ) => {
-    const overlayProps: DialogPrimitive.DialogOverlayProps = {
-      className: cx(
-        styles.dialogOverlay,
-        overlayClassName,
-        overlayBlur && styles.overlayBlur
-      ),
-      style: overlayStyle,
-      'aria-hidden': 'true',
-      role: 'presentation'
-    };
-
-    const content = (
-      <DialogPrimitive.Content
-        ref={ref}
-        className={dialogContent({ className })}
-        style={{ width, ...props.style }}
-        aria-label={ariaLabel}
-        aria-describedby={ariaDescription ? 'dialog-description' : undefined}
-        {...props}
-      >
-        {children}
-      </DialogPrimitive.Content>
-    );
-    return (
-      <DialogPrimitive.Portal>
-        {scrollableOverlay ? (
-          <DialogPrimitive.Overlay {...overlayProps}>
-            {content}
-          </DialogPrimitive.Overlay>
-        ) : (
-          <>
-            <DialogPrimitive.Overlay {...overlayProps} />
-            {content}
-          </>
-        )}
-      </DialogPrimitive.Portal>
-    );
-  }
-);
-
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({
-  children,
-  className
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) => (
-  <Flex
-    justify='between'
-    align='center'
-    className={cx(styles.header, className)}
-  >
-    {children}
-  </Flex>
-);
-
-const DialogFooter = ({
-  children,
-  className
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) => (
-  <Flex gap={5} justify='end' className={cx(styles.footer, className)}>
-    {children}
-  </Flex>
-);
-
-const DialogBody = ({
-  children,
-  className
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) => (
-  <Flex direction='column' gap={3} className={cx(styles.body, className)}>
-    {children}
-  </Flex>
-);
-
-type CloseButtonProps = ComponentProps<typeof DialogPrimitive.Close>;
-export function CloseButton({ className, ...props }: CloseButtonProps) {
-  return (
-    <DialogPrimitive.Close
-      className={cx(styles.close, className)}
-      aria-label='Close dialog'
-      {...props}
-    >
-      <Cross1Icon />
-    </DialogPrimitive.Close>
-  );
-}
-
-interface DialogTitleProps
-  extends ComponentProps<typeof DialogPrimitive.Title> {
-  children: React.ReactNode;
-}
-
-export function DialogTitle({
-  children,
-  className,
-  ...props
-}: DialogTitleProps) {
-  return (
-    <DialogPrimitive.Title
-      {...props}
-      role='heading'
-      aria-level={1}
-      className={cx(styles.title, className)}
-    >
-      {children}
-    </DialogPrimitive.Title>
-  );
-}
-
-interface DialogDescriptionProps
-  extends ComponentProps<typeof DialogPrimitive.Description> {
-  children: React.ReactNode;
-  className?: string;
-}
-
-export function DialogDescription({
-  children,
-  className,
-  ...props
-}: DialogDescriptionProps) {
-  return (
-    <DialogPrimitive.Description
-      {...props}
-      className={cx(styles.description, className)}
-      id='dialog-description'
-      role='document'
-    >
-      {children}
-    </DialogPrimitive.Description>
-  );
-}
+  CloseButton,
+  DialogBody,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from './dialog-misc';
 
 export const Dialog = Object.assign(DialogPrimitive.Root, {
-  Trigger: DialogPrimitive.Trigger,
-  Content: DialogContent,
   Header: DialogHeader,
   Footer: DialogFooter,
   Body: DialogBody,
+  Trigger: DialogPrimitive.Trigger,
+  Content: DialogContent,
   Close: DialogPrimitive.Close,
   CloseButton: CloseButton,
   Title: DialogTitle,
diff --git a/packages/raystack/components/sheet/__tests__/sheet.test.tsx b/packages/raystack/components/sheet/__tests__/sheet.test.tsx
index a9b3e81df..f72c23035 100644
--- a/packages/raystack/components/sheet/__tests__/sheet.test.tsx
+++ b/packages/raystack/components/sheet/__tests__/sheet.test.tsx
@@ -278,16 +278,6 @@ describe('Sheet', () => {
   });
 
   describe('Accessibility', () => {
-    // it('has correct ARIA roles', async () => {
-    //   await renderAndOpenSheet(<BasicSheet />);
-
-    //   await waitFor(() => {
-    //     const dialog = screen.getByRole('dialog');
-    //     expect(dialog).toBeInTheDocument();
-    //     expect(dialog).toHaveAttribute('tabIndex', '-1');
-    //   });
-    // });
-
     it('has proper ARIA attributes', async () => {
       await renderAndOpenSheet(<BasicSheet />);
 
diff --git a/packages/raystack/components/sheet/sheet.tsx b/packages/raystack/components/sheet/sheet.tsx
index 06f0d5c25..6a0e19893 100644
--- a/packages/raystack/components/sheet/sheet.tsx
+++ b/packages/raystack/components/sheet/sheet.tsx
@@ -9,7 +9,6 @@ import {
 } from './sheet-misc';
 
 export type { SheetContentProps } from './sheet-content';
-export type { SheetRootProps } from './sheet-root';
 
 export const Sheet = Object.assign(DialogPrimitive.Root, {
   Trigger: DialogPrimitive.Trigger,