diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/Category.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/Category.tsx
index f47503b27ef..23f4065fcb7 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/Category.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/Category.tsx
@@ -1,9 +1,8 @@
 import React from "react"
-import { ProductItem } from "../../config"
+import { ProductItem, SubProducts, SubProductItem } from "../../config"
 import { clsx } from "../../utils"
 import { CaretRightIcon } from "./CaretRightIcon"
 import styles from "./category.module.css"
-import { SubProducts } from "./ProductNavigation"
 
 type ListItemProps = {
   item: ProductItem
@@ -20,20 +19,29 @@ const Item = React.forwardRef<HTMLAnchorElement, ListItemProps>(
         </span>
       </>
     )
+
+    const handleProductClick = () => {
+      const subProductItems = subProducts as unknown as SubProductItem[]
+      const mappedSubProducts: SubProducts = {
+        label,
+        items: subProductItems.map((subProductItem) => ({
+          label: subProductItem.label,
+          href: subProductItem.href || "#",
+          pages: subProductItem.items.map((item) => ({
+            label: item.label,
+            href: item.href || "/",
+            children: item.children || [],
+          })),
+        })),
+      }
+      onProductClick(mappedSubProducts)
+    }
+
     return subProducts ? (
       <button
         className={clsx(styles.link, "product-link")}
         style={{ marginTop: "var(--space-0x)" }}
-        onClick={() =>
-          onProductClick({
-            ...subProducts,
-            items:
-              subProducts.items?.map((item) => ({
-                ...item,
-                href: item.href || "/",
-              })) || [],
-          })
-        }
+        onClick={handleProductClick}
         data-testid="sub-product-navigation-trigger-mobile"
       >
         {itemComponent}
diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/ProductContent.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/ProductContent.tsx
index 15b11ad5edf..7239ede1778 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/ProductContent.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/ProductContent.tsx
@@ -1,6 +1,5 @@
-import { ProductsNav } from "../../config"
+import { ProductsNav, SubProducts } from "../../config"
 import { Category } from "./Category"
-import { SubProducts } from "./ProductNavigation"
 
 type Props = {
   onProductClick: (subProducts: SubProducts) => void
diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
index e1e3f6f6a8f..4a12e347a16 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
@@ -1,6 +1,6 @@
 import * as Dialog from "@radix-ui/react-dialog"
 import React, { useEffect } from "react"
-import { ProductsNav } from "../../config"
+import { ProductsNav, SubProducts } from "../../config"
 import { SearchTrigger } from "../../NavBar"
 import { isMatchedPath } from "../../isMatchedPath"
 import { clsx } from "../../utils"
@@ -8,18 +8,8 @@ import { CaretIcon } from "../CaretIcon"
 import { extendRadixComponent } from "../extendRadixComponent"
 import { BottomBar } from "./BottomBar"
 import { ProductContent } from "./ProductContent"
-import styles from "./productNavigation.module.css"
 import { SubProductContent } from "./SubProductContent"
-
-type Page = {
-  label: string
-  href: string
-}
-
-export type SubProducts = {
-  label: string
-  items: { label: string; href: string; pages?: Page[] }[]
-}
+import styles from "./productNavigation.module.css"
 
 type Props = {
   searchTrigger?: SearchTrigger
@@ -36,7 +26,7 @@ export function ProductNavigation({ productsNav, path }: Props) {
   const [open, setOpen] = React.useState(false)
   const [subProducts, setSubProducts] = React.useState<SubProducts | undefined>(undefined)
   const [showSearch, setShowSearch] = React.useState(false)
-  const [producsSlidePosition, setProductsSlidePosition] = React.useState<"main" | "submenu">("main")
+  const [productsSlidePosition, setProductsSlidePosition] = React.useState<"main" | "submenu">("main")
   const closeButtonRef = React.useRef(null)
 
   useEffect(() => {
@@ -47,23 +37,27 @@ export function ProductNavigation({ productsNav, path }: Props) {
     if (foundSubProduct) {
       const subProduct = foundSubProduct.items.find((item) => item.subProducts && isMatchedPath(path, item.href))
 
-      if (subProduct?.subProducts?.items) {
-        const safeSubProducts: SubProducts = {
-          label: subProduct.subProducts.label,
-          items: subProduct.subProducts.items.map((item) => ({
-            label: item.label,
-            href: item.href || "#",
-            pages:
-              item.pages?.map((page) => ({
-                label: page.label,
-                href: page.href,
-              })) || [],
+      if (subProduct?.subProducts && Array.isArray(subProduct.subProducts)) {
+        const items = subProduct.subProducts.map((subProductItem) => ({
+          label: subProductItem.label,
+          href: "#",
+          pages: subProductItem.items.map((page) => ({
+            label: page.label,
+            href: page.href,
+            children: page.children || [],
           })),
+        }))
+
+        const safeSubProducts: SubProducts = {
+          label: subProduct.label,
+          items,
         }
 
         setSubProducts(safeSubProducts)
         setProductsSlidePosition("submenu")
       }
+    } else {
+      setSubProducts(undefined)
     }
   }, [path, productsNav])
 
@@ -74,6 +68,7 @@ export function ProductNavigation({ productsNav, path }: Props) {
 
   const onSubproductClick = () => {
     setProductsSlidePosition("main")
+    setSubProducts(undefined)
   }
 
   const handleOpenChange = (newOpenState: boolean) => {
@@ -81,6 +76,7 @@ export function ProductNavigation({ productsNav, path }: Props) {
     if (!newOpenState) {
       setProductsSlidePosition("main")
       setShowSearch(false)
+      setSubProducts(undefined)
     }
   }
 
@@ -114,7 +110,7 @@ export function ProductNavigation({ productsNav, path }: Props) {
                 overflow: "hidden",
               }}
             >
-              <div className={clsx(styles.content, styles[producsSlidePosition])}>
+              <div className={clsx(styles.content, styles[productsSlidePosition])}>
                 <ul className={clsx(styles.productContent)}>
                   <ProductContent onProductClick={onProductClick} productsNav={productsNav} />
                 </ul>
diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/SubProductContent.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/SubProductContent.tsx
index bd1bc6ee50f..30e056076d6 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/SubProductContent.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/SubProductContent.tsx
@@ -1,12 +1,8 @@
-import { clsx } from "../../utils"
+import React, { useEffect, useRef } from "react"
 import { BackArrowIcon } from "./BackArrowIcon"
+import { Page } from "../../config"
 import styles from "./subProductContent.module.css"
 
-type Page = {
-  label: string
-  href: string
-}
-
 type Props = {
   onSubproductClick: () => void
   subProducts?: {
@@ -16,8 +12,41 @@ type Props = {
   currentPath: string
 }
 
+const renderPages = (pages: Page[], currentPath: string, indent: boolean) => {
+  return pages.map(({ label, href, children }) => {
+    const adjustedHref = "/" + href
+    const isActive = currentPath.replace(/\/$/, "") === adjustedHref.replace(/\/$/, "")
+
+    const linkRef = useRef<HTMLAnchorElement>(null)
+
+    useEffect(() => {
+      if (isActive && linkRef.current) {
+        linkRef.current.scrollIntoView({ behavior: "smooth", block: "center" })
+      }
+    }, [isActive])
+
+    const linkStyle = {
+      backgroundColor: isActive ? "var(--blue-100)" : "transparent",
+      color: isActive ? "var(--blue-600)" : "inherit",
+      fontWeight: isActive ? "500" : "normal",
+      marginLeft: indent ? "20px" : "0",
+    }
+
+    return (
+      <React.Fragment key={label}>
+        <a ref={linkRef} style={linkStyle} className={`${styles.link} subproduct-link`} href={adjustedHref}>
+          {label}
+        </a>
+        {children && renderPages(children, currentPath, true)}
+      </React.Fragment>
+    )
+  })
+}
+
 export const SubProductContent = ({ subProducts, onSubproductClick, currentPath }: Props) => {
-  if (!subProducts) return null
+  if (!subProducts) {
+    return null
+  }
 
   return (
     <>
@@ -28,22 +57,7 @@ export const SubProductContent = ({ subProducts, onSubproductClick, currentPath
       {subProducts.items.map(({ label, pages }) => (
         <div key={label}>
           <h3 className={styles.section}>{label}</h3>
-          {pages?.map(({ label, href }) => {
-            const adjustedHref = "/" + href
-            const isActive = currentPath.replace(/\/$/, "") === adjustedHref.replace(/\/$/, "")
-
-            const linkStyle = {
-              backgroundColor: isActive ? "var(--blue-100)" : "transparent",
-              color: isActive ? "var(--blue-600)" : "inherit",
-              fontWeight: isActive ? "500" : "normal",
-            }
-
-            return (
-              <a key={label} style={linkStyle} className={`${styles.link} subproduct-link`} href={adjustedHref}>
-                {label}
-              </a>
-            )
-          })}
+          {pages && renderPages(pages, currentPath, false)}
         </div>
       ))}
     </>
diff --git a/src/components/Header/Nav/config.tsx b/src/components/Header/Nav/config.tsx
index 46ebe493c4b..714c57ec01f 100644
--- a/src/components/Header/Nav/config.tsx
+++ b/src/components/Header/Nav/config.tsx
@@ -4,18 +4,26 @@ type LinksConfig = {
   actionButton?: { label: string; href: string }
 }
 
-export type Item = { label: string; icon?: string; href: string }
-
 export type Page = {
   label: string
   href: string
+  children?: Page[]
 }
 
-export type ProductItem = Item & {
-  subProducts?: {
+export type Item = { label: string; icon?: string; href: string; children?: Page[] }
+
+export type SubProductItem = {
+  label: string
+  href?: string
+  items: {
     label: string
-    items?: { label: string; href?: string; pages?: Page[] }[]
-  }
+    href: string
+    children?: Page[]
+  }[]
+}
+
+export type ProductItem = Item & {
+  subProducts?: SubProductItem[]
 }
 
 export type ProductsNav = {
@@ -26,11 +34,17 @@ export type ProductsNav = {
   }[]
 }
 
+export type SubProducts = {
+  label: string
+  items: { label: string; href: string; pages?: Page[] }[]
+}
+
 export type SubProductsNavItem = {
   label: string
   icon?: string
   href: string
   hideFromDropdown?: boolean
+  pages?: Page[]
 }
 
 export type SubProductsNav = SubProductsNavItem[]
diff --git a/src/components/Header/getNavigationProps.ts b/src/components/Header/getNavigationProps.ts
index 56ddc73aa81..54766bf8c93 100644
--- a/src/components/Header/getNavigationProps.ts
+++ b/src/components/Header/getNavigationProps.ts
@@ -9,6 +9,38 @@ import nodesLogo from "../../assets/product-logos/node-logo.svg"
 import quickstartLogo from "../../assets/product-logos/quickstart-logo.svg"
 import { SIDEBAR as sidebar } from "../../config/sidebar.ts"
 
+interface Page {
+  label: string
+  href: string
+  children?: Page[]
+}
+
+const mapContents = (contents: any[]): Page[] => {
+  return contents.map((page) => {
+    const label = page.title || "No Label"
+    const href = page.url || "#"
+
+    const pageWithChildren: Page = {
+      label,
+      href,
+    }
+
+    if (page.children && Array.isArray(page.children)) {
+      pageWithChildren.children = mapContents(page.children)
+    }
+
+    return pageWithChildren
+  })
+}
+
+const getSubProducts = (sectionData) => {
+  const structuredData = sectionData.map((item) => ({
+    label: item.section,
+    items: mapContents(item.contents),
+  }))
+  return structuredData
+}
+
 const desktopSubProductsNav = [
   {
     label: "Data Feeds",
@@ -65,129 +97,49 @@ const docsSections = [
         label: "Data Feeds",
         href: "/data-feeds",
         icon: dataFeedsLogo.src,
-        subProducts: {
-          label: "Data Feeds",
-          href: "/data-feeds",
-          items: sidebar.dataFeeds?.map((item) => ({
-            label: item.section,
-            pages: item.contents.map((page) => ({
-              label: page.title,
-              href: page.url,
-            })),
-          })),
-        },
+        subProducts: getSubProducts(sidebar.dataFeeds),
       },
       {
         label: "Data Streams",
         href: "/data-streams",
         icon: dataStreamsLogo.src,
-        subProducts: {
-          label: "Data Streams",
-          href: "/data-streams",
-          items: sidebar.dataStreams?.map((item) => ({
-            label: item.section,
-            pages: item.contents.map((page) => ({
-              label: page.title,
-              href: page.url,
-            })),
-          })),
-        },
+        subProducts: getSubProducts(sidebar.dataStreams),
       },
       {
         label: "CCIP",
         href: "/ccip",
         icon: ccipLogo.src,
-        subProducts: {
-          label: "CCIP",
-          href: "/ccip",
-          items: sidebar.ccip?.map((item) => ({
-            label: item.section,
-            pages: item.contents.map((page) => ({
-              label: page.title,
-              href: page.url,
-            })),
-          })),
-        },
+        subProducts: getSubProducts(sidebar.ccip),
       },
       {
         label: "Functions",
         href: "/chainlink-functions",
         icon: functionsLogo.src,
-        subProducts: {
-          label: "Functions",
-          href: "/chainlink-functions",
-          items: sidebar.chainlinkFunctions?.map((item) => ({
-            label: item.section,
-            pages: item.contents.map((page) => ({
-              label: page.title,
-              href: page.url,
-            })),
-          })),
-        },
+        subProducts: getSubProducts(sidebar.chainlinkFunctions),
       },
       {
         label: "Automation",
         href: "/chainlink-automation",
         icon: automationLogo.src,
-        subProducts: {
-          label: "Automation",
-          href: "/chainlink-automation",
-          items: sidebar.automation?.map((item) => ({
-            label: item.section,
-            pages: item.contents.map((page) => ({
-              label: page.title,
-              href: page.url,
-            })),
-          })),
-        },
+        subProducts: getSubProducts(sidebar.automation),
       },
       {
         label: "VRF",
         href: "/vrf",
         icon: vrfLogo.src,
-        subProducts: {
-          label: "VRF",
-          href: "/vrf",
-          items: sidebar.vrf?.map((item) => ({
-            label: item.section,
-            pages: item.contents.map((page) => ({
-              label: page.title,
-              href: page.url,
-            })),
-          })),
-        },
+        subProducts: getSubProducts(sidebar.vrf),
       },
       {
         label: "Chainlink Nodes",
         href: "/chainlink-nodes",
         icon: nodesLogo.src,
-        subProducts: {
-          label: "Chainlink Nodes",
-          href: "/chainlink-nodes",
-          items: sidebar.nodeOperator?.map((item) => ({
-            label: item.section,
-            pages: item.contents.map((page) => ({
-              label: page.title,
-              href: page.url,
-            })),
-          })),
-        },
+        subProducts: getSubProducts(sidebar.nodeOperator),
       },
       {
         label: "General",
         href: "/resources",
         icon: generalLogo.src,
-        subProducts: {
-          label: "General",
-          href: "/resources",
-          items: sidebar.global?.map((item) => ({
-            label: item.section,
-            pages: item.contents.map((page) => ({
-              label: page.title,
-              href: page.url,
-            })),
-          })),
-        },
+        subProducts: getSubProducts(sidebar.global),
       },
       {
         label: "Quickstarts",
diff --git a/src/features/ccip/components/billing/TokenCalculator.tsx b/src/features/ccip/components/billing/TokenCalculator.tsx
index 3d0b8e707fd..0cb7635280e 100644
--- a/src/features/ccip/components/billing/TokenCalculator.tsx
+++ b/src/features/ccip/components/billing/TokenCalculator.tsx
@@ -52,8 +52,6 @@ const fetchData = (endpoint: string, fetchParams: Partial<FetchParams> = {}): Fe
 
       const networkFee = calculateNetworkFeesForTokenMechanism(mechanism, sourceBlockchain, destinationBlockchain)
 
-      console.log({ fees: { token, mechanism, fee: networkFee } })
-
       return { fees: { token, mechanism, fee: networkFee } }
     },
   }