diff --git a/packages/libs/react-ui/src/components/Dialog/Dialog.stories.tsx b/packages/libs/react-ui/src/components/Dialog/Dialog.stories.tsx
index 1c9cd917a19..c47a134bfb7 100644
--- a/packages/libs/react-ui/src/components/Dialog/Dialog.stories.tsx
+++ b/packages/libs/react-ui/src/components/Dialog/Dialog.stories.tsx
@@ -1,9 +1,10 @@
+import { Button } from '@components/Button';
+import { Dialog } from '@components/Dialog';
+import type { IModalProps } from '@components/Modal';
+import { Stack } from '@components/Stack';
+import { Text } from '@components/Typography';
 import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
-import { Button } from '../Button';
-import type { IModalProps } from '../Modal';
-import { Text } from '../Typography';
-import { Dialog } from './Dialog';
 
 const meta: Meta<{ title?: string } & IModalProps> = {
   title: 'Overlays/Dialog',
@@ -25,21 +26,17 @@ export const DialogStory: Story = {
   name: 'Dialog',
   render: () => {
     const [isOpen, setIsOpen] = useState(false);
+
     return (
       <>
         <Button onClick={() => setIsOpen(true)}>Modal Trigger</Button>
         <Dialog
           isOpen={isOpen}
           onOpenChange={(isOpen) => setIsOpen(isOpen)}
-          title={
-            <>
-              <h2>Dialog Title</h2>
-              <p>Dialog description</p>
-            </>
-          }
+          title="Dialog Title"
         >
           {(state) => (
-            <>
+            <Stack direction="column" gap="$6" alignItems="flex-end">
               <Text>
                 Dessert gummies pie biscuit chocolate bar cheesecake. Toffee
                 chocolate bar ice cream cake jujubes pudding fruitcake marzipan.
@@ -56,7 +53,7 @@ export const DialogStory: Story = {
                 chups wafer fruitcake lollipop apple pie bonbon tart bonbon.
               </Text>
               <Button onClick={state.close}>Close Button</Button>
-            </>
+            </Stack>
           )}
         </Dialog>
       </>
diff --git a/packages/libs/react-ui/src/components/Dialog/Dialog.tsx b/packages/libs/react-ui/src/components/Dialog/Dialog.tsx
index 3b477a5adf1..8c5ef9687e0 100644
--- a/packages/libs/react-ui/src/components/Dialog/Dialog.tsx
+++ b/packages/libs/react-ui/src/components/Dialog/Dialog.tsx
@@ -20,21 +20,13 @@ import {
 interface IBaseDialogProps
   extends Omit<IModalProps, 'children'>,
     AriaDialogProps {
-  className?: string;
   title?: ReactNode;
   children?: ((state: OverlayTriggerState) => ReactNode) | ReactNode;
 }
 
 const BaseDialog = React.forwardRef<HTMLDivElement, IBaseDialogProps>(
   (props, ref) => {
-    const {
-      title,
-      className,
-      children,
-      isDismissable = true,
-      state,
-      ...rest
-    } = props;
+    const { title, children, isDismissable = true, state, ...rest } = props;
     const dialogRef = useObjectRef<HTMLDivElement | null>(ref);
     const { dialogProps, titleProps } = useDialog(
       {
@@ -47,7 +39,7 @@ const BaseDialog = React.forwardRef<HTMLDivElement, IBaseDialogProps>(
     return (
       <div
         ref={dialogRef}
-        className={classNames(cardContainerClass, overlayClass, className)}
+        className={classNames(cardContainerClass, overlayClass)}
         {...mergeProps(rest, dialogProps)}
       >
         {isDismissable && (
@@ -87,7 +79,6 @@ export interface IDialogProps extends Omit<IBaseDialogProps, 'state'> {
 
 export const Dialog: FC<IDialogProps> = ({
   title,
-  className,
   children,
   isDismissable = true,
   isKeyboardDismissDisabled,
@@ -107,7 +98,6 @@ export const Dialog: FC<IDialogProps> = ({
       <BaseDialog
         state={state}
         title={title}
-        className={className}
         isDismissable={isDismissable}
         {...props}
       >
diff --git a/packages/libs/react-ui/src/components/Modal/Modal.stories.tsx b/packages/libs/react-ui/src/components/Modal/Modal.stories.tsx
deleted file mode 100644
index 1961e14117b..00000000000
--- a/packages/libs/react-ui/src/components/Modal/Modal.stories.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import { Button } from '../Button';
-import type { IModalProps } from '../Modal';
-import { Modal } from './Modal';
-import { ModalContent } from './StoryComponents';
-
-import { useOverlayTrigger } from 'react-aria';
-import { useOverlayTriggerState } from 'react-stately';
-
-const meta: Meta<{ title?: string } & IModalProps> = {
-  title: 'Overlays/Modal',
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'This is a generic modal component that can be used to render any content inside a modal., if you want to render a modal with a specific layout, you can use the `Dialog` component.',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<IModalProps>;
-
-export const Primary: Story = {
-  name: 'Modal',
-  render: () => {
-    const state = useOverlayTriggerState({});
-    const { triggerProps, overlayProps } = useOverlayTrigger(
-      { type: 'dialog' },
-      state,
-    );
-
-    return (
-      <>
-        <Button
-          {...triggerProps}
-          onClick={() => {
-            state.open();
-          }}
-        >
-          Modal Trigger
-        </Button>
-        <Modal {...overlayProps} state={state}>
-          {(ariaModalProps, ref) => (
-            <div
-              ref={ref}
-              {...ariaModalProps}
-              style={{
-                width: '70%',
-                backgroundColor: 'white',
-                padding: 20,
-              }}
-            >
-              <ModalContent />
-              <Button onClick={state.close}>Close Button</Button>
-            </div>
-          )}
-        </Modal>
-      </>
-    );
-  },
-};
diff --git a/packages/libs/react-ui/src/components/Modal/Modal.tsx b/packages/libs/react-ui/src/components/Modal/Modal.tsx
index 0829f2a3093..316016891e9 100644
--- a/packages/libs/react-ui/src/components/Modal/Modal.tsx
+++ b/packages/libs/react-ui/src/components/Modal/Modal.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { mergeRefs } from '@react-aria/utils';
-import clsx from 'classnames';
 import type { FC, ReactElement, Ref } from 'react';
 import React, { cloneElement, useRef } from 'react';
 import type { AriaModalOverlayProps, ModalOverlayAria } from 'react-aria';
@@ -10,7 +9,6 @@ import type { OverlayTriggerState } from 'react-stately';
 import { underlayClass } from './Modal.css';
 
 export interface IModalProps extends AriaModalOverlayProps {
-  className?: string;
   state: OverlayTriggerState;
   children:
     | ReactElement
@@ -21,14 +19,12 @@ export interface IModalProps extends AriaModalOverlayProps {
 }
 
 export const Modal: FC<IModalProps> = ({
-  className,
   children,
   state,
   isDismissable = true,
   isKeyboardDismissDisabled,
 }) => {
   const nodeRef = useRef<HTMLDivElement | null>(null);
-  const underlayRef = useRef<HTMLDivElement | null>(null);
   const { modalProps, underlayProps } = useModalOverlay(
     {
       isDismissable,
@@ -44,11 +40,7 @@ export const Modal: FC<IModalProps> = ({
 
   return (
     <Overlay>
-      <div
-        ref={underlayRef}
-        className={clsx(underlayClass, className)}
-        {...underlayProps}
-      >
+      <div className={underlayClass} {...underlayProps}>
         {typeof children === 'function'
           ? children(modalProps, nodeRef)
           : cloneElement(children, {