diff --git a/src/components/CardSearch.tsx b/src/components/CardSearch.tsx
index 567ee3c..d669b15 100644
--- a/src/components/CardSearch.tsx
+++ b/src/components/CardSearch.tsx
@@ -1,9 +1,12 @@
-import React, { useState } from 'react';
-import { searchCards } from '../services/api';
+import React, { useState, useEffect } from 'react';
+import { RefreshCw, PackagePlus, Loader2, CheckCircle, XCircle, Trash2 } from 'lucide-react';
+import { searchCards, getUserCollection, addCardToCollection } from '../services/api';
 import { Card } from '../types';
+import { useAuth } from '../contexts/AuthContext';
 import MagicCard from './MagicCard';
 
 const CardSearch = () => {
+  const { user } = useAuth();
   const [cardName, setCardName] = useState('');
   const [text, setText] = useState('');
   const [rulesText, setRulesText] = useState('');
@@ -40,6 +43,85 @@ const CardSearch = () => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // Collection state
+  const [userCollection, setUserCollection] = useState<Map<string, number>>(new Map());
+  const [addingCardId, setAddingCardId] = useState<string | null>(null);
+  const [cardFaceIndex, setCardFaceIndex] = useState<Map<string, number>>(new Map());
+  const [snackbar, setSnackbar] = useState<{ message: string; type: 'success' | 'error' } | null>(null);
+
+  // Load user collection
+  useEffect(() => {
+    const loadUserCollection = async () => {
+      if (!user) return;
+      try {
+        const collection = await getUserCollection(user.id);
+        setUserCollection(collection);
+      } catch (error) {
+        console.error('Error loading user collection:', error);
+      }
+    };
+    loadUserCollection();
+  }, [user]);
+
+  // Helper function to check if a card has an actual back face
+  const isDoubleFaced = (card: Card) => {
+    const backFaceLayouts = ['transform', 'modal_dfc', 'double_faced_token', 'reversible_card'];
+    return card.card_faces && card.card_faces.length > 1 && backFaceLayouts.includes(card.layout);
+  };
+
+  // Get current face index for a card
+  const getCurrentFaceIndex = (cardId: string) => {
+    return cardFaceIndex.get(cardId) || 0;
+  };
+
+  // Toggle card face
+  const toggleCardFace = (cardId: string, totalFaces: number) => {
+    setCardFaceIndex(prev => {
+      const newMap = new Map(prev);
+      const currentIndex = prev.get(cardId) || 0;
+      const nextIndex = (currentIndex + 1) % totalFaces;
+      newMap.set(cardId, nextIndex);
+      return newMap;
+    });
+  };
+
+  // Get card image for current face
+  const getCardImageUri = (card: Card, faceIndex: number = 0) => {
+    if (isDoubleFaced(card) && card.card_faces) {
+      return card.card_faces[faceIndex]?.image_uris?.normal || card.card_faces[faceIndex]?.image_uris?.small;
+    }
+    return card.image_uris?.normal || card.image_uris?.small || card.card_faces?.[0]?.image_uris?.normal;
+  };
+
+  // Add card to collection
+  const handleAddCardToCollection = async (cardId: string) => {
+    if (!user) {
+      setSnackbar({ message: 'Please log in to add cards to your collection', type: 'error' });
+      setTimeout(() => setSnackbar(null), 3000);
+      return;
+    }
+
+    try {
+      setAddingCardId(cardId);
+      await addCardToCollection(user.id, cardId, 1);
+
+      setUserCollection(prev => {
+        const newMap = new Map(prev);
+        const currentQty = newMap.get(cardId) || 0;
+        newMap.set(cardId, currentQty + 1);
+        return newMap;
+      });
+
+      setSnackbar({ message: 'Card added to collection!', type: 'success' });
+    } catch (error) {
+      console.error('Error adding card to collection:', error);
+      setSnackbar({ message: 'Failed to add card to collection', type: 'error' });
+    } finally {
+      setAddingCardId(null);
+      setTimeout(() => setSnackbar(null), 3000);
+    }
+  };
+
   const handleSearch = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
@@ -524,20 +606,109 @@ const CardSearch = () => {
 
         {searchResults && searchResults.length > 0 && (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-            {searchResults.map((card) => (
-              <div key={card.id} className="bg-gray-800 rounded-lg overflow-hidden">
-                <MagicCard card={card} />
-                <div className="p-4">
-                  <h3 className="font-bold mb-2">{card.name}</h3>
-                  <p className="text-gray-400 text-sm">{card.type_line}</p>
+            {searchResults.map((card) => {
+              const currentFaceIndex = getCurrentFaceIndex(card.id);
+              const isMultiFaced = isDoubleFaced(card);
+              const inCollection = userCollection.get(card.id) || 0;
+              const isAddingThisCard = addingCardId === card.id;
+
+              const displayName = isMultiFaced && card.card_faces
+                ? card.card_faces[currentFaceIndex]?.name || card.name
+                : card.name;
+
+              return (
+                <div key={card.id} className="bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all">
+                  <div className="relative">
+                    {getCardImageUri(card, currentFaceIndex) ? (
+                      <img
+                        src={getCardImageUri(card, currentFaceIndex)}
+                        alt={displayName}
+                        className="w-full h-auto"
+                      />
+                    ) : (
+                      <MagicCard card={card} />
+                    )}
+                    {isMultiFaced && (
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          toggleCardFace(card.id, card.card_faces!.length);
+                        }}
+                        className="absolute bottom-2 right-2 bg-purple-600 hover:bg-purple-700 text-white p-2 rounded-full shadow-lg transition-all"
+                        title="Flip card"
+                      >
+                        <RefreshCw size={16} />
+                      </button>
+                    )}
+                  </div>
+                  <div className="p-4">
+                    <div className="flex items-center justify-between mb-2">
+                      <h3 className="font-bold">{displayName}</h3>
+                      {inCollection > 0 && (
+                        <span className="text-xs bg-green-600 px-2 py-0.5 rounded-full flex items-center gap-1">
+                          <CheckCircle size={12} />
+                          x{inCollection}
+                        </span>
+                      )}
+                    </div>
+                    <p className="text-gray-400 text-sm mb-3">
+                      {isMultiFaced && card.card_faces
+                        ? card.card_faces[currentFaceIndex]?.type_line || card.type_line
+                        : card.type_line}
+                    </p>
+                    {card.prices?.usd && (
+                      <div className="text-sm text-gray-400 mb-2">${card.prices.usd}</div>
+                    )}
+                    <button
+                      onClick={() => handleAddCardToCollection(card.id)}
+                      disabled={isAddingThisCard}
+                      className="w-full px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg flex items-center justify-center gap-2"
+                      title="Add to collection"
+                    >
+                      {isAddingThisCard ? (
+                        <>
+                          <Loader2 className="animate-spin" size={20} />
+                          Adding...
+                        </>
+                      ) : (
+                        <>
+                          <PackagePlus size={20} />
+                          Add to Collection
+                        </>
+                      )}
+                    </button>
+                  </div>
                 </div>
-              </div>
-            ))}
+              );
+            })}
           </div>
         )}
       </div>
+
+      {/* Snackbar */}
+      {snackbar && (
+        <div
+          className={`fixed bottom-4 right-4 p-4 rounded-lg shadow-lg transition-all duration-300 ${
+            snackbar.type === 'success' ? 'bg-green-500' : 'bg-red-500'
+          } text-white z-50`}
+        >
+          <div className="flex items-center justify-between">
+            <div className="flex items-center">
+              {snackbar.type === 'success' ? (
+                <CheckCircle className="mr-2" size={20} />
+              ) : (
+                <XCircle className="mr-2" size={20} />
+              )}
+              <span>{snackbar.message}</span>
+            </div>
+            <button onClick={() => setSnackbar(null)} className="ml-4 text-gray-200 hover:text-white focus:outline-none">
+              <Trash2 size={16} />
+            </button>
+          </div>
+        </div>
+      )}
     </div>
   );
 };
 
-export default CardSearch;
+export default CardSearch;
diff --git a/src/components/Collection.tsx b/src/components/Collection.tsx
index c5abf54..fd12af0 100644
--- a/src/components/Collection.tsx
+++ b/src/components/Collection.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Search, Loader2, Trash2, CheckCircle, XCircle } from 'lucide-react';
+import { Search, Loader2, Trash2, CheckCircle, XCircle, RefreshCw } from 'lucide-react';
 import { Card } from '../types';
 import { getUserCollection, getCardsByIds } from '../services/api';
 import { useAuth } from '../contexts/AuthContext';
@@ -11,8 +11,48 @@ export default function Collection() {
   const [filteredCollection, setFilteredCollection] = useState<{ card: Card; quantity: number }[]>([]);
   const [isLoadingCollection, setIsLoadingCollection] = useState(true);
   const [hoveredCard, setHoveredCard] = useState<Card | null>(null);
+  const [cardFaceIndex, setCardFaceIndex] = useState<Map<string, number>>(new Map());
   const [snackbar, setSnackbar] = useState<{ message: string; type: 'success' | 'error' } | null>(null);
 
+  // Helper function to check if a card has an actual back face (not adventure/split/etc)
+  const isDoubleFaced = (card: Card) => {
+    // Only show flip for cards with physical back sides
+    const backFaceLayouts = ['transform', 'modal_dfc', 'double_faced_token', 'reversible_card'];
+    return card.card_faces && card.card_faces.length > 1 && backFaceLayouts.includes(card.layout);
+  };
+
+  // Helper function to get the current face index for a card
+  const getCurrentFaceIndex = (cardId: string) => {
+    return cardFaceIndex.get(cardId) || 0;
+  };
+
+  // Helper function to get the image URI for a card (handling both single and double-faced)
+  const getCardImageUri = (card: Card, faceIndex: number = 0) => {
+    if (isDoubleFaced(card) && card.card_faces) {
+      return card.card_faces[faceIndex]?.image_uris?.normal || card.card_faces[faceIndex]?.image_uris?.small;
+    }
+    return card.image_uris?.normal || card.image_uris?.small;
+  };
+
+  // Helper function to get the large image URI for hover preview
+  const getCardLargeImageUri = (card: Card, faceIndex: number = 0) => {
+    if (isDoubleFaced(card) && card.card_faces) {
+      return card.card_faces[faceIndex]?.image_uris?.large || card.card_faces[faceIndex]?.image_uris?.normal;
+    }
+    return card.image_uris?.large || card.image_uris?.normal;
+  };
+
+  // Toggle card face
+  const toggleCardFace = (cardId: string, totalFaces: number) => {
+    setCardFaceIndex(prev => {
+      const newMap = new Map(prev);
+      const currentIndex = prev.get(cardId) || 0;
+      const nextIndex = (currentIndex + 1) % totalFaces;
+      newMap.set(cardId, nextIndex);
+      return newMap;
+    });
+  };
+
   // Load user's collection from Supabase on mount
   useEffect(() => {
     const loadCollection = async () => {
@@ -115,63 +155,103 @@ export default function Collection() {
             </div>
           ) : (
             <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-3">
-              {filteredCollection.map(({ card, quantity }) => (
-                <div
-                  key={card.id}
-                  className="relative group cursor-pointer"
-                  onMouseEnter={() => setHoveredCard(card)}
-                  onMouseLeave={() => setHoveredCard(null)}
-                >
-                  {/* Small card thumbnail */}
-                  <div className="relative rounded-lg overflow-hidden shadow-lg transition-all group-hover:ring-2 group-hover:ring-blue-500">
-                    <img
-                      src={card.image_uris?.normal || card.image_uris?.small}
-                      alt={card.name}
-                      className="w-full h-auto"
-                    />
-                    {/* Quantity badge */}
-                    <div className="absolute top-1 right-1 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg">
-                      x{quantity}
+              {filteredCollection.map(({ card, quantity }) => {
+                const currentFaceIndex = getCurrentFaceIndex(card.id);
+                const isMultiFaced = isDoubleFaced(card);
+                const displayName = isMultiFaced && card.card_faces
+                  ? card.card_faces[currentFaceIndex]?.name || card.name
+                  : card.name;
+
+                return (
+                  <div
+                    key={card.id}
+                    className="relative group cursor-pointer"
+                    onMouseEnter={() => setHoveredCard(card)}
+                    onMouseLeave={() => setHoveredCard(null)}
+                  >
+                    {/* Small card thumbnail */}
+                    <div className="relative rounded-lg overflow-hidden shadow-lg transition-all group-hover:ring-2 group-hover:ring-blue-500">
+                      <img
+                        src={getCardImageUri(card, currentFaceIndex)}
+                        alt={displayName}
+                        className="w-full h-auto"
+                      />
+                      {/* Quantity badge */}
+                      <div className="absolute top-1 right-1 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg">
+                        x{quantity}
+                      </div>
+                      {/* Flip button for double-faced cards */}
+                      {isMultiFaced && (
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            toggleCardFace(card.id, card.card_faces!.length);
+                          }}
+                          className="absolute bottom-1 right-1 bg-purple-600 hover:bg-purple-700 text-white p-1 rounded-full shadow-lg transition-all"
+                          title="Flip card"
+                        >
+                          <RefreshCw size={12} />
+                        </button>
+                      )}
+                    </div>
+
+                    {/* Card name below thumbnail */}
+                    <div className="mt-1 text-xs text-center truncate px-1">
+                      {displayName}
                     </div>
                   </div>
-
-                  {/* Card name below thumbnail */}
-                  <div className="mt-1 text-xs text-center truncate px-1">
-                    {card.name}
-                  </div>
-                </div>
-              ))}
+                );
+              })}
             </div>
           )}
         </div>
       </div>
 
       {/* Hover Card Preview */}
-      {hoveredCard && (
-        <div className="fixed top-1/2 right-8 transform -translate-y-1/2 z-50 pointer-events-none">
-          <div className="bg-gray-800 rounded-lg shadow-2xl p-4 max-w-md">
-            <img
-              src={hoveredCard.image_uris?.large || hoveredCard.image_uris?.normal}
-              alt={hoveredCard.name}
-              className="w-full h-auto rounded-lg shadow-lg"
-            />
-            <div className="mt-3 space-y-2">
-              <h3 className="text-xl font-bold">{hoveredCard.name}</h3>
-              <p className="text-sm text-gray-400">{hoveredCard.type_line}</p>
-              {hoveredCard.oracle_text && (
-                <p className="text-sm text-gray-300 border-t border-gray-700 pt-2">
-                  {hoveredCard.oracle_text}
-                </p>
-              )}
-              {hoveredCard.prices?.usd && (
-                <div className="text-sm text-green-400 font-semibold border-t border-gray-700 pt-2">
-                  ${hoveredCard.prices.usd}
-                </div>
-              )}
+      {hoveredCard && (() => {
+        const currentFaceIndex = getCurrentFaceIndex(hoveredCard.id);
+        const isMultiFaced = isDoubleFaced(hoveredCard);
+        const currentFace = isMultiFaced && hoveredCard.card_faces
+          ? hoveredCard.card_faces[currentFaceIndex]
+          : null;
+
+        const displayName = currentFace?.name || hoveredCard.name;
+        const displayTypeLine = currentFace?.type_line || hoveredCard.type_line;
+        const displayOracleText = currentFace?.oracle_text || hoveredCard.oracle_text;
+
+        return (
+          <div className="fixed top-1/2 right-8 transform -translate-y-1/2 z-50 pointer-events-none">
+            <div className="bg-gray-800 rounded-lg shadow-2xl p-4 max-w-md">
+              <div className="relative">
+                <img
+                  src={getCardLargeImageUri(hoveredCard, currentFaceIndex)}
+                  alt={displayName}
+                  className="w-full h-auto rounded-lg shadow-lg"
+                />
+                {isMultiFaced && (
+                  <div className="absolute top-2 right-2 bg-purple-600 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg">
+                    Face {currentFaceIndex + 1}/{hoveredCard.card_faces!.length}
+                  </div>
+                )}
+              </div>
+              <div className="mt-3 space-y-2">
+                <h3 className="text-xl font-bold">{displayName}</h3>
+                <p className="text-sm text-gray-400">{displayTypeLine}</p>
+                {displayOracleText && (
+                  <p className="text-sm text-gray-300 border-t border-gray-700 pt-2">
+                    {displayOracleText}
+                  </p>
+                )}
+                {hoveredCard.prices?.usd && (
+                  <div className="text-sm text-green-400 font-semibold border-t border-gray-700 pt-2">
+                    ${hoveredCard.prices.usd}
+                  </div>
+                )}
+              </div>
             </div>
           </div>
-        </div>
-      )}
+        );
+      })()}
 
       {/* Snackbar */}
       {snackbar && (
diff --git a/src/components/DeckManager.tsx b/src/components/DeckManager.tsx
index ab1bb26..cac94fc 100644
--- a/src/components/DeckManager.tsx
+++ b/src/components/DeckManager.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Plus, Search, Save, Trash2, Loader2, CheckCircle, XCircle, AlertCircle, PackagePlus } from 'lucide-react';
+import { Plus, Search, Save, Trash2, Loader2, CheckCircle, XCircle, AlertCircle, PackagePlus, RefreshCw } from 'lucide-react';
 import { Card, Deck } from '../types';
 import { searchCards, getUserCollection, addCardToCollection, addMultipleCardsToCollection } from '../services/api';
 import { useAuth } from '../contexts/AuthContext';
@@ -120,6 +120,7 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
   const [isLoadingCollection, setIsLoadingCollection] = useState(true);
   const [addingCardId, setAddingCardId] = useState<string | null>(null);
   const [isAddingAll, setIsAddingAll] = useState(false);
+  const [cardFaceIndex, setCardFaceIndex] = useState<Map<string, number>>(new Map());
 
   // Load user collection on component mount
   useEffect(() => {
@@ -141,6 +142,33 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
     loadUserCollection();
   }, [user]);
 
+  // Helper functions for double-faced cards
+  const isDoubleFaced = (card: Card) => {
+    const backFaceLayouts = ['transform', 'modal_dfc', 'double_faced_token', 'reversible_card'];
+    return card.card_faces && card.card_faces.length > 1 && backFaceLayouts.includes(card.layout);
+  };
+
+  const getCurrentFaceIndex = (cardId: string) => {
+    return cardFaceIndex.get(cardId) || 0;
+  };
+
+  const toggleCardFace = (cardId: string, totalFaces: number) => {
+    setCardFaceIndex(prev => {
+      const newMap = new Map(prev);
+      const currentIndex = prev.get(cardId) || 0;
+      const nextIndex = (currentIndex + 1) % totalFaces;
+      newMap.set(cardId, nextIndex);
+      return newMap;
+    });
+  };
+
+  const getCardImageUri = (card: Card, faceIndex: number = 0) => {
+    if (isDoubleFaced(card) && card.card_faces) {
+      return card.card_faces[faceIndex]?.image_uris?.normal || card.card_faces[faceIndex]?.image_uris?.small;
+    }
+    return card.image_uris?.normal || card.image_uris?.small || card.card_faces?.[0]?.image_uris?.normal;
+  };
+
   // Helper function to check if a card is in the collection
   const isCardInCollection = (cardId: string, requiredQuantity: number = 1): boolean => {
     const ownedQuantity = userCollection.get(cardId) || 0;
@@ -491,24 +519,82 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
             </form>
 
             <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-              {searchResults.map(card => (
-                <div
-                  key={card.id}
-                  className="bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all"
-                >
-                  <MagicCard card={card} />
-                  <div className="p-4">
-                    <h3 className="font-bold mb-2">{card.name}</h3>
-                    <button
-                      onClick={() => addCardToDeck(card)}
-                      className="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2"
-                    >
-                      <Plus size={20} />
-                      Add to Deck
-                    </button>
+              {searchResults.map(card => {
+                const currentFaceIndex = getCurrentFaceIndex(card.id);
+                const isMultiFaced = isDoubleFaced(card);
+                const inCollection = userCollection.get(card.id) || 0;
+                const isAddingThisCard = addingCardId === card.id;
+
+                const displayName = isMultiFaced && card.card_faces
+                  ? card.card_faces[currentFaceIndex]?.name || card.name
+                  : card.name;
+
+                return (
+                  <div
+                    key={card.id}
+                    className="bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all"
+                  >
+                    <div className="relative">
+                      {getCardImageUri(card, currentFaceIndex) ? (
+                        <img
+                          src={getCardImageUri(card, currentFaceIndex)}
+                          alt={displayName}
+                          className="w-full h-auto"
+                        />
+                      ) : (
+                        <MagicCard card={card} />
+                      )}
+                      {isMultiFaced && (
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            toggleCardFace(card.id, card.card_faces!.length);
+                          }}
+                          className="absolute bottom-2 right-2 bg-purple-600 hover:bg-purple-700 text-white p-2 rounded-full shadow-lg transition-all"
+                          title="Flip card"
+                        >
+                          <RefreshCw size={16} />
+                        </button>
+                      )}
+                    </div>
+                    <div className="p-4">
+                      <div className="flex items-center justify-between mb-2">
+                        <h3 className="font-bold">{displayName}</h3>
+                        {inCollection > 0 && (
+                          <span className="text-xs bg-green-600 px-2 py-0.5 rounded-full flex items-center gap-1">
+                            <CheckCircle size={12} />
+                            x{inCollection}
+                          </span>
+                        )}
+                      </div>
+                      {card.prices?.usd && (
+                        <div className="text-sm text-gray-400 mb-2">${card.prices.usd}</div>
+                      )}
+                      <div className="flex gap-2">
+                        <button
+                          onClick={() => addCardToDeck(card)}
+                          className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2"
+                        >
+                          <Plus size={20} />
+                          Add to Deck
+                        </button>
+                        <button
+                          onClick={() => handleAddCardToCollection(card.id, 1)}
+                          disabled={isAddingThisCard}
+                          className="px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg flex items-center justify-center gap-2"
+                          title="Add to collection"
+                        >
+                          {isAddingThisCard ? (
+                            <Loader2 className="animate-spin" size={20} />
+                          ) : (
+                            <PackagePlus size={20} />
+                          )}
+                        </button>
+                      </div>
+                    </div>
                   </div>
-                </div>
-              ))}
+                );
+              })}
             </div>
           </div>
 
diff --git a/src/components/MagicCard.tsx b/src/components/MagicCard.tsx
index 876c2ef..810f2ef 100644
--- a/src/components/MagicCard.tsx
+++ b/src/components/MagicCard.tsx
@@ -6,11 +6,14 @@ interface MagicCardProps {
 }
 
 const MagicCard = ({ card }: MagicCardProps) => {
+  // Handle both regular cards and double-faced cards (transform, modal_dfc, etc)
+  const imageUri = card.image_uris?.normal || card.card_faces?.[0]?.image_uris?.normal;
+
   return (
     <div className="relative card-hover animate-fade-in">
-      {card.image_uris?.normal ? (
+      {imageUri ? (
         <img
-          src={card.image_uris.normal}
+          src={imageUri}
           alt={card.name}
           className="w-full h-auto rounded-lg transition-smooth"
         />