diff --git a/README.md b/README.md
index 028336be..8cd160d5 100644
--- a/README.md
+++ b/README.md
@@ -171,6 +171,7 @@ Config for this plugin is stored as a part of the `config/plugins.{js|ts}` or `c
 - `pathDefaultFields` - The attribute to copy the default path from per content type. Syntax: `'api::<collection name>.<content type name>': ['url_slug', 'path']`. If you leave it empty, the default path is generated based on the ID.
 - `gql` - If you're using GraphQL that's the right place to put all necessary settings. More **[ here ](#gql-configuration)**
 - `cascadeMenuAttached` - If you don't want "Menu attached" to cascade on child items set this value `Disabled`.
+- `isOverviewUiEnabled` - Enables the new management interface: an overview page listing all navigations with separate detail pages per navigation.
 
 ### Properties
 
diff --git a/admin/src/api/validators.ts b/admin/src/api/validators.ts
index 6a9c0d72..e99291d2 100644
--- a/admin/src/api/validators.ts
+++ b/admin/src/api/validators.ts
@@ -146,6 +146,7 @@ export const configSchema = z.object({
   restrictedContentTypes: z.string().array(),
   isCacheEnabled: z.boolean().optional(),
   isCachePluginEnabled: z.boolean().optional(),
+  isOverviewUiEnabled: z.boolean().optional(),
 });
 
 export type ConfigFromServerSchema = z.infer<typeof configFromServerSchema>;
diff --git a/admin/src/hooks/index.ts b/admin/src/hooks/index.ts
new file mode 100644
index 00000000..b01e8b8e
--- /dev/null
+++ b/admin/src/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from './useAPI';
+export * from './useSettingsPermissions';
diff --git a/admin/src/pages/HomePage/hooks/useAPI.ts b/admin/src/hooks/useAPI.ts
similarity index 97%
rename from admin/src/pages/HomePage/hooks/useAPI.ts
rename to admin/src/hooks/useAPI.ts
index 8ef07de8..d64afdd5 100644
--- a/admin/src/pages/HomePage/hooks/useAPI.ts
+++ b/admin/src/hooks/useAPI.ts
@@ -2,9 +2,9 @@ import { getFetchClient } from '@strapi/strapi/admin';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useCallback } from 'react';
 
-import { getApiClient } from '../../../api';
-import { NavigationSchema } from '../../../api/validators';
-import { Effect } from '../../../types';
+import { getApiClient } from '../api';
+import { NavigationSchema } from '../api/validators';
+import { Effect } from '../types';
 import { appendViewId } from '../utils/appendViewId';
 
 export const useLocale = () => {
diff --git a/admin/src/pages/HomePage/hooks/useSettingsPermissions.ts b/admin/src/hooks/useSettingsPermissions.ts
similarity index 89%
rename from admin/src/pages/HomePage/hooks/useSettingsPermissions.ts
rename to admin/src/hooks/useSettingsPermissions.ts
index 38ec20ff..214bbba4 100644
--- a/admin/src/pages/HomePage/hooks/useSettingsPermissions.ts
+++ b/admin/src/hooks/useSettingsPermissions.ts
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 
 import { useRBAC } from '@strapi/strapi/admin';
 
-import pluginPermissions from '../../../utils/permissions';
+import pluginPermissions from '../utils/permissions';
 
 export const useSettingsPermissions = () => {
   const viewPermissions = useMemo(
diff --git a/admin/src/pages/App.tsx b/admin/src/pages/App.tsx
index 79994162..779eda5f 100644
--- a/admin/src/pages/App.tsx
+++ b/admin/src/pages/App.tsx
@@ -1,18 +1,48 @@
 import { Page } from '@strapi/strapi/admin';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { Route, Routes } from 'react-router-dom';
 
+import { useConfig } from '../hooks';
+import { DetailPage } from './DetailPage';
 import { HomePage } from './HomePage';
+import { OverviewPage } from './OverviewPage';
 
-const App = () => {
-  return (
-    <DndProvider backend={HTML5Backend}>
+const queryClient = new QueryClient();
+
+const AppRoutes = () => {
+  const configQuery = useConfig();
+
+  if (configQuery.isPending) {
+    return <Page.Loading />;
+  }
+
+  if (configQuery.data?.isOverviewUiEnabled) {
+    return (
       <Routes>
-        <Route path={`/`} index Component={HomePage} />
+        <Route path={`/`} index Component={OverviewPage} />
+        <Route path={`/:documentId`} Component={DetailPage} />
         <Route path={`/*`} Component={Page.Error} />
       </Routes>
-    </DndProvider>
+    );
+  }
+
+  return (
+    <Routes>
+      <Route path={`/`} index Component={HomePage} />
+      <Route path={`/*`} Component={Page.Error} />
+    </Routes>
+  );
+};
+
+const App = () => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <DndProvider backend={HTML5Backend}>
+        <AppRoutes />
+      </DndProvider>
+    </QueryClientProvider>
   );
 };
 
diff --git a/admin/src/pages/HomePage/components/ChangeLanguageDialog/index.tsx b/admin/src/pages/DetailPage/components/ChangeLanguageDialog/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/ChangeLanguageDialog/index.tsx
rename to admin/src/pages/DetailPage/components/ChangeLanguageDialog/index.tsx
diff --git a/admin/src/pages/HomePage/components/CollapseButton/index.tsx b/admin/src/pages/DetailPage/components/CollapseButton/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/CollapseButton/index.tsx
rename to admin/src/pages/DetailPage/components/CollapseButton/index.tsx
diff --git a/admin/src/pages/HomePage/components/ControllableCombobox/index.tsx b/admin/src/pages/DetailPage/components/ControllableCombobox/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/ControllableCombobox/index.tsx
rename to admin/src/pages/DetailPage/components/ControllableCombobox/index.tsx
diff --git a/admin/src/pages/HomePage/components/DragButton/index.tsx b/admin/src/pages/DetailPage/components/DragButton/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/DragButton/index.tsx
rename to admin/src/pages/DetailPage/components/DragButton/index.tsx
diff --git a/admin/src/pages/HomePage/components/I18nCopyNavigationItems/index.tsx b/admin/src/pages/DetailPage/components/I18nCopyNavigationItems/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/I18nCopyNavigationItems/index.tsx
rename to admin/src/pages/DetailPage/components/I18nCopyNavigationItems/index.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationContentHeader/ManageNavigationItems/index.tsx b/admin/src/pages/DetailPage/components/NavigationContentHeader/ManageNavigationItems/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationContentHeader/ManageNavigationItems/index.tsx
rename to admin/src/pages/DetailPage/components/NavigationContentHeader/ManageNavigationItems/index.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationContentHeader/Search/index.tsx b/admin/src/pages/DetailPage/components/NavigationContentHeader/Search/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationContentHeader/Search/index.tsx
rename to admin/src/pages/DetailPage/components/NavigationContentHeader/Search/index.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationContentHeader/index.tsx b/admin/src/pages/DetailPage/components/NavigationContentHeader/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationContentHeader/index.tsx
rename to admin/src/pages/DetailPage/components/NavigationContentHeader/index.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationEmptyState/index.tsx b/admin/src/pages/DetailPage/components/NavigationEmptyState/index.tsx
similarity index 98%
rename from admin/src/pages/HomePage/components/NavigationEmptyState/index.tsx
rename to admin/src/pages/DetailPage/components/NavigationEmptyState/index.tsx
index f5de2ae9..9cd90423 100644
--- a/admin/src/pages/HomePage/components/NavigationEmptyState/index.tsx
+++ b/admin/src/pages/DetailPage/components/NavigationEmptyState/index.tsx
@@ -19,7 +19,7 @@ import {
   useResetNavigations,
 } from '../../hooks';
 import { NavigationSchema } from '../../../../api/validators';
-import { appendViewId } from '../../utils/appendViewId';
+import { appendViewId } from '../../../../utils/appendViewId';
 
 type NavigationEmptyStateProps = {
   canUpdate: boolean;
diff --git a/admin/src/pages/DetailPage/components/NavigationHeader/index.tsx b/admin/src/pages/DetailPage/components/NavigationHeader/index.tsx
new file mode 100644
index 00000000..b60791d7
--- /dev/null
+++ b/admin/src/pages/DetailPage/components/NavigationHeader/index.tsx
@@ -0,0 +1,120 @@
+import { Button, Flex, Link, SingleSelect, SingleSelectOption, Tag } from '@strapi/design-system';
+import { ArrowLeft, Check, Feather, Information } from '@strapi/icons';
+import { Layouts } from '@strapi/strapi/admin';
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { NavLink } from 'react-router-dom';
+import { NavigationSchema } from '../../../../api/validators';
+import { PLUGIN_ID } from '../../../../pluginId';
+import { getTrad } from '../../../../translations';
+import { Effect } from '../../../../types';
+import { useConfig, usePluginMediaQuery } from '../../hooks';
+
+const submitIcon = <Check />;
+
+interface Props {
+  activeNavigation?: NavigationSchema;
+  structureHasErrors?: boolean;
+  structureHasChanged?: boolean;
+  isSaving?: boolean;
+  handleLocalizationSelection: Effect<string>;
+  handleSave: Effect<void>;
+  handleCachePurge: Effect<void>;
+  permissions: { canUpdate?: boolean };
+  locale: {
+    defaultLocale: string;
+    restLocale: string[];
+  };
+  currentLocale?: string;
+}
+
+export const NavigationHeader: React.FC<Props> = ({
+  activeNavigation,
+  structureHasErrors,
+  structureHasChanged,
+  isSaving,
+  handleLocalizationSelection,
+  handleSave,
+  handleCachePurge,
+  permissions = {},
+  locale,
+  currentLocale,
+}) => {
+  const { formatMessage } = useIntl();
+
+  const configQuery = useConfig();
+
+  const hasLocalizations = !!locale.restLocale?.length;
+  const hasCache = !!configQuery.data?.isCacheEnabled;
+
+  const { canUpdate } = permissions;
+
+  const { isMobile } = usePluginMediaQuery();
+
+  return (
+    <Layouts.Header
+      navigationAction={
+        <Link tag={NavLink} startIcon={<ArrowLeft />} to={`/plugins/${PLUGIN_ID}`}>
+          {formatMessage(getTrad('popup.navigation.manage.button.goBack'))}
+        </Link>
+      }
+      title={activeNavigation?.name ?? formatMessage(getTrad('header.title', 'UI Navigation'))}
+      subtitle={formatMessage(getTrad('header.description'))}
+      primaryAction={
+        <Flex direction="row" gap={2}>
+          {hasLocalizations && (
+            <SingleSelect
+              type="select"
+              placeholder={formatMessage(
+                getTrad('pages.main.header.localization.select.placeholder')
+              )}
+              name="navigationLocalizationSelect"
+              onChange={handleLocalizationSelection}
+              value={currentLocale}
+              size="S"
+            >
+              {[locale.defaultLocale, ...locale.restLocale].map((code) => (
+                <SingleSelectOption key={code} value={code}>
+                  {code}
+                </SingleSelectOption>
+              ))}
+            </SingleSelect>
+          )}
+          {canUpdate && hasCache && (
+            <Button
+              onClick={handleCachePurge}
+              startIcon={<Feather />}
+              variant="danger-light"
+              type="button"
+              size="S"
+            >
+              {formatMessage(getTrad('submit.cta.cache.purge'))}
+            </Button>
+          )}
+          {canUpdate && (
+            <Button
+              onClick={handleSave}
+              startIcon={submitIcon}
+              disabled={structureHasErrors || !structureHasChanged || isSaving}
+              type="submit"
+              size="S"
+            >
+              {formatMessage(getTrad('submit.cta.save'))}
+            </Button>
+          )}
+        </Flex>
+      }
+      secondaryAction={
+        !isMobile &&
+        activeNavigation && (
+          <Tag icon={<Information aria-hidden={true} />}>
+            {formatMessage(getTrad('header.meta'), {
+              id: activeNavigation.documentId,
+              key: activeNavigation.slug,
+            })}
+          </Tag>
+        )
+      }
+    />
+  );
+};
diff --git a/admin/src/pages/HomePage/components/NavigationHeader/styles.ts b/admin/src/pages/DetailPage/components/NavigationHeader/styles.ts
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationHeader/styles.ts
rename to admin/src/pages/DetailPage/components/NavigationHeader/styles.ts
diff --git a/admin/src/pages/HomePage/components/NavigationItemForm/components/AdditionalFields/AdditionalFieldInput/index.tsx b/admin/src/pages/DetailPage/components/NavigationItemForm/components/AdditionalFields/AdditionalFieldInput/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemForm/components/AdditionalFields/AdditionalFieldInput/index.tsx
rename to admin/src/pages/DetailPage/components/NavigationItemForm/components/AdditionalFields/AdditionalFieldInput/index.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationItemForm/components/AdditionalFields/AudienceField/index.tsx b/admin/src/pages/DetailPage/components/NavigationItemForm/components/AdditionalFields/AudienceField/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemForm/components/AdditionalFields/AudienceField/index.tsx
rename to admin/src/pages/DetailPage/components/NavigationItemForm/components/AdditionalFields/AudienceField/index.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationItemForm/components/AdditionalFields/CustomFieldsField/index.tsx b/admin/src/pages/DetailPage/components/NavigationItemForm/components/AdditionalFields/CustomFieldsField/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemForm/components/AdditionalFields/CustomFieldsField/index.tsx
rename to admin/src/pages/DetailPage/components/NavigationItemForm/components/AdditionalFields/CustomFieldsField/index.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationItemForm/components/AdditionalFields/index.tsx b/admin/src/pages/DetailPage/components/NavigationItemForm/components/AdditionalFields/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemForm/components/AdditionalFields/index.tsx
rename to admin/src/pages/DetailPage/components/NavigationItemForm/components/AdditionalFields/index.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationItemForm/components/AttachToMenuField/index.tsx b/admin/src/pages/DetailPage/components/NavigationItemForm/components/AttachToMenuField/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemForm/components/AttachToMenuField/index.tsx
rename to admin/src/pages/DetailPage/components/NavigationItemForm/components/AttachToMenuField/index.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationItemForm/components/CopyFromLocales/index.tsx b/admin/src/pages/DetailPage/components/NavigationItemForm/components/CopyFromLocales/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemForm/components/CopyFromLocales/index.tsx
rename to admin/src/pages/DetailPage/components/NavigationItemForm/components/CopyFromLocales/index.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationItemForm/components/ManualPathField/index.tsx b/admin/src/pages/DetailPage/components/NavigationItemForm/components/ManualPathField/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemForm/components/ManualPathField/index.tsx
rename to admin/src/pages/DetailPage/components/NavigationItemForm/components/ManualPathField/index.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationItemForm/components/NavigationItemTypeField/index.tsx b/admin/src/pages/DetailPage/components/NavigationItemForm/components/NavigationItemTypeField/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemForm/components/NavigationItemTypeField/index.tsx
rename to admin/src/pages/DetailPage/components/NavigationItemForm/components/NavigationItemTypeField/index.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationItemForm/components/PathField/index.tsx b/admin/src/pages/DetailPage/components/NavigationItemForm/components/PathField/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemForm/components/PathField/index.tsx
rename to admin/src/pages/DetailPage/components/NavigationItemForm/components/PathField/index.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationItemForm/components/ReadFieldsFromRelatedField/index.tsx b/admin/src/pages/DetailPage/components/NavigationItemForm/components/ReadFieldsFromRelatedField/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemForm/components/ReadFieldsFromRelatedField/index.tsx
rename to admin/src/pages/DetailPage/components/NavigationItemForm/components/ReadFieldsFromRelatedField/index.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationItemForm/components/RelatedEntityField/hooks.ts b/admin/src/pages/DetailPage/components/NavigationItemForm/components/RelatedEntityField/hooks.ts
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemForm/components/RelatedEntityField/hooks.ts
rename to admin/src/pages/DetailPage/components/NavigationItemForm/components/RelatedEntityField/hooks.ts
diff --git a/admin/src/pages/HomePage/components/NavigationItemForm/components/RelatedEntityField/index.tsx b/admin/src/pages/DetailPage/components/NavigationItemForm/components/RelatedEntityField/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemForm/components/RelatedEntityField/index.tsx
rename to admin/src/pages/DetailPage/components/NavigationItemForm/components/RelatedEntityField/index.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationItemForm/components/RelatedTypeField/index.tsx b/admin/src/pages/DetailPage/components/NavigationItemForm/components/RelatedTypeField/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemForm/components/RelatedTypeField/index.tsx
rename to admin/src/pages/DetailPage/components/NavigationItemForm/components/RelatedTypeField/index.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationItemForm/components/TitleField/index.tsx b/admin/src/pages/DetailPage/components/NavigationItemForm/components/TitleField/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemForm/components/TitleField/index.tsx
rename to admin/src/pages/DetailPage/components/NavigationItemForm/components/TitleField/index.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationItemForm/context/NavigationItemFormContext.ts b/admin/src/pages/DetailPage/components/NavigationItemForm/context/NavigationItemFormContext.ts
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemForm/context/NavigationItemFormContext.ts
rename to admin/src/pages/DetailPage/components/NavigationItemForm/context/NavigationItemFormContext.ts
diff --git a/admin/src/pages/HomePage/components/NavigationItemForm/index.tsx b/admin/src/pages/DetailPage/components/NavigationItemForm/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemForm/index.tsx
rename to admin/src/pages/DetailPage/components/NavigationItemForm/index.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationItemForm/types.ts b/admin/src/pages/DetailPage/components/NavigationItemForm/types.ts
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemForm/types.ts
rename to admin/src/pages/DetailPage/components/NavigationItemForm/types.ts
diff --git a/admin/src/pages/HomePage/components/NavigationItemForm/utils/form.ts b/admin/src/pages/DetailPage/components/NavigationItemForm/utils/form.ts
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemForm/utils/form.ts
rename to admin/src/pages/DetailPage/components/NavigationItemForm/utils/form.ts
diff --git a/admin/src/pages/HomePage/components/NavigationItemForm/utils/hooks.ts b/admin/src/pages/DetailPage/components/NavigationItemForm/utils/hooks.ts
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemForm/utils/hooks.ts
rename to admin/src/pages/DetailPage/components/NavigationItemForm/utils/hooks.ts
diff --git a/admin/src/pages/HomePage/components/NavigationItemForm/utils/properties.ts b/admin/src/pages/DetailPage/components/NavigationItemForm/utils/properties.ts
similarity index 97%
rename from admin/src/pages/HomePage/components/NavigationItemForm/utils/properties.ts
rename to admin/src/pages/DetailPage/components/NavigationItemForm/utils/properties.ts
index 2d1cc52e..97f9805f 100644
--- a/admin/src/pages/HomePage/components/NavigationItemForm/utils/properties.ts
+++ b/admin/src/pages/DetailPage/components/NavigationItemForm/utils/properties.ts
@@ -5,7 +5,7 @@ import {
   NavigationItemTypeSchema,
   StrapiContentTypeItemSchema,
 } from '../../../../../api/validators';
-import { extractRelatedItemLabel } from '../../../../HomePage/utils';
+import { extractRelatedItemLabel } from '../../../utils';
 import { type NavigationItemFormSchema } from './form';
 
 interface GenerateUiRouterKeyInput {
diff --git a/admin/src/pages/HomePage/components/NavigationItemList/Wrapper.ts b/admin/src/pages/DetailPage/components/NavigationItemList/Wrapper.ts
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemList/Wrapper.ts
rename to admin/src/pages/DetailPage/components/NavigationItemList/Wrapper.ts
diff --git a/admin/src/pages/HomePage/components/NavigationItemList/index.tsx b/admin/src/pages/DetailPage/components/NavigationItemList/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemList/index.tsx
rename to admin/src/pages/DetailPage/components/NavigationItemList/index.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationItemListItem/ItemCardBadge/index.ts b/admin/src/pages/DetailPage/components/NavigationItemListItem/ItemCardBadge/index.ts
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemListItem/ItemCardBadge/index.ts
rename to admin/src/pages/DetailPage/components/NavigationItemListItem/ItemCardBadge/index.ts
diff --git a/admin/src/pages/HomePage/components/NavigationItemListItem/ItemCardHeader/Wrapper.tsx b/admin/src/pages/DetailPage/components/NavigationItemListItem/ItemCardHeader/Wrapper.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemListItem/ItemCardHeader/Wrapper.tsx
rename to admin/src/pages/DetailPage/components/NavigationItemListItem/ItemCardHeader/Wrapper.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationItemListItem/ItemCardHeader/icons.tsx b/admin/src/pages/DetailPage/components/NavigationItemListItem/ItemCardHeader/icons.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemListItem/ItemCardHeader/icons.tsx
rename to admin/src/pages/DetailPage/components/NavigationItemListItem/ItemCardHeader/icons.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationItemListItem/ItemCardHeader/index.tsx b/admin/src/pages/DetailPage/components/NavigationItemListItem/ItemCardHeader/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemListItem/ItemCardHeader/index.tsx
rename to admin/src/pages/DetailPage/components/NavigationItemListItem/ItemCardHeader/index.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationItemListItem/ItemCardRemovedOverlay/index.ts b/admin/src/pages/DetailPage/components/NavigationItemListItem/ItemCardRemovedOverlay/index.ts
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemListItem/ItemCardRemovedOverlay/index.ts
rename to admin/src/pages/DetailPage/components/NavigationItemListItem/ItemCardRemovedOverlay/index.ts
diff --git a/admin/src/pages/HomePage/components/NavigationItemListItem/Wrapper.ts b/admin/src/pages/DetailPage/components/NavigationItemListItem/Wrapper.ts
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemListItem/Wrapper.ts
rename to admin/src/pages/DetailPage/components/NavigationItemListItem/Wrapper.ts
diff --git a/admin/src/pages/HomePage/components/NavigationItemListItem/index.tsx b/admin/src/pages/DetailPage/components/NavigationItemListItem/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemListItem/index.tsx
rename to admin/src/pages/DetailPage/components/NavigationItemListItem/index.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationItemPopup/NavigationItemPopupFooter.tsx b/admin/src/pages/DetailPage/components/NavigationItemPopup/NavigationItemPopupFooter.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemPopup/NavigationItemPopupFooter.tsx
rename to admin/src/pages/DetailPage/components/NavigationItemPopup/NavigationItemPopupFooter.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationItemPopup/NavigationItemPopupHeader.tsx b/admin/src/pages/DetailPage/components/NavigationItemPopup/NavigationItemPopupHeader.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemPopup/NavigationItemPopupHeader.tsx
rename to admin/src/pages/DetailPage/components/NavigationItemPopup/NavigationItemPopupHeader.tsx
diff --git a/admin/src/pages/HomePage/components/NavigationItemPopup/index.tsx b/admin/src/pages/DetailPage/components/NavigationItemPopup/index.tsx
similarity index 100%
rename from admin/src/pages/HomePage/components/NavigationItemPopup/index.tsx
rename to admin/src/pages/DetailPage/components/NavigationItemPopup/index.tsx
diff --git a/admin/src/pages/DetailPage/components/index.ts b/admin/src/pages/DetailPage/components/index.ts
new file mode 100644
index 00000000..e5022e8b
--- /dev/null
+++ b/admin/src/pages/DetailPage/components/index.ts
@@ -0,0 +1 @@
+export * from './NavigationHeader';
diff --git a/admin/src/pages/HomePage/hooks/index.tsx b/admin/src/pages/DetailPage/hooks/index.tsx
similarity index 77%
rename from admin/src/pages/HomePage/hooks/index.tsx
rename to admin/src/pages/DetailPage/hooks/index.tsx
index 89e9b419..7c054dce 100644
--- a/admin/src/pages/HomePage/hooks/index.tsx
+++ b/admin/src/pages/DetailPage/hooks/index.tsx
@@ -1,8 +1,7 @@
-export * from './useAPI';
+export * from '../../../hooks';
 export * from './useI18nCopyNavigationItemsModal';
 export * from './useInvalidateQueries';
 export * from './useLocales';
 export * from './useNavigationItemPopup';
 export * from './useSearch';
-export * from './useSettingsPermissions';
 export * from './usePluginMediaQuery';
diff --git a/admin/src/pages/HomePage/hooks/useI18nCopyNavigationItemsModal.tsx b/admin/src/pages/DetailPage/hooks/useI18nCopyNavigationItemsModal.tsx
similarity index 100%
rename from admin/src/pages/HomePage/hooks/useI18nCopyNavigationItemsModal.tsx
rename to admin/src/pages/DetailPage/hooks/useI18nCopyNavigationItemsModal.tsx
diff --git a/admin/src/pages/HomePage/hooks/useInvalidateQueries.ts b/admin/src/pages/DetailPage/hooks/useInvalidateQueries.ts
similarity index 100%
rename from admin/src/pages/HomePage/hooks/useInvalidateQueries.ts
rename to admin/src/pages/DetailPage/hooks/useInvalidateQueries.ts
diff --git a/admin/src/pages/HomePage/hooks/useLocales.ts b/admin/src/pages/DetailPage/hooks/useLocales.ts
similarity index 100%
rename from admin/src/pages/HomePage/hooks/useLocales.ts
rename to admin/src/pages/DetailPage/hooks/useLocales.ts
diff --git a/admin/src/pages/HomePage/hooks/useNavigationItemPopup.ts b/admin/src/pages/DetailPage/hooks/useNavigationItemPopup.ts
similarity index 100%
rename from admin/src/pages/HomePage/hooks/useNavigationItemPopup.ts
rename to admin/src/pages/DetailPage/hooks/useNavigationItemPopup.ts
diff --git a/admin/src/pages/HomePage/hooks/usePluginMediaQuery.tsx b/admin/src/pages/DetailPage/hooks/usePluginMediaQuery.tsx
similarity index 100%
rename from admin/src/pages/HomePage/hooks/usePluginMediaQuery.tsx
rename to admin/src/pages/DetailPage/hooks/usePluginMediaQuery.tsx
diff --git a/admin/src/pages/HomePage/hooks/useSearch.ts b/admin/src/pages/DetailPage/hooks/useSearch.ts
similarity index 100%
rename from admin/src/pages/HomePage/hooks/useSearch.ts
rename to admin/src/pages/DetailPage/hooks/useSearch.ts
diff --git a/admin/src/pages/DetailPage/index.tsx b/admin/src/pages/DetailPage/index.tsx
new file mode 100644
index 00000000..ba5b9c77
--- /dev/null
+++ b/admin/src/pages/DetailPage/index.tsx
@@ -0,0 +1,256 @@
+import { Layouts, Page, useNotification } from '@strapi/strapi/admin';
+import { SyntheticEvent, useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { NavigationSchema } from '../../api/validators';
+import { PLUGIN_ID } from '../../pluginId';
+import { getTrad } from '../../translations';
+import { appendViewId } from '../../utils/appendViewId';
+import { NavigationHeader } from './components';
+import { ChangeLanguageDialog } from './components/ChangeLanguageDialog';
+import { NavigationContentHeader } from './components/NavigationContentHeader';
+import { List } from './components/NavigationItemList';
+import NavigationItemPopUp from './components/NavigationItemPopup';
+import { Search } from './components/NavigationContentHeader/Search';
+import {
+  useConfig,
+  useInvalidateQueries,
+  useLocales,
+  useNavigationItemPopup,
+  useNavigations,
+  usePurgeNavigation,
+  useSearch,
+  useSettingsPermissions,
+  useUpdateNavigation,
+} from './hooks';
+import { getPendingAction, transformItemToViewPayload } from './utils';
+import { ManageNavigationItems } from './components/NavigationContentHeader/ManageNavigationItems';
+import { NavigationEmptyState } from './components/NavigationEmptyState';
+import { type NavigationItemFormSchema } from './components/NavigationItemForm';
+
+const DetailPage = () => {
+  const { formatMessage } = useIntl();
+  const { documentId } = useParams<{ documentId: string }>();
+  const navigate = useNavigate();
+
+  const navigationsQuery = useNavigations();
+  const configQuery = useConfig();
+  const purgeMutation = usePurgeNavigation();
+
+  const { toggleNotification } = useNotification();
+
+  const [currentNavigation, setCurrentNavigation] = useState<NavigationSchema>();
+  const [structureChanged, setStructureChanged] = useState(false);
+
+  const { canAccess, canUpdate, isLoadingForPermissions } = useSettingsPermissions();
+
+  const {
+    localeData,
+    currentLocale,
+    isChangeLanguageVisible,
+    changeCurrentLocaleAction,
+    availableLocales,
+  } = useLocales(navigationsQuery.data, setStructureChanged);
+
+  const { searchValue, setSearchValue, isSearchEmpty, filteredList } = useSearch(currentNavigation);
+
+  const {
+    activeNavigationItem,
+    addNewNavigationItem,
+    editNavigationItem,
+    closeNavigationItemPopup,
+    isItemPopupVisible,
+  } = useNavigationItemPopup(canUpdate);
+
+  const pending = getPendingAction([navigationsQuery, { isPending: isLoadingForPermissions }]);
+
+  const updateNavigationMutation = useUpdateNavigation({
+    onError: (error: any) => {
+      toggleNotification({
+        type: 'danger',
+        message: formatMessage(getTrad('notification.navigation.update.error')),
+      });
+
+      try {
+        console.error(error);
+        console.log(error.response.data.error);
+      } catch (e) {}
+    },
+    onSuccess: (next) => {
+      setCurrentNavigation({
+        ...next,
+        items: next.items.map(appendViewId),
+      });
+
+      setStructureChanged(false);
+    },
+  });
+
+  const submit = () => {
+    if (currentNavigation) {
+      updateNavigationMutation.mutate(currentNavigation);
+    }
+  };
+
+  const onPopUpClose = (e: SyntheticEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Using Strapi design system select components inside a modal causes
+    // extraneous close events to be fired. It is most likely related to how
+    // the select component handles onOutsideClick events. In those situations
+    // the event target element is the root HTML element.
+    // This is a workaround to prevent the modal from closing in those cases.
+    if ((e.target as any).tagName !== 'HTML') {
+      closeNavigationItemPopup();
+    }
+  };
+
+  const handleSubmitNavigationItem = (payload: NavigationItemFormSchema) => {
+    if (currentNavigation && configQuery.data) {
+      const items = transformItemToViewPayload(
+        payload,
+        currentNavigation?.items ?? [],
+        configQuery.data
+      );
+
+      setCurrentNavigation({
+        ...currentNavigation,
+        items,
+      });
+
+      setStructureChanged(true);
+
+      closeNavigationItemPopup();
+    }
+  };
+
+  const listItems = isSearchEmpty ? (currentNavigation?.items ?? []) : filteredList;
+
+  useEffect(() => {
+    if (!navigationsQuery.data) {
+      return;
+    }
+
+    const localeVersions = navigationsQuery.data.filter(
+      (navigation) => navigation.documentId === documentId
+    );
+
+    if (!localeVersions.length) {
+      navigate(`/plugins/${PLUGIN_ID}`);
+      return;
+    }
+
+    if (!currentNavigation || currentNavigation.documentId !== documentId) {
+      setCurrentNavigation(
+        localeVersions.find((navigation) => navigation.locale === currentLocale) ??
+          localeVersions[0]
+      );
+    }
+  }, [navigationsQuery.data, currentNavigation, documentId, currentLocale, navigate]);
+
+  useEffect(() => {
+    if (currentNavigation && currentLocale !== currentNavigation.locale) {
+      const nextNavigation = navigationsQuery.data?.find(
+        (navigation) =>
+          navigation.documentId === currentNavigation.documentId &&
+          navigation.locale === currentLocale
+      );
+
+      if (
+        nextNavigation &&
+        nextNavigation.documentId === currentNavigation.documentId &&
+        nextNavigation.locale !== currentNavigation.locale
+      ) {
+        setCurrentNavigation(nextNavigation);
+      }
+    }
+  }, [currentNavigation, currentLocale, navigationsQuery.data]);
+
+  useInvalidateQueries();
+
+  if (!navigationsQuery.data || !localeData || !!pending) {
+    return <Page.Loading />;
+  }
+
+  return (
+    <Layouts.Root>
+      <Page.Title children={formatMessage(getTrad('header.title', 'UI Navigation'))} />
+      <Page.Main>
+        <NavigationHeader
+          activeNavigation={currentNavigation}
+          handleCachePurge={() => purgeMutation.mutate(documentId ? [documentId] : undefined)}
+          handleLocalizationSelection={
+            structureChanged ? changeCurrentLocaleAction.trigger : changeCurrentLocaleAction.perform
+          }
+          handleSave={submit}
+          locale={localeData}
+          structureHasChanged={structureChanged}
+          isSaving={updateNavigationMutation.isPending}
+          permissions={{ canUpdate }}
+          currentLocale={currentLocale}
+        />
+
+        <Layouts.Content>
+          <NavigationContentHeader
+            startActions={<Search value={searchValue} setValue={setSearchValue} />}
+            endActions={
+              <ManageNavigationItems
+                currentNavigation={currentNavigation}
+                setCurrentNavigation={setCurrentNavigation}
+                canUpdate={canUpdate}
+                addNewNavigationItem={addNewNavigationItem}
+              />
+            }
+          />
+          {!currentNavigation?.items.length ? (
+            <NavigationEmptyState
+              canUpdate={canUpdate}
+              addNewNavigationItem={addNewNavigationItem}
+              availableLocale={availableLocales}
+              availableNavigations={navigationsQuery.data}
+              currentNavigation={currentNavigation}
+              setCurrentNavigation={setCurrentNavigation}
+            />
+          ) : (
+            <List
+              items={listItems}
+              onItemLevelAdd={addNewNavigationItem}
+              onItemEdit={editNavigationItem}
+              onItemSubmit={handleSubmitNavigationItem}
+              displayFlat={!isSearchEmpty}
+              isParentAttachedToMenu
+              permissions={{ canUpdate, canAccess }}
+              structurePrefix=""
+              locale={currentLocale ?? ''}
+            />
+          )}
+
+          {isItemPopupVisible && currentLocale && currentNavigation && (
+            <NavigationItemPopUp
+              availableLocale={availableLocales}
+              currentItem={activeNavigationItem}
+              onSubmit={handleSubmitNavigationItem}
+              onClose={onPopUpClose}
+              locale={currentLocale}
+              permissions={{ canUpdate }}
+              isOpen={isItemPopupVisible}
+              isLoading={isLoadingForPermissions}
+              currentNavigation={currentNavigation}
+            />
+          )}
+
+          {isChangeLanguageVisible && (
+            <ChangeLanguageDialog
+              onCancel={() => changeCurrentLocaleAction.cancel()}
+              onConfirm={() => changeCurrentLocaleAction.perform()}
+            />
+          )}
+        </Layouts.Content>
+      </Page.Main>
+    </Layouts.Root>
+  );
+};
+
+export { DetailPage };
diff --git a/admin/src/pages/HomePage/utils/index.ts b/admin/src/pages/DetailPage/utils/index.ts
similarity index 100%
rename from admin/src/pages/HomePage/utils/index.ts
rename to admin/src/pages/DetailPage/utils/index.ts
diff --git a/admin/src/pages/HomePage/utils/parsers.ts b/admin/src/pages/DetailPage/utils/parsers.ts
similarity index 100%
rename from admin/src/pages/HomePage/utils/parsers.ts
rename to admin/src/pages/DetailPage/utils/parsers.ts
diff --git a/admin/src/pages/HomePage/components/NavigationHeader/index.tsx b/admin/src/pages/HomePage/components/NavigationHeader/index.tsx
index 0623aaf0..a332a00a 100644
--- a/admin/src/pages/HomePage/components/NavigationHeader/index.tsx
+++ b/admin/src/pages/HomePage/components/NavigationHeader/index.tsx
@@ -16,7 +16,7 @@ import styled from 'styled-components';
 import { NavigationSchema } from '../../../../api/validators';
 import { getTrad } from '../../../../translations';
 import { Effect } from '../../../../types';
-import { useConfig, usePluginMediaQuery } from '../../hooks';
+import { useConfig, usePluginMediaQuery } from '../../../DetailPage/hooks';
 import { useNavigationManager } from './hooks';
 
 const StyledGridItem = styled(Grid.Item)<{
diff --git a/admin/src/pages/HomePage/components/NavigationManager/AllNavigations/index.tsx b/admin/src/pages/HomePage/components/NavigationManager/AllNavigations/index.tsx
index b2d717a9..4e68c162 100644
--- a/admin/src/pages/HomePage/components/NavigationManager/AllNavigations/index.tsx
+++ b/admin/src/pages/HomePage/components/NavigationManager/AllNavigations/index.tsx
@@ -18,7 +18,7 @@ import { useCallback, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 
 import { getTrad } from '../../../../../translations';
-import { useConfig, useLocale } from '../../../hooks';
+import { useConfig, useLocale } from '../../../../DetailPage/hooks';
 import { Footer, FooterBase } from '../Footer';
 import { INITIAL_NAVIGATION } from '../NewNavigation';
 import { CommonProps, ListState, Navigation } from '../types';
diff --git a/admin/src/pages/HomePage/components/NavigationManager/index.tsx b/admin/src/pages/HomePage/components/NavigationManager/index.tsx
index c895c936..c3a4cb8a 100644
--- a/admin/src/pages/HomePage/components/NavigationManager/index.tsx
+++ b/admin/src/pages/HomePage/components/NavigationManager/index.tsx
@@ -13,8 +13,8 @@ import {
   useNavigations,
   usePurgeNavigation,
   useUpdateNavigation,
-} from '../../hooks';
-import { getPendingAction } from '../../utils';
+} from '../../../DetailPage/hooks';
+import { getPendingAction } from '../../../DetailPage/utils';
 import { AllNavigations, AllNavigationsFooter } from './AllNavigations';
 import { DeleteConfirmFooter, DeletionConfirm } from './DeletionConfirm';
 import { ErrorDetails, ErrorDetailsFooter } from './ErrorDetails';
diff --git a/admin/src/pages/HomePage/index.tsx b/admin/src/pages/HomePage/index.tsx
index 6df2148f..c60204bc 100644
--- a/admin/src/pages/HomePage/index.tsx
+++ b/admin/src/pages/HomePage/index.tsx
@@ -8,11 +8,11 @@ import { useIntl } from 'react-intl';
 import { NavigationSchema } from '../../api/validators';
 import { getTrad } from '../../translations';
 import { NavigationHeader } from './components';
-import { ChangeLanguageDialog } from './components/ChangeLanguageDialog';
-import { NavigationContentHeader } from './components/NavigationContentHeader';
-import { List } from './components/NavigationItemList';
-import NavigationItemPopUp from './components/NavigationItemPopup';
-import { Search } from './components/NavigationContentHeader/Search';
+import { ChangeLanguageDialog } from '../DetailPage/components/ChangeLanguageDialog';
+import { NavigationContentHeader } from '../DetailPage/components/NavigationContentHeader';
+import { List } from '../DetailPage/components/NavigationItemList';
+import NavigationItemPopUp from '../DetailPage/components/NavigationItemPopup';
+import { Search } from '../DetailPage/components/NavigationContentHeader/Search';
 import {
   useConfig,
   useInvalidateQueries,
@@ -23,12 +23,12 @@ import {
   useSearch,
   useSettingsPermissions,
   useUpdateNavigation,
-} from './hooks';
-import { getPendingAction, transformItemToViewPayload } from './utils';
-import { ManageNavigationItems } from './components/NavigationContentHeader/ManageNavigationItems';
-import { NavigationEmptyState } from './components/NavigationEmptyState';
-import { appendViewId } from './utils/appendViewId';
-import { type NavigationItemFormSchema } from './components/NavigationItemForm';
+} from '../DetailPage/hooks';
+import { getPendingAction, transformItemToViewPayload } from '../DetailPage/utils';
+import { ManageNavigationItems } from '../DetailPage/components/NavigationContentHeader/ManageNavigationItems';
+import { NavigationEmptyState } from '../DetailPage/components/NavigationEmptyState';
+import { appendViewId } from '../../utils/appendViewId';
+import { type NavigationItemFormSchema } from '../DetailPage/components/NavigationItemForm';
 
 const queryClient = new QueryClient();
 
diff --git a/admin/src/pages/OverviewPage/components/NavigationForm/hooks.ts b/admin/src/pages/OverviewPage/components/NavigationForm/hooks.ts
new file mode 100644
index 00000000..52c4af44
--- /dev/null
+++ b/admin/src/pages/OverviewPage/components/NavigationForm/hooks.ts
@@ -0,0 +1,10 @@
+import { z } from 'zod';
+
+export const formSchema = ({ alreadyUsedNames }: { alreadyUsedNames: string[] }) =>
+  z.object({
+    name: z
+      .string()
+      .min(2) // TODO: add translation
+      .and(z.string().refine((name) => !alreadyUsedNames.includes(name), 'Name already used')), // TODO: add translation
+    visible: z.boolean(),
+  });
diff --git a/admin/src/pages/OverviewPage/components/NavigationForm/index.tsx b/admin/src/pages/OverviewPage/components/NavigationForm/index.tsx
new file mode 100644
index 00000000..69f70a3f
--- /dev/null
+++ b/admin/src/pages/OverviewPage/components/NavigationForm/index.tsx
@@ -0,0 +1,175 @@
+import { Grid, TextInput, Toggle } from '@strapi/design-system';
+import { Form as StrapiForm } from '@strapi/strapi/admin';
+import { get, isEmpty, isNil, isObject, isString, set } from 'lodash';
+import { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { Field } from '@sensinum/strapi-utils';
+
+import { getTrad } from '../../../../translations';
+import { Effect, FormChangeEvent, FormItemErrorSchema } from '../../../../types';
+import { Navigation } from '../../types';
+import { formSchema } from './hooks';
+
+interface Props<T extends Partial<Navigation>> {
+  navigation: T;
+  onChange: Effect<T>;
+  isLoading?: boolean;
+  alreadyUsedNames?: Array<string>;
+}
+
+export const Form = <T extends Partial<Navigation>>({
+  navigation,
+  onChange,
+  alreadyUsedNames = [],
+  isLoading,
+}: Props<T>) => {
+  const [formValue, setFormValue] = useState<T>({} as T);
+  const [formError, setFormError] = useState<FormItemErrorSchema<T>>();
+
+  const { formatMessage } = useIntl();
+
+  const { name, visible } = formValue;
+
+  const handleChange = (
+    eventOrPath: FormChangeEvent,
+    value?: any,
+    nativeOnChange?: (eventOrPath: FormChangeEvent, value?: any) => void
+  ) => {
+    if (nativeOnChange) {
+      let fieldName = eventOrPath;
+      let fieldValue = value;
+
+      if (isObject(eventOrPath)) {
+        const { name: targetName, value: targetValue } = eventOrPath.target;
+        fieldName = targetName;
+        fieldValue = isNil(fieldValue) ? targetValue : fieldValue;
+      }
+
+      if (isString(fieldName)) {
+        setFormValueItem(fieldName, fieldValue);
+      }
+
+      return nativeOnChange(eventOrPath as FormChangeEvent, fieldValue);
+    }
+  };
+
+  const setFormValueItem = (path: string, value: any) => {
+    setFormValue(
+      set(
+        {
+          ...formValue,
+        },
+        path,
+        value
+      )
+    );
+  };
+
+  const renderError = (error: string): string | undefined => {
+    const errorOccurence = get(formError, error);
+    if (errorOccurence) {
+      return errorOccurence;
+    }
+    return undefined;
+  };
+
+  useEffect(() => {
+    if (navigation) {
+      if (navigation.name) {
+        setFormValue({
+          ...navigation,
+        } as T);
+      } else {
+        setFormValue({
+          name: 'New navigation',
+          visible: true,
+        } as T);
+
+        onChange({
+          name: 'New navigation',
+          visible: true,
+          disabled: true,
+        } as unknown as T);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    if (name === undefined && visible === undefined) {
+      return;
+    }
+
+    if (`${name}-${visible}` !== `${navigation.name}-${navigation.visible}`) {
+      const { error } = formSchema({ alreadyUsedNames }).safeParse(formValue);
+
+      onChange({
+        ...navigation,
+        name,
+        visible,
+        disabled: !isEmpty(error?.issues),
+      });
+      if (error) {
+        setFormError(
+          error.issues.reduce((acc, err) => {
+            return {
+              ...acc,
+              [err.path.join('.')]: err.message,
+            };
+          }, {} as FormItemErrorSchema<T>)
+        );
+      } else {
+        setFormError(undefined);
+      }
+    }
+  }, [name, visible]);
+
+  return (
+    <StrapiForm width="auto" height="auto" method="POST" initialValues={formValue}>
+      {({ values, onChange }) => {
+        return (
+          <Grid.Root gap={5}>
+            <Grid.Item m={6} xs={12}>
+              <Field
+                name="name"
+                label={formatMessage(getTrad('popup.navigation.form.name.label', 'Name'))}
+                error={renderError('name')}
+              >
+                <TextInput
+                  name="name"
+                  type="string"
+                  placeholder={formatMessage(
+                    getTrad('popup.navigation.form.name.placeholder', "Navigations's name")
+                  )}
+                  onChange={(eventOrPath: FormChangeEvent, value?: any) =>
+                    handleChange(eventOrPath, value, onChange)
+                  }
+                  value={values.name}
+                  disabled={isLoading}
+                />
+              </Field>
+            </Grid.Item>
+            <Grid.Item m={6} xs={12}>
+              <Field
+                name="visible"
+                label={formatMessage(getTrad('popup.navigation.form.visible.label', 'Visibility'))}
+                error={renderError('visible')}
+              >
+                <Toggle
+                  name="visible"
+                  checked={values.visible}
+                  onChange={(eventOrPath: FormChangeEvent) =>
+                    handleChange(eventOrPath, !values.visible, onChange)
+                  }
+                  onLabel={formatMessage(getTrad('popup.navigation.form.visible.toggle.visible'))}
+                  offLabel={formatMessage(getTrad('popup.navigation.form.visible.toggle.hidden'))}
+                  disabled={isLoading}
+                  width="100%"
+                />
+              </Field>
+            </Grid.Item>
+          </Grid.Root>
+        );
+      }}
+    </StrapiForm>
+  );
+};
diff --git a/admin/src/pages/OverviewPage/components/NavigationFormModal/index.tsx b/admin/src/pages/OverviewPage/components/NavigationFormModal/index.tsx
new file mode 100644
index 00000000..395407db
--- /dev/null
+++ b/admin/src/pages/OverviewPage/components/NavigationFormModal/index.tsx
@@ -0,0 +1,77 @@
+import { Button, Modal } from '@strapi/design-system';
+import { useState } from 'react';
+import { useIntl } from 'react-intl';
+
+import { getTrad } from '../../../../translations';
+import { Effect, VoidEffect } from '../../../../types';
+import { Navigation } from '../../types';
+import { Form } from '../NavigationForm';
+
+interface Props {
+  navigation: Partial<Navigation>;
+  alreadyUsedNames: Array<string>;
+  isLoading?: boolean;
+  onClose: VoidEffect;
+  onSubmit: Effect<Partial<Navigation>>;
+}
+
+export const NavigationFormModal = ({
+  navigation,
+  alreadyUsedNames,
+  isLoading,
+  onClose,
+  onSubmit,
+}: Props) => {
+  const { formatMessage } = useIntl();
+
+  const [current, setCurrent] = useState(navigation);
+  const [isDisabled, setIsDisabled] = useState(false);
+
+  const isEdit = !!navigation.documentId;
+
+  const handleChange = ({ disabled, ...updated }: Partial<Navigation> & { disabled?: boolean }) => {
+    setCurrent(updated);
+    setIsDisabled(!!disabled);
+  };
+
+  return (
+    <Modal.Root
+      open
+      onOpenChange={(isOpen: boolean) => {
+        if (!isOpen) {
+          onClose();
+        }
+      }}
+    >
+      <Modal.Content>
+        <Modal.Header>
+          <Modal.Title>
+            {isEdit
+              ? formatMessage(getTrad('popup.navigation.manage.header.EDIT'), {
+                  name: navigation.name,
+                })
+              : formatMessage(getTrad('popup.navigation.manage.header.CREATE'))}
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form
+            navigation={navigation}
+            onChange={handleChange}
+            isLoading={isLoading}
+            alreadyUsedNames={alreadyUsedNames}
+          />
+        </Modal.Body>
+        <Modal.Footer>
+          <Modal.Close>
+            <Button variant="tertiary" disabled={isLoading}>
+              {formatMessage(getTrad('popup.navigation.manage.button.cancel'))}
+            </Button>
+          </Modal.Close>
+          <Button onClick={() => onSubmit(current)} disabled={isLoading || isDisabled}>
+            {formatMessage(getTrad('popup.navigation.manage.button.save'))}
+          </Button>
+        </Modal.Footer>
+      </Modal.Content>
+    </Modal.Root>
+  );
+};
diff --git a/admin/src/pages/OverviewPage/index.tsx b/admin/src/pages/OverviewPage/index.tsx
new file mode 100644
index 00000000..94b90b12
--- /dev/null
+++ b/admin/src/pages/OverviewPage/index.tsx
@@ -0,0 +1,365 @@
+import {
+  Button,
+  EmptyStateLayout,
+  Flex,
+  IconButton,
+  Status,
+  Table,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  Typography,
+  VisuallyHidden,
+} from '@strapi/design-system';
+import { Feather, Pencil, Plus, Trash } from '@strapi/icons';
+import { EmptyDocuments } from '@strapi/icons/symbols';
+import { Layouts, Page, useNotification } from '@strapi/strapi/admin';
+import { sortBy } from 'lodash';
+import { useMemo, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { useNavigate } from 'react-router-dom';
+
+import { ConfirmationDialog } from '../../components/ConfirmationDialog';
+import {
+  useConfig,
+  useCreateNavigation,
+  useDeleteNavigations,
+  useHardReset,
+  useLocale,
+  useNavigations,
+  usePurgeNavigation,
+  useSettingsPermissions,
+  useUpdateNavigation,
+} from '../../hooks';
+import { PLUGIN_ID } from '../../pluginId';
+import { getTrad } from '../../translations';
+import { NavigationFormModal } from './components/NavigationFormModal';
+import { Navigation } from './types';
+
+const INITIAL_NAVIGATION: Partial<Navigation> = {
+  name: '',
+  items: [],
+  visible: false,
+};
+
+type OverlayState =
+  | { type: 'create' }
+  | { type: 'edit'; navigation: Navigation }
+  | { type: 'delete'; navigation: Navigation }
+  | { type: 'purge'; navigation?: Navigation }
+  | null;
+
+const OverviewPage = () => {
+  const { formatMessage } = useIntl();
+  const navigate = useNavigate();
+  const { toggleNotification } = useNotification();
+
+  const navigationsQuery = useNavigations();
+  const localeQuery = useLocale();
+  const configQuery = useConfig();
+  const { canUpdate, isLoadingForPermissions } = useSettingsPermissions();
+
+  const createNavigationMutation = useCreateNavigation();
+  const updateNavigationMutation = useUpdateNavigation({});
+  const deleteNavigationsMutation = useDeleteNavigations();
+  const purgeNavigationsMutation = usePurgeNavigation();
+  const hardReset = useHardReset();
+
+  const [overlay, setOverlay] = useState<OverlayState>(null);
+
+  const navigations = useMemo(
+    () => sortBy(navigationsQuery.data ?? [], 'id'),
+    [navigationsQuery.data]
+  );
+
+  const defaultLocaleNavigations = useMemo(
+    () => navigations.filter(({ locale }) => locale === localeQuery.data?.defaultLocale),
+    [navigations, localeQuery.data?.defaultLocale]
+  );
+
+  const hasCache = !!configQuery.data?.isCacheEnabled;
+
+  const isMutating =
+    createNavigationMutation.isPending ||
+    updateNavigationMutation.isPending ||
+    deleteNavigationsMutation.isPending ||
+    purgeNavigationsMutation.isPending;
+
+  const getLocaleVersions = (focused: Navigation) =>
+    [focused].concat(
+      navigations.filter(
+        (navigation) =>
+          navigation.documentId === focused.documentId && navigation.locale !== focused.locale
+      )
+    );
+
+  const goToDetails = (navigation: Navigation) => {
+    navigate(`/plugins/${PLUGIN_ID}/${navigation.documentId}`);
+  };
+
+  const handleFormSubmit = (updated: Partial<Navigation>) => {
+    const options = {
+      onSuccess() {
+        hardReset();
+        setOverlay(null);
+        toggleNotification({
+          type: 'success',
+          message: formatMessage(getTrad('notification.navigation.submit')),
+        });
+      },
+      onError(error: unknown) {
+        console.warn(error);
+        toggleNotification({
+          type: 'warning',
+          message: formatMessage(getTrad('notification.error.common')),
+        });
+      },
+    };
+
+    if (overlay?.type === 'edit') {
+      updateNavigationMutation.mutate(updated as Navigation, options);
+    } else {
+      createNavigationMutation.mutate(updated as Navigation, options);
+    }
+  };
+
+  const handleDelete = () => {
+    if (overlay?.type !== 'delete') {
+      return;
+    }
+
+    deleteNavigationsMutation.mutate([overlay.navigation.documentId], {
+      onSuccess() {
+        hardReset();
+        setOverlay(null);
+      },
+    });
+  };
+
+  const handlePurge = () => {
+    if (overlay?.type !== 'purge') {
+      return;
+    }
+
+    purgeNavigationsMutation.mutate(
+      overlay.navigation ? [overlay.navigation.documentId] : undefined,
+      {
+        onSuccess() {
+          hardReset();
+          setOverlay(null);
+        },
+      }
+    );
+  };
+
+  if (
+    navigationsQuery.isPending ||
+    localeQuery.isPending ||
+    configQuery.isPending ||
+    isLoadingForPermissions
+  ) {
+    return <Page.Loading />;
+  }
+
+  return (
+    <Layouts.Root>
+      <Page.Title children={formatMessage(getTrad('header.title', 'UI Navigation'))} />
+      <Page.Main>
+        <Layouts.Header
+          title={formatMessage(getTrad('header.title', 'UI Navigation'))}
+          subtitle={formatMessage(getTrad('pages.overview.header.subtitle'), {
+            count: defaultLocaleNavigations.length,
+          })}
+          primaryAction={
+            canUpdate && (
+              <Flex gap={2}>
+                {hasCache && (
+                  <Button
+                    variant="danger-light"
+                    startIcon={<Feather />}
+                    onClick={() => setOverlay({ type: 'purge' })}
+                  >
+                    {formatMessage(getTrad('popup.navigation.manage.button.purge'))}
+                  </Button>
+                )}
+                <Button startIcon={<Plus />} onClick={() => setOverlay({ type: 'create' })}>
+                  {formatMessage(getTrad('popup.navigation.manage.header.CREATE'))}
+                </Button>
+              </Flex>
+            )
+          }
+        />
+        <Layouts.Content>
+          {defaultLocaleNavigations.length === 0 ? (
+            <EmptyStateLayout
+              icon={<EmptyDocuments width="16rem" />}
+              content={formatMessage(getTrad('pages.overview.empty.description'))}
+              action={
+                canUpdate && (
+                  <Button
+                    variant="secondary"
+                    startIcon={<Plus />}
+                    onClick={() => setOverlay({ type: 'create' })}
+                  >
+                    {formatMessage(getTrad('popup.navigation.manage.header.CREATE'))}
+                  </Button>
+                )
+              }
+            />
+          ) : (
+            <Table colCount={5} rowCount={defaultLocaleNavigations.length + 1}>
+              <Thead>
+                <Tr>
+                  <Th>
+                    <Typography variant="sigma" textColor="neutral600">
+                      {formatMessage(getTrad('popup.navigation.manage.table.name'))}
+                    </Typography>
+                  </Th>
+                  <Th>
+                    <Typography variant="sigma" textColor="neutral600">
+                      {formatMessage(getTrad('popup.navigation.manage.table.locale'))}
+                    </Typography>
+                  </Th>
+                  <Th>
+                    <Typography variant="sigma" textColor="neutral600">
+                      {formatMessage(getTrad('popup.navigation.manage.table.visibility'))}
+                    </Typography>
+                  </Th>
+                  <Th>
+                    <Typography variant="sigma" textColor="neutral600">
+                      {formatMessage(getTrad('pages.overview.table.items'))}
+                    </Typography>
+                  </Th>
+                  <Th>
+                    <VisuallyHidden>
+                      {formatMessage(getTrad('pages.overview.table.actions'))}
+                    </VisuallyHidden>
+                  </Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {defaultLocaleNavigations.map((navigation) => (
+                  <Tr
+                    key={navigation.documentId}
+                    onClick={() => goToDetails(navigation)}
+                    style={{ cursor: 'pointer' }}
+                  >
+                    <Td>
+                      <Typography textColor="neutral800" fontWeight="bold">
+                        {navigation.name}
+                      </Typography>
+                    </Td>
+                    <Td>
+                      <Typography textColor="neutral800">
+                        {getLocaleVersions(navigation)
+                          .map(({ locale }) => locale)
+                          .join(', ')}
+                      </Typography>
+                    </Td>
+                    <Td>
+                      <Status
+                        size="S"
+                        variant={navigation.visible ? 'success' : 'secondary'}
+                        maxWidth="min-content"
+                      >
+                        <Typography tag="span" variant="omega" fontWeight="bold">
+                          {navigation.visible
+                            ? formatMessage(getTrad('popup.navigation.form.visible.toggle.visible'))
+                            : formatMessage(getTrad('popup.navigation.form.visible.toggle.hidden'))}
+                        </Typography>
+                      </Status>
+                    </Td>
+                    <Td>
+                      <Typography textColor="neutral800">{navigation.items.length}</Typography>
+                    </Td>
+                    <Td onClick={(event: React.MouseEvent) => event.stopPropagation()}>
+                      <Flex justifyContent="flex-end" gap={1}>
+                        {canUpdate && (
+                          <IconButton
+                            onClick={() => setOverlay({ type: 'edit', navigation })}
+                            label={formatMessage(getTrad('popup.navigation.manage.button.edit'))}
+                            variant="ghost"
+                          >
+                            <Pencil />
+                          </IconButton>
+                        )}
+                        {canUpdate && (
+                          <IconButton
+                            onClick={() => setOverlay({ type: 'delete', navigation })}
+                            label={formatMessage(getTrad('popup.navigation.manage.button.delete'))}
+                            variant="ghost"
+                          >
+                            <Trash />
+                          </IconButton>
+                        )}
+                        {canUpdate && hasCache && (
+                          <IconButton
+                            onClick={() => setOverlay({ type: 'purge', navigation })}
+                            label={formatMessage(getTrad('popup.navigation.manage.button.purge'))}
+                            variant="ghost"
+                          >
+                            <Feather />
+                          </IconButton>
+                        )}
+                      </Flex>
+                    </Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          )}
+
+          {(overlay?.type === 'create' || overlay?.type === 'edit') && (
+            <NavigationFormModal
+              navigation={overlay.type === 'edit' ? overlay.navigation : INITIAL_NAVIGATION}
+              alreadyUsedNames={defaultLocaleNavigations.reduce<Array<string>>(
+                (acc, { name }) =>
+                  overlay.type === 'edit' && name === overlay.navigation.name
+                    ? acc
+                    : acc.concat([name]),
+                []
+              )}
+              isLoading={isMutating}
+              onClose={() => setOverlay(null)}
+              onSubmit={handleFormSubmit}
+            />
+          )}
+
+          {overlay?.type === 'delete' && (
+            <ConfirmationDialog
+              isVisible
+              isActionAsync={isMutating}
+              header={formatMessage(getTrad('popup.navigation.manage.header.DELETE'))}
+              labelConfirm={formatMessage(getTrad('popup.navigation.manage.button.delete'))}
+              iconConfirm={<Trash />}
+              onConfirm={handleDelete}
+              onCancel={() => setOverlay(null)}
+            >
+              {`${formatMessage(getTrad('popup.navigation.manage.delete.header'))} "${overlay.navigation.name}"`}
+            </ConfirmationDialog>
+          )}
+
+          {overlay?.type === 'purge' && (
+            <ConfirmationDialog
+              isVisible
+              isActionAsync={isMutating}
+              header={formatMessage(getTrad('popup.navigation.manage.button.purge'))}
+              labelConfirm={formatMessage(getTrad('popup.navigation.manage.footer.button.purge'))}
+              iconConfirm={<Feather />}
+              onConfirm={handlePurge}
+              onCancel={() => setOverlay(null)}
+            >
+              {overlay.navigation
+                ? `${formatMessage(getTrad('popup.navigation.manage.purge.header'))} "${overlay.navigation.name}"`
+                : formatMessage(getTrad('popup.navigation.manage.purge.header'))}
+            </ConfirmationDialog>
+          )}
+        </Layouts.Content>
+      </Page.Main>
+    </Layouts.Root>
+  );
+};
+
+export { OverviewPage };
diff --git a/admin/src/pages/OverviewPage/types.ts b/admin/src/pages/OverviewPage/types.ts
new file mode 100644
index 00000000..d2d08c31
--- /dev/null
+++ b/admin/src/pages/OverviewPage/types.ts
@@ -0,0 +1,8 @@
+import { NavigationSchema } from '../../api/validators';
+
+export type Navigation = Pick<
+  NavigationSchema,
+  'id' | 'items' | 'name' | 'locale' | 'visible' | 'documentId' | 'slug'
+>;
+
+export type NewNavigation = Omit<Navigation, 'id' | 'documentId' | 'slug'>;
diff --git a/admin/src/pages/SettingsPage/components/AdditionalSettingsPanel/index.tsx b/admin/src/pages/SettingsPage/components/AdditionalSettingsPanel/index.tsx
index 66ff16f7..472ee9b0 100644
--- a/admin/src/pages/SettingsPage/components/AdditionalSettingsPanel/index.tsx
+++ b/admin/src/pages/SettingsPage/components/AdditionalSettingsPanel/index.tsx
@@ -83,6 +83,25 @@ export const AdditionalSettingsPanel = () => {
               />
             </Field>
           </Grid.Item>
+          <Grid.Item col={4} s={12} xs={12}>
+            <Field
+              name="isOverviewUiEnabled"
+              label={formatMessage(getTrad('pages.settings.form.overviewUi.label'))}
+              hint={formatMessage(getTrad('pages.settings.form.overviewUi.hint'))}
+            >
+              <Toggle
+                name="isOverviewUiEnabled"
+                checked={values.isOverviewUiEnabled}
+                onChange={(eventOrPath: FormChangeEvent) =>
+                  handleChange(eventOrPath, !values.isOverviewUiEnabled, onChange)
+                }
+                onLabel={formatMessage(getTrad('components.toggle.enabled'))}
+                offLabel={formatMessage(getTrad('components.toggle.disabled'))}
+                disabled={restartStatus.required}
+                width="100%"
+              />
+            </Field>
+          </Grid.Item>
           {configQuery.data?.isCachePluginEnabled && (
             <Grid.Item col={12} s={12} xs={12}>
               <Field
diff --git a/admin/src/schemas/config.ts b/admin/src/schemas/config.ts
index 3fb8c54d..864fce61 100644
--- a/admin/src/schemas/config.ts
+++ b/admin/src/schemas/config.ts
@@ -72,5 +72,6 @@ export const configSchema = z.object({
   cascadeMenuAttached: z.boolean(),
   preferCustomContentTypes: z.boolean(),
   isCacheEnabled: z.boolean().optional(),
+  isOverviewUiEnabled: z.boolean().optional(),
   isCachePluginEnabled: z.boolean().optional(),
 });
diff --git a/admin/src/translations/ca.ts b/admin/src/translations/ca.ts
index 5947288f..aa0444c1 100644
--- a/admin/src/translations/ca.ts
+++ b/admin/src/translations/ca.ts
@@ -94,6 +94,10 @@ const ca = {
         },
         visible: {
           label: 'Visibilité',
+          toggle: {
+            visible: 'Visible',
+            hidden: 'Masqué',
+          },
         },
       },
     },
@@ -229,6 +233,18 @@ const ca = {
         allowed: "Oups ! Il semble que vous n'ayez pas accès à cette page...",
       },
     },
+    overview: {
+      header: {
+        subtitle: '{count, plural, one {# navigation trouvée} other {# navigations trouvées}}',
+      },
+      table: {
+        items: 'Éléments',
+        actions: 'Actions',
+      },
+      empty: {
+        description: "Vous n'avez pas encore de navigation",
+      },
+    },
     main: {
       search: {
         placeholder: 'Tapez pour commencer à rechercher...',
@@ -272,6 +288,10 @@ const ca = {
           label: 'Cascade du menu attaché',
           hint: 'Désactiver si vous ne voulez pas que "Menu attaché" se propage aux éléments enfants',
         },
+        overviewUi: {
+          label: 'Nova interfície de navegació',
+          hint: 'Activa la nova interfície amb una vista general i pàgines de detall',
+        },
         preferCustomContentTypes: {
           label: 'Préférer les types de contenu personnalisés',
           hint: 'Préférer utiliser uniquement les types de contenu préfixés par api::',
diff --git a/admin/src/translations/de.ts b/admin/src/translations/de.ts
index 9f57ed18..5f3126e1 100644
--- a/admin/src/translations/de.ts
+++ b/admin/src/translations/de.ts
@@ -234,6 +234,18 @@ const de = {
         allowed: 'Sie haben offenbar keinen Zugriff auf diese Seite...',
       },
     },
+    overview: {
+      header: {
+        subtitle: '{count, plural, one {# Navigation gefunden} other {# Navigationen gefunden}}',
+      },
+      table: {
+        items: 'Einträge',
+        actions: 'Aktionen',
+      },
+      empty: {
+        description: 'Sie haben noch keine Navigationen',
+      },
+    },
     main: {
       search: {
         placeholder: 'Tippen, um die Suche zu starten...',
@@ -277,6 +289,10 @@ const de = {
           label: 'Menüzuordnung vererben',
           hint: 'Deaktivieren, wenn "Im Menü anzeigen" nicht an untergeordnete Einträge vererbt werden soll',
         },
+        overviewUi: {
+          label: 'Neue Navigationsoberfläche',
+          hint: 'Aktiviert die neue Oberfläche mit Navigationsübersicht und Detailseiten',
+        },
         preferCustomContentTypes: {
           label: 'API-Content-Types bevorzugen',
           hint: 'Nur Content-Types mit api::-Präfix bevorzugen',
diff --git a/admin/src/translations/en.ts b/admin/src/translations/en.ts
index 17b00b5c..f7e608cd 100644
--- a/admin/src/translations/en.ts
+++ b/admin/src/translations/en.ts
@@ -232,6 +232,18 @@ const en = {
         allowed: 'Oops! It seems like You do not have access to this page...',
       },
     },
+    overview: {
+      header: {
+        subtitle: '{count, plural, one {# navigation} other {# navigations}} found',
+      },
+      table: {
+        items: 'Items',
+        actions: 'Actions',
+      },
+      empty: {
+        description: 'You don’t have any navigations yet',
+      },
+    },
     main: {
       search: {
         placeholder: 'Type to start searching...',
@@ -275,6 +287,10 @@ const en = {
           label: 'Cascade menu attached',
           hint: 'Disable if you don\'t want "Menu attached" to cascade on child items',
         },
+        overviewUi: {
+          label: 'New navigation interface',
+          hint: 'Enable the new interface with a navigation overview and detail pages',
+        },
         preferCustomContentTypes: {
           label: 'Prefer API Content Types',
           hint: 'Prefer if to use only api:: prefixed content types',
diff --git a/admin/src/translations/es.ts b/admin/src/translations/es.ts
index 81157794..23823407 100644
--- a/admin/src/translations/es.ts
+++ b/admin/src/translations/es.ts
@@ -233,6 +233,19 @@ const en = {
         allowed: '¡Ups! Parece que no tienes acceso a esta página...',
       },
     },
+    overview: {
+      header: {
+        subtitle:
+          '{count, plural, one {# navegación encontrada} other {# navegaciones encontradas}}',
+      },
+      table: {
+        items: 'Ítems',
+        actions: 'Acciones',
+      },
+      empty: {
+        description: 'Todavía no tienes ninguna navegación',
+      },
+    },
     main: {
       search: {
         placeholder: 'Escribe para comenzar la búsqueda...',
@@ -276,6 +289,10 @@ const en = {
           label: 'Menú en cascada adjunto',
           hint: 'Deshabilitar si no deseas que "Menú adjunto" se propague a los elementos secundarios',
         },
+        overviewUi: {
+          label: 'Nueva interfaz de navegación',
+          hint: 'Activa la nueva interfaz con una vista general y páginas de detalle',
+        },
         preferCustomContentTypes: {
           label: 'Preferir tipos de contenido de API',
           hint: 'Preferir si se desea usar solo tipos de contenido con prefijo api::',
diff --git a/admin/src/translations/fr.ts b/admin/src/translations/fr.ts
index 7513c38b..4d5ef1a4 100644
--- a/admin/src/translations/fr.ts
+++ b/admin/src/translations/fr.ts
@@ -233,6 +233,18 @@ const fr = {
         allowed: "Oups ! Il semble que vous n'ayez pas accès à cette page…",
       },
     },
+    overview: {
+      header: {
+        subtitle: '{count, plural, one {# navigation trouvée} other {# navigations trouvées}}',
+      },
+      table: {
+        items: 'Éléments',
+        actions: 'Actions',
+      },
+      empty: {
+        description: "Vous n'avez pas encore de navigation",
+      },
+    },
     main: {
       search: {
         placeholder: 'Tapez pour commencer à rechercher…',
@@ -276,6 +288,10 @@ const fr = {
           label: 'Cascade du menu attaché',
           hint: 'Désactiver si vous ne voulez pas que « Menu attaché » se propage aux éléments enfants',
         },
+        overviewUi: {
+          label: 'Nouvelle interface de navigation',
+          hint: "Active la nouvelle interface avec une vue d'ensemble et des pages de détail",
+        },
         preferCustomContentTypes: {
           label: 'Préférer les types de contenu API',
           hint: 'Préférer utiliser uniquement les types de contenu préfixés par api::',
diff --git a/admin/src/translations/tr.ts b/admin/src/translations/tr.ts
index 2fdb2286..3b74ccf6 100644
--- a/admin/src/translations/tr.ts
+++ b/admin/src/translations/tr.ts
@@ -232,6 +232,18 @@ const tr = {
         allowed: 'Üzgünüz! Bu sayfaya erişim yetkiniz yok gibi görünüyor...',
       },
     },
+    overview: {
+      header: {
+        subtitle: '{count, plural, one {# navigasyon bulundu} other {# navigasyon bulundu}}',
+      },
+      table: {
+        items: 'Öğeler',
+        actions: 'İşlemler',
+      },
+      empty: {
+        description: 'Henüz bir navigasyonunuz yok',
+      },
+    },
     main: {
       search: {
         placeholder: 'Arama yapmak için yazmaya başlayın...',
@@ -275,6 +287,10 @@ const tr = {
           label: 'Kademeli menü eklendi',
           hint: '"Menü eklendi" seçeneğinin alt öğelere yayılmasını istemiyorsanız devre dışı bırakın',
         },
+        overviewUi: {
+          label: 'Yeni navigasyon arayüzü',
+          hint: 'Navigasyon genel görünümü ve detay sayfaları içeren yeni arayüzü etkinleştirir',
+        },
         preferCustomContentTypes: {
           label: 'Özel API İçerik Türlerini Tercih Et',
           hint: 'Yalnızca api:: önekli içerik türlerini kullanmayı tercih edin',
diff --git a/admin/src/pages/HomePage/utils/appendViewId.ts b/admin/src/utils/appendViewId.ts
similarity index 76%
rename from admin/src/pages/HomePage/utils/appendViewId.ts
rename to admin/src/utils/appendViewId.ts
index 39dacad2..f351090a 100644
--- a/admin/src/pages/HomePage/utils/appendViewId.ts
+++ b/admin/src/utils/appendViewId.ts
@@ -1,4 +1,4 @@
-import { NavigationItemSchema } from '../../../api/validators';
+import { NavigationItemSchema } from '../api/validators';
 
 export const appendViewId = (item: NavigationItemSchema): NavigationItemSchema => {
   return {
diff --git a/server/src/config/index.ts b/server/src/config/index.ts
index db8c18ae..1f257c6f 100644
--- a/server/src/config/index.ts
+++ b/server/src/config/index.ts
@@ -16,5 +16,6 @@ export default {
     cascadeMenuAttached: true,
     preferCustomContentTypes: false,
     isCacheEnabled: false,
+    isOverviewUiEnabled: false,
   },
 };
diff --git a/server/src/config/setup.ts b/server/src/config/setup.ts
index 08dd2d70..044d287b 100644
--- a/server/src/config/setup.ts
+++ b/server/src/config/setup.ts
@@ -50,6 +50,7 @@ export const configSetup = async ({
     cascadeMenuAttached: getWithFallback('cascadeMenuAttached'),
     preferCustomContentTypes: getWithFallback('preferCustomContentTypes'),
     isCacheEnabled: getWithFallback('isCacheEnabled'),
+    isOverviewUiEnabled: getWithFallback('isOverviewUiEnabled'),
   });
 
   handleDeletedContentTypes(config, { strapi });
diff --git a/server/src/dtos/config.ts b/server/src/dtos/config.ts
index fa65790e..4bcfaa17 100644
--- a/server/src/dtos/config.ts
+++ b/server/src/dtos/config.ts
@@ -37,4 +37,5 @@ export type NavigationPluginConfigDTO = Pick<
   isGQLPluginEnabled: boolean | undefined;
   isCachePluginEnabled: boolean | undefined;
   isCacheEnabled: boolean | undefined;
+  isOverviewUiEnabled: boolean | undefined;
 };
diff --git a/server/src/schemas/config.ts b/server/src/schemas/config.ts
index 6a0dbb4c..acd1feef 100644
--- a/server/src/schemas/config.ts
+++ b/server/src/schemas/config.ts
@@ -67,4 +67,5 @@ export const configSchema = z.object({
   cascadeMenuAttached: z.boolean(),
   preferCustomContentTypes: z.boolean(),
   isCacheEnabled: z.boolean().optional(),
+  isOverviewUiEnabled: z.boolean().optional(),
 });
diff --git a/server/src/services/admin/admin.ts b/server/src/services/admin/admin.ts
index bc7e7728..c3521d28 100644
--- a/server/src/services/admin/admin.ts
+++ b/server/src/services/admin/admin.ts
@@ -78,6 +78,7 @@ const adminService = (context: { strapi: Core.Strapi }) => ({
       pathDefaultFields,
       allowedLevels,
       preferCustomContentTypes,
+      isOverviewUiEnabled,
     } = config;
 
     const isGQLPluginEnabled = !!context.strapi.plugin('graphql');
@@ -108,6 +109,7 @@ const adminService = (context: { strapi: Core.Strapi }) => ({
       isGQLPluginEnabled: viaSettingsPage ? isGQLPluginEnabled : undefined,
       cascadeMenuAttached,
       preferCustomContentTypes,
+      isOverviewUiEnabled: !!isOverviewUiEnabled,
     };
 
     if (additionalFields.includes('audience')) {
diff --git a/server/tests/config/setup.test.ts b/server/tests/config/setup.test.ts
index 9efecbfb..41415ec0 100644
--- a/server/tests/config/setup.test.ts
+++ b/server/tests/config/setup.test.ts
@@ -56,6 +56,7 @@ describe('Navigation', () => {
               navigationItemRelated: expect.any(Array),
             }),
             isCacheEnabled: expect.any(Boolean),
+            isOverviewUiEnabled: expect.any(Boolean),
             pathDefaultFields: expect.any(Object),
             preferCustomContentTypes: false,
           });