diff --git a/src/components/ProductSalesAmount/Design1/home-trend-down.svg b/public/images/ProductSalesDesign1home-trend-down.svg
similarity index 100%
rename from src/components/ProductSalesAmount/Design1/home-trend-down.svg
rename to public/images/ProductSalesDesign1home-trend-down.svg
diff --git a/src/components/ProductSalesAmount/Design1/home-trend-up.svg b/public/images/ProductSalesDesign1home-trend-up.svg
similarity index 100%
rename from src/components/ProductSalesAmount/Design1/home-trend-up.svg
rename to public/images/ProductSalesDesign1home-trend-up.svg
diff --git a/src/components/ProductSalesAmount/Design2/Ellipse.svg b/public/images/ProductSalesDesign2Ellipse.svg
similarity index 100%
rename from src/components/ProductSalesAmount/Design2/Ellipse.svg
rename to public/images/ProductSalesDesign2Ellipse.svg
diff --git a/src/components/ProductSalesAmount/Design1/index.js b/src/components/ProductSalesAmount/ProductSalesDesign1/index.js
similarity index 95%
rename from src/components/ProductSalesAmount/Design1/index.js
rename to src/components/ProductSalesAmount/ProductSalesDesign1/index.js
index d896e95..728f03a 100644
--- a/src/components/ProductSalesAmount/Design1/index.js
+++ b/src/components/ProductSalesAmount/ProductSalesDesign1/index.js
@@ -4,7 +4,7 @@ import TitleSubtitle from "../../TitleSubtitle";
 import arrowDown from "./home-trend-down.svg";
 import arrowUp from "./home-trend-up.svg";
 
-const Design1 = ({ title, price, incomes }) => {
+const ProductSalesDesign1 = ({ title, price, incomes }) => {
   return (
     <div className="bg-white rounded shadow mx-auto p-5">
       {/* title */}
@@ -46,9 +46,9 @@ const Design1 = ({ title, price, incomes }) => {
   );
 };
 
-export default Design1;
+export default ProductSalesDesign1;
 
-Design1.defaultProps = {
+ProductSalesDesign1.defaultProps = {
   title: "میزان فروش محصولات",
   price: "196.209.810",
 
diff --git a/src/components/ProductSalesAmount/Design2/index.js b/src/components/ProductSalesAmount/ProductSalesDesign2/index.js
similarity index 90%
rename from src/components/ProductSalesAmount/Design2/index.js
rename to src/components/ProductSalesAmount/ProductSalesDesign2/index.js
index d729d5e..c3b4d57 100644
--- a/src/components/ProductSalesAmount/Design2/index.js
+++ b/src/components/ProductSalesAmount/ProductSalesDesign2/index.js
@@ -4,7 +4,7 @@ import TitleSubtitle from "../../TitleSubtitle";
 
 import ellipse from "./Ellipse.svg";
 
-const Design2 = ({ incomes }) => {
+const ProductSalesDesign2 = ({ incomes }) => {
   return (
     <div className="bg-white rounded shadow mx-auto py-7 px-4">
       {/* title */}
@@ -25,9 +25,9 @@ const Design2 = ({ incomes }) => {
   );
 };
 
-export default Design2;
+export default ProductSalesDesign2;
 
-Design2.defaultProps = {
+ProductSalesDesign2.defaultProps = {
   incomes: [
     {
       image: ellipse,
diff --git a/src/components/ProductSalesAmount/index.js b/src/components/ProductSalesAmount/index.js
new file mode 100644
index 0000000..91ff32b
--- /dev/null
+++ b/src/components/ProductSalesAmount/index.js
@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+
+import ProductSalesDesign1 from "./ProductSalesDesign1";
+import ProductSalesDesign2 from "./ProductSalesDesign2";
+
+function ProductSalesAmount() {
+  const list = {
+    1: <ProductSalesDesign1 />,
+    1: <ProductSalesDesign2 />,
+  };
+  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 ProductSalesAmount;
diff --git a/src/redux/data.js b/src/redux/data.js
index f77b6cd..27b7695 100644
--- a/src/redux/data.js
+++ b/src/redux/data.js
@@ -47,6 +47,7 @@ import FormFields from "../components/FormFields";
 import Tabels from "../components/Tabels";
 import LeafletMap from "../components/LeafletMap";
 import ProductGallery from "../components/ProductGallery";
+import ProductSalesAmount from "../components/ProductSalesAmount";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -830,6 +831,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Product Sales Amount",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Product Sales Amount",
+      component: <ProductSalesAmount />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",