diff --git a/ui/pages/confirmation/components/confirmation-footer/confirmation-footer.scss b/ui/pages/confirmation/components/confirmation-footer/confirmation-footer.scss
index 290d5cce8..d386e5a8f 100644
--- a/ui/pages/confirmation/components/confirmation-footer/confirmation-footer.scss
+++ b/ui/pages/confirmation/components/confirmation-footer/confirmation-footer.scss
@@ -3,8 +3,8 @@
 
   &__actions {
     display: flex;
-    border-top: 1px solid var(--ui-2);
-    background-color: white;
+    border-top: 1px solid var(--color-border-muted);
+    background-color: var(--color-background-default);
     padding: 16px;
 
     & .button:first-child {
diff --git a/ui/pages/confirmation/confirmation.scss b/ui/pages/confirmation/confirmation.scss
index 482f1c210..6c930ec4c 100644
--- a/ui/pages/confirmation/confirmation.scss
+++ b/ui/pages/confirmation/confirmation.scss
@@ -5,7 +5,7 @@
   width: 100%;
   height: 100%;
   position: relative;
-  background: white;
+  background: var(--color-background-default);
   display: grid;
   flex-direction: column;
   grid-template-columns: 1fr;
@@ -16,7 +16,7 @@
     'footer';
 
   a {
-    color: var(--primary-1);
+    color: var(--color-primary-default);
   }
 
   &__content {
@@ -32,19 +32,19 @@
     @include H7;
 
     grid-area: navigation;
-    background-color: var(--Grey-000);
-    border-bottom: 1px solid var(--geyser);
+    background-color: var(--color-background-alternative);
+    border-bottom: 1px solid var(--color-border-muted);
     padding: 6px 16px 5px 16px;
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
     display: grid;
     grid-template-columns: 1fr minmax(0, auto) minmax(0, auto);
     align-items: center;
   }
 
   &__navigation-button {
-    background-color: white;
+    background-color: var(--color-background-default);
     border-radius: 100px;
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
     font-size: $font-size-h6;
     height: 20px;
     width: 20px;
@@ -52,8 +52,8 @@
 
     &:disabled {
       cursor: not-allowed;
-      background-color: var(--Grey-100);
-      color: var(--Grey-300);
+      background-color: var(--color-background-alternative);
+      color: var(--color-text-muted);
     }
   }
 
diff --git a/ui/pages/confirmation/templates/flask/snap-confirm/index.scss b/ui/pages/confirmation/templates/flask/snap-confirm/index.scss
index 7fed11cd3..fdac1698a 100644
--- a/ui/pages/confirmation/templates/flask/snap-confirm/index.scss
+++ b/ui/pages/confirmation/templates/flask/snap-confirm/index.scss
@@ -1,7 +1,7 @@
 .snap-confirm {
   padding: 16px 32px;
-  border-top: 1px solid var(--Grey-100);
-  border-bottom: 1px solid var(--Grey-100);
+  border-top: 1px solid var(--color-border-muted);
+  border-bottom: 1px solid var(--color-border-muted);
   margin: 24px 0 16px 0;
 
   .text {