diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js
index 38d5dd1..f9d4f26 100644
--- a/src/components/Checkbox/index.js
+++ b/src/components/Checkbox/index.js
@@ -2,7 +2,7 @@ import React from "react";
 import './index.css';
 
 export default function Checkbox(props) {
-  console.log(props)
+  // console.log(props)
   return (
     <div>
       <svg className="checkbox-symbol">
diff --git a/src/components/Product/index.js b/src/components/Product/index.js
index 24fbab1..e7c5be7 100644
--- a/src/components/Product/index.js
+++ b/src/components/Product/index.js
@@ -1,20 +1,22 @@
 import React, { useState } from "react";
+import {connect} from 'react-redux';
 
 import StarRating from "../StarRating";
 // import Tag from "../Tag";
 // import ReactTooltip from "react-tooltip";
 
 import book from "./goldon.png";
-import watermelon from "./watermelon.png";
+// import watermelon from "./watermelon.png";
 import heart from "./vuesax-linear-heart.svg";
 import discountImg from "./discount.png";
-import YellowDotIcon from "./yellowDotIcon.svg";
-import RedDotIcon from "./redDotIcon.svg";
-import PurpleDotIcon from "./purpleDotIcon.svg";
-import LightBlueDotIcon from "./lightBlueDotIcon.svg";
-import StarRatingComponent from "react-star-rating-component";
+// import YellowDotIcon from "./yellowDotIcon.svg";
+// import RedDotIcon from "./redDotIcon.svg";
+// import PurpleDotIcon from "./purpleDotIcon.svg";
+// import LightBlueDotIcon from "./lightBlueDotIcon.svg";
+// import StarRatingComponent from "react-star-rating-component";
 
 const ProductDesign = ({
+  grades,
   colors,
   likeBtn,
   discount,
@@ -23,6 +25,7 @@ const ProductDesign = ({
   productContent,
   star,
   productTags,
+  product,
   priceDirection,
   productTitleAlignment,
   priceHolder,
@@ -34,28 +37,27 @@ const ProductDesign = ({
   productCatTextColor,
   rangeHolder,
   verticalImg,
-  horizontalImg,
   rangeWidth,
   addToCartHolder,
   productName,
   productPrice,
-  productImg,
   writeGHEIMAT,
   numberOfRegards,
   productHolderHoverBorder,
   hoverMode,
-  big,
-  starRate
+  starRate,
 }) => {
   const [isHovering, setIsHovering] = useState(false);
   return (
-    <div className={`flex flex-wrap sm:flex-nowrap justify-around ${big ? 'm' : 'w-48 m-2'} `}
-    style={big ? {width: '300px'} : {}}
-    
+    <div
+      className={`flex flex-wrap sm:flex-nowrap justify-around`}
+      style={{ direction : 'rtl' }}
     >
-      <div className="w-full flex flex-wrap items-center justify-around my-5 px-4" >
+      <div className="w-full flex flex-wrap items-center justify-around my-5 px-4">
         <div
-          className={`w-full sm:w-60 md:w-72 ${big ? '' : 'mx-5'} rounded-lg transition-all p-2 my-3 ${productHolderBorder} ${hoverMode == 'blue' ? 'hover:bg-grayF4' : null} ${productHolderBorderColor} hover:${productHolderHoverBorder} hover:` }
+          className={`w-full sm:w-60 md:w-72 rounded-lg transition-all p-2 my-3 ${productHolderBorder} ${
+            hoverMode == "blue" ? "hover:bg-grayF4" : null
+          } ${productHolderBorderColor} hover:${productHolderHoverBorder} hover:`}
           onMouseEnter={() => setIsHovering(true)}
           onMouseLeave={() => setIsHovering(false)}
         >
@@ -82,18 +84,17 @@ const ProductDesign = ({
               )}
             </div>
             {/* img */}
-            <div className={`w-full ${big ? 'h-60' : 'h-48'} flex bg-grayF4 p-0 justify-center rounded-lg`}>
+            <div
+              className={`w-full flex bg-grayF4 p-0 justify-center rounded-lg`}
+            >
               {verticalImg && (
                 <img
-                  src={productImg}
+                  src={`https://dnvn.ir/api/v1/file/${product.fileIds}`}
                   alt=""
-                  className="h-full rounded-lg cursor-pointer py-5"
-                  
+                  className="rounded-lg cursor-pointer py-5"
+                  style={{height : 'calc(100vw / 5.1)', width : 'calc(100% - 75px)'}}
                 />
               )}
-              {horizontalImg && (
-                <img src={watermelon} alt="" className="w-full rounded-lg" />
-              )}
             </div>
             {/* select Color */}
             {/* {colors && (
@@ -128,7 +129,6 @@ const ProductDesign = ({
                 <ReactTooltip place="top" type="dark" effect="float" />
               </div>
             )} */}
-
           </div>
           {/* product content */}
           <div className="px-2">
@@ -136,7 +136,7 @@ const ProductDesign = ({
               <h2
                 className={`leading-4 text-xl font-black py-2 ${productTitleColor} ${productTitleAlignment}`}
               >
-                {productName}
+                {product?.product[1]?.name}
               </h2>
               {productContent && (
                 <p
@@ -147,15 +147,17 @@ const ProductDesign = ({
                 </p>
               )}
               {productCat && (
-                <span className={`text-md py-1 font-light ${productCatTextColor}`}>
-                  {productCat}
+                <span
+                  className={`text-md py-1 font-light ${productCatTextColor}`}
+                >
+                  {grades[product.gradeId]}
                 </span>
               )}
             </div>
             {/* star */}
             {star && (
               <div className="flex items-center mt-3">
-                <StarRating value={starRate} size={big ? '' : 'small'}/>
+                <StarRating value={starRate} />
                 <span className="text-xs text-productContent font-bold text-gray-500 mr-2">
                   بر اساس {numberOfRegards} بررسی
                 </span>
@@ -168,10 +170,15 @@ const ProductDesign = ({
               >
                 <div className="mt-2">
                   <div
-                    className={`${priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
-                      }`}
+                    className={`${
+                      priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
+                    }`}
                   >
-                    {writeGHEIMAT && <span className="text-xs text-borderColor ml-2">قیمت</span>}
+                    {writeGHEIMAT && (
+                      <span className="text-xs text-borderColor ml-2">
+                        قیمت
+                      </span>
+                    )}
                     {/* price with line on it */}
                     {discountPrice && (
                       <p className="line-through text-xs text-borderColor mr-2">
@@ -180,35 +187,33 @@ const ProductDesign = ({
                     )}
                   </div>
                   <p className="text-xl text-productPrice font-semibold inline text-blue5F">
-                    {productPrice} <span>تومان</span>
+                    {product?.product[1]?.price} <span>تومان</span>
                   </p>
                 </div>
                 {/* add to cart */}
                 {addToCartHolder && (
                   <button
-                    className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2 ${priceDirection.indexOf("col") !== -1 ? "w-full" : ""
-                      }`}
+                    className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2 ${
+                      priceDirection.indexOf("col") !== -1 ? "w-full" : ""
+                    }`}
                   >
                     اضافه کردن به سبد خرید
                   </button>
-
                 )}
-
-
               </div>
-
             )}
 
-
-            
-        {hoverMode == 'blue' ?<div className="w-full flex justify-center mt-4">
-              <div
-                className={`bg-blueC0 text-white rounded p-4 text-xs justify-center ${isHovering ? "" : "hidden"
+            {hoverMode == "blue" ? (
+              <div className="w-full flex justify-center mt-4">
+                <div
+                  className={`bg-blueC0 text-white rounded p-4 text-xs justify-center ${
+                    isHovering ? "" : "hidden"
                   }`}
-              >
-                <button>افزودن به سبد خرید</button>
+                >
+                  <button>افزودن به سبد خرید</button>
+                </div>
               </div>
-            </div> : null}
+            ) : null}
 
             {/* {productTags && (
               <div className="mt-2 flex flex-wrap">
@@ -224,7 +229,6 @@ const ProductDesign = ({
                 ></div>
               </div>
             )}
-
           </div>
         </div>
       </div>
@@ -232,7 +236,11 @@ const ProductDesign = ({
   );
 };
 
-export default ProductDesign;
+const mapStateToProps = (state) => ({
+  grades : state.publicApi.grades,
+})
+
+export default connect(mapStateToProps)(ProductDesign);
 
 // text colors i used for product title:
 // text-darkCrimsonTextColor
@@ -281,5 +289,5 @@ ProductDesign.defaultProps = {
   //میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم
   priceDirection: "flex-row",
   productImg: book,
-  writeGHEIMAT: false
+  writeGHEIMAT: false,
 };
diff --git a/src/components/ProductImage/index.js b/src/components/ProductImage/index.js
index 62a52c9..25fa0c6 100644
--- a/src/components/ProductImage/index.js
+++ b/src/components/ProductImage/index.js
@@ -5,7 +5,7 @@ import "./index.scss";
 import productImg from "./product-image.jpg";
 
 const ProductImage = ({ images }) => {
-  console.log(images.length);
+  // console.log(images.length);
 
   return (
       <div className="flex flex-row w-1/3 gap-2">
diff --git a/src/components/SalesContainer/index.js b/src/components/SalesContainer/index.js
deleted file mode 100644
index 1043327..0000000
--- a/src/components/SalesContainer/index.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, {useState, useEffect} from "react";
-import { connect } from "react-redux";
-import { book, publicApi } from "../../redux/actions";
-import ScrollContainer from "react-indiana-drag-scroll";
-import { Link } from "react-router-dom";
-import Product from "../Product";
-import './index.css';
-
-const SalesContainer = ({
-    list, getList,
-    grades
-}) =>{
-    const [filter, setFilter] = useState({
-        search: "",
-        grade: "",
-        productsType: "کتاب",
-      });
-      useEffect(() => {
-        getList();
-      }, []);
-    return(
-        <div className="w-full my-10">
-            <div className="w-full border-b-2 border-solid border-blue-300 mb-24" style={{height: '100px'}}>
-            <div className="w-1/3 p-10 bg-white flex justify-between items-center" style={{
-                marginBottom:'-5px',
-                height:'200px'
-            }} onClick={() => console.log(list)}>
-                
-                <div className="flex items-center ">
-                {/* <div className="w-6 h-6 bg-blue-300 ml-4 rounded-full"></div> */}
-                    <h1 className="text-3xl leading-normal">
-                        
-                        <h3 className=" bg-blueC0 text-white text-center"> دوشنبه </h3>
-                        <h3 className="mr-4 w-24 text-center" style={{background: '#EFFF00'}}> کتاااابی </h3>
-                        
-                        </h1>
-                        
-                </div>
-                <div className="flex items-center">
-                    <p className="text-md">بیش از ۵۰ کتاب تخفیف خورده</p>
-                    <div className="w-6 h-6 bg-blue-300 mr-4 rounded-full">
-                    
-                    </div>
-                    
-                </div>
-
-            </div>
-
-</div>    
-        <ScrollContainer className="flex  overflow-x-scroll  border-t-0 py-4 pl-10" style={{height:'550px'}} >
-          {
-          list?.map((product, index) => (
-            <Link to={"/products/" + product?.id}>
-              <Product
-                key={`prod_takhfif${index}`}
-                productsType={filter.productsType}
-                product={product}
-                index={Number(index)}
-                productName={`کتاب ${product?.name}`}
-                productCat={`پایه ${grades[product?.gradeId]}`}
-                productPrice={100000}
-                productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
-                numberOfRegards={160}
-                productTitleColor='text-blue5F'
-                productCatTextColor='text-blueC0'
-                productHolderBorder=''
-                productHolderHoverBorder='shadow-md'
-                big
-                starRate={Math.floor(Math.random() * 5) + 1}
-                discountPricePercent
-                hoverMode='blue'
-              />
-            </Link>
-            ))}
-        </ScrollContainer>
-        </div>
-    )
-}
- 
-  const mapStateToProps = (state) => ({
-    list: state.book.list,
-    isDark: state.publicApi.isDark,
-  });
-  export default connect(mapStateToProps, { getList: book.list })(SalesContainer);
\ No newline at end of file
diff --git a/src/components/VerticalExpandableProductFilter/index.js b/src/components/VerticalExpandableProductFilter/index.js
index 7f583a8..82d779d 100644
--- a/src/components/VerticalExpandableProductFilter/index.js
+++ b/src/components/VerticalExpandableProductFilter/index.js
@@ -61,7 +61,7 @@ export default function VerticalExpandableProductFilter(props) {
               key={i}
               className="hover:bg-gray-100 px-3 flex flex-row items-center justify-between py-2"
             >
-                {console.log(i)}
+                {/* {console.log(i)} */}
               <div className="flex flex-row items-center">
                 <Checkbox name={`ch${name}_${i}`} checked={checkedBox[i]} onclick={(e) => {
                   checkedBox[i] = !checkedBox[i]
diff --git a/src/components/VodProduct/index.js b/src/components/VodProduct/index.js
index 363833f..c3f1ded 100644
--- a/src/components/VodProduct/index.js
+++ b/src/components/VodProduct/index.js
@@ -60,7 +60,7 @@ const VodProduct = ({
     }, 1000);
   });
 
-  console.log(index);
+  // console.log(index);
   return (
     <>
       {/* product UI Design */}
diff --git a/src/utils/comments.js b/src/utils/comments.js
index 5b6cfd8..a3fd1dc 100644
--- a/src/utils/comments.js
+++ b/src/utils/comments.js
@@ -18,5 +18,5 @@ export const connectToParent = (list) => {
     }
   }
   // comments = comments.filter((comment) => comment.pid === null);
-  console.log(comments);
+  // console.log(comments);
 };
diff --git a/src/utils/scroll.js b/src/utils/scroll.js
index 61b1486..c665e9b 100644
--- a/src/utils/scroll.js
+++ b/src/utils/scroll.js
@@ -157,7 +157,7 @@ class scroll {
   initializeBoxPosition = (currentScroll) => {
     const height= window.innerHeight;
     if(currentScroll < height){
-      console.log(currentScroll);
+      // console.log(currentScroll);
       return {
         translateX: -5, 
         translateY: -5,
diff --git a/src/views/Auth/Profile/index.js b/src/views/Auth/Profile/index.js
index 9b8ecf0..5123ebb 100644
--- a/src/views/Auth/Profile/index.js
+++ b/src/views/Auth/Profile/index.js
@@ -336,7 +336,7 @@ function Profile({
                 />
               </div>
             ) : null}
-            {console.log(province)}
+            {/* {console.log(province)} */}
             <div className="mb-2" style={{ minWidth: "100%" }}>
               <Select
                 options={provinceList}
diff --git a/src/views/Home/Desktop/Part2/index.js b/src/views/Home/Desktop/Part2/index.js
index 24b6292..71637ed 100644
--- a/src/views/Home/Desktop/Part2/index.js
+++ b/src/views/Home/Desktop/Part2/index.js
@@ -1,88 +1,87 @@
-
 import React, { useState, useEffect } from "react";
 import { connect } from "react-redux";
-import { book} from '../../../../redux/actions'
+import { book } from "../../../../redux/actions";
+import { Carousel } from "@trendyol-js/react-carousel";
+import arrow from "../../../../assets/icons/slider-arrow.svg";
 import { Link } from "react-router-dom";
-import Product from '../../../../components/Product';
+import Product from "../../../../components/Product";
 import Button from "../../../../components/Button";
-import ScrollContainer from "react-indiana-drag-scroll";
+// import ScrollContainer from "react-indiana-drag-scroll";
 
-const Part2 = (
-  {  books,
-    getBooks,
-    grades}
-) => {
-    console.log({books})
-    const [filter, setFilter] = useState({
-        search: "",
-        grade: "",
-        productsType: "کتاب",
-      });
-      useEffect(() => {
-        getBooks();
-      }, []);
-    return (
-        <div className="w-full my-6" style={{
-          height: '550px'
-        }}>
-            <div className="w-full flex justify-between items-center pr-10">
-                <div className="flex items-center text-4xl font-black text-blue52">
-                <div className="w-6 h-6 bg-blue-300 ml-4 rounded-full"></div>
-                    <h1>
-                    کتاب های جدید
-                    </h1>
-                </div>
-                <div>
-                    <Link to='/products'>
-                        <Button
-                            title="مشاهده لیست محصولات"
-                            backgroundColor="bg-blue-100"
-                            border={{
-                                color: "#196EC055",
-                                width: "0px", 
-                              }}
-                            width="100%"
-                            selectable={true}
-                            
-                            color= "text-blueC0"
-                            onClick={() => null}
-                            radius={false}
-                            twPaddings="py-4 px-12 rounded"
-                        />
-                    </Link>
-                </div>
-            </div>
-            <ScrollContainer className="flex  overflow-x-scroll py-4 pl-10">
-            {
-          books?.slice(15,24).map((product, index) => (
-            <Link to={"/products/" + product?.id}>
-              <Product
-                key={`prod_New${index}`}
-                productsType={filter.productsType}
-                product={product}
-                index={Number(index)}
-                productName={`کتاب ${product?.name}`}
-                productCat={`پایه ${grades[product?.gradeId]}`}
-                productPrice={100000}
-                productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
-                numberOfRegards={160}
-                productTitleColor='text-blue5F'
-                productCatTextColor='text-blueC0'
-                productHolderBorder=''
-                productHolderHoverBorder='shadow-md'
-                hoverMode='blue'
-                big
-                starRate={Math.floor(Math.random() * 5) + 1}
+const Part2 = ({ books, grades }) => {
+  // console.log({ books });
+  const [filter, setFilter] = useState({
+    search: "",
+    grade: "",
+    productsType: "کتاب",
+  });
+  return (
+    <div
+      className="w-full my-6"
+      style={
+        {
+          // height: "550px",
+        }
+      }
+    >
+      <div className="w-full flex justify-between items-center">
+        <div className="flex items-center text-4xl font-black text-blue52">
+          <div className="w-6 h-6 bg-blue-300 ml-4 rounded-full"></div>
+          <h1>کتاب های جدید</h1>
+        </div>
+        <div>
+          <Link to="/products">
+            <Button
+              title="مشاهده لیست محصولات"
+              backgroundColor="bg-blue-100"
+              border={{
+                color: "#196EC055",
+                width: "0px",
+              }}
+              width="100%"
+              selectable={true}
+              color="text-blueC0"
+              onClick={() => null}
+              radius={false}
+              twPaddings="py-4 px-12 rounded"
+            />
+          </Link>
+        </div>
+      </div>
+      {books.length > 0 && (
+        <div className="relative w-full" style={{ direction: "ltr" }}>
+          <Carousel
+            show={4.5}
+            slide={2}
+            swiping={true}
+            useArrowKeys={true}
+            transition={0.5}
+            rightArrow={
+              <img
+                className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer p-5"
+                src={arrow}
+                alt=""
+              />
+            }
+            leftArrow={
+              <img
+                className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer -rotate-180 p-5"
+                src={arrow}
+                alt=""
               />
-            </Link>
+            }
+          >
+            {books.map((product, index) => (
+              <Product key={index} product={product} />
             ))}
-            </ScrollContainer>
+          </Carousel>
         </div>
-    )
-}
+      )}
+    </div>
+  );
+};
 
 const mapStateToProps = (state) => ({
-    books: state.book.list,
-    isDark: state.publicApi.isDark,
+  isDark: state.publicApi.isDark,
 });
-export default connect(mapStateToProps, { getBooks: book.list })(Part2);
\ No newline at end of file
+export default connect(mapStateToProps, {})(Part2);
diff --git a/src/components/SalesContainer/index.css b/src/views/Home/Desktop/SalesContainer/index.css
similarity index 100%
rename from src/components/SalesContainer/index.css
rename to src/views/Home/Desktop/SalesContainer/index.css
diff --git a/src/views/Home/Desktop/SalesContainer/index.js b/src/views/Home/Desktop/SalesContainer/index.js
new file mode 100644
index 0000000..816e731
--- /dev/null
+++ b/src/views/Home/Desktop/SalesContainer/index.js
@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from "react";
+import { connect } from "react-redux";
+import { book, publicApi } from "../../../../redux/actions";
+// import ScrollContainer from "react-indiana-drag-scroll";
+import { Carousel } from "@trendyol-js/react-carousel";
+import arrow from "../../../../assets/icons/slider-arrow.svg";
+import { Link } from "react-router-dom";
+import Product from "../../../../components/Product";
+import "./index.css";
+
+const SalesContainer = ({ books }) => {
+  const [filter, setFilter] = useState({
+    search: "",
+    grade: "",
+    productsType: "کتاب",
+  });
+  return (
+    <div className="w-full my-10">
+      <div className="w-full py-10 pl-2 bg-white flex justify-between items-center gap-3">
+        <div className="flex flex-row items-center pl-4">
+          {/* <div className="w-6 h-6 bg-blue-300 ml-4 rounded-full"></div> */}
+          <div className="text-3xl leading-normal">
+            <h3 className=" bg-blueC0 text-white text-center"> دوشنبه </h3>
+            <h3
+              className="mr-4 text-center"
+              style={{ background: "#EFFF00" }}
+            >
+              {" "}
+              کتاااابی{" "}
+            </h3>
+          </div>
+        </div>
+        <div className="flex items-center">
+          <p className="text-md flex">بیش از ۵۰ کتاب تخفیف خورده&nbsp;</p>
+          <div className="w-6 h-6 bg-blue-300 mr-4 rounded-full"></div>
+        </div>
+
+        <span className="flex-1 h-0.5 bg-gray-200 mr-10"></span>
+      </div>
+      {books.length > 0 && (
+        <div className="relative w-full" style={{ direction: "ltr" }}>
+          <Carousel
+            show={window.innerWidth / 350}
+            slide={2}
+            swiping={true}
+            useArrowKeys={true}
+            transition={0.5}
+            rightArrow={
+              <img
+                className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer p-5"
+                src={arrow}
+                alt=""
+                // onClick={(e) => e.stopPropagation()}
+              />
+            }
+            leftArrow={
+              <img
+                className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer -rotate-180 p-5"
+                src={arrow}
+                alt=""
+                // onClick={(e) => e.stopPropagation()}
+              />
+            }
+          >
+            {books.map((product, index) => (
+              <Product key={index} product={product} />
+            ))}
+          </Carousel>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  isDark: state.publicApi.isDark,
+});
+export default connect(mapStateToProps, { getList: book.list })(SalesContainer);
diff --git a/src/views/Home/Desktop/index.js b/src/views/Home/Desktop/index.js
index 4493a38..4082814 100644
--- a/src/views/Home/Desktop/index.js
+++ b/src/views/Home/Desktop/index.js
@@ -1,92 +1,97 @@
-import React, { useState, useEffect, useCallback } from "react";
-import ScrollContainer from "react-indiana-drag-scroll";
-import { connect } from 'react-redux';
+import React, { useState, useEffect } from "react";
+import { connect } from "react-redux";
 import { Link } from "react-router-dom";
-import filterIcon from '../../../assets/images/vuesax-linear-filter-tick.svg';
+import filterIcon from "../../../assets/images/vuesax-linear-filter-tick.svg";
 import Banners from "../../../components/Banners";
-import SalesContainer from "../../../components/SalesContainer";
+import SalesContainer from "./SalesContainer";
 
 import { book, publicApi } from "../../../redux/actions";
 import Part2 from "./Part2";
-import HomeImg from '../../../assets/images/HomeImg.png';
+import HomeImg from "../../../assets/images/HomeImg.png";
 import Part4 from "./Part4";
 import Design2D from "../../../components/Design2D";
+import { get } from "lodash";
 
-const DesktopHome = (
-{
-  books,
-  grades
-}
-
-) =>{
-const banners = [
-  {
-    flex: 4,
-    items: [{ bg:'',
-     flex: 1,
-    image: 'https://dkstatics-public.digikala.com/digikala-adservice-banners/d2a56a4a0c3ce4645bf0b405b0bbf3a29da1cbd3_1642861192.jpg'
-    }],
-  },
-  {
-    flex: 2,
-    items: [
-      {  bg:'',
-       flex: 1,
-      image: 'https://dkstatics-public.digikala.com/digikala-adservice-banners/e13aefeda2d3b44db78a92aac9cdc82a9b1650e9_1632230372.jpg?'
-      },
-      {  bg:'',
-       flex: 1,
-      image: 'https://dkstatics-public.digikala.com/digikala-adservice-banners/fe8f275f4e4b5e6eb2f66cf65f3895398e049b40_1625578273.jpg'
-      },
-    ],
-  },
-  {
-    flex: 2,
-    items: [{  bg:'',
-     flex: 1,
-     image: 'https://dkstatics-public.digikala.com/digikala-adservice-banners/54d75e08cb0a72920ac3b2338232bf5ca70ccc74_1641638418.jpg'
-     }],
-  },
-]
-    
-return (
+const DesktopHome = ({ grades, getList, books }) => {
+  const banners = [
+    {
+      flex: 4,
+      items: [
+        {
+          bg: "",
+          flex: 1,
+          image:
+            "https://dkstatics-public.digikala.com/digikala-adservice-banners/d2a56a4a0c3ce4645bf0b405b0bbf3a29da1cbd3_1642861192.jpg",
+        },
+      ],
+    },
+    {
+      flex: 2,
+      items: [
+        {
+          bg: "",
+          flex: 1,
+          image:
+            "https://dkstatics-public.digikala.com/digikala-adservice-banners/e13aefeda2d3b44db78a92aac9cdc82a9b1650e9_1632230372.jpg?",
+        },
+        {
+          bg: "",
+          flex: 1,
+          image:
+            "https://dkstatics-public.digikala.com/digikala-adservice-banners/fe8f275f4e4b5e6eb2f66cf65f3895398e049b40_1625578273.jpg",
+        },
+      ],
+    },
+    {
+      flex: 2,
+      items: [
+        {
+          bg: "",
+          flex: 1,
+          image:
+            "https://dkstatics-public.digikala.com/digikala-adservice-banners/54d75e08cb0a72920ac3b2338232bf5ca70ccc74_1641638418.jpg",
+        },
+      ],
+    },
+  ];
 
+  useEffect(() => {
+    getList();
+  },[]);
+  
+  return (
     <div className="flex flex-col items-center w-11/12 justify-center my-10">
-        {/* <Banners
+      {/* <Banners
           mainBanner='https://dkstatics-public.digikala.com/digikala-adservice-banners/d2a56a4a0c3ce4645bf0b405b0bbf3a29da1cbd3_1642861192.jpg'
           midBottomBanner='https://dkstatics-public.digikala.com/digikala-adservice-banners/e13aefeda2d3b44db78a92aac9cdc82a9b1650e9_1632230372.jpg?'
           leftBanner=
           midTopBanner='https://dkstatics-public.digikala.com/digikala-adservice-banners/fe8f275f4e4b5e6eb2f66cf65f3895398e049b40_1625578273.jpg'
         /> */}
-        <div className="w-full">
+      <div className="w-full">
         <Design2D array={banners} />
-        </div>
-        <SalesContainer books={books} grades={grades}/>
-        <Part2  grades={grades}/>
-        <div className="mb-16">
-          <img src={HomeImg} />
-        </div>
-        <Part4 />
-    </div>    
+      </div>
+      <SalesContainer books={books} />
+      <Part2 grades={grades} books={books} />
+      <div className="mb-16">
+        <img src={HomeImg} />
+      </div>
+      <Part4 />
+    </div>
+  );
+};
 
-)
+const mapStateToProps = (state) => ({
+  isDark: state.publicApi.isDark,
+  isMobile: state.publicApi.isMobile,
+  books: state.book.list,
+  gradeFilterBooks: state.book.gradeFilterBooks,
+  selectedGrade: state.book.selectedGrade,
+});
 
-}
+const mapDispatchToProps = {
+  getList: book.list,
+  gradeFilter: book.gradeFilter,
+  setHeaderOptions: publicApi.setHeaderOptions,
+};
 
-const mapStateToProps = (state) => ({
-    isDark: state.publicApi.isDark,
-    isMobile: state.publicApi.isMobile,
-    books: state.book.list,
-    grades: state.publicApi.grades,
-    gradeFilterBooks: state.book.gradeFilterBooks,
-    selectedGrade: state.book.selectedGrade,
-  });
-  
-  const mapDispatchToProps = {
-    getList: book.list,
-    gradeFilter: book.gradeFilter,
-    setHeaderOptions: publicApi.setHeaderOptions,
-  };
-  
-  export default connect(mapStateToProps, mapDispatchToProps)(DesktopHome);
-  
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(DesktopHome);
diff --git a/src/views/QR/Content/index.js b/src/views/QR/Content/index.js
index 72ad605..71402d1 100644
--- a/src/views/QR/Content/index.js
+++ b/src/views/QR/Content/index.js
@@ -12,14 +12,14 @@ export const Content = ({
 }) => {
   useEffect(() => {
     const path = window.location.pathname;
-    console.log(path.slice(path.lastIndexOf("/") + 1, path.length));
+    // console.log(path.slice(path.lastIndexOf("/") + 1, path.length));
     setHeaderOptions(headerOptions);
     getQrData({ tail: path.slice(path.lastIndexOf("/") + 1, path.length) });
   }, []);
 
   useEffect(() => {
     if (data) {
-      console.log(data?.book?.name);
+      // console.log(data?.book?.name);
     }
   }, [data]);
 
diff --git a/src/views/QR/Scan/index.js b/src/views/QR/Scan/index.js
index f4eaa8d..a2f9b94 100644
--- a/src/views/QR/Scan/index.js
+++ b/src/views/QR/Scan/index.js
@@ -18,7 +18,7 @@ export const Scan = ({
   };
 
   const handleError = (err) => {
-    console.error(err);
+    // console.error(err);
   };
 
   useEffect(() => {