diff --git a/packages/geoview-core/src/core/components/nav-bar/nav-bar-panel-button.tsx b/packages/geoview-core/src/core/components/nav-bar/nav-bar-panel-button.tsx
index 057ed9be4eb..6d3fbcdb5b7 100644
--- a/packages/geoview-core/src/core/components/nav-bar/nav-bar-panel-button.tsx
+++ b/packages/geoview-core/src/core/components/nav-bar/nav-bar-panel-button.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState, MouseEvent } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { getSxClasses } from './nav-bar-style';
@@ -82,7 +81,7 @@ export default function NavbarPanelButton({ buttonPanel }: NavbarPanelButtonType
         <Box sx={{ width: `${buttonPanel.panel?.width ?? 300}px`, maxHeight: '500px' }}>
           <DialogTitle sx={sxClasses.popoverTitle}>{(buttonPanel.panel?.title as string) ?? ''}</DialogTitle>
           <DialogContent>
-            <HtmlToReact htmlContent={(buttonPanel?.panel?.content ?? '') as any} />
+            <HtmlToReact htmlContent={(buttonPanel?.panel?.content ?? '') as string} />
           </DialogContent>
         </Box>
       </Popover>
diff --git a/packages/geoview-core/src/core/components/nav-bar/nav-bar-style.ts b/packages/geoview-core/src/core/components/nav-bar/nav-bar-style.ts
index 4adf98943cb..e953722b697 100644
--- a/packages/geoview-core/src/core/components/nav-bar/nav-bar-style.ts
+++ b/packages/geoview-core/src/core/components/nav-bar/nav-bar-style.ts
@@ -73,6 +73,6 @@ export const getSxClasses = (theme: Theme): any => ({
     fontSize: theme.palette.geoViewFontSize.default,
     fontWeight: '700',
     color: theme.palette.geoViewColor.textColor.main,
-    borderBottom: `1px solid ${theme.palette.geoViewColor.bgColor.dark[100]}}`
+    borderBottom: `1px solid ${theme.palette.geoViewColor.bgColor.dark[100]}}`,
   },
 });
diff --git a/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx b/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx
index e887f85b7ea..426b774b50b 100644
--- a/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx
+++ b/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState, Fragment } from 'react';
+import { useCallback, useEffect, useRef, useState, Fragment, isValidElement } from 'react';
 
 import { useTranslation } from 'react-i18next';
 
@@ -21,8 +21,7 @@ type NavBarProps = {
   api: NavBarApi;
 };
 
-type DefaultNavbar = 'fullScreen' | 'location' | 'home' | 'zoomIn' | 'zoomOut';
-type NavbarButtonGroup = Record<string, TypeButtonPanel | DefaultNavbar>;
+type NavbarButtonGroup = Record<string, TypeButtonPanel | JSX.Element>;
 type NavButtonGroups = Record<string, NavbarButtonGroup>;
 
 /**
@@ -42,18 +41,10 @@ export function NavBar(props: NavBarProps): JSX.Element {
   // get the expand or collapse from store
   const navBarComponents = useUINavbarComponents();
 
-  const defaultNavbar: Record<DefaultNavbar, JSX.Element> = {
-    fullScreen: <Fullscreen />,
-    location: <Location />,
-    home: <Home />,
-    zoomIn: <ZoomIn />,
-    zoomOut: <ZoomOut />,
-  };
-
   // internal state
   const navBarRef = useRef<HTMLDivElement>(null);
   const defaultButtonGroups: NavButtonGroups = {
-    zoom: { zoomIn: 'zoomIn', zoomOut: 'zoomOut' },
+    zoom: { zoomIn: <ZoomIn />, zoomOut: <ZoomOut /> },
   };
   const [buttonPanelGroups, setButtonPanelGroups] = useState<NavButtonGroups>(defaultButtonGroups);
 
@@ -63,15 +54,15 @@ export function NavBar(props: NavBarProps): JSX.Element {
 
     let displayButtons: NavbarButtonGroup = {};
     if (navBarComponents.includes('fullscreen')) {
-      displayButtons = { ...displayButtons, fullScreen: 'fullScreen' };
+      displayButtons = { ...displayButtons, fullScreen: <Fullscreen /> };
     }
 
     if (navBarComponents.includes('location')) {
-      displayButtons = { ...displayButtons, location: 'location' };
+      displayButtons = { ...displayButtons, location: <Location /> };
     }
 
     if (navBarComponents.includes('home')) {
-      displayButtons = { ...displayButtons, home: 'home' };
+      displayButtons = { ...displayButtons, home: <Home /> };
     }
 
     setButtonPanelGroups({
@@ -130,11 +121,7 @@ export function NavBar(props: NavBarProps): JSX.Element {
     };
   }, [navBarApi, handleNavApiAddButtonPanel, handleNavApiRemoveButtonPanel]);
 
-  function renderButtonPanel(buttonPanel: TypeButtonPanel | DefaultNavbar, key: string): JSX.Element | null {
-    if (typeof buttonPanel === 'string') {
-      return <Fragment key={`${key}-component`}>{defaultNavbar[buttonPanel as DefaultNavbar]}</Fragment>;
-    }
-
+  function renderButtonPanel(buttonPanel: TypeButtonPanel, key: string): JSX.Element | null {
     if (!buttonPanel.button.visible) {
       return null;
     }
@@ -173,8 +160,10 @@ export function NavBar(props: NavBarProps): JSX.Element {
           orientation="vertical"
         >
           {Object.keys(buttonPanelGroup).map((buttonPanelKey) => {
-            const buttonPanel: TypeButtonPanel | DefaultNavbar = buttonPanelGroup[buttonPanelKey];
-            return renderButtonPanel(buttonPanel, buttonPanelKey);
+            if (isValidElement(buttonPanelGroup[buttonPanelKey])) {
+              return <Fragment key={`${buttonPanelKey}-component`}>{buttonPanelGroup[buttonPanelKey] as JSX.Element}</Fragment>;
+            }
+            return renderButtonPanel(buttonPanelGroup[buttonPanelKey] as TypeButtonPanel, buttonPanelKey);
           })}
         </ButtonGroup>
       </Fragment>