diff --git a/apps/web/src/components/commerce/WishlistView.stories.tsx b/apps/web/src/components/commerce/WishlistView.stories.tsx
new file mode 100644
index 000000000..4cb19b185
--- /dev/null
+++ b/apps/web/src/components/commerce/WishlistView.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { WishlistView } from './WishlistView';
+
+import { ToastProvider } from '../../components/feedback/ToastProvider';
+
+const meta: Meta<typeof WishlistView> = {
+    title: 'Components/Commerce/WishlistView',
+    component: WishlistView,
+    parameters: { layout: 'fullscreen' },
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (
+            <ToastProvider>
+                <div className="bg-kodo-background min-h-screen">
+                    <Story />
+                </div>
+            </ToastProvider>
+        ),
+    ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Empty: Story = { name: 'Vide' };
diff --git a/apps/web/src/components/commerce/WishlistView.tsx b/apps/web/src/components/commerce/WishlistView.tsx
index 8065b9b81..0b541060f 100644
--- a/apps/web/src/components/commerce/WishlistView.tsx
+++ b/apps/web/src/components/commerce/WishlistView.tsx
@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
-import { Card } from '../ui/card';
 import { Button } from '../ui/button';
+import { Card } from '../ui/card';
+import { useCartStore } from '../../stores/cartStore';
 import { Product } from '../../types';
-import { useCart } from '../../context/CartContext';
-import { Heart, ShoppingCart, Trash2, Play, Pause, Zap } from 'lucide-react';
+import { Heart, Pause, Play, ShoppingCart, Trash2, Zap } from 'lucide-react';
+import React, { useState } from 'react';
 import { useToast } from '../../components/feedback/ToastProvider';
 
 // Mock Wishlist Data
@@ -51,7 +51,7 @@ const MOCK_WISHLIST: any[] = [
 ];
 
 export const WishlistView: React.FC = () => {
-  const { addToCart } = useCart();
+  const addToCart = useCartStore((state) => state.addItem);
   const { addToast } = useToast();
   const [wishlist, setWishlist] = useState<Product[]>(MOCK_WISHLIST);
   const [playingPreview, setPlayingPreview] = useState<string | null>(null);