diff --git a/apps/OpenSign/src/components/sidebar/Sidebar.js b/apps/OpenSign/src/components/sidebar/Sidebar.js
index 85ac268ec..1ee1efc0c 100644
--- a/apps/OpenSign/src/components/sidebar/Sidebar.js
+++ b/apps/OpenSign/src/components/sidebar/Sidebar.js
@@ -42,9 +42,8 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
 
   return (
     <aside
-      className={`${isOpen ? "block" : "hidden"
-        } bg-white text-[#444] h-screen w-full md:w-[300px] overflow-y-auto transform transition-transform z-40 ${isOpen ? "translate-x-0" : "-translate-x-full"
-        }`}
+      className={`bg-white text-[#444] h-screen w-full md:w-[300px] overflow-y-auto transform transition-transform z-40 md:translate-x-0
+      ${isOpen ? "translate-x-0 block" : "-translate-x-full hidden"}`}
     >
       <div className="flex px-2 py-3 gap-2 items-center shadow-md">
         <div className="w-[75px] h-[75px] rounded-full ring-[2px] ring-offset-2 ring-gray-400 overflow-hidden">
diff --git a/apps/OpenSign/src/layout/HomeLayout.js b/apps/OpenSign/src/layout/HomeLayout.js
index f2df02822..5583df9c5 100644
--- a/apps/OpenSign/src/layout/HomeLayout.js
+++ b/apps/OpenSign/src/layout/HomeLayout.js
@@ -9,7 +9,7 @@ import { useSelector } from "react-redux";
 import Parse from "parse";
 const HomeLayout = ({ children }) => {
   const { width } = useWindowSize();
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(true);
   const arr = useSelector((state) => state.TourSteps);
 
   // reactour state
@@ -19,13 +19,11 @@ const HomeLayout = ({ children }) => {
   const [tourConfigs, setTourConfigs] = useState([]);
 
   const showSidebar = () => {
-    setIsOpen(!isOpen);
+    setIsOpen(value => !value);
   };
   useEffect(() => {
     if (width && width <= 768) {
       setIsOpen(false);
-    } else {
-      setIsOpen(true);
     }
   }, [width]);