diff --git a/packages/cyberstorm/src/newComponents/Modal/Modal.css b/packages/cyberstorm/src/newComponents/Modal/Modal.css
index 899516a83..dbf95ec83 100644
--- a/packages/cyberstorm/src/newComponents/Modal/Modal.css
+++ b/packages/cyberstorm/src/newComponents/Modal/Modal.css
@@ -2,11 +2,14 @@
   .modal__overlay {
     position: fixed;
     background: rgb(0 0 0 / 0.6);
-    backdrop-filter: blur(10px);
     animation: overlay-show 150ms cubic-bezier(0.16, 1, 0.3, 1);
     inset: 0;
   }
 
+  .modal__overlay--blur {
+    backdrop-filter: blur(10px);
+  }
+
   .modal__content {
     position: fixed;
     top: 50%;
diff --git a/packages/cyberstorm/src/newComponents/Modal/Modal.tsx b/packages/cyberstorm/src/newComponents/Modal/Modal.tsx
index baccdb5d6..08ecb1593 100644
--- a/packages/cyberstorm/src/newComponents/Modal/Modal.tsx
+++ b/packages/cyberstorm/src/newComponents/Modal/Modal.tsx
@@ -85,6 +85,10 @@ export interface ModalProps
    * Provide the id of an element that describes the dialog.
    */
   ariaDescribedby?: string;
+  /**
+   * When true, the modal overlay applies a heavy blur effect. Disable for better performance.
+   */
+  enableBackdropBlur?: boolean;
 }
 // TODO: Style system compatibility is currently degraded, improve to a agreed upon level according to specifications
 
@@ -189,6 +193,7 @@ export function Modal(props: ModalProps) {
     titleContent,
     footerContent,
     ariaDescribedby,
+    enableBackdropBlur = false,
   } = props;
 
   const filteredChildren: ReactNode[] = [];
@@ -244,7 +249,12 @@ export function Modal(props: ModalProps) {
     >
       {trigger ? <Dialog.Trigger asChild>{trigger}</Dialog.Trigger> : null}
       <Dialog.Portal>
-        <Dialog.Overlay className="modal__overlay">
+        <Dialog.Overlay
+          className={classnames(
+            "modal__overlay",
+            enableBackdropBlur ? "modal__overlay--blur" : null
+          )}
+        >
           <Dialog.Content
             className={classnames(
               "modal",