diff --git a/src/components/ProductImage/product-chair.svg b/public/images/ProductImageproduct-chair.svg
similarity index 100%
rename from src/components/ProductImage/product-chair.svg
rename to public/images/ProductImageproduct-chair.svg
diff --git a/src/components/ProductImage/productImg.svg b/public/images/ProductImageproductImg.svg
similarity index 100%
rename from src/components/ProductImage/productImg.svg
rename to public/images/ProductImageproductImg.svg
diff --git a/src/components/ProductGallery/ProductImage/index.js b/src/components/ProductGallery/ProductImage/index.js
new file mode 100644
index 0000000..fb8b817
--- /dev/null
+++ b/src/components/ProductGallery/ProductImage/index.js
@@ -0,0 +1,58 @@
+// it has style inside index.scss ---> // Start ProductImage && end ProductImage
+
+import React from "react";
+
+const ProductImage = ({ images }) => {
+  console.log(images.length);
+
+  return (
+    <div className="w-4/12 rounded-lg	flex flex-row h-72">
+      <div className="flex flex-col items-center justify-between ml-4 w-16">
+        {images.slice(0, 4).map((image, index) => (
+          <div className="relative">
+            <img
+              key={index}
+              src="images/ProductImageproductImg.svg"
+              alt=""
+              className={`rounded-sm h-full`}
+              // style={{ height: "calc(100% - 8px)" }}
+              // style={{ height: "calc(100% - 8px)" }}
+            />
+            {/* این خط پایین که نوشتم برای این است که ایندکس که جنسش استرینگ است رو به نامبر تبدیل کند */}
+            {Number(index) === 3 && (
+              <div className="absolute w-full h-full bg-black bg-opacity-30 left-0 top-0 flex justify-center items-center text-white">
+                <strong>+ {images.length - 3}</strong>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+      <img src="images/ProductImageproductImg.svg" alt="" className="h-full" />
+    </div>
+  );
+};
+// {[0, 1, 2, 3, 4].map((item, index) => (
+
+//   ))}
+
+export default ProductImage;
+
+ProductImage.defaultProps = {
+  images: [
+    {
+      image: "images/ProductImageproductImg.svg",
+    },
+    {
+      image: "images/ProductImageproductImg.svg",
+    },
+    {
+      image: "images/ProductImageproductImg.svg",
+    },
+    {
+      image: "images/ProductImageproductImg.svg",
+    },
+    {
+      image: "images/ProductImageproductImg.svg",
+    },
+  ],
+};
diff --git a/src/components/ProductGallery/index.js b/src/components/ProductGallery/index.js
new file mode 100644
index 0000000..2cd3eb5
--- /dev/null
+++ b/src/components/ProductGallery/index.js
@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+
+import ProductImage from "./ProductImage";
+
+function ProductGallery() {
+  const list = {
+    1: <ProductImage />,
+  };
+  const [type, setType] = useState(1);
+  return (
+    <div className="w-full flex flex-col items-center">
+      <select
+        className="mb-10 w-20 bg-gray-200"
+        onChange={(e) => setType(e.target.value)}
+      >
+        {Object.keys(list).map((option, index) => (
+          <option key={index}>{option}</option>
+        ))}
+      </select>
+      {list[type]}
+    </div>
+  );
+}
+
+export default ProductGallery;
diff --git a/src/components/ProductImage/index.js b/src/components/ProductImage/index.js
deleted file mode 100644
index 6255d01..0000000
--- a/src/components/ProductImage/index.js
+++ /dev/null
@@ -1,63 +0,0 @@
-// it has style inside index.scss ---> // Start ProductImage && end ProductImage
-
-import React from "react";
-
-
-import productImg from "./productImg.svg";
-
-const ProductImage = ({ images }) => {
-  console.log(images.length);
-
-  return (
-    <section className="bg-white m-10 border-2 border-gray-300 p-4 rounded-lg">
-      <div className="w-4/12	flex flex-row h-72">
-        <div className="flex flex-col items-center justify-between ml-4 w-16">
-          {images.slice(0, 4).map((image, index) => (
-            <div className="relative">
-              <img
-                key={index}
-                src={productImg}
-                alt=""
-                className={`rounded-sm h-full`}
-                // style={{ height: "calc(100% - 8px)" }}
-                // style={{ height: "calc(100% - 8px)" }}
-              />
-              {/* این خط پایین که نوشتم برای این است که ایندکس که جنسش استرینگ است رو به نامبر تبدیل کند */}
-              {Number(index) === 3 && (
-                <div className="absolute w-full h-full bg-black bg-opacity-30 left-0 top-0 flex justify-center items-center text-white">
-                  <strong>+ {images.length - 3}</strong>
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-        <img src={productImg} alt="" className="h-full" />
-      </div>
-    </section>
-  );
-};
-// {[0, 1, 2, 3, 4].map((item, index) => (
-
-//   ))}
-
-export default ProductImage;
-
-ProductImage.defaultProps = {
-  images: [
-    {
-      image: productImg,
-    },
-    {
-      image: productImg,
-    },
-    {
-      image: productImg,
-    },
-    {
-      image: productImg,
-    },
-    {
-      image: productImg,
-    },
-  ],
-};
diff --git a/src/components/Tabels/ReactTable4/index.js b/src/components/Tabels/ReactTable4/index.js
index b727a25..507038b 100644
--- a/src/components/Tabels/ReactTable4/index.js
+++ b/src/components/Tabels/ReactTable4/index.js
@@ -32,12 +32,6 @@ const ReactTable4 = ({ breadCrumbs }) => {
 
   return (
     <div className="my-5 w-fit mx-auto">
-      {/* breadCrumb */}
-      <div className="flex flex-row items-center">
-        <BreadCrumb />
-        {console.log("mahdi")}
-        {console.log(BreadCrumb)}
-      </div>
       <div className="my-7">
         <TitleSubtitle titleBorderClassName={"ml-1 w-1 h-6 bg-red-400"} />
       </div>
diff --git a/src/redux/data.js b/src/redux/data.js
index 23ccfa4..f77b6cd 100644
--- a/src/redux/data.js
+++ b/src/redux/data.js
@@ -46,6 +46,7 @@ import FileManager from "../components/FileManager";
 import FormFields from "../components/FormFields";
 import Tabels from "../components/Tabels";
 import LeafletMap from "../components/LeafletMap";
+import ProductGallery from "../components/ProductGallery";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -819,6 +820,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Product Gallery",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Product Gallery",
+      component: <ProductGallery />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",