diff --git a/package-lock.json b/package-lock.json
index b29f893..eb5f496 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "lottie-web": "^5.8.1",
         "mapir-react-component": "^2.0.1",
         "react": "^17.0.2",
+        "react-colorful": "^5.5.1",
         "react-dom": "^17.0.2",
         "react-draft-wysiwyg": "^1.14.7",
         "react-dropzone": "^11.4.2",
@@ -14146,6 +14147,15 @@
         "node": ">=14"
       }
     },
+    "node_modules/react-colorful": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz",
+      "integrity": "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg==",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
@@ -27579,6 +27589,12 @@
         "whatwg-fetch": "^3.6.2"
       }
     },
+    "react-colorful": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz",
+      "integrity": "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg==",
+      "requires": {}
+    },
     "react-dev-utils": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
diff --git a/package.json b/package.json
index 42cb5fd..a0d4f50 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "lottie-web": "^5.8.1",
     "mapir-react-component": "^2.0.1",
     "react": "^17.0.2",
+    "react-colorful": "^5.5.1",
     "react-dom": "^17.0.2",
     "react-draft-wysiwyg": "^1.14.7",
     "react-dropzone": "^11.4.2",
diff --git a/src/App.css b/src/App.css
index 2575e5d..d241c0d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -6,9 +6,9 @@ input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
     -webkit-appearance: none;
 }
-*{
+/* *{
   transition: all 0.3s;
-}
+} */
 .rtl{
   direction: rtl;
 }
diff --git a/src/App.js b/src/App.js
index 9810ece..e4bb529 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,6 @@
 import logo from './logo.svg';
 import './App.css';
-import { HashRouter as Router, Routes, Route } from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Dashboard2 from './view/dashboard2/Dashboard2';
 import Header from './components/header/Header';
 import Nav from './components/nav/Nav';
diff --git a/src/components/Product/index.js b/src/components/Product/index.js
index 4e281b8..5d2263e 100644
--- a/src/components/Product/index.js
+++ b/src/components/Product/index.js
@@ -37,7 +37,8 @@ const ProductDesign = ({
   teacher,
   btnOnClick,
   catId,
-  isMobile
+  isMobile,
+  onClick
 }) => {
   const [isHovering, setIsHovering] = useState(false);
 
@@ -78,7 +79,7 @@ const ProductDesign = ({
     return (
       <div className={`flex flex-col pt-4 text-right rounded-xl justify-start w-full m-4 border border-red82OP ${isMobile && 'w-11/12'}`}
         style={{ width: !isMobile && '375px' , direction: 'rtl' }}
-
+        onClick={onClick}
       >
 
         <div className="border-b border-red82OP pb-2 px-4">
@@ -106,7 +107,7 @@ const ProductDesign = ({
             className={`bg-pinkF5 text-red26 w-32 border-2 border-red52 px-1 py-2 text-xs flex justify-center hover:bg-red52 hover:text-white
                   `}
           >
-            <button onClick={btnOnClick}>افزودن به سبد خرید</button>
+            <button className="z-2" onClick={btnOnClick}>افزودن به سبد خرید</button>
           </div>
 
         </div>
@@ -279,6 +280,7 @@ const ProductDesign = ({
 
 
 
+
     </div>
     )
   }
diff --git a/src/view/addProduct/Main/index.js b/src/view/addProduct/Main/index.js
index ac6c5ed..4408002 100644
--- a/src/view/addProduct/Main/index.js
+++ b/src/view/addProduct/Main/index.js
@@ -8,7 +8,7 @@ import './editor.css';
 
 const MainAP = () => {
     return (
-        <div className="w-full flex flex-col py-4 px-10 items-center rtl">
+        <div className="w-full flex flex-col py-4 px-6 items-center rtl">
             <h1 className="text-blue3A text-lg font-bold w-full text-right px-4 mb-6 border-r-4 border-blue65">
                 اضافه کردن محصول جدید
             </h1>
diff --git a/src/view/addProduct/Sidebar/index.js b/src/view/addProduct/Sidebar/index.js
index 3497c32..caa4b23 100644
--- a/src/view/addProduct/Sidebar/index.js
+++ b/src/view/addProduct/Sidebar/index.js
@@ -1,5 +1,6 @@
 import React from "react";
 import Grades from "../components/grade";
+import LableInput from "../components/lable";
 import TagsInput from "../components/tags";
 
 
@@ -22,6 +23,7 @@ const SideAP = () => {
             </div>
             <Grades />
             <TagsInput />
+            <LableInput />
         </div>
     )
 }
diff --git a/src/view/addProduct/components/lable.js b/src/view/addProduct/components/lable.js
new file mode 100644
index 0000000..a9a316d
--- /dev/null
+++ b/src/view/addProduct/components/lable.js
@@ -0,0 +1,98 @@
+import React, { useState, useEffect } from "react";
+import { HexColorPicker } from "react-colorful";
+
+const LableInput = () => {
+    const [tags, setTags] = useState([]);
+    const [tag, setTag] = useState(null);
+    const [fakeState, setFakeState] = useState(5);
+    const initialColor = 'linear-gradient(143deg, rgba(2,0,36,1) 0%, rgba(121,9,9,1) 0%, rgba(137,71,8,1) 9%, rgba(147,143,7,1) 18%, rgba(71,159,6,1) 29%, rgba(5,178,69,1) 37%, rgba(5,178,185,1) 48%, rgba(4,56,197,1) 57%, rgba(54,3,209,1) 66%, rgba(160,3,216,1) 76%, rgba(236,1,167,1) 87%, rgba(255,0,0,1) 100%)'
+    const [color, setColor] = useState(initialColor);
+    const [colorPopUp, setColorPopUp] = useState(false);
+
+    useEffect(() => {
+        if (tag) {
+            tags.push(tag);
+            setFakeState(fakeState + 1)
+            console.log(tags)
+        }
+
+    }, [tag]);
+
+
+
+    return (
+        <div className="w-full rtl bg-white border mx-2 my-4 rounded-lg border-grayE0  flex flex-col py-6">
+            <h1 className="text-blue3A text-lg font-bold w-full text-right px-4 mb-2 border-r-4 border-blue65">
+                لیبل محصول
+            </h1>
+            <p className="text-xs font-bold text-right pr-4 text-gray-600 mb-6">توجه: امکان اضافه کردن فقط 3 لیبل بر روی تصاویر شاخص وجود دارد</p>
+            <div className="flex  px-4 mb-2">
+                <input type="text" className="bg-white border border-grayE0 h-12 w-full outline-none px-2 ml-2 rounded-md" id="lableInput"
+                    onKeyDown={(e) => {
+                        if (e.key == 'Enter' && document.getElementById('colorInput').value) {
+                            setTag({
+                                title: e.target.value,
+                                color: document.getElementById('colorInput').value
+                            });
+                            document.getElementById('lableInput').value = null
+                        }
+                    }} />
+
+
+            </div>
+            <div className="w-full px-4 flex items-center justify-between">
+                <div className="flex items-center">
+                    <input type="text" className="bg-white border border-grayE0 h-14 w-2/5 text-center outline-none px-2 ml-2 rounded-lg" id="colorInput"
+                        value={colorPopUp ? color : null}
+                        placeholder="کد رنگ"
+                        onChange={(e) => { if (e.target.value !== '') { setColor(e.target.value) } else { setColor(initialColor) } console.log(color, e.target.value); }} />
+
+                    <div className="h-14 w-14 rounded-lg cursor-pointer"
+                        style={{ background: color }}
+                        onClick={() => setColorPopUp(true)}
+                    >
+
+                    </div>
+                </div>
+
+
+
+                <button className="bg-grayE0 w-24 h-14 mx-2 font-bold text-gray-600 rounded-lg" onClick={() => {
+                    setTag({
+                        title: document.getElementById('lableInput').value,
+                        color: document.getElementById('colorInput').value
+                    });
+                    document.getElementById('lableInput').value = null;
+                    document.getElementById('colorInput').value = null
+                    setColor(initialColor)
+                }}>
+                    افزودن
+                </button>
+            </div>
+            {colorPopUp && <div className="flex flex-col absolute left-2 p-6 py-2 pb-6 bg-gray-100 border border-gray-200 rounded-lg mr-20 ">
+                <div className="w-full text-left flex justify-end"><p className="cursor-pointer text-xl bg-gray-300 w-1/6 flex items-center justify-center text-gray-500 mb-2 rounded-md"
+                    onClick={() => setColorPopUp(false)}>X</p></div>
+                <HexColorPicker color={color} onChange={setColor} />
+            </div>
+            }
+            <div className="w-full px-4 flex flex-wrap mt-2">
+                {
+                    tags.map(
+                        (item, index) => (
+                            <div className="bg-opacity-30 py-1 flex items-center justify-center px-4 m-1 rtl rounded-md" style={{ color: item.color, background:item.color+15 }}>
+
+                                <p>{item.title}</p>
+                                <p className="mr-1 cursor-pointer" onClick={() => { tags.splice(tags.findIndex(e => e === item), 1); setFakeState(!fakeState); }}>x</p>
+
+                            </div>
+                        )
+                    )
+                }
+            </div>
+
+
+        </div>
+    )
+}
+
+export default LableInput;
\ No newline at end of file
diff --git a/src/view/addProduct/components/tags.js b/src/view/addProduct/components/tags.js
index dc0b99b..8b4eeaf 100644
--- a/src/view/addProduct/components/tags.js
+++ b/src/view/addProduct/components/tags.js
@@ -13,6 +13,9 @@ const TagsInput = () => {
         }
         
       }, [tag]);
+
+     
+    
     return(
         <div className="w-full rtl bg-white border mx-2 my-4 rounded-lg border-grayE0  flex flex-col py-6">
             <h1 className="text-blue3A text-lg font-bold w-full text-right px-4 mb-6 border-r-4 border-blue65">
@@ -32,7 +35,7 @@ const TagsInput = () => {
                             <div className="bg-gray-200 py-1 flex items-center justify-center px-4 m-1 rtl rounded-md">
 
                                 <p>{item}</p>
-                                <p className="mr-1">x</p>
+                                <p className="mr-1 cursor-pointer" onClick={() => {tags.splice(tags.findIndex(e => e === item),1); setFakeState(!fakeState);}}>x</p>
                             
                             </div>
                         )
diff --git a/src/view/addProduct/index.js b/src/view/addProduct/index.js
index 45b463a..8be3d50 100644
--- a/src/view/addProduct/index.js
+++ b/src/view/addProduct/index.js
@@ -4,7 +4,7 @@ import SideAP from "./Sidebar";
 
 const AddProduct = () => {
     return(
-        <div className="w-11/12 h-screen  bg-grayFD flex items-start mt-20 py-10 justify-center">
+        <div className="w-[93%] h-screen  bg-grayFD flex items-start mt-20 py-10 justify-center">
             <div className="w-1/4">
             <SideAP />
             </div>
diff --git a/src/view/services/index.js b/src/view/services/index.js
index f3c908a..b5054ed 100644
--- a/src/view/services/index.js
+++ b/src/view/services/index.js
@@ -359,9 +359,9 @@ if (!isMobile){
                     },
                   ]
                 });
-                setPopUp(true);
                 console.log(gameId)
               }}
+              
             >
               {/* {console.log(product)} */}
               <Product
@@ -378,12 +378,16 @@ if (!isMobile){
                 productHolderHoverBorder="shadow-md"
                 teacher={product.vodTeacher}
                 catId={gameId}
-                btnOnClick={() =>
+                onClick={() => null}
+                btnOnClick={() =>{
                   pushToCart({
-                    productId: product?.productId,
-                    userId: product?.userId,
+                    productId: product?.id,
+                    
                     count: 1,
-                  })
+                  });
+                  setPopUp(false)
+                  console.log(product.id)
+                }
                 }
               />
             </Link>
@@ -618,7 +622,7 @@ if (!isMobile){
                     },
                   ]
                 });
-                setPopUp(true);
+                // setPopUp(true);
                 // console.log(gameId)
               }}
             >
@@ -639,10 +643,12 @@ if (!isMobile){
                 catId={gameId}
                 btnOnClick={() =>
                   pushToCart({
-                    productId: product?.productId,
-                    userId: product?.userId,
+                    productId: product?.id,
+                    // userId: product?.userId,
                     count: 1,
                   })
+                  
+                  
                 }
               />
             </Link>
diff --git a/yarn.lock b/yarn.lock
index ede4c9e..4209540 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7650,6 +7650,11 @@
     "regenerator-runtime" "^0.13.9"
     "whatwg-fetch" "^3.6.2"
 
+"react-colorful@^5.5.1":
+  "integrity" "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg=="
+  "resolved" "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz"
+  "version" "5.5.1"
+
 "react-dev-utils@^12.0.0":
   "integrity" "sha512-xBQkitdxozPxt1YZ9O1097EJiVpwHr9FoAuEVURCKV0Av8NBERovJauzP7bo1ThvuhZ4shsQ1AJiu4vQpoT1AQ=="
   "resolved" "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz"
@@ -7680,7 +7685,7 @@
     "strip-ansi" "^6.0.1"
     "text-table" "^0.2.0"
 
-"react-dom@*", "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0", "react-dom@^16.11.0", "react-dom@^17.0.2", "react-dom@>=0.14.0", "react-dom@>=16", "react-dom@>=16.8", "react-dom@0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x":
+"react-dom@*", "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0", "react-dom@^16.11.0", "react-dom@^17.0.2", "react-dom@>=0.14.0", "react-dom@>=16", "react-dom@>=16.8", "react-dom@>=16.8.0", "react-dom@0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x":
   "integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA=="
   "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
   "version" "17.0.2"
@@ -7872,7 +7877,7 @@
   dependencies:
     "clsx" "^1.1.1"
 
-"react@*", "react@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react@^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.11.0", "react@^16.8.3 || ^17", "react@^17.0.2", "react@>= 16", "react@>= 16.8", "react@>=0.14.0", "react@>=16", "react@>=16.8", "react@0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x", "react@17.0.2":
+"react@*", "react@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react@^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.11.0", "react@^16.8.3 || ^17", "react@^17.0.2", "react@>= 16", "react@>= 16.8", "react@>=0.14.0", "react@>=16", "react@>=16.8", "react@>=16.8.0", "react@0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x", "react@17.0.2":
   "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
   "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
   "version" "17.0.2"