diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
index 0ca13d6527..efa3dc6b3d 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
@@ -141,10 +141,8 @@ export const PageLayoutComp = withMethodExposing(PageLayoutCompTmP, [
       params: [{ name: "collapsed", type: "boolean" }],
     },
     execute: (comp, values) => {
-      const page = values[0] as number;
-      if (page && page > 0) {
-        // comp.children.pagination.children.pageNo.dispatchChangeValueAction(page);
-      }
+      const collapsed = !!values[0]; // Ensure boolean value
+      comp.children.container.children.siderCollapsed.dispatchChangeValueAction(collapsed);
     },
   }
 ]);
diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx
index bfece6cf21..13ed39aefc 100644
--- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx
@@ -103,10 +103,12 @@ const BodyInnerGrid = styled(InnerGrid)<{
   $bodyBackgroundImageSize: string;
   $bodyBackgroundImagePosition: string;
   $bodyBackgroundImageOrigin: string;
+  $bodyPadding: string;
 }>`
   border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`};
   flex: 1;
   border-radius: 0;
+  padding: ${(props) => props.$bodyPadding || "0px"} !important;
 
   ${props => getBackgroundStyle({
     background: props.$backgroundColor,
@@ -169,9 +171,18 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
   const isMobile = checkIsMobile(maxWidth);
   const appRef = useRef();
 
+  // Handle mobile responsiveness for sider collapse
+  useEffect(() => {
+    // Force collapse on mobile if sider is shown
+    if (isMobile && showSider) {
+      props.setSiderCollapsed(true);
+    }
+  }, [isMobile, showSider, props.setSiderCollapsed]);
+
   function onSiderCollapse (collapsed : boolean) {
     props.setSiderCollapsed(collapsed);
-    // how to set the collapsed state in the container when the user manually collapses the sider?
+    // We already updated the state through props.setSiderCollapsed
+    // The parent component will update the value via useEffect
   }
 
   useEffect(() => {setSiderCollapsed(container.siderCollapsed)} , [container.siderCollapsed]);
@@ -196,7 +207,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
               <Sider 
                 width={container.siderWidth}
                 style={{ padding: "0px", margin: '0px', backgroundColor: siderStyle?.siderBackground || 'transparent' }} 
-                collapsible={container.siderCollapsible} 
+                collapsible={container.siderCollapsible && !isMobile} 
                 breakpoint="sm"
                 collapsedWidth={container.siderCollapsedWidth}
                 collapsed={siderCollapsed} onCollapse={(value) => onSiderCollapse(value)}
@@ -255,7 +266,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
                         <Sider 
                           width={container.siderWidth} 
                           style={{ padding: "0px", margin: '0px', marginTop: style.borderWidth, backgroundColor: siderStyle?.siderBackground || 'transparent' }} 
-                          collapsible={container.siderCollapsible} 
+                          collapsible={container.siderCollapsible && !isMobile} 
                           breakpoint="sm"
                           collapsedWidth={container.siderCollapsedWidth}
                           collapsed={siderCollapsed} onCollapse={(value) => setSiderCollapsed(value)}
@@ -312,7 +323,8 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
                               $bodyBackgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
                               $borderColor={style?.border}
                               $borderWidth={style?.borderWidth}
-                              style={{ padding: bodyStyle.containerBodyPadding }} />
+                              $bodyPadding={bodyStyle.containerBodyPadding}
+                              style={{ padding: "0px" }} />
                           )}
                         </ScrollBar>
                       </Content>
@@ -321,7 +333,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
                           <Sider 
                             width={container.siderWidth}
                             style={{ padding: "0px", margin: '0px', backgroundColor: siderStyle?.siderBackground || 'transparent' }} 
-                            collapsible={container.siderCollapsible}
+                            collapsible={container.siderCollapsible && !isMobile}
                             breakpoint="sm"
                             collapsedWidth={container.siderCollapsedWidth}
                             reverseArrow={true}
@@ -381,7 +393,8 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
                           $bodyBackgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
                           $borderColor={style?.border}
                           $borderWidth={style?.borderWidth}
-                          style={{ padding: bodyStyle.containerBodyPadding }} />
+                          $bodyPadding={bodyStyle.containerBodyPadding}
+                          style={{ padding: "0px" }} />
                         )}
                       </ScrollBar>
                     </Content>
@@ -416,7 +429,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
                 <Sider 
                   width={container.siderWidth}
                   style={{ padding: "0px", margin: '0px', backgroundColor: siderStyle?.siderBackground || 'transparent'}} 
-                  collapsible={container.siderCollapsible}
+                  collapsible={container.siderCollapsible && !isMobile}
                   breakpoint="sm"
                   collapsedWidth={container.siderCollapsedWidth}
                   reverseArrow={true}

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1688.diff" target="_blank">Alternative Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1688.diff" target="_blank">pFad Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1688.diff" target="_blank">pFad v3 Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1688.diff" target="_blank">pFad v4 Proxy</a></p></body>
</html>