diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer.tsx
index 31366a5728..f3103e010f 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer.tsx
@@ -9,7 +9,25 @@ import {
   type TargetAndTransition,
 } from 'framer-motion';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
-const StyledAnimationGroupContainerBase = styled.div``;
+
+const COLLAPSED_GROUP_WIDTH = 24;
+
+const StyledAnimationGroupContainerBase = styled.div<{
+  isCollapsedGroup: boolean;
+}>`
+  background-color: ${({ isCollapsedGroup }) =>
+    isCollapsedGroup
+      ? themeCssVariables.background.transparent.lighter
+      : 'transparent'};
+  border: ${({ isCollapsedGroup }) =>
+    isCollapsedGroup
+      ? `1px solid ${themeCssVariables.background.transparent.lighter}`
+      : 'none'};
+  border-radius: ${({ isCollapsedGroup }) =>
+    isCollapsedGroup ? themeCssVariables.border.radius.md : '0'};
+  transition: background-color
+    calc(${themeCssVariables.animation.duration.normal} * 1s) ease;
+`;
 
 const StyledAnimationGroupContainer = motion.create(
   StyledAnimationGroupContainerBase,
@@ -30,25 +48,14 @@ export const NavigationDrawerItemsCollapsableContainer = ({
     isNavigationDrawerExpandedState,
   );
   const isExpanded = isNavigationDrawerExpanded || isSettingsPage;
-  let animate: AnimationControls | TargetAndTransition = {
-    width: 'auto',
-    backgroundColor: 'transparent',
-    border: 'none',
-  };
-  if (!isExpanded) {
-    animate = { width: 24 };
-    if (isGroup) {
-      animate = {
-        width: 24,
-        backgroundColor: theme.background.transparent.lighter,
-        border: `1px solid ${theme.background.transparent.lighter}`,
-        borderRadius: themeCssVariables.border.radius.md,
-      };
-    }
-  }
+
+  const animate: AnimationControls | TargetAndTransition = isExpanded
+    ? { width: 'auto' }
+    : { width: COLLAPSED_GROUP_WIDTH };
 
   return (
     <StyledAnimationGroupContainer
+      isCollapsedGroup={isGroup && !isExpanded}
       initial={false}
       animate={animate}
       transition={{