diff --git a/src/components/CCIP/Chain/Chain.astro b/src/components/CCIP/Chain/Chain.astro
index 7826bc0cb93..562ab44bd1e 100644
--- a/src/components/CCIP/Chain/Chain.astro
+++ b/src/components/CCIP/Chain/Chain.astro
@@ -75,16 +75,15 @@ const searchLanes = getSearchLanes({ environment })
         <h2>Tokens <span>({allTokens.length})</span></h2>
         <a class="button secondary" href="/ccip/concepts/cross-chain-tokens">List my token</a>
       </div>
-      <div class="tokens__grid">
-        <ChainTokenGrid tokens={allTokens} network={network} client:only="react" environment={environment} />
-      </div>
+
+      <ChainTokenGrid tokens={allTokens} network={network} client:only="react" environment={environment} />
     </div>
   </section>
 </CcipLayout>
 
 <style scoped="false">
   .layout {
-    --gutter: var(--space-6x);
+    --gutter: var(--space-10x);
     --doc-padding: var(--space-6x);
     margin: var(--space-8x) auto;
     display: flex;
@@ -119,12 +118,6 @@ const searchLanes = getSearchLanes({ environment })
     gap: var(--space-2x);
   }
 
-  .tokens__grid {
-    display: grid;
-    grid-template-columns: 32% 32% 32%;
-    gap: var(--space-2x);
-  }
-
   @media (min-width: 50em) {
     .layout {
       max-width: min(calc(1440px - 2 * var(--space-16x)), calc(100% - 2 * var(--space-16x)));
@@ -135,6 +128,9 @@ const searchLanes = getSearchLanes({ environment })
   @media (min-width: 992px) {
     .layout {
       display: grid;
+      --doc-padding: var(--space-10x);
+      padding-top: var(--doc-padding);
+      padding-bottom: var(--doc-padding);
       grid-template-columns: 1fr 1fr;
       gap: var(--space-24x);
     }
@@ -145,12 +141,6 @@ const searchLanes = getSearchLanes({ environment })
       min-height: 420px;
     }
 
-    .tokens__grid {
-      min-height: 420px;
-      grid-template-columns: 1fr 1fr 1fr 1fr;
-      gap: var(--space-4x);
-    }
-
     .ccip-heading {
       border-bottom: 1px solid var(--gray-200);
     }
diff --git a/src/components/CCIP/Chain/ChainTokenGrid.css b/src/components/CCIP/Chain/ChainTokenGrid.css
new file mode 100644
index 00000000000..9f61a1e8472
--- /dev/null
+++ b/src/components/CCIP/Chain/ChainTokenGrid.css
@@ -0,0 +1,13 @@
+.tokens__grid {
+  display: grid;
+  grid-template-columns: 32% 32% 32%;
+  gap: var(--space-2x);
+}
+
+@media (min-width: 992px) {
+  .tokens__grid {
+    min-height: 420px;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: var(--space-4x);
+  }
+}
diff --git a/src/components/CCIP/Chain/ChainTokenGrid.tsx b/src/components/CCIP/Chain/ChainTokenGrid.tsx
index b63bde4797f..5528cb9a26a 100644
--- a/src/components/CCIP/Chain/ChainTokenGrid.tsx
+++ b/src/components/CCIP/Chain/ChainTokenGrid.tsx
@@ -3,7 +3,9 @@ import TokenCard from "../Cards/TokenCard"
 import { drawerContentStore } from "../Drawer/drawerStore"
 import TokenDrawer from "../Drawer/TokenDrawer"
 import { directoryToSupportedChain, getChainIcon, getTitle } from "~/features/utils"
-import React from "react"
+import { useState } from "react"
+import "./ChainTokenGrid.css"
+import SeeMore from "../SeeMore/SeeMore"
 
 interface ChainTokenGridProps {
   tokens: {
@@ -24,62 +26,72 @@ interface ChainTokenGridProps {
   environment: Environment
 }
 
+const BEFORE_SEE_MORE = 6 * 4 // Number of networks to show before the "See more" button, 7 rows x 4 items
+
 function ChainTokenGrid({ tokens, network, environment }: ChainTokenGridProps) {
-  return tokens.map((token) => {
-    const data = getTokenData({
-      environment,
-      version: Version.V1_2_0,
-      tokenSymbol: token.name || "",
-    })
-    return (
-      <TokenCard
-        name={token.name}
-        logo={token.logo}
-        key={token.name}
-        onClick={() => {
-          const selectedNetwork = Object.keys(data)
-            .map((key) => {
-              const directory = directoryToSupportedChain(key || "")
-              const title = getTitle(directory) || ""
-              const networkLogo = getChainIcon(directory) || ""
-              return {
-                name: title,
-                token: data[key].name || "",
-                key,
-                logo: networkLogo,
-                symbol: token,
-                tokenLogo: network.logo || "",
-                decimals: data[key].decimals || 0,
-                tokenAddress: data[key].tokenAddress || "",
-                tokenPoolType: data[key].poolType || "",
-                tokenPoolAddress: data[key].poolAddress || "",
-                explorerUrl: network.explorerUrl,
-              }
-            })
-            .find((n) => n.key === network.key)
+  const [seeMore, setSeeMore] = useState(tokens.length <= BEFORE_SEE_MORE)
+  return (
+    <>
+      <div className="tokens__grid">
+        {tokens.slice(0, seeMore ? tokens.length : BEFORE_SEE_MORE).map((token) => {
+          const data = getTokenData({
+            environment,
+            version: Version.V1_2_0,
+            tokenSymbol: token.name || "",
+          })
+          return (
+            <TokenCard
+              name={token.name}
+              logo={token.logo}
+              key={token.name}
+              onClick={() => {
+                const selectedNetwork = Object.keys(data)
+                  .map((key) => {
+                    const directory = directoryToSupportedChain(key || "")
+                    const title = getTitle(directory) || ""
+                    const networkLogo = getChainIcon(directory) || ""
+                    return {
+                      name: title,
+                      token: data[key].name || "",
+                      key,
+                      logo: networkLogo,
+                      symbol: token,
+                      tokenLogo: network.logo || "",
+                      decimals: data[key].decimals || 0,
+                      tokenAddress: data[key].tokenAddress || "",
+                      tokenPoolType: data[key].poolType || "",
+                      tokenPoolAddress: data[key].poolAddress || "",
+                      explorerUrl: network.explorerUrl,
+                    }
+                  })
+                  .find((n) => n.key === network.key)
 
-          if (selectedNetwork) {
-            drawerContentStore.set(() => (
-              <TokenDrawer
-                token={{
-                  name: data[Object.keys(data)[0]]?.name || "",
-                  logo: token.logo,
-                  symbol: token.name,
-                }}
-                network={selectedNetwork}
-                destinationLanes={getAllTokenLanes({
-                  environment,
-                  version: Version.V1_2_0,
-                  token: token.name || "",
-                })}
-                environment={environment}
-              />
-            ))
-          }
-        }}
-      />
-    )
-  })
+                if (selectedNetwork) {
+                  drawerContentStore.set(() => (
+                    <TokenDrawer
+                      token={{
+                        name: data[Object.keys(data)[0]]?.name || "",
+                        logo: token.logo,
+                        symbol: token.name,
+                      }}
+                      network={selectedNetwork}
+                      destinationLanes={getAllTokenLanes({
+                        environment,
+                        version: Version.V1_2_0,
+                        token: token.name || "",
+                      })}
+                      environment={environment}
+                    />
+                  ))
+                }
+              }}
+            />
+          )
+        })}
+      </div>
+      {!seeMore && <SeeMore onClick={() => setSeeMore(!seeMore)} />}
+    </>
+  )
 }
 
 export default ChainTokenGrid
diff --git a/src/components/CCIP/Landing/NetworkGrid.css b/src/components/CCIP/Landing/NetworkGrid.css
new file mode 100644
index 00000000000..acf154ba8dc
--- /dev/null
+++ b/src/components/CCIP/Landing/NetworkGrid.css
@@ -0,0 +1,12 @@
+.networks__grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-2x);
+}
+
+@media (min-width: 992px) {
+  .networks__grid {
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-6x);
+  }
+}
diff --git a/src/components/CCIP/Landing/NetworkGrid.tsx b/src/components/CCIP/Landing/NetworkGrid.tsx
new file mode 100644
index 00000000000..d80bf8df34f
--- /dev/null
+++ b/src/components/CCIP/Landing/NetworkGrid.tsx
@@ -0,0 +1,40 @@
+import { useState } from "react"
+import NetworkCard from "../Cards/NetworkCard"
+import SeeMore from "../SeeMore/SeeMore"
+import "./NetworkGrid.css"
+
+interface NetworkGridProps {
+  networks: {
+    name: string
+    totalLanes: number
+    totalTokens: number
+    logo: string
+    chain: string
+  }[]
+  environment: string
+}
+
+const BEFORE_SEE_MORE = 2 * 7 // Number of networks to show before the "See more" button, 2 rows x 8 items
+
+function NetworkGrid({ networks, environment }: NetworkGridProps) {
+  const [seeMore, setSeeMore] = useState(networks.length <= BEFORE_SEE_MORE)
+  return (
+    <>
+      <div className="networks__grid">
+        {networks.slice(0, seeMore ? networks.length : BEFORE_SEE_MORE).map((chain) => (
+          <a href={`/ccip/supported-networks/${environment}/chain/${chain.chain}`}>
+            <NetworkCard
+              name={chain.name}
+              totalLanes={chain.totalLanes}
+              totalTokens={chain.totalTokens}
+              logo={chain.logo}
+            />
+          </a>
+        ))}
+      </div>
+      {!seeMore && <SeeMore onClick={() => setSeeMore(!seeMore)} />}
+    </>
+  )
+}
+
+export default NetworkGrid
diff --git a/src/components/CCIP/Landing/ccip-landing.astro b/src/components/CCIP/Landing/ccip-landing.astro
index fa9c6df363b..bd30192836e 100644
--- a/src/components/CCIP/Landing/ccip-landing.astro
+++ b/src/components/CCIP/Landing/ccip-landing.astro
@@ -10,10 +10,9 @@ import {
   getSearchLanes,
   Version,
 } from "~/config/data/ccip"
-import NetworkCard from "~/components/CCIP/Cards/NetworkCard"
-import TokenCard from "~/components/CCIP/Cards/TokenCard"
 import { getTokenIconUrl } from "~/features/utils"
-import Drawer from "../Drawer/Drawer"
+import NetworkGrid from "./NetworkGrid"
+import TokenGrid from "../TokenGrid/TokenGrid"
 export type Props = {
   environment: Environment
 }
@@ -48,45 +47,22 @@ const searchLanes = getSearchLanes({ environment })
       <div class="ccip-heading">
         <h2>Networks {environment} <span>({networks.length})</span></h2>
       </div>
-      <div class="networks__grid">
-        {
-          networks.map((chain) => (
-            <a href={`/ccip/supported-networks/${environment}/chain/${chain.chain}`}>
-              <NetworkCard
-                name={chain.name}
-                totalLanes={chain.totalLanes}
-                totalTokens={chain.totalTokens}
-                logo={chain.logo}
-              />
-            </a>
-          ))
-        }
-      </div>
+      <NetworkGrid networks={networks} environment={environment} client:load />
     </div>
     <div>
       <div class="ccip-heading">
         <h2>Tokens <span>({allTokens.length})</span></h2>
-        <a class="button secondary" href="/ccip/concepts/cross-chain-tokens">List my token</a>
+        <a class="button secondary" href="/ccip/concepts/cross-chain-tokens">Add my token</a>
       </div>
 
-      <div class="tokens__grid">
-        {
-          allTokens.map((token) => (
-            <TokenCard
-              name={token.name}
-              logo={token.logo}
-              link={`/ccip/supported-networks/${environment}/token/${token.name}`}
-            />
-          ))
-        }
-      </div>
+      <TokenGrid tokens={allTokens} environment={environment} client:load />
     </div>
   </section>
 </CcipLayout>
 
 <style>
   .layout {
-    --gutter: var(--space-6x);
+    --gutter: var(--space-10x);
     --doc-padding: var(--space-6x);
     margin: var(--space-8x) auto;
     display: flex;
@@ -116,18 +92,6 @@ const searchLanes = getSearchLanes({ environment })
     letter-spacing: 0.5px;
   }
 
-  .networks__grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--space-2x);
-  }
-
-  .tokens__grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    gap: var(--space-2x);
-  }
-
   @media (min-width: 50em) {
     .layout {
       max-width: min(calc(1440px - 2 * var(--space-16x)), calc(100% - 2 * var(--space-16x)));
@@ -137,20 +101,12 @@ const searchLanes = getSearchLanes({ environment })
 
   @media (min-width: 992px) {
     .layout {
-      --doc-padding: var(--space-6x);
+      --doc-padding: var(--space-10x);
       display: grid;
+      padding-top: var(--doc-padding);
+      padding-bottom: var(--doc-padding);
       grid-template-columns: 1fr 1fr;
       gap: var(--space-24x);
     }
-
-    .networks__grid {
-      grid-template-columns: 1fr 1fr;
-      gap: var(--space-6x);
-    }
-
-    .tokens__grid {
-      grid-template-columns: 1fr 1fr 1fr 1fr;
-      gap: var(--space-4x);
-    }
   }
 </style>
diff --git a/src/components/CCIP/SeeMore/SeeMore.css b/src/components/CCIP/SeeMore/SeeMore.css
new file mode 100644
index 00000000000..2ddd31b9838
--- /dev/null
+++ b/src/components/CCIP/SeeMore/SeeMore.css
@@ -0,0 +1,7 @@
+.seeMore {
+  height: 22px;
+  font-size: 14px;
+  line-height: 22px;
+  color: #2e7bff;
+  margin-top: var(--space-6x);
+}
diff --git a/src/components/CCIP/SeeMore/SeeMore.tsx b/src/components/CCIP/SeeMore/SeeMore.tsx
new file mode 100644
index 00000000000..b966fbe8160
--- /dev/null
+++ b/src/components/CCIP/SeeMore/SeeMore.tsx
@@ -0,0 +1,14 @@
+import "./SeeMore.css"
+interface SeeMoreProps {
+  onClick?: () => void
+}
+
+function SeeMore({ onClick }: SeeMoreProps) {
+  return (
+    <button className="seeMore" onClick={onClick}>
+      See more
+    </button>
+  )
+}
+
+export default SeeMore
diff --git a/src/components/CCIP/Tables/ChainTable.tsx b/src/components/CCIP/Tables/ChainTable.tsx
index ef2902e909f..5616878a78f 100644
--- a/src/components/CCIP/Tables/ChainTable.tsx
+++ b/src/components/CCIP/Tables/ChainTable.tsx
@@ -2,7 +2,7 @@ import Address from "~/components/AddressReact"
 import "./Table.css"
 import Tabs from "./Tabs"
 import TableSearchInput from "./TableSearchInput"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { getExplorerAddressUrl } from "~/features/utils"
 import { drawerContentStore } from "../Drawer/drawerStore"
 import LaneDrawer from "../Drawer/LaneDrawer"
@@ -10,6 +10,7 @@ import { Environment, Version } from "~/config/data/ccip/types"
 import { getLane, LaneFilter } from "~/config/data/ccip"
 import { SupportedChain } from "~/config"
 import { clsx } from "~/lib"
+import SeeMore from "../SeeMore/SeeMore"
 
 interface TableProps {
   environment: Environment
@@ -32,9 +33,18 @@ interface TableProps {
   explorerUrl: string
 }
 
+const BEFORE_SEE_MORE = 12 // Number of networks to show before the "See more" button, 7 rows
+
 function ChainTable({ lanes, explorerUrl, sourceNetwork, environment }: TableProps) {
   const [inOutbound, setInOutbound] = useState<LaneFilter>(LaneFilter.Outbound)
   const [search, setSearch] = useState("")
+  const [seeMore, setSeeMore] = useState(lanes.length <= BEFORE_SEE_MORE)
+
+  useEffect(() => {
+    if (search.length > 0) {
+      setSeeMore(true)
+    }
+  }, [search])
 
   return (
     <>
@@ -66,6 +76,7 @@ function ChainTable({ lanes, explorerUrl, sourceNetwork, environment }: TablePro
           <tbody>
             {lanes
               ?.filter((network) => network.name.toLowerCase().includes(search.toLowerCase()))
+              .slice(0, seeMore ? lanes.length : BEFORE_SEE_MORE)
               .map((network, index) => (
                 <tr key={index}>
                   <td>
@@ -130,7 +141,7 @@ function ChainTable({ lanes, explorerUrl, sourceNetwork, environment }: TablePro
           </tbody>
         </table>
       </div>
-
+      {!seeMore && <SeeMore onClick={() => setSeeMore(!seeMore)} />}
       <div className="ccip-table__notFound">
         {lanes.filter((network) => network.name.toLowerCase().includes(search.toLowerCase())).length === 0 && (
           <>No lanes found</>
diff --git a/src/components/CCIP/Tables/Tabs.css b/src/components/CCIP/Tables/Tabs.css
index 7e6faee31ad..773a3b98d11 100644
--- a/src/components/CCIP/Tables/Tabs.css
+++ b/src/components/CCIP/Tables/Tabs.css
@@ -1,7 +1,7 @@
 .tabs {
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: var(--space-6x);
 }
 
 .tabs__tab {
@@ -20,3 +20,13 @@
   padding-bottom: 5px;
   border-bottom: 3px solid #2e7bff;
 }
+
+@media (max-width: 375px) {
+  .tab {
+    gap: var(--space-4x);
+  }
+
+  .tabs__tab {
+    font-size: var(--space-4x);
+  }
+}
diff --git a/src/components/CCIP/Token/Token.astro b/src/components/CCIP/Token/Token.astro
index 45173837b0c..049ae208f92 100644
--- a/src/components/CCIP/Token/Token.astro
+++ b/src/components/CCIP/Token/Token.astro
@@ -106,13 +106,8 @@ const searchLanes = getSearchLanes({ environment })
 
 <style scoped="false">
   .layout {
-    --gutter: var(--space-6x);
     --doc-padding: var(--space-6x);
-    /* margin-bottom: 0; */
     margin: var(--space-8x) auto;
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--gutter);
     padding: var(--doc-padding);
   }
 
diff --git a/src/components/CCIP/TokenGrid/TokenGrid.css b/src/components/CCIP/TokenGrid/TokenGrid.css
new file mode 100644
index 00000000000..aa0bcdbcc86
--- /dev/null
+++ b/src/components/CCIP/TokenGrid/TokenGrid.css
@@ -0,0 +1,12 @@
+.tokens__grid {
+  display: grid;
+  grid-template-columns: 32% 32% 32%;
+  gap: var(--space-2x);
+}
+
+@media (min-width: 992px) {
+  .tokens__grid {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: var(--space-4x);
+  }
+}
diff --git a/src/components/CCIP/TokenGrid/TokenGrid.tsx b/src/components/CCIP/TokenGrid/TokenGrid.tsx
new file mode 100644
index 00000000000..ee00d41fe11
--- /dev/null
+++ b/src/components/CCIP/TokenGrid/TokenGrid.tsx
@@ -0,0 +1,34 @@
+import { useState } from "react"
+import SeeMore from "../SeeMore/SeeMore"
+import "./TokenGrid.css"
+import TokenCard from "../Cards/TokenCard"
+
+interface TokenGridProps {
+  tokens: {
+    name: string
+    logo: string
+  }[]
+  environment: string
+}
+
+const BEFORE_SEE_MORE = 6 * 4 // Number of networks to show before the "See more" button, 7 rows x 4 items
+
+function NetworkGrid({ tokens, environment }: TokenGridProps) {
+  const [seeMore, setSeeMore] = useState(tokens.length <= BEFORE_SEE_MORE)
+  return (
+    <>
+      <div className="tokens__grid">
+        {tokens.slice(0, seeMore ? tokens.length : BEFORE_SEE_MORE).map((token) => (
+          <TokenCard
+            name={token.name}
+            logo={token.logo}
+            link={`/ccip/supported-networks/${environment}/token/${token.name}`}
+          />
+        ))}
+      </div>
+      {!seeMore && <SeeMore onClick={() => setSeeMore(!seeMore)} />}
+    </>
+  )
+}
+
+export default NetworkGrid
diff --git a/src/components/Segment/Segments.css b/src/components/Segment/Segments.css
index cef8d2d5783..ebda7f86170 100644
--- a/src/components/Segment/Segments.css
+++ b/src/components/Segment/Segments.css
@@ -14,7 +14,7 @@
   font-size: 14px;
   font-weight: 600;
   line-height: 22px;
-  width: 112px;
+  width: 92px;
   text-align: center;
 }
 
@@ -26,3 +26,9 @@
   background: var(--Button-Tertiary-Background-Selected, #f5f7fa);
   color: #0847f7;
 }
+
+@media (min-width: 992px) {
+  .segments__container a {
+    width: 112px;
+  }
+}