diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 683c450ab8..a5a02c7079 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -72,10 +72,12 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           crossOrigin="use-credentials"
         />
       </head>
-      <body>
-        <div id="context-menu-portal" />
+      <body className={`h-screen w-screen`}>
         <AppProvider>
-          <div className={`h-screen w-full overflow-hidden bg-custom-background-100`}>{children}</div>
+          <div className={`app-container h-full w-full flex flex-col overflow-hidden`}>
+            <div id="context-menu-portal" />
+            <div className="h-full w-full overflow-hidden bg-custom-background-100">{children}</div>
+          </div>
         </AppProvider>
       </body>
       {process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN && (
diff --git a/web/app/profile/layout.tsx b/web/app/profile/layout.tsx
index 1f1b1dff47..21bc6566d8 100644
--- a/web/app/profile/layout.tsx
+++ b/web/app/profile/layout.tsx
@@ -19,7 +19,7 @@ export default function ProfileSettingsLayout(props: Props) {
     <>
       <CommandPalette />
       <AuthenticationWrapper>
-        <div className="relative flex h-screen w-full overflow-hidden">
+        <div className="relative flex h-full w-full overflow-hidden">
           <ProfileLayoutSidebar />
           <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
             <div className="h-full w-full overflow-hidden">{children}</div>
diff --git a/web/app/profile/sidebar.tsx b/web/app/profile/sidebar.tsx
index 751dee61d2..c638d52fff 100644
--- a/web/app/profile/sidebar.tsx
+++ b/web/app/profile/sidebar.tsx
@@ -12,6 +12,8 @@ import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
 import { SidebarNavItem } from "@/components/sidebar";
 // constants
 import { PROFILE_ACTION_LINKS } from "@/constants/profile";
+// helpers
+import { cn } from "@/helpers/common.helper";
 // hooks
 import { useAppTheme, useUser, useUserSettings, useWorkspace } from "@/hooks/store";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
@@ -117,11 +119,11 @@ export const ProfileLayoutSidebar = observer(() => {
             )}
           </div>
         </Link>
-        <div className="flex flex-shrink-0 flex-col overflow-x-hidden px-4">
+        <div className="flex flex-shrink-0 flex-col overflow-x-hidden">
           {!sidebarCollapsed && (
-            <h6 className="rounded px-1.5 text-sm font-semibold text-custom-sidebar-text-400">Your account</h6>
+            <h6 className="rounded px-6 text-sm font-semibold text-custom-sidebar-text-400">Your account</h6>
           )}
-          <div className="vertical-scrollbar scrollbar-sm mt-2 h-full space-y-1 overflow-y-auto">
+          <div className="vertical-scrollbar scrollbar-sm mt-2 px-4 h-full space-y-1 overflow-y-auto">
             {PROFILE_ACTION_LINKS.map((link) => {
               if (link.key === "change-password" && currentUser?.is_password_autoset) return null;
 
@@ -150,12 +152,17 @@ export const ProfileLayoutSidebar = observer(() => {
             })}
           </div>
         </div>
-        <div className="flex flex-col overflow-x-hidden px-4">
+        <div className="flex flex-col overflow-x-hidden">
           {!sidebarCollapsed && (
-            <h6 className="rounded px-1.5 text-sm font-semibold text-custom-sidebar-text-400">Workspaces</h6>
+            <h6 className="rounded px-6 text-sm font-semibold text-custom-sidebar-text-400">Workspaces</h6>
           )}
           {workspacesList && workspacesList.length > 0 && (
-            <div className="vertical-scrollbar scrollbar-sm mt-2 h-full space-y-1.5 overflow-y-auto">
+            <div
+              className={cn("vertical-scrollbar scrollbar-xs mt-2 px-4 h-full space-y-1.5 overflow-y-auto", {
+                "scrollbar-sm": !sidebarCollapsed,
+                "ml-2.5 px-1": sidebarCollapsed,
+              })}
+            >
               {workspacesList.map((workspace) => (
                 <Link
                   key={workspace.id}
@@ -193,7 +200,7 @@ export const ProfileLayoutSidebar = observer(() => {
               ))}
             </div>
           )}
-          <div className="mt-1.5">
+          <div className="mt-1.5 px-4">
             {WORKSPACE_ACTION_LINKS.map((link) => (
               <Link className="block w-full" key={link.key} href={link.href} onClick={handleItemClick}>
                 <Tooltip
diff --git a/web/styles/globals.css b/web/styles/globals.css
index 76f429a286..4344160452 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -359,6 +359,12 @@ body {
   color: rgba(var(--color-text-100));
 }
 
+.app-container {
+  contain: layout style size;
+  contain-intrinsic-size: 100%;
+  position: relative; /* Ensure it's the containing block */
+}
+
 /* scrollbar style */
 ::-webkit-scrollbar {
   display: none;
