diff --git a/app/images/close-gray.svg b/app/images/close-gray.svg
deleted file mode 100755
index cb198fa6c..000000000
--- a/app/images/close-gray.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="12" height="12" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect x=".149" y="1.097" width="1.341" height="15.419" rx=".67" transform="rotate(-45 .15 1.097)" fill="#A1A5B3"/>
-    <rect x=".948" y="11.851" width="1.341" height="15.419" rx=".67" transform="rotate(-135 .948 11.85)" fill="#A1A5B3"/>
-</svg>
diff --git a/ui/components/app/modals/edit-approval-permission/edit-approval-permission.component.js b/ui/components/app/modals/edit-approval-permission/edit-approval-permission.component.js
index 373d2c1d3..73f81ed0c 100644
--- a/ui/components/app/modals/edit-approval-permission/edit-approval-permission.component.js
+++ b/ui/components/app/modals/edit-approval-permission/edit-approval-permission.component.js
@@ -54,8 +54,8 @@ export default class EditApprovalPermission extends PureComponent {
           <div className="edit-approval-permission__title">
             {t('editPermission')}
           </div>
-          <div
-            className="edit-approval-permission__header__close"
+          <i
+            className="fa fa-times fa-lg edit-approval-permission__header__close"
             onClick={() => hideModal()}
           />
         </div>
diff --git a/ui/components/app/modals/edit-approval-permission/index.scss b/ui/components/app/modals/edit-approval-permission/index.scss
index 11e91e3fa..e6794d131 100644
--- a/ui/components/app/modals/edit-approval-permission/index.scss
+++ b/ui/components/app/modals/edit-approval-permission/index.scss
@@ -7,7 +7,7 @@
     justify-content: center;
     align-items: center;
     position: relative;
-    border-bottom: 1px solid #d2d8dd;
+    border-bottom: 1px solid var(--color-border-muted);
   }
 
   &__header {
@@ -16,10 +16,8 @@
     &__close {
       position: absolute;
       right: 24px;
-      background-image: url("/images/close-gray.svg");
-      width: 0.75rem;
-      height: 0.75rem;
       cursor: pointer;
+      display: block;
     }
   }
 
@@ -38,7 +36,7 @@
       @include H6;
 
       font-weight: normal;
-      color: #24292e;
+      color: var(--color-text-default);
     }
 
     &__account {
@@ -52,7 +50,7 @@
     }
 
     &__balance {
-      color: #6a737d;
+      color: var(--color-text-alternative);
       margin-left: 8px;
     }
   }
@@ -64,14 +62,14 @@
       @include H6;
 
       font-weight: bold;
-      color: #24292e;
+      color: var(--color-text-default);
     }
 
     &__description {
       @include H7;
 
       font-weight: normal;
-      color: #6a737d;
+      color: var(--color-text-alternative);
       margin-top: 8px;
     }
 
@@ -95,7 +93,7 @@
       @include H6;
 
       font-weight: normal;
-      color: #474b4d;
+      color: var(--color-text-alternative);
     }
 
     &__option-label--selected {
@@ -105,7 +103,7 @@
     &__option-description {
       @include H7;
 
-      color: #6a737d;
+      color: var(--color-text-alternative);
       margin-top: 8px;
       margin-bottom: 6px;
     }
@@ -113,7 +111,7 @@
     &__option-value {
       @include H4;
 
-      color: #24292e;
+      color: var(--color-text-default);
     }
 
     &__radio-button {
@@ -130,7 +128,7 @@
     &__radio-button-outline--selected {
       width: 18px;
       height: 18px;
-      background: #dadcdd;
+      background: var(--color-border-default);
       border-radius: 9px;
       position: absolute;
     }
@@ -142,7 +140,7 @@
     &__radio-button-fill {
       width: 14px;
       height: 14px;
-      background: white;
+      background: var(--color-background-default);
       border-radius: 7px;
       position: absolute;
     }