diff --git a/app/components/home.module.scss b/app/components/home.module.scss
index a21bbb82f..006ce50b9 100644
--- a/app/components/home.module.scss
+++ b/app/components/home.module.scss
@@ -48,6 +48,7 @@
   display: flex;
   flex-direction: column;
   box-shadow: inset -2px 0px 2px 0px rgb(0, 0, 0, 0.05);
+  transition: width ease 0.1s;
 }
 .sidebar {
   top: 0;
@@ -108,16 +109,26 @@
     border-radius: 0;
   }
 
+  @keyframes slideRight {
+    from {
+      left: -100%;
+    }
+    to {
+      left: 0%;
+    }
+  }
+
   .sidebar {
     position: absolute;
-    //left: -100%;
     z-index: 1000;
     height: var(--full-height);
-    transition: all ease 0.3s;
+    transition: all ease 0.1s;
     box-shadow: none;
+    animation: slideRight 0.1s forwards;
   }
   .sidebar-collapse {
-    display: none;
+    animation: slideRight 0.1s backwards;
+    //display: none;
   }
 
   .window-content-collapse {
diff --git a/app/components/home.tsx b/app/components/home.tsx
index 950419672..54dc61fb2 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -158,6 +158,38 @@ function _Home() {
 
   useSwitchTheme();
 
+  // the two useEffects are for enable animation of the sidebar collapse in mobile screen
+  const [width, setWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  const [sidebarStyle, setSidebarStyles] = useState({});
+  useEffect(() => {
+    if (sidebarCollapse && isMobileScreen()) {
+      setTimeout(() => {
+        setSidebarStyles({
+          display: "none",
+        });
+      }, 100);
+    } else {
+      setTimeout(() => {
+        setSidebarStyles({
+          display: "flex",
+        });
+      }, 100);
+    }
+  }, [sidebarCollapse, width]);
+
   if (loading) {
     return <Loading />;
   }
@@ -171,6 +203,7 @@ function _Home() {
       }`}
     >
       <div
+        style={{ ...sidebarStyle }}
         className={
           sidebarCollapse ? styles["sidebar-collapse"] : styles["sidebar"]
         }
@@ -248,21 +281,23 @@ function _Home() {
           <div className={styles["sidebar-tail"]}>
             <div className={styles["sidebar-actions"]}>
               <div className={styles["sidebar-action"]}>
-                {sidebarCollapse ? (
-                  <IconButton
-                    icon={<RightIcon />}
-                    onClick={() => {
-                      setSideBarCollapse(false);
-                    }}
-                  />
-                ) : (
-                  <IconButton
-                    icon={<LeftIcon />}
-                    onClick={() => {
-                      setSideBarCollapse(true);
-                    }}
-                  />
-                )}
+                {!isMobileScreen() ? (
+                  sidebarCollapse ? (
+                    <IconButton
+                      icon={<RightIcon />}
+                      onClick={() => {
+                        setSideBarCollapse(false);
+                      }}
+                    />
+                  ) : (
+                    <IconButton
+                      icon={<LeftIcon />}
+                      onClick={() => {
+                        setSideBarCollapse(true);
+                      }}
+                    />
+                  )
+                ) : null}
               </div>
               <div className={styles["sidebar-action"]}>
                 <IconButton