diff --git a/src/app/core/layout/store-layout/store-layout.component.ts b/src/app/core/layout/store-layout/store-layout.component.ts
index 0e4b339..02f1d53 100644
--- a/src/app/core/layout/store-layout/store-layout.component.ts
+++ b/src/app/core/layout/store-layout/store-layout.component.ts
@@ -54,6 +54,7 @@ export class StoreLayoutComponent implements OnInit {
     }
 
     return {
+      productVariantId: item.product_variant_id,
       imageUrl: item.product?.imagen ?? null,
       product,
       originalPrice: null,
diff --git a/src/app/core/services/cart/cart.service.spec.ts b/src/app/core/services/cart/cart.service.spec.ts
index 1008407..c842756 100644
--- a/src/app/core/services/cart/cart.service.spec.ts
+++ b/src/app/core/services/cart/cart.service.spec.ts
@@ -75,8 +75,8 @@ describe('CartService', () => {
   });
 
   it('should add item and update signal', () => {
-    service.addItem(10, 2).subscribe((cart) => {
-      expect(cart).toEqual(mockCart);
+    service.addItem(10, 2).subscribe((res) => {
+      expect(res.data).toEqual(mockCart);
       expect(service.cart()).toEqual(mockCart);
     });
 
diff --git a/src/app/core/services/cart/cart.service.ts b/src/app/core/services/cart/cart.service.ts
index 33a931c..6711d95 100644
--- a/src/app/core/services/cart/cart.service.ts
+++ b/src/app/core/services/cart/cart.service.ts
@@ -31,7 +31,7 @@ export class CartService {
       );
   }
 
-  addItem(productVariantId: number, cantidad: number): Observable<Cart> {
+  addItem(productVariantId: number, cantidad: number): Observable<ApiResponse<Cart>> {
     return this.http
       .post<ApiResponse<Cart>>(
         `${this.tenantApiUrl}/cart/items`,
@@ -39,8 +39,7 @@ export class CartService {
         { withCredentials: true }
       )
       .pipe(
-        map((response) => response.data),
-        tap((cart) => this.cartState.set(cart))
+        tap((response) => this.cartState.set(response.data))
       );
   }
 
diff --git a/src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts b/src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts
index b298128..389cc7a 100644
--- a/src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts
+++ b/src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts
@@ -59,7 +59,7 @@ describe('ProductDetailPageComponent', () => {
       navigate: vi.fn()
     };
     cartServiceStub = {
-      addItem: vi.fn().mockReturnValue(of({}))
+      addItem: vi.fn().mockReturnValue(of({ message: 'Producto agregado al carrito' }))
     };
     toastServiceStub = {
       success: vi.fn(),
@@ -277,6 +277,8 @@ describe('ProductDetailPageComponent', () => {
   it('keeps quantity at a minimum of one and increments locally', async () => {
     await configureTestingModule();
     const fixture = TestBed.createComponent(ProductDetailPageComponent);
+    fixture.detectChanges();
+
     fixture.componentInstance['selectedVariant'].set({
       variant_id: 1,
       cantidad_maxima: 10,
diff --git a/src/app/features/store/pages/product-detail-page/product-detail-page.component.ts b/src/app/features/store/pages/product-detail-page/product-detail-page.component.ts
index 2722d3b..9f3b09e 100644
--- a/src/app/features/store/pages/product-detail-page/product-detail-page.component.ts
+++ b/src/app/features/store/pages/product-detail-page/product-detail-page.component.ts
@@ -230,8 +230,9 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
 
     this.addingToCart.set(true);
     this.cartService.addItem(variant.variant_id, this.quantity()).subscribe({
-      next: () => {
-        this.toastService.success('Producto agregado al carrito');
+      next: (res) => {
+        const msg = res.message || 'Producto agregado al carrito';
+        this.toastService.success(msg);
         this.addingToCart.set(false);
       },
       error: (err: HttpErrorResponse) => {
diff --git a/src/app/shared/components/cart/cart.component.ts b/src/app/shared/components/cart/cart.component.ts
index 85e6531..dba8065 100644
--- a/src/app/shared/components/cart/cart.component.ts
+++ b/src/app/shared/components/cart/cart.component.ts
@@ -8,6 +8,7 @@ import { CartService } from '../../../core/services/cart/cart.service';
 import { ToastService } from '../../../core/services/toast.service';
 
 export interface CartItemMock {
+  productVariantId?: number;
   imageUrl: string | null;
   product: string;
   originalPrice: number | null;
@@ -68,19 +69,29 @@ export class CartComponent {
   }
 
   protected onItemQuantityChange(index: number, newQuantity: number): void {
-    const item = this.cartService.cart()?.items[index];
-    if (item) {
+    const mockItem = this.items()[index];
+    const productVariantId = mockItem?.productVariantId;
+    if (productVariantId) {
       this.quantityUpdates$.next({
-        productVariantId: item.product_variant_id,
+        productVariantId,
         quantity: newQuantity
       });
+    } else {
+      const item = this.cartService.cart()?.items[index];
+      if (item) {
+        this.quantityUpdates$.next({
+          productVariantId: item.product_variant_id,
+          quantity: newQuantity
+        });
+      }
     }
   }
 
   protected onItemRemove(index: number): void {
-    const item = this.cartService.cart()?.items[index];
-    if (item) {
-      this.cartService.removeItem(item.product_variant_id).subscribe({
+    const mockItem = this.items()[index];
+    const productVariantId = mockItem?.productVariantId;
+    if (productVariantId) {
+      this.cartService.removeItem(productVariantId).subscribe({
         next: (res) => {
           const msg = res.message || 'Producto eliminado del carrito.';
           this.toastService.success(msg);
@@ -91,6 +102,21 @@ export class CartComponent {
           this.toastService.danger(msg);
         }
       });
+    } else {
+      const item = this.cartService.cart()?.items[index];
+      if (item) {
+        this.cartService.removeItem(item.product_variant_id).subscribe({
+          next: (res) => {
+            const msg = res.message || 'Producto eliminado del carrito.';
+            this.toastService.success(msg);
+          },
+          error: (err: HttpErrorResponse) => {
+            console.error('Error removing item from cart', err);
+            const msg = err.error?.message || 'Error al eliminar el producto del carrito.';
+            this.toastService.danger(msg);
+          }
+        });
+      }
     }
   }