diff --git a/app/src/components/layout/sidebarLeft/Assets.tsx b/app/src/components/layout/sidebarLeft/Assets.tsx
index 2d4aa34..4e946d3 100644
--- a/app/src/components/layout/sidebarLeft/Assets.tsx
+++ b/app/src/components/layout/sidebarLeft/Assets.tsx
@@ -21,6 +21,8 @@ import {
   HangTagIcon,
   NavigationIcon,
 } from "../../icons/ExportCommonIcons";
+import { assert } from "console";
+import { getCategoryDecals } from "../../../services/factoryBuilder/asset/decals/getCategoryDecals";
 // -------------------------------------
 
 interface AssetProp {
@@ -47,6 +49,7 @@ const Assets: React.FC = () => {
   const [searchValue, setSearchValue] = useState<string>("");
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
   const [categoryAssets, setCategoryAssets] = useState<AssetProp[]>([]);
+
   const [filtereredAssets, setFiltereredAssets] = useState<AssetProp[]>([]);
   const [categoryList, setCategoryList] = useState<CategoryListProp[]>([]);
   const [isLoading, setisLoading] = useState<boolean>(false); // Loading state for assets
@@ -118,6 +121,20 @@ const Assets: React.FC = () => {
       setisLoading(false);
     }
   };
+  const fetchCategoryDecals = async (asset: any) => {
+    setisLoading(true);
+    // setSelectedCategory(asset);
+    try {
+      const res = await getCategoryDecals(asset);
+      setCategoryAssets(res);
+      setFiltereredAssets(res);
+      setisLoading(false); // End loading
+      // eslint-disable-next-line
+    } catch (error) {
+      echo.error("failed to fetch assets");
+      setisLoading(false);
+    }
+  };
 
   const activeSubcategories = [
     { name: "Safety", icon: <AlertIcon /> },
@@ -209,9 +226,13 @@ const Assets: React.FC = () => {
                         {activeSubcategories.map((cat, index) => (
                           <div
                             key={index}
-                            className={`catogory-asset-filter-wrapper ${selectedSubCategory === cat.name ? "active" : ""
-                              }`}
-                            onClick={() => setSelectedSubCategory(cat.name)}
+                            className={`catogory-asset-filter-wrapper ${
+                              selectedSubCategory === cat.name ? "active" : ""
+                            }`}
+                            onClick={() => {
+                              fetchCategoryDecals(cat.name);
+                              setSelectedSubCategory(cat.name);
+                            }}
                           >
                             <div className="sub-catagory">{cat.icon}</div>
                             <div className="sub-catagory">{cat.name}</div>
@@ -220,49 +241,96 @@ const Assets: React.FC = () => {
                       </div>
                     </>
                   )}
-                  <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,
-                              category: asset.category,
-                              subType: asset.subType,
-                            });
-                          }}
-                        />
-                        <div className="asset-name">
-                          {asset.filename
-                            .split("_")
-                            .map(
-                              (word: any) =>
-                                word.charAt(0).toUpperCase() + word.slice(1)
-                            )
-                            .join(" ")}
+
+                  {selectedCategory !== "Decals" && !selectedSubCategory ? (
+                    <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,
+                                category: asset.category,
+                                subType: asset.subType,
+                              });
+                            }}
+                          />
+                          <div className="asset-name">
+                            {asset.filename
+                              .split("_")
+                              .map(
+                                (word: any) =>
+                                  word.charAt(0).toUpperCase() + word.slice(1)
+                              )
+                              .join(" ")}
+                          </div>
                         </div>
-                      </div>
-                    ))}
-                    {categoryAssets.length === 0 && (
-                      <div className="no-asset">
-                        🚧 The asset shelf is empty. We're working on filling it
-                        up!
-                      </div>
-                    )}
-                  </div>
+                      ))}
+                      {categoryAssets.length === 0 && (
+                        <div className="no-asset">
+                          🚧 The asset shelf is empty. We're working on filling
+                          it up!
+                        </div>
+                      )}
+                    </div>
+                  ) : (
+                    <div className="assets-container">
+                      {categoryAssets?.map((asset: any, index: number) => (
+                        <div
+                          key={`${index}-${asset}`}
+                          className="assets"
+                          id={asset.decalName}
+                          title={asset.decalName}
+                        >
+                          <img
+                            src={asset?.decalImage}
+                            alt={asset.decalName}
+                            className="asset-image"
+                            onPointerDown={() => {
+                              setSelectedItem({
+                                name: asset.decalName,
+                                id: asset.id,
+                                type:
+                                  asset.type === "undefined"
+                                    ? undefined
+                                    : asset.type,
+                                category: asset.category,
+                                // subType: asset.subType,
+                              });
+                            }}
+                          />
+                          <div className="asset-name">
+                            {asset.decalName
+                              .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>
               );
             }
@@ -282,7 +350,9 @@ const Assets: React.FC = () => {
                         key={`${index}-${category}`}
                         className="category"
                         id={category}
-                        onClick={() => fetchCategoryAssets(category)}
+                        onClick={() => {
+                          fetchCategoryAssets(category);
+                        }}
                       >
                         <img
                           src={categoryInfo?.categoryImage ?? ""}
diff --git a/app/src/services/factoryBuilder/asset/decals/getCategoryDecals.ts b/app/src/services/factoryBuilder/asset/decals/getCategoryDecals.ts
new file mode 100644
index 0000000..9a4f2ba
--- /dev/null
+++ b/app/src/services/factoryBuilder/asset/decals/getCategoryDecals.ts
@@ -0,0 +1,20 @@
+let BackEnd_url = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
+export const getCategoryDecals = async (category: any) => {
+  try {
+    const response = await fetch(
+      `${BackEnd_url}/api/v1/categoryDecalDatas/${category}`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+
+    const result = await response.json();
+    return result;
+  } catch (error: any) {
+    echo.error("Failed to get category asset");
+    console.log(error.message);
+  }
+};
\ No newline at end of file