diff --git a/packages/ui/package.json b/packages/ui/package.json
index b17ca63b..542ef03e 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@synergycodes/axiom",
   "type": "module",
-  "version": "1.0.0-beta.21",
+  "version": "1.0.0-beta.22",
   "description": "A React library for creating node-based UIs and diagram-driven applications. Perfect for React Flow users, providing ready-to-use node templates and components that work seamlessly with React Flow's ecosystem.",
   "keywords": [
     "react",
diff --git a/packages/ui/src/components/modal/modal.module.css b/packages/ui/src/components/modal/modal.module.css
index d1bb15bd..6c313ebe 100644
--- a/packages/ui/src/components/modal/modal.module.css
+++ b/packages/ui/src/components/modal/modal.module.css
@@ -74,7 +74,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 1;
+    z-index: 0;
     inset: 0;
     background-color: color-mix(
       in srgb,
diff --git a/packages/ui/src/components/modal/modal.tsx b/packages/ui/src/components/modal/modal.tsx
index b3e01f31..e1d679b7 100644
--- a/packages/ui/src/components/modal/modal.tsx
+++ b/packages/ui/src/components/modal/modal.tsx
@@ -67,7 +67,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
         open={open}
         onClose={onClose}
         slots={{
-          backdrop: (props) => <Backdrop {...props} onClose={onClose} />,
+          backdrop: Backdrop,
         }}
       >
         <Fade in={open}>
@@ -112,23 +112,26 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
 /**
  * Backdrop component for the modal that dims the background
  */
-const Backdrop = forwardRef<
-  HTMLDivElement,
-  { open?: boolean; className: string; onClose?: () => void }
->((props, ref) => {
-  const { open, className, onClose } = props;
+const Backdrop = forwardRef<HTMLDivElement, BackdropProps>((props, ref) => {
+  const { open, className } = props;
 
   return (
     <Fade in={open}>
-      <div className={clsx(styles['backdrop'], className)} ref={ref}>
-        {onClose && (
-          <button
-            onClick={onClose}
-            className={styles['backdrop-close']}
-            type="button"
-          />
+      <div
+        {...props}
+        ref={ref}
+        className={clsx(
+          { 'base-Backdrop-open': open },
+          styles['backdrop'],
+          className,
         )}
-      </div>
+      />
     </Fade>
   );
 });
+
+type BackdropProps = {
+  open?: boolean;
+  className: string;
+  onClose?: () => void;
+};