diff --git a/apps/nextjs-app/src/features/app/components/sidebar/Sidebar.tsx b/apps/nextjs-app/src/features/app/components/sidebar/Sidebar.tsx
index 105012a37..df1f9b61e 100644
--- a/apps/nextjs-app/src/features/app/components/sidebar/Sidebar.tsx
+++ b/apps/nextjs-app/src/features/app/components/sidebar/Sidebar.tsx
@@ -26,19 +26,17 @@ export const Sidebar: FC<PropsWithChildren<ISidebarProps>> = (props) => {
     <>
       {isMobile ? (
         <SheetWrapper>
-          <div className="flex size-full flex-col overflow-hidden bg-popover">
+          <div className="flex size-full flex-col overflow-hidden bg-popover p-5">
             <SidebarHeader headerLeft={headerLeft} />
             {children}
           </div>
         </SheetWrapper>
       ) : (
         <div
-          className={cn('transition-all flex w-0 border-r will-change-auto flex-shrink-0 h-full', {
+          className={cn('flex w-0 border-r flex-shrink-0 h-full', {
             'overflow-hidden': !leftVisible,
+            'w-72': leftVisible,
           })}
-          style={{
-            width: leftVisible ? `${SIDE_BAR_WIDTH}px` : '',
-          }}
         >
           <div className="flex size-full flex-col overflow-hidden bg-popover">
             <SidebarHeader headerLeft={headerLeft} onExpand={() => setLeftVisible(!leftVisible)} />
diff --git a/apps/nextjs-app/src/features/app/components/sidebar/SidebarHeader.tsx b/apps/nextjs-app/src/features/app/components/sidebar/SidebarHeader.tsx
index 2cbdaf0ed..0d82e78da 100644
--- a/apps/nextjs-app/src/features/app/components/sidebar/SidebarHeader.tsx
+++ b/apps/nextjs-app/src/features/app/components/sidebar/SidebarHeader.tsx
@@ -11,7 +11,7 @@ export const SidebarHeader = (prop: ISidebarHeaderProps) => {
   const { headerLeft, onExpand } = prop;
 
   return (
-    <div className="m-2 flex items-center gap-1">
+    <div className="m-2 flex h-7 items-center gap-1">
       {headerLeft}
       <div className="grow basis-0" />
       {onExpand && (