diff --git a/website/src/pages/en/index.json b/website/src/pages/en/index.json
index 3a514cbb1908..3d575aa7a1fc 100644
--- a/website/src/pages/en/index.json
+++ b/website/src/pages/en/index.json
@@ -72,6 +72,28 @@
       "substreams": "Substreams",
       "firehose": "Firehose",
       "tokenApi": "Token API"
+    },
+    "tableLegend": {
+      "subgraphs": {
+        "basic": "Subgraph Studio (No issuance)",
+        "full": "The Graph Network (Issuance)"
+      },
+      "substreams": {
+        "basic": "Base",
+        "full": "Extended (EVM Only)"
+      },
+      "firehose": {
+        "basic": "Base",
+        "full": "Extended (EVM Only)"
+      },
+      "tokenApi": {
+        "supported": "All endpoints supported"
+      },
+      "icons": {
+        "checkmark": "Checkmark",
+        "checkmarks": "Checkmarks"
+      },
+      "legendTitle": "Table Legend"
     }
   },
   "networkGuides": {
diff --git a/website/src/supportedNetworks/NetworksTable.tsx b/website/src/supportedNetworks/NetworksTable.tsx
index 8750e9a6b8f5..316709e443a1 100644
--- a/website/src/supportedNetworks/NetworksTable.tsx
+++ b/website/src/supportedNetworks/NetworksTable.tsx
@@ -11,7 +11,7 @@ import {
   Text,
   useDebounce,
 } from '@edgeandnode/gds'
-import { Check, EyeClosed } from '@edgeandnode/gds/icons'
+import { Check, Checks, EyeClosed } from '@edgeandnode/gds/icons'
 import { NetworkIcon } from '@edgeandnode/go'
 
 import { Callout, Table } from '@/components'
@@ -24,6 +24,13 @@ export function NetworksTable({ networks }: { networks: SupportedNetwork[] }) {
   const [immediateSearchQuery, setSearchQuery] = useState('')
   const [immediateShowTestnets, setShowTestnets] = useState(false)
 
+  const checkmark = (
+    <Check size={4} alt={t('index.supportedNetworks.tableLegend.icons.checkmark')} className="h-[0.75lh]" />
+  )
+  const checkmarks = (
+    <Checks size={4} alt={t('index.supportedNetworks.tableLegend.icons.checkmarks')} className="h-[0.75lh]" />
+  )
+
   const searchQuery = useDebounce(immediateSearchQuery, 200)
   const showTestnets = useDebounce(immediateShowTestnets, 200)
 
@@ -58,6 +65,57 @@ export function NetworksTable({ networks }: { networks: SupportedNetwork[] }) {
         </p>
       </Callout>
 
+      <aside
+        className="mb-6 overflow-clip rounded-8 border border-space-1500 bg-space-1800"
+        aria-labelledby="networks-table-legend"
+      >
+        <h3 id="networks-table-legend" className="sr-only">
+          {t('index.supportedNetworks.tableLegend.legendTitle')}
+        </h3>
+        <div className="grid grid-cols-1 gap-px text-space-500 xs:grid-cols-2">
+          <div className="border-b border-r border-space-1500 p-4">
+            <span className="text-c10 mb-2 block text-white">Subgraphs</span>
+            <div className="flex gap-2">
+              {checkmark}
+              <span className="text-14">{t('index.supportedNetworks.tableLegend.subgraphs.basic')}</span>
+            </div>
+            <div className="flex gap-2">
+              {checkmarks}
+              <span className="text-14">{t('index.supportedNetworks.tableLegend.subgraphs.full')}</span>
+            </div>
+          </div>
+          <div className="border-b border-r border-space-1500 p-4 lg:border-r-0">
+            <span className="text-c10 mb-2 block text-white">Substreams</span>
+            <div className="flex gap-2">
+              {checkmark}
+              <span className="text-14">{t('index.supportedNetworks.tableLegend.substreams.basic')}</span>
+            </div>
+            <div className="flex gap-2">
+              {checkmarks}
+              <span className="text-14">{t('index.supportedNetworks.tableLegend.substreams.full')}</span>
+            </div>
+          </div>
+          <div className="border-b border-r border-space-1500 p-4">
+            <span className="text-c10 mb-2 block text-white">Firehose</span>
+            <div className="flex gap-2">
+              {checkmark}
+              <span className="text-14">{t('index.supportedNetworks.tableLegend.firehose.basic')}</span>
+            </div>
+            <div className="flex gap-2">
+              {checkmarks}
+              <span className="text-14">{t('index.supportedNetworks.tableLegend.firehose.full')}</span>
+            </div>
+          </div>
+          <div className="p-4">
+            <span className="text-c10 mb-2 block text-white">Token API</span>
+            <div className="flex gap-2">
+              {checkmark}
+              <span className="text-14">{t('index.supportedNetworks.tableLegend.tokenApi.supported')}</span>
+            </div>
+          </div>
+        </div>
+      </aside>
+
       <div className="mb-4 flex items-center gap-4">
         <div className="flex-grow">
           <ExperimentalSearch
@@ -103,9 +161,6 @@ export function NetworksTable({ networks }: { networks: SupportedNetwork[] }) {
               <th className="min-w-47">
                 <Text.C10>{t('index.supportedNetworks.tableHeaders.name')}</Text.C10>
               </th>
-              <th className="min-w-47">
-                <Text.C10>{t('index.supportedNetworks.tableHeaders.id')}</Text.C10>
-              </th>
               <th align="center">
                 <Text.C10>{t('index.supportedNetworks.tableHeaders.subgraphs')}</Text.C10>
               </th>
@@ -125,26 +180,44 @@ export function NetworksTable({ networks }: { networks: SupportedNetwork[] }) {
                 className="group/table-row isolate -outline-offset-1 transition hocus-visible-within:bg-space-1600 has-[a:focus-visible]:outline-focus"
               >
                 <td>
-                  <ButtonOrLink href={`/supported-networks/${network.id}`} className="static outline-none">
-                    <span className="flex items-center gap-2">
-                      <NetworkIcon network={network} variant={getIconVariant(network.id)} size={5} />
-                      <span className="text-body-xsmall">{network.shortName}</span>
-                    </span>
-                    <span className="absolute inset-y-0 start-0 z-10 w-[1999px]" />
-                  </ButtonOrLink>
-                </td>
-                <td>
-                  <div className="flex items-center justify-between gap-2">
-                    <span className="text-body-xsmall">{network.id}</span>
+                  <div className="static flex items-center justify-between gap-2">
+                    <ButtonOrLink href={`/supported-networks/${network.id}`} className="static outline-none">
+                      <div className="flex items-center gap-3">
+                        <NetworkIcon network={network} variant={getIconVariant(network.id)} size={5} />
+                        <div className="flex flex-col">
+                          <span className="text-body-xsmall leading-5 text-white">{network.shortName}</span>
+                          <span className="text-body-xsmall leading-5 text-space-500">{network.id}</span>
+                        </div>
+                      </div>
+                      <span className="absolute inset-y-0 start-0 z-10 w-[1999px]" />
+                    </ButtonOrLink>
                     <div className="z-20 shrink-0 opacity-0 transition group-focus-within/table-row:opacity-100 group-hover/table-row:opacity-100">
                       <ExperimentalCopyButton size="small" variant="tertiary" value={network.id} />
                     </div>
                   </div>
                 </td>
-                <td align="center">{network.subgraphs ? <Check size={4} alt="Checkmark" /> : null}</td>
-                <td align="center">{network.substreams ? <Check size={4} alt="Checkmark" /> : null}</td>
-                <td align="center">{network.firehose ? <Check size={4} alt="Checkmark" /> : null}</td>
-                <td align="center">{network.tokenApi ? <Check size={4} alt="Checkmark" /> : null}</td>
+                <td align="center">
+                  {network.subgraphsSupportLevel === 'full'
+                    ? checkmarks
+                    : network.subgraphsSupportLevel === 'basic'
+                      ? checkmark
+                      : null}
+                </td>
+                <td align="center">
+                  {network.substreamsSupportLevel === 'full'
+                    ? checkmarks
+                    : network.substreamsSupportLevel === 'basic'
+                      ? checkmark
+                      : null}
+                </td>
+                <td align="center">
+                  {network.firehoseSupportLevel === 'full'
+                    ? checkmarks
+                    : network.firehoseSupportLevel === 'basic'
+                      ? checkmark
+                      : null}
+                </td>
+                <td align="center">{network.tokenApi ? checkmark : null}</td>
               </tr>
             ))}
           </tbody>
diff --git a/website/src/supportedNetworks/utils.ts b/website/src/supportedNetworks/utils.ts
index 2de8d153584c..5b64b3b18354 100644
--- a/website/src/supportedNetworks/utils.ts
+++ b/website/src/supportedNetworks/utils.ts
@@ -1,4 +1,4 @@
-import { NetworksRegistry } from '@pinax/graph-networks-registry'
+import { type Network, NetworksRegistry } from '@pinax/graph-networks-registry'
 
 // Networks that should use the "mono" icon variant (TODO: add this feature to web3icons?)
 export const MONO_ICON_NETWORKS = [
@@ -41,6 +41,26 @@ export const getIconVariant = (networkId: string): 'mono' | 'branded' => {
   return MONO_ICON_NETWORKS.includes(networkId) ? 'mono' : 'branded'
 }
 
+// Support level for services
+export const getSubgraphsSupportLevel = (network: Network) => {
+  const hasSubgraphs = Boolean(network.services.subgraphs?.length || network.services.sps?.length)
+  if (!hasSubgraphs) return 'none'
+  if (network.issuanceRewards) return 'full'
+  return 'basic'
+}
+export const getSubstreamsSupportLevel = (network: Network) => {
+  const substreamCount = network.services.substreams?.length || 0
+  if (substreamCount === 0) return 'none'
+  if (substreamCount >= 2) return 'full'
+  return 'basic'
+}
+export const getFirehoseSupportLevel = (network: Network) => {
+  const firehoseCount = network.services.firehose?.length || 0
+  if (firehoseCount === 0) return 'none'
+  if (firehoseCount >= 2) return 'full'
+  return 'basic'
+}
+
 export async function getSupportedNetworks() {
   const registry = await NetworksRegistry.fromLatestVersion()
   return registry.networks
@@ -61,6 +81,10 @@ export async function getSupportedNetworks() {
           substreams,
           firehose,
           tokenApi,
+          rawNetwork: network,
+          subgraphsSupportLevel: getSubgraphsSupportLevel(network),
+          substreamsSupportLevel: getSubstreamsSupportLevel(network),
+          firehoseSupportLevel: getFirehoseSupportLevel(network),
         },
       ]
     })