From ac6a11565500cdee740d3790367ca0550b04ab39 Mon Sep 17 00:00:00 2001
From: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
Date: Fri, 30 Jan 2026 12:01:17 +0100
Subject: [PATCH 1/6] Update Verifiers tab

---
 .../CCIP/ChainHero/TokenDetailsHero.tsx       |  2 ++
 src/components/CCIP/Drawer/Drawer.css         |  4 +++
 src/components/CCIP/Drawer/TokenDrawer.tsx    | 30 ++++++++++++++-----
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/components/CCIP/ChainHero/TokenDetailsHero.tsx b/src/components/CCIP/ChainHero/TokenDetailsHero.tsx
index edd989a1043..b0f781afd1c 100644
--- a/src/components/CCIP/ChainHero/TokenDetailsHero.tsx
+++ b/src/components/CCIP/ChainHero/TokenDetailsHero.tsx
@@ -63,6 +63,7 @@ function TokenDetailsHero({ network, token }: TokenDetailsHeroProps) {
                 endLength={4}
                 contractUrl={getExplorerAddressUrl(network?.explorer, network?.chainType)(token.address)}
                 address={token.address}
+                urlClass="token_details_address"
               />
             </div>
           </div>
@@ -77,6 +78,7 @@ function TokenDetailsHero({ network, token }: TokenDetailsHeroProps) {
                 endLength={4}
                 contractUrl={getExplorerAddressUrl(network?.explorer, network?.chainType)(token.poolAddress)}
                 address={token.poolAddress}
+                urlClass="token_details_address"
               />
             </div>
           </div>
diff --git a/src/components/CCIP/Drawer/Drawer.css b/src/components/CCIP/Drawer/Drawer.css
index 0b8d48a4d6a..4625af3e1dd 100644
--- a/src/components/CCIP/Drawer/Drawer.css
+++ b/src/components/CCIP/Drawer/Drawer.css
@@ -94,4 +94,8 @@
     font-weight: 400;
     line-height: 10.89px;
   }
+
+  .token_details_address {
+    color: var(--blue-600);
+  }
 }
diff --git a/src/components/CCIP/Drawer/TokenDrawer.tsx b/src/components/CCIP/Drawer/TokenDrawer.tsx
index 19d31f1cbbe..fc76e672abf 100644
--- a/src/components/CCIP/Drawer/TokenDrawer.tsx
+++ b/src/components/CCIP/Drawer/TokenDrawer.tsx
@@ -26,6 +26,7 @@ import { Tooltip } from "~/features/common/Tooltip/Tooltip.tsx"
 import { useMultiLaneRateLimits } from "~/hooks/useMultiLaneRateLimits.ts"
 import { RateLimitCell } from "~/components/CCIP/RateLimitCell.tsx"
 import { realtimeDataService } from "~/lib/ccip/services/realtime-data-instance.ts"
+import { Typography } from "@chainlink/blocks"
 
 enum TokenTab {
   Outbound = "outbound",
@@ -202,17 +203,25 @@ function TokenDrawer({
             <table className="ccip-table">
               <thead>
                 <tr>
-                  <th>Verifier</th>
-                  <th>Verifier address</th>
-                  <th>Verifier type</th>
-                  <th>Threshold amount</th>
+                  <th>
+                    <Typography variant="body-semi-s">Verifier name</Typography>
+                  </th>
+                  <th>
+                    <Typography variant="body-semi-s">Verifier address</Typography>
+                  </th>
+                  <th>
+                    <Typography variant="body-semi-s">Verifier type</Typography>
+                  </th>
+                  <th>
+                    <Typography variant="body-semi-s">Threshold amount</Typography>
+                  </th>
                 </tr>
               </thead>
               <tbody>
                 {verifiers.length === 0 ? (
                   <tr>
                     <td colSpan={4} style={{ textAlign: "center", padding: "20px" }}>
-                      No verifiers configured
+                      <Typography variant="body">No verifiers found for this network.</Typography>
                     </td>
                   </tr>
                 ) : (
@@ -226,7 +235,7 @@ function TokenDrawer({
                             className="ccip-table__logo"
                             style={{ width: "24px", height: "24px" }}
                           />
-                          {verifier.name}
+                          <Typography variant="body">{verifier.name}</Typography>
                         </div>
                       </td>
                       <td>
@@ -234,10 +243,15 @@ function TokenDrawer({
                           contractUrl={getExplorerAddressUrl(network.explorer, network.chainType)(verifier.address)}
                           address={verifier.address}
                           endLength={4}
+                          urlClass="token_details_address"
                         />
                       </td>
-                      <td>{getVerifierTypeDisplay(verifier.type)}</td>
-                      <td>N/A</td>
+                      <td>
+                        <Typography variant="body">{getVerifierTypeDisplay(verifier.type)}</Typography>
+                      </td>
+                      <td>
+                        <Typography variant="body">N/A</Typography>
+                      </td>
                     </tr>
                   ))
                 )}

From 3b7e0b9ea3b5b0b6b8656f278c24d59213479ade Mon Sep 17 00:00:00 2001
From: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
Date: Fri, 30 Jan 2026 12:23:35 +0100
Subject: [PATCH 2/6] lint

---
 src/components/CCIP/ChainHero/ChainHero.tsx                 | 3 +--
 .../TutorialBlockchainSelector.tsx                          | 6 +++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/CCIP/ChainHero/ChainHero.tsx b/src/components/CCIP/ChainHero/ChainHero.tsx
index 97626aa0e6e..21e6d0cbc08 100644
--- a/src/components/CCIP/ChainHero/ChainHero.tsx
+++ b/src/components/CCIP/ChainHero/ChainHero.tsx
@@ -1,5 +1,5 @@
 import { Environment, LaneConfig, Network, Version } from "~/config/data/ccip/types.ts"
-import { getTokenData } from "~/config/data/ccip/data.ts"
+import { getTokenData, getNetworkIconUrl } from "~/config/data/ccip/data.ts"
 import Address from "~/components/AddressReact.tsx"
 import Breadcrumb from "../Breadcrumb/Breadcrumb.tsx"
 import Search from "../Search/Search.tsx"
@@ -16,7 +16,6 @@ import { Tooltip } from "~/features/common/Tooltip/Tooltip.tsx"
 import { getChainTooltip } from "../Tooltip/index.ts"
 import { PoolProgramTooltip } from "../Tooltip/PoolProgramTooltip.tsx"
 import { ExplorerInfo, ChainType } from "@config/types.ts"
-import { getNetworkIconUrl } from "~/config/data/ccip/data.ts"
 
 interface ChainHeroProps {
   chains: {
diff --git a/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.tsx b/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.tsx
index 4d60c741b54..cc0efbf2652 100644
--- a/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.tsx
+++ b/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.tsx
@@ -32,9 +32,9 @@ export const TutorialBlockchainSelector = () => {
     const currentState = laneStore.get()
     const bothChainsSelected = Boolean(
       currentState.sourceChain &&
-      currentState.destinationChain &&
-      currentState.sourceNetwork &&
-      currentState.destinationNetwork
+        currentState.destinationChain &&
+        currentState.sourceNetwork &&
+        currentState.destinationNetwork
     )
     updateStepProgress("setup", "blockchains-selected", bothChainsSelected)
   }

From eaad33e4adf9e575cad1073a5ce9df97ead317d1 Mon Sep 17 00:00:00 2001
From: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
Date: Fri, 30 Jan 2026 14:17:21 +0100
Subject: [PATCH 3/6] Ensure all CCIP 1.7 pages have been completed

---
 public/assets/icons/add.svg                        |  3 ++-
 src/components/Address.tsx                         |  1 +
 src/components/AddressReact.tsx                    |  1 +
 src/components/CCIP/AddButton/AddButton.astro      |  9 +++++++--
 src/components/CCIP/Chain/Chain.astro              | 14 +++++++++++++-
 src/components/CCIP/ChainHero/TokenDetailsHero.tsx |  2 --
 src/components/CCIP/Drawer/Drawer.css              |  4 ----
 src/components/CCIP/Drawer/TokenDrawer.tsx         |  1 -
 src/components/CCIP/Tables/ChainTable.tsx          |  6 +++---
 src/components/CCIP/Tables/Table.css               |  2 ++
 10 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/public/assets/icons/add.svg b/public/assets/icons/add.svg
index 6a3c331c298..57a250de0bf 100644
--- a/public/assets/icons/add.svg
+++ b/public/assets/icons/add.svg
@@ -1,3 +1,4 @@
 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 0.5V11.5M0.5 6H11.5" stroke="#141921" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 0.5V11.5M0.5 6H11.5" stroke="#0d5dffff
+" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/src/components/Address.tsx b/src/components/Address.tsx
index 5544b5e225b..1acc8b3c07d 100644
--- a/src/components/Address.tsx
+++ b/src/components/Address.tsx
@@ -55,6 +55,7 @@ const AddressComponent = ({
           padding: 1px 5px;
           border-radius: var(--border-radius-10);
           word-break: break-word;
+          color: var(--blue-600);
         }
 
         .addressContainer {
diff --git a/src/components/AddressReact.tsx b/src/components/AddressReact.tsx
index 84648e9f3e4..46d3e69bace 100644
--- a/src/components/AddressReact.tsx
+++ b/src/components/AddressReact.tsx
@@ -40,6 +40,7 @@ const AddressComponent = ({ contractUrl, address, endLength, urlClass, urlId }:
           padding: 1px 0px;
           border-radius: var(--border-radius-10);
           word-break: break-word;
+          color: var(--blue-600);
         }
 
         .addressContainer {
diff --git a/src/components/CCIP/AddButton/AddButton.astro b/src/components/CCIP/AddButton/AddButton.astro
index f2ade415216..8fb2d89a17a 100644
--- a/src/components/CCIP/AddButton/AddButton.astro
+++ b/src/components/CCIP/AddButton/AddButton.astro
@@ -2,12 +2,13 @@
 export interface Props {
   href: string
   text: string
+  urlClass?: string
 }
 
-const { href, text } = Astro.props
+const { href, text, urlClass } = Astro.props
 ---
 
-<a class="add-button" href={href}>
+<a class={`add-button ${urlClass}`} href={href}>
   <img src="/assets/icons/add.svg" alt="Add" class="add-button-icon" />
   {text}
 </a>
@@ -39,4 +40,8 @@ const { href, text } = Astro.props
     width: var(--space-3x);
     height: var(--space-3x);
   }
+
+  :global(.chain-add-button) {
+    /* Styles will be applied from parent component */
+  }
 </style>
diff --git a/src/components/CCIP/Chain/Chain.astro b/src/components/CCIP/Chain/Chain.astro
index c236891c8b8..1dc9bf70e46 100644
--- a/src/components/CCIP/Chain/Chain.astro
+++ b/src/components/CCIP/Chain/Chain.astro
@@ -136,7 +136,11 @@ const chainStructuredData = generateChainStructuredData(
         <h2>Tokens <span>({allTokens.length})</span></h2>
         {
           network.chainType !== "solana" && network.chainType !== "aptos" && (
-            <AddButton href="/ccip/tutorials/evm/token-manager#verifying-your-token" text="Add my token" />
+            <AddButton
+              href="/ccip/tutorials/evm/token-manager#verifying-your-token"
+              text="List my token"
+              urlClass="chain-add-button"
+            />
           )
         }
       </div>
@@ -181,6 +185,14 @@ const chainStructuredData = generateChainStructuredData(
     grid-template-columns: 1fr;
     gap: var(--space-2x);
   }
+  :global(.chain-add-button) {
+    border-color: var(--blue-600) !important;
+    color: var(--blue-600) !important;
+  }
+
+  :global(.chain-add-button:hover) {
+    background-color: var(--blue-100) !important;
+  }
 
   @media (min-width: 50em) {
     .layout {
diff --git a/src/components/CCIP/ChainHero/TokenDetailsHero.tsx b/src/components/CCIP/ChainHero/TokenDetailsHero.tsx
index b0f781afd1c..edd989a1043 100644
--- a/src/components/CCIP/ChainHero/TokenDetailsHero.tsx
+++ b/src/components/CCIP/ChainHero/TokenDetailsHero.tsx
@@ -63,7 +63,6 @@ function TokenDetailsHero({ network, token }: TokenDetailsHeroProps) {
                 endLength={4}
                 contractUrl={getExplorerAddressUrl(network?.explorer, network?.chainType)(token.address)}
                 address={token.address}
-                urlClass="token_details_address"
               />
             </div>
           </div>
@@ -78,7 +77,6 @@ function TokenDetailsHero({ network, token }: TokenDetailsHeroProps) {
                 endLength={4}
                 contractUrl={getExplorerAddressUrl(network?.explorer, network?.chainType)(token.poolAddress)}
                 address={token.poolAddress}
-                urlClass="token_details_address"
               />
             </div>
           </div>
diff --git a/src/components/CCIP/Drawer/Drawer.css b/src/components/CCIP/Drawer/Drawer.css
index 4625af3e1dd..0b8d48a4d6a 100644
--- a/src/components/CCIP/Drawer/Drawer.css
+++ b/src/components/CCIP/Drawer/Drawer.css
@@ -94,8 +94,4 @@
     font-weight: 400;
     line-height: 10.89px;
   }
-
-  .token_details_address {
-    color: var(--blue-600);
-  }
 }
diff --git a/src/components/CCIP/Drawer/TokenDrawer.tsx b/src/components/CCIP/Drawer/TokenDrawer.tsx
index fc76e672abf..ac32df98710 100644
--- a/src/components/CCIP/Drawer/TokenDrawer.tsx
+++ b/src/components/CCIP/Drawer/TokenDrawer.tsx
@@ -243,7 +243,6 @@ function TokenDrawer({
                           contractUrl={getExplorerAddressUrl(network.explorer, network.chainType)(verifier.address)}
                           address={verifier.address}
                           endLength={4}
-                          urlClass="token_details_address"
                         />
                       </td>
                       <td>
diff --git a/src/components/CCIP/Tables/ChainTable.tsx b/src/components/CCIP/Tables/ChainTable.tsx
index 5e278233d20..7ab6c7c559e 100644
--- a/src/components/CCIP/Tables/ChainTable.tsx
+++ b/src/components/CCIP/Tables/ChainTable.tsx
@@ -68,9 +68,6 @@ function ChainTable({ lanes, explorer, sourceNetwork, environment }: TableProps)
           onChange={(key) => setInOutbound(key as LaneFilter)}
         />
         <div className="ccip-table__filters__actions">
-          <div className="ccip-table__filters__search-container">
-            <TableSearchInput search={search} setSearch={setSearch} />
-          </div>
           <a
             className="button secondary ccip-table__filters__external-button"
             href="https://ccip.chain.link/status"
@@ -85,6 +82,9 @@ function ChainTable({ lanes, explorer, sourceNetwork, environment }: TableProps)
             />
             View lane status
           </a>
+          <div className="ccip-table__filters__search-container">
+            <TableSearchInput search={search} setSearch={setSearch} />
+          </div>
         </div>
       </div>
       <div className="ccip-table__wrapper">
diff --git a/src/components/CCIP/Tables/Table.css b/src/components/CCIP/Tables/Table.css
index a99fb0b836a..6adf43a6b31 100644
--- a/src/components/CCIP/Tables/Table.css
+++ b/src/components/CCIP/Tables/Table.css
@@ -219,6 +219,8 @@
   display: flex;
   align-items: center;
   gap: var(--space-2x);
+  border: 1px solid var(--blue-600);
+  color: var(--blue-600);
 }
 
 .ccip-table__filters__external-icon {

From e0efb425aea69bb768b961d896e49eb0e0e21aaf Mon Sep 17 00:00:00 2001
From: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
Date: Fri, 30 Jan 2026 14:26:56 +0100
Subject: [PATCH 4/6] Ai comments and typecheck

---
 public/assets/icons/add.svg                                   | 3 +--
 src/components/CCIP/AddButton/AddButton.astro                 | 2 +-
 src/features/chainlink-automation/components/NetworkIcons.tsx | 2 +-
 src/features/chainlink-functions/components/NetworkIcons.tsx  | 2 +-
 4 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/public/assets/icons/add.svg b/public/assets/icons/add.svg
index 57a250de0bf..690aad5bb2f 100644
--- a/public/assets/icons/add.svg
+++ b/public/assets/icons/add.svg
@@ -1,4 +1,3 @@
 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 0.5V11.5M0.5 6H11.5" stroke="#0d5dffff
-" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 0.5V11.5M0.5 6H11.5" stroke="#0d5dffff" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/src/components/CCIP/AddButton/AddButton.astro b/src/components/CCIP/AddButton/AddButton.astro
index 8fb2d89a17a..bd52b43b126 100644
--- a/src/components/CCIP/AddButton/AddButton.astro
+++ b/src/components/CCIP/AddButton/AddButton.astro
@@ -8,7 +8,7 @@ export interface Props {
 const { href, text, urlClass } = Astro.props
 ---
 
-<a class={`add-button ${urlClass}`} href={href}>
+<a class={`add-button ${urlClass || ""}`} href={href}>
   <img src="/assets/icons/add.svg" alt="Add" class="add-button-icon" />
   {text}
 </a>
diff --git a/src/features/chainlink-automation/components/NetworkIcons.tsx b/src/features/chainlink-automation/components/NetworkIcons.tsx
index 2b610050934..52b60afa43c 100644
--- a/src/features/chainlink-automation/components/NetworkIcons.tsx
+++ b/src/features/chainlink-automation/components/NetworkIcons.tsx
@@ -49,7 +49,7 @@ export default function NetworkIcons() {
 
       // Create the icon element
       const icon = document.createElement("img")
-      icon.src = iconPath
+      icon.src = iconPath || ""
       icon.alt = `${technology} icon`
       icon.style.width = "24px"
       icon.style.height = "24px"
diff --git a/src/features/chainlink-functions/components/NetworkIcons.tsx b/src/features/chainlink-functions/components/NetworkIcons.tsx
index 20834173b19..03184e362ae 100644
--- a/src/features/chainlink-functions/components/NetworkIcons.tsx
+++ b/src/features/chainlink-functions/components/NetworkIcons.tsx
@@ -35,7 +35,7 @@ export default function NetworkIcons() {
 
       // Create the icon element
       const icon = document.createElement("img")
-      icon.src = iconPath
+      icon.src = iconPath || ""
       icon.alt = `${technology} icon`
       icon.style.width = "24px"
       icon.style.height = "24px"

From 2141bb4eb1c6cbc9b8d813e9e3ca0acf36c5068f Mon Sep 17 00:00:00 2001
From: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
Date: Fri, 30 Jan 2026 14:31:28 +0100
Subject: [PATCH 5/6] tutorial

---
 .../TutorialBlockchainSelector.tsx                          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.tsx b/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.tsx
index cc0efbf2652..4d60c741b54 100644
--- a/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.tsx
+++ b/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.tsx
@@ -32,9 +32,9 @@ export const TutorialBlockchainSelector = () => {
     const currentState = laneStore.get()
     const bothChainsSelected = Boolean(
       currentState.sourceChain &&
-        currentState.destinationChain &&
-        currentState.sourceNetwork &&
-        currentState.destinationNetwork
+      currentState.destinationChain &&
+      currentState.sourceNetwork &&
+      currentState.destinationNetwork
     )
     updateStepProgress("setup", "blockchains-selected", bothChainsSelected)
   }

From 3f150af6ab14f7f4fbdc59424685b606a71d4ca9 Mon Sep 17 00:00:00 2001
From: Simone Cuomo <simone@thisdot.co>
Date: Tue, 3 Feb 2026 13:28:41 +0000
Subject: [PATCH 6/6] Fix tests

---
 src/config/data/ccip/data.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config/data/ccip/data.ts b/src/config/data/ccip/data.ts
index d65ce636aa1..d5cd936e3f2 100644
--- a/src/config/data/ccip/data.ts
+++ b/src/config/data/ccip/data.ts
@@ -31,7 +31,7 @@ import {
   getTokenIconUrl,
   getNativeCurrency,
 } from "@features/utils/index.ts"
-import { normalizeTechnologyName } from "src/features/utils/networkIcons.ts"
+import { normalizeTechnologyName } from "@features/utils/networkIcons.ts"
 
 // For mainnet
 import chainsMainnetv120 from "@config/data/ccip/v1_2_0/mainnet/chains.json" with { type: "json" }