diff --git a/front/src/modules/ui/layout/page/DefaultLayout.tsx b/front/src/modules/ui/layout/page/DefaultLayout.tsx
index eb1511174..ba512eeaf 100644
--- a/front/src/modules/ui/layout/page/DefaultLayout.tsx
+++ b/front/src/modules/ui/layout/page/DefaultLayout.tsx
@@ -39,16 +39,11 @@ const StyledLayout = styled.div`
   }
 `;
 
-const NAVBAR_WIDTH = '236px';
-
 const StyledMainContainer = styled.div`
   display: flex;
+  flex: 1;
   flex-direction: row;
   overflow: hidden;
-  width: ${() =>
-    useRecoilValue(isNavbarOpenedState)
-      ? `calc(100% - ${NAVBAR_WIDTH})`
-      : '100%'};
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     width: ${() => (useRecoilValue(isNavbarOpenedState) ? '0' : '100%')};
   }
diff --git a/front/src/modules/ui/navigation/navbar/components/NavCollapseButton.tsx b/front/src/modules/ui/navigation/navbar/components/NavCollapseButton.tsx
index 004aac43c..e7f93407f 100644
--- a/front/src/modules/ui/navigation/navbar/components/NavCollapseButton.tsx
+++ b/front/src/modules/ui/navigation/navbar/components/NavCollapseButton.tsx
@@ -50,7 +50,7 @@ const NavCollapseButton = ({
   return (
     <>
       <StyledCollapseButton
-        initial={{ opacity: show ? 1 : 0 }}
+        initial={false}
         animate={{
           opacity: show ? 1 : 0,
         }}
diff --git a/front/src/modules/ui/navigation/navbar/components/NavbarAnimatedContainer.tsx b/front/src/modules/ui/navigation/navbar/components/NavbarAnimatedContainer.tsx
index 6d7f9cd7a..72324aa20 100644
--- a/front/src/modules/ui/navigation/navbar/components/NavbarAnimatedContainer.tsx
+++ b/front/src/modules/ui/navigation/navbar/components/NavbarAnimatedContainer.tsx
@@ -48,7 +48,7 @@ export const NavbarAnimatedContainer = ({
       onAnimationComplete={() => {
         setIsNavbarSwitchingSize(false);
       }}
-      initial={{ width: isNavbarOpened ? leftBarWidth : '0' }}
+      initial={false}
       animate={{
         width: isNavbarOpened ? leftBarWidth : '0',
         opacity: isNavbarOpened ? 1 : 0,