diff --git a/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolder.tsx b/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolder.tsx
index 98ca33127a..e1b16be1a6 100644
--- a/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolder.tsx
+++ b/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolder.tsx
@@ -1,7 +1,7 @@
-import { Suspense, lazy } from 'react';
+import { Suspense, lazy, useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { IconChevronDown, IconChevronRight, useIcons } from 'twenty-ui/display';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { useIsMobile } from 'twenty-ui/utilities';
 import { type NavigationMenuItem } from '~/generated-metadata/graphql';
 
@@ -112,6 +112,7 @@ const NavigationMenuItemFolderReadOnlyContent = ({
 }: NavigationMenuItemFolderReadOnlyContentProps) => {
   const { getIcon } = useIcons();
   const isMobile = useIsMobile();
+  const { theme } = useContext(ThemeContext);
   const FolderIcon = getIcon(folderIconKey ?? FOLDER_ICON_DEFAULT);
 
   const { isOpen, handleToggle, selectedNavigationMenuItemIndex } =
@@ -137,14 +138,14 @@ const NavigationMenuItemFolderReadOnlyContent = ({
           rightOptions={
             isOpen ? (
               <IconChevronDown
-                size={themeCssVariables.icon.size.sm}
-                stroke={themeCssVariables.icon.stroke.sm}
+                size={theme.icon.size.sm}
+                stroke={theme.icon.stroke.sm}
                 color={themeCssVariables.font.color.tertiary}
               />
             ) : (
               <IconChevronRight
-                size={themeCssVariables.icon.size.sm}
-                stroke={themeCssVariables.icon.stroke.sm}
+                size={theme.icon.size.sm}
+                stroke={theme.icon.stroke.sm}
                 color={themeCssVariables.font.color.tertiary}
               />
             )
diff --git a/packages/twenty-front/src/modules/navigation-menu-item/display/link/components/LinkIconWithLinkOverlay.tsx b/packages/twenty-front/src/modules/navigation-menu-item/display/link/components/LinkIconWithLinkOverlay.tsx
index 6d764ce5a0..33d0a83228 100644
--- a/packages/twenty-front/src/modules/navigation-menu-item/display/link/components/LinkIconWithLinkOverlay.tsx
+++ b/packages/twenty-front/src/modules/navigation-menu-item/display/link/components/LinkIconWithLinkOverlay.tsx
@@ -1,8 +1,8 @@
 import { styled } from '@linaria/react';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import type { IconComponent } from 'twenty-ui/display';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_LINK } from '@/navigation-menu-item/common/constants/NavigationMenuItemDefaultColorLink';
 import { getLinkFaviconUrl } from '@/navigation-menu-item/display/link/utils/getLinkFaviconUrl';
@@ -75,6 +75,7 @@ export const LinkIconWithLinkOverlay = ({
   DefaultIcon,
   color: navItemColor,
 }: LinkIconWithLinkOverlayProps) => {
+  const { theme } = useContext(ThemeContext);
   const [localFailedLink, setLocalFailedLink] = useState<string | null>(null);
   const faviconUrl = getLinkFaviconUrl(link);
   const linkKey = link ?? '';
@@ -105,7 +106,7 @@ export const LinkIconWithLinkOverlay = ({
         ) : (
           <DefaultIcon
             size="14px"
-            stroke={themeCssVariables.icon.stroke.md}
+            stroke={theme.icon.stroke.md}
             color={linkStyle.iconColor}
           />
         )}
@@ -113,7 +114,7 @@ export const LinkIconWithLinkOverlay = ({
       <StyledLinkOverlay $backgroundColor={themeCssVariables.grayScale.gray4}>
         <LinkIcon
           size="14px"
-          stroke={themeCssVariables.icon.stroke.md}
+          stroke={theme.icon.stroke.md}
           color={themeCssVariables.grayScale.gray10}
         />
       </StyledLinkOverlay>
diff --git a/packages/twenty-front/src/modules/navigation-menu-item/display/link/components/NavigationMenuItemLinkDisplay.tsx b/packages/twenty-front/src/modules/navigation-menu-item/display/link/components/NavigationMenuItemLinkDisplay.tsx
index 97c5f60040..38cc4c0457 100644
--- a/packages/twenty-front/src/modules/navigation-menu-item/display/link/components/NavigationMenuItemLinkDisplay.tsx
+++ b/packages/twenty-front/src/modules/navigation-menu-item/display/link/components/NavigationMenuItemLinkDisplay.tsx
@@ -1,5 +1,6 @@
+import { useContext } from 'react';
 import { IconArrowUpRight } from 'twenty-ui/display';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState';
 import { NavigationMenuItemIcon } from '@/navigation-menu-item/display/components/NavigationMenuItemIcon';
@@ -20,14 +21,15 @@ export const NavigationMenuItemLinkDisplay = ({
   const isLayoutCustomizationModeEnabled = useAtomStateValue(
     isLayoutCustomizationModeEnabledState,
   );
+  const { theme } = useContext(ThemeContext);
 
   const label = getLinkNavigationMenuItemLabel(item);
   const computedLink = getLinkNavigationMenuItemComputedLink(item);
 
   const defaultRightOptions = !isLayoutCustomizationModeEnabled && (
     <IconArrowUpRight
-      size={themeCssVariables.icon.size.sm}
-      stroke={themeCssVariables.icon.stroke.md}
+      size={theme.icon.size.sm}
+      stroke={theme.icon.stroke.md}
       color={themeCssVariables.font.color.light}
     />
   );