diff --git a/src/components/common/GlobalModel.jsx b/src/components/common/GlobalModel.jsx
index 61e09750..e30244dd 100644
--- a/src/components/common/GlobalModel.jsx
+++ b/src/components/common/GlobalModel.jsx
@@ -54,7 +54,20 @@ useEffect(() => {
   // Dynamically generate data-bs attributes
   const dataAttributesProps = Object.keys(dataAttributes).map(key => ({
     [key]: dataAttributes[key],
-  }));
+  } ) );
+  
+
+
+   // The gray background
+    const backdropStyle = {
+      position: 'fixed',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      backgroundColor: 'rgba(0,0,0,0.3)',
+    };
+
 
   return (
     <div
@@ -65,8 +78,9 @@ useEffect(() => {
       aria-hidden="true"
       ref={modalRef}  // Assign the ref to the modal element
       {...dataAttributesProps}
+      style={backdropStyle}
     >
-      <div className={`modal-dialog ${dialogClass} ${modalSizeClass } mx-sm-auto mx-1`} role={role}>
+      <div className={`modal-dialog ${dialogClass} ${modalSizeClass } mx-sm-auto mx-1`} role={role} >
         <div className="modal-content">
           <div className="modal-header p-0">
             {/* Close button inside the modal header */}