diff --git a/sass/colors.scss b/sass/colors.scss
index af22cce..4328cf3 100644
--- a/sass/colors.scss
+++ b/sass/colors.scss
@@ -37,6 +37,9 @@ $button-alternate-color: #01103C;
 $pagination-border-color: $nord3;
 $pagination-hover-color: rgb(115, 151, 186);
 
+$close-background: rgba(10,10,10,.6);
+$close-background-dark: rgba(240,240,240,.6);
+
 :root {
     --default-color: #{$white};
     --bg-color: #{darken($white, 5%)};
@@ -58,6 +61,8 @@ $pagination-hover-color: rgb(115, 151, 186);
 
     --button-link-text-color: #2C364A;
 
+    --close-background: #{$close-background};
+
     --loader-img: url('/img/loading-light.gif');
 
     --nord0: #{$nord0};
@@ -99,5 +104,7 @@ $pagination-hover-color: rgb(115, 151, 186);
 
     --button-link-text-color: #{$white};
 
+    --close-background: #{$nord3};
+
     --loader-img: url('/img/loading-dark.gif');
 }
\ No newline at end of file
diff --git a/sass/ma-collection-details.scss b/sass/ma-collection-details.scss
index 9c68517..0f3848f 100644
--- a/sass/ma-collection-details.scss
+++ b/sass/ma-collection-details.scss
@@ -45,16 +45,21 @@
 
     .modal {
         button.close {
-            height: 36px;
-            max-height: 36px;
-            max-width: 36px;
-            min-height: 36px;
-            min-width: 36px;
-            width: 36px;
+            height: 42px;
+            max-height: 42px;
+            max-width: 42px;
+            min-height: 42px;
+            min-width: 42px;
+            width: 42px;
             position: absolute;
-            background-color: rgba(10,10,10,.6);
+            background-color: var(--close-background);
             right: 12px;
             top: 12px;
+
+            &::before,
+            &::after {
+                background-color: $white;
+            }
         }
 
         .carousel {