diff --git a/src/components/DeckCard.tsx b/src/components/DeckCard.tsx
index 9837cc4..cf8928e 100644
--- a/src/components/DeckCard.tsx
+++ b/src/components/DeckCard.tsx
@@ -22,55 +22,52 @@ export default function DeckCard({ deck, onEdit }: DeckCardProps) {
 
   return (
     <div
-      className="bg-gray-800 rounded-xl overflow-hidden shadow-lg card-hover cursor-pointer animate-scale-in"
+      className="bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all cursor-pointer group"
       onClick={() => onEdit?.(deck.id)}
     >
-      <div className="relative h-32 sm:h-40 md:h-48 overflow-hidden">
+      {/* Full Card Art */}
+      <div className="relative aspect-[5/7] overflow-hidden">
         <img
           src={commander?.image_uris?.normal || deck.cards[0]?.card.image_uris?.normal}
           alt={commander?.name || deck.cards[0]?.card.name}
-          className="w-full object-cover object-top transform translate-y-[-12%]"
+          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
         />
-        <div className="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent" />
-      </div>
-      
-      <div className="p-4">
-        <div className="flex items-center justify-between mb-2">
-          <h3 className="text-xl font-bold text-white">{deck.name}</h3>
-          {validation.isValid ? (
-            <div className="flex items-center text-green-400">
-              <Check size={16} className="mr-1" />
-              <span className="text-sm">Legal</span>
-            </div>
-          ) : (
-            <div className="flex items-center text-yellow-400" title={validation.errors.join(', ')}>
-              <AlertTriangle size={16} className="mr-1" />
-              <span className="text-sm">Issues</span>
+        {/* Overlay for text readability */}
+        <div className="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/60 to-transparent" />
+
+        {/* Deck info overlay */}
+        <div className="absolute bottom-0 left-0 right-0 p-3">
+          <div className="flex items-start justify-between mb-1">
+            <h3 className="text-base sm:text-lg font-bold text-white line-clamp-2 flex-1">{deck.name}</h3>
+            {validation.isValid ? (
+              <Check size={16} className="text-green-400 ml-2 flex-shrink-0" />
+            ) : (
+              <AlertTriangle size={16} className="text-yellow-400 ml-2 flex-shrink-0" title={validation.errors.join(', ')} />
+            )}
+          </div>
+
+          <div className="flex items-center justify-between text-xs text-gray-300 mb-2">
+            <span className="capitalize">{deck.format}</span>
+            <span>{deck.cards.reduce((acc, curr) => acc + curr.quantity, 0)} cards</span>
+          </div>
+
+          {commander && (
+            <div className="text-xs text-blue-300 mb-2 truncate">
+              <span className="font-semibold">Commander:</span> {commander.name}
             </div>
           )}
-        </div>
-        
-        <div className="flex items-center justify-between text-sm text-gray-400">
-          <span className="capitalize">{deck.format}</span>
-          <span>{deck.cards.reduce((acc, curr) => acc + curr.quantity, 0)} cards</span>
-        </div>
-        
-        {commander && (
-          <div className="mt-2 text-sm text-gray-300">
-            <span className="text-blue-400">Commander:</span> {commander.name}
-          </div>
-        )}
 
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            onEdit?.(deck.id);
-          }}
-          className="mt-4 w-full min-h-[44px] px-4 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2 text-white btn-ripple transition-smooth glow-on-hover"
-        >
-          <Edit size={20} />
-          Edit Deck
-        </button>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onEdit?.(deck.id);
+            }}
+            className="w-full min-h-[36px] px-3 py-2 bg-blue-600/90 hover:bg-blue-600 rounded-md flex items-center justify-center gap-2 text-white text-sm font-medium transition-colors backdrop-blur-sm"
+          >
+            <Edit size={16} />
+            <span>Edit</span>
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/DeckList.tsx b/src/components/DeckList.tsx
index 9845ab1..5d3ccbb 100644
--- a/src/components/DeckList.tsx
+++ b/src/components/DeckList.tsx
@@ -90,7 +90,7 @@ const DeckList = ({ onDeckEdit, onCreateDeck }: DeckListProps) => {
   }
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 sm:gap-4">
       {decks.map((deck) => (
         <DeckCard key={deck.id} deck={deck} onEdit={onDeckEdit} />
       ))}
@@ -98,15 +98,15 @@ const DeckList = ({ onDeckEdit, onCreateDeck }: DeckListProps) => {
       {/* Create New Deck Card */}
       <button
         onClick={onCreateDeck}
-        className="bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl border-2 border-dashed border-gray-600 hover:border-blue-500 transition-all duration-300 hover:scale-105 cursor-pointer group min-h-[300px] flex flex-col items-center justify-center gap-4 p-8"
+        className="bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl border-2 border-dashed border-gray-600 hover:border-blue-500 transition-all duration-300 hover:scale-105 cursor-pointer group aspect-[5/7] flex flex-col items-center justify-center gap-3 p-4"
       >
-        <PlusCircle size={64} className="text-gray-600 group-hover:text-blue-500 transition-colors" />
+        <PlusCircle size={48} className="text-gray-600 group-hover:text-blue-500 transition-colors" />
         <div className="text-center">
-          <h3 className="text-xl font-bold text-gray-400 group-hover:text-blue-400 transition-colors">
+          <h3 className="text-sm sm:text-base font-bold text-gray-400 group-hover:text-blue-400 transition-colors">
             Create New Deck
           </h3>
-          <p className="text-sm text-gray-500 mt-2">
-            Start building your collection
+          <p className="text-xs text-gray-500 mt-1 hidden sm:block">
+            Start building
           </p>
         </div>
       </button>
diff --git a/src/components/DeckManager.tsx b/src/components/DeckManager.tsx
index a88c897..268db54 100644
--- a/src/components/DeckManager.tsx
+++ b/src/components/DeckManager.tsx
@@ -96,6 +96,7 @@ const suggestLandCountAndDistribution = (
 };
 
 export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
+  const [currentDeckId, setCurrentDeckId] = useState<string | null>(initialDeck?.id || null);
   const [searchQuery, setSearchQuery] = useState('');
   const [searchResults, setSearchResults] = useState<Card[]>([]);
   const [selectedCards, setSelectedCards] = useState<{
@@ -310,8 +311,9 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
 
     setIsSaving(true);
     try {
+      const deckId = currentDeckId || crypto.randomUUID();
       const deckToSave: Deck = {
-        id: initialDeck?.id || crypto.randomUUID(),
+        id: deckId,
         name: deckName,
         format: deckFormat,
         cards: selectedCards,
@@ -337,9 +339,14 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
 
       if (deckError) throw deckError;
 
+      // Update current deck ID if this was a new deck
+      if (!currentDeckId) {
+        setCurrentDeckId(deckId);
+      }
+
       // Delete existing cards if updating
-      if (initialDeck) {
-        await supabase.from('deck_cards').delete().eq('deck_id', initialDeck.id);
+      if (currentDeckId) {
+        await supabase.from('deck_cards').delete().eq('deck_id', currentDeckId);
       }
 
       // Save the deck cards
@@ -495,30 +502,38 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
           {/* Card Search Section */}
           <div className="lg:col-span-2 space-y-6">
-            <form onSubmit={handleSearch} className="flex gap-2">
-              <div className="relative flex-1">
-                <Search
-                  className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
-                  size={20}
-                />
-                <input
-                  type="text"
-                  value={searchQuery}
-                  onChange={e => setSearchQuery(e.target.value)}
-                  className="w-full pl-10 pr-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white"
-                  placeholder="Search for cards..."
-                />
-              </div>
+            {/* Mobile-First Search Bar */}
+            <form onSubmit={handleSearch} className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={e => setSearchQuery(e.target.value)}
+                className="w-full pl-10 pr-24 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 text-white"
+                placeholder="Rechercher une carte..."
+              />
+              {searchQuery && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    setSearchQuery('');
+                    setSearchResults([]);
+                  }}
+                  className="absolute right-14 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white"
+                >
+                  <XCircle size={20} />
+                </button>
+              )}
               <button
                 type="submit"
-                className="min-h-[44px] px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center gap-2"
+                className="absolute right-2 top-1/2 transform -translate-y-1/2 p-2 bg-blue-600 hover:bg-blue-700 rounded-md"
               >
                 <Search size={20} />
-                <span className="hidden sm:inline">Search</span>
               </button>
             </form>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+            {/* Vertical Card List for Mobile */}
+            <div className="space-y-2">
               {searchResults.map(card => {
                 const currentFaceIndex = getCurrentFaceIndex(card.id);
                 const isMultiFaced = isDoubleFaced(card);
@@ -532,17 +547,18 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
                 return (
                   <div
                     key={card.id}
-                    className="bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all"
+                    className="bg-gray-800 rounded-lg p-3 flex items-center gap-3 hover:bg-gray-750 transition-colors"
                   >
-                    <div className="relative">
+                    {/* Card Thumbnail */}
+                    <div className="relative flex-shrink-0 w-16 h-22 rounded overflow-hidden">
                       {getCardImageUri(card, currentFaceIndex) ? (
                         <img
                           src={getCardImageUri(card, currentFaceIndex)}
                           alt={displayName}
-                          className="w-full h-auto"
+                          className="w-full h-full object-cover"
                         />
                       ) : (
-                        <MagicCard card={card} />
+                        <div className="w-full h-full bg-gray-700" />
                       )}
                       {isMultiFaced && (
                         <button
@@ -550,48 +566,53 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
                             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"
+                          className="absolute bottom-0 right-0 bg-purple-600 text-white p-1 rounded-tl"
                         >
-                          <RefreshCw size={16} />
+                          <RefreshCw size={10} />
                         </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>
+
+                    {/* Card Info */}
+                    <div className="flex-1 min-w-0">
+                      <h3 className="font-medium text-sm truncate">{displayName}</h3>
+                      <div className="flex items-center gap-2 mt-1">
+                        {card.mana_cost && (
+                          <div className="text-xs text-gray-400">{card.mana_cost}</div>
+                        )}
+                        {card.prices?.usd && (
+                          <div className="text-xs text-gray-400">${card.prices.usd}</div>
                         )}
                       </div>
-                      {card.prices?.usd && (
-                        <div className="text-sm text-gray-400 mb-2">${card.prices.usd}</div>
+                      {inCollection > 0 && (
+                        <div className="text-xs text-green-400 mt-1">
+                          <CheckCircle size={12} className="inline mr-1" />
+                          x{inCollection} in collection
+                        </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>
+
+                    {/* Add Button */}
+                    <button
+                      onClick={() => addCardToDeck(card)}
+                      className="flex-shrink-0 w-10 h-10 bg-blue-600 hover:bg-blue-700 rounded-full flex items-center justify-center transition-colors"
+                    >
+                      <Plus size={20} />
+                    </button>
+
+                    {/* Add to Collection Button (hidden on mobile by default) */}
+                    <button
+                      onClick={() => handleAddCardToCollection(card.id, 1)}
+                      disabled={isAddingThisCard}
+                      className="hidden sm:flex flex-shrink-0 w-10 h-10 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-full items-center justify-center transition-colors"
+                      title="Add to collection"
+                    >
+                      {isAddingThisCard ? (
+                        <Loader2 className="animate-spin" size={20} />
+                      ) : (
+                        <PackagePlus size={20} />
+                      )}
+                    </button>
                   </div>
                 );
               })}