diff --git a/ui/components/app/modal/index.scss b/ui/components/app/modal/index.scss
index 10355b42f..858409a92 100644
--- a/ui/components/app/modal/index.scss
+++ b/ui/components/app/modal/index.scss
@@ -3,7 +3,7 @@
 .modal-container {
   width: 100%;
   height: 100%;
-  background-color: #fff;
+  background-color: var(--color-background-default);
   display: flex;
   flex-flow: column;
   border-radius: 8px;
@@ -28,14 +28,14 @@
     display: flex;
     padding: 12px;
     justify-content: center;
-    border-bottom: 1px solid #d2d8dd;
+    border-bottom: 1px solid var(--color-border-muted);
     flex: 0 0 auto;
   }
 
   &__header-close::after {
     content: '\00D7';
     font-size: 40px;
-    color: var(--dusty-gray);
+    color: var(--color-icon-default);
     position: absolute;
     top: -5px;
     right: 10px;
@@ -46,7 +46,7 @@
     display: flex;
     flex-flow: row;
     justify-content: center;
-    border-top: 1px solid #d2d8dd;
+    border-top: 1px solid var(--color-border-muted);
     padding: 16px;
     flex: 0 0 auto;
 
diff --git a/ui/components/app/modals/index.scss b/ui/components/app/modals/index.scss
index 7e4c7a193..286322a76 100644
--- a/ui/components/app/modals/index.scss
+++ b/ui/components/app/modals/index.scss
@@ -23,7 +23,7 @@
 
   &__content {
     margin: 0;
-    background-color: white;
+    background-color: var(--color-background-default);
     animation-fill-mode: forwards;
   }
 
@@ -34,7 +34,7 @@
     bottom: 0;
     left: 0;
     z-index: 1040;
-    background-color: #373a47;
+    background-color: var(--color-overlay-alterantive);
     animation-fill-mode: forwards;
     animation-duration: 0.3s;
   }
diff --git a/ui/components/app/modals/modal.js b/ui/components/app/modals/modal.js
index fba307ba7..71d013675 100644
--- a/ui/components/app/modals/modal.js
+++ b/ui/components/app/modals/modal.js
@@ -33,9 +33,9 @@ import ConvertTokenToNftModal from './convert-token-to-nft-modal/convert-token-t
 
 const modalContainerBaseStyle = {
   transform: 'translate3d(-50%, 0, 0px)',
-  border: '1px solid #CCCFD1',
+  border: '1px solid var(--color-border-default)',
   borderRadius: '8px',
-  backgroundColor: '#FFFFFF',
+  backgroundColor: 'var(--color-background-default)',
   boxShadow: '0 2px 22px 0 rgba(0,0,0,0.2)',
 };
 
diff --git a/ui/components/app/modals/qr-scanner/index.scss b/ui/components/app/modals/qr-scanner/index.scss
index a29200237..9c970397f 100644
--- a/ui/components/app/modals/qr-scanner/index.scss
+++ b/ui/components/app/modals/qr-scanner/index.scss
@@ -1,7 +1,7 @@
 .qr-scanner {
   width: 100%;
   height: 100%;
-  background-color: #fff;
+  background-color: var(--color-background-default);
   display: flex;
   flex-flow: column;
   border-radius: 8px;
@@ -67,16 +67,16 @@
 
     button:last-of-type {
       margin-right: 0;
-      background-color: #009eec;
+      background-color: var(--color-primary-default);
       border: none;
-      color: #fff;
+      color: var(--color-primary-inverse);
     }
   }
 
   &__close::after {
     content: '\00D7';
     font-size: 35px;
-    color: #9b9b9b;
+    color: var(--color-icon-default);
     position: absolute;
     top: 4px;
     right: 20px;