diff --git a/app/[locale]/cart/page.tsx b/app/[locale]/cart/page.tsx
index 759ada1..103cf34 100644
--- a/app/[locale]/cart/page.tsx
+++ b/app/[locale]/cart/page.tsx
@@ -160,7 +160,7 @@ export default function CartPage() {
   }
 
   return (
-    <div className="mx-auto px-2 md:px-4 lg:px-6 mb-18">
+    <div className="flex flex-col mx-auto max-w-[1504px] px-2 md:px-4 lg:px-6 mb-18">
       <h1 className="text-xl md:text-2xl lg:text-3xl font-bold mb-4 md:mb-6 pt-3">
         {t("cart")}
       </h1>
diff --git a/features/products/components/ProductInfoCard.tsx b/features/products/components/ProductInfoCard.tsx
index 8b4421f..deae423 100644
--- a/features/products/components/ProductInfoCard.tsx
+++ b/features/products/components/ProductInfoCard.tsx
@@ -8,6 +8,7 @@ interface ProductProperty {
 }
 
 interface ProductInfoCardProps {
+  name: string;
   brandName?: string;
   stock?: number;
   barcode?: string;
@@ -20,6 +21,7 @@ interface ProductInfoCardProps {
 }
 
 export function ProductInfoCard({
+  name,
   brandName,
   stock,
   barcode,
@@ -30,12 +32,10 @@ export function ProductInfoCard({
   reviewsCount,
   t,
 }: ProductInfoCardProps) {
-  
-
   return (
     <div className="flex-1 space-y-6 bg-white">
       <Card className="p-4 rounded-xl border-gray-200">
-        <h3 className="text-xl font-semibold mb-4">{t("about_product")}</h3>
+        <h3 className="text-xl font-semibold mb-4">{name}</h3>
         <div className="space-y-3">
           {brandName && (
             <>
@@ -123,4 +123,4 @@ export function ProductInfoCard({
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/features/products/components/ProductPageContent.tsx b/features/products/components/ProductPageContent.tsx
index a91c23f..4b6f9b5 100644
--- a/features/products/components/ProductPageContent.tsx
+++ b/features/products/components/ProductPageContent.tsx
@@ -23,7 +23,10 @@ import { ProductReviewsSection } from "./ProductReviewsSection";
 import { RelatedProductsSection } from "./RelatedProductsSection";
 import { ReviewModal } from "./ReviewModal";
 import { StockLimitModal } from "./StockLimitModal";
-
+import {
+  useIsFavorite,
+  useToggleFavorite,
+} from "@/features/favorites/hooks/useFavorites";
 interface ProductDetailProps {
   slug: string;
 }
@@ -43,7 +46,7 @@ interface PendingUpdate {
 
 export default function ProductPageContent({ slug }: ProductDetailProps) {
   const [localQuantity, setLocalQuantity] = useState(1);
-  const [isFavorite, setIsFavorite] = useState(false);
+
   const [isSyncing, setIsSyncing] = useState(false);
   const [syncError, setSyncError] = useState(false);
   const [showStockModal, setShowStockModal] = useState(false);
@@ -68,7 +71,9 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
     error,
     refetch: refetchProduct,
   } = useProductsBySlug(slug);
-
+  const { isFavorite, isLoading: isFavLoading } = useIsFavorite(
+    product?.id || 0
+  );
   const cartOptions = useMemo(
     () => ({
       refetchOnMount: true,
@@ -77,7 +82,7 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
     }),
     []
   );
-
+  const { mutate: toggleFavoriteMutation } = useToggleFavorite();
   const {
     data: cartData,
     refetch: refetchCart,
@@ -374,9 +379,41 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
     });
   }, [localQuantity]);
 
-  const handleToggleFavorite = useCallback(() => {
-    setIsFavorite(!isFavorite);
-  }, [isFavorite]);
+  const handleToggleFavorite = useCallback(
+    (e?: React.MouseEvent<HTMLButtonElement>) => {
+      e?.preventDefault();
+      e?.stopPropagation();
+
+      if (!product?.id) {
+        toast.error(t("error"), {
+          description: "Product ID not found",
+        });
+        return;
+      }
+
+      toggleFavoriteMutation(
+        {
+          productId: product.id,
+          isFavorite,
+        },
+        {
+          onSuccess: (data) => {
+            toast.success(
+              data?.wasAdded
+                ? t("added_to_favorites")
+                : t("removed_from_favorites")
+            );
+          },
+          onError: () => {
+            toast.error(t("error"), {
+              description: "Try again later",
+            });
+          },
+        }
+      );
+    },
+    [product?.id, isFavorite, toggleFavoriteMutation, t]
+  );
 
   const handleSubmitReview = useCallback(
     async (rating: number, text: string) => {
@@ -456,6 +493,7 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
           />
 
           <ProductInfoCard
+            name={product.name}
             brandName={product.brand?.name ?? undefined}
             stock={product.stock}
             barcode={product.barcode}
diff --git a/i18n/messages/tm.json b/i18n/messages/tm.json
index 18b831c..0f9174f 100644
--- a/i18n/messages/tm.json
+++ b/i18n/messages/tm.json
@@ -170,7 +170,7 @@
   "share_experience": "Bu haryt barada öz teswiriňizi ýazyň",
   "rating": "Reýting",
   "your_review": "Teswiriňiz",
-  "sumbit": "Ugratmak",
+  "submit": "Ugratmak",
   "submitting": "Ugradylýar...",
   "submit_review": "Teswiri ugrat",
   "characters": "simbol",