2 files changed, 15 insertions, 6 deletions
diff --git a/FrontEnd/src/views/common/dialog/Dialog.css b/FrontEnd/src/views/common/dialog/Dialog.css
index 21ea52fc..108bd823 100644
--- a/FrontEnd/src/views/common/dialog/Dialog.css
+++ b/FrontEnd/src/views/common/dialog/Dialog.css
@@ -5,14 +5,22 @@
   top: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(255, 255, 255, 0.92);
-
   display: flex;
   padding: 2em;
-
   overflow: auto;
 }
 
+.cru-dialog-background {
+  position: absolute;
+  z-index: -1;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--cru-surface-dim-color);
+  opacity: 0.8;
+}
+
 .cru-dialog-container {
   max-width: 100%;
   min-width: 30vw;
@@ -22,7 +30,7 @@
   border: var(--cru-primary-color) 1px solid;
   border-radius: 5px;
   padding: 1.5em;
-  background-color: white;
+  background-color: var(--cru-surface-color);
 }
 
 .cru-dialog-bottom-area {
@@ -30,7 +38,7 @@
   justify-content: flex-end;
 }
 
-.cru-dialog-bottom-area > * {
+.cru-dialog-bottom-area>* {
   margin: 0 0.5em;
 }
 
@@ -52,4 +60,4 @@
   transform: scale(0, 0);
   opacity: 0;
   transform-origin: center;
-}
+}
+\ No newline at end of file
diff --git a/FrontEnd/src/views/common/dialog/Dialog.tsx b/FrontEnd/src/views/common/dialog/Dialog.tsx
index 923c636b..79a31954 100644
--- a/FrontEnd/src/views/common/dialog/Dialog.tsx
+++ b/FrontEnd/src/views/common/dialog/Dialog.tsx
@@ -38,6 +38,7 @@ export default function Dialog(props: DialogProps) {
               }
         }
       >
+        <div className="cru-dialog-background"/>
         <div
           className="cru-dialog-container"
           onPointerDown={(e) => e.stopPropagation()}