diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
index d5f97f50e6c..32bacbe94b8 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
@@ -191,7 +191,15 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId, context
                             : 'hover:text-brand-900 text-scale-1000',
                         ].join(' ')}
                       >
-                        {x.icon && <img className="w-3" src={`${router.basePath}${x.icon}`} />}
+                        {x.icon && (
+                          <Image
+                            width={12}
+                            height={12}
+                            alt={x.icon}
+                            src={`${router.basePath}${x.icon}`}
+                          />
+                        )}
+
                         {x.name}
                       </a>
                     </Link>
@@ -215,7 +223,14 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId, context
               <li>
                 <Link href={`${x.href}`} passHref>
                   <a className="cursor-pointer transition text-scale-1100 text-sm hover:text-brand-900 flex gap-3 my-1">
-                    {x.icon && <img className="w-4" src={`${router.basePath}${x.icon}`} />}
+                    {x.icon && (
+                      <Image
+                        width={15}
+                        height={15}
+                        alt={x.icon}
+                        src={`${router.basePath}${x.icon}`}
+                      />
+                    )}
                     {x.name}
                   </a>
                 </Link>
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
index e2db35f487a..377973897a7 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
@@ -8,11 +8,11 @@ import { find } from 'lodash'
 import Image from 'next/image'
 import { useTheme } from 'common/Providers'
 
-// import apiCommonSections from '~/../../spec/common-client-libs-sections.json'
-
 import RevVersionDropdown from '~/components/RefVersionDropdown'
 import { useMenuActiveRefId, useMenuLevelId } from '~/hooks/useMenuState'
 import { RefIdOptions, RefKeyOptions } from './NavigationMenu'
+import { isFuncNotInLibraryOrVersion } from './NavigationMenu.utils'
+import { Fragment } from 'react'
 
 const FunctionLink = ({
   title,
@@ -140,9 +140,6 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
         }).items.map((x) => x.id)
       : []
 
-  // console.log(filterIds)
-  // console.log(modifierIds)
-
   const level = useMenuLevelId()
 
   return (
@@ -192,24 +189,8 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
 
         <ul className="function-link-list">
           {sections.map((fn: any, fnIndex) => {
-            //
-            // check if the link is allowed to be displayed
-            function isFuncNotInLibraryOrVersion(id, type) {
-              if (id && allowedKeys && !allowedKeys.includes(id) && type !== 'markdown') {
-                /*
-                 * Remove this menu link from side bar, as it does not exist for either
-                 * this language, or for this lib version
-                 *
-                 * */
-                return true
-              } else {
-                return false
-              }
-            }
-
-            // run allow check
-            if (isFuncNotInLibraryOrVersion(fn.id, fn.type)) {
-              return <></>
+            if (isFuncNotInLibraryOrVersion(fn.id, fn.type, allowedKeys)) {
+              return
             }
 
             const RenderLink = (props) => {
@@ -261,7 +242,7 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
                         props.items
                           .filter((item) => allowedKeys.includes(item.id))
                           .map((item) => {
-                            return <FunctionLink {...item} library={lib} />
+                            return <FunctionLink {...item} library={lib} key={item.id} />
                           })}
                     </Accordion.Content>
                   </Accordion.Item>
@@ -269,34 +250,28 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
               )
             }
 
-            // handle subtitles with subitems
-            if (!fn.id) {
-              return (
-                <>
-                  <Divider />
-                  <SideMenuTitle title={fn.title} />
-                  {fn.items &&
-                    fn.items
-                      //.filter((item) => item.libs && item.libs.includes(lib))
-                      .map((item) => {
-                        // run allow check
-                        if (isFuncNotInLibraryOrVersion(item.id, item.type)) return <></>
-                        return <RenderLink {...item} library={menu.title} />
-                      })}
-                </>
-              )
-            } else {
-              // handle normal links
-              return (
-                <>
-                  <RenderLink {...fn} library={menu.title} />
-                  {fn.items &&
-                    fn.items
-                      //.filter((item) => item.libs.includes(lib))
-                      .map((item) => <RenderLink {...item} library={menu.title} />)}
-                </>
-              )
-            }
+            return fn.id ? (
+              <Fragment key={fn.id}>
+                <RenderLink {...fn} library={menu.title} key={menu.title} />
+                {fn.items &&
+                  fn.items.map((item) => (
+                    <RenderLink {...item} library={menu.title} key={menu.title} />
+                  ))}
+              </Fragment>
+            ) : (
+              <Fragment key={fn.title}>
+                <Divider />
+                <SideMenuTitle title={fn.title} />
+                {fn.items &&
+                  fn.items.map((item, i) =>
+                    isFuncNotInLibraryOrVersion(item.id, item.type, allowedKeys) ? (
+                      <Fragment key={item.id + i}></Fragment>
+                    ) : (
+                      <RenderLink {...item} library={menu.title} key={item.id + i} />
+                    )
+                  )}
+              </Fragment>
+            )
           })}
         </ul>
       </div>
diff --git a/apps/docs/components/reference/RefFunctionSection.tsx b/apps/docs/components/reference/RefFunctionSection.tsx
index a31c52af992..32002c389bc 100644
--- a/apps/docs/components/reference/RefFunctionSection.tsx
+++ b/apps/docs/components/reference/RefFunctionSection.tsx
@@ -9,6 +9,7 @@ import RefSubLayout from '~/layouts/ref/RefSubLayout'
 import { extractTsDocNode, generateParameters } from '~/lib/refGenerator/helpers'
 
 import RefDetailCollapse from '~/components/reference/RefDetailCollapse'
+import { Fragment } from 'react'
 
 interface ICommonFunc {
   id: string
@@ -32,11 +33,6 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
   // gracefully return nothing if function does not exist
   if (!item) return <></>
 
-  if (item && !item['$ref']) {
-    //console.warn('🚩 issue with $ref in:', item.id)
-  }
-
-  // console.log(item)
   const hasTsRef = item['$ref'] || null
 
   const tsDefinition =
@@ -89,25 +85,29 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
                     })
 
                     const paramItem = overide?.length > 0 ? overide[0] : param
-
                     return (
-                      <Param {...paramItem}>
+                      <Param {...paramItem} key={param.name}>
                         {paramItem.subContent && (
                           <div className="mt-3">
                             <Options>
                               {param.subContent.map((param) => {
                                 return (
-                                  <>
+                                  <Fragment key={param.name + 'subcontent'}>
                                     <Options.Option {...param}>
                                       {param.subContent && (
                                         <Options>
                                           {param.subContent.map((param) => {
-                                            return <Options.Option {...param} />
+                                            return (
+                                              <Options.Option
+                                                {...param}
+                                                key={param.name + 'subcontent-option'}
+                                              />
+                                            )
                                           })}
                                         </Options>
                                       )}
                                     </Options.Option>
-                                  </>
+                                  </Fragment>
                                 )
                               })}
                             </Options>
@@ -150,6 +150,7 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
                       return (
                         <Tabs.Panel
                           id={example.id}
+                          key={example.id}
                           label={example.name}
                           className="flex flex-col gap-3"
                         >