diff --git a/src/components/ThemeColor/ColorCard.js b/src/components/ThemeColor/ColorCard.js
index 32692ba..d149ec4 100644
--- a/src/components/ThemeColor/ColorCard.js
+++ b/src/components/ThemeColor/ColorCard.js
@@ -16,7 +16,7 @@ const ColorCard = ({
         className={`w-[344px] h-[130px] flex flex-col cursor-pointer rounded-sm relative p-4 bg-${item} ${
           text ? `text-${item}Text` : ""
         } ${borderColor ? ` border border-${item}Border` : ""} `}
-        onClick={() => setItem(item)}
+        onClick={(e) => setItem(item, e)}
       >
         
         
@@ -27,7 +27,7 @@ const ColorCard = ({
               theme={theme}
               onClick={(e) => {
                 e.stopPropagation();
-                setItem(item + "Text");
+                setItem(item + "Text", e);
               }}
             />
           )}
@@ -38,7 +38,7 @@ const ColorCard = ({
               theme={theme}
               onClick={(e) => {
                 e.stopPropagation();
-                setItem(item + "Border");
+                setItem(item + "Border", e);
               }}
             />
           )}
@@ -51,7 +51,7 @@ const ColorCard = ({
             className={`flex flex-col cursor-pointer rounded-sm relative p-4 w-[165px] h-[75px] bg-${item}Dark ${
               text ? `text-${item}Text` : ""
             }`}
-            onClick={() => setItem(item + "Dark")}
+            onClick={(e) => setItem(item + "Dark", e)}
           >
             
 setItem(item + "Light")}
+            onClick={(e) => setItem(item + "Light", e)}
           >
              {
-  const [item, setItem] = useState(null);
+  const [item, setItem_] = useState(null);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const setItem = (nitem, e) => {
+    e.stopPropagation();
+    if (item == nitem) nitem = "";
+    setItem_(nitem);
+    setPosition({ top: e.clientY, left: e.clientX });
+  };
   const [theme, setTheme] = useState(defaultTheme);
   putTheme(theme);
 
   return (
-    
+    
 setItem_("")}
+    >
       
         Theme Properties
       
@@ -34,7 +44,7 @@ const ThemeColor = ({ inputFields }) => {
           
-          
+          
           
             بعد از نوشتن عدد مورد نظر حتما از
             px
@@ -77,6 +87,7 @@ const ThemeColor = ({ inputFields }) => {
             Original Colors
           
           {/* Primary && Secondary */}
+
           
              {
           
         
+       {
+          setColor(updatedColor.hex);
+          setTheme({ ...theme, [item]: updatedColor.hex });
+        }}
+      />
+    
   );
 };
 export default Picker;
diff --git a/tailwind.config.js b/tailwind.config.js
index 94488f1..306e00d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -34,13 +34,13 @@ module.exports = {
       error: "var(--theme-error)",
       errorText: "var(--theme-errorText)",
     },
-    screens: {
-      sm: "var(--theme-sm)",
-      md: "var(--theme-md)",
-      lg: "var(--theme-lg)",
-      xl: "var(--theme-xl)",
-      "2xl": "var(--theme-2xl)",
-    },
+    // screens: {
+    //   sm: "var(--theme-sm)",
+    //   md: "var(--theme-md)",
+    //   lg: "var(--theme-lg)",
+    //   xl: "var(--theme-xl)",
+    //   "2xl": "var(--theme-2xl)",
+    // },
   },
   plugins: [
     require("@themesberg/flowbite/plugin"),