Ensure all CCIP 1.7 pages have been completed/Updated

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 {

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 {

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>

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 {

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: {

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>
@@ -236,8 +245,12 @@ function TokenDrawer({
                           endLength={4}
                         />
                       </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>
                   ))
                 )}

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">

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 {

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" }

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"

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"