diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 3dbec17..eef3ef4 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -32,9 +32,20 @@ const Navbar = ({
   setBoxPosition,
   headerOptions,
   addToBookmark,
+  deleteBookmark,
+  userFavoriteList,
 }) => {
   const navigation = useNavigation();
   const colorScheme = Appearance.getColorScheme();
+
+  const isActiveBookmark = React.useMemo(() => {
+    return userFavoriteList.filter((object) =>
+      headerOptions.bookmarkItem?.productId
+        ? object.productId === headerOptions.bookmarkItem?.productId
+        : object.contentId === headerOptions.bookmarkItem?.contentId
+    ).length;
+  }, [headerOptions, userFavoriteList]);
+
   const Button = useCallback(({ icon, route }) => {
     return (
       <TouchableOpacity
@@ -242,23 +253,48 @@ const Navbar = ({
             />
           </>
         )}
-        {headerOptions?.bookmark && (
-          <Ionicons
-            name="bookmark-outline"
-            style={tw("mr-2")}
-            size={24}
-            color={"#52796F"}
-            onPress={() =>
-              headerOptions?.bookmarkItem?.contentId
-                ? addToBookmark({
-                    contentId: headerOptions?.bookmarkItem?.contentId,
-                  })
-                : addToBookmark({
-                    productId: headerOptions?.bookmarkItem?.productId,
-                  })
-            }
-          />
-        )}
+        {headerOptions?.bookmark &&
+          (isActiveBookmark ? (
+            <Ionicons
+              name="bookmark"
+              style={tw("mr-2")}
+              size={24}
+              color={"#52796F"}
+              onPress={() =>
+                headerOptions?.bookmarkItem?.contentId
+                  ? deleteBookmark({
+                      id: userFavoriteList.filter(
+                        (object) =>
+                          object.contentId ===
+                          headerOptions.bookmarkItem?.contentId
+                      )[0].id,
+                    })
+                  : deleteBookmark({
+                      id: userFavoriteList.filter(
+                        (object) =>
+                          object.productId ===
+                          headerOptions.bookmarkItem?.productId
+                      )[0].id,
+                    })
+              }
+            />
+          ) : (
+            <Ionicons
+              name="bookmark-outline"
+              style={tw("mr-2")}
+              size={24}
+              color={"#52796F"}
+              onPress={() =>
+                headerOptions?.bookmarkItem?.contentId
+                  ? addToBookmark({
+                      contentId: headerOptions?.bookmarkItem?.contentId,
+                    })
+                  : addToBookmark({
+                      productId: headerOptions?.bookmarkItem?.productId,
+                    })
+              }
+            />
+          ))}
         {headerOptions?.menu && (
           <Entypo name="dots-three-vertical" size={24} color="#52796F" />
         )}
@@ -267,10 +303,13 @@ const Navbar = ({
   );
 };
 
-const mapStateToProps = (state) => ({});
+const mapStateToProps = (state) => ({
+  userFavoriteList: state.userFavorite.list,
+});
 
 const mapDispatchToProps = {
   addToBookmark: userFavorite.add,
+  deleteBookmark: userFavorite.del,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Navbar);
diff --git a/src/screens/Blog/index.js b/src/screens/Blog/index.js
index 023ccce..ee8bed3 100644
--- a/src/screens/Blog/index.js
+++ b/src/screens/Blog/index.js
@@ -10,12 +10,14 @@ import {
   Platform,
   Dimensions,
   Appearance,
+  StatusBar
 } from "react-native";
 import { WebView } from "react-native-webview";
 import { connect } from "react-redux";
 import { blog, publicApi } from "../../redux/actions";
 import { LinearGradient } from "expo-linear-gradient";
 
+//components
 import Hashtags from "../Blogs/layouts/Hashtags";
 import Header from "../Blogs/layouts/Header";
 import New from "../Blogs/layouts/New";
diff --git a/src/screens/Product/components/Book.js b/src/screens/Product/components/Book.js
index 7c84df1..7d9ab96 100644
--- a/src/screens/Product/components/Book.js
+++ b/src/screens/Product/components/Book.js
@@ -41,7 +41,8 @@ function Book({
   grades,
   pushToCart,
   userId,
-  loading,
+  userProductsLoading,
+  userFavoriteLoading,
   mobile,
   userProducts,
 }) {
@@ -72,7 +73,7 @@ function Book({
       
     >
       {!mobile && <View style={tw("mt-5")}></View>}
-      {!book && (
+      {(!book || userFavoriteLoading ) && (
         <View
           style={[
             tw("absolute left-0 top-0 rounded-md overflow-hidden"),
@@ -294,7 +295,7 @@ function Book({
                         +
                       </Text>
                     </Pressable>
-                    {loading ? (
+                    {userProductsLoading ? (
                       <ActivityIndicator
                         style={tw("mx-1.5 my-3")}
                         size="small"
@@ -432,7 +433,7 @@ function Book({
                       +
                     </Text>
                   </Pressable>
-                  {loading ? (
+                  {userProductsLoading ? (
                     <ActivityIndicator
                       style={tw("mx-1.5 my-3")}
                       size="small"
@@ -637,7 +638,8 @@ function Book({
 const mapStateToProps = (state) => ({
   userProducts: state.userProduct.list,
   userId: state.user.status?.id,
-  loading: state.userProduct.loading,
+  userProductsLoading: state.userProduct.loading,
+  userFavoriteLoading : state.userFavorite.loading,
   mobile: state.publicApi.mobile,
 });