diff --git a/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx b/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx
index e64a8deda1..9c615ee08e 100644
--- a/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx
+++ b/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx
@@ -1,9 +1,14 @@
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
-import { NavigationBar } from '@/ui/navigation/navigation-bar/components/NavigationBar';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { useRecoilState } from 'recoil';
-import { IconComponent, IconList, IconSearch, IconSettings } from 'twenty-ui';
+import {
+  IconComponent,
+  IconList,
+  IconSearch,
+  IconSettings,
+  NavigationBar,
+} from 'twenty-ui';
 import { useIsSettingsPage } from '../hooks/useIsSettingsPage';
 import { currentMobileNavigationDrawerState } from '../states/currentMobileNavigationDrawerState';
 
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/__stories__/NavigationBar.stories.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/__stories__/NavigationBar.stories.tsx
index 2dba91b685..ee7c612641 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/__stories__/NavigationBar.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/__stories__/NavigationBar.stories.tsx
@@ -5,12 +5,11 @@ import {
   IconList,
   IconSearch,
   IconSettings,
+  NavigationBar,
 } from 'twenty-ui';
 
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 
-import { NavigationBar } from '../NavigationBar';
-
 const meta: Meta<typeof NavigationBar> = {
   title: 'UI/Navigation/NavigationBar/NavigationBar',
   component: NavigationBar,
diff --git a/packages/twenty-front/tsup.ui.index.tsx b/packages/twenty-front/tsup.ui.index.tsx
index 53c921e4f5..cc6e700dd7 100644
--- a/packages/twenty-front/tsup.ui.index.tsx
+++ b/packages/twenty-front/tsup.ui.index.tsx
@@ -25,7 +25,6 @@ export * from './src/modules/ui/navigation/menu-item/components/MenuItemSelect';
 export * from './src/modules/ui/navigation/menu-item/components/MenuItemSelectAvatar';
 export * from './src/modules/ui/navigation/menu-item/components/MenuItemSelectColor';
 export * from './src/modules/ui/navigation/menu-item/components/MenuItemToggle';
-export * from './src/modules/ui/navigation/navigation-bar/components/NavigationBar';
 export * from './src/modules/ui/navigation/step-bar/components/StepBar';
 
 declare module '@emotion/react' {
diff --git a/packages/twenty-ui/src/navigation/index.ts b/packages/twenty-ui/src/navigation/index.ts
index 89cbeb8eb0..8a6b0bb0e6 100644
--- a/packages/twenty-ui/src/navigation/index.ts
+++ b/packages/twenty-ui/src/navigation/index.ts
@@ -9,3 +9,5 @@ export * from './link/components/SocialLink';
 export * from './link/components/UndecoratedLink';
 export * from './link/constants/Cal';
 export * from './link/constants/GithubLink';
+export * from './navigation-bar/components/NavigationBar';
+export * from './navigation-bar/components/NavigationBarItem';
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBar.tsx b/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBar.tsx
similarity index 91%
rename from packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBar.tsx
rename to packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBar.tsx
index 5474ff1cc6..7f438c9da8 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBar.tsx
+++ b/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBar.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 
 import { NavigationBarItem } from './NavigationBarItem';
 
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBarItem.tsx b/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBarItem.tsx
similarity index 93%
rename from packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBarItem.tsx
rename to packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBarItem.tsx
index e7259d9053..f8be843165 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBarItem.tsx
+++ b/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBarItem.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 
 const StyledIconButton = styled.div<{ isActive?: boolean }>`
   align-items: center;