diff --git a/web/app/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
index aabe3637f..d0120eebf 100644
--- a/web/app/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
@@ -59,8 +59,8 @@ const UseProfileLayout: React.FC<Props> = observer((props) => {
     <>
       {/* Passing the type prop from the current route value as we need the header as top most component.
       TODO: We are depending on the route path to handle the mobile header type. If the path changes, this logic will break. */}
-      <div className="h-full w-full md:flex md:overflow-hidden">
-        <div className="h-full w-full md:overflow-hidden">
+      <div className="h-full w-full flex flex-col md:flex-row overflow-hidden">
+        <div className="h-full w-full flex flex-col overflow-hidden">
           <AppHeader
             header={
               <UserProfileHeader
diff --git a/web/core/components/profile/sidebar.tsx b/web/core/components/profile/sidebar.tsx
index 3d533601a..4df6ac5ef 100644
--- a/web/core/components/profile/sidebar.tsx
+++ b/web/core/components/profile/sidebar.tsx
@@ -82,7 +82,7 @@ export const ProfileSidebar: FC<TProfileSidebar> = observer((props) => {
   return (
     <div
       className={cn(
-        `vertical-scrollbar scrollbar-md fixed z-[5] h-full w-full flex-shrink-0 overflow-hidden overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 shadow-custom-shadow-sm transition-all md:relative md:w-[300px]`,
+        `vertical-scrollbar scrollbar-md fixed z-[5] h-full w-full flex-shrink-0 overflow-hidden overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 transition-all md:relative md:w-[300px]`,
         className
       )}
       style={profileSidebarCollapsed ? { marginLeft: `${window?.innerWidth || 0}px` } : {}}