diff --git a/src/App.scss b/src/App.scss
index a6a3350..e4d22ee 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -32,7 +32,7 @@
 
 //slider
 .styles-module_item-tracker__3bypy{
-  padding-top : 20px;
+  padding-top : 20px !important;
   // transform: translateY(-20px) !important;
 }
 
diff --git a/src/components/AddToCart/index.js b/src/components/AddToCart/index.js
index c625ee7..682ebaa 100644
--- a/src/components/AddToCart/index.js
+++ b/src/components/AddToCart/index.js
@@ -47,7 +47,7 @@ const AddToCartCard = ({
           </div>
         )}
         {specialities.map((item, index) => (
-          <div className="flex items-center  p-2 w-full border-0 border-b border-solid border-gray-300">
+          <div className="flex items-center  p-2 w-full border-0 border-b border-solid border-gray-300" key={index}>
             {item.icon && <img src={item.icon} className="pl-3" />}
             <p className="text-sm text-blue52 text-right">{item.description}</p>
           </div>
diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js
index f9d4f26..5ec709b 100644
--- a/src/components/Checkbox/index.js
+++ b/src/components/Checkbox/index.js
@@ -2,7 +2,6 @@ import React from "react";
 import './index.css';
 
 export default function Checkbox(props) {
-  // console.log(props)
   return (
     <div>
       <svg className="checkbox-symbol">
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
index c03ea1c..f6b126d 100644
--- a/src/components/Footer/index.js
+++ b/src/components/Footer/index.js
@@ -11,9 +11,6 @@ import bazarIcon from "./Bazar.svg";
 import lightBlueLine from "./light-blue-line.svg";
 
 const FooterDesign1 = ({ color, bg, items, hasHeader }) => {
-  useEffect(() => {
-    console.log(window.location.host);
-  }, []);
   const enamad =
     '<a referrerpolicy="origin" target="_blank" href="https://trustseal.enamad.ir/?id=224965&amp;Code=x8oNSO7tTnqAniyPpPyN"><img referrerpolicy="origin" src="https://Trustseal.eNamad.ir/logo.aspx?id=224965&amp;Code=x8oNSO7tTnqAniyPpPyN" alt="" style="cursor:pointer" id="x8oNSO7tTnqAniyPpPyN"></a>';
   return (
diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js
index 7df02fc..277f093 100644
--- a/src/components/Navbar/index.js
+++ b/src/components/Navbar/index.js
@@ -203,7 +203,7 @@ function Navbar({
           <div className="flex flex-row items-center">
             <Link
               to="/"
-              className="flex flex-row items-center text-2xl font-medium"
+              className="flex flex-row items-center text-2xl font-black text-green7B"
             >
               <img src={logoIcon} className="w-8 relative bottom-1 ml-1" />
               دانوین
@@ -213,7 +213,7 @@ function Navbar({
                 <li key={index}>
                   <Link
                     to={page.link}
-                    className="text-tiny font-medium text-blue3D py-2 px-4 mx-4"
+                    className="text-tiny font-semibold text-green7B py-2 px-4 mx-4"
                   >
                     {page.name}
                   </Link>
@@ -301,7 +301,7 @@ Navbar.defaultProps = {
   pages: [
     {
       link: "/products",
-      name: "محصولات",
+      name: "فروشگاه",
     },
     {
       link: "/contact-us",
@@ -309,11 +309,11 @@ Navbar.defaultProps = {
     },
     {
       link: "/about-us",
-      name: "درباره ما",
+      name: "درباره دانوین",
     },
     {
       link: "/blogs",
-      name: "وبلاگ",
+      name: "مجله دانوین",
     },
   ],
   logo: true,
diff --git a/src/components/ProductDescription/index.js b/src/components/ProductDescription/index.js
index 7ab7eb4..0269b5a 100644
--- a/src/components/ProductDescription/index.js
+++ b/src/components/ProductDescription/index.js
@@ -1,135 +1,126 @@
-
 import React from "react";
 import { useState } from "react";
 
-const ProductDescription = ({
-    navTitles,
-    items,
-    addToCart
-}) =>{
-    const [name, setName] = useState(navTitles[0].name);
-    const [type, setType] = useState([]);
-    return(
-        <>
-            <div className="flex w-full rounded  bg-gray-200 justify-center mt-6 ">
-                <ul className="w-full flex justify-center">
-                    {navTitles.map(item => <li key={`NavTitle_${item.id}`} 
-                    className={`p-6 mx-4 cursor-pointer
-                     ${type[item.id] ? 'border-0 border-b-4 border-solid border-blue-500' : null}`
-                     } 
-                     onClick={() => { 
-                        // type[item.id] = type
-                        // type[item.id] = !type[item.id]
-                        setName(item.name)
-                        // setType(type)
-                        //  console.log(type)
-                        //  console.log(item.id)
-                        //  console.log(type[item.id])
-                             
-                     }}>
-                         {item.title}</li>)}
-                </ul>
-            </div>
-            <div className="flex w-full ">
-                <div className="flex-1 ">
-                    
-                   {items.map(e => ( 
-                       e.name == name ?
-                            e.items.map(item => (
-                                    <ul className="flex w-full flex-1 my-2 items-center">
-                                        
-                                    {item.title ? 
-                                    <li className="py-4 px-8  min-w-md bg-gray-200 ml-4 text-blueC0" style={{minWidth: '300px'}}>{item.title}</li> : null}
-                                    <li className="py-4 px-8  min-w-md bg-gray-200 ml-4 w-full">{item.description}</li>
-                                    </ul>  
-                                    
-                                )) : null
-                            
-                        
-                   ))} 
-                </div>
-                <div className="my-2">
-                    {addToCart}
-                </div>
-
-            </div>
-        </>
-    );
+const ProductDescription = ({ navTitles, items, addToCart }) => {
+  const [name, setName] = useState(navTitles[0].name);
+  const [type, setType] = useState([]);
+  return (
+    <>
+      <div className="flex w-full rounded  bg-gray-200 justify-center mt-6 ">
+        <ul className="w-full flex justify-center">
+          {navTitles.map((item, index) => (
+            <li
+              key={index}
+              className={`p-6 mx-4 cursor-pointer
+                     ${
+                       type[item.id]
+                         ? "border-0 border-b-4 border-solid border-blue-500"
+                         : null
+                     }`}
+              onClick={() => {
+                setName(item.name);
+              }}
+            >
+              {item.title}
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div className="flex w-full ">
+        <div className="flex-1 ">
+          {items.map((item, index) =>
+            item.name == name
+              ? item.items.map((item, index) => (
+                  <ul className="flex w-full flex-1 my-2 items-center" key={index}>
+                    {item.title ? (
+                      <li
+                        className="py-4 px-8  min-w-md bg-gray-200 ml-4 text-blueC0"
+                        style={{ minWidth: "300px" }}
+                      >
+                        {item.title}
+                      </li>
+                    ) : null}
+                    <li className="py-4 px-8  min-w-md bg-gray-200 ml-4 w-full">
+                      {item.description}
+                    </li>
+                  </ul>
+                ))
+              : null
+          )}
+        </div>
+        <div className="my-2">{addToCart}</div>
+      </div>
+    </>
+  );
 };
 
-
-
-
-
 export default ProductDescription;
 
-
-
-
 ProductDescription.defaultProps = {
-    navTitles: [
+  navTitles: [
+    {
+      id: 0,
+      title: "مشخصات",
+      isActive: true,
+      name: "moshakhasat",
+    },
+    {
+      id: 1,
+      title: "نقد و بررسی",
+      isActive: false,
+      name: "review",
+    },
+    {
+      id: 2,
+      title: "برسش و باسخ",
+      isActive: false,
+    },
+  ],
+  items: [
+    {
+      name: "moshakhasat",
+      items: [
         {
-            id: 0,
-            title: 'مشخصات',
-            isActive: true,
-            name: 'moshakhasat'
+          title: "وزن کتاب",
+          description: "۱ کیلوگرم",
         },
         {
-            id: 1,
-            title: 'نقد و بررسی',
-            isActive: false,
-            name: 'review'
+          title: "تعداد صفحات",
+          description: "400 صفحه",
         },
         {
-            id: 2,
-            title: 'برسش و باسخ',
-            isActive:false
+          title: "نوع کاغذ",
+          description: "گلاسه",
         },
-    ],
-    items: [
         {
-            name: 'moshakhasat',
-            items: [
-                {
-                    title : 'وزن کتاب',
-                    description: '۱ کیلوگرم'
-                },
-                {
-                    title : 'تعداد صفحات',
-                    description: '400 صفحه'
-                },
-                {
-                    title : 'نوع کاغذ',
-                    description: 'گلاسه'
-                },
-                {
-                    title : 'شماره شابک',
-                    description: '1225548218000005818765'
-                },
-                {
-                    title : 'انتشارات',
-                    description: 'رزمندگان'
-                },
-                {
-                    title : 'نویسنده و یا معلف',
-                    description: 'یک نویسنده گمنام'
-                },
-                {
-                    title : 'قطع',
-                    description: 'خشتی'
-                },
-                {
-                    title : 'سال انتشار',
-                    description: '1399'
-                },
-        ]
+          title: "شماره شابک",
+          description: "1225548218000005818765",
         },
         {
-            name: 'review',
-            items: [{
-                description: 'لورم ایبسوم'
-            }]
-        }
-    ]
-    
-}
\ No newline at end of file
+          title: "انتشارات",
+          description: "رزمندگان",
+        },
+        {
+          title: "نویسنده و یا معلف",
+          description: "یک نویسنده گمنام",
+        },
+        {
+          title: "قطع",
+          description: "خشتی",
+        },
+        {
+          title: "سال انتشار",
+          description: "1399",
+        },
+      ],
+    },
+    {
+      name: "review",
+      items: [
+        {
+          description: "لورم ایبسوم",
+        },
+      ],
+    },
+  ],
+};
diff --git a/src/components/ProductImage/index.js b/src/components/ProductImage/index.js
index 9c8f0fc..4260981 100644
--- a/src/components/ProductImage/index.js
+++ b/src/components/ProductImage/index.js
@@ -7,13 +7,11 @@ import productImg from "./product-image.jpg";
 const ProductImage = ({ images }) => {
   const [list, setList] = useState([]);
   const [activeImage, setActiveImage] = useState(null);
-  // console.log(images.length);
   useEffect(() => {
     if (images) {
       let mylist = images?.split(",");
       setList(() => mylist);
       setActiveImage(() => mylist[0]);
-      console.log(images);
     }
   }, [images]);
   return (
@@ -67,8 +65,5 @@ const ProductImage = ({ images }) => {
     </div>
   );
 };
-// {[0, 1, 2, 3, 4].map((item, index) => (
-
-//   ))}
 
 export default ProductImage;
diff --git a/src/components/ProductTab/table/index.js b/src/components/ProductTab/table/index.js
index a8c1cea..7bdf02c 100644
--- a/src/components/ProductTab/table/index.js
+++ b/src/components/ProductTab/table/index.js
@@ -16,7 +16,7 @@ const Table = ({ specifications }) => {
   return (
     <ul className={`w-full`} >
       {Object.keys(specifications).map((specification, index) => (
-        <li className={`flex my-3 cursor-pointer group`}>
+        <li className={`flex my-3 cursor-pointer group`} key={index}>
           <div
             className={` bg-grayF9 rounded px-3 py-4 ml-2 text-greenBA text-sm group-hover:bg-blueC0 group-hover:bg-opacity-10`}
             style={{ flex: 2 }}
diff --git a/src/components/QandA/index.js b/src/components/QandA/index.js
index b0463cd..81a4870 100644
--- a/src/components/QandA/index.js
+++ b/src/components/QandA/index.js
@@ -56,8 +56,8 @@ const QandA = ({ comments }) => {
           </div>
 
           {comment.answers.length > 0 ? (
-            comment.answers.slice(0, numberOfAnswers).map((e) => (
-              <div className="flex flex-row py-1">
+            comment.answers.slice(0, numberOfAnswers).map((item, index) => (
+              <div className="flex flex-row py-1" key={index}>
                 <div style={{ width: 60 }} className="min-h-full"></div>
                 <div className="flex flex-1 flex-col px-3">
                   <header className="w-full flex flex-row justify-between items-center">
@@ -68,7 +68,7 @@ const QandA = ({ comments }) => {
                     </div>
                   </header>
                   <div className="flex items-center justify-between">
-                    <p className="text-gray-500 m-4">{e.text}</p>
+                    <p className="text-gray-500 m-4">{item.text}</p>
                     <div>
                       <Counter value={456} />
                     </div>
diff --git a/src/components/Timer/index.js b/src/components/Timer/index.js
index f7ae584..06f853b 100644
--- a/src/components/Timer/index.js
+++ b/src/components/Timer/index.js
@@ -75,7 +75,7 @@ export default class Timer extends Component {
   render() {
     return (
       <>
-        <div className="timer text-greenBA text-sm inline">
+        <div className="timer text-greenBA text-sm lg:text-tiny inline">
           {this.state.time ? this.state.time.m : ''}:{this.state.time ? this.state.time.s : ''} 
         </div>
       </>
diff --git a/src/components/VerticalExpandableProductFilter/index.js b/src/components/VerticalExpandableProductFilter/index.js
index 5c4d9ba..3def2c2 100644
--- a/src/components/VerticalExpandableProductFilter/index.js
+++ b/src/components/VerticalExpandableProductFilter/index.js
@@ -62,7 +62,6 @@ 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)} */}
               <div className="flex flex-row items-center">
                 <Checkbox
                   name={`ch${name}_${i}`}
diff --git a/src/components/VodProduct/index.js b/src/components/VodProduct/index.js
index dd070ec..2fda2be 100644
--- a/src/components/VodProduct/index.js
+++ b/src/components/VodProduct/index.js
@@ -56,27 +56,23 @@ const VodProduct = ({
   // minHeight,
 }) => {
   const [progressFlag, setProgressFlag] = useState(false);
-  // const [openModal, setOpenModal] = useState(false);
   useEffect(() => {
     setTimeout(() => {
       setProgressFlag(true);
     }, 1000);
   });
-
-  // console.log(index);
   return (
     <>
-      {/* product UI Design */}
       <Link
         to={"/videos/" + video?.id}
         className="flex flex-wrap sm:flex-nowrap justify-around"
         style={{ direction: "rtl" }}
+        draggable={false}
       >
         <div className="w-full flex flex-wrap items-center justify-around my-3 px-1 sm:px-4">
           <div
-            className={`w-full mx-1 sm:w-60 md:w-96  rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`}
+            className={`w-full mx-1 sm:w-60 md:w-96  rounded-lg shadow-sm p-2 my-3 border border-gray-200 border-solid hover:border-greenB9 hover:border-2 transform hover:-translate-y-5 transition-all duration-500`}
           >
-            {/* product image */}
             <div
               className="group transition ease-in-out delay-150 duration-300 w-full relative flex items-center justify-center cursor-pointer"
               style={{
@@ -84,11 +80,9 @@ const VodProduct = ({
                 backgroundSize: "100% 100%",
                 backgroundRepeat: "no-repeat",
                 height: height,
-                // minHeight: minHeight,
               }}
               data-modal-toggle="large-modal"
             >
-              {/* icons on image */}
               <div className="absolute left-2 top-1">
                 {discountPricePercent && (
                   <div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer bg-white bg-opacity-70">
@@ -102,28 +96,14 @@ const VodProduct = ({
                     <img src={heart} alt="" className="w-5" />
                   </div>
                 )}
-                {/* {discount && (
-                  <div className="rounded-md mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
-                    <img src={discountImg} alt="" className="w-full" />
-                  </div>
-                )} */}
               </div>
-              {/* play button */}
               <div
                 className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon bg-black bg-opacity-20 backdrop-filter backdrop-blur-md`}
-                // onClick={() => setOpenModal(true)}
               >
-                <img
-                  src={whitePlayIcon}
-                  alt=""
-                  className="w-5 h-5"
-                  // onClick={() => setOpenModal(true)}
-                />
+                <img src={whitePlayIcon} alt="" className="w-5 h-5" />
               </div>
-              {/* select Color */}
               {productColor && (
                 <div className="flex items-center absolute right-2 bottom-3">
-                  {/* {colors.map((color,index))} */}
                   <img
                     src={YellowDotIcon}
                     alt=""
@@ -134,18 +114,14 @@ const VodProduct = ({
                 </div>
               )}
             </div>
-            {/* product content */}
             <div className="px-2">
-              {/* content */}
               <div className="mt-4 flex flex-col">
                 <div className={`flex justify-between `}>
                   <h2 className={`leading-4 font-semibold text-base mb-4`}>
                     {"دوره ویدیویی" + " " + video?.name}
                   </h2>
-                  {console.log(video?.gradeId)}
                   <span className={`text-tiny font-light text-green7B`}>
                     {"پایه" + " " + grades[video?.gradeId]}
-                    {/* {video.grade} */}
                   </span>
                 </div>
                 {productContent && (
@@ -165,7 +141,6 @@ const VodProduct = ({
                   <div
                     className={`flex items-center justify-between ${priceDirection}`}
                   >
-                    {/* price */}
                     <div className="">
                       <div
                         className={`${
@@ -175,22 +150,14 @@ const VodProduct = ({
                         }`}
                       >
                         <span className="text-xs text-borderColor ml-2"></span>
-
-                        {/* {discountPrice && (
-                          <p className="line-through text-xs text-borderColor">
-                            <span> قیمت</span> 140<span>تومان</span>
-                          </p>
-                        )} */}
                       </div>
                       <p
                         className={`text-lg text-productPrice font-semibold inline text-blue5F`}
                       >
-                        {separate(video?.product[2]?.price) + ' '}
-                        {/* {video.price} */}
+                        {separate(video?.product[2]?.price) + " "}
                         <span>تومان</span>
                       </p>
                     </div>
-                    {/* add to cart */}
                     {addToCartHolder && (
                       <button
                         className={`rounded-md px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500  ${
@@ -202,14 +169,6 @@ const VodProduct = ({
                     )}
                   </div>
                 )}
-                {/* {star && (
-                  <div className="flex items-center">
-                    <StarRating />
-                    <span className="text-xs text-productContent font-bold mr-2">
-                      39
-                    </span>
-                  </div>
-                )} */}
               </div>
               {productTags && (
                 <div className="mt-2 flex flex-wrap">
@@ -238,64 +197,11 @@ const VodProduct = ({
           </div>
         </div>
       </Link>
-      {/* <div
-        class="hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center md:inset-0 h-modal sm:h-full"
-        id="large-modal"
-      >
-        <div class="relative px-4 w-full max-w-4xl h-full md:h-auto">
-          <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
-            <div class="flex justify-between items-center p-5 rounded-t border-b border-gray-200 dark:border-gray-600">
-              <button
-                type="button"
-                class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
-                data-modal-toggle="large-modal"
-              >
-                <svg
-                  class="w-5 h-5"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                    clip-rule="evenodd"
-                  ></path>
-                </svg>
-              </button>
-            </div>
-            <div class="p-6 space-y-6">
-              <video
-                controls
-                className={`border transition-all duration-1000
-          `}
-                src={video}
-                type="video/mp4"
-              ></video>
-            </div>
-          </div>
-        </div>
-      </div> */}
     </>
   );
 };
-// hover:-translate-y-2
 export default VodProduct;
 
-// text colors i used for product title:
-// text-darkCrimsonTextColor
-// text-productTitle
-
-// text color i used for product excerpt:
-// text-productContent
-
-// text color i used for product cat:
-// text-darkCrimsonTextColor
-
-// bg color i used for play button icon:
-// bg-playButtonIcon
-// bg-playButtonIcon2
-
 VodProduct.defaultProps = {
   colors: [
     {
@@ -345,17 +251,7 @@ VodProduct.defaultProps = {
 
   productTitleCategoryHolder: "flex-row",
   productTitleCategoryHolderAlignment: "items-center",
-
-  // برای اینکه بتونیم ستاره هارو بالا قیمت بزاریم و دیزاین را مثل کتاب ها در بیاریم
-  // یادمون باشه که حتما رویه
-  // flex-col-reverse
-  // بزاریم
-
-  // دیفالتش باید این باشه:
-  // priceStarHolder: flex-row
   priceStarHolder: "flex-row",
-  // دیفالتش باید این باشه:
-  // priceStarHolder: items-center
   priceStarAlignment: "items-center",
   poster: watermelon,
 };
diff --git a/src/redux/reducers/book.js b/src/redux/reducers/book.js
index b1b86fa..c1850d9 100644
--- a/src/redux/reducers/book.js
+++ b/src/redux/reducers/book.js
@@ -10,25 +10,25 @@ const initialState = {
   filterResult: [],
   subjects: [],
   levels: [],
-  sortMethods: ["مرتب سازی", "محبوب ترین", "جدیدترین"],
+  sortMethods: ["محبوب ترین", "جدیدترین"],
   selectedVideo: null,
   gradeFilterBooks: null,
   sortFilterCourse: null,
   selectedGrade: null,
   selectedSort: "پربازدید ترین ها",
-  productTypes : [
+  productTypes: [
     "کتاب فیزیکی",
     "کتاب دیجیتال",
     "دوره ویدئویی",
     "بسته های آموزشی",
   ],
-  filterOptions : {
-    grade: '',
-    subject: '',
+  filterOptions: {
+    grade: "",
+    subject: "",
     productType: null,
-    available : false,
+    available: false,
     sort: null,
-  }
+  },
 };
 
 const grades = [
@@ -119,7 +119,7 @@ export default function book(state = initialState, action) {
     // case "book/search":
     //   return { ...state };
     case "book/setFilterOptions":
-      return { ...state, loading: false, error: null, filterOptions : data};
+      return { ...state, loading: false, error: null, filterOptions: data };
     case "book/loading":
       return { ...state, loading: true };
     case "book/error":
diff --git a/src/redux/reducers/public.js b/src/redux/reducers/public.js
index f899492..97e11cb 100644
--- a/src/redux/reducers/public.js
+++ b/src/redux/reducers/public.js
@@ -189,7 +189,7 @@ export default function publicApi(state = initialState, action) {
         ...state,
         loading: false,
         error: null,
-        city: [...state.city, ...data.map((item) => item.name)],
+        city: [...data.map((item) => item.name)],
         cities : data,
       };
     case "public/selectMenu":
diff --git a/src/redux/reducers/userFactor.js b/src/redux/reducers/userFactor.js
index ae95fa3..2215993 100644
--- a/src/redux/reducers/userFactor.js
+++ b/src/redux/reducers/userFactor.js
@@ -37,7 +37,6 @@ export default function userFactor(state = initialState, action) {
     case "userFactor/myList":
       return { ...state, loading: false, list: data, error: null };
     case "userFactor/update":
-      toast.success("درخواست شما با موفقیت انجام شد.");
       return { ...state, loading: false, error: null };
     case "userFactor/deleteUserOffCode":
       return { ...state, loading: false, error: null };
diff --git a/src/router.js b/src/router.js
index 3d1f490..8daaa66 100644
--- a/src/router.js
+++ b/src/router.js
@@ -371,7 +371,7 @@ function Router({
               }
             />
           </Routes>
-          {/* {headerOptions?.shown && !isMobile && <FooterDesign1 hasHeader />} */}
+          {!isMobile && <FooterDesign1 hasHeader />}
         </BrowserRouter>
       </div>
     </div>
diff --git a/src/utils/comments.js b/src/utils/comments.js
index a3dfa4d..97d66a2 100644
--- a/src/utils/comments.js
+++ b/src/utils/comments.js
@@ -19,6 +19,4 @@ export const connectToParent = (list) => {
       
     }
   }
-  // comments = comments.filter((comment) => comment.pid === null);
-  // console.log(comments);
 };
diff --git a/src/utils/scroll.js b/src/utils/scroll.js
index c665e9b..cee2f9a 100644
--- a/src/utils/scroll.js
+++ b/src/utils/scroll.js
@@ -157,7 +157,6 @@ class scroll {
   initializeBoxPosition = (currentScroll) => {
     const height= window.innerHeight;
     if(currentScroll < height){
-      // console.log(currentScroll);
       return {
         translateX: -5, 
         translateY: -5,
diff --git a/src/views/Address/index.js b/src/views/Address/index.js
index 0689795..9938305 100644
--- a/src/views/Address/index.js
+++ b/src/views/Address/index.js
@@ -7,6 +7,7 @@ import Select from "../../components/Select";
 import Button from "../../components/Button";
 import ReverseMap from "../../components/ReverseMap";
 import Dialog from "../../components/Dialog";
+import Loading from "../../components/Loading";
 
 //assets
 import dropdownIcon from "../../assets/icons/dropdown-blue.svg";
@@ -21,6 +22,7 @@ export const Address = ({
   createAddress,
   loading,
   setPhase,
+  cityLoading,
 }) => {
   const [addressFields, setAddressFields] = useState({});
   const [mapAddress, setMapAddress] = useState(null);
@@ -50,7 +52,6 @@ export const Address = ({
   }, [addressFields]);
 
   const onChange = (name, value) => {
-    console.log("1");
     setAddressFields({ ...addressFields, [name]: value });
   };
 
@@ -216,7 +217,7 @@ export const Address = ({
               loading={loading}
               title="ثبت آدرس"
               backgroundColor="bg-blueC0"
-              border={{ color: "#196EC055", width: "1px" }}
+              border={{ color: "#196EC055", width: "0px" }}
               width="100%"
               color="text-white"
               onClick={() => submit()}
@@ -306,11 +307,24 @@ export const Address = ({
             name="provinceId"
             onChange={(name, value) => onChange(name, value)}
           />
-          <Select
-            options={city}
-            name="cityId"
-            onChange={(name, value) => onChange(name, value)}
-          />
+          {!cityLoading ? (
+            <Select
+              options={city}
+              name="cityId"
+              onChange={(name, value) => onChange(name, value)}
+            />
+          ) : (
+            <div className="flex justify-between border-gray-300 border border-solid rounded-md w-1/2 py-3.5 px-2">
+              <Loading size={3.5} color="bg-gray-500" />
+              <svg
+                className={`'bg-gray-400 h-5 w-5`}
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+              >
+                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
+              </svg>
+            </div>
+          )}
         </div>
         <br />
         <Input
@@ -336,6 +350,7 @@ const mapStateToProps = (state) => ({
   provinces: state.publicApi.provinces,
   cities: state.publicApi.cities,
   loading: state.userAddress.loading,
+  cityLoading: state.publicApi.loading,
 });
 
 const mapDispatchToProps = {
diff --git a/src/views/Auth/Profile/index.js b/src/views/Auth/Profile/index.js
index 062a843..34e30f6 100644
--- a/src/views/Auth/Profile/index.js
+++ b/src/views/Auth/Profile/index.js
@@ -336,7 +336,6 @@ function Profile({
                 />
               </div>
             ) : null}
-            {/* {console.log(province)} */}
             <div className="mb-2" style={{ minWidth: "100%" }}>
               <Select
                 options={provinceList}
diff --git a/src/views/Auth/SignUp/index.js b/src/views/Auth/SignUp/index.js
index 5c02324..353f557 100644
--- a/src/views/Auth/SignUp/index.js
+++ b/src/views/Auth/SignUp/index.js
@@ -130,7 +130,7 @@ function SignUp({
 
   useEffect(() => {
     if (loginFlag) {
-      // navigate("/");
+      navigate("/");
     }
   }, [loginFlag]);
   const light = theme === "light";
@@ -178,11 +178,11 @@ function SignUp({
       >
         <img src={logoIcon} alt="" className="" />
         {!resend && (
-          <div className="w-full leading-6 dark:text-white mt-10 text-xs  text-gray1">
+          <div className="w-full leading-6 dark:text-white mt-10 text-xs lg:text-sm  text-gray1">
             یک کد چهار رقمی تا &nbsp;{" "}
             <Timer seconds={120} refresh={setResend} /> &nbsp; دیگر برای شماره
             &nbsp;{" "}
-            <span className="text-greenBA text-sm">
+            <span className="text-greenBA text-sm lg:text-tiny">
               {signUpFields?.cellphone}
             </span>{" "}
             &nbsp; ارسال خواهد شد.
@@ -195,7 +195,7 @@ function SignUp({
               inputMode="numeric"
               style={{ direction: "ltr" }}
               name="otp1"
-              className="bg-grayF9 outline-none rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1"
+              className="bg-grayF9 outline-none rounded-md p-4 w-16 text-sm lg:text-lg text-center text-blueC0 mx-1"
               onChange={(e) =>
                 onChange(
                   e.target.name,
@@ -209,7 +209,7 @@ function SignUp({
               inputMode="numeric"
               style={{ direction: "ltr" }}
               name="otp2"
-              className="bg-grayF9 outline-none rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1"
+              className="bg-grayF9 outline-none rounded-md p-4 w-16 text-sm lg:text-lg text-center text-blueC0 mx-1"
               onChange={(e) =>
                 onChange(
                   e.target.name,
@@ -223,7 +223,7 @@ function SignUp({
               inputMode="numeric"
               style={{ direction: "ltr" }}
               name="otp3"
-              className="bg-grayF9 outline-none rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1"
+              className="bg-grayF9 outline-none rounded-md p-4 w-16 text-sm lg:text-lg text-center text-blueC0 mx-1"
               onChange={(e) =>
                 onChange(
                   e.target.name,
@@ -237,7 +237,7 @@ function SignUp({
               inputMode="numeric"
               style={{ direction: "ltr" }}
               name="otp4"
-              className="bg-grayF9 outline-none rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1"
+              className="bg-grayF9 outline-none rounded-md p-4 w-16 text-sm lg:text-lg text-center text-blueC0 mx-1"
               onChange={(e) =>
                 onChange(
                   e.target.name,
@@ -260,7 +260,7 @@ function SignUp({
             }
           />
           <div className="mt-10 flex flex-row text-center w-full justify-center">
-            <div className="text-xs text-gray1">
+            <div className="text-xs text-gray1 lg:text-sm">
               شماره خود را اشتباه وارد کردید؟{" "}
               <button
                 className="bg-transparent border-none text-greenBA font-medium"
diff --git a/src/views/BugsAndProblems/index.js b/src/views/BugsAndProblems/index.js
index 32f7faa..807730b 100644
--- a/src/views/BugsAndProblems/index.js
+++ b/src/views/BugsAndProblems/index.js
@@ -30,6 +30,7 @@ function Bugs({}) {
                 >
                   {list.map((bug, index) => (
                     <tr
+                      key={index}
                       className={`whitespace-nowrap p-2 w-full border border-solid border-gray-300 ${
                         colors[bug.status]
                       }`}
diff --git a/src/views/Dashboard/index.js b/src/views/Dashboard/index.js
index 5817b02..e41a8e4 100644
--- a/src/views/Dashboard/index.js
+++ b/src/views/Dashboard/index.js
@@ -1,9 +1,19 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import { connect } from "react-redux";
 import Sidebar from "./layouts/SidebarMenu";
 import Main from "./layouts/Main";
+import Dialog from "../../components/Dialog";
 
 export const Dashboard = ({ isMobile }) => {
+  const [dialog, setDialog] = useState({
+    text: null,
+    type: null,
+    setOpen: null,
+    accept: null,
+    color: null,
+    open: null,
+  });
+
   const [page, setPage] = useState("userItems");
 
   return isMobile ? (
@@ -11,8 +21,9 @@ export const Dashboard = ({ isMobile }) => {
   ) : (
     <div className="w-full">
       <div className="gap-5 w-full h-screen pt-20 mx-auto flex flex-row bg-transparent justify-end">
-        <Sidebar page={page} setPage={setPage} />
+        <Sidebar page={page} setPage={setPage} setDialog={setDialog} dialog={dialog} />
         <Main page={page} />
+        {dialog.open && <Dialog dialog={dialog} />}
       </div>
     </div>
   );
diff --git a/src/views/Dashboard/layouts/Main/MyBooks/index.js b/src/views/Dashboard/layouts/Main/MyBooks/index.js
index 4585d4f..c182e27 100644
--- a/src/views/Dashboard/layouts/Main/MyBooks/index.js
+++ b/src/views/Dashboard/layouts/Main/MyBooks/index.js
@@ -7,7 +7,7 @@ export const MyBooks = ({ books, grades, isMobile }) => {
   return (
     <div className="flex flex-1 flex-col">
       <div className="flex flex-wrap gap-4 mb-5">
-        {books.slice(0,5).map((product, index) => (
+        {books.slice(0,1).map((product, index) => (
           <Product key={index} product={product} imageSize={5} />
         ))}
       </div>
diff --git a/src/views/Dashboard/layouts/Main/UserItems/ProductSuggestion/index.js b/src/views/Dashboard/layouts/Main/UserItems/ProductSuggestion/index.js
index f467e82..4f0eb31 100644
--- a/src/views/Dashboard/layouts/Main/UserItems/ProductSuggestion/index.js
+++ b/src/views/Dashboard/layouts/Main/UserItems/ProductSuggestion/index.js
@@ -6,7 +6,7 @@ import arrow from "../../../../../../assets/icons/dropdown-blue.svg";
 
 function Suggestion({ products, grades, isMobile }) {
   return (
-    <div className="flex flex-col pl-7 pr-8 pt-4 border border-solid border-gray-200 shadow-all rounded-md">
+    <div className="flex flex-col pl-7 pr-8 pt-4 border border-solid border-gray-200 bg-blueC0 bg-opacity-5 shadow-all rounded-md w-full">
       <strong className="text-green7B dark:text-white font-bold text-2xl lg:text-base my-4">
         پیشنهادات ما به شما
       </strong>
diff --git a/src/views/Dashboard/layouts/Main/index.js b/src/views/Dashboard/layouts/Main/index.js
index 4215a49..9c32319 100644
--- a/src/views/Dashboard/layouts/Main/index.js
+++ b/src/views/Dashboard/layouts/Main/index.js
@@ -7,11 +7,12 @@ import UserItems from "../Main/UserItems";
 import MyBooks from './MyBooks';
 
 export const Main = ({ setHeaderOptions, page }) => {
+
   useEffect(() => {
     setHeaderOptions({ shown: true });
   }, []);
   const views = {
-    // orders: <Orders />,
+    orders: <Orders />,
     mybooks : <MyBooks />,
     userItems: <UserItems />,
   };
diff --git a/src/views/Dashboard/layouts/SidebarMenu/index.js b/src/views/Dashboard/layouts/SidebarMenu/index.js
index 38595e9..6d6e7aa 100644
--- a/src/views/Dashboard/layouts/SidebarMenu/index.js
+++ b/src/views/Dashboard/layouts/SidebarMenu/index.js
@@ -1,13 +1,14 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Avatar from "../../../../components/Avatar";
 import { connect } from "react-redux";
+import {useNavigate} from "react-router-dom";
 import { publicApi, user } from "../../../../redux/actions";
 
 import "./index.scss";
 
 //assets
 import profilePic from "./profile-pic.svg";
-import logout from "./logout.svg";
+import logoutIcon from "./logout.svg";
 import moon from "./moon.svg";
 import sms from "./sms.svg";
 import userEdit from "./user-edit.svg";
@@ -21,8 +22,12 @@ const SidebarMenu = ({
   setDashboardOptions,
   page,
   setPage,
-  logout
+  logout,
+  setDialog,
+  dialog,
+  isLogin
 }) => {
+  const navigate = useNavigate();
   const [toggleList, setToggleList] = useState({
     profile: false,
     support: false,
@@ -39,7 +44,7 @@ const SidebarMenu = ({
         >
           <div className="flex items-center">
             <img src={icon} alt="" className="ml-2 w-6 mb-1" />
-            <strong className="font-semibold text-base text-green7B">
+            <strong className="font-semibold text-tiny text-green7B">
               {title}
             </strong>
           </div>
@@ -66,7 +71,9 @@ const SidebarMenu = ({
             >
               <span
                 className={`text-tiny font-medium py-2 my-1  px-4 rounded-full ${
-                  page === item.value ? "text-white bg-green-600" : "text-gray70"
+                  page === item.value
+                    ? "text-white bg-green-600"
+                    : "text-gray70"
                 }`}
               >
                 {item.title}
@@ -91,18 +98,39 @@ const SidebarMenu = ({
       onClick: () => setPage("myvideos"),
       name: "myvideos",
     },
+    {
+      icon: null,
+      title: "سفارشات",
+      onClick: () => setPage("orders"),
+      name: "orders",
+    },
     { icon: moon, title: "حالت شب", onClick: () => {}, name: "dark" },
     {
-      icon: logout,
+      icon: logoutIcon,
       title: "خروج از حساب کاربری",
-      onClick: () => logout(),
+      // onClick: () => logout(),
+      onClick: () =>
+        setDialog({
+          text: "میخوای تنهامون بذاری؟‌",
+          type: "confirm",
+          setOpen: (val) => setDialog({ ...dialog, open: val }),
+          accept: () => logout(),
+          bg: "bg-white bg-opacity-10",
+          color: "text-green4F",
+          open: true,
+        }),
       name: "logout",
     },
   ];
 
+  useEffect(() => {
+    if(!isLogin){
+      navigate('/');
+    }
+  },[isLogin]);
   return (
     <div
-      className="bg-grayF9 py-5 pl-4 pr-8 shadow-sm border border-gray-300 rounded overflow-y-scroll no-scrollbar divide-y divide-solid divide-gray-200"
+      className="bg-gray-50 py-5 border-l-2 pl-4 pr-8 shadow-sm border-gray-300 border-solid overflow-y-scroll no-scrollbar divide-y divide-solid divide-gray-200"
       style={{
         height: "calc(100vh - 80px)",
         minWidth: 400,
@@ -135,10 +163,10 @@ const SidebarMenu = ({
         <div
           className="flex flex-col item-center mb-0"
           onClick={() => button.onClick()}
+          key={i}
         >
           <div
-            key={i}
-            className={`flex flex-row items-center cursor-pointer rounded-md py-2 my-3  px-1`}
+            className={`flex flex-row items-center cursor-pointer rounded-md py-0 my-3  px-1`}
           >
             <img src={button.icon} alt="" />
             <strong
@@ -146,7 +174,7 @@ const SidebarMenu = ({
                 page === button.name
                   ? "text-white bg-green-600"
                   : "text-green7B hover:bg-blueC0 hover:bg-opacity-10"
-              } text-base mx-2 p-2 rounded-full`}
+              } text-tiny mx-2 p-2 rounded-full`}
             >
               {button.title}
             </strong>
@@ -160,11 +188,12 @@ const SidebarMenu = ({
 const mapStateToProps = (state) => ({
   user: state.user.status,
   dashboardOptions: state.publicApi.dashboardOptions,
+  isLogin: state.user.status,
 });
 
 const mapDispatchToProps = {
   setDashboardOptions: publicApi.setDashboardOptions,
-  logout : user.logout
+  logout: user.logout,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(SidebarMenu);
@@ -184,7 +213,6 @@ SidebarMenu.defaultProps = {
     notification: null,
     list: [
       { title: "تیکت ها", value: "tickets" },
-      { title: "ارسال تیکت جدید", value: "send" },
     ],
   },
 };
diff --git a/src/views/DeliveryForm/Address/index.js b/src/views/DeliveryForm/Address/index.js
index 57d2935..0bc6a67 100644
--- a/src/views/DeliveryForm/Address/index.js
+++ b/src/views/DeliveryForm/Address/index.js
@@ -1,23 +1,25 @@
 import React, { useState, useEffect } from "react";
 import { connect } from "react-redux";
+import { userFactor } from "../../../redux/actions";
 import Button from "../../../components/Button";
 import Radio from "../../../components/Radio";
+import Loading from "../../../components/Loading";
 
-function Address({ addresses, isDark, isMobile, setPhase }) {
-  const [activeAddress, setActiveAddress] = useState([]);
-
-  useEffect(() => { 
-    if(addresses?.length > 0){
-      setActiveAddress(addresses[0]);
-    }
-
-  },[addresses]);
-
+function Address({
+  addresses,
+  isDark,
+  isMobile,
+  setPhase,
+  update,
+  userId,
+  userAddressId,
+  loading,
+}) {
   const Location = ({ address, active }) => {
     return isMobile ? (
       <button
         className={`flex flex-row border-2 border-solid items-center w-full px-3 py-4 rounded-md mt-4 transition-all duration-500 dark:bg-opacity-5 ${
-          activeAddress === address
+          userAddressId === address?.id
             ? "bg-blueFD border-blueC0"
             : "bg-grayF9 border-gray45"
         }`}
@@ -40,15 +42,23 @@ function Address({ addresses, isDark, isMobile, setPhase }) {
       </button>
     ) : (
       <button
-        className={`flex flex-row border border-solid items-center w-full px-3 py-6 rounded-md mt-4 transition-all duration-500 gap-10 dark:bg-opacity-5 ${
-          activeAddress === address
+        className={`flex flex-row border border-solid items-center w-full px-3 py-6 rounded-md mt-4 transition-all duration-500 gap-10  border-opacity-30 dark:bg-opacity-5 ${
+          userAddressId === address?.id
             ? "bg-blueC0 bg-opacity-5 border-blueC0"
             : "bg-grayF9 border-gray45"
         }`}
-        onClick={() => setActiveAddress(address)}
+        onClick={() =>
+          userAddressId === address?.id
+            ? {}
+            : update({ userAddressId: address.id, userId })
+        }
       >
         <div className="flex flex-row flex-8 gap-4">
-          <Radio active={active} />
+          {loading && userAddressId !== address?.id ? (
+            <Loading size={2} color="bg-gray-400" />
+          ) : (
+            <Radio active={active} />
+          )}
           <div className="flex flex-col">
             <li className="text-right text-tiny leading-6 text-blue52 dark:text-white">
               آدرس:&nbsp;{address.address}
@@ -61,7 +71,7 @@ function Address({ addresses, isDark, isMobile, setPhase }) {
         </div>
         <div className="flex flex-col flex-5">
           <li className="text-right text-tiny leading-6 text-blue52 dark:text-white">
-            نام تحویل گیرنده:&nbsp;{address.firstName + ' ' + address.lastName}
+            نام تحویل گیرنده:&nbsp;{address.firstName + " " + address.lastName}
           </li>
           <li className="text-right text-tiny leading-6 text-blue52 dark:text-white mt-3">
             شماره تماس:&nbsp;{address.cellphone}
@@ -100,7 +110,7 @@ function Address({ addresses, isDark, isMobile, setPhase }) {
           <Location
             address={address}
             key={index}
-            active={activeAddress === address}
+            active={userAddressId === address?.id}
           />
         ))}
       </ul>
@@ -122,6 +132,13 @@ function Address({ addresses, isDark, isMobile, setPhase }) {
 const mapStateToProps = (state) => ({
   isDark: state.publicApi.isDark,
   isMobile: state.publicApi.isMobile,
+  userId: state.user.status?.id,
+  userAddressId: state.userFactor.info?.userAddressId,
+  loading: state.userFactor.loading,
 });
 
-export default connect(mapStateToProps)(Address);
+const mapDispatchToProps = {
+  update: userFactor.update,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Address);
diff --git a/src/views/DeliveryForm/PaymentMethod/index.js b/src/views/DeliveryForm/PaymentMethod/index.js
index c631ee5..fb0ece9 100644
--- a/src/views/DeliveryForm/PaymentMethod/index.js
+++ b/src/views/DeliveryForm/PaymentMethod/index.js
@@ -6,12 +6,12 @@ function PaymentMethods({ paymentMethods, isDark }) {
   const Method = ({ method }) => {
     return (
       <button
-        className={`flex flex-col border border-solid items-center w-full px-2.5 py-3.5 rounded-md mt-4 relative transition-all duration-500 dark:text-white text-tiny ${
+        className={`flex flex-col border border-solid cursor-not-allowed items-center w-full px-2.5 py-3.5 rounded-md mt-4 relative transition-all duration-500 dark:text-white text-tiny ${
           activeMethod === method
             ? "bg-blueFD border-blueC0 text-blueC0 bg-opacity-5"
             : "bg-grayF9 border-grayDB text-gray70 bg-opacity-5"
         }`}
-        onClick={() => setActiveMactiveMethod(method)}
+        onClick={() => {}}
       >
         {method.name}
       </button>
diff --git a/src/views/DeliveryForm/TransportMethod/index.js b/src/views/DeliveryForm/TransportMethod/index.js
index 819bc29..8d9d571 100644
--- a/src/views/DeliveryForm/TransportMethod/index.js
+++ b/src/views/DeliveryForm/TransportMethod/index.js
@@ -73,7 +73,7 @@ function TransportMethod({
             : {}
         }
       >
-        {loading ? (
+        {loading && factorInfo?.transportId !== method?.id ? (
           <Loading
             size={4}
             color={
diff --git a/src/views/Home/Desktop/Part2/index.js b/src/views/Home/Desktop/Part2/index.js
index 516a61b..caf8437 100644
--- a/src/views/Home/Desktop/Part2/index.js
+++ b/src/views/Home/Desktop/Part2/index.js
@@ -6,10 +6,8 @@ import arrow from "../../../../assets/icons/dropdown-blue.svg";
 import { Link } from "react-router-dom";
 import Product from "../../../../components/Product";
 import Button from "../../../../components/Button";
-// import ScrollContainer from "react-indiana-drag-scroll";
 
 const Part2 = ({ books, grades }) => {
-  // console.log({ books });
   const [filter, setFilter] = useState({
     search: "",
     grade: "",
diff --git a/src/views/Home/Portrait/Private/MyBooks/index.js b/src/views/Home/Portrait/Private/MyBooks/index.js
index 1e7f0df..30a676d 100644
--- a/src/views/Home/Portrait/Private/MyBooks/index.js
+++ b/src/views/Home/Portrait/Private/MyBooks/index.js
@@ -34,7 +34,7 @@ function MyBooks({ books, getList, grades, isMobile }) {
 
   return (
     <div className="px-4 mb-5 lg:mb-0" style={{maxWidth: '100%'}}>
-      <div className="w-full flex flex-col rounded-md pt-4 lg:py-5  px-2 lg:px-4 bg-blueC0 bg-opacity-10 border border-green-200 border-solid dark:bg-gray2077 overflow-hidden">
+      <div className="w-full flex flex-col rounded-md pt-4 lg:py-5  px-2 lg:px-4 bg-blueC0 bg-opacity-5 border border-green-200 border-solid dark:bg-gray2077 overflow-hidden">
         <strong className="text-green7B dark:text-white font-bold text-sm lg:text-base">
           کتابهای من
         </strong>
diff --git a/src/views/Home/Portrait/Private/Videos/index.js b/src/views/Home/Portrait/Private/Videos/index.js
index 838a623..c044a09 100644
--- a/src/views/Home/Portrait/Private/Videos/index.js
+++ b/src/views/Home/Portrait/Private/Videos/index.js
@@ -35,9 +35,9 @@ function Videos({ videos, grades, isDark, isMobile }) {
   };
   return (
     <div className="w-full px-4 lg:py-4">
-      <div className="w-full flex flex-col py-4 lg:px-3 overflow-hidden lg:border lg:border-solid lg:border-gray-200 rounded-md lg:bg-blueC0 lg:bg-opacity-10">
+      <div className="w-full flex flex-col py-4 lg:px-3 overflow-hidden lg:border lg:border-solid lg:border-gray-200 rounded-md lg:bg-blueC0 lg:bg-opacity-5">
         <header className="w-full flex flex-row justify-between items-center">
-          <strong className="text-green7B dark:text-white font-bold text-sm lg:text-base">
+          <strong className="text-green7B dark:text-white font-bold text-sm lg:text-base mt-2">
             دوره‌های ویدئویی شما
           </strong>
           <img
diff --git a/src/views/Orders/components/Order.js b/src/views/Orders/components/Order.js
index 81c4ba2..8af06c0 100644
--- a/src/views/Orders/components/Order.js
+++ b/src/views/Orders/components/Order.js
@@ -20,7 +20,7 @@ const status = {
 
 function Order({ order, isMobile }) {
   return (
-    <div className="w-full flex flex-col rounded-md overflow-hidden my-3 border border-solid border-blueC0 border-opacity-10 dark:border-blueC0 dark:border-opacity-10 lg:w-3/5 mx-auto">
+    <div className="w-full flex flex-col rounded-md overflow-hidden my-3 border border-solid border-blueC0 border-opacity-50 dark:border-blueC0 dark:border-opacity-10 lg:w-4/5 mx-auto">
       <div className="flex flex-row w-full justify-between items-center p-3 bg-blueC0 bg-opacity-10 dark:bg-blueC0 dark:bg-opacity-10">
         <strong className="font-medium text-sm lg:text-tiny text-green4F dark:text-white">
           {_.join(["شماره سفارش:", order.number], " ")}
@@ -39,8 +39,9 @@ function Order({ order, isMobile }) {
         <div className="flex flex-col">
           <div className="flex flex-row mb-2">
             {order.items.length < 2
-              ? order?.items?.map((item) => (
+              ? order?.items?.map((item, index) => (
                   <img
+                    key={index}
                     src={item}
                     className="rounded-md ml-1.5"
                     style={{
@@ -49,8 +50,9 @@ function Order({ order, isMobile }) {
                     }}
                   />
                 ))
-              : order.items?.slice(0, 1)?.map((item) => (
+              : order.items?.slice(0, 1)?.map((item, index) => (
                   <img
+                    key={index}
                     src={item}
                     className="rounded-md ml-1.5"
                     style={{
diff --git a/src/views/Orders/index.js b/src/views/Orders/index.js
index a80dcb7..8ac36a1 100644
--- a/src/views/Orders/index.js
+++ b/src/views/Orders/index.js
@@ -5,12 +5,9 @@ import { publicApi } from "../../redux/actions";
 //assets
 import bookImage from "../../assets/images/book-mini.svg";
 
-function Orders({ orders, headerOptions, setHeaderOptions }) {
-  useEffect(() => {
-    setHeaderOptions(headerOptions);
-  }, []);
+function Orders({ orders }) {
   return (
-    <div className="flex flex-col px-4 lg:pb-20 lg:pt-24">
+    <div className="flex flex-col px-4">
       {orders.map((order, index) => (
         <Order order={order} key={index} />
       ))}
@@ -21,7 +18,6 @@ function Orders({ orders, headerOptions, setHeaderOptions }) {
 const mapStateToProps = (state) => ({});
 
 const mapDispatchToProps = {
-  setHeaderOptions: publicApi.setHeaderOptions,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Orders);
diff --git a/src/views/Products/layouts/Main.js b/src/views/Products/layouts/Main.js
index 225253d..1cef5bc 100644
--- a/src/views/Products/layouts/Main.js
+++ b/src/views/Products/layouts/Main.js
@@ -1,23 +1,23 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
-import { Carousel } from "@trendyol-js/react-carousel";
+import { ScrollingCarousel } from "@trendyol-js/react-carousel";
 
-import filterIcon from "../../../assets/images/vuesax-linear-filter-tick.svg";
 import Product from "../../../components/Product";
 import VodProduct from "../../../components/VodProduct";
-import { book, publicApi, product } from "../../../redux/actions";
-import posterImage from "../../../assets/images/poster.svg";
-import arrow from "../../../assets/icons/dropdown-blue.svg";
+import Loading from "../../../components/Loading";
+import { book, publicApi } from "../../../redux/actions";
+
+export const Main = ({ books, grades, sortMethods, filterOptions }) => {
+  const [filterLoading, setFilterLoading] = useState(false);
+
+  useEffect(() => {
+    setFilterLoading(() => true);
+    setTimeout(() => {
+      setFilterLoading(() => false);
+    }, 500);
+  }, [filterOptions]);
 
-export const Main = ({
-  books,
-  grades,
-  selectedGrade,
-  gradeFilterBooks,
-  sortMethods,
-  filterOptions,
-}) => {
   useEffect(() => {
     window.scrollTo(0, 0);
   }, []);
@@ -34,7 +34,9 @@ export const Main = ({
     }
     if (subject) {
       bySubjectFilter = byGradeFilter?.filter(
-        (book) => book?.product[type]?.name?.indexOf(subject) !== -1
+        (book) =>
+          book?.product[type]?.name?.indexOf(subject) !== -1 ||
+          book?.name.indexOf(subject) !== -1
       );
     } else {
       bySubjectFilter = byGradeFilter;
@@ -93,7 +95,7 @@ export const Main = ({
   };
 
   return (
-    <div className="flex flex-col w-3/4 p-4 pb-20 min-h-screen">
+    <div className="flex flex-col w-3/4 p-4 pb-20 min-h-screen relative">
       <div className="flex w-full bg-blue rounded-lg border border-solid border-gray-200 p-2 items-center my-1.5 justify-center text-blue52">
         <div className="flex text-sm items-center mx-2">
           <svg
@@ -159,52 +161,33 @@ export const Main = ({
           </span>
         </div>
         <ul className="flex py-0 flex-1 gap-4">
-          {sortMethods.map((item) => (
+          {sortMethods.map((item, index) => (
             <li
+              key={index}
               className="text-sm rounded py-2 px-3 transition-all	duration-700 hover:bg-greenBA hover:bg-opacity-5 hover:text-greenBA cursor-pointer"
-              onClick={() => console.log("a")}
             >
               {item}
             </li>
           ))}
         </ul>
       </div>
-      {books?.length > 0 &&
-        (filterOptions?.productType
-          ? filterOptions.productType === "دوره ویدئویی"
-          : true) && (
-          <div className="relative " style={{ direction: "ltr" }}>
-            <Carousel
-              show={Math.round(window.innerWidth / 500)}
-              slide={2}
-              swiping={true}
-              useArrowKeys={true}
-              infinite={true}
-              transition={0.5}
-              className="flex flex-row"
-              rightArrow={
-                <img
-                  className="absolute top-1/2 transform -rotate-90 -translate-y-1/2 cursor-pointer p-0"
-                  src={arrow}
-                  alt=""
-                />
-              }
-              leftArrow={
-                <img
-                  className="absolute top-1/2 transform -translate-y-1/2  -translate-x-5 cursor-pointer rotate-90 p-2 -left-3"
-                  src={arrow}
-                  alt=""
-                />
-              }
-            >
-              {Items(2)}
-            </Carousel>
-          </div>
-        )}
+      {(filterOptions?.productType
+        ? filterOptions.productType === "دوره ویدئویی"
+        : true) && (
+        <ScrollingCarousel className="py-3">{Items(2)}</ScrollingCarousel>
+      )}
 
       <div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden gap-4 justify-evenly pt-3">
         {Items(1)}
       </div>
+      {filterLoading && (
+        <div
+          className="w-full flex justify-center items-center bg-white bg-opacity-20 backdrop-filter backdrop-blur-xl absolute left-0 top-0"
+          style={{ height: "calc(100vh - 80px)" }}
+        >
+          <Loading size={4} color="bg-green-400" />
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/views/Products/layouts/Sidebar.js b/src/views/Products/layouts/Sidebar.js
index 6c7ec95..9220191 100644
--- a/src/views/Products/layouts/Sidebar.js
+++ b/src/views/Products/layouts/Sidebar.js
@@ -84,6 +84,12 @@ export const Sidebar = ({
     );
   };
 
+  const filterLength =
+    (Object.values(filterOptions)[0] ? 1 : 0) +
+    (Object.values(filterOptions)[1] ? 1 : 0) +
+    (Object.values(filterOptions)[2] ? 1 : 0) +
+    (Object.values(filterOptions)[3] ? 1 : 0);
+
   return (
     <div
       className="flex flex-col w-1/4 px-4 pt-5 pb-2 bg-gray-50 transform translate-y-5 border border-solid border-gray-200 rounded-md"
@@ -91,7 +97,25 @@ export const Sidebar = ({
         height: "fit-content",
       }}
     >
-      <strong className="text-lg text-green4F mb-10">فیلترها</strong>
+      <div className="flex justify-between items-center mb-10">
+        <strong className="text-lg text-green4F">فیلترها</strong>
+        {filterLength > 0 && (
+          <span
+            className="text-tiny text-greenBA bg-greenBA bg-opacity-20 rounded-full px-3 py-2"
+            onClick={() =>
+              setFilterOptions({
+                available: false,
+                subject: null,
+                grade: null,
+                productType: null,
+                sort: null,
+              })
+            }
+          >
+            {filterLength + " " + "فیلتر"}
+          </span>
+        )}
+      </div>
       <div className="flex flex-col divide-y divide-solid divide-gray-200">
         <Dropdown
           list={productTypes}
diff --git a/src/views/QR/Content/index.js b/src/views/QR/Content/index.js
index 71402d1..b0caa35 100644
--- a/src/views/QR/Content/index.js
+++ b/src/views/QR/Content/index.js
@@ -12,14 +12,12 @@ export const Content = ({
 }) => {
   useEffect(() => {
     const path = window.location.pathname;
-    // 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);
     }
   }, [data]);
 
diff --git a/src/views/QR/Scan/index.js b/src/views/QR/Scan/index.js
index a2f9b94..9c380bf 100644
--- a/src/views/QR/Scan/index.js
+++ b/src/views/QR/Scan/index.js
@@ -18,7 +18,6 @@ export const Scan = ({
   };
 
   const handleError = (err) => {
-    // console.error(err);
   };
 
   useEffect(() => {
diff --git a/src/views/ShoppingCart/Product/index.js b/src/views/ShoppingCart/Product/index.js
index 3ea3028..4609f98 100644
--- a/src/views/ShoppingCart/Product/index.js
+++ b/src/views/ShoppingCart/Product/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { connect } from "react-redux";
 import { userProduct } from "../../../redux/actions";
 import separate from "../../../utils/separate";
@@ -10,7 +10,6 @@ import exitIcon from "../../../assets/icons/exit.svg";
 import deleteIcon from "../../../assets/icons/delete.svg";
 
 function Product({ product, grades, pushToCart, isMobile, loading }) {
-  let id;
   return isMobile ? (
     <div className="flex flex-row justify-between py-5 border-b border-solid border-grayDB dark:border-gray45">
       <div className="flex flex-row">
@@ -92,9 +91,7 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
   ) : (
     <div
       className="flex flex-row w-full gap-10 py-4 border-b border-solid border-gray-200"
-      onClick={() => {
-        id = product?.id;
-      }}
+      onClick={() => localStorage.setItem("cartItem", product?.id)}
     >
       <div className="w-3/4 flex flex-row">
         <img
diff --git a/src/views/ShoppingCart/index.js b/src/views/ShoppingCart/index.js
index ef76f48..027d3dd 100644
--- a/src/views/ShoppingCart/index.js
+++ b/src/views/ShoppingCart/index.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { userProduct, userFactor, publicApi } from "../../redux/actions";
-import separate from '../../utils/separate';
+import separate from "../../utils/separate";
 import { toast } from "react-toastify";
 import DeliveryForm from "../DeliveryForm";
 import Product from "./Product";
@@ -68,12 +68,14 @@ function ShoppingCart({
           </strong>
         </header>
         <ul className="w-full mt-2 list-none p-0">
-          {list.map(
-            (product, index) =>
-              product.condition < 2 && (
-                <Product loading={loading} key={index} product={product} />
-              )
-          )}
+          {list
+            .sort((a, b) => a?.id - b?.id)
+            .map(
+              (product, index) =>
+                product.condition < 2 && (
+                  <Product loading={loading} key={index} product={product} />
+                )
+            )}
         </ul>
         <div className="w-full flex justify-end">
           <Code />
@@ -103,7 +105,11 @@ function ShoppingCart({
         <span
           className="font-medium text-lg dark:text-white"
           style={{
-            color: !isDark ? (type === "error" ? "#F1420D" : "rgb(6, 186, 206)") : "",
+            color: !isDark
+              ? type === "error"
+                ? "#F1420D"
+                : "rgb(6, 186, 206)"
+              : "",
           }}
         >
           {separate(value)}
@@ -181,7 +187,7 @@ function ShoppingCart({
     </div>
   ) : (
     <div
-      className={`w-11/12 mx-auto flex flex-row relative gap-10 px-5 mt-10 pb-20 pt-24 ${
+      className={`w-11/12 mx-auto flex flex-row relative gap-10 px-5 mt-10 pb-20 pt-16 ${
         desktopContentTransform ? "top-24" : ""
       }`}
     >
@@ -189,23 +195,23 @@ function ShoppingCart({
       {phase !== "address" && (
         <div
           className="flex flex-col w-1/4 p-10 bg-white  shadow-all rounded-md px-4 py-4"
-          style={{ height: "fit-content", minWidth: 350}}
+          style={{ height: "fit-content", minWidth: 350 }}
         >
           <div className="flex flex-col w-full border-t py-2 border-gray-300 border-b">
             <PriceStatus
               name="مبلغ سبد خرید"
-              value={productsLength ? factorInfo?.sumPrice : ''}
+              value={productsLength ? factorInfo?.sumPrice : ""}
               type="normal"
             />
             <PriceStatus
               name="میزان تخفیف"
-              value={productsLength ? factorInfo?.offPrice : ''}
+              value={productsLength ? factorInfo?.offPrice : ""}
               type="error"
             />
             <PriceStatus
               name="مالیات بر ارزش افزوده"
               value={
-                productsLength ? Math.floor(factorInfo?.sumPrice * 0.009) : ''
+                productsLength ? Math.floor(factorInfo?.sumPrice * 0.009) : ""
               }
               type="error"
             />
@@ -215,7 +221,7 @@ function ShoppingCart({
               جمع کل سبد خرید
             </strong>
             <p className="font-medium text-greenBA text-lg dark:text-white">
-              {separate(productsLength ? factorInfo?.payPrice : '')}
+              {separate(productsLength ? factorInfo?.payPrice : "")}
               <span className="font-medium text-greenBA text-sm mr-2">
                 تومان
               </span>
@@ -296,7 +302,7 @@ const mapStateToProps = (state) => ({
   hasPhysical: state.userProduct.hasPhysical,
   desktopContentTransform: state.publicApi.desktopContentTransform,
   userProducts: state.userProduct.list,
-  loading: state.userProduct.loading
+  loading: state.userProduct.loading,
 });
 
 const mapDispatchToProps = {
diff --git a/src/views/Video/components/Desktop/Table.js b/src/views/Video/components/Desktop/Table.js
index 96b4e14..1177ab9 100644
--- a/src/views/Video/components/Desktop/Table.js
+++ b/src/views/Video/components/Desktop/Table.js
@@ -15,7 +15,7 @@ const Table = ({ specifications }) => {
   return (
     <ul className="w-full">
       {Object.keys(specifications).map((specification, index) => (
-        <li className="flex my-3 cursor-pointer group">
+        <li className="flex my-3 cursor-pointer group" key={index}>
           <div
             className=" bg-grayF9 rounded px-3 py-4 ml-2 text-greenBA text-sm group-hover:bg-blueC0 group-hover:bg-opacity-10"
             style={{ flex: 2 }}
diff --git a/src/views/Video/components/Desktop/Videos.js b/src/views/Video/components/Desktop/Videos.js
index a5cdbaa..7146abd 100644
--- a/src/views/Video/components/Desktop/Videos.js
+++ b/src/views/Video/components/Desktop/Videos.js
@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from "react";
+import React, { useState, useEffect } from "react";
 
 import "../../../../components/ProductImage/index.scss";
 
@@ -13,25 +13,16 @@ const Videos = ({ videos }) => {
       let mylist = videos?.split(",");
       setList(() => mylist);
       setActiveVideo(() => mylist[0]);
-      console.log(videos);
     }
   }, [videos]);
 
   return (
-    <div className="flex flex-row w-full bg-gray-300" style={{height : 'calc(100vh / 1.5)'}}>
-      
-      {/* <img
-        src={productImg}
-        alt=""
-        style={{ height: "calc(100vh)", width: "w-full" }}
-        className="rounded-md"
-      /> */}
+    <div
+      className="flex flex-row w-full bg-gray-300"
+      style={{ height: "calc(100vh / 1.5)" }}
+    >
     </div>
   );
 };
-// {[0, 1, 2, 3, 4].map((item, index) => (
-
-//   ))}
 
 export default Videos;
-