diff --git a/src/assets/icons/bookmark-active-dark.svg b/src/assets/icons/bookmark-active-dark.svg
new file mode 100644
index 0000000..1fdbe87
--- /dev/null
+++ b/src/assets/icons/bookmark-active-dark.svg
@@ -0,0 +1,8 @@
+<svg id="vuesax_linear_archive-add" data-name="vuesax/linear/archive-add" xmlns="http://www.w3.org/2000/svg" width="29.778" height="29.778" viewBox="0 0 29.778 29.778">
+  <g id="archive-add" transform="translate(0)">
+    <path id="Vector" d="M6.2,0H0" transform="translate(11.787 13.214)" fill="#fff" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M0,0V6.2" transform="translate(14.889 10.187)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-3" data-name="Vector" d="M16.75,0H4.789A4.8,4.8,0,0,0,0,4.789V22.272c0,2.233,1.6,3.176,3.561,2.1l6.055-3.362a2.628,2.628,0,0,1,2.32,0l6.055,3.362c1.96,1.092,3.561.149,3.561-2.1V4.789A4.819,4.819,0,0,0,16.75,0Z" transform="translate(4.119 2.482)" fill="#fff" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-4" data-name="Vector" d="M0,0H29.778V29.778H0Z" fill="none" opacity="0"/>
+  </g>
+</svg>
diff --git a/src/assets/icons/bookmark-active-light.svg b/src/assets/icons/bookmark-active-light.svg
new file mode 100644
index 0000000..13423d5
--- /dev/null
+++ b/src/assets/icons/bookmark-active-light.svg
@@ -0,0 +1,8 @@
+<svg id="vuesax_linear_archive-add" data-name="vuesax/linear/archive-add" xmlns="http://www.w3.org/2000/svg" width="29.778" height="29.778" viewBox="0 0 29.778 29.778">
+  <g id="archive-add" transform="translate(0)">
+    <path id="Vector" d="M6.2,0H0" transform="translate(11.787 13.214)" fill="rgb(19, 123, 79)" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M0,0V6.2" transform="translate(14.889 10.187)" fill="rgb(19, 123, 79)" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-3" data-name="Vector" d="M16.75,0H4.789A4.8,4.8,0,0,0,0,4.789V22.272c0,2.233,1.6,3.176,3.561,2.1l6.055-3.362a2.628,2.628,0,0,1,2.32,0l6.055,3.362c1.96,1.092,3.561.149,3.561-2.1V4.789A4.819,4.819,0,0,0,16.75,0Z" transform="translate(4.119 2.482)" fill="rgb(19, 123, 79)" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-4" data-name="Vector" d="M0,0H29.778V29.778H0Z" fill="rgb(19, 123, 79)" opacity="0"/>
+  </g>
+</svg>
diff --git a/src/components/Drawer/index.js b/src/components/Drawer/index.js
index 36a9f8f..2a56294 100644
--- a/src/components/Drawer/index.js
+++ b/src/components/Drawer/index.js
@@ -10,7 +10,7 @@ import homeDarkIcon from "./home-dark.svg";
 import logoutIcon from "./logout.svg";
 import logoutDarkIcon from "./logout-dark.svg";
 import dangerIcon from "./mobile-danger.svg";
-import dangerDarkIcon from "./mobile-danger-dark.svg";
+// import dangerDarkIcon from "./mobile-danger-dark.svg";
 import activationIcon from "./activation.svg";
 import activationDarkIcon from "./activation-dark.svg";
 import contactIcon from "./contact.svg";
@@ -24,7 +24,7 @@ import cartDarkIcon from "./mobile-basket-dark.svg";
 import faqIcon from "./faq.svg";
 import faqDarkIcon from "./faq-dark.svg";
 
-import arrowLeftVideo from "../../assets/icons/dropdown-white.svg";
+// import arrowLeftVideo from "../../assets/icons/dropdown-white.svg";
 import sunIcon from "./sun.svg";
 import moonIcon from "./moon.svg";
 
@@ -40,186 +40,192 @@ const MyDrawer = ({
   setDialog,
   logout,
 }) => {
-  const [addUserDropdown, setAddUserDropdown] = useState(false);
-  const publicLink = [
-    {
-      name: window.t("صفحه اصلی"),
-      link: "/",
-      icon: (
-        <img
-          src={homeIcon}
-          className="opacity-50 dark:bg-white"
-          alt={window.t("صفحه اصلی")}
-        />
-      ),
-      toast: "",
-      message: "",
-    },
-    {
-      name: window.t("ورود یا ثبت نام"),
-      link: "/signup",
-      icon: (
-        <img
-          src={logoutIcon}
-          className="opacity-50 dark:bg-white"
-          alt={window.t("کتاب‌های من")}
-        />
-      ),
-      toast: "",
-      message: "",
-    },
-    {
-      name: window.t("پشتیبانی"),
-      link: "/contact-us",
-      icon: (
-        <img
-          src={dangerIcon}
-          className="opacity-50 dark:bg-white"
-          alt={window.t("پشتیبانی")}
-        />
-      ),
-      toast: "",
-      message: "",
-    },
-  ];
-  const privateLink = [
-    {
-      name: window.t("صفحه اصلی"),
-      link: "/",
-      icon: (
-        <img
-          src={isDark ? homeDarkIcon : homeIcon}
-          className="opacity-50"
-          alt={window.t("صفحه اصلی")}
-        />
-      ),
-      toast: "",
-      message: "",
-      onClick: () => {
-        setDrawerOpen(false);
+  // const [addUserDropdown, setAddUserDropdown] = useState(false);
+
+  const privateLink = React.useMemo(() => {
+    return [
+      {
+        name: window.t("صفحه اصلی"),
+        link: "/",
+        icon: (
+          <img
+            src={isDark ? homeDarkIcon : homeIcon}
+            className="opacity-50"
+            alt={window.t("صفحه اصلی")}
+          />
+        ),
+        toast: "",
+        message: "",
+        onClick: () => {
+          setDrawerOpen(false);
+        },
       },
-    },
-    {
-      name: window.t("سبد خرید"),
-      link: "/cart",
-      icon: (
-        <img
-          src={isDark ? cartDarkIcon : cartIcon}
-          className="opacity-50"
-          alt={window.t("سبد خرید")}
-        />
-      ),
-      toast: "",
-      message: "",
-      onClick: () => {
-        setDrawerOpen(false);
+      {
+        name: window.t("سبد خرید"),
+        link: "/cart",
+        icon: (
+          <img
+            src={isDark ? cartDarkIcon : cartIcon}
+            className="opacity-50"
+            alt={window.t("سبد خرید")}
+          />
+        ),
+        toast: "",
+        message: "",
+        onClick: () => {
+          setDrawerOpen(false);
+        },
       },
-    },
-    {
-      name: window.t("فعال سازی کتاب"),
-      link: "/activation",
-      icon: (
-        <img
-          src={isDark ? activationDarkIcon : activationIcon}
-          className="opacity-50"
-          alt={window.t("فعال سازی کتاب")}
-        />
-      ),
-      toast: "",
-      message: "",
-      onClick: () => {
-        setDrawerOpen(false);
+      {
+        name: window.t("فعال سازی کتاب"),
+        link: "/activation",
+        icon: (
+          <img
+            src={isDark ? activationDarkIcon : activationIcon}
+            className="opacity-50"
+            alt={window.t("فعال سازی کتاب")}
+          />
+        ),
+        toast: "",
+        message: "",
+        onClick: () => {
+          setDrawerOpen(false);
+        },
       },
-    },
-    {
-      name: window.t("واقعیت افزوده"),
-      link: "/ar",
-      icon: (
-        <img
-          src={isDark ? arDarkIcon : arIcon}
-          className="opacity-50"
-          alt={window.t("واقعیت افزوده")}
-        />
-      ),
-      toast: "",
-      message: "",
-      onClick: () => {
-        setDrawerOpen(false);
+      {
+        name: window.t("واقعیت افزوده"),
+        link: "/ar",
+        icon: (
+          <img
+            src={isDark ? arDarkIcon : arIcon}
+            className="opacity-50"
+            alt={window.t("واقعیت افزوده")}
+          />
+        ),
+        toast: "",
+        message: "",
+        onClick: () => {
+          setDrawerOpen(false);
+        },
       },
-    },
-    {
-      name: window.t("سفارشات"),
-      link: "/orders",
-      icon: (
-        <img
-          src={isDark ? ordersDarkIcon : ordersIcon}
-          className="opacity-50"
-          alt={window.t("سفارشات")}
-        />
-      ),
-      toast: "",
-      message: "",
-      onClick: () => {
-        setDrawerOpen(false);
+      {
+        name: window.t("سفارشات"),
+        link: "/orders",
+        icon: (
+          <img
+            src={isDark ? ordersDarkIcon : ordersIcon}
+            className="opacity-50"
+            alt={window.t("سفارشات")}
+          />
+        ),
+        toast: "",
+        message: "",
+        onClick: () => {
+          setDrawerOpen(false);
+        },
       },
-    },
-    {
-      name: window.t("سوالات متداول"),
-      link: "/faq",
-      icon: (
-        <img
-          src={isDark ? faqDarkIcon : faqIcon}
-          className="opacity-50"
-          alt={window.t("سوالات متداول")}
-        />
-      ),
-      toast: "",
-      message: "",
-      onClick: () => {
-        setDrawerOpen(false);
+      {
+        name: window.t("سوالات متداول"),
+        link: "/faq",
+        icon: (
+          <img
+            src={isDark ? faqDarkIcon : faqIcon}
+            className="opacity-50"
+            alt={window.t("سوالات متداول")}
+          />
+        ),
+        toast: "",
+        message: "",
+        onClick: () => {
+          setDrawerOpen(false);
+        },
       },
-    },
-    {
-      name: window.t("پشتیبانی"),
-      link: "/contact",
-      icon: (
-        <img
-          src={isDark ? contactDarkIcon : contactIcon}
-          className="opacity-50"
-          alt={window.t("پشتیبانی")}
-        />
-      ),
-      toast: "",
-      message: "",
-      onClick: () => {
-        setDrawerOpen(false);
+      {
+        name: window.t("پشتیبانی"),
+        link: "/contact",
+        icon: (
+          <img
+            src={isDark ? contactDarkIcon : contactIcon}
+            className="opacity-50"
+            alt={window.t("پشتیبانی")}
+          />
+        ),
+        toast: "",
+        message: "",
+        onClick: () => {
+          setDrawerOpen(false);
+        },
       },
-    },
-    {
-      name: window.t("خروج از حساب کاربری"),
-      link: "/",
-      icon: (
-        <img
-          src={isDark ? logoutDarkIcon : logoutIcon}
-          className="opacity-50"
-          alt={window.t("خروج از حساب کاربری")}
-        />
-      ),
-      toast: "",
-      message: "",
-      onClick: () => {
-        setDialog({
-          open: true,
-          type: "confirm",
-          accept: () => {
-            logout();
-          },
-          text: window.t("قصد خروج از حساب کاربری رو داری؟"),
-        });
-        setDrawerOpen(false);
+      {
+        name: window.t("خروج از حساب کاربری"),
+        link: "/",
+        icon: (
+          <img
+            src={isDark ? logoutDarkIcon : logoutIcon}
+            className="opacity-50"
+            alt={window.t("خروج از حساب کاربری")}
+          />
+        ),
+        toast: "",
+        message: "",
+        onClick: () => {
+          setDialog({
+            open: true,
+            type: "confirm",
+            accept: () => {
+              logout();
+            },
+            text: window.t("قصد خروج از حساب کاربری رو داری؟"),
+          });
+          setDrawerOpen(false);
+        },
       },
-    },
-  ];
+    ];
+  },[isDark, user]);
+
+  const publicLink = React.useMemo(() => {
+    return [
+      {
+        name: window.t("صفحه اصلی"),
+        link: "/",
+        icon: (
+          <img
+            src={homeIcon}
+            className="opacity-50 dark:bg-white"
+            alt={window.t("صفحه اصلی")}
+          />
+        ),
+        toast: "",
+        message: "",
+      },
+      {
+        name: window.t("ورود یا ثبت نام"),
+        link: "/signup",
+        icon: (
+          <img
+            src={logoutIcon}
+            className="opacity-50 dark:bg-white"
+            alt={window.t("کتاب‌های من")}
+          />
+        ),
+        toast: "",
+        message: "",
+      },
+      {
+        name: window.t("پشتیبانی"),
+        link: "/contact-us",
+        icon: (
+          <img
+            src={dangerIcon}
+            className="opacity-50 dark:bg-white"
+            alt={window.t("پشتیبانی")}
+          />
+        ),
+        toast: "",
+        message: "",
+      },
+    ];
+  },[isDark, user]);
 
   return (
     <Drawer
@@ -256,21 +262,21 @@ const MyDrawer = ({
                 {user?.cellphone}
               </span>
             </div>
-            <img
+            {/* <img
               src={arrowLeftVideo}
               alt=""
               className={`transform ${
                 addUserDropdown ? "rotate-90" : "-rotate-90"
               } cursor-pointer`}
               onClick={() => setAddUserDropdown(() => !addUserDropdown)}
-            />
+            /> */}
           </div>
         </header>
-        <ul
+        {/* <ul
           className={`flex flex-col ${
             addUserDropdown ? "h-20" : "h-0"
           } transition-all duration-500`}
-        ></ul>
+        ></ul> */}
         <ul className="h-full flex flex-col py-6 px-4 gap-6">
           {(!user ? publicLink : privateLink).map((item, key) => (
             <Link to={item.link} key={key} onClick={() => item.onClick()}>
diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js
index a0ae88c..4e932f5 100644
--- a/src/components/Navbar/index.js
+++ b/src/components/Navbar/index.js
@@ -9,6 +9,7 @@ import _ from "lodash";
 import Drawer from "../Drawer";
 import Search from "../Search";
 import SearchResult from "./SearchResult";
+import Loading from "../Loading";
 
 //assets
 import cartIcon from "./cart-blue.svg";
@@ -24,18 +25,24 @@ import arrowBlueIcon from "../../assets/icons/arrow-right-blue.svg";
 import arrowWhiteIcon from "../../assets/icons/arrow-left-white.svg";
 import dotsMenuDarkIcon from "../../assets/icons/dots-menu-dark.svg";
 import bookmarkDeactiveDarkIcon from "../../assets/icons/bookmark-deactive-dark.svg";
+import bookmarkActiveDarkIcon from "../../assets/icons/bookmark-active-dark.svg";
 import dotsMenuLightIcon from "../../assets/icons/dots-menu-light.svg";
 import bookmarkDeactiveLightIcon from "../../assets/icons/bookmark-deactive-light.svg";
+import bookmarkActiveLightIcon from "../../assets/icons/bookmark-active-light.svg";
 
 function Navbar({
   getCartProducts,
+  getUserFavorite,
   cartProductsLength,
   pages,
   isDark,
   isMobile,
-  isLogin,
+  user,
   headerOptions,
   addToFavorite,
+  deleteBookmark,
+  bookmarkLoading,
+  userFavoriteList,
   language,
 }) {
   const navigation = useNavigate();
@@ -46,11 +53,22 @@ function Navbar({
   const [search, setSearch] = useState(null);
   const [drawerOpen, setDrawerOpen] = useState(false);
 
+  const isActiveBookmark = React.useMemo(() => {
+    return userFavoriteList?.find((object) =>
+      headerOptions?.productId
+        ? object?.productId === headerOptions?.productId
+        : object?.contentId === headerOptions?.contentId
+    );
+  }, [headerOptions, userFavoriteList]);
+
+  console.log(Boolean(isActiveBookmark));
+
   useEffect(() => {
     if (window.scrollY === 0) {
       setTop(() => true);
     }
     if (isMobile) {
+      // getUserFavorite();
       window.addEventListener("scroll", () => {
         if (window.scrollY === 0) {
           setTop(() => true);
@@ -62,13 +80,11 @@ function Navbar({
   }, []);
 
   useEffect(() => {
-    if (!isMobile && isLogin) {
-      console.log(111);
-      // console.log/("gl3");
+    if (!isMobile && user) {
 
       getCartProducts();
     }
-  }, [isLogin]);
+  }, [user]);
 
   return (
     <div
@@ -77,7 +93,9 @@ function Navbar({
         backgroundColor: !top ? (isDark ? "#061B30" : "white") : "",
       }}
     >
-      <div className="w-full lg:w-11/12 lg:mx-auto relative flex items-center justify-between py-3  px-4 bg-white">
+      <div className="w-full lg:w-11/12 lg:mx-auto relative flex items-center justify-between py-3  px-4" style={{
+        backgroundColor: isDark ? "#061B30" : "white"
+      }}>
         {/* desktop */}
         <div className=" items-center hidden lg:flex">
           <Link
@@ -193,16 +211,35 @@ function Navbar({
               </Link>
             </>
           )}
-          {bookmark && (
-            <img
-              src={
-                isDark ? bookmarkDeactiveDarkIcon : bookmarkDeactiveLightIcon
-              }
-              alt="bookmark"
-              className="w-7 flex lg:hidden"
-              onClick={() => addToFavorite({ [bookmark]: location.getId() })}
-            />
-          )}
+          {bookmark ? (
+            bookmarkLoading ? (
+              <Loading size={2} color="bg-green-500" />
+            ) : isActiveBookmark ? (
+              <img
+                src={
+                  isDark ? bookmarkActiveDarkIcon : bookmarkActiveLightIcon
+                }
+                alt="bookmark"
+                className="w-7 flex lg:hidden"
+                onClick={() =>
+                  deleteBookmark({
+                    id: userFavoriteList?.find(
+                      (object) => object?.productId === headerOptions?.productId
+                    )?.id,
+                  })
+                }
+              />
+            ) : (
+              <img
+                src={
+                  isDark ? bookmarkDeactiveDarkIcon : bookmarkDeactiveLightIcon
+                }
+                alt="bookmark"
+                className="w-7 flex lg:hidden"
+                onClick={() => addToFavorite({ [bookmark]: location.getId() })}
+              />
+            )
+          ) : null}
           {menu && (
             <img
               src={isDark ? dotsMenuDarkIcon : dotsMenuLightIcon}
@@ -242,7 +279,7 @@ function Navbar({
             onClick={() => setOverLayer(true)}
           />
 
-          {isLogin && (
+          {user && (
             <div className="hidden lg:flex justify-end items-center gap-4">
               <Link to="/cart" className="relative">
                 <img src={cartIcon} alt="" className="w-8" />
@@ -256,7 +293,7 @@ function Navbar({
             </div>
           )}
 
-          {!isLogin ? (
+          {!user ? (
             <Link
               to="/signup"
               className="bg-blueC0 font-semibold text-white rounded-md px-4 py-3 text-sm mr-7 hover:bg-opacity-90 shadow-sm"
@@ -284,15 +321,19 @@ const mapStateToProps = (state) => ({
   isDark: state.publicApi.isDark,
   isMobile: state.publicApi.isMobile,
   headerOptions: state.publicApi.headerOptions,
-  isLogin: state.user.status,
+  user: state.user.status,
   cartProductsLength: state.userProduct.list?.filter(
     (product) => product.condition < 2
   )?.length,
+  bookmarkLoading: state.userFavorite.loading,
+  userFavoriteList: state.userFavorite.list,
 });
 
 const mapDispatchToProps = {
   getCartProducts: userProduct.list,
   addToFavorite: userFavorite.add,
+  deleteBookmark: userFavorite.del,
+  getUserFavorite: userFavorite.list
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Navbar);
diff --git a/src/router.js b/src/router.js
index d39bd49..1677155 100644
--- a/src/router.js
+++ b/src/router.js
@@ -161,7 +161,17 @@ function Router({
               path="/products"
               exact
               element={
-                <Products headerOptions={{ shown: isMobile ? false : true }} />
+                <Products
+                  headerOptions={{
+                    logo: true,
+                    hamburgerMenu: true,
+                    qr: true,
+                    title: false,
+                    back: false,
+                    shown: true,
+                    menu: false,
+                  }}
+                />
               }
             />
             <Route
@@ -523,15 +533,15 @@ function Router({
               exact
               element={
                 <Blogs
-                // headerOptions={{
-                //   logo: true,
-                //   hamburgerMenu: true,
-                //   qr: true,
-                //   title: false,
-                //   back: false,
-                //   shown: true,
-                //   menu: false,
-                // }}
+                  headerOptions={{
+                    logo: true,
+                    hamburgerMenu: true,
+                    qr: true,
+                    title: false,
+                    back: false,
+                    shown: true,
+                    menu: false,
+                  }}
                 />
               }
             />
diff --git a/src/views/Blogs/index.js b/src/views/Blogs/index.js
index 4f420bc..ea58929 100644
--- a/src/views/Blogs/index.js
+++ b/src/views/Blogs/index.js
@@ -20,23 +20,16 @@ export const Blogs = ({
   getList,
   blogs,
   setHeaderOptions,
+  headerOptions,
   activeHashtag,
 }) => {
   useEffect(() => {
-    if (isMobile) {
-      setHeaderOptions({
-        shown: true,
-        hamburgerMenu: true,
-        qr: true,
-      });
-    } else {
-      setHeaderOptions({ shown: true });
-    }
+    setHeaderOptions(headerOptions);
     getList();
   }, []);
 
   useEffect(() => {
-    window.scrollTo(0, 0);
+    window.scroll({ top: 0, behavior: "smooth" });
   }, []);
 
   return (
diff --git a/src/views/Product/index.js b/src/views/Product/index.js
index b6cdc50..d1689ee 100644
--- a/src/views/Product/index.js
+++ b/src/views/Product/index.js
@@ -29,6 +29,7 @@ export const Product = ({
   userId,
   pushToCart,
   headerOptions,
+  bookmarkLoading,
   setHeaderOptions,
 }) => {
   const [type, setType] = useState("physical");
@@ -37,7 +38,6 @@ export const Product = ({
 
   useEffect(() => {
     getInfo({ id: location.getId(), vod: true });
-    setHeaderOptions(headerOptions);
     if (!isMobile) {
       window.addEventListener("scroll", () => {
         if (window.scrollY >= 64) {
@@ -49,6 +49,12 @@ export const Product = ({
     }
   }, []);
 
+  useEffect(() => {
+    if (book) {
+      setHeaderOptions({ ...headerOptions, productId: book?.id });
+      window.scroll({ top: 0, behavior: "smooth" });
+    }
+  }, [book]);
   return (
     <>
       {/* Portrait */}
@@ -88,9 +94,11 @@ export const Product = ({
             <li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-tiny leading-5 font-medium text-green7B dark:text-white">
               {"فیزیکی - دیجیتالی"} <br /> در دسترس
             </li>
-            <li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-tiny leading-5 font-medium text-green7B dark:text-white">
-              {book?.rate} <br /> امتیاز
-            </li>
+            {book?.rate ? (
+              <li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-tiny leading-5 font-medium text-green7B dark:text-white">
+                {book?.rate} <br /> امتیاز
+              </li>
+            ) : null}
           </ul>
           <h2 className="text-green7B text-base font-semibold mt-10 dark:text-greenBA">
             نسخه محصول را انتخاب کنید
@@ -196,6 +204,7 @@ const mapStateToProps = (state) => ({
   isMobile: state.publicApi.isMobile,
   isDark: state.publicApi.isDark,
   userId: state.user.status?.id,
+  bookmarkLoading: state.userFavorite.loading,
 });
 
 const mapDispatchToProps = {
diff --git a/src/views/Products/index.js b/src/views/Products/index.js
index 4ba7306..1aefab3 100644
--- a/src/views/Products/index.js
+++ b/src/views/Products/index.js
@@ -23,6 +23,7 @@ export const Products = ({
   useEffect(() => {
     getList({ vod: true });
     setHeaderOptions(headerOptions);
+    window.scroll({top: 0, behavior : 'smooth'});
   }, []);
 
   return (
diff --git a/src/views/Products/layouts/Mobile/Main.js b/src/views/Products/layouts/Mobile/Main.js
index b0bf8dd..2f7570f 100644
--- a/src/views/Products/layouts/Mobile/Main.js
+++ b/src/views/Products/layouts/Mobile/Main.js
@@ -137,7 +137,7 @@ export const Main = ({ books, filterOptions, grades }) => {
   };
 
   return (
-    <div className="h-full overflow-y-scroll w-full flex flex-wrap py-32">
+    <div className="h-full overflow-y-scroll w-full flex flex-wrap pt-20 pb-32">
       {filterOptions?.productType === "دوره ویدئویی" && Items(2)}
       {filterOptions?.productType === "کتاب دیجیتال" && Items(0)}
       {filterOptions?.productType === "کتاب فیزیکی" && Items(1)}
diff --git a/src/views/ShoppingCart/Product/index.js b/src/views/ShoppingCart/Product/index.js
index 82dc283..e03b7b8 100644
--- a/src/views/ShoppingCart/Product/index.js
+++ b/src/views/ShoppingCart/Product/index.js
@@ -10,6 +10,14 @@ import exitIcon from "../../../assets/icons/exit.svg";
 import deleteIcon from "../../../assets/icons/delete.svg";
 
 function Product({ product, grades, pushToCart, isMobile, loading }) {
+  const [selectedItem, setSelectedItem] = React.useState(null);
+
+  React.useEffect(() => {
+    if (!loading) {
+      setSelectedItem(null);
+    }
+  }, [loading]);
+
   return isMobile ? (
     <div className="flex justify-between py-5 border-b border-solid border-grayDB dark:border-gray45">
       <div className="flex ">
@@ -34,7 +42,8 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
           src={exitIcon}
           className="w-4"
           alt=""
-          onClick={() =>
+          onClick={() => {
+            setSelectedItem(product?.productId);
             pushToCart(
               {
                 productId: product?.productId,
@@ -43,26 +52,27 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
               },
               {},
               { id: product?.factorId }
-            )
-          }
+            );
+          }}
         />
         <div className="flex flex-col items-center">
-          {product.productType === 2 && (
+          {product.productType === 2 ? (
             <div className="flex items-center mb-3">
               <button
                 className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-blueC0 text-blueC0"
-                onClick={() =>
+                onClick={() => {
+                  setSelectedItem(product?.productId);
                   pushToCart({
                     productId: product?.productId,
                     userId: product?.userId,
                     count: 1,
-                  })
-                }
+                  });
+                }}
               >
                 +
               </button>
               <span className="mx-2.5 font-semibold text-4xl text-blueC0">
-                {loading ? (
+                {loading && selectedItem === product?.productId ? (
                   <Loading size={2} color="bg-green-500" />
                 ) : (
                   product.count
@@ -72,7 +82,8 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
                 <>
                   {product.count === 1 ? (
                     <img
-                      onClick={() =>
+                      onClick={() => {
+                        setSelectedItem(product?.productId);
                         pushToCart(
                           {
                             productId: product?.productId,
@@ -82,22 +93,23 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
                           },
                           {},
                           { id: product?.factorId }
-                        )
-                      }
+                        );
+                      }}
                       src={deleteIcon}
                       alt="delete"
-                      className="border border-blue-800 border-solid p-1 w-8 bg-red-100 rounded-md cursor-pointer"
+                      className="border border-red-800 border-solid p-1 w-8 bg-red-100 rounded-md cursor-pointer"
                     />
                   ) : (
                     <button
                       className="rounded-md pt-2 pb-1.5 px-3 font-bold border border-solid border-blueC0 text-blueC0 dark:border-blueC0 dark:text-blueC0"
-                      onClick={() =>
+                      onClick={() => {
+                        setSelectedItem(product?.productId);
                         pushToCart({
                           productId: product?.productId,
                           userId: product?.userId,
                           count: -1,
-                        })
-                      }
+                        });
+                      }}
                     >
                       -
                     </button>
@@ -105,7 +117,7 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
                 </>
               }
             </div>
-          )}
+          ) : null}
           <strong className="font-bold text-md text-blue5F dark:text-white">
             {separate(product.product.price * product.count)}&nbsp;تومان
           </strong>
@@ -147,13 +159,14 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
       <div className="w-1/4 flex items-center">
         <button
           className="rounded-md pt-1 px-1.5 border border-solid border-blueC0 text-blueC0 text-lg font-bold"
-          onClick={() =>
+          onClick={() => {
+            setSelectedItem(product?.productId);
             pushToCart({
               productId: product?.productId,
               userId: product?.userId,
               count: 1,
-            })
-          }
+            });
+          }}
         >
           +
         </button>
@@ -164,7 +177,8 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
           <>
             {product.count === 1 ? (
               <img
-                onClick={() =>
+                onClick={() => {
+                  setSelectedItem(product?.productId);
                   pushToCart(
                     {
                       productId: product?.productId,
@@ -173,8 +187,8 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
                     },
                     {},
                     { id: product?.factorId }
-                  )
-                }
+                  );
+                }}
                 src={deleteIcon}
                 alt="delete"
                 className="border border-red-300 border-solid p-1 w-7 bg-red-100 rounded-md cursor-pointer"
@@ -182,13 +196,14 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
             ) : (
               <button
                 className="rounded-md px-2 font-bold border border-solid border-blueC0 text-blueC0 dark:border-blueC0 dark:text-blueC0 text-2xl"
-                onClick={() =>
+                onClick={() => {
+                  setSelectedItem(product?.productId);
                   pushToCart({
                     productId: product?.productId,
                     userId: product?.userId,
                     count: -1,
-                  })
-                }
+                  });
+                }}
               >
                 -
               </button>