diff --git a/website/src/supportedNetworks/components/NetworkDetailsPage.tsx b/website/src/supportedNetworks/components/NetworkDetailsPage.tsx
index 22f3a18182a5..d78786407d48 100644
--- a/website/src/supportedNetworks/components/NetworkDetailsPage.tsx
+++ b/website/src/supportedNetworks/components/NetworkDetailsPage.tsx
@@ -1,3 +1,4 @@
+import { Card, TimeIcon } from '@/components'
 import { useI18n } from '@/i18n'
 
 import { isEVMNetwork, type Network, type NetworkData, type ProcessedNetwork, supportsTokenAPI } from '../utils'
@@ -8,7 +9,6 @@ import {
   evmWithTokenAPICards,
   nonEvmNoTokenAPICards,
   nonEvmWithTokenAPICards,
-  ResourceCardsLayout,
 } from './ResourceCards'
 
 type NetworkDetailsPageProps = {
@@ -58,12 +58,24 @@ function NetworkDetailsPage({ network }: NetworkDetailsPageProps) {
   const { t } = useI18n()
   const isEVM = isEVMNetwork(network)
   const features = getNetworkFeatures(network)
-  const resourceCards = getResourceCardsConfig(isEVM, features)
+  const cards = getResourceCardsConfig(isEVM, features)
 
   return (
     <>
-      <h3 className="text-h18 mt-0">{t('index.supportedNetworks.guides')}</h3>
-      <ResourceCardsLayout {...resourceCards} />
+      <h3 className="text-h18">{t('index.supportedNetworks.guides')}</h3>
+      <div className="grid grid-cols-6 gap-4">
+        {cards.map((card) => (
+          <Card
+            key={t(card.titleKey)}
+            href={card.href}
+            title={t(card.titleKey)}
+            description={t(card.descriptionKey)}
+            slotAboveTitle={<TimeIcon variant="reading" minutes={card.minutes} />}
+            className="col-span-full [&:nth-child(-n+3)]:lg:col-span-2 [&:nth-child(-n+3)]:lg:min-h-64 [&:nth-child(n+4)]:lg:col-span-3"
+            icon={card.icon}
+          />
+        ))}
+      </div>
     </>
   )
 }
diff --git a/website/src/supportedNetworks/components/ResourceCards.tsx b/website/src/supportedNetworks/components/ResourceCards.tsx
index fc6ad02235c4..7c000b4f0b06 100644
--- a/website/src/supportedNetworks/components/ResourceCards.tsx
+++ b/website/src/supportedNetworks/components/ResourceCards.tsx
@@ -7,274 +7,195 @@ import {
   SubstreamsPoweredSubgraph,
 } from '@edgeandnode/gds/icons'
 
-import { Card, TimeIcon } from '@/components'
-import { useI18n } from '@/i18n'
-
-export type ResourceCard = {
+type Resource = {
   href: string
   titleKey: string
   descriptionKey: string
   minutes: number
   icon?: React.ReactNode
-  className?: string
-}
-
-type CardSectionProps = {
-  cards: ResourceCard[]
-  gridCols: string
-}
-
-function CardSection({ cards, gridCols }: CardSectionProps) {
-  const { t } = useI18n()
-
-  return (
-    <div className={`grid grid-cols-1 gap-4 ${gridCols}`}>
-      {cards.map((card, index) => (
-        <Card
-          key={index}
-          href={card.href}
-          title={t(card.titleKey as any)}
-          description={t(card.descriptionKey as any)}
-          slotAboveTitle={<TimeIcon variant="reading" minutes={card.minutes} />}
-          className={card.className ?? ''}
-          icon={card.icon}
-        />
-      ))}
-    </div>
-  )
-}
-
-export function ResourceCardsLayout({
-  topCards,
-  bottomCards,
-}: {
-  topCards: ResourceCard[]
-  bottomCards: ResourceCard[]
-}) {
-  return (
-    <div className="graph-docs-not-markdown mt-8 grid grid-cols-1 gap-4">
-      <CardSection cards={topCards} gridCols="sm:grid-cols-2 lg:grid-cols-3" />
-      <CardSection cards={bottomCards} gridCols="sm:grid-cols-2" />
-    </div>
-  )
 }
 
 // EVM + Subgraphs, Substreams and Token API
-export const evmWithTokenAPICards = {
-  topCards: [
-    {
-      href: 'https://thegraph.com/docs/en/subgraphs/quick-start/',
-      titleKey: 'index.networkGuides.evm.subgraphQuickStart.title',
-      descriptionKey: 'index.networkGuides.evm.subgraphQuickStart.description',
-      minutes: 10,
-      icon: <Subgraph size={6} />,
-      className: 'min-h-64',
-    },
-    {
-      href: 'https://docs.substreams.dev/',
-      titleKey: 'index.networkGuides.evm.substreamsQuickStart.title',
-      descriptionKey: 'index.networkGuides.evm.substreamsQuickStart.description',
-      minutes: 15,
-      icon: <Substreams size={6} />,
-      className: 'min-h-64',
-    },
-    {
-      href: 'https://thegraph.com/docs/en/token-api/quick-start/',
-      titleKey: 'index.networkGuides.evm.tokenapi.title',
-      descriptionKey: 'index.networkGuides.evm.tokenapi.description',
-      minutes: 8,
-      icon: <APIToken size={6} />,
-      className: 'min-h-64',
-    },
-  ],
-  bottomCards: [
-    {
-      href: 'https://thegraph.com/docs/en/subgraphs/explorer/',
-      titleKey: 'index.networkGuides.evm.graphExplorer.title',
-      descriptionKey: 'index.networkGuides.evm.graphExplorer.description',
-      minutes: 12,
-    },
-    {
-      href: 'https://substreams.dev/',
-      titleKey: 'index.networkGuides.evm.substreamsDev.title',
-      descriptionKey: 'index.networkGuides.evm.substreamsDev.description',
-      minutes: 5,
-    },
-  ],
-}
+export const evmWithTokenAPICards = [
+  {
+    href: 'https://thegraph.com/docs/en/subgraphs/quick-start/',
+    titleKey: 'index.networkGuides.evm.subgraphQuickStart.title' as const,
+    descriptionKey: 'index.networkGuides.evm.subgraphQuickStart.description' as const,
+    minutes: 10,
+    icon: <Subgraph size={6} />,
+  },
+  {
+    href: 'https://docs.substreams.dev/',
+    titleKey: 'index.networkGuides.evm.substreamsQuickStart.title' as const,
+    descriptionKey: 'index.networkGuides.evm.substreamsQuickStart.description' as const,
+    minutes: 15,
+    icon: <Substreams size={6} />,
+  },
+  {
+    href: 'https://thegraph.com/docs/en/token-api/quick-start/',
+    titleKey: 'index.networkGuides.evm.tokenapi.title' as const,
+    descriptionKey: 'index.networkGuides.evm.tokenapi.description' as const,
+    minutes: 8,
+    icon: <APIToken size={6} />,
+  },
+  {
+    href: 'https://thegraph.com/docs/en/subgraphs/explorer/',
+    titleKey: 'index.networkGuides.evm.graphExplorer.title' as const,
+    descriptionKey: 'index.networkGuides.evm.graphExplorer.description' as const,
+    minutes: 12,
+  },
+  {
+    href: 'https://substreams.dev/',
+    titleKey: 'index.networkGuides.evm.substreamsDev.title' as const,
+    descriptionKey: 'index.networkGuides.evm.substreamsDev.description' as const,
+    minutes: 5,
+  },
+] satisfies Resource[]
 
 // EVM without Token API
-export const evmNoTokenAPICards = {
-  topCards: [
-    {
-      href: 'https://thegraph.com/docs/en/subgraphs/quick-start/',
-      titleKey: 'index.networkGuides.evm.subgraphQuickStart.title',
-      descriptionKey: 'index.networkGuides.evm.subgraphQuickStart.description',
-      minutes: 10,
-      icon: <Subgraph size={6} />,
-      className: 'min-h-64',
-    },
-    {
-      href: 'https://thegraph.com/docs/en/substreams/quick-start/',
-      titleKey: 'index.networkGuides.evm.substreamsQuickStart.title',
-      descriptionKey: 'index.networkGuides.evm.substreamsQuickStart.description',
-      minutes: 15,
-      icon: <Substreams size={6} />,
-      className: 'min-h-64',
-    },
-    {
-      href: 'https://thegraph.com/docs/en/subgraphs/billing/',
-      titleKey: 'index.networkGuides.evm.billing.title',
-      descriptionKey: 'index.networkGuides.evm.billing.description',
-      minutes: 5,
-      icon: <Substreams size={6} />,
-      className: 'min-h-64',
-    },
-  ],
-  bottomCards: [
-    {
-      href: 'https://thegraph.com/docs/en/subgraphs/explorer/',
-      titleKey: 'index.networkGuides.evm.graphExplorer.title',
-      descriptionKey: 'index.networkGuides.evm.graphExplorer.description',
-      minutes: 12,
-    },
-    {
-      href: 'https://substreams.dev/',
-      titleKey: 'index.networkGuides.evm.substreamsDev.title',
-      descriptionKey: 'index.networkGuides.evm.substreamsDev.description',
-      minutes: 5,
-    },
-  ],
-}
+export const evmNoTokenAPICards = [
+  {
+    href: 'https://thegraph.com/docs/en/subgraphs/quick-start/',
+    titleKey: 'index.networkGuides.evm.subgraphQuickStart.title' as const,
+    descriptionKey: 'index.networkGuides.evm.subgraphQuickStart.description' as const,
+    minutes: 10,
+    icon: <Subgraph size={6} />,
+  },
+  {
+    href: 'https://thegraph.com/docs/en/substreams/quick-start/',
+    titleKey: 'index.networkGuides.evm.substreamsQuickStart.title' as const,
+    descriptionKey: 'index.networkGuides.evm.substreamsQuickStart.description' as const,
+    minutes: 15,
+    icon: <Substreams size={6} />,
+  },
+  {
+    href: 'https://thegraph.com/docs/en/subgraphs/billing/',
+    titleKey: 'index.networkGuides.evm.billing.title' as const,
+    descriptionKey: 'index.networkGuides.evm.billing.description' as const,
+    minutes: 5,
+    icon: <Substreams size={6} />,
+  },
+  {
+    href: 'https://thegraph.com/docs/en/subgraphs/explorer/',
+    titleKey: 'index.networkGuides.evm.graphExplorer.title' as const,
+    descriptionKey: 'index.networkGuides.evm.graphExplorer.description' as const,
+    minutes: 12,
+  },
+  {
+    href: 'https://substreams.dev/',
+    titleKey: 'index.networkGuides.evm.substreamsDev.title' as const,
+    descriptionKey: 'index.networkGuides.evm.substreamsDev.description' as const,
+    minutes: 5,
+  },
+]
 
 // EVM only Subgraphs
-export const evmSubgraphsOnlyCards = {
-  topCards: [
-    {
-      href: 'https://thegraph.com/docs/en/subgraphs/quick-start/',
-      titleKey: 'index.networkGuides.evm.subgraphQuickStart.title',
-      descriptionKey: 'index.networkGuides.evm.subgraphQuickStart.description',
-      minutes: 10,
-      icon: <Subgraph size={6} />,
-      className: 'min-h-64',
-    },
-    {
-      href: 'https://thegraph.com/docs/en/subgraphs/explorer/',
-      titleKey: 'index.networkGuides.evm.graphExplorer.title',
-      descriptionKey: 'index.networkGuides.evm.graphExplorer.description',
-      minutes: 12,
-      icon: <GraphExplorer size={6} />,
-      className: 'min-h-64',
-    },
-    {
-      href: 'https://thegraph.com/docs/en/subgraphs/billing/',
-      titleKey: 'index.networkGuides.evm.billing.title',
-      descriptionKey: 'index.networkGuides.evm.billing.description',
-      minutes: 5,
-      icon: <MoneyWavy alt="Money" size={6} />,
-      className: 'min-h-64',
-    },
-  ],
-  bottomCards: [
-    {
-      href: 'https://thegraph.com/docs/en/subgraphs/best-practices/timeseries/',
-      titleKey: 'index.networkGuides.evm.timeseries.title',
-      descriptionKey: 'index.networkGuides.evm.timeseries.description',
-      minutes: 5,
-    },
-    {
-      href: 'https://thegraph.com/docs/en/subgraphs/developing/creating/advanced/',
-      titleKey: 'index.networkGuides.evm.advancedFeatures.title',
-      descriptionKey: 'index.networkGuides.evm.advancedFeatures.description',
-      minutes: 7,
-    },
-  ],
-}
+export const evmSubgraphsOnlyCards = [
+  {
+    href: 'https://thegraph.com/docs/en/subgraphs/quick-start/',
+    titleKey: 'index.networkGuides.evm.subgraphQuickStart.title' as const,
+    descriptionKey: 'index.networkGuides.evm.subgraphQuickStart.description' as const,
+    minutes: 10,
+    icon: <Subgraph size={6} />,
+  },
+  {
+    href: 'https://thegraph.com/docs/en/subgraphs/explorer/',
+    titleKey: 'index.networkGuides.evm.graphExplorer.title' as const,
+    descriptionKey: 'index.networkGuides.evm.graphExplorer.description' as const,
+    minutes: 12,
+    icon: <GraphExplorer size={6} />,
+  },
+  {
+    href: 'https://thegraph.com/docs/en/subgraphs/billing/',
+    titleKey: 'index.networkGuides.evm.billing.title' as const,
+    descriptionKey: 'index.networkGuides.evm.billing.description' as const,
+    minutes: 5,
+    icon: <MoneyWavy alt="Money" size={6} />,
+  },
+  {
+    href: 'https://thegraph.com/docs/en/subgraphs/best-practices/timeseries/',
+    titleKey: 'index.networkGuides.evm.timeseries.title' as const,
+    descriptionKey: 'index.networkGuides.evm.timeseries.description' as const,
+    minutes: 5,
+  },
+  {
+    href: 'https://thegraph.com/docs/en/subgraphs/developing/creating/advanced/',
+    titleKey: 'index.networkGuides.evm.advancedFeatures.title' as const,
+    descriptionKey: 'index.networkGuides.evm.advancedFeatures.description' as const,
+    minutes: 7,
+  },
+]
 
 // Non-EVM + Token API
-export const nonEvmWithTokenAPICards = {
-  topCards: [
-    {
-      href: 'https://docs.substreams.dev/',
-      titleKey: 'index.networkGuides.nonEvm.officialDocs.title',
-      descriptionKey: 'index.networkGuides.nonEvm.officialDocs.description',
-      minutes: 15,
-      icon: <Substreams size={6} />,
-      className: 'min-h-64',
-    },
-    {
-      href: 'https://thegraph.com/docs/en/sps/introduction/',
-      titleKey: 'index.networkGuides.nonEvm.spsIntro.title',
-      descriptionKey: 'index.networkGuides.nonEvm.spsIntro.description',
-      minutes: 8,
-      icon: <SubstreamsPoweredSubgraph size={6} />,
-      className: 'min-h-64',
-    },
-    {
-      href: 'https://substreams.dev/',
-      titleKey: 'index.networkGuides.nonEvm.substreamsDev.title',
-      descriptionKey: 'index.networkGuides.nonEvm.substreamsDev.description',
-      minutes: 10,
-      icon: <Substreams size={6} />,
-      className: 'min-h-64',
-    },
-  ],
-  bottomCards: [
-    {
-      href: 'https://github.com/streamingfast/substreams-starter',
-      titleKey: 'index.networkGuides.nonEvm.substreamsStarter.title',
-      descriptionKey: 'index.networkGuides.nonEvm.substreamsStarter.description',
-      minutes: 5,
-    },
-    {
-      href: 'https://github.com/streamingfast/substreams',
-      titleKey: 'index.networkGuides.nonEvm.substreamsRepo.title',
-      descriptionKey: 'index.networkGuides.nonEvm.substreamsRepo.description',
-      minutes: 7,
-    },
-  ],
-}
+export const nonEvmWithTokenAPICards = [
+  {
+    href: 'https://docs.substreams.dev/',
+    titleKey: 'index.networkGuides.nonEvm.officialDocs.title' as const,
+    descriptionKey: 'index.networkGuides.nonEvm.officialDocs.description' as const,
+    minutes: 15,
+    icon: <Substreams size={6} />,
+  },
+  {
+    href: 'https://thegraph.com/docs/en/sps/introduction/',
+    titleKey: 'index.networkGuides.nonEvm.spsIntro.title' as const,
+    descriptionKey: 'index.networkGuides.nonEvm.spsIntro.description' as const,
+    minutes: 8,
+    icon: <SubstreamsPoweredSubgraph size={6} />,
+  },
+  {
+    href: 'https://substreams.dev/',
+    titleKey: 'index.networkGuides.nonEvm.substreamsDev.title' as const,
+    descriptionKey: 'index.networkGuides.nonEvm.substreamsDev.description' as const,
+    minutes: 10,
+    icon: <Substreams size={6} />,
+  },
+  {
+    href: 'https://github.com/streamingfast/substreams-starter',
+    titleKey: 'index.networkGuides.nonEvm.substreamsStarter.title' as const,
+    descriptionKey: 'index.networkGuides.nonEvm.substreamsStarter.description' as const,
+    minutes: 5,
+  },
+  {
+    href: 'https://github.com/streamingfast/substreams',
+    titleKey: 'index.networkGuides.nonEvm.substreamsRepo.title' as const,
+    descriptionKey: 'index.networkGuides.nonEvm.substreamsRepo.description' as const,
+    minutes: 7,
+  },
+]
 
 // Non-EVM without Token API
-export const nonEvmNoTokenAPICards = {
-  topCards: [
-    {
-      href: 'https://thegraph.com/docs/en/substreams/quick-start/',
-      titleKey: 'index.networkGuides.evm.substreamsQuickStart.title',
-      descriptionKey: 'index.networkGuides.evm.substreamsQuickStart.description',
-      minutes: 15,
-      icon: <Substreams size={6} />,
-      className: 'min-h-64',
-    },
-    {
-      href: 'https://substreams.dev/',
-      titleKey: 'index.networkGuides.nonEvm.substreamsDev.title',
-      descriptionKey: 'index.networkGuides.nonEvm.substreamsDev.description',
-      minutes: 10,
-      icon: <Substreams size={6} />,
-      className: 'min-h-64',
-    },
-    {
-      href: 'https://docs.substreams.dev/how-to-guides/sinks',
-      titleKey: 'index.networkGuides.nonEvm.customSubstreamsSinks.title',
-      descriptionKey: 'index.networkGuides.nonEvm.customSubstreamsSinks.description',
-      minutes: 8,
-      icon: <Substreams size={6} />,
-      className: 'min-h-64',
-    },
-  ],
-  bottomCards: [
-    {
-      href: 'https://github.com/streamingfast/substreams-starter',
-      titleKey: 'index.networkGuides.nonEvm.substreamsStarter.title',
-      descriptionKey: 'index.networkGuides.nonEvm.substreamsStarter.description',
-      minutes: 5,
-    },
-    {
-      href: 'https://github.com/streamingfast/substreams',
-      titleKey: 'index.networkGuides.nonEvm.substreamsRepo.title',
-      descriptionKey: 'index.networkGuides.nonEvm.substreamsRepo.description',
-      minutes: 7,
-    },
-  ],
-}
+export const nonEvmNoTokenAPICards = [
+  {
+    href: 'https://thegraph.com/docs/en/substreams/quick-start/',
+    titleKey: 'index.networkGuides.evm.substreamsQuickStart.title' as const,
+    descriptionKey: 'index.networkGuides.evm.substreamsQuickStart.description' as const,
+    minutes: 15,
+    icon: <Substreams size={6} />,
+  },
+  {
+    href: 'https://substreams.dev/',
+    titleKey: 'index.networkGuides.nonEvm.substreamsDev.title' as const,
+    descriptionKey: 'index.networkGuides.nonEvm.substreamsDev.description' as const,
+    minutes: 10,
+    icon: <Substreams size={6} />,
+  },
+  {
+    href: 'https://docs.substreams.dev/how-to-guides/sinks',
+    titleKey: 'index.networkGuides.nonEvm.customSubstreamsSinks.title' as const,
+    descriptionKey: 'index.networkGuides.nonEvm.customSubstreamsSinks.description' as const,
+    minutes: 8,
+    icon: <Substreams size={6} />,
+  },
+  {
+    href: 'https://github.com/streamingfast/substreams-starter',
+    titleKey: 'index.networkGuides.nonEvm.substreamsStarter.title' as const,
+    descriptionKey: 'index.networkGuides.nonEvm.substreamsStarter.description' as const,
+    minutes: 5,
+  },
+  {
+    href: 'https://github.com/streamingfast/substreams',
+    titleKey: 'index.networkGuides.nonEvm.substreamsRepo.title' as const,
+    descriptionKey: 'index.networkGuides.nonEvm.substreamsRepo.description' as const,
+    minutes: 7,
+  },
+]