diff --git a/src/components/CCIP/ChainHero/ChainHero.css b/src/components/CCIP/ChainHero/ChainHero.css
index 34c38f7ae17..7d7ce722c95 100644
--- a/src/components/CCIP/ChainHero/ChainHero.css
+++ b/src/components/CCIP/ChainHero/ChainHero.css
@@ -1,5 +1,5 @@
 .ccip-chain-hero {
-  background-color: var(--gray-100);
+  background: var(--Page-Background-Alt);
   border-bottom: 1px solid var(--gray-200);
   min-height: 241px;
 }
diff --git a/src/components/CCIP/ChainHero/LaneDetailsHero.css b/src/components/CCIP/ChainHero/LaneDetailsHero.css
index 706ee384876..4bfbe4134b2 100644
--- a/src/components/CCIP/ChainHero/LaneDetailsHero.css
+++ b/src/components/CCIP/ChainHero/LaneDetailsHero.css
@@ -1,5 +1,5 @@
 .lane-details-hero {
-  background-color: var(--gray-100);
+  background: var(--Page-Background-Alt);
   padding: var(--space-6x);
   border-bottom: 1px solid var(--gray-200);
 }
@@ -42,9 +42,16 @@
 }
 
 .lane-details-hero__details {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space-6x);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-10x);
+}
+
+.lane-details-hero__details__item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4x);
+  min-width: var(--space-45x);
 }
 
 .lane-details-hero__details__label {
@@ -61,10 +68,6 @@
     padding: var(--space-6x) var(--space-10x) var(--space-10x);
   }
 
-  .lane-details-hero__details {
-    grid-template-columns: 1fr 2fr;
-  }
-
   .lane-details-hero__networks {
     flex-direction: row;
     align-items: center;
diff --git a/src/components/CCIP/ChainHero/LaneDetailsHero.tsx b/src/components/CCIP/ChainHero/LaneDetailsHero.tsx
index 8c96ef2fde5..e92763ee216 100644
--- a/src/components/CCIP/ChainHero/LaneDetailsHero.tsx
+++ b/src/components/CCIP/ChainHero/LaneDetailsHero.tsx
@@ -19,8 +19,8 @@ interface LaneDetailsHeroProps {
   }
   onRamp: string
   offRamp: string
+  sourceAddress: string
   destinationAddress: string
-  enforceOutOfOrder?: boolean
   explorer: ExplorerInfo
   inOutbound: LaneFilter
 }
@@ -69,13 +69,13 @@ const DetailItem = ({
   clipboardType?: string
   tooltip?: React.ReactNode
 }) => (
-  <>
+  <div className="lane-details-hero__details__item">
     <div className="lane-details-hero__details__label">
       {label}
       {tooltip}
     </div>
     <div data-clipboard-type={clipboardType}>{children}</div>
-  </>
+  </div>
 )
 
 function LaneDetailsHero({
@@ -83,17 +83,11 @@ function LaneDetailsHero({
   destinationNetwork,
   onRamp,
   offRamp,
+  sourceAddress,
   destinationAddress,
-  enforceOutOfOrder,
   explorer,
   inOutbound,
 }: LaneDetailsHeroProps) {
-  // Map boolean values to display strings
-  const getOutOfOrderText = (value?: boolean) => {
-    if (value === true) return "Required"
-    if (value === false) return "Optional"
-    return "N/A"
-  }
 
   return (
     <div className="lane-details-hero">
@@ -115,44 +109,41 @@ function LaneDetailsHero({
       </div>
 
       <div className="lane-details-hero__details">
-        {/* Display address information based on lane type */}
-        {inOutbound === LaneFilter.Inbound ? (
-          <DetailItem label="OffRamp address" clipboardType="offramp">
-            <AddressComponent
-              address={offRamp}
-              endLength={6}
-              contractUrl={getExplorerAddressUrl(explorer, destinationNetwork.chainType)(offRamp)}
-            />
-          </DetailItem>
-        ) : (
-          <DetailItem
-            label="OnRamp address"
-            clipboardType="onramp"
-            tooltip={sourceNetwork.chainType === "solana" ? <StyledTooltip tip="Same as Router." /> : undefined}
-          >
-            <AddressComponent
-              address={onRamp}
-              endLength={6}
-              contractUrl={getExplorerAddressUrl(explorer, sourceNetwork.chainType)(onRamp)}
-            />
-          </DetailItem>
-        )}
+        <DetailItem
+          label="OnRamp address"
+          clipboardType="onramp"
+          tooltip={sourceNetwork.chainType === "solana" ? <StyledTooltip tip="Same as Router." /> : undefined}
+        >
+          <AddressComponent
+            address={onRamp}
+            endLength={6}
+            contractUrl={getExplorerAddressUrl(explorer, sourceNetwork.chainType)(onRamp)}
+          />
+        </DetailItem>
 
-        <DetailItem label="Destination chain selector" clipboardType="destination-chain-selector">
-          {destinationAddress ? <CopyValue value={destinationAddress} /> : "n/a"}{" "}
+        <DetailItem label="OffRamp address" clipboardType="offramp">
+          <AddressComponent
+            address={offRamp}
+            endLength={6}
+            contractUrl={getExplorerAddressUrl(explorer, destinationNetwork.chainType)(offRamp)}
+          />
         </DetailItem>
 
-        {inOutbound === LaneFilter.Outbound && (
-          <DetailItem
-            label="Out of Order Execution"
-            clipboardType="out-of-order-execution"
-            tooltip={
-              <StyledTooltip tip="Controls the execution order of your messages on the destination blockchain. Setting this to true allows messages to be executed in any order. Setting it to false ensures messages are executed in sequence, so a message will only be executed if the preceding one has been executed. On lanes where 'Out of Order Execution' is required, you must set this to true; otherwise, the transaction will revert." />
-            }
-          >
-            {getOutOfOrderText(enforceOutOfOrder)}
-          </DetailItem>
-        )}
+        <DetailItem
+          label="Source chain selector"
+          clipboardType="source-chain-selector"
+          tooltip={<StyledTooltip tip="Unique identifier for the source blockchain network." />}
+        >
+          {sourceAddress ? <CopyValue value={sourceAddress} /> : "n/a"}
+        </DetailItem>
+
+        <DetailItem
+          label="Destination chain selector"
+          clipboardType="destination-chain-selector"
+          tooltip={<StyledTooltip tip="Unique identifier for the destination blockchain network." />}
+        >
+          {destinationAddress ? <CopyValue value={destinationAddress} /> : "n/a"}
+        </DetailItem>
       </div>
     </div>
   )
diff --git a/src/components/CCIP/Drawer/Drawer.css b/src/components/CCIP/Drawer/Drawer.css
index f42721fad1d..0b8d48a4d6a 100644
--- a/src/components/CCIP/Drawer/Drawer.css
+++ b/src/components/CCIP/Drawer/Drawer.css
@@ -52,6 +52,11 @@
     width: 75%;
   }
 
+  /* Wide drawer for lane details - full width minus ESC button width and spacing */
+  .drawer__container--wide {
+    width: calc(100% - var(--space-12x) - var(--space-8x));
+  }
+
   .drawer__closeMobile {
     display: none;
   }
diff --git a/src/components/CCIP/Drawer/Drawer.tsx b/src/components/CCIP/Drawer/Drawer.tsx
index 9120bb98b0f..7846947b9dc 100644
--- a/src/components/CCIP/Drawer/Drawer.tsx
+++ b/src/components/CCIP/Drawer/Drawer.tsx
@@ -1,6 +1,6 @@
 import { useStore } from "@nanostores/react"
 import "./Drawer.css"
-import { drawerContentStore } from "./drawerStore.ts"
+import { drawerContentStore, drawerWidthStore, DrawerWidth } from "./drawerStore.ts"
 import { useRef, useEffect, useState } from "react"
 import { clsx } from "~/lib/clsx/clsx.ts"
 import type { ReactNode } from "react"
@@ -9,6 +9,7 @@ function Drawer() {
   const drawerRef = useRef<HTMLDivElement>(null)
   const drawerContentRef = useRef<HTMLDivElement>(null)
   const $drawerContent = useStore(drawerContentStore) as (() => ReactNode) | ReactNode | null
+  const $drawerWidth = useStore(drawerWidthStore)
   const [isOpened, setIsOpened] = useState(false)
 
   // exit when press esc
@@ -47,6 +48,7 @@ function Drawer() {
     // Use transitionend event instead of setTimeout for better performance
     const handleTransitionEnd = () => {
       drawerContentStore.set(null)
+      drawerWidthStore.set(DrawerWidth.Default)
       drawerRef.current?.removeEventListener("transitionend", handleTransitionEnd)
     }
 
@@ -62,7 +64,12 @@ function Drawer() {
       ref={drawerRef}
       onClick={handleClickOutside}
     >
-      <div className="drawer__container" ref={drawerContentRef}>
+      <div
+        className={clsx("drawer__container", {
+          "drawer__container--wide": $drawerWidth === DrawerWidth.Wide,
+        })}
+        ref={drawerContentRef}
+      >
         <div className="drawer__close">
           <button id="drawer-exit" onClick={handleClose} aria-label="Close drawer">
             <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/src/components/CCIP/Drawer/LaneDrawer.tsx b/src/components/CCIP/Drawer/LaneDrawer.tsx
index cfc602ea850..766eafc6a16 100644
--- a/src/components/CCIP/Drawer/LaneDrawer.tsx
+++ b/src/components/CCIP/Drawer/LaneDrawer.tsx
@@ -39,7 +39,7 @@ function LaneDrawer({
 
   return (
     <>
-      <h2 className="ccip-table__drawer-heading">Lane details</h2>
+      <h2 className="ccip-table__drawer-heading">Lane Details</h2>
       <LaneDetailsHero
         sourceNetwork={{
           logo: sourceNetwork.logo,
@@ -53,8 +53,8 @@ function LaneDrawer({
         }}
         onRamp={lane.onRamp.address}
         offRamp={lane.offRamp.address}
-        enforceOutOfOrder={lane.onRamp.enforceOutOfOrder}
         explorer={explorer}
+        sourceAddress={sourceNetworkDetails?.chainSelector || ""}
         destinationAddress={destinationNetworkDetails?.chainSelector || ""}
         inOutbound={inOutbound}
       />
@@ -73,7 +73,7 @@ function LaneDrawer({
             <thead>
               <tr>
                 <th style={{ width: "100px" }}>Ticker</th>
-                <th style={{ width: "150px" }}>Token address (Source)</th>
+                <th style={{ width: "150px" }}>Source token address</th>
                 <th style={{ width: "80px" }}>Decimals</th>
                 <th style={{ width: "100px" }}>
                   Mechanism
@@ -91,34 +91,84 @@ function LaneDrawer({
                   />
                 </th>
                 <th style={{ width: "150px" }}>
-                  Rate limit capacity
-                  <Tooltip
-                    label=""
-                    tip="Maximum amount per transaction"
-                    labelStyle={{
-                      marginRight: "5px",
-                    }}
-                    style={{
-                      display: "inline-block",
-                      verticalAlign: "middle",
-                      marginBottom: "2px",
-                    }}
-                  />
+                  <div>
+                    Rate limit capacity
+                    <Tooltip
+                      label=""
+                      tip="Maximum amount per transaction"
+                      labelStyle={{
+                        marginRight: "5px",
+                      }}
+                      style={{
+                        display: "inline-block",
+                        verticalAlign: "middle",
+                        marginBottom: "2px",
+                      }}
+                    />
+                  </div>
+                  <div style={{ color: "var(--muted-more-foreground)", fontSize: "0.875rem", fontWeight: "normal" }}>
+                    (Tokens)
+                  </div>
                 </th>
                 <th style={{ width: "180px" }}>
-                  Rate limit refill rate
-                  <Tooltip
-                    label=""
-                    tip="Rate at which available capacity is replenished"
-                    labelStyle={{
-                      marginRight: "5px",
-                    }}
-                    style={{
-                      display: "inline-block",
-                      verticalAlign: "middle",
-                      marginBottom: "2px",
-                    }}
-                  />
+                  <div>
+                    Rate limit refill rate
+                    <Tooltip
+                      label=""
+                      tip="Rate at which available capacity is replenished"
+                      labelStyle={{
+                        marginRight: "5px",
+                      }}
+                      style={{
+                        display: "inline-block",
+                        verticalAlign: "middle",
+                        marginBottom: "2px",
+                      }}
+                    />
+                  </div>
+                  <div style={{ color: "var(--muted-more-foreground)", fontSize: "0.875rem", fontWeight: "normal" }}>
+                    (Tokens/sec)
+                  </div>
+                </th>
+                <th style={{ width: "150px" }}>
+                  <div>
+                    FTF Rate limit capacity
+                    <Tooltip
+                      label=""
+                      tip="Maximum amount per transaction for Fast Token Finality"
+                      labelStyle={{
+                        marginRight: "5px",
+                      }}
+                      style={{
+                        display: "inline-block",
+                        verticalAlign: "middle",
+                        marginBottom: "2px",
+                      }}
+                    />
+                  </div>
+                  <div style={{ color: "var(--muted-more-foreground)", fontSize: "0.875rem", fontWeight: "normal" }}>
+                    (Tokens)
+                  </div>
+                </th>
+                <th style={{ width: "180px" }}>
+                  <div>
+                    FTF Rate limit refill rate
+                    <Tooltip
+                      label=""
+                      tip="Rate at which available capacity is replenished for Fast Token Finality"
+                      labelStyle={{
+                        marginRight: "5px",
+                      }}
+                      style={{
+                        display: "inline-block",
+                        verticalAlign: "middle",
+                        marginBottom: "2px",
+                      }}
+                    />
+                  </div>
+                  <div style={{ color: "var(--muted-more-foreground)", fontSize: "0.875rem", fontWeight: "normal" }}>
+                    (Tokens/sec)
+                  </div>
                 </th>
               </tr>
             </thead>
@@ -190,13 +240,31 @@ function LaneDrawer({
 
                         <td>
                           {lane.supportedTokens &&
-                            displayCapacity(
-                              data[sourceNetwork.key].decimals,
-                              token,
-                              lane.supportedTokens[token]?.rateLimiterConfig?.[
-                                inOutbound === LaneFilter.Inbound ? "in" : "out"
-                              ]
-                            )}
+                            (() => {
+                              const capacity = displayCapacity(
+                                data[sourceNetwork.key].decimals,
+                                token,
+                                lane.supportedTokens[token]?.rateLimiterConfig?.[
+                                  inOutbound === LaneFilter.Inbound ? "in" : "out"
+                                ]
+                              )
+                              return capacity === "N/A" ? (
+                                <Tooltip
+                                  label="Unavailable"
+                                  tip="Rate limit data is currently unavailable. You can find the Token Pool rate limit by reading the Token Pool contract directly on the relevant blockchain."
+                                  labelStyle={{
+                                    marginRight: "5px",
+                                  }}
+                                  style={{
+                                    display: "inline-block",
+                                    verticalAlign: "middle",
+                                    marginBottom: "2px",
+                                  }}
+                                />
+                              ) : (
+                                capacity
+                              )
+                            })()}
                         </td>
                         <td className="rate-tooltip-cell">
                           {lane.supportedTokens && (
@@ -206,9 +274,18 @@ function LaneDrawer({
                               symbol={token}
                               decimals={data[sourceNetwork.key].decimals}
                               position="left"
+                              showUnavailableText={true}
                             />
                           )}
                         </td>
+                        <td>
+                          {/* Placeholder for FTF Rate limit capacity - data not yet available */}
+                          -
+                        </td>
+                        <td>
+                          {/* Placeholder for FTF Rate limit refill rate - data not yet available */}
+                          -
+                        </td>
                       </tr>
                     )
                   })}
diff --git a/src/components/CCIP/Drawer/TokenDrawer.tsx b/src/components/CCIP/Drawer/TokenDrawer.tsx
index c883f61d77f..37be3443683 100644
--- a/src/components/CCIP/Drawer/TokenDrawer.tsx
+++ b/src/components/CCIP/Drawer/TokenDrawer.tsx
@@ -1,5 +1,5 @@
 import "../Tables/Table.css"
-import { drawerContentStore } from "../Drawer/drawerStore.ts"
+import { drawerContentStore, drawerWidthStore, DrawerWidth } from "../Drawer/drawerStore.ts"
 import TokenDetailsHero from "../ChainHero/TokenDetailsHero.tsx"
 import {
   Environment,
@@ -231,6 +231,7 @@ function TokenDrawer({
                           type="button"
                           className={`ccip-table__network-name ${tokenPaused ? "ccip-table__network-name--paused" : ""}`}
                           onClick={() => {
+                            drawerWidthStore.set(DrawerWidth.Wide)
                             drawerContentStore.set(() => (
                               <LaneDrawer
                                 environment={environment}
diff --git a/src/components/CCIP/Drawer/drawerStore.ts b/src/components/CCIP/Drawer/drawerStore.ts
index 44a1dc6c30f..127d82104fb 100644
--- a/src/components/CCIP/Drawer/drawerStore.ts
+++ b/src/components/CCIP/Drawer/drawerStore.ts
@@ -2,4 +2,10 @@
 import { atom } from "nanostores"
 import type { JSX } from "preact"
 
+export enum DrawerWidth {
+  Default = "default",
+  Wide = "wide",
+}
+
 export const drawerContentStore = atom<(() => JSX.Element) | null>(null)
+export const drawerWidthStore = atom<DrawerWidth>(DrawerWidth.Default)
diff --git a/src/components/CCIP/Hero/Hero.css b/src/components/CCIP/Hero/Hero.css
index f8d0c61579a..57bc1db56aa 100644
--- a/src/components/CCIP/Hero/Hero.css
+++ b/src/components/CCIP/Hero/Hero.css
@@ -1,5 +1,5 @@
 .ccip-hero {
-  background-color: var(--gray-100);
+  background: var(--Page-Background-Alt);
   border-bottom: 1px solid var(--gray-200);
 }
 
diff --git a/src/components/CCIP/Search/Search.tsx b/src/components/CCIP/Search/Search.tsx
index f869bf20860..d9de46f51f8 100644
--- a/src/components/CCIP/Search/Search.tsx
+++ b/src/components/CCIP/Search/Search.tsx
@@ -4,7 +4,7 @@ import { clsx } from "~/lib/clsx/clsx.ts"
 import { useClickOutside } from "~/hooks/useClickOutside.tsx"
 import { Environment, LaneConfig, LaneFilter } from "~/config/data/ccip/types.ts"
 import { directoryToSupportedChain, getExplorer, fallbackTokenIconUrl } from "~/features/utils/index.ts"
-import { drawerContentStore } from "../Drawer/drawerStore.ts"
+import { drawerContentStore, drawerWidthStore, DrawerWidth } from "../Drawer/drawerStore.ts"
 import LaneDrawer from "../Drawer/LaneDrawer.tsx"
 import { ChainType, ExplorerInfo } from "~/config/types.ts"
 import type { WorkerMessage, WorkerResponse } from "~/workers/data-worker.ts"
@@ -236,7 +236,8 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
                     <li key={lane.sourceNetwork.name + lane.destinationNetwork.key}>
                       <button
                         type="button"
-                        onClick={() =>
+                        onClick={() => {
+                          drawerWidthStore.set(DrawerWidth.Wide)
                           drawerContentStore.set(() => (
                             <LaneDrawer
                               environment={environment}
@@ -249,7 +250,7 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
                               explorer={generateExplorerUrl(lane)}
                             />
                           ))
-                        }
+                        }}
                         aria-label={`View lane from ${lane.sourceNetwork.name} to ${lane.destinationNetwork.name}`}
                       >
                         <div className="ccip-hero__search-results__lane-images">
diff --git a/src/components/CCIP/Tables/ChainTable.tsx b/src/components/CCIP/Tables/ChainTable.tsx
index d487faf20ee..5e278233d20 100644
--- a/src/components/CCIP/Tables/ChainTable.tsx
+++ b/src/components/CCIP/Tables/ChainTable.tsx
@@ -4,7 +4,7 @@ import Tabs from "./Tabs.tsx"
 import TableSearchInput from "./TableSearchInput.tsx"
 import { useEffect, useState } from "react"
 import { getExplorerAddressUrl } from "~/features/utils/index.ts"
-import { drawerContentStore } from "../Drawer/drawerStore.ts"
+import { drawerContentStore, drawerWidthStore, DrawerWidth } from "../Drawer/drawerStore.ts"
 import LaneDrawer from "../Drawer/LaneDrawer.tsx"
 import { Environment, Version, LaneFilter } from "~/config/data/ccip/types.ts"
 import { getLane } from "~/config/data/ccip/data.ts"
@@ -130,6 +130,7 @@ function ChainTable({ lanes, explorer, sourceNetwork, environment }: TableProps)
                           version: Version.V1_2_0,
                         })
 
+                        drawerWidthStore.set(DrawerWidth.Wide)
                         drawerContentStore.set(() => (
                           <LaneDrawer
                             environment={environment}
diff --git a/src/components/CCIP/Tables/Table.css b/src/components/CCIP/Tables/Table.css
index b2207a0db75..fd042a84688 100644
--- a/src/components/CCIP/Tables/Table.css
+++ b/src/components/CCIP/Tables/Table.css
@@ -139,6 +139,7 @@
   padding: var(--space-2x);
   color: var(--gray-900);
   margin-bottom: 0px;
+  background: var(--Page-Background-Alt);
 }
 
 .ccip-table__filters {
diff --git a/src/components/CCIP/Tooltip/RateTooltip.tsx b/src/components/CCIP/Tooltip/RateTooltip.tsx
index 836644ab53d..78b6c948d9c 100644
--- a/src/components/CCIP/Tooltip/RateTooltip.tsx
+++ b/src/components/CCIP/Tooltip/RateTooltip.tsx
@@ -7,14 +7,33 @@ function RateTooltip({
   symbol,
   decimals,
   position,
+  showUnavailableText = false,
 }: {
   destinationLane: SupportedTokenConfig
   inOutbound: LaneFilter
   symbol: string
   decimals: number
   position?: "top" | "bottom" | "left" | "right"
+  showUnavailableText?: boolean
 }) {
   if (!destinationLane.rateLimiterConfig?.[inOutbound === LaneFilter.Inbound ? "in" : "out"]?.isEnabled) {
+    if (showUnavailableText) {
+      return (
+        <Tooltip
+          label="Unavailable"
+          tip="Rate limit data is currently unavailable. You can find the Token Pool rate limit by reading the Token Pool contract directly on the relevant blockchain."
+          labelStyle={{
+            marginRight: "5px",
+          }}
+          style={{
+            display: "inline-block",
+            verticalAlign: "middle",
+            marginBottom: "2px",
+          }}
+          position={position}
+        />
+      )
+    }
     return <span>N/A</span>
   }
   const { rateSecond, maxThroughput } = displayRate(
diff --git a/src/styles/index.css b/src/styles/index.css
index c282cc9327f..805359ae635 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -24,6 +24,9 @@
   --user-font-scale: 1rem - 16px;
   --max-width: calc(100%);
   --fullwidth-max-width: calc(100% - 1rem);
+
+  /* Page background and border colors */
+  --Page-Background-Alt: #fafbfc;
 }
 
 /* Fonts provided via centralized design system/CDN; no local @font-face overrides here. */