diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
index da9d151313bb..e42e647a034c 100644
--- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
+++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
@@ -19,6 +19,9 @@ import styled from '@emotion/styled';
 const StyledMainSection = styled(NavigationDrawerSection)`
   min-height: fit-content;
 `;
+const StyledInnerContainer = styled.div`
+  height: 100%;
+`;
 
 export const MainNavigationDrawerItems = () => {
   const isMobile = useIsMobile();
@@ -60,12 +63,14 @@ export const MainNavigationDrawerItems = () => {
         contextProviderName="navigationDrawer"
         componentInstanceId={`scroll-wrapper-navigation-drawer`}
         defaultEnableXScroll={false}
-        scrollHide={true}
+        scrollbarVariant="no-padding"
       >
-        <NavigationDrawerOpenedSection />
-        <CurrentWorkspaceMemberFavoritesFolders />
-        <WorkspaceFavorites />
-        <RemoteNavigationDrawerSection />
+        <StyledInnerContainer>
+          <NavigationDrawerOpenedSection />
+          <CurrentWorkspaceMemberFavoritesFolders />
+          <WorkspaceFavorites />
+          <RemoteNavigationDrawerSection />
+        </StyledInnerContainer>
       </ScrollWrapper>
     </>
   );
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
index 75c645db2245..6572b66cf662 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
@@ -10,6 +10,7 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
 
 import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
+import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
 import { isNavigationDrawerExpandedState } from '../../states/isNavigationDrawerExpanded';
 import { NavigationDrawerBackButton } from './NavigationDrawerBackButton';
 import { NavigationDrawerHeader } from './NavigationDrawerHeader';
@@ -43,7 +44,7 @@ const StyledContainer = styled.div<{
         ? theme.spacing(3, 8)
         : theme.spacing(3, 8, 4, 0)
       : theme.spacing(3, 2, 4)};
-
+  padding-right: 0px;
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     width: 100%;
     padding-left: 20px;
@@ -123,7 +124,7 @@ export const NavigationDrawer = ({
         <StyledItemsContainer isSettings={isSettingsDrawer}>
           {children}
         </StyledItemsContainer>
-        {footer}
+        <NavigationDrawerSection>{footer}</NavigationDrawerSection>
       </StyledContainer>
     </StyledAnimatedContainer>
   );
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
index d3916a1ba0c7..2e1bbb64df7d 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
@@ -89,8 +89,8 @@ const StyledItem = styled('button', {
 
   width: ${(props) =>
     !props.isNavigationDrawerExpanded
-      ? `calc(${NAV_DRAWER_WIDTHS.menu.desktop.collapsed}px - ${props.theme.spacing(6)})`
-      : `calc(100% - ${props.theme.spacing(2)})`};
+      ? `calc(${NAV_DRAWER_WIDTHS.menu.desktop.collapsed}px - ${props.theme.spacing(5.5)})`
+      : `calc(100% - ${props.theme.spacing(1.5)})`};
 
   ${({ isDragging }) =>
     isDragging &&
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx
index 9de5b7004fe7..4e3711716a6c 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { useIsMobile } from 'twenty-ui';
 
 const StyledSection = styled.div`
   display: flex;
@@ -9,4 +10,25 @@ const StyledSection = styled.div`
   flex-shrink: 1;
 `;
 
-export { StyledSection as NavigationDrawerSection };
+const StyledSectionInnerContainerMinusScrollPadding = styled.div<{
+  isMobile: boolean;
+}>`
+  width: calc(
+    100% - ${({ isMobile, theme }) => (isMobile ? 0 : theme.spacing(2))}
+  );
+`;
+
+export const NavigationDrawerSection = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const isMobile = useIsMobile();
+  return (
+    <StyledSection>
+      <StyledSectionInnerContainerMinusScrollPadding isMobile={isMobile}>
+        {children}
+      </StyledSectionInnerContainerMinusScrollPadding>
+    </StyledSection>
+  );
+};
diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx
index 597ea6fcd662..76cb05b95f13 100644
--- a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx
+++ b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx
@@ -13,17 +13,36 @@ import { scrollWrapperInstanceComponentState } from '@/ui/utilities/scroll/state
 import { scrollWrapperScrollLeftComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollLeftComponentState';
 import { scrollWrapperScrollTopComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollTopComponentState';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { css } from '@emotion/react';
 import 'overlayscrollbars/overlayscrollbars.css';
 
-const StyledScrollWrapper = styled.div<{ scrollHide?: boolean }>`
+const StyledScrollWrapper = styled.div<{
+  scrollbarVariant: 'with-padding' | 'no-padding';
+}>`
   display: flex;
   height: 100%;
   width: 100%;
-
+  .os-scrollbar {
+    transition:
+      opacity 300ms,
+      visibility 300ms,
+      top 300ms,
+      right 300ms,
+      bottom 300ms,
+      left 300ms;
+  }
   .os-scrollbar-handle {
-    background-color: ${({ theme, scrollHide }) =>
-      scrollHide ? 'transparent' : theme.border.color.medium};
+    background-color: ${({ theme }) => theme.border.color.strong};
   }
+
+  ${({ scrollbarVariant }) =>
+    scrollbarVariant === 'no-padding' &&
+    css`
+      .os-scrollbar {
+        --os-size: 6px;
+        padding: 0px;
+      }
+    `}
 `;
 
 const StyledInnerContainer = styled.div`
@@ -36,8 +55,8 @@ export type ScrollWrapperProps = {
   defaultEnableXScroll?: boolean;
   defaultEnableYScroll?: boolean;
   contextProviderName: ContextProviderName;
-  scrollHide?: boolean;
   componentInstanceId: string;
+  scrollbarVariant?: 'with-padding' | 'no-padding';
 };
 
 export const ScrollWrapper = ({
@@ -47,7 +66,7 @@ export const ScrollWrapper = ({
   defaultEnableXScroll = true,
   defaultEnableYScroll = true,
   contextProviderName,
-  scrollHide = false,
+  scrollbarVariant = 'with-padding',
 }: ScrollWrapperProps) => {
   const scrollableRef = useRef<HTMLDivElement>(null);
   const Context = getContextByProviderName(contextProviderName);
@@ -75,7 +94,7 @@ export const ScrollWrapper = ({
 
   const [initialize, instance] = useOverlayScrollbars({
     options: {
-      scrollbars: { autoHide: 'scroll' },
+      scrollbars: { autoHide: 'scroll', autoHideDelay: 500 },
       overflow: {
         x: defaultEnableXScroll ? undefined : 'hidden',
         y: defaultEnableYScroll ? undefined : 'hidden',
@@ -109,7 +128,7 @@ export const ScrollWrapper = ({
         <StyledScrollWrapper
           ref={scrollableRef}
           className={className}
-          scrollHide={scrollHide}
+          scrollbarVariant={scrollbarVariant}
         >
           <StyledInnerContainer>{children}</StyledInnerContainer>
         </StyledScrollWrapper>