diff --git a/src/components/ProductSuggestion/index.js b/src/components/ProductSuggestion/index.js
index 5707740..06525cf 100644
--- a/src/components/ProductSuggestion/index.js
+++ b/src/components/ProductSuggestion/index.js
@@ -17,9 +17,8 @@ const ProductSuggestion = ({ suggestions, selected }) => {
           <div className="flex flex-col sm:flex-row mb-7" key={index}>
             <img src={suggestion.plusIcon} alt="" className="mx-4" />
             <div
-              className={`flex flex-col items-center border rounded-md border-gray-300 p-5 mx-4 cursor-pointer
-               ${selectedProduct === suggestion ? "bg-white" : ""}`}
-              onClick={() => setSelectedProduct(suggestion)}
+              className={`flex flex-col items-center border rounded-md border-gray-300 p-5 mx-4 cursor-pointer transition-all ease-in-out duration-500
+                ${selectedProduct === suggestion ? "bg-white" : ""}`}
             >
               <img
                 src={suggestion.productImage}
@@ -38,6 +37,7 @@ const ProductSuggestion = ({ suggestions, selected }) => {
                   <span className="text-xs">انتخاب شما</span>
                 )}
                 <input
+                  onClick={() => setSelectedProduct(suggestion)}
                   className="checkbox-input mt-4 cursor-pointer w-4 h-4"
                   type="checkbox"
                 />