diff --git a/package-lock.json b/package-lock.json
index 053f952..09fe510 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-icons": "^4.3.1",
         "react-scripts": "5.0.0",
         "sass": "^1.45.0",
         "web-vitals": "^2.1.2"
@@ -13137,6 +13138,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
       "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
     },
+    "node_modules/react-icons": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
+      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -25319,6 +25328,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
       "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
     },
+    "react-icons": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
+      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index b2400fa..b4efaa5 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
     "react-scripts": "5.0.0",
     "sass": "^1.45.0",
     "web-vitals": "^2.1.2"
diff --git a/src/App.js b/src/App.js
index debe24b..f7e9a9b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,6 @@
 import "./App.scss";
 import ProductDesign from "./components/productDesign/ProductDesign";
 
-// import { library } from "@fortawesome/fontawesome-svg-core";
-// import { fab } from "@fortawesome/free-brands-svg-icons";
-// import { faCheckSquare, faCoffee } from "@fortawesome/free-solid-svg-icons";
-
-// library.add(fab, faCheckSquare, faCoffee);
-
 function App() {
   return (
     <div className="App">
diff --git a/src/components/productDesign/ProductDesign.js b/src/components/productDesign/ProductDesign.js
index 74f39f0..289414e 100644
--- a/src/components/productDesign/ProductDesign.js
+++ b/src/components/productDesign/ProductDesign.js
@@ -1,9 +1,10 @@
 import React from "react";
 import "./ProductDesign.scss";
+import StarRating from "../starRating/StarRating";
+
 import book from "../../assets/images/goldon.png";
 import heart from "../../assets/icons/vuesax-linear-heart.svg";
 import discountImg from "../../assets/icons/discount.png";
-// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const ProductDesign = ({
   colors,
@@ -89,524 +90,8 @@ const ProductDesign = ({
             {/* star holder */}
             {star && (
               <div className="flex items-center mt-2">
-                <ul className="flex">
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                </ul>
-                <span className="text-xs text-productContent font-bold">
-                  39
-                </span>
-              </div>
-            )}
-            {/* price holder */}
-            <div
-              className={`flex items-center justify-between ${priceDirection}`}
-            >
-              {/* price */}
-              <div className="mt-2">
-                <div
-                  className={`${
-                    priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
-                  }`}
-                >
-                  <span className="text-xs text-borderColor ml-2">قیمت</span>
-                  {discountPrice && (
-                    <p className="line-through text-xs text-borderColor mr-2">
-                      145<span>تومان</span>
-                    </p>
-                  )}
-                </div>
-                <p className="product-price-num inline">
-                  145.000<span>تومان</span>
-                </p>
-              </div>
-              {/* add to cart */}
-              <button
-                className={`addToCart ${
-                  priceDirection.indexOf("col") !== -1 ? "w-full" : ""
-                }`}
-              >
-                اضافه کردن به سبد خرید
-              </button>
-            </div>
-            {/* tag holder */}
-            {productTags && (
-              <div className="mt-2 flex flex-wrap">
-                <button className="product-tag">ارسال رایگان</button>
-                <button className="product-tag">برچسب های دیگر</button>
-                <button className="product-tag">دسته بندی به صورت کادو</button>
-              </div>
-            )}
-          </div>
-        </div>
-        {/* product items2 */}
-        <div className="product-items-holder">
-          {/* item1 */}
-          <div className="product-item">
-            {/*star img holder*/}
-            <div className="w-full relative">
-              {discountPricePercent && (
-                <div className="discountPriceBtn">
-                  <p className="dicountPriceNum">
-                    23<span>%</span>
-                  </p>
-                </div>
-              )}
-              {likeBtn && (
-                <div className="likeBtnBg">
-                  <img src={heart} alt="" className="w-full" />
-                </div>
-              )}
-              {discount && (
-                <div className="discountBtn">
-                  <img src={discountImg} alt="" className="w-full" />
-                </div>
-              )}
-              {/* img Holder */}
-              <div className="flex-shrink-0">
-                <img src={book} alt="" className="w-full rounded-lg" />
-              </div>
-              {/* select Color */}
-              {colors && (
-                <div className="absolute right-2 bottom-2">
-                  <ul className="flex ">
-                    <li className="ml-1 text-selectColor1">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                    <li className="ml-1 text-selectColor2">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                    <li className="ml-1 text-selectColor3">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                    <li className="ml-1 text-selectColor4">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                  </ul>
-                </div>
-              )}
-            </div>
-            {/* content holder */}
-            <div className="mt-4">
-              <h2 className={`productTitle ${productTitleAlignment}`}>
-                نسخه چاپی علموم تجربه هفتم
-              </h2>
-              {productContent && (
-                <p className="productContent">
-                  این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
-                  دیگری نیز دارد.
-                </p>
-              )}
-            </div>
-            {/* star holder */}
-            {star && (
-              <div className="flex items-center mt-2">
-                <ul className="flex">
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                </ul>
-                <span className="text-xs text-productContent font-bold">
-                  39
-                </span>
-              </div>
-            )}
-            {/* price holder */}
-            <div
-              className={`flex items-center justify-between ${priceDirection}`}
-            >
-              {/* price */}
-              <div className="mt-2">
-                <div
-                  className={`${
-                    priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
-                  }`}
-                >
-                  <span className="text-xs text-borderColor ml-2">قیمت</span>
-                  {discountPrice && (
-                    <p className="line-through text-xs text-borderColor mr-2">
-                      145<span>تومان</span>
-                    </p>
-                  )}
-                </div>
-                <p className="product-price-num inline">
-                  145.000<span>تومان</span>
-                </p>
-              </div>
-              {/* add to cart */}
-              <button
-                className={`addToCart ${
-                  priceDirection.indexOf("col") !== -1 ? "w-full" : ""
-                }`}
-              >
-                اضافه کردن به سبد خرید
-              </button>
-            </div>
-            {/* tag holder */}
-            {productTags && (
-              <div className="mt-2 flex flex-wrap">
-                <button className="product-tag">ارسال رایگان</button>
-                <button className="product-tag">برچسب های دیگر</button>
-                <button className="product-tag">دسته بندی به صورت کادو</button>
-              </div>
-            )}
-          </div>
-        </div>
-        {/* product items3 */}
-        <div className="product-items-holder">
-          {/* item1 */}
-          <div className="product-item">
-            {/*star img holder*/}
-            <div className="w-full relative">
-              {discountPricePercent && (
-                <div className="discountPriceBtn">
-                  <p className="dicountPriceNum">
-                    23<span>%</span>
-                  </p>
-                </div>
-              )}
-              {likeBtn && (
-                <div className="likeBtnBg">
-                  <img src={heart} alt="" className="w-full" />
-                </div>
-              )}
-              {discount && (
-                <div className="discountBtn">
-                  <img src={discountImg} alt="" className="w-full" />
-                </div>
-              )}
-              {/* img Holder */}
-              <div className="flex-shrink-0">
-                <img src={book} alt="" className="w-full rounded-lg" />
-              </div>
-              {/* select Color */}
-              {colors && (
-                <div className="absolute right-2 bottom-2">
-                  <ul className="flex ">
-                    <li className="ml-1 text-selectColor1">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                    <li className="ml-1 text-selectColor2">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                    <li className="ml-1 text-selectColor3">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                    <li className="ml-1 text-selectColor4">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                  </ul>
-                </div>
-              )}
-            </div>
-            {/* content holder */}
-            <div className="mt-4">
-              <h2 className={`productTitle ${productTitleAlignment}`}>
-                نسخه چاپی علموم تجربه هفتم
-              </h2>
-              {productContent && (
-                <p className="productContent">
-                  این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
-                  دیگری نیز دارد.
-                </p>
-              )}
-            </div>
-            {/* star holder */}
-            {star && (
-              <div className="flex items-center mt-2">
-                <ul className="flex">
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                </ul>
-                <span className="text-xs text-productContent font-bold">
-                  39
-                </span>
-              </div>
-            )}
-            {/* price holder */}
-            <div
-              className={`flex items-center justify-between ${priceDirection}`}
-            >
-              {/* price */}
-              <div className="mt-2">
-                <div
-                  className={`${
-                    priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
-                  }`}
-                >
-                  <span className="text-xs text-borderColor ml-2">قیمت</span>
-                  {discountPrice && (
-                    <p className="line-through text-xs text-borderColor mr-2">
-                      145<span>تومان</span>
-                    </p>
-                  )}
-                </div>
-                <p className="product-price-num inline">
-                  145.000<span>تومان</span>
-                </p>
-              </div>
-              {/* add to cart */}
-              <button
-                className={`addToCart ${
-                  priceDirection.indexOf("col") !== -1 ? "w-full" : ""
-                }`}
-              >
-                اضافه کردن به سبد خرید
-              </button>
-            </div>
-            {/* tag holder */}
-            {productTags && (
-              <div className="mt-2 flex flex-wrap">
-                <button className="product-tag">ارسال رایگان</button>
-                <button className="product-tag">برچسب های دیگر</button>
-                <button className="product-tag">دسته بندی به صورت کادو</button>
-              </div>
-            )}
-          </div>
-        </div>
-        {/* product items4 */}
-        <div className="product-items-holder">
-          {/* item1 */}
-          <div className="product-item">
-            {/*star img holder*/}
-            <div className="w-full relative">
-              {discountPricePercent && (
-                <div className="discountPriceBtn">
-                  <p className="dicountPriceNum">
-                    23<span>%</span>
-                  </p>
-                </div>
-              )}
-              {likeBtn && (
-                <div className="likeBtnBg">
-                  <img src={heart} alt="" className="w-full" />
-                </div>
-              )}
-              {discount && (
-                <div className="discountBtn">
-                  <img src={discountImg} alt="" className="w-full" />
-                </div>
-              )}
-              {/* img Holder */}
-              <div className="flex-shrink-0">
-                <img src={book} alt="" className="w-full rounded-lg" />
-              </div>
-              {/* select Color */}
-              {colors && (
-                <div className="absolute right-2 bottom-2">
-                  <ul className="flex ">
-                    <li className="ml-1 text-selectColor1">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                    <li className="ml-1 text-selectColor2">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                    <li className="ml-1 text-selectColor3">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                    <li className="ml-1 text-selectColor4">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                  </ul>
-                </div>
-              )}
-            </div>
-            {/* content holder */}
-            <div className="mt-4">
-              <h2 className={`productTitle ${productTitleAlignment}`}>
-                نسخه چاپی علموم تجربه هفتم
-              </h2>
-              {productContent && (
-                <p className="productContent">
-                  این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
-                  دیگری نیز دارد.
-                </p>
-              )}
-            </div>
-            {/* star holder */}
-            {star && (
-              <div className="flex items-center mt-2">
-                <ul className="flex">
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                </ul>
-                <span className="text-xs text-productContent font-bold">
-                  39
-                </span>
-              </div>
-            )}
-            {/* price holder */}
-            <div
-              className={`flex items-center justify-between ${priceDirection}`}
-            >
-              {/* price */}
-              <div className="mt-2">
-                <div
-                  className={`${
-                    priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
-                  }`}
-                >
-                  <span className="text-xs text-borderColor ml-2">قیمت</span>
-                  {discountPrice && (
-                    <p className="line-through text-xs text-borderColor mr-2">
-                      145<span>تومان</span>
-                    </p>
-                  )}
-                </div>
-                <p className="product-price-num inline">
-                  145.000<span>تومان</span>
-                </p>
-              </div>
-              {/* add to cart */}
-              <button
-                className={`addToCart ${
-                  priceDirection.indexOf("col") !== -1 ? "w-full" : ""
-                }`}
-              >
-                اضافه کردن به سبد خرید
-              </button>
-            </div>
-            {/* tag holder */}
-            {productTags && (
-              <div className="mt-2 flex flex-wrap">
-                <button className="product-tag">ارسال رایگان</button>
-                <button className="product-tag">برچسب های دیگر</button>
-                <button className="product-tag">دسته بندی به صورت کادو</button>
-              </div>
-            )}
-          </div>
-        </div>
-        {/* product items5 */}
-        <div className="product-items-holder">
-          {/* item1 */}
-          <div className="product-item">
-            {/*star img holder*/}
-            <div className="w-full relative">
-              {discountPricePercent && (
-                <div className="discountPriceBtn">
-                  <p className="dicountPriceNum">
-                    23<span>%</span>
-                  </p>
-                </div>
-              )}
-              {likeBtn && (
-                <div className="likeBtnBg">
-                  <img src={heart} alt="" className="w-full" />
-                </div>
-              )}
-              {discount && (
-                <div className="discountBtn">
-                  <img src={discountImg} alt="" className="w-full" />
-                </div>
-              )}
-              {/* img Holder */}
-              <div className="flex-shrink-0">
-                <img src={book} alt="" className="w-full rounded-lg" />
-              </div>
-              {/* select Color */}
-              {colors && (
-                <div className="absolute right-2 bottom-2">
-                  <ul className="flex ">
-                    <li className="ml-1 text-selectColor1">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                    <li className="ml-1 text-selectColor2">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                    <li className="ml-1 text-selectColor3">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                    <li className="ml-1 text-selectColor4">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                  </ul>
-                </div>
-              )}
-            </div>
-            {/* content holder */}
-            <div className="mt-4">
-              <h2 className={`productTitle ${productTitleAlignment}`}>
-                نسخه چاپی علموم تجربه هفتم
-              </h2>
-              {productContent && (
-                <p className="productContent">
-                  این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
-                  دیگری نیز دارد.
-                </p>
-              )}
-            </div>
-            {/* star holder */}
-            {star && (
-              <div className="flex items-center mt-2">
-                <ul className="flex">
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                  <li className="ml-1 text-productStar">
-                    {/* <FontAwesomeIcon icon="check-square" /> */}
-                  </li>
-                </ul>
-                <span className="text-xs text-productContent font-bold">
+                <StarRating />
+                <span className="text-xs text-productContent font-bold mr-2">
                   39
                 </span>
               </div>
@@ -664,7 +149,7 @@ ProductDesign.defaultProps = {
   likeBtn: true,
   discount: true,
   discountPricePercent: true,
-  discountPrice: true,
+  discountPrice: false,
   productContent: true,
   star: true,
   productTags: true,
diff --git a/src/components/starRating/StarRating.js b/src/components/starRating/StarRating.js
new file mode 100644
index 0000000..3489c53
--- /dev/null
+++ b/src/components/starRating/StarRating.js
@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import "./StarRating.scss";
+
+const StarRating = () => {
+  const [rating, setRating] = useState(0);
+  const [hover, setHover] = useState(0);
+  return (
+    <div className="star-rating">
+      {[...Array(5)].map((star, index) => {
+        index += 1;
+        return (
+          <button
+            type="button"
+            key={index}
+            className={index <= (hover || rating) ? "on" : "off"}
+            onClick={() => setRating(index)}
+            onMouseEnter={() => setHover(index)}
+            onMouseLeave={() => setHover(rating)}
+          >
+            <span className="star">&#9733;</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default StarRating;
diff --git a/src/components/starRating/StarRating.scss b/src/components/starRating/StarRating.scss
new file mode 100644
index 0000000..7b92e02
--- /dev/null
+++ b/src/components/starRating/StarRating.scss
@@ -0,0 +1,6 @@
+.on {
+  color: #ffbd35;
+}
+.off {
+  color: #ccc;
+}