diff --git a/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx
index d053d60126..86cb23461f 100644
--- a/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx
+++ b/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx
@@ -7,31 +7,36 @@ import { NAVIGATION_DRAWER_CONSTRAINTS } from '@/ui/layout/resizable-panel/const
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { MainNavigationDrawerItemsSkeletonLoader } from '~/loading/components/MainNavigationDrawerItemsSkeletonLoader';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 const StyledAnimatedContainer = styled(motion.div)`
-  align-items: center;
+  box-sizing: border-box;
   display: flex;
-  justify-content: end;
+  flex-direction: column;
+  flex-shrink: 0;
+  height: 100%;
+  overflow: hidden;
+  padding: ${themeCssVariables.spacing[3]} 0 ${themeCssVariables.spacing[4]}
+    ${themeCssVariables.spacing[2]};
 `;
 
 const StyledItemsContainer = styled.div`
-  align-items: center;
   display: flex;
   flex-direction: column;
   gap: 14px;
-  height: calc(100dvh - 32px);
-  margin-bottom: auto;
-  max-width: 204px;
-  min-width: 204px;
+  min-height: 0;
   overflow-y: auto;
+  width: 100%;
 `;
 
 const StyledSkeletonContainer = styled.div`
-  align-items: center;
   display: flex;
   flex-direction: column;
   gap: 32px;
+  width: 100%;
 `;
 
 const StyledSkeletonTitleContainer = styled.div`
@@ -41,9 +46,7 @@ const StyledSkeletonTitleContainer = styled.div`
   gap: 10px;
   height: 32px;
   justify-content: center;
-
-  max-width: 196px;
-  min-width: 196px;
+  width: 100%;
 `;
 
 export const LeftPanelSkeletonLoader = () => {
diff --git a/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx
index cba6940543..5de54b5ffb 100644
--- a/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx
+++ b/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx
@@ -1,4 +1,5 @@
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
+import { css } from '@linaria/core';
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
@@ -6,12 +7,15 @@ import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledSkeletonContainer = styled.div`
   align-items: flex-start;
-
   display: flex;
   flex-direction: column;
   gap: 6px;
-  max-width: 196px;
-  min-width: 196px;
+  width: 100%;
+`;
+
+const fillSkeletonContainer = css`
+  display: block;
+  width: 100%;
 `;
 
 export const MainNavigationDrawerItemsSkeletonLoader = ({
@@ -38,7 +42,7 @@ export const MainNavigationDrawerItemsSkeletonLoader = ({
         {Array.from({ length }).map((_, index) => (
           <Skeleton
             key={index}
-            width={196}
+            containerClassName={fillSkeletonContainer}
             height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
           />
         ))}
diff --git a/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx b/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx
index cb1b0fff3a..3a9b17c43b 100644
--- a/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx
+++ b/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx
@@ -28,7 +28,6 @@ const StyledContainer = styled.div`
 
 const StyledLeftPanelWrapper = styled.div`
   flex-shrink: 0;
-  padding: 12px 0 12px 8px;
 `;
 
 export const UserOrMetadataLoader = () => {
diff --git a/packages/twenty-front/src/modules/navigation-menu-item/display/components/NavigationMenuItemSkeletonLoader.tsx b/packages/twenty-front/src/modules/navigation-menu-item/display/components/NavigationMenuItemSkeletonLoader.tsx
index 794c708353..e1a354f55b 100644
--- a/packages/twenty-front/src/modules/navigation-menu-item/display/components/NavigationMenuItemSkeletonLoader.tsx
+++ b/packages/twenty-front/src/modules/navigation-menu-item/display/components/NavigationMenuItemSkeletonLoader.tsx
@@ -1,4 +1,5 @@
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
+import { css } from '@linaria/core';
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
@@ -19,6 +20,12 @@ const StyledSkeletonColumn = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${themeCssVariables.spacing[1]};
+  width: 100%;
+`;
+
+const fillSkeletonContainer = css`
+  display: block;
+  width: 100%;
 `;
 
 export const NavigationMenuItemSkeletonLoader = () => {
@@ -36,11 +43,11 @@ export const NavigationMenuItemSkeletonLoader = () => {
         />
         <StyledSkeletonColumn>
           <Skeleton
-            width={196}
+            containerClassName={fillSkeletonContainer}
             height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
           />
           <Skeleton
-            width={196}
+            containerClassName={fillSkeletonContainer}
             height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
           />
         </StyledSkeletonColumn>
diff --git a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader.tsx b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader.tsx
index 78134ff004..36e86957ad 100644
--- a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader.tsx
+++ b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader.tsx
@@ -1,4 +1,5 @@
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
+import { css } from '@linaria/core';
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
@@ -8,11 +9,18 @@ import {
 } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledSkeletonColumn = styled.div`
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: ${themeCssVariables.spacing[1]};
   height: 76px;
   padding-left: ${themeCssVariables.spacing[1]};
+  width: 100%;
+`;
+
+const fillSkeletonContainer = css`
+  display: block;
+  width: 100%;
 `;
 
 export const NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader: React.FC =
@@ -26,15 +34,15 @@ export const NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader: React.
       >
         <StyledSkeletonColumn>
           <Skeleton
-            width={196}
+            containerClassName={fillSkeletonContainer}
             height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
           />
           <Skeleton
-            width={196}
+            containerClassName={fillSkeletonContainer}
             height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
           />
           <Skeleton
-            width={196}
+            containerClassName={fillSkeletonContainer}
             height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
           />
         </StyledSkeletonColumn>
diff --git a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerWorkspaceSectionSkeletonLoader.tsx b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerWorkspaceSectionSkeletonLoader.tsx
index adb7d308c8..f08ce9b051 100644
--- a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerWorkspaceSectionSkeletonLoader.tsx
+++ b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerWorkspaceSectionSkeletonLoader.tsx
@@ -1,5 +1,6 @@
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
 import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
+import { css } from '@linaria/core';
 import { styled } from '@linaria/react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
@@ -13,10 +14,17 @@ const StyledTitleSkeleton = styled.div`
 `;
 
 const StyledRowsContainer = styled.div`
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: ${themeCssVariables.spacing[1]};
   padding-left: ${themeCssVariables.spacing[1]};
+  width: 100%;
+`;
+
+const fillSkeletonContainer = css`
+  display: block;
+  width: 100%;
 `;
 
 export const NavigationDrawerWorkspaceSectionSkeletonLoader = () => {
@@ -35,15 +43,15 @@ export const NavigationDrawerWorkspaceSectionSkeletonLoader = () => {
         </StyledTitleSkeleton>
         <StyledRowsContainer>
           <Skeleton
-            width={196}
+            containerClassName={fillSkeletonContainer}
             height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
           />
           <Skeleton
-            width={196}
+            containerClassName={fillSkeletonContainer}
             height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
           />
           <Skeleton
-            width={196}
+            containerClassName={fillSkeletonContainer}
             height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
           />
         </StyledRowsContainer>