app/src/components/layout/sidebarLeft/Assets.tsx

@@ -1,9 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Search from "../../ui/inputs/Search";
 import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset";
-import arch from "../../../assets/gltf-glb/arch.glb";
-import door from "../../../assets/gltf-glb/door.glb";
-import window from "../../../assets/gltf-glb/window.glb";
 import { fetchAssets } from "../../../services/marketplace/fetchAssets";
 import { useSelectedItem } from "../../../store/store";
 
@@ -16,8 +13,6 @@ import storage from "../../../assets/image/categories/storage.png";
 import office from "../../../assets/image/categories/office.png";
 import safety from "../../../assets/image/categories/safety.png";
 import feneration from "../../../assets/image/categories/feneration.png";
-import archThumbnail from "../../../assets/image/localAssets/arch.png";
-import windowThumbnail from "../../../assets/image/localAssets/window.png";
 import SkeletonUI from "../../templates/SkeletonUI";
 // -------------------------------------
 
@@ -90,24 +85,7 @@ const Assets: React.FC = () => {
 
   useEffect(() => {
     setCategoryList([
-      {
-        assetName: "Doors",
-        assetImage: "",
-        category: "Feneration",
-        categoryImage: feneration,
-      },
-      {
-        assetName: "Windows",
-        assetImage: "",
-        category: "Feneration",
-        categoryImage: feneration,
-      },
-      {
-        assetName: "Pillars",
-        assetImage: "",
-        category: "Feneration",
-        categoryImage: feneration,
-      },
+      { category: "Fenestration", categoryImage: feneration },
       { category: "Vehicles", categoryImage: vehicle },
       { category: "Workstation", categoryImage: workStation },
       { category: "Machines", categoryImage: machines },
@@ -121,44 +99,15 @@ const Assets: React.FC = () => {
   const fetchCategoryAssets = async (asset: any) => {
     setisLoading(true);
     setSelectedCategory(asset);
-    if (asset === "Feneration") {
-      const localAssets: AssetProp[] = [
-        {
-          filename: "arch",
-          category: "Feneration",
-          url: arch,
-          thumbnail: archThumbnail,
-          tags: "arch",
-        },
-        {
-          filename: "door",
-          category: "Feneration",
-          url: door,
-          thumbnail: feneration,
-          tags: "door",
-        },
-        {
-          filename: "window",
-          category: "Feneration",
-          url: window,
-          thumbnail: windowThumbnail,
-          tags: "window",
-        },
-      ];
-      setCategoryAssets(localAssets);
-      setFiltereredAssets(localAssets);
+    try {
+      const res = await getCategoryAsset(asset);
+      setCategoryAssets(res);
+      setFiltereredAssets(res);
+      setisLoading(false); // End loading
+      // eslint-disable-next-line
+    } catch (error) {
+      echo.error("failed to fetch assets");
       setisLoading(false);
-    } else {
-      try {
-        const res = await getCategoryAsset(asset);
-        setCategoryAssets(res);
-        setFiltereredAssets(res);
-        setisLoading(false); // End loading
-        // eslint-disable-next-line
-      } catch (error) {
-        echo.error("failed to fetch assets");
-        setisLoading(false);
-      }
     }
   };
 
@@ -167,64 +116,21 @@ const Assets: React.FC = () => {
       <Search onChange={handleSearchChange} />
       <div className="assets-list-section">
         <section>
-          {isLoading ? (
-            <SkeletonUI type="asset" /> // Show skeleton when loading
-          ) : searchValue ? (
-            <div className="assets-result">
-              <div className="assets-wrapper">
-                <div className="searched-content">
-                  <p>Results for {searchValue}</p>
-                </div>
-                <div className="assets-container">
-                  {categoryAssets?.map((asset: any, index: number) => (
-                    <div
-                      key={index}
-                      className="assets"
-                      id={asset.filename}
-                      title={asset.filename}
-                    >
-                      <img
-                        src={asset?.thumbnail}
-                        alt={asset.filename}
-                        className="asset-image"
-                      />
-
-                      <div className="asset-name">
-                        {asset.filename
-                          .split("_")
-                          .map(
-                            (word: any) =>
-                              word.charAt(0).toUpperCase() + word.slice(1)
-                          )
-                          .join(" ")}
-                      </div>
+          {(() => {
+            if (isLoading) {
+              return <SkeletonUI type="asset" />; // Show skeleton when loading
+            }
+            if (searchValue) {
+              return (
+                <div className="assets-result">
+                  <div className="assets-wrapper">
+                    <div className="searched-content">
+                      <p>Results for {searchValue}</p>
                     </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-          ) : (
-            <>
-              {selectedCategory ? (
-                <div className="assets-wrapper">
-                  <h2>
-                    {selectedCategory}{" "}
-                    <div
-                      className="back-button"
-                      id="asset-backButtom"
-                      onClick={() => {
-                        setSelectedCategory(null);
-                        setCategoryAssets([]);
-                      }}
-                    >
-                      ← Back
-                    </div>
-                  </h2>
-                  <div className="assets-container">
-                    {categoryAssets &&
-                      categoryAssets?.map((asset: any, index: number) => (
+                    <div className="assets-container">
+                      {categoryAssets?.map((asset: any, index: number) => (
                         <div
-                          key={index}
+                          key={`${index}-${asset.filename}`}
                           className="assets"
                           id={asset.filename}
                           title={asset.filename}
@@ -246,6 +152,7 @@ const Assets: React.FC = () => {
                               }
                             }}
                           />
+
                           <div className="asset-name">
                             {asset.filename
                               .split("_")
@@ -257,40 +164,104 @@ const Assets: React.FC = () => {
                           </div>
                         </div>
                       ))}
+                    </div>
                   </div>
                 </div>
-              ) : (
+              );
+            }
+
+            if (selectedCategory) {
+              return (
                 <div className="assets-wrapper">
-                  <h2>Categories</h2>
-                  <div className="categories-container">
-                    {Array.from(
-                      new Set(categoryList.map((asset) => asset.category))
-                    ).map((category, index) => {
-                      const categoryInfo = categoryList.find(
-                        (asset) => asset.category === category
-                      );
-                      return (
-                        <div
-                          key={index}
-                          className="category"
-                          id={category}
-                          onClick={() => fetchCategoryAssets(category)}
-                        >
-                          <img
-                            src={categoryInfo?.categoryImage || ""}
-                            alt={category}
-                            className="category-image"
-                            draggable={false}
-                          />
-                          <div className="category-name">{category}</div>
+                  <h2>
+                    {selectedCategory}
+                    <button
+                      className="back-button"
+                      id="asset-backButtom"
+                      onClick={() => {
+                        setSelectedCategory(null);
+                        setCategoryAssets([]);
+                      }}
+                    >
+                      ← Back
+                    </button>
+                  </h2>
+                  <div className="assets-container">
+                    {categoryAssets?.map((asset: any, index: number) => (
+                      <div
+                        key={`${index}-${asset}`}
+                        className="assets"
+                        id={asset.filename}
+                        title={asset.filename}
+                      >
+                        <img
+                          src={asset?.thumbnail}
+                          alt={asset.filename}
+                          className="asset-image"
+                          onPointerDown={() => {
+                            setSelectedItem({
+                              name: asset.filename,
+                              id: asset.AssetID,
+                              type:
+                                asset.type === "undefined"
+                                  ? undefined
+                                  : asset.type,
+                            });
+                          }}
+                        />
+                        <div className="asset-name">
+                          {asset.filename
+                            .split("_")
+                            .map(
+                              (word: any) =>
+                                word.charAt(0).toUpperCase() + word.slice(1)
+                            )
+                            .join(" ")}
                         </div>
-                      );
-                    })}
+                      </div>
+                    ))}
+                    {categoryAssets.length === 0 && (
+                      <div className="no-asset">
+                        🚧 The asset shelf is empty. We're working on filling it
+                        up!
+                      </div>
+                    )}
                   </div>
                 </div>
-              )}
-            </>
-          )}
+              );
+            }
+
+            return (
+              <div className="assets-wrapper">
+                <h2>Categories</h2>
+                <div className="categories-container">
+                  {Array.from(
+                    new Set(categoryList.map((asset) => asset.category))
+                  ).map((category, index) => {
+                    const categoryInfo = categoryList.find(
+                      (asset) => asset.category === category
+                    );
+                    return (
+                      <button
+                        key={`${index}-${category}`}
+                        className="category"
+                        id={category}
+                        onClick={() => fetchCategoryAssets(category)}
+                      >
+                        <img
+                          src={categoryInfo?.categoryImage ?? ""}
+                          alt={category}
+                          className="category-image"
+                          draggable={false}
+                        />
+                        <div className="category-name">{category}</div>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })()}
         </section>
       </div>
     </div>

app/src/components/layout/sidebarLeft/Header.tsx

@@ -6,7 +6,7 @@ import useToggleStore from "../../../store/useUIToggleStore";
 import useModuleStore from "../../../store/useModuleStore";
 
 const Header: React.FC = () => {
-  const { toggleUI, setToggleUI } = useToggleStore();
+  const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
   const { activeModule } = useModuleStore();
 
   return (
@@ -20,15 +20,17 @@ const Header: React.FC = () => {
         </div>
       </div>
       <button
-        className={`toggle-sidebar-ui-button ${!toggleUI ? "active" : ""}`}
+        className={`toggle-sidebar-ui-button ${!toggleUILeft ? "active" : ""}`}
         onClick={() => {
           if (activeModule !== "market") {
-            setToggleUI(!toggleUI);
-            localStorage.setItem("navBarUi", JSON.stringify(!toggleUI));
+            setToggleUI(!toggleUILeft, toggleUIRight);
+            localStorage.setItem("navBarUiLeft", JSON.stringify(!toggleUILeft));
           }
         }}
       >
-        <div className="tooltip">{toggleUI ? "Hide" : "Show"} sidebar (ctrl + \)</div>
+        <div className="tooltip">
+          {toggleUILeft ? "Hide" : "Show"} sidebar (ctrl + [)
+        </div>
         <ToggleSidebarIcon />
       </button>
     </div>

app/src/components/layout/sidebarLeft/SideBarLeft.tsx

@@ -12,7 +12,7 @@ import Search from "../../ui/inputs/Search";
 const SideBarLeft: React.FC = () => {
   const [activeOption, setActiveOption] = useState("Widgets");
 
-  const { toggleUI } = useToggleStore();
+  const { toggleUILeft } = useToggleStore();
   const { activeModule } = useModuleStore();
 
   // Reset activeOption whenever activeModule changes
@@ -31,47 +31,55 @@ const SideBarLeft: React.FC = () => {
   };
 
   return (
-    <div className={`sidebar-left-wrapper ${toggleUI ? "open" : "closed"}`}>
+    <div className={`sidebar-left-wrapper ${toggleUILeft ? "open" : "closed"}`}>
       <Header />
-      {toggleUI && (
+      {toggleUILeft && (
         <div className={`sidebar-left-container `}>
-          {activeModule === "visualization" ? (
-            <>
-              <ToggleHeader
-                options={["Widgets", "Templates"]}
-                activeOption={activeOption}
-                handleClick={handleToggleClick}
-              />
-              <Search onChange={handleSearchChange} />
-              <div className="sidebar-left-content-container">
-                {activeOption === "Widgets" ? <Widgets /> : <Templates />}
-              </div>
-            </>
-          ) : activeModule === "market" ? (
-            <></>
-          ) : activeModule === "builder" ? (
-            <>
-              <ToggleHeader
-                options={["Outline", "Assets"]}
-                activeOption={activeOption}
-                handleClick={handleToggleClick}
-              />
-              <div className="sidebar-left-content-container">
-                {activeOption === "Outline" ? <Outline /> : <Assets />}
-              </div>
-            </>
-          ) : (
-            <>
-              <ToggleHeader
-                options={["Outline"]}
-                activeOption={activeOption}
-                handleClick={handleToggleClick}
-              />
-              <div className="sidebar-left-content-container">
-                {activeOption === "Outline" ? <Outline /> : <Assets />}
-              </div>
-            </>
-          )}
+          {(() => {
+            if (activeModule === "visualization") {
+              return (
+                <>
+                  <ToggleHeader
+                    options={["Widgets", "Templates"]}
+                    activeOption={activeOption}
+                    handleClick={handleToggleClick}
+                  />
+                  <Search onChange={handleSearchChange} />
+                  <div className="sidebar-left-content-container">
+                    {activeOption === "Widgets" ? <Widgets /> : <Templates />}
+                  </div>
+                </>
+              );
+            } else if (activeModule === "market") {
+              return <></>;
+            } else if (activeModule === "builder") {
+              return (
+                <>
+                  <ToggleHeader
+                    options={["Outline", "Assets"]}
+                    activeOption={activeOption}
+                    handleClick={handleToggleClick}
+                  />
+                  <div className="sidebar-left-content-container">
+                    {activeOption === "Outline" ? <Outline /> : <Assets />}
+                  </div>
+                </>
+              );
+            } else {
+              return (
+                <>
+                  <ToggleHeader
+                    options={["Outline"]}
+                    activeOption={activeOption}
+                    handleClick={handleToggleClick}
+                  />
+                  <div className="sidebar-left-content-container">
+                    {activeOption === "Outline" ? <Outline /> : <Assets />}
+                  </div>
+                </>
+              );
+            }
+          })()}
         </div>
       )}
     </div>

app/src/components/layout/sidebarRight/Header.tsx

@@ -5,10 +5,15 @@ import { ActiveUser } from "../../../types/users";
 import CollaborationPopup from "../../templates/CollaborationPopup";
 import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
 import { useSelectedUserStore } from "../../../store/useCollabStore";
+import useToggleStore from "../../../store/useUIToggleStore";
+import { ToggleSidebarIcon } from "../../icons/HeaderIcons";
+import useModuleStore from "../../../store/useModuleStore";
 
 const Header: React.FC = () => {
   const { activeUsers } = useActiveUsers();
   const userName = localStorage.getItem("userName") ?? "Anonymous";
+  const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
+  const { activeModule } = useModuleStore();
 
   const guestUsers: ActiveUser[] = activeUsers.filter(
     (user: ActiveUser) => user.userName !== userName
@@ -55,6 +60,25 @@ const Header: React.FC = () => {
       )}
       <div className="header-container">
         <div className="options-container">
+          <button
+            className={`toggle-sidebar-ui-button ${
+              !toggleUIRight ? "active" : ""
+            }`}
+            onClick={() => {
+              if (activeModule !== "market") {
+                setToggleUI(toggleUILeft, !toggleUIRight);
+                localStorage.setItem(
+                  "navBarUiRight",
+                  JSON.stringify(!toggleUIRight)
+                );
+              }
+            }}
+          >
+            <div className="tooltip">
+              {toggleUIRight ? "Hide" : "Show"} sidebar (ctrl + ])
+            </div>
+            <ToggleSidebarIcon />
+          </button>
           <button
             className="share-button"
             onClick={() => {

app/src/components/layout/sidebarRight/SideBarRight.tsx

@@ -25,7 +25,7 @@ import EventProperties from "./properties/eventProperties/EventProperties";
 
 const SideBarRight: React.FC = () => {
   const { activeModule } = useModuleStore();
-  const { toggleUI } = useToggleStore();
+  const { toggleUIRight } = useToggleStore();
   const { subModule, setSubModule } = useSubModuleStore();
   const { selectedFloorItem } = useSelectedFloorItem();
   const { selectedEventData } = useSelectedEventData();
@@ -55,9 +55,9 @@ const SideBarRight: React.FC = () => {
   }, [activeModule, selectedEventData, selectedEventSphere, setSubModule]);
 
   return (
-    <div className={`sidebar-right-wrapper ${toggleUI ? "open" : "closed"}`}>
+    <div className={`sidebar-right-wrapper ${toggleUIRight ? "open" : "closed"}`}>
       <Header />
-      {toggleUI && (
+      {toggleUIRight && (
         <div className="sidebar-actions-container">
           {activeModule !== "simulation" && (
             <button
@@ -104,7 +104,7 @@ const SideBarRight: React.FC = () => {
         </div>
       )}
       {/* process builder */}
-      {toggleUI &&
+      {toggleUIRight &&
         subModule === "properties" &&
         activeModule !== "visualization" &&
         !selectedFloorItem && (
@@ -114,7 +114,7 @@ const SideBarRight: React.FC = () => {
             </div>
           </div>
         )}
-      {toggleUI &&
+      {toggleUIRight &&
         subModule === "properties" &&
         activeModule !== "visualization" &&
         selectedFloorItem && (
@@ -124,7 +124,7 @@ const SideBarRight: React.FC = () => {
             </div>
           </div>
         )}
-      {toggleUI &&
+      {toggleUIRight &&
         subModule === "zoneProperties" &&
         (activeModule === "builder" || activeModule === "simulation") && (
           <div className="sidebar-right-container">
@@ -134,7 +134,7 @@ const SideBarRight: React.FC = () => {
           </div>
         )}
       {/* simulation */}
-      {toggleUI && activeModule === "simulation" && (
+      {toggleUIRight && activeModule === "simulation" && (
         <>
           {subModule === "simulations" && (
             <div className="sidebar-right-container">
@@ -160,7 +160,7 @@ const SideBarRight: React.FC = () => {
         </>
       )}
       {/* realtime visualization */}
-      {toggleUI && activeModule === "visualization" && <Visualization />}
+      {toggleUIRight && activeModule === "visualization" && <Visualization />}
     </div>
   );
 };

app/src/components/templates/SkeletonUI.tsx

@@ -7,7 +7,6 @@ interface SkeletonUIProps {
 
 // Define the SkeletonUI component
 const SkeletonUI: React.FC<SkeletonUIProps> = ({ type }) => {
-
   // Function to render skeleton content based on 'type'
   const renderSkeleton = () => {
     switch (type) {
@@ -38,17 +37,28 @@ const SkeletonUI: React.FC<SkeletonUIProps> = ({ type }) => {
       case "asset":
         return (
           <>
-            <div className="skeleton-content">
-              <div className="skeleton asset-name"></div>
-              <div className="skeleton asset"></div>
-            </div>
-            <div className="skeleton-content">
-              <div className="skeleton asset-name"></div>
-              <div className="skeleton asset"></div>
+            <div className="skeleton asset-category-title"></div>
+            <div className="skeleton-content-asset">
+              <div className="skeleton-content">
+                <div className="skeleton asset-name"></div>
+                <div className="skeleton asset"></div>
+              </div>
+              <div className="skeleton-content">
+                <div className="skeleton asset-name"></div>
+                <div className="skeleton asset"></div>
+              </div>
+              <div className="skeleton-content">
+                <div className="skeleton asset-name"></div>
+                <div className="skeleton asset"></div>
+              </div>
+              <div className="skeleton-content">
+                <div className="skeleton asset-name"></div>
+                <div className="skeleton asset"></div>
+              </div>
             </div>
           </>
         );
-        
+
       default:
         return (
           <div className="skeleton-content">

app/src/components/ui/ModuleToggle.tsx

@@ -19,8 +19,11 @@ const ModuleToggle: React.FC = () => {
         onClick={() => {
           setActiveModule("builder");
           setToggleUI(
-            localStorage.getItem("navBarUi")
-              ? localStorage.getItem("navBarUi") === "true"
+            localStorage.getItem("navBarUiLeft")
+              ? localStorage.getItem("navBarUiLeft") === "true"
+              : true,
+            localStorage.getItem("navBarUiRight")
+              ? localStorage.getItem("navBarUiRight") === "true"
               : true
           );
         }}
@@ -37,8 +40,11 @@ const ModuleToggle: React.FC = () => {
         onClick={() => {
           setActiveModule("simulation");
           setToggleUI(
-            localStorage.getItem("navBarUi")
-              ? localStorage.getItem("navBarUi") === "true"
+            localStorage.getItem("navBarUiLeft")
+              ? localStorage.getItem("navBarUiLeft") === "true"
+              : true,
+            localStorage.getItem("navBarUiRight")
+              ? localStorage.getItem("navBarUiRight") === "true"
               : true
           );
         }}
@@ -55,8 +61,11 @@ const ModuleToggle: React.FC = () => {
         onClick={() => {
           setActiveModule("visualization");
           setToggleUI(
-            localStorage.getItem("navBarUi")
-              ? localStorage.getItem("navBarUi") === "true"
+            localStorage.getItem("navBarUiLeft")
+              ? localStorage.getItem("navBarUiLeft") === "true"
+              : true,
+            localStorage.getItem("navBarUiRight")
+              ? localStorage.getItem("navBarUiRight") === "true"
               : true
           );
         }}
@@ -70,7 +79,7 @@ const ModuleToggle: React.FC = () => {
         className={`module-list ${activeModule === "market" ? "active" : ""}`}
         onClick={() => {
           setActiveModule("market");
-          setToggleUI(false);
+          setToggleUI(false, false);
         }}
       >
         <div className="icon">

app/src/components/ui/Tools.tsx

@@ -68,8 +68,11 @@ const Tools: React.FC = () => {
   // Reset activeTool whenever activeModule changes
   useEffect(() => {
     setToggleUI(
-      localStorage.getItem("navBarUi")
-        ? localStorage.getItem("navBarUi") === "true"
+      localStorage.getItem("navBarUiLeft")
+        ? localStorage.getItem("navBarUiLeft") === "true"
+        : true,
+      localStorage.getItem("navBarUiRight")
+        ? localStorage.getItem("navBarUiRight") === "true"
         : true
     );
   }, []);
@@ -90,8 +93,11 @@ const Tools: React.FC = () => {
       setToggleView(false);
     }
     setToggleUI(
-      localStorage.getItem("navBarUi")
-        ? localStorage.getItem("navBarUi") === "true"
+      localStorage.getItem("navBarUiLeft")
+        ? localStorage.getItem("navBarUiLeft") === "true"
+        : true,
+      localStorage.getItem("navBarUiRight")
+        ? localStorage.getItem("navBarUiRight") === "true"
         : true
     );
     setToggleThreeD(!toggleThreeD);
@@ -116,7 +122,7 @@ const Tools: React.FC = () => {
   }, []);
   useEffect(() => {
     if (!toggleThreeD) {
-      setToggleUI(false);
+      setToggleUI(false, false);
     }
   }, [toggleThreeD]);
 
@@ -191,8 +197,9 @@ const Tools: React.FC = () => {
             <div className="activeDropicon">
               {activeSubTool == "cursor" && (
                 <div
-                  className={`tool-button ${activeTool === "cursor" ? "active" : ""
-                    }`}
+                  className={`tool-button ${
+                    activeTool === "cursor" ? "active" : ""
+                  }`}
                   onClick={() => {
                     setActiveTool("cursor");
                   }}
@@ -203,8 +210,9 @@ const Tools: React.FC = () => {
               )}
               {activeSubTool == "free-hand" && (
                 <div
-                  className={`tool-button ${activeTool === "free-hand" ? "active" : ""
-                    }`}
+                  className={`tool-button ${
+                    activeTool === "free-hand" ? "active" : ""
+                  }`}
                   onClick={() => {
                     setActiveTool("free-hand");
                   }}
@@ -215,8 +223,9 @@ const Tools: React.FC = () => {
               )}
               {activeSubTool == "delete" && (
                 <div
-                  className={`tool-button ${activeTool === "delete" ? "active" : ""
-                    }`}
+                  className={`tool-button ${
+                    activeTool === "delete" ? "active" : ""
+                  }`}
                   onClick={() => {
                     setActiveTool("delete");
                   }}
@@ -289,8 +298,9 @@ const Tools: React.FC = () => {
               <div className="split"></div>
               <div className="draw-tools">
                 <div
-                  className={`tool-button ${activeTool === "draw-wall" ? "active" : ""
-                    }`}
+                  className={`tool-button ${
+                    activeTool === "draw-wall" ? "active" : ""
+                  }`}
                   onClick={() => {
                     setActiveTool("draw-wall");
                   }}
@@ -299,8 +309,9 @@ const Tools: React.FC = () => {
                   <WallIcon isActive={activeTool === "draw-wall"} />
                 </div>
                 <div
-                  className={`tool-button ${activeTool === "draw-zone" ? "active" : ""
-                    }`}
+                  className={`tool-button ${
+                    activeTool === "draw-zone" ? "active" : ""
+                  }`}
                   onClick={() => {
                     setActiveTool("draw-zone");
                   }}
@@ -309,8 +320,9 @@ const Tools: React.FC = () => {
                   <ZoneIcon isActive={activeTool === "draw-zone"} />
                 </div>
                 <div
-                  className={`tool-button ${activeTool === "draw-aisle" ? "active" : ""
-                    }`}
+                  className={`tool-button ${
+                    activeTool === "draw-aisle" ? "active" : ""
+                  }`}
                   onClick={() => {
                     setActiveTool("draw-aisle");
                   }}
@@ -319,8 +331,9 @@ const Tools: React.FC = () => {
                   <AsileIcon isActive={activeTool === "draw-aisle"} />
                 </div>
                 <div
-                  className={`tool-button ${activeTool === "draw-floor" ? "active" : ""
-                    }`}
+                  className={`tool-button ${
+                    activeTool === "draw-floor" ? "active" : ""
+                  }`}
                   onClick={() => {
                     setActiveTool("draw-floor");
                   }}
@@ -336,8 +349,9 @@ const Tools: React.FC = () => {
               <div className="split"></div>
               <div className="draw-tools">
                 <div
-                  className={`tool-button ${activeTool === "measure" ? "active" : ""
-                    }`}
+                  className={`tool-button ${
+                    activeTool === "measure" ? "active" : ""
+                  }`}
                   onClick={() => {
                     setActiveTool("measure");
                   }}
@@ -353,8 +367,9 @@ const Tools: React.FC = () => {
               <div className="split"></div>
               <div className="draw-tools">
                 <div
-                  className={`tool-button ${activeTool === "pen" ? "active" : ""
-                    }`}
+                  className={`tool-button ${
+                    activeTool === "pen" ? "active" : ""
+                  }`}
                   onClick={() => {
                     setActiveTool("pen");
                   }}
@@ -391,8 +406,9 @@ const Tools: React.FC = () => {
           <div className="split"></div>
           <div className="general-options">
             <div
-              className={`tool-button ${activeTool === "comment" ? "active" : ""
-                }`}
+              className={`tool-button ${
+                activeTool === "comment" ? "active" : ""
+              }`}
               onClick={() => {
                 setActiveTool("comment");
               }}
@@ -402,8 +418,9 @@ const Tools: React.FC = () => {
             </div>
             {toggleThreeD && (
               <div
-                className={`tool-button ${activeTool === "play" ? "active" : ""
-                  }`}
+                className={`tool-button ${
+                  activeTool === "play" ? "active" : ""
+                }`}
                 onClick={() => {
                   setIsPlaying(!isPlaying);
                 }}
@@ -417,8 +434,9 @@ const Tools: React.FC = () => {
             <>
               <div className="split"></div>
               <div
-                className={`toggle-threed-button${toggleThreeD ? " toggled" : ""
-                  }`}
+                className={`toggle-threed-button${
+                  toggleThreeD ? " toggled" : ""
+                }`}
                 onClick={toggleSwitch}
               >
                 <div className="tooltip">toggle view (tab)</div>

app/src/components/ui/menu/menu.tsx

@@ -1,12 +1,14 @@
 import React, { useState } from "react";
 import { ArrowIcon } from "../../icons/ExportCommonIcons";
 import { toggleTheme } from "../../../utils/theme";
+import { useNavigate } from "react-router-dom";
 
 interface MenuBarProps {
   setOpenMenu: (isOpen: boolean) => void; // Function to update menu state
 }
 
 const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
+  const navigate = useNavigate();
   const [activeMenu, setActiveMenu] = useState<string | null>(null);
   const [activeSubMenu, setActiveSubMenu] = useState<string | null>(null);
 
@@ -23,13 +25,19 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
     }));
   };
 
-  function handleThemeChange(){
+  function handleThemeChange() {
     toggleTheme();
     window.location.reload();
   }
 
   const savedTheme: string | null = localStorage.getItem("theme") ?? "light";
 
+
+  const handleLogout = () => {
+    localStorage.clear(); // 1. Clear all localStorage
+    navigate('/');        // 2. Redirect to homepage
+  };
+
   return (
     <div
       className="menu-bar"
@@ -539,6 +547,9 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
             </div>
           )}
         </div>
+        <div className="menu-button-container" onClick={handleLogout}>
+          <div className="menu-button">Log out</div>
+        </div>
       </div>
     </div>
   );

app/src/modules/scene/controls/selectionControls/rotateControls.tsx

@@ -22,7 +22,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
     const itemsData = useRef<Types.FloorItems>([]);
 
     const email = localStorage.getItem('email')
-    const organization = (email!.split("@")[1]).split(".")[0];
+    const organization = (email?.split("@")[1])?.split(".")[0] ?? null;
 
     const updateBackend = (
         productName: string,
@@ -214,7 +214,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
                             rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
                         })
 
-                        if (event) {
+                        if (event && organization) {
                             updateBackend(
                                 selectedProduct.productName,
                                 selectedProduct.productId,

app/src/store/useUIToggleStore.ts

@@ -1,13 +1,17 @@
 import { create } from "zustand";
 
 interface ToggleState {
-  toggleUI: boolean; // State to track UI toggle
-  setToggleUI: (value: boolean) => void; // Action to update toggleUI
+  toggleUILeft: boolean;
+  toggleUIRight: boolean;
+  setToggleUI: (value1: boolean, value2: boolean) => void;
 }
 
 const useToggleStore = create<ToggleState>((set) => ({
-  toggleUI: true, // Initial state
-  setToggleUI: (value: boolean) => set({ toggleUI: value }), // Update the state
+  toggleUILeft: true,
+  toggleUIRight: false,
+  setToggleUI: (value1: boolean, value2: boolean) => {
+    set({ toggleUILeft: value1, toggleUIRight: value2 });
+  },
 }));
 
 export default useToggleStore;

app/src/styles/layout/sidebar.scss

@@ -1,6 +1,55 @@
 @use "../abstracts/variables" as *;
 @use "../abstracts/mixins" as *;
 
+.toggle-sidebar-ui-button {
+  @include flex-center;
+  cursor: pointer;
+  height: 32px;
+  width: 32px;
+  min-height: 32px;
+  min-width: 32px;
+  border-radius: #{$border-radius-large};
+  position: relative;
+
+  .tooltip {
+    top: 6px;
+    right: -168px;
+
+    &::after {
+      left: 0px;
+      bottom: 50%;
+    }
+  }
+
+  &:hover {
+    outline: 1px solid var(--border-color);
+    outline-offset: -1px;
+    background: var(--background-color-solid);
+
+    .tooltip {
+      opacity: 1;
+      transform: translateX(2px);
+    }
+  }
+}
+
+.toggle-sidebar-ui-button.active {
+  background: var(--background-color-accent);
+
+  rect {
+    stroke: var(--icon-default-color-active);
+  }
+
+  circle {
+    fill: var(--icon-default-color-active);
+  }
+
+  &:hover {
+    filter: saturate(0.8);
+    background: var(--background-color-accent);
+  }
+}
+
 .sidebar-left-wrapper {
   width: 270px;
   position: fixed;
@@ -34,15 +83,6 @@
     }
 
     .toggle-sidebar-ui-button {
-      @include flex-center;
-      cursor: pointer;
-      height: 32px;
-      width: 32px;
-      min-height: 32px;
-      min-width: 32px;
-      border-radius: #{$border-radius-large};
-      position: relative;
-
       .tooltip {
         top: 6px;
         right: -168px;
@@ -52,34 +92,6 @@
           bottom: 50%;
         }
       }
-
-      &:hover {
-        outline: 1px solid var(--border-color);
-        outline-offset: -1px;
-        background: var(--background-color-solid);
-
-        .tooltip {
-          opacity: 1;
-          transform: translateX(2px);
-        }
-      }
-    }
-
-    .active {
-      background: var(--background-color-accent);
-
-      rect {
-        stroke: var(--icon-default-color-active);
-      }
-
-      circle {
-        fill: var(--icon-default-color-active);
-      }
-
-      &:hover {
-        filter: saturate(0.8);
-        background: var(--background-color-accent);
-      }
     }
   }
 
@@ -295,7 +307,7 @@
     padding: 10px;
     padding-left: 16px;
     width: 100%;
-    gap: 12px;
+    gap: 8px;
     height: 52px;
 
     .options-container {
@@ -318,7 +330,7 @@
 
     .split {
       height: 20px;
-      width: 2px;
+      min-width: 1px;
       background: var(--text-disabled);
     }
 
@@ -1265,6 +1277,18 @@
       }
     }
   }
+  .toggle-sidebar-ui-button {
+    svg {
+      transform: scaleX(-1);
+    }
+    .tooltip {
+      right: 56px;
+      &::after {
+        left: 100%;
+        bottom: 50%;
+      }
+    }
+  }
 }
 
 .assets-container-main {
@@ -1431,7 +1455,11 @@
       height: 100%;
       gap: 6px;
       padding: 2px;
-
+      .no-asset {
+        text-align: center;
+        margin: 12px;
+        width: 100%;
+      }
       .assets {
         width: 122px;
         height: 95px;
@@ -1490,20 +1518,6 @@
   }
 }
 
-.skeleton-wrapper {
-  display: flex;
-
-  .asset-name {
-    width: 40%;
-    height: 10px;
-  }
-
-  .asset {
-    width: 100%;
-    height: 100%;
-  }
-}
-
 .sidebar-left-wrapper,
 .sidebar-right-wrapper {
   transition: height 0.2s ease-in-out;

app/src/styles/layout/skeleton.scss

@@ -1,61 +1,90 @@
 .skeleton-wrapper {
-    // max-width: 600px;
-    margin: 0 auto;
-    width: 100%;
+  margin: 0 auto;
+  width: 100%;
 
-    .skeleton {
-        background: var(--background-color-gray);
+  .skeleton {
+    background: var(--background-color-gray);
 
-        border-radius: 8px;
-        position: relative;
-        overflow: hidden;
+    border-radius: 8px;
+    position: relative;
+    overflow: hidden;
 
-        &::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-image: linear-gradient(90deg,
-                    rgba(255, 255, 255, 0) 0%,
-                    rgba(255, 255, 255, 0.2) 20%,
-                    rgba(255, 255, 255, 0.5) 60%,
-                    rgba(255, 255, 255, 0) 100%);
-            transform: translateX(-100%);
-            animation: shimmer 1.5s infinite;
-        }
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-image: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 0.2) 20%,
+        rgba(255, 255, 255, 0.39) 60%,
+        rgba(255, 255, 255, 0) 100%
+      );
+      transform: translateX(-100%);
+      animation: shimmer 1.5s infinite;
+    }
+  }
+
+  .skeleton-header {
+    margin-bottom: 20px;
+
+    .skeleton-title {
+      width: 100%;
+      height: 25px;
+      margin-bottom: 12px;
     }
 
-    .skeleton-header {
-        margin-bottom: 20px;
-
-        .skeleton-title {
-            width: 100%;
-            height: 25px;
-            margin-bottom: 12px;
-        }
-
-        .skeleton-subtitle {
-            width: 100%;
-            height: 4px;
-        }
+    .skeleton-subtitle {
+      width: 100%;
+      height: 4px;
     }
+  }
 
-    .skeleton-content {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
+  .skeleton-content {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
 
-        .skeleton-card {
-            width: 100%;
-            height: 15px;
-        }
+    .skeleton-card {
+      width: 100%;
+      height: 15px;
     }
+  }
+}
+
+.asset-category-title{
+  width: 60%;
+  height: 12px;
+  margin-bottom: 12px;
+  margin-top: 4px;
+}
+.skeleton-content-asset{
+  display: flex;
+  height: calc(95px * 2 + 10px);
+  gap: 10px;
+  flex-wrap: wrap;
+  .skeleton-content {
+    gap: 8px;
+    flex-direction: column;
+    min-width: 122px;
+    min-height: 95px;
+    .asset-name {
+      width: 40%;
+      height: 10px;
+    }
+    .asset {
+      flex: 1;
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 
 @keyframes shimmer {
-    100% {
-        transform: translateX(100%);
-    }
-}
+  100% {
+    transform: translateX(100%);
+  }
+}

app/src/utils/shortcutkeys/handleShortcutKeys.ts

@@ -17,7 +17,7 @@ import { useSelectedZoneStore } from "../../store/visualization/useZoneStore";
 const KeyPressListener: React.FC = () => {
     const { activeModule, setActiveModule } = useModuleStore();
     const { setActiveSubTool } = useActiveSubTool();
-    const { toggleUI, setToggleUI } = useToggleStore();
+    const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
     const { setToggleThreeD } = useThreeDStore();
     const { setToolMode } = useToolMode();
     const { setIsPlaying } = usePlayButtonStore();
@@ -26,7 +26,7 @@ const KeyPressListener: React.FC = () => {
     const { setAddAction } = useAddAction();
     const { setSelectedWallItem } = useSelectedWallItem();
     const { setActiveTool } = useActiveTool();
-    const { clearSelectedZone} = useSelectedZoneStore();
+    const { clearSelectedZone } = useSelectedZoneStore();
 
     const isTextInput = (element: Element | null): boolean =>
         element instanceof HTMLInputElement ||
@@ -42,9 +42,10 @@ const KeyPressListener: React.FC = () => {
         };
         const module = modules[keyCombination];
         if (module && !toggleView) {
+            console.log("hi");
             setActiveTool("cursor");
             setActiveSubTool("cursor");
-            if (module === "market") setToggleUI(false);
+            if (module === "market") setToggleUI(false, false);
             setActiveModule(module);
         }
     };
@@ -69,6 +70,7 @@ const KeyPressListener: React.FC = () => {
             const toggleTo2D = toggleView;
             setToggleView(!toggleTo2D);
             setToggleThreeD(toggleTo2D);
+            setToggleUI(toggleTo2D, toggleTo2D);
             if (toggleTo2D) {
                 setSelectedWallItem(null);
                 setDeleteTool(false);
@@ -105,6 +107,29 @@ const KeyPressListener: React.FC = () => {
     };
 
 
+    const handleSidebarShortcuts = (key: string) => {
+        if (activeModule !== "market") {
+            if (key === "Ctrl+\\") {
+                if (toggleUILeft === toggleUIRight) {
+                    setToggleUI(!toggleUILeft, !toggleUIRight);
+                }
+                else {
+                    setToggleUI(true, true);
+                }
+                return;
+            }
+            if (key === "Ctrl+]") {
+                    setToggleUI(toggleUILeft, !toggleUIRight);
+                    return;
+            }
+            if (key === "Ctrl+[") {
+                    setToggleUI(!toggleUILeft, toggleUIRight);
+                    return;
+            }
+        }
+    }
+
+
     const handleKeyPress = (event: KeyboardEvent) => {
         if (isTextInput(document.activeElement)) return;
 
@@ -113,11 +138,8 @@ const KeyPressListener: React.FC = () => {
 
         event.preventDefault();
 
-        if (keyCombination === "Ctrl+\\") {
-            if (activeModule !== "market") setToggleUI(!toggleUI);
-            return;
-        }
-
+        // Shortcuts specific for sidebar visibility toggle and others specific to sidebar if added
+        handleSidebarShortcuts(keyCombination);
         // Active module selection (builder, simulation, etc.)
         handleModuleSwitch(keyCombination);
         // Common editing tools: cursor | delete | free-hand
@@ -132,6 +154,7 @@ const KeyPressListener: React.FC = () => {
 
         if (keyCombination === "ESCAPE") {
             setActiveTool("cursor");
+            setActiveSubTool("cursor");
             setIsPlaying(false);
             clearSelectedZone();
         }
@@ -146,7 +169,7 @@ const KeyPressListener: React.FC = () => {
         window.addEventListener("keydown", handleKeyPress);
         return () => window.removeEventListener("keydown", handleKeyPress);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [activeModule, toggleUI, toggleView]);
+    }, [activeModule, toggleUIRight, toggleUILeft, toggleView]);
 
     return null;
 };