diff --git a/src/components/CCIP/Cards/NetworkCard.css b/src/components/CCIP/Cards/NetworkCard.css
index 507bcbe7209..5fd476f1ac2 100644
--- a/src/components/CCIP/Cards/NetworkCard.css
+++ b/src/components/CCIP/Cards/NetworkCard.css
@@ -1,13 +1,11 @@
 .network-card__container {
   display: flex;
-  /* flex-direction: column;
-align-items: flex-start; */
-  padding: 24px;
-  gap: 16px;
+  padding: var(--space-6x);
+  gap: var(--space-4x);
 
-  background: #ffffff;
-  border: 1px solid #e4e8ed;
-  border-radius: 4px;
+  background: var(--white);
+  border: 1px solid var(--gray-200);
+  border-radius: var(--space-1x);
 }
 
 .network-card__container:hover {
@@ -15,14 +13,14 @@ align-items: flex-start; */
 }
 
 .network-card__container img {
-  width: 40px;
-  height: 40px;
+  width: var(--space-8x);
+  height: var(--space-8x);
 }
 
 .network-card__container h3 {
-  font-size: 16px;
-  font-weight: 500;
-  color: #252e42;
+  font-size: var(--space-4x);
+  font-weight: var(--font-weight-medium);
+  color: var(--gray-950);
   margin-bottom: 0;
 }
 
diff --git a/src/components/CCIP/Cards/TokenCard.css b/src/components/CCIP/Cards/TokenCard.css
index 046a0a40f85..3a7a3ad6937 100644
--- a/src/components/CCIP/Cards/TokenCard.css
+++ b/src/components/CCIP/Cards/TokenCard.css
@@ -8,7 +8,7 @@
   padding: var(--space-4x);
   gap: var(--space-3x);
   background: #ffffff;
-  border: 1px solid #e4e8ed;
+  border: 1px solid var(--gray-200);
   border-radius: var(--space-1x);
   justify-content: center;
   cursor: pointer;
@@ -19,15 +19,15 @@
 }
 
 .token-card__container img {
-  width: var(--space-10x);
-  height: var(--space-10x);
+  width: var(--space-8x);
+  height: var(--space-8x);
   border-radius: 50%;
 }
 
 .token-card__container h3 {
   font-size: var(--space-4x);
   font-weight: 500;
-  color: #252e42;
+  color: var(--gray-950);
   margin-bottom: 0;
 }
 
diff --git a/src/components/CCIP/Tables/Table.css b/src/components/CCIP/Tables/Table.css
index 577dbf4ea58..eaf6880793b 100644
--- a/src/components/CCIP/Tables/Table.css
+++ b/src/components/CCIP/Tables/Table.css
@@ -46,18 +46,18 @@
 }
 
 .ccip-table tbody td .ccip-table__logo {
-  width: 40px;
-  height: 40px;
-  margin-right: 16px;
+  width: var(--space-8x);
+  height: var(--space-8x);
+  margin-right: var(--space-4x);
 }
 
 .ccip-table__status {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
+  gap: var(--space-2x);
+  padding: var(--space-2x) var(--space-4x);
   background: #ddf8e6;
-  border-radius: 24px;
+  border-radius: var(--space-6x);
   border: 1px solid var(--Page-Border-Border, #e4e8ed);
   background: var(--Page-Background-Muted, #f5f7fa);
   color: var(--Page-Foreground-Alt, --gray-900);
@@ -102,8 +102,8 @@
   top: 70%;
   left: 70%;
   transform: translate(-50%, -50%);
-  width: 20px;
-  height: 20px;
+  width: var(--space-4x);
+  height: var(--space-4x);
   border-radius: 50%;
   background-color: #fff;
 }
@@ -113,7 +113,7 @@
   font-weight: 500;
   font-size: 22px;
   line-height: 28px;
-  padding: 8px;
+  padding: var(--space-2x);
   color: var(--gray-900);
   margin-bottom: 0px;
 }
@@ -122,7 +122,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 16px;
+  gap: var(--space-4x);
   margin-bottom: var(--space-6x);
   border-bottom: 1px solid var(--gray-200);
   padding-bottom: var(--space-4x);