diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index d2b4e7b0..1e5c44d1 100644
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -158,8 +158,8 @@ export function Layout({ children, title, tableOfContents }) {
               </Link>
             </div>
             <Header />
-            {router.route.startsWith("/ipa") && <NavigationAPI tableOfContents={tableOfContents} className="hidden lg:mt-10 lg:block" />}
-            {router.route.startsWith("/docs") &&<NavigationDocs className="hidden lg:mt-10 lg:block" />}
+            {router.route.startsWith("/ipa") && <NavigationAPI className="hidden lg:mt-10 lg:block" tableOfContents={tableOfContents} />}
+            {router.route.startsWith("/docs") && <NavigationDocs className="hidden lg:mt-10 lg:block" />}
           </div>
         </motion.header>
         <div className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
diff --git a/src/components/NavigationAPI.jsx b/src/components/NavigationAPI.jsx
index c7b92065..3ba39b27 100644
--- a/src/components/NavigationAPI.jsx
+++ b/src/components/NavigationAPI.jsx
@@ -35,9 +35,9 @@ export const apiNavigation = [
   },
 ]
 
-export function NavigationAPI(props) {
+export function NavigationAPI({tableOfContents, className}) {
   return (
-      <nav {...props}>
+      <nav className={className}>
         <ul role="list">
           <TopLevelNavItem href="https://netbird.io/">Home</TopLevelNavItem>
           <TopLevelNavItem href="/docs/introductions">Docs</TopLevelNavItem>
@@ -49,7 +49,7 @@ export function NavigationAPI(props) {
                 <NavigationGroup
                     key={group.title}
                     group={group}
-                    tableOfContents={props.tableOfContents}
+                    tableOfContents={tableOfContents}
                     className={groupIndex === 0 && 'md:mt-0'}
                 />
             ))}
@@ -183,7 +183,7 @@ function NavigationGroup({ group, className, tableOfContents }) {
                       transition: { duration: 0.15 },
                     }}
                   >
-                    {router.route.startsWith("/ipa/resources") && tableOfContents.tableOfContents?.map((section) => (
+                    {router.route.startsWith("/ipa/resources") && tableOfContents?.map((section) => (
                       <li key={section.id}>
                         <NavLink
                           href={`${link.href}#${section.id}`}
diff --git a/src/components/NavigationDocs.jsx b/src/components/NavigationDocs.jsx
index 863e9068..10d8921b 100644
--- a/src/components/NavigationDocs.jsx
+++ b/src/components/NavigationDocs.jsx
@@ -40,9 +40,9 @@ export const docsNavigation = [
 
 ]
 
-export function NavigationDocs(props) {
+export function NavigationDocs({className}) {
   return (
-    <nav {...props}>
+    <nav className={className}>
       <ul role="list">
           <TopLevelNavItem href="https://netbird.io/">Home</TopLevelNavItem>
           <TopLevelNavItem href="/docs/introductions">Docs</TopLevelNavItem>