diff --git a/apps/www/src/content/docs/components/alert-dialog/demo.ts b/apps/www/src/content/docs/components/alert-dialog/demo.ts
index a0168438f..9fa192183 100644
--- a/apps/www/src/content/docs/components/alert-dialog/demo.ts
+++ b/apps/www/src/content/docs/components/alert-dialog/demo.ts
@@ -7,7 +7,7 @@ export const getCode = (props: { title?: string; description?: string }) => {
       <AlertDialog.Trigger render={<Button color="danger" />}>
         Discard draft
       </AlertDialog.Trigger>
-      <AlertDialog.Content width={400} showCloseButton={false}>
+      <AlertDialog.Content width={400}>
         <AlertDialog.Body>
           <AlertDialog.Title>${title}</AlertDialog.Title>
           <AlertDialog.Description>
@@ -45,7 +45,7 @@ export const controlledDemo = {
         <AlertDialog.Trigger render={<Button color="danger" />}>
           Delete Account
         </AlertDialog.Trigger>
-        <AlertDialog.Content width={450} showCloseButton={false}>
+        <AlertDialog.Content width={450}>
           <AlertDialog.Header>
             <AlertDialog.Title>Delete Account</AlertDialog.Title>
           </AlertDialog.Header>
@@ -88,7 +88,7 @@ export const menuDemo = {
         </Menu>
 
         <AlertDialog open={dialogOpen} onOpenChange={setDialogOpen}>
-          <AlertDialog.Content width={400} showCloseButton={false}>
+          <AlertDialog.Content width={400}>
             <AlertDialog.Body>
               <AlertDialog.Title>Delete item?</AlertDialog.Title>
               <AlertDialog.Description>
@@ -113,7 +113,7 @@ export const discardDemo = {
     <AlertDialog.Trigger render={<Button variant="outline" />}>
       Discard Changes
     </AlertDialog.Trigger>
-    <AlertDialog.Content width={400} showCloseButton={false}>
+    <AlertDialog.Content width={400}>
       <AlertDialog.Header>
         <AlertDialog.Title>Unsaved Changes</AlertDialog.Title>
       </AlertDialog.Header>
@@ -151,7 +151,7 @@ export const nestedDemo = {
               <AlertDialog.Trigger render={<Button color="danger" size="small" />}>
                 Confirm Delete
               </AlertDialog.Trigger>
-              <AlertDialog.Content width={400} showCloseButton={false}>
+              <AlertDialog.Content width={400}>
                 <AlertDialog.Body>
                   <AlertDialog.Title>Final Confirmation</AlertDialog.Title>
                   <AlertDialog.Description>
diff --git a/apps/www/src/content/docs/components/alert-dialog/props.ts b/apps/www/src/content/docs/components/alert-dialog/props.ts
index 9aa4738e6..d2bbf5e1b 100644
--- a/apps/www/src/content/docs/components/alert-dialog/props.ts
+++ b/apps/www/src/content/docs/components/alert-dialog/props.ts
@@ -12,7 +12,7 @@ export interface AlertDialogContentProps {
 
   /**
    * Controls whether to show the close button
-   * @default true
+   * @default false
    */
   showCloseButton?: boolean;
 
diff --git a/packages/raystack/components/alert-dialog/__tests__/alert-dialog.test.tsx b/packages/raystack/components/alert-dialog/__tests__/alert-dialog.test.tsx
index 264add7aa..bccb25da7 100644
--- a/packages/raystack/components/alert-dialog/__tests__/alert-dialog.test.tsx
+++ b/packages/raystack/components/alert-dialog/__tests__/alert-dialog.test.tsx
@@ -22,7 +22,7 @@ const BasicAlertDialog = ({
 }) => (
   <AlertDialog open={open} onOpenChange={onOpenChange} {...props}>
     <AlertDialog.Trigger>{TRIGGER_TEXT}</AlertDialog.Trigger>
-    <AlertDialog.Content>
+    <AlertDialog.Content showCloseButton>
       <AlertDialog.Header>
         <AlertDialog.Title>{ALERT_TITLE}</AlertDialog.Title>
       </AlertDialog.Header>
diff --git a/packages/raystack/components/alert-dialog/alert-dialog-content.tsx b/packages/raystack/components/alert-dialog/alert-dialog-content.tsx
index 824cbb154..e659d1307 100644
--- a/packages/raystack/components/alert-dialog/alert-dialog-content.tsx
+++ b/packages/raystack/components/alert-dialog/alert-dialog-content.tsx
@@ -20,7 +20,7 @@ export interface AlertDialogContentProps
 export const AlertDialogContent = ({
   className,
   children,
-  showCloseButton = true,
+  showCloseButton = false,
   overlay,
   width,
   style,
diff --git a/packages/raystack/components/alert-dialog/alert-dialog-misc.tsx b/packages/raystack/components/alert-dialog/alert-dialog-misc.tsx
index d242a196f..00551e110 100644
--- a/packages/raystack/components/alert-dialog/alert-dialog-misc.tsx
+++ b/packages/raystack/components/alert-dialog/alert-dialog-misc.tsx
@@ -6,6 +6,7 @@ import { cx } from 'class-variance-authority';
 import { type ComponentProps } from 'react';
 import styles from '../dialog/dialog.module.css';
 import { Flex } from '../flex';
+import alertDialogStyles from './alert-dialog.module.css';
 
 export const AlertDialogHeader = ({
   className,
@@ -28,7 +29,7 @@ export const AlertDialogFooter = ({
   <Flex
     gap={5}
     justify='end'
-    className={cx(styles.footer, className)}
+    className={cx(styles.footer, alertDialogStyles.footer, className)}
     {...props}
   />
 );
diff --git a/packages/raystack/components/alert-dialog/alert-dialog.module.css b/packages/raystack/components/alert-dialog/alert-dialog.module.css
new file mode 100644
index 000000000..0501f2f89
--- /dev/null
+++ b/packages/raystack/components/alert-dialog/alert-dialog.module.css
@@ -0,0 +1,3 @@
+.footer {
+  border-top: 0;
+}
diff --git a/packages/raystack/components/dialog/dialog.module.css b/packages/raystack/components/dialog/dialog.module.css
index 10f607ad2..b97cefdaf 100644
--- a/packages/raystack/components/dialog/dialog.module.css
+++ b/packages/raystack/components/dialog/dialog.module.css
@@ -111,8 +111,8 @@
   padding: var(--rs-space-7);
 }
 
-.body:has(+ .footer) {
-  border-bottom: 1px solid var(--rs-color-border-base-primary);
+:where(.body) + .footer {
+  border-top: 1px solid var(--rs-color-border-base-primary);
 }
 
 .description {