diff --git a/frontend/app/layout/Layout.tsx b/frontend/app/layout/Layout.tsx
index 49a96df2c..f2e753f9a 100644
--- a/frontend/app/layout/Layout.tsx
+++ b/frontend/app/layout/Layout.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Layout as AntLayout } from 'antd';
 import SideMenu from 'App/layout/SideMenu';
 import TopHeader from 'App/layout/TopHeader';
@@ -16,8 +16,27 @@ function Layout(props: Props) {
   const { hideHeader } = props;
   const isPlayer = /\/(session|assist|view-spot)\//.test(window.location.pathname);
   const { settingsStore, projectsStore } = useStore();
+  const [collapsed, setCollapsed] = React.useState(false);
   const siteId = projectsStore.siteId;
 
+  useEffect(() => {
+    const handleResize = () => {
+      const isMobile = window.innerWidth < 1200;
+      if (isMobile) {
+        setCollapsed(true);
+      } else {
+        setCollapsed(false);
+      }
+    };
+
+    handleResize(); // Initial check
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
   return (
     <AntLayout style={{ minHeight: '100vh' }}>
       {!hideHeader && (
@@ -33,10 +52,10 @@ function Layout(props: Props) {
               height: 'calc(100vh - 70px)', // Adjust the height to accommodate the Header
               overflow: 'auto' // Enable scrolling for the Sider content if needed
             }}
-            collapsed={settingsStore.menuCollapsed}
+            collapsed={settingsStore.menuCollapsed || collapsed}
             width={250}
           >
-            <SideMenu siteId={siteId!} isCollapsed={settingsStore.menuCollapsed} />
+            <SideMenu siteId={siteId!} />
           </Sider>
         ) : null}
         <Content style={{ padding: isPlayer ? '0' : '20px', minHeight: 'calc(100vh - 60px)' }}>