diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss
index 78def568d..d9614513c 100644
--- a/assets/scss/themes.scss
+++ b/assets/scss/themes.scss
@@ -56,13 +56,13 @@
   // Light Background color
   --bg-light-color: rgba(255, 255, 255, 0.02);
   // Dark Background color
-  --bg-dark-color: rgba(255, 255, 255, 0.04);
+  --bg-dark-color: rgba(255, 255, 255, 0.07);
   // Text color
   --fg-color: rgba(255, 255, 255, 0.9);
   // Light Text color
   --fg-light-color: rgba(255, 255, 255, 0.5);
   // Border color
-  --brd-color: rgba(255, 255, 255, 0.05);
+  --brd-color: rgba(255, 255, 255, 0.11);
   // Error color
   --err-color: rgba(255, 255, 255, 0.05);
   // Tooltip color
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index 71e7c09f1..c31966f98 100644
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -44,7 +44,7 @@ export default {
   @apply ease-in-out;
   @apply duration-150;
 
-  background-color: rgba(0, 0, 0, 0.32);
+  background-color: rgba(255, 255, 255, 0.02);
 }
 
 .modal-wrapper {