diff --git a/@mf-types/shell/App.d.ts b/@mf-types/shell/App.d.ts
new file mode 100644
index 000000000..3c9cbdff1
--- /dev/null
+++ b/@mf-types/shell/App.d.ts
@@ -0,0 +1,2 @@
+export * from './compiled-types/src/FederatedApp';
+export { default } from './compiled-types/src/FederatedApp';
\ No newline at end of file
diff --git a/@mf-types/shell/compiled-types/src/alerts/AlertProvider.d.ts b/@mf-types/shell/compiled-types/src/alerts/AlertProvider.d.ts
index dd4bb2ac2..6baaae945 100644
--- a/@mf-types/shell/compiled-types/src/alerts/AlertProvider.d.ts
+++ b/@mf-types/shell/compiled-types/src/alerts/AlertProvider.d.ts
@@ -9,4 +9,4 @@ import React from 'react';
 export default function AlertProvider({ alertManagerUrl, children, }: {
     alertManagerUrl: string;
     children: React.ReactNode;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
diff --git a/@mf-types/shell/compiled-types/src/alerts/alertContext.d.ts b/@mf-types/shell/compiled-types/src/alerts/alertContext.d.ts
index acbffad94..80fd911ae 100644
--- a/@mf-types/shell/compiled-types/src/alerts/alertContext.d.ts
+++ b/@mf-types/shell/compiled-types/src/alerts/alertContext.d.ts
@@ -1 +1 @@
-export declare const AlertContext: any;
+export declare const AlertContext: import("react").Context<any>;
diff --git a/@mf-types/shell/compiled-types/src/auth/AuthConfigProvider.d.ts b/@mf-types/shell/compiled-types/src/auth/AuthConfigProvider.d.ts
index f25260610..cbfa51424 100644
--- a/@mf-types/shell/compiled-types/src/auth/AuthConfigProvider.d.ts
+++ b/@mf-types/shell/compiled-types/src/auth/AuthConfigProvider.d.ts
@@ -6,4 +6,4 @@ export declare const useAuthConfig: () => {
 };
 export declare function AuthConfigProvider({ children, }: {
     children: React.ReactNode;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
diff --git a/@mf-types/shell/compiled-types/src/auth/AuthProvider.d.ts b/@mf-types/shell/compiled-types/src/auth/AuthProvider.d.ts
index 649a81a82..cfd994b93 100644
--- a/@mf-types/shell/compiled-types/src/auth/AuthProvider.d.ts
+++ b/@mf-types/shell/compiled-types/src/auth/AuthProvider.d.ts
@@ -2,7 +2,7 @@ import { User } from 'oidc-client-ts';
 import React from 'react';
 export declare function AuthProvider({ children }: {
     children: React.ReactNode;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export type UserData = {
     token: string;
     username: string;
diff --git a/@mf-types/shell/compiled-types/src/auth/FirstTimeLoginProvider.d.ts b/@mf-types/shell/compiled-types/src/auth/FirstTimeLoginProvider.d.ts
index d2926004d..67f62dee9 100644
--- a/@mf-types/shell/compiled-types/src/auth/FirstTimeLoginProvider.d.ts
+++ b/@mf-types/shell/compiled-types/src/auth/FirstTimeLoginProvider.d.ts
@@ -4,4 +4,4 @@ export declare const useFirstTimeLogin: () => {
 };
 export declare function FirstTimeLoginProvider({ children, }: {
     children: React.ReactNode;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
diff --git a/@mf-types/shell/compiled-types/src/initFederation/ShellConfigProvider.d.ts b/@mf-types/shell/compiled-types/src/initFederation/ShellConfigProvider.d.ts
index c44bf025d..784f27cbd 100644
--- a/@mf-types/shell/compiled-types/src/initFederation/ShellConfigProvider.d.ts
+++ b/@mf-types/shell/compiled-types/src/initFederation/ShellConfigProvider.d.ts
@@ -51,5 +51,5 @@ export declare const useShellConfig: () => ShellConfig;
 export declare const ShellConfigProvider: ({ shellConfigUrl, children }: {
     shellConfigUrl: any;
     children: any;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export {};
diff --git a/@mf-types/shell/compiled-types/src/initFederation/ShellHistoryProvider.d.ts b/@mf-types/shell/compiled-types/src/initFederation/ShellHistoryProvider.d.ts
index aef67d63c..1fd36032b 100644
--- a/@mf-types/shell/compiled-types/src/initFederation/ShellHistoryProvider.d.ts
+++ b/@mf-types/shell/compiled-types/src/initFederation/ShellHistoryProvider.d.ts
@@ -1,4 +1,4 @@
-export declare const useShellHistory: () => import("history").History<unknown>;
+export declare const useShellHistory: () => import("react-router").NavigateFunction;
 export declare const ShellHistoryProvider: ({ children }: {
     children: any;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
diff --git a/@mf-types/shell/compiled-types/src/initFederation/ShellThemeSelectorProvider.d.ts b/@mf-types/shell/compiled-types/src/initFederation/ShellThemeSelectorProvider.d.ts
index b7310e806..2d8a113dd 100644
--- a/@mf-types/shell/compiled-types/src/initFederation/ShellThemeSelectorProvider.d.ts
+++ b/@mf-types/shell/compiled-types/src/initFederation/ShellThemeSelectorProvider.d.ts
@@ -13,5 +13,5 @@ export declare function useShellThemeSelector(): ThemeContextValues;
 export declare function ShellThemeSelectorProvider({ children, }: {
     children: (theme: CoreUITheme, themeName: ThemeMode) => React.ReactNode;
     onThemeChanged?: (evt: CustomEvent) => void;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export {};
diff --git a/@mf-types/shell/compiled-types/src/initFederation/UIListProvider.d.ts b/@mf-types/shell/compiled-types/src/initFederation/UIListProvider.d.ts
index 34e350cc2..e3dd0a222 100644
--- a/@mf-types/shell/compiled-types/src/initFederation/UIListProvider.d.ts
+++ b/@mf-types/shell/compiled-types/src/initFederation/UIListProvider.d.ts
@@ -13,4 +13,4 @@ export declare const useDeployedApps: (selectors?: {
 export declare const UIListProvider: ({ children, discoveryURL, }: {
     children: React.ReactNode;
     discoveryURL: string;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
diff --git a/@mf-types/shell/compiled-types/src/navbar/InstanceName.d.ts b/@mf-types/shell/compiled-types/src/navbar/InstanceName.d.ts
index 4755ebda5..175ae50f4 100644
--- a/@mf-types/shell/compiled-types/src/navbar/InstanceName.d.ts
+++ b/@mf-types/shell/compiled-types/src/navbar/InstanceName.d.ts
@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { UserData } from '../auth/AuthProvider';
-export declare const InstanceNameProvider: ({ children }: PropsWithChildren<{}>) => JSX.Element;
+export declare const InstanceNameProvider: ({ children }: PropsWithChildren<{}>) => import("react/jsx-runtime").JSX.Element;
 export declare const useInstanceName: () => string;
 export declare const useInstanceNameAdapter: () => {
     remoteEntryUrl: string;
@@ -14,5 +14,5 @@ export declare const _InternalInstanceName: ({ moduleExports, }: {
             setInstanceName: (userData: UserData | undefined, name: string) => Promise<void>;
         };
     };
-}) => JSX.Element;
-export declare const InstanceName: () => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const InstanceName: () => import("react/jsx-runtime").JSX.Element;
diff --git a/@mf-types/shell/compiled-types/src/navbar/NavBar.d.ts b/@mf-types/shell/compiled-types/src/navbar/NavBar.d.ts
index 467aac4b7..061a4f19a 100644
--- a/@mf-types/shell/compiled-types/src/navbar/NavBar.d.ts
+++ b/@mf-types/shell/compiled-types/src/navbar/NavBar.d.ts
@@ -3,7 +3,7 @@ import { ViewDefinition } from '../initFederation/ConfigurationProviders';
 import type { Link as TypeLink } from './navbarHooks';
 export declare const LoadingNavbar: ({ logo }: {
     logo: string;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const useNavbarLinksToActions: (links: TypeLink[]) => {
     link: TypeLink;
     selected: boolean;
@@ -17,4 +17,4 @@ export declare const Navbar: ({ logo, canChangeLanguage, canChangeTheme, childre
     canChangeTheme?: boolean;
     providerLogout?: boolean;
     children?: React.ReactNode;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
diff --git a/@mf-types/shell/compiled-types/src/navbar/NavbarUpdaterComponents.d.ts b/@mf-types/shell/compiled-types/src/navbar/NavbarUpdaterComponents.d.ts
index 42dc4eb2b..ff4343979 100644
--- a/@mf-types/shell/compiled-types/src/navbar/NavbarUpdaterComponents.d.ts
+++ b/@mf-types/shell/compiled-types/src/navbar/NavbarUpdaterComponents.d.ts
@@ -1 +1 @@
-export declare const NavbarUpdaterComponents: () => JSX.Element;
+export declare const NavbarUpdaterComponents: () => import("react/jsx-runtime").JSX.Element;
diff --git a/@mf-types/shell/compiled-types/src/navbar/NotificationCenter.d.ts b/@mf-types/shell/compiled-types/src/navbar/NotificationCenter.d.ts
index 4ff737f31..20a3a741f 100644
--- a/@mf-types/shell/compiled-types/src/navbar/NotificationCenter.d.ts
+++ b/@mf-types/shell/compiled-types/src/navbar/NotificationCenter.d.ts
@@ -1,2 +1,2 @@
-declare const NotificationCenter: () => JSX.Element;
+declare const NotificationCenter: () => import("react/jsx-runtime").JSX.Element;
 export default NotificationCenter;
diff --git a/@mf-types/shell/compiled-types/src/navbar/SleepingNotificationBell.d.ts b/@mf-types/shell/compiled-types/src/navbar/SleepingNotificationBell.d.ts
index befb9a0f3..d58938778 100644
--- a/@mf-types/shell/compiled-types/src/navbar/SleepingNotificationBell.d.ts
+++ b/@mf-types/shell/compiled-types/src/navbar/SleepingNotificationBell.d.ts
@@ -1 +1 @@
-export declare const SleepingNotificationBell: () => JSX.Element;
+export declare const SleepingNotificationBell: () => import("react/jsx-runtime").JSX.Element;
diff --git a/@mf-types/shell/compiled-types/src/navbar/index.d.ts b/@mf-types/shell/compiled-types/src/navbar/index.d.ts
index 018f0a83e..fbaed5d7b 100644
--- a/@mf-types/shell/compiled-types/src/navbar/index.d.ts
+++ b/@mf-types/shell/compiled-types/src/navbar/index.d.ts
@@ -3,4 +3,4 @@ import './library';
 export type SolutionsNavbarProps = {
     children?: React.ReactNode;
 };
-export declare const SolutionsNavbar: ({ children }: SolutionsNavbarProps) => JSX.Element;
+export declare const SolutionsNavbar: ({ children }: SolutionsNavbarProps) => import("react/jsx-runtime").JSX.Element;
diff --git a/@mf-types/shell/compiled-types/src/navbar/lang.d.ts b/@mf-types/shell/compiled-types/src/navbar/lang.d.ts
index 06bf0b7d6..c74429cb4 100644
--- a/@mf-types/shell/compiled-types/src/navbar/lang.d.ts
+++ b/@mf-types/shell/compiled-types/src/navbar/lang.d.ts
@@ -10,5 +10,5 @@ export declare function LanguageProvider({ children, canChangeLanguage, onLangua
     children: React.ReactNode;
     canChangeLanguage?: boolean;
     onLanguageChanged?: (evt: CustomEvent) => void;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export {};
diff --git a/@mf-types/shell/compiled-types/src/navbar/navbarContext.d.ts b/@mf-types/shell/compiled-types/src/navbar/navbarContext.d.ts
index edf40338e..bf169eca6 100644
--- a/@mf-types/shell/compiled-types/src/navbar/navbarContext.d.ts
+++ b/@mf-types/shell/compiled-types/src/navbar/navbarContext.d.ts
@@ -1,2 +1,3 @@
+import type { Navbar } from './navbarHooks';
 import './navbarHooks';
-export declare const NavbarContext: any;
+export declare const NavbarContext: import("react").Context<Navbar>;
diff --git a/@mf-types/shell/lang.d.ts b/@mf-types/shell/lang.d.ts
new file mode 100644
index 000000000..c9a734ee8
--- /dev/null
+++ b/@mf-types/shell/lang.d.ts
@@ -0,0 +1,2 @@
+export * from './compiled-types/src/navbar/lang';
+export { default } from './compiled-types/src/navbar/lang';
\ No newline at end of file
diff --git a/@mf-types/shell/useNotificationCenter.d.ts b/@mf-types/shell/useNotificationCenter.d.ts
new file mode 100644
index 000000000..20beb06ac
--- /dev/null
+++ b/@mf-types/shell/useNotificationCenter.d.ts
@@ -0,0 +1,2 @@
+export * from './compiled-types/src/useNotificationCenter';
+export { default } from './compiled-types/src/useNotificationCenter';
\ No newline at end of file
diff --git a/build_ts/.dev-server/compiled-types/src/react/ShellHooksContext.d.ts b/build_ts/.dev-server/compiled-types/src/react/ShellHooksContext.d.ts
index 9e6f0b3f3..4ecaf95bc 100644
--- a/build_ts/.dev-server/compiled-types/src/react/ShellHooksContext.d.ts
+++ b/build_ts/.dev-server/compiled-types/src/react/ShellHooksContext.d.ts
@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { ShellAlerts, ShellHooks } from '../@mf-types/shell/compiled-types/src/hooks/useShellHooks';
+import { ShellAlerts, ShellHooks } from 'shell/compiled-types/src/hooks/useShellHooks';
 type Listener = () => void;
 export declare const shellHooksStore: {
     getShellHooks: () => any;
diff --git a/src/react/FederableApp.tsx b/src/react/FederableApp.tsx
index e639b51c9..3027152c1 100644
--- a/src/react/FederableApp.tsx
+++ b/src/react/FederableApp.tsx
@@ -15,9 +15,11 @@ import MetricsAdapterProvider from './next-architecture/ui/MetricsAdapterProvide
 import React, { useEffect, useMemo } from 'react';
 import { XCoreLibraryProvider } from './next-architecture/ui/XCoreLibraryProvider';
 import zenkoUIReducer from './reducers';
-import { ShellHooksProvider } from './ShellHooksContext';
+import {
+  ShellHooksProvider,
+  useBasenameRelativeNavigate,
+} from './ShellHooksContext';
 import { FederatedAppProps } from 'shell/compiled-types/src/FederatedApp';
-import { useNavigate } from './utils/useNavigate';
 
 //@ts-expect-error fix this when you are working on it
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
@@ -38,7 +40,7 @@ export const InternalRouter = ({ children }: { children: React.ReactNode }) => {
 };
 
 const HistoryPushEventListener = () => {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   useEffect(() => {
     const listener = (event: CustomEvent) => {
       const path = event.detail.path;
diff --git a/src/react/Routes.tsx b/src/react/Routes.tsx
index 2059386e3..7626a122f 100644
--- a/src/react/Routes.tsx
+++ b/src/react/Routes.tsx
@@ -14,7 +14,6 @@ import {
   Routes,
   matchPath,
   useLocation,
-  useNavigate,
 } from 'react-router-dom';
 import { useTheme } from 'styled-components';
 import makeMgtClient from '../js/managementClient';
@@ -43,6 +42,7 @@ import AccountContent from './account/AccountContent';
 import BucketCreate from './databrowser/buckets/BucketCreate';
 import DataBrowser from './databrowser/DataBrowser';
 import LocationEditor from './locations/LocationEditor';
+import { useBasenameRelativeNavigate } from './ShellHooksContext';
 
 export const RemoveTrailingSlash = ({ ...rest }) => {
   const location = useLocation();
@@ -192,7 +192,7 @@ function InternalRoutes() {
   const theme = useTheme();
   const { isStorageManager } = useAuthGroups();
   const config = useConfig();
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
 
   const doesRouteMatch = useCallback(
     (paths: string | string[]) => {
diff --git a/src/react/ShellHooksContext.tsx b/src/react/ShellHooksContext.tsx
index f0d6c8d98..36319f525 100644
--- a/src/react/ShellHooksContext.tsx
+++ b/src/react/ShellHooksContext.tsx
@@ -1,4 +1,6 @@
+import { useCurrentApp } from '@scality/module-federation';
 import { FC, ReactNode, useMemo, useSyncExternalStore } from 'react';
+import { NavigateOptions, To, useNavigate } from 'react-router-dom';
 import {
   ShellAlerts,
   ShellHooks,
@@ -97,3 +99,14 @@ export const ShellHooksProvider: FC<{
   }, [shellHooks, shellAlerts]);
   return <>{children}</>;
 };
+
+export const useBasenameRelativeNavigate = () => {
+  const originalNavigate = useNavigate();
+  const { appHistoryBasePath } = useCurrentApp();
+
+  const navigate = (to: To, options?: NavigateOptions) => {
+    return originalNavigate(`${appHistoryBasePath}${to}`, options);
+  };
+
+  return navigate;
+};
diff --git a/src/react/account/AccountDetails.tsx b/src/react/account/AccountDetails.tsx
index acb5ad6c8..c000517f6 100644
--- a/src/react/account/AccountDetails.tsx
+++ b/src/react/account/AccountDetails.tsx
@@ -11,7 +11,7 @@ import {
   Route,
   Routes,
   useLocation,
-  useNavigate,
+  useBasenameRelativeNavigate,
   useParams,
 } from 'react-router-dom';
 import styled, { useTheme } from 'styled-components';
@@ -556,7 +556,7 @@ function Tabs({
   ...rest
 }: TabsProps) {
   const location = useLocation();
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const url = location.pathname;
   const [selectedTabIndex, setSelectedTabIndex] = useState<
     number | null | undefined
diff --git a/src/react/account/AccountList.tsx b/src/react/account/AccountList.tsx
index 0b6fa48db..4b6f17029 100644
--- a/src/react/account/AccountList.tsx
+++ b/src/react/account/AccountList.tsx
@@ -7,7 +7,6 @@ import {
 } from '@scality/core-ui';
 import { Button, Table } from '@scality/core-ui/dist/next';
 import React, { useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { CellProps, CoreUIColumn } from 'react-table';
 import { Account } from '../next-architecture/domain/entities/account';
 
@@ -22,6 +21,7 @@ import { useMetricsAdapter } from '../next-architecture/ui/MetricsAdapterProvide
 import { getDataUsedColumn } from '../next-architecture/ui/metrics/DataUsedColumn';
 import { TableHeaderWrapper } from '../ui-elements/Table';
 import { useAuthGroups } from '../utils/hooks';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
 
 function useAutoAssumeRoleUponAccountDeletion({
   accounts,
@@ -38,13 +38,13 @@ function useAutoAssumeRoleUponAccountDeletion({
 }
 
 function AccountList({ accounts }: { accounts: Account[] }) {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const { features } = useConfig();
   const { isStorageManager } = useAuthGroups();
   useAutoAssumeRoleUponAccountDeletion({ accounts });
 
   const nameCell = ({ value, row }: CellProps<Account, string>) => {
-    const navigate = useNavigate();
+    const navigate = useBasenameRelativeNavigate();
     const setRole = useSetAssumedRole();
     if (!row.original.canManageAccount) {
       return <>{value}</>;
diff --git a/src/react/account/AccountPoliciesList.tsx b/src/react/account/AccountPoliciesList.tsx
index 1488f1a7d..6399d0fdd 100644
--- a/src/react/account/AccountPoliciesList.tsx
+++ b/src/react/account/AccountPoliciesList.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { Box, Button, CopyButton } from '@scality/core-ui/dist/next';
 import { useIAMClient } from '../IAMProvider';
 
@@ -22,6 +21,7 @@ import { ApiError } from '../../types/actions';
 import { AWS_PAGINATED_ENTITIES } from '../utils/IAMhooks';
 import { ListPoliciesResponse, Policy } from 'aws-sdk/clients/iam';
 import { CoreUIColumn } from 'react-table';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
 
 const EditButton = ({
   policyName,
@@ -36,7 +36,7 @@ const EditButton = ({
   policyArn: string;
   defaultVersionId: string;
 }) => {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
 
   const IAMClient = useIAMClient();
   const { data, status } = useQuery(
@@ -125,7 +125,7 @@ const AttachButton = ({
   policyArn: string;
   accountName: string;
 }) => {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   return (
     <Button
       size="inline"
@@ -323,7 +323,7 @@ type InternalPolicy = {
 };
 
 const AccountPoliciesList = ({ accountName }: { accountName: string }) => {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const getQuery = (IAMClient?: IAMClient | null) =>
     getListPoliciesQuery(notFalsyTypeGuard(accountName), IAMClient);
   const getEntitiesFromResult = (data?: ListPoliciesResponse) =>
diff --git a/src/react/account/AccountRoleSelectButtonAndModal.tsx b/src/react/account/AccountRoleSelectButtonAndModal.tsx
index edd8cd1bb..11de1e023 100644
--- a/src/react/account/AccountRoleSelectButtonAndModal.tsx
+++ b/src/react/account/AccountRoleSelectButtonAndModal.tsx
@@ -10,7 +10,7 @@ import {
   useSetAssumedRole,
 } from '../DataServiceRoleProvider';
 import { AccountSelectorButton } from '../ui-elements/Table';
-import { useNavigate } from '../utils/useNavigate';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
 
 function AccountRoleList({ accountsWithRoles, onRowSelected }) {
   const { roleArn } = useDataServiceRole();
@@ -190,7 +190,7 @@ const ModalFooter = ({
   roleArn,
   assumedAccount,
 }) => {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const location = useLocation();
 
   return (
diff --git a/src/react/account/AccountUpdateUser.tsx b/src/react/account/AccountUpdateUser.tsx
index 0e76ea343..39299c48b 100644
--- a/src/react/account/AccountUpdateUser.tsx
+++ b/src/react/account/AccountUpdateUser.tsx
@@ -17,10 +17,11 @@ import { useForm } from 'react-hook-form';
 import { useOutsideClick } from '../utils/hooks';
 import { useIAMClient } from '../IAMProvider';
 import { InfiniteData, useMutation, useQueryClient } from 'react-query';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { notFalsyTypeGuard } from '../../types/typeGuards';
 import { ListUsersResponse } from 'aws-sdk/clients/iam';
 import { getListUsersQuery } from '../queries';
+import { useNavigate } from 'react-router-dom';
 const regexpName = /^[\w+=,.@ -]+$/;
 const schema = Joi.object({
   name: Joi.string()
diff --git a/src/react/account/AccountUserAccessKeys.tsx b/src/react/account/AccountUserAccessKeys.tsx
index 5d9f9b972..820467dca 100644
--- a/src/react/account/AccountUserAccessKeys.tsx
+++ b/src/react/account/AccountUserAccessKeys.tsx
@@ -27,7 +27,7 @@ import {
   useAwsPaginatedEntities,
 } from '../utils/IAMhooks';
 import AccountUserSecretKeyModal from './AccountUserSecretKeyModal';
-import { useNavigate } from '../utils/useNavigate';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
 
 const CreatedOnCell = (rowValue) => {
   const outdatedAlert = useAccessKeyOutdatedStatus(rowValue);
@@ -155,7 +155,7 @@ const AccountUserAccessKeys = () => {
   const { IAMUserName } = useParams<{
     IAMUserName: string;
   }>();
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const IAMClient = useIAMClient();
   const { data: accessKeysResult, status: accessKeysStatus } =
     useAwsPaginatedEntities(
diff --git a/src/react/account/AccountUserList.tsx b/src/react/account/AccountUserList.tsx
index 7021cd6d5..1f08818d2 100644
--- a/src/react/account/AccountUserList.tsx
+++ b/src/react/account/AccountUserList.tsx
@@ -1,5 +1,4 @@
 import { useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { Box, Button, CopyButton } from '@scality/core-ui/dist/next';
 import { TextBadge } from '@scality/core-ui/dist/components/textbadge/TextBadge.component';
 import { useIAMClient } from '../IAMProvider';
@@ -25,6 +24,7 @@ import { ApiError } from '../../types/actions';
 import { User } from 'aws-sdk/clients/iam';
 import { FormattedDateTime, Icon, spacing } from '@scality/core-ui';
 import { Row } from 'react-table';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
 
 type InternalUser = {
   userName: string;
@@ -36,7 +36,7 @@ type InternalUser = {
 
 const AsyncRenderAccessKey = ({ userName }: { userName: string }) => {
   const IAMClient = useIAMClient();
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const { data: accessKeysResult, status: userAccessKeyStatus } =
     useAwsPaginatedEntities(
       getUserAccessKeysQuery(userName, IAMClient),
@@ -99,7 +99,7 @@ const renderAccessKeyComponent = ({ row }) => (
 );
 
 const EditButton = ({ userName }: { userName: string }) => {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   return (
     <Button
       size="inline"
@@ -118,7 +118,7 @@ const AttachButton = ({
   userName: string;
   accountName: string;
 }) => {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   return (
     <Button
       size="inline"
@@ -267,7 +267,7 @@ const DeleteUserAction = ({
 };
 
 const AccountUserList = ({ accountName }: { accountName?: string }) => {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const listUsersQuery = (IAMClient?: IAMClient | null) =>
     getListUsersQuery(notFalsyTypeGuard(accountName), IAMClient);
   const getEntitiesFromResult = (page) => page.Users;
diff --git a/src/react/account/AccountUserSecretKeyModal.tsx b/src/react/account/AccountUserSecretKeyModal.tsx
index fadbe3a5b..9077e1b14 100644
--- a/src/react/account/AccountUserSecretKeyModal.tsx
+++ b/src/react/account/AccountUserSecretKeyModal.tsx
@@ -7,12 +7,12 @@ import { Clipboard } from '../ui-elements/Clipboard';
 import { HideCredential } from '../ui-elements/Hide';
 import { useState } from 'react';
 import { spacing } from '@scality/core-ui/dist/style/theme';
-import { useNavigate } from 'react-router-dom';
 import { useIAMClient } from '../IAMProvider';
 import { useMutation, useQueryClient } from 'react-query';
 import { getUserAccessKeysQuery } from '../queries';
 import styled from 'styled-components';
 import { useCurrentAccount } from '../DataServiceRoleProvider';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
 type Props = {
   IAMUserName: string;
 };
@@ -23,7 +23,7 @@ const StyledCopybutton = styled(CopyButton)({
 });
 
 function AccountUserSecretKeyModal({ IAMUserName }: Props) {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const IAMClient = useIAMClient();
   const queryClient = useQueryClient();
   const [newKey, setNewKey] = useState(null);
diff --git a/src/react/account/Accounts.tsx b/src/react/account/Accounts.tsx
index 1450e3747..3feb554a8 100644
--- a/src/react/account/Accounts.tsx
+++ b/src/react/account/Accounts.tsx
@@ -6,7 +6,7 @@ import {
   Icon,
   Loader,
 } from '@scality/core-ui';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 import { Button } from '@scality/core-ui/dist/components/buttonv2/Buttonv2.component';
 import { useListAccounts } from '../next-architecture/domain/business/accounts';
@@ -20,6 +20,7 @@ import AccountList from './AccountList';
 import { MultiAccountsIcon } from './MultiAccountsIcon';
 import { useConfig } from '../next-architecture/ui/ConfigProvider';
 import { VEEAM_FEATURE } from '../../js/config';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
 
 const Accounts = () => {
   const { pathname } = useLocation();
@@ -29,7 +30,7 @@ const Accounts = () => {
     metricsAdapter,
     accessibleAccountsAdapter,
   });
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
 
   const { isStorageManager } = useAuthGroups();
   const { features } = useConfig();
diff --git a/src/react/account/AwsPaginatedResourceTable.tsx b/src/react/account/AwsPaginatedResourceTable.tsx
index af5853598..5a411382e 100644
--- a/src/react/account/AwsPaginatedResourceTable.tsx
+++ b/src/react/account/AwsPaginatedResourceTable.tsx
@@ -1,5 +1,5 @@
 import { ChangeEvent } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { SearchInput, Tooltip, Wrap, spacing } from '@scality/core-ui';
 import { Box, Table } from '@scality/core-ui/dist/next';
 import { TableItemCount } from '@scality/core-ui/dist/components/tablev2/Search';
@@ -11,6 +11,7 @@ import {
   useAwsPaginatedEntities,
 } from '../utils/IAMhooks';
 import { useQueryParams } from '../utils/hooks';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
 
 const WithTooltipWhileLoading = ({
   children,
@@ -73,7 +74,7 @@ const AwsPaginatedResourceTable = <ENTITY, PREPARED_ENTITY = ENTITY>({
     errorPreviousHeaders,
   },
 }: Props<ENTITY, PREPARED_ENTITY>) => {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const IAMClient = useIAMClient();
   const queryParams = useQueryParams();
   const location = useLocation();
diff --git a/src/react/account/CreateAccountPolicy.tsx b/src/react/account/CreateAccountPolicy.tsx
index 20bbc13e8..0c6f62a28 100644
--- a/src/react/account/CreateAccountPolicy.tsx
+++ b/src/react/account/CreateAccountPolicy.tsx
@@ -3,14 +3,14 @@ import { useMutation, useQueryClient } from 'react-query';
 import { getListPoliciesQuery } from '../queries';
 import { useIAMClient } from '../IAMProvider';
 
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { handleApiError, handleClientError } from '../actions';
 import { useDispatch } from 'react-redux';
 import { ApiError } from '../../types/actions';
 import { CommonPolicyLayout } from './AccountEditCommonLayout';
 import { Input } from '@scality/core-ui/dist/components/inputv2/inputv2';
 import { MouseEvent } from 'react';
-
+import { useNavigate } from 'react-router-dom';
 type PolicyFormValues = {
   policyName: string;
   policyDocument: string;
diff --git a/src/react/account/UpdateAccountPolicy.tsx b/src/react/account/UpdateAccountPolicy.tsx
index 81530a38f..cdae447d5 100644
--- a/src/react/account/UpdateAccountPolicy.tsx
+++ b/src/react/account/UpdateAccountPolicy.tsx
@@ -1,6 +1,6 @@
 import { useForm } from 'react-hook-form';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { useIAMClient } from '../IAMProvider';
 import {
   getListPoliciesQuery,
@@ -13,6 +13,7 @@ import { useCurrentAccount } from '../DataServiceRoleProvider';
 import { regexArn } from '../utils/hooks';
 import { CommonPolicyLayout } from './AccountEditCommonLayout';
 import { MouseEvent } from 'react';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
 
 type FormValues = {
   policyName: string;
@@ -21,7 +22,7 @@ type FormValues = {
 
 const UpdateAccountPolicy = () => {
   const IAMClient = useIAMClient();
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const { policyArn: encodedPolicyArn, defaultVersionId } = useParams<{
     accountName: string;
     policyArn: string;
diff --git a/src/react/account/details/properties/AccountInfo.tsx b/src/react/account/details/properties/AccountInfo.tsx
index 78e4a24a6..56152d85a 100644
--- a/src/react/account/details/properties/AccountInfo.tsx
+++ b/src/react/account/details/properties/AccountInfo.tsx
@@ -8,7 +8,6 @@ import {
 
 import { Button } from '@scality/core-ui/dist/components/buttonv2/Buttonv2.component';
 import { useMutation, useQueryClient } from 'react-query';
-import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { useState } from 'react';
@@ -26,7 +25,10 @@ import Table, * as T from '../../../ui-elements/TableKeyValue';
 import { useAuthGroups, useRolePathName } from '../../../utils/hooks';
 import { removeRoleArnStored } from '../../../utils/localStorage';
 import SecretKeyModal from './SecretKeyModal';
-import { useShellHooks } from '../../../ShellHooksContext';
+import {
+  useBasenameRelativeNavigate,
+  useShellHooks,
+} from '../../../ShellHooksContext';
 
 const TableContainer = styled.div`
   display: flex;
@@ -39,7 +41,7 @@ type Props = {
 
 function DeleteAccountButtonAndModal({ account }: Props) {
   const [isModalOpened, setIsModalOpened] = useState(false);
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const queryClient = useQueryClient();
   const rolePathName = useRolePathName();
 
diff --git a/src/react/account/iamAttachment/AttachmentConfirmationModal.tsx b/src/react/account/iamAttachment/AttachmentConfirmationModal.tsx
index 65515152c..64fa16366 100644
--- a/src/react/account/iamAttachment/AttachmentConfirmationModal.tsx
+++ b/src/react/account/iamAttachment/AttachmentConfirmationModal.tsx
@@ -14,7 +14,6 @@ import {
   EntityType,
 } from './AttachmentTypes';
 import { useTheme } from 'styled-components';
-import { useNavigate } from 'react-router-dom';
 import {
   getListAttachedUserPoliciesQuery,
   getListEntitiesForPolicyQuery,
@@ -30,6 +29,7 @@ import {
   Wrap,
   spacing,
 } from '@scality/core-ui';
+import { useBasenameRelativeNavigate } from '../../ShellHooksContext';
 
 type AttachmentStatus = 'Waiting for confirmation' | 'Error' | 'Success';
 
@@ -67,7 +67,7 @@ function AttachmentConfirmationModal({
   resourceType: ResourceType;
   redirectUrl: string;
 }) {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const queryClient = useQueryClient();
   const { account } = useCurrentAccount();
   const loading = useSelector(
diff --git a/src/react/databrowser/DataBrowser.tsx b/src/react/databrowser/DataBrowser.tsx
index f6b4c4b5b..d62bd6cca 100644
--- a/src/react/databrowser/DataBrowser.tsx
+++ b/src/react/databrowser/DataBrowser.tsx
@@ -1,10 +1,4 @@
-import {
-  Route,
-  Routes,
-  useLocation,
-  useNavigate,
-  useParams,
-} from 'react-router-dom';
+import { Route, Routes, useLocation, useParams } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { AppState } from '../../types/state';
@@ -22,10 +16,11 @@ import { AppContainer, EmptyState, Icon } from '@scality/core-ui';
 import { Box } from '@scality/core-ui/dist/next';
 import { useS3Client } from '../next-architecture/ui/S3ClientProvider';
 import Loader from '../ui-elements/Loader';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
 
 export default function DataBrowser() {
   const dispatch = useDispatch();
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const { accountName } = useParams<{ accountName: string }>();
   const { accounts } = useAccounts();
   const hasError = useSelector(
diff --git a/src/react/databrowser/buckets/BucketCreate.tsx b/src/react/databrowser/buckets/BucketCreate.tsx
index 90c981d36..78e85161a 100644
--- a/src/react/databrowser/buckets/BucketCreate.tsx
+++ b/src/react/databrowser/buckets/BucketCreate.tsx
@@ -23,7 +23,7 @@ import ObjectLockRetentionSettings, {
 import { XDM_FEATURE } from '../../../js/config';
 import { renderLocation } from '../../locations/utils';
 import { convertRemToPixels } from '@scality/core-ui/dist/utils';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import {
   useChangeBucketDefaultRetention,
   useChangeBucketVersionning,
@@ -32,6 +32,7 @@ import {
 import { useAccountsLocationsEndpointsAdapter } from '../../next-architecture/ui/AccountsLocationsEndpointsAdapterProvider';
 import { useAccountsLocationsAndEndpoints } from '../../next-architecture/domain/business/accounts';
 import { useConfig } from '../../next-architecture/ui/ConfigProvider';
+import { useBasenameRelativeNavigate } from '../../ShellHooksContext';
 
 const helpNonAsyncLocation =
   'Selected Storage Location does not support Async Metadata updates.';
@@ -57,7 +58,7 @@ const schema = Joi.object({
 
 function BucketCreate() {
   // TODO: redirect to list buckets if no account
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const { accountName } = useParams<{ accountName: string }>();
 
   const useFormMethods = useForm({
diff --git a/src/react/databrowser/buckets/BucketList.tsx b/src/react/databrowser/buckets/BucketList.tsx
index eab95897f..49d14e5fe 100644
--- a/src/react/databrowser/buckets/BucketList.tsx
+++ b/src/react/databrowser/buckets/BucketList.tsx
@@ -8,7 +8,7 @@ import {
 import { EmptyCell } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
 import { Box, Button, Table } from '@scality/core-ui/dist/next';
 import { useMemo } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { CoreUIColumn } from 'react-table';
 import { XDM_FEATURE } from '../../../js/config';
 import { WorkflowScheduleUnitState } from '../../../types/stats';
@@ -23,6 +23,7 @@ import { TableHeaderWrapper } from '../../ui-elements/Table';
 import { useAuthGroups, useQueryParams } from '../../utils/hooks';
 import { getLocationIngestionState } from '../../utils/storageOptions';
 import { BucketLocationNameAndType } from '../../workflow/SourceBucketOption';
+import { useBasenameRelativeNavigate } from '../../ShellHooksContext';
 const SEARCH_QUERY_PARAM = 'search';
 
 type Props = {
@@ -39,7 +40,7 @@ export default function BucketList({
   const { features } = useConfig();
   const query = useQueryParams();
   const { account } = useCurrentAccount();
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const tabName = query.get('tab');
 
   const { isStorageManager } = useAuthGroups();
@@ -58,7 +59,7 @@ export default function BucketList({
         Header: 'Bucket Name',
         accessor: 'name',
         Cell({ value: name }) {
-          const navigate = useNavigate();
+          const navigate = useBasenameRelativeNavigate();
           return (
             <ConstrainedText
               text={
diff --git a/src/react/databrowser/buckets/ObjectLockSetting.tsx b/src/react/databrowser/buckets/ObjectLockSetting.tsx
index 7d04ace0a..7831a1d75 100644
--- a/src/react/databrowser/buckets/ObjectLockSetting.tsx
+++ b/src/react/databrowser/buckets/ObjectLockSetting.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { Button } from '@scality/core-ui/dist/components/buttonv2/Buttonv2.component';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import Joi from '@hapi/joi';
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Banner, Icon, Form, Stack } from '@scality/core-ui';
@@ -13,11 +13,12 @@ import ObjectLockRetentionSettings, {
 } from './ObjectLockRetentionSettings';
 import { clearError, editDefaultRetention, getBucketInfo } from '../../actions';
 import { convertToBucketInfo } from '../../locations/utils';
+import { useBasenameRelativeNavigate } from '../../ShellHooksContext';
 
 const schema = Joi.object(objectLockRetentionSettingsValidationRules);
 
 export default function ObjectLockSetting() {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const bucketInfo = useSelector((state: AppState) => state.s3.bucketInfo);
   const hasError = useSelector(
     (state: AppState) =>
diff --git a/src/react/databrowser/buckets/details/Overview.tsx b/src/react/databrowser/buckets/details/Overview.tsx
index 4c51a65ef..4fd6b6bc7 100644
--- a/src/react/databrowser/buckets/details/Overview.tsx
+++ b/src/react/databrowser/buckets/details/Overview.tsx
@@ -8,7 +8,6 @@ import {
 } from '@scality/core-ui';
 import { SmallerText } from '@scality/core-ui/dist/components/text/Text.component';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
 
 import { Button } from '@scality/core-ui/dist/components/buttonv2/Buttonv2.component';
 import { useEffect, useState } from 'react';
@@ -45,6 +44,7 @@ import {
   getLocationType,
 } from '../../../utils/storageOptions';
 import { useWorkflows } from '../../../workflow/Workflows';
+import { useBasenameRelativeNavigate } from '../../../ShellHooksContext';
 
 function capitalize(string: string) {
   return string.toLowerCase().replace(/^\w/, (c) => {
@@ -225,7 +225,7 @@ function LocationType({ location: locationName }: { location: string }) {
 }
 
 function Overview({ bucket, ingestionStates }: Props) {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const dispatch = useDispatch();
   const bucketInfo = useSelector((state: AppState) => state.s3.bucketInfo);
   const workflowsQuery = useWorkflows([bucket.name]);
diff --git a/src/react/databrowser/buckets/details/Workflow.tsx b/src/react/databrowser/buckets/details/Workflow.tsx
index 1ace359be..697c168fa 100644
--- a/src/react/databrowser/buckets/details/Workflow.tsx
+++ b/src/react/databrowser/buckets/details/Workflow.tsx
@@ -1,7 +1,6 @@
 import { Icon, spacing, ConstrainedText } from '@scality/core-ui';
 import { Button, Table } from '@scality/core-ui/dist/next';
 import { PropsWithChildren } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { CellProps, CoreUIColumn } from 'react-table';
 import styled from 'styled-components';
 import {
@@ -13,6 +12,7 @@ import { makeWorkflows } from '../../../queries';
 import { NameLinkContaner } from '../../../ui-elements/NameLink';
 import { WorkflowTypeIcon } from '../../../workflow/WorkflowList';
 import { useWorkflowsWithSelect } from '../../../workflow/Workflows';
+import { useBasenameRelativeNavigate } from '../../../ShellHooksContext';
 
 const TableAction = styled.div`
   display: flex;
@@ -21,7 +21,7 @@ const TableAction = styled.div`
 `;
 
 function Workflow({ bucketName }: { bucketName: string }) {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const { account } = useCurrentAccount();
   const accountName = account?.Name;
   const select = (workflows: APIWorkflows) => makeWorkflows(workflows);
diff --git a/src/react/databrowser/objects/MetadataSearch.tsx b/src/react/databrowser/objects/MetadataSearch.tsx
index e77548e76..0ae1b042a 100644
--- a/src/react/databrowser/objects/MetadataSearch.tsx
+++ b/src/react/databrowser/objects/MetadataSearch.tsx
@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { Hint, Hints, HintsTitle } from '../../ui-elements/Input';
@@ -16,6 +16,7 @@ import {
 } from '../../utils/hooks';
 import { Icon, spacing } from '@scality/core-ui';
 import { Input } from '@scality/core-ui/dist/next';
+import { useBasenameRelativeNavigate } from '../../ShellHooksContext';
 
 export const METADATA_SEARCH_HINT_ITEMS = [
   {
@@ -71,7 +72,7 @@ type Props = {
 
 const MetadataSearch = ({ isMetadataType, errorZenkoMsg }: Props) => {
   const [hintsShown, setHintsShown] = useState(false);
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const query = useQueryParams();
   const { pathname } = useLocation();
   const prefixWithSlash = usePrefixWithSlash();
diff --git a/src/react/databrowser/objects/ObjectList.tsx b/src/react/databrowser/objects/ObjectList.tsx
index 507ba649a..1919d2770 100644
--- a/src/react/databrowser/objects/ObjectList.tsx
+++ b/src/react/databrowser/objects/ObjectList.tsx
@@ -15,10 +15,11 @@ import ObjectListTable from './ObjectListTable';
 import { Icon, spacing, Toggle } from '@scality/core-ui';
 import { WarningMetadata } from '../../ui-elements/Warning';
 import { useQueryParams } from '../../utils/hooks';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { Box } from '@scality/core-ui/dist/next';
 import { useBucketVersionning } from '../../next-architecture/domain/business/buckets';
 import { VEEAM_XML_PREFIX } from '../../ui-elements/Veeam/VeeamConstants';
+import { useBasenameRelativeNavigate } from '../../ShellHooksContext';
 type Props = {
   objects: List<ObjectEntity>;
   bucketName: string;
@@ -34,7 +35,7 @@ export default function ObjectList({
   toggled,
   listType,
 }: Props) {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const dispatch = useDispatch();
   const { pathname } = useLocation();
   const query = useQueryParams();
diff --git a/src/react/databrowser/objects/ObjectListTable.tsx b/src/react/databrowser/objects/ObjectListTable.tsx
index 2483757b3..d234d4cb7 100644
--- a/src/react/databrowser/objects/ObjectListTable.tsx
+++ b/src/react/databrowser/objects/ObjectListTable.tsx
@@ -14,7 +14,7 @@ import {
 } from '@scality/core-ui';
 import { convertRemToPixels } from '@scality/core-ui/dist/utils';
 import { spacing } from '@scality/core-ui';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { useQuery } from 'react-query';
 
 import { AppState } from '../../../types/state';
@@ -38,6 +38,7 @@ import { parseRestore } from '../../reducers/s3';
 import { useAccountsLocationsAndEndpoints } from '../../next-architecture/domain/business/accounts';
 import { useAccountsLocationsEndpointsAdapter } from '../../next-architecture/ui/AccountsLocationsEndpointsAdapterProvider';
 import { EmptyCell } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
+import { useBasenameRelativeNavigate } from '../../ShellHooksContext';
 
 type CellProps = {
   row: {
@@ -58,7 +59,7 @@ export default function ObjectListTable({
   isVersioningType,
   prefixWithSlash,
 }: Props) {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const { accountName } = useParams<{ accountName: string }>();
 
   const [isTableScrollbarVisible, setIsTableScrollbarVisible] = useState(false);
diff --git a/src/react/databrowser/objects/ObjectLockSetting.tsx b/src/react/databrowser/objects/ObjectLockSetting.tsx
index 39e4e75da..95505ec84 100644
--- a/src/react/databrowser/objects/ObjectLockSetting.tsx
+++ b/src/react/databrowser/objects/ObjectLockSetting.tsx
@@ -1,5 +1,5 @@
 import { ChangeEvent, useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useBasenameRelativeNavigate, useParams } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { FormProvider, useForm, Controller } from 'react-hook-form';
 import { DateTime } from 'luxon';
@@ -50,7 +50,7 @@ const schema = Joi.object(objectLockRetentionSettingsValidationRules);
 
 export default function ObjectLockSetting() {
   const dispatch = useDispatch();
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const query = useQueryParams();
   const hasError = useSelector(
     (state: AppState) =>
diff --git a/src/react/databrowser/objects/ObjectRow.tsx b/src/react/databrowser/objects/ObjectRow.tsx
index 6ededa545..249aa13f3 100644
--- a/src/react/databrowser/objects/ObjectRow.tsx
+++ b/src/react/databrowser/objects/ObjectRow.tsx
@@ -1,7 +1,7 @@
 import isDeepEqual from 'lodash.isequal';
 import memoize from 'memoize-one';
 import { memo } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { areEqual } from 'react-window';
 import { Dispatch } from 'redux';
 
@@ -10,6 +10,7 @@ import { ObjectEntity } from '../../../types/s3';
 import { toggleAllObjects } from '../../actions';
 import * as T from '../../ui-elements/Table';
 import { useQueryParams } from '../../utils/hooks';
+import { useBasenameRelativeNavigate } from '../../ShellHooksContext';
 
 type PrepareRow = (arg0: RowType) => void;
 type RowType = {
@@ -49,7 +50,7 @@ const Row = ({
 }: RowProps) => {
   const row = rows[index];
   prepareRow(row);
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const { pathname } = useLocation();
   const query = useQueryParams();
   const versionId = query.get('versionId');
diff --git a/src/react/databrowser/objects/Objects.tsx b/src/react/databrowser/objects/Objects.tsx
index 7978e9bbe..dece330c1 100644
--- a/src/react/databrowser/objects/Objects.tsx
+++ b/src/react/databrowser/objects/Objects.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Redirect, useNavigate, useParams } from 'react-router-dom';
+import { Redirect, useParams } from 'react-router-dom';
 import {
   getObjectMetadata,
   listObjects,
@@ -21,6 +21,7 @@ import ObjectUpload from './ObjectUpload';
 import { usePrefixWithSlash, useQueryParams } from '../../utils/hooks';
 import { AppContainer, TwoPanelLayout } from '@scality/core-ui';
 import ObjectHead from './ObjectHead';
+import { useBasenameRelativeNavigate } from '../../ShellHooksContext';
 
 export default function Objects() {
   const dispatch = useDispatch();
@@ -49,7 +50,7 @@ export default function Objects() {
   const searchInput = query.get('metadatasearch');
   const objectKey = query.get('prefix');
   const versionId = query.get('versionId');
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const toggled = useMemo(
     () =>
       objects.filter(
diff --git a/src/react/databrowser/objects/details/Properties.tsx b/src/react/databrowser/objects/details/Properties.tsx
index 2cc77005a..2d135b0ab 100644
--- a/src/react/databrowser/objects/details/Properties.tsx
+++ b/src/react/databrowser/objects/details/Properties.tsx
@@ -17,7 +17,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { putObjectLegalHold } from '../../../actions/s3object';
 import { usePrefixWithSlash, useQueryParams } from '../../../utils/hooks';
 import { AppState } from '../../../../types/state';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { Button } from '@scality/core-ui/dist/components/buttonv2/Buttonv2.component';
 import { ColdStorageIconLabel } from '../../../ui-elements/ColdStorageIcon';
 import ObjectRestorationButtonAndModal from './ObjectRestorationButtonAndModal';
@@ -28,6 +28,7 @@ import {
   VEEAM_OBJECT_KEY,
   VEEAM_SYSTEM_KEY,
 } from '../../../ui-elements/Veeam/VeeamConstants';
+import { useBasenameRelativeNavigate } from '../../../ShellHooksContext';
 
 type Props = {
   objectMetadata: ObjectMetadata & { lockStatus?: ObjectEntity['lockStatus'] };
@@ -38,7 +39,7 @@ const TruncatedValue = styled.div`
 
 function Properties({ objectMetadata }: Props) {
   const dispatch = useDispatch();
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const { pathname } = useLocation();
   const loading = useSelector(
     (state: AppState) => state.networkActivity.counter > 0,
diff --git a/src/react/endpoint/EndpointCreate.tsx b/src/react/endpoint/EndpointCreate.tsx
index 37032ee21..5c96e087f 100644
--- a/src/react/endpoint/EndpointCreate.tsx
+++ b/src/react/endpoint/EndpointCreate.tsx
@@ -12,7 +12,6 @@ import {
 import { Box, Button, Input, Select } from '@scality/core-ui/dist/next';
 import { useMemo } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import {
   useCreateEndpointMutation,
@@ -22,6 +21,7 @@ import { renderLocation } from '../locations/utils';
 import { useAccountsLocationsAndEndpoints } from '../next-architecture/domain/business/accounts';
 import { useAccountsLocationsEndpointsAdapter } from '../next-architecture/ui/AccountsLocationsEndpointsAdapterProvider';
 import { useInstanceId } from '../next-architecture/ui/AuthProvider';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
 
 const BannerMessageList = styled.ul`
   margin: ${spacing.r8} 0;
@@ -50,7 +50,7 @@ function EndpointCreate() {
       locationName: 'us-east-1',
     },
   });
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const accountsLocationsEndpointsAdapter =
     useAccountsLocationsEndpointsAdapter();
   const {
diff --git a/src/react/endpoint/EndpointList.tsx b/src/react/endpoint/EndpointList.tsx
index eb74c96e9..b671d4084 100644
--- a/src/react/endpoint/EndpointList.tsx
+++ b/src/react/endpoint/EndpointList.tsx
@@ -2,7 +2,6 @@ import { ConstrainedText, Icon, Wrap, spacing } from '@scality/core-ui';
 import { Box, Button, CopyButton, Table } from '@scality/core-ui/dist/next';
 
 import { useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import { Endpoint, Hostname, LocationName } from '../../types/config';
 import { renderLocation } from '../locations/utils';
@@ -13,6 +12,7 @@ import {
 } from './AdvancedMetricsButton';
 import { DeleteEndpoint } from './DeleteEndpoint';
 import { TableHeaderWrapper } from '../ui-elements/Table';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
 type CellProps = {
   row: {
     original: Endpoint;
@@ -25,7 +25,7 @@ type Props = {
 const SEARCH_QUERY_PARAM = 'search';
 
 function EndpointList({ endpoints, locations }: Props) {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
 
   /*
    *   Enforcing a strict schema because the table interprets `undefined` values
diff --git a/src/react/locations/LocationEditor.tsx b/src/react/locations/LocationEditor.tsx
index cb852def0..a310ebd02 100644
--- a/src/react/locations/LocationEditor.tsx
+++ b/src/react/locations/LocationEditor.tsx
@@ -39,7 +39,10 @@ import {
   newLocationForm,
 } from './utils';
 import { Loader as LoaderCoreUI } from '@scality/core-ui';
-import { useShellHooks } from '../ShellHooksContext';
+import {
+  useBasenameRelativeNavigate,
+  useShellHooks,
+} from '../ShellHooksContext';
 
 //Temporary hack waiting for the layout
 const StyledForm = styled(Form)`
diff --git a/src/react/locations/LocationsList.tsx b/src/react/locations/LocationsList.tsx
index 47d7e7b39..285aa2b3f 100644
--- a/src/react/locations/LocationsList.tsx
+++ b/src/react/locations/LocationsList.tsx
@@ -10,7 +10,6 @@ import {
 import { useMemo, useState } from 'react';
 import { useMutation, useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
 import { CellProps, CoreUIColumn } from 'react-table';
 
 import { Box, Button, Table } from '@scality/core-ui/dist/next';
@@ -41,7 +40,10 @@ import { PauseAndResume } from './PauseAndResume';
 import { getLocationDeletionBlocker } from './utils';
 import styled from 'styled-components';
 import { TableHeaderWrapper } from '../ui-elements/Table';
-import { useShellHooks } from '../ShellHooksContext';
+import {
+  useBasenameRelativeNavigate,
+  useShellHooks,
+} from '../ShellHooksContext';
 
 const ActionButtons = ({
   rowValues,
@@ -53,7 +55,7 @@ const ActionButtons = ({
   transitions: BucketWorkflowTransitionV2[];
 }) => {
   const { name: locationName } = rowValues;
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const buckets = useSelector((state: AppState) => state.stats.bucketList);
   const [showModal, setShowModal] = useState(false);
   const accountsLocationsEndpointsAdapter =
@@ -206,7 +208,7 @@ const ActionButtons = ({
 };
 
 export function LocationsList() {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const workflowsQuery = useWorkflows();
   const accountsLocationsEndpointsAdapter =
     useAccountsLocationsEndpointsAdapter();
diff --git a/src/react/ui-elements/SelectAccountIAMRole.tsx b/src/react/ui-elements/SelectAccountIAMRole.tsx
index b83ee13d7..375cecd49 100644
--- a/src/react/ui-elements/SelectAccountIAMRole.tsx
+++ b/src/react/ui-elements/SelectAccountIAMRole.tsx
@@ -4,7 +4,7 @@ import { IAM } from 'aws-sdk';
 import { Bucket } from 'aws-sdk/clients/s3';
 import { PropsWithChildren, useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
-import { MemoryRouter, Route, useNavigate, useParams } from 'react-router-dom';
+import { MemoryRouter, Route, useParams } from 'react-router-dom';
 import DataServiceRoleProvider, {
   useAssumedRole,
   useSetAssumedRole,
@@ -21,6 +21,7 @@ import {
 import { AccountsLocationsEndpointsAdapterProvider } from '../next-architecture/ui/AccountsLocationsEndpointsAdapterProvider';
 import { getListRolesQuery } from '../queries';
 import { SCALITY_IAM_ROLES, regexArn } from '../utils/hooks';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
 
 class NoOpMetricsAdapter implements IMetricsAdapter {
   async listBucketsLatestUsedCapacity(
@@ -84,7 +85,7 @@ const AssumeDefaultIAMRole = ({
     accessibleAccountsAdapter,
     metricsAdapter,
   });
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const setAssumeRole = useSetAssumedRole();
 
   const isInternalDefaultAccountSelected =
@@ -165,7 +166,7 @@ type SelectAccountIAMRoleWithAccountProps = SelectAccountIAMRoleProps & {
 const SelectAccountIAMRoleWithAccount = (
   props: SelectAccountIAMRoleWithAccountProps,
 ) => {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const IAMClient = useIAMClient();
   const setAssumedRole = useSetAssumedRole();
   const { accounts, defaultValue, hideAccountRoles, onChange } = props;
diff --git a/src/react/ui-elements/Veeam/VeeamConfiguration.tsx b/src/react/ui-elements/Veeam/VeeamConfiguration.tsx
index 59aba2c1e..c8cee0f4c 100644
--- a/src/react/ui-elements/Veeam/VeeamConfiguration.tsx
+++ b/src/react/ui-elements/Veeam/VeeamConfiguration.tsx
@@ -38,7 +38,7 @@ import { accountNameValidationSchema } from '../../../react/account/AccountCreat
 import { useAccountsLocationsAndEndpoints } from '../../../react/next-architecture/domain/business/accounts';
 import { useAccountsLocationsEndpointsAdapter } from '../../..//react/next-architecture/ui/AccountsLocationsEndpointsAdapterProvider';
 import { VeeamLogo } from './VeeamLogo';
-import { useNavigate } from 'react-router-dom';
+import { useBasenameRelativeNavigate } from '../../ShellHooksContext';
 
 const schema = Joi.object({
   accountName: accountNameValidationSchema,
@@ -160,7 +160,7 @@ const Configuration = () => {
     formState: { errors, isValid },
   } = methods;
 
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const accountsLocationsEndpointsAdapter =
     useAccountsLocationsEndpointsAdapter();
   const { accountsLocationsAndEndpoints, status } =
diff --git a/src/react/ui-elements/Veeam/VeeamSummary.tsx b/src/react/ui-elements/Veeam/VeeamSummary.tsx
index ec633dc9d..29d53d351 100644
--- a/src/react/ui-elements/Veeam/VeeamSummary.tsx
+++ b/src/react/ui-elements/Veeam/VeeamSummary.tsx
@@ -9,13 +9,13 @@ import {
 } from '@scality/core-ui';
 import { Button, CopyButton } from '@scality/core-ui/dist/next';
 import { Wrap, spacing } from '@scality/core-ui/dist/spacing';
-import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { CertificateDownloadButton } from '../../next-architecture/ui/CertificateDownloadButton';
 import { useAuthGroups } from '../../utils/hooks';
 import { HideCredential } from '../Hide';
 import { useGetS3ServicePoint } from './useGetS3ServicePoint';
 import { VEEAM_OFFICE_365_V8 } from './VeeamConstants';
+import { useBasenameRelativeNavigate } from '../../ShellHooksContext';
 
 type VeeamSummaryProps = {
   accountName: string;
@@ -67,7 +67,7 @@ export const VeeamSummary = ({
   secretKey,
   application,
 }: VeeamSummaryProps) => {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const { isPlatformAdmin } = useAuthGroups();
   const { s3ServicePoint } = useGetS3ServicePoint();
 
diff --git a/src/react/ui-elements/Veeam/VeeamTable.tsx b/src/react/ui-elements/Veeam/VeeamTable.tsx
index ee8ea8275..c5cb8e2e7 100644
--- a/src/react/ui-elements/Veeam/VeeamTable.tsx
+++ b/src/react/ui-elements/Veeam/VeeamTable.tsx
@@ -7,11 +7,11 @@ import {
 import { Box, Button } from '@scality/core-ui/dist/next';
 import { useState } from 'react';
 import { useQueryClient } from 'react-query';
-import { useNavigate } from 'react-router-dom';
 import styled, { useTheme } from 'styled-components';
 import { VeeamSkipModal } from './VeeamSkipModal';
 import { VEEAM_STEPS, VeeamStepsIndexes } from './VeeamSteps';
 import { useMutationTableData } from './useMutationTableData';
+import { useBasenameRelativeNavigate } from '../../ShellHooksContext';
 
 export const ListItem = styled.li`
   padding: 0.5rem;
@@ -29,7 +29,7 @@ export default function VeeamTable(propsConfiguration: VeeamTableProps) {
   const [confirmCancel, setConfirmCancel] = useState<boolean>(false);
 
   const theme = useTheme();
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const queryClient = useQueryClient();
   const { next } = useStepper(VeeamStepsIndexes.Table, VEEAM_STEPS);
   const { bucketName, enableImmutableBackup, accountName, application } =
diff --git a/src/react/utils/useNavigate.ts b/src/react/utils/useNavigate.ts
deleted file mode 100644
index 0de165e66..000000000
--- a/src/react/utils/useNavigate.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useCallback } from 'react';
-import {
-  useNavigate as useOriginalNavigate,
-  NavigateOptions,
-} from 'react-router-dom';
-import { useConfig } from '../next-architecture/ui/ConfigProvider';
-
-export const useNavigate = () => {
-  const navigate = useOriginalNavigate();
-  const config = useConfig();
-
-  const enhancedNavigate = useCallback(
-    (path: string, options?: NavigateOptions) => {
-      const fullPath = `${config.basePath}${
-        path.startsWith('/') ? path : `/${path}`
-      }`;
-      navigate(fullPath, options);
-    },
-    [navigate],
-  );
-
-  return enhancedNavigate;
-};
diff --git a/src/react/workflow/ConfigurationTab.tsx b/src/react/workflow/ConfigurationTab.tsx
index e6c15c2dd..3a0118c4e 100644
--- a/src/react/workflow/ConfigurationTab.tsx
+++ b/src/react/workflow/ConfigurationTab.tsx
@@ -14,7 +14,6 @@ import { useEffect, useMemo } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useMutation, useQueryClient } from 'react-query';
 import { useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
 import {
   BucketWorkflowExpirationV1,
   BucketWorkflowTransitionV2,
@@ -65,7 +64,10 @@ import {
   removeEmptyTagKeys,
 } from './utils';
 import { useWorkflows } from './Workflows';
-import { useShellHooks } from '../ShellHooksContext';
+import {
+  useBasenameRelativeNavigate,
+  useShellHooks,
+} from '../ShellHooksContext';
 
 type Props = {
   wfSelected: Workflow;
@@ -77,7 +79,7 @@ function useReplicationMutations({
   onEditSuccess: (replication: Replication) => void;
 }) {
   const dispatch = useDispatch();
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const queryClient = useQueryClient();
   const managementClient = useManagementClient();
   const { useAuth } = useShellHooks();
@@ -198,7 +200,7 @@ function useExpirationMutations({
   onEditSuccess: (expiration: BucketWorkflowExpirationV1) => void;
 }) {
   const dispatch = useDispatch();
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const queryClient = useQueryClient();
   const managementClient = useManagementClient();
   const { useAuth } = useShellHooks();
@@ -304,7 +306,7 @@ function useTransitionMutations(
   } = { onEditSuccess: undefined },
 ) {
   const dispatch = useDispatch();
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const queryClient = useQueryClient();
   const managementClient = useManagementClient();
   const { useAuth } = useShellHooks();
diff --git a/src/react/workflow/CreateWorkflow.tsx b/src/react/workflow/CreateWorkflow.tsx
index 02980eaab..4e1ef3302 100644
--- a/src/react/workflow/CreateWorkflow.tsx
+++ b/src/react/workflow/CreateWorkflow.tsx
@@ -16,7 +16,6 @@ import {
 } from 'react-hook-form';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
 import {
   BucketWorkflowExpirationV1,
   BucketWorkflowTransitionV2,
@@ -68,7 +67,10 @@ import {
   prepareTransitionQuery,
   removeEmptyTagKeys,
 } from './utils';
-import { useShellHooks } from '../ShellHooksContext';
+import {
+  useBasenameRelativeNavigate,
+  useShellHooks,
+} from '../ShellHooksContext';
 
 const OptionIcon = ({ icon }: { icon: IconName }) => (
   <Box width="2rem" display="flex" alignItems="center" justifyContent="center">
@@ -78,7 +80,7 @@ const OptionIcon = ({ icon }: { icon: IconName }) => (
 
 const CreateWorkflow = () => {
   const dispatch = useDispatch();
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const accountsLocationsEndpointsAdapter =
     useAccountsLocationsEndpointsAdapter();
 
diff --git a/src/react/workflow/WorkflowList.tsx b/src/react/workflow/WorkflowList.tsx
index 5b6f69aab..13768de01 100644
--- a/src/react/workflow/WorkflowList.tsx
+++ b/src/react/workflow/WorkflowList.tsx
@@ -1,13 +1,13 @@
 import { ConstrainedText, Icon } from '@scality/core-ui';
 import { Button, Table } from '@scality/core-ui/dist/next';
 import { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { CoreUIColumn, Row } from 'react-table';
 import { useTheme } from 'styled-components';
 import { Workflows } from '../../types/workflow';
 import { Workflow } from '../../types/workflow';
 import { TableHeaderWrapper } from '../ui-elements/Table';
 import { TextTransformer } from '../ui-elements/Utility';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
 
 const SEARCH_QUERY_PARAM = 'search';
 export function WorkflowTypeIcon({ value: type }: { value: string }) {
@@ -32,7 +32,7 @@ type Props = {
 };
 
 function WorkflowList({ workflows, workflowId }: Props) {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const theme = useTheme();
 
   function DataComponent({ row }: { row: Row<Workflow> }) {