diff --git a/src/components/CCIP/ChainHero/ChainHero.css b/src/components/CCIP/ChainHero/ChainHero.css
index 08074cdd49b..25a11f98ddb 100644
--- a/src/components/CCIP/ChainHero/ChainHero.css
+++ b/src/components/CCIP/ChainHero/ChainHero.css
@@ -86,7 +86,7 @@
   font-size: 14px;
   line-height: 22px;
   padding-bottom: var(--space-4x);
-  color: #6c7585;
+  color: var(--gray-500);
 }
 
 .ccip-chain-hero__feeTokens__list {
diff --git a/src/components/CCIP/ChainHero/LaneDetailsHero.css b/src/components/CCIP/ChainHero/LaneDetailsHero.css
index e7075a91ee8..cd58f44478a 100644
--- a/src/components/CCIP/ChainHero/LaneDetailsHero.css
+++ b/src/components/CCIP/ChainHero/LaneDetailsHero.css
@@ -28,6 +28,7 @@
   display: flex;
   align-items: center;
   gap: var(--space-6x);
+  color: var(--gray-900);
 }
 
 .lane-details-hero__network img {
@@ -47,7 +48,7 @@
   font-size: 14px;
   line-height: 22px;
 
-  color: #6c7585;
+  color: var(--gray-500);
 }
 
 .lane-details-hero__token-logo {
diff --git a/src/components/CCIP/ChainHero/LaneDetailsHero.tsx b/src/components/CCIP/ChainHero/LaneDetailsHero.tsx
index 4f3248f2fb2..01b7f99e9f1 100644
--- a/src/components/CCIP/ChainHero/LaneDetailsHero.tsx
+++ b/src/components/CCIP/ChainHero/LaneDetailsHero.tsx
@@ -40,7 +40,7 @@ function LaneDetailsHero({
           {sourceNetwork.name}
         </div>
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M0.666626 7.99673H14.6666M7.66663 15L14.6666 8L7.66663 1" stroke="#141921" />
+          <path d="M0.666626 7.99673H14.6666M7.66663 15L14.6666 8L7.66663 1" stroke="var(--gray-900)" />
         </svg>
         <div className="lane-details-hero__network">
           <img src={destinationNetwork.logo} alt={destinationNetwork.name} className="lane-details-hero__token-logo" />
diff --git a/src/components/CCIP/Tables/Table.css b/src/components/CCIP/Tables/Table.css
index 47cc8dc708c..577dbf4ea58 100644
--- a/src/components/CCIP/Tables/Table.css
+++ b/src/components/CCIP/Tables/Table.css
@@ -27,13 +27,14 @@
   text-align: start;
   background-color: transparent;
   padding: 0;
-  color: #6c7585;
+  color: var(--gray-500);
   padding-bottom: var(--space-4x);
+  align-content: baseline;
 }
 
 .ccip-table tbody td {
   text-align: start;
-  color: #141921;
+  color: var(--gray-900);
   padding: var(--space-4x) 0;
 }
 
@@ -59,10 +60,10 @@
   border-radius: 24px;
   border: 1px solid var(--Page-Border-Border, #e4e8ed);
   background: var(--Page-Background-Muted, #f5f7fa);
-  color: var(--Page-Foreground-Alt, #141921);
+  color: var(--Page-Foreground-Alt, --gray-900);
 }
 .ccip-table__status svg {
-  stroke: var(--Page-Foreground-Alt, #141921);
+  stroke: var(--Page-Foreground-Alt, --gray-900);
 }
 
 .ccip-table__status-operational {
@@ -113,7 +114,7 @@
   font-size: 22px;
   line-height: 28px;
   padding: 8px;
-  color: #141921;
+  color: var(--gray-900);
   margin-bottom: 0px;
 }
 
diff --git a/src/components/CCIP/Tables/Tabs.css b/src/components/CCIP/Tables/Tabs.css
index 5d2945e72ca..7e6faee31ad 100644
--- a/src/components/CCIP/Tables/Tabs.css
+++ b/src/components/CCIP/Tables/Tabs.css
@@ -11,12 +11,12 @@
   font-weight: 500;
   font-size: 18px;
   line-height: var(--space-4x);
-  color: #6c7585;
+  color: var(--gray-500);
   padding-bottom: 8px;
 }
 
 .tabs__tab--active {
-  color: #141921;
+  color: var(--gray-900);
   padding-bottom: 5px;
   border-bottom: 3px solid #2e7bff;
 }