diff --git a/components/DeckBuilderCardBrowser.js b/components/DeckBuilderCardBrowser.js
new file mode 100644
index 0000000..ee4088b
--- /dev/null
+++ b/components/DeckBuilderCardBrowser.js
@@ -0,0 +1,761 @@
+/* eslint-disable @next/next/no-img-element -- External card image URLs; next/image migration is out of scope. */
+import { ManaCost, ColorFilterSymbol } from './ManaSymbols';
+import ManaSymbolSettings from './ManaSymbolSettings';
+
+export default function DeckBuilderCardBrowser({
+  selectedCard,
+  onSelectCard,
+  onClearSelectedCard,
+  viewMode,
+  onViewModeChange,
+  showSettings,
+  onToggleSettings,
+  onCollapseSidebar,
+  searchQuery,
+  onSearchQueryChange,
+  showFilters,
+  onToggleFilters,
+  filters,
+  onFiltersChange,
+  onClearFilters,
+  onToggleColorFilter,
+  searchLoading,
+  searchResults,
+  manaSymbolSettings,
+  onManaSymbolSettingsChange,
+  onAddCardToDeck,
+}) {
+  return (
+                <div className="bg-bg-tertiary rounded-lg h-full flex flex-col relative border border-border">
+
+                  {!selectedCard ? (
+
+                    <>
+
+                      {/* Header */}
+
+                      <div className="flex justify-between items-center p-4 border-b border-border bg-bg-secondary rounded-t-lg">
+
+                        <h3 className="text-lg font-semibold text-text-primary">Card Browser</h3>
+
+                        <div className="flex items-center space-x-2">
+
+                          {/* View Mode Toggle */}
+
+                          <div className="flex bg-bg-primary rounded-lg p-1">
+
+                            <button
+
+                              onClick={() => onViewModeChange('list')}
+
+                              className={`px-2 py-1 rounded text-xs transition-colors ${
+
+                                viewMode === 'list'
+
+                                  ? 'bg-accent-ember text-white'
+
+                                  : 'text-text-secondary hover:text-text-primary'
+
+                              }`}
+
+                              title="List View"
+
+                            >
+
+                              ☰
+
+                            </button>
+
+                            <button
+
+                              onClick={() => onViewModeChange('thumbnail')}
+
+                              className={`px-2 py-1 rounded text-xs transition-colors ${
+
+                                viewMode === 'thumbnail'
+
+                                  ? 'bg-accent-ember text-white'
+
+                                  : 'text-text-secondary hover:text-text-primary'
+
+                              }`}
+
+                              title="Thumbnail View"
+
+                            >
+
+                              ⊞
+
+                            </button>
+
+                          </div>
+
+                          <button
+
+                            onClick={() => onToggleSettings()}
+
+                            className={`text-text-secondary hover:text-text-primary transition-colors p-1 ${
+
+                              showSettings ? 'text-accent-ember' : ''
+
+                            }`}
+
+                            title="Settings"
+
+                          >
+
+                            ⚙️
+
+                          </button>
+
+                          <button
+
+                            onClick={() => onCollapseSidebar()}
+
+                            className="text-text-secondary hover:text-text-primary transition-colors p-1"
+
+                            title="Collapse"
+
+                          >
+
+                            →
+
+                          </button>
+
+                        </div>
+
+                      </div>
+
+
+
+                      {/* Search */}
+
+                      <div className="p-4 border-b border-border">
+
+                        <div className="flex space-x-2">
+
+                          <input
+
+                            type="text"
+
+                            value={searchQuery}
+
+                            onChange={(e) => onSearchQueryChange(e.target.value)}
+
+                            placeholder="Search for cards..."
+
+                            className="flex-1 px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-ember bg-bg-primary text-text-primary text-sm"
+
+                          />
+
+                          <button
+
+                            onClick={() => onToggleFilters()}
+
+                            className={`p-2 rounded-lg transition-colors ${
+
+                              showFilters || filters.colors.length > 0 || filters.cmc || filters.rarity
+
+                                ? 'bg-accent-ember text-white'
+
+                                : 'bg-bg-primary text-text-secondary hover:bg-bg-tertiary'
+
+                            }`}
+
+                            title="Filters"
+
+                          >
+
+                            🔍
+
+                          </button>
+
+                        </div>
+
+                      </div>
+
+
+
+                      {/* Settings Panel */}
+
+                      {showSettings && (
+
+                        <div className="p-4 border-b border-border bg-bg-primary">
+
+                          <ManaSymbolSettings onSettingsChange={onManaSymbolSettingsChange} />
+
+                        </div>
+
+                      )}
+
+
+
+                      {/* Quick Filters */}
+
+                      {showFilters && (
+
+                        <div className="p-4 border-b border-border bg-bg-primary space-y-3">
+
+                          {/* Color Filters */}
+
+                          <div>
+
+                            <div className="flex items-center justify-between mb-2">
+
+                              <label className="text-text-secondary text-xs font-medium">Colors</label>
+
+                              {(filters.colors.length > 0 || filters.cmc || filters.rarity) && (
+
+                                <button
+
+                                  onClick={onClearFilters}
+
+                                  className="text-xs text-accent-ember hover:underline"
+
+                                >
+
+                                  Clear All
+
+                                </button>
+
+                              )}
+
+                            </div>
+
+                            <div className="flex space-x-1">
+
+                              {['W', 'U', 'B', 'R', 'G'].map(color => (
+
+                                <ColorFilterSymbol
+
+                                  key={color}
+
+                                  color={color}
+
+                                  isActive={filters.colors.includes(color)}
+
+                                  onClick={onToggleColorFilter}
+
+                                  size="sm"
+
+                                  useSVG={manaSymbolSettings.useSVG}
+
+                                />
+
+                              ))}
+
+                            </div>
+
+                          </div>
+
+
+
+                          {/* CMC and Rarity */}
+
+                          <div className="grid grid-cols-2 gap-2">
+
+                            <div>
+
+                              <label className="block text-text-secondary text-xs font-medium mb-1">CMC</label>
+
+                              <select
+
+                                value={filters.cmc}
+
+                                onChange={(e) => onFiltersChange({ ...filters, cmc: e.target.value })}
+
+                                className="w-full px-2 py-1 border border-border rounded text-xs focus:outline-none focus:ring-1 focus:ring-accent-ember bg-bg-secondary text-text-primary"
+
+                              >
+
+                                <option value="">Any</option>
+
+                                <option value="0">0</option>
+
+                                <option value="1">1</option>
+
+                                <option value="2">2</option>
+
+                                <option value="3">3</option>
+
+                                <option value="4">4</option>
+
+                                <option value="5">5</option>
+
+                                <option value="6+">6+</option>
+
+                              </select>
+
+                            </div>
+
+                            <div>
+
+                              <label className="block text-text-secondary text-xs font-medium mb-1">Rarity</label>
+
+                              <select
+
+                                value={filters.rarity}
+
+                                onChange={(e) => onFiltersChange({ ...filters, rarity: e.target.value })}
+
+                                className="w-full px-2 py-1 border border-border rounded text-xs focus:outline-none focus:ring-1 focus:ring-accent-ember bg-bg-secondary text-text-primary"
+
+                              >
+
+                                <option value="">Any</option>
+
+                                <option value="common">Common</option>
+
+                                <option value="uncommon">Uncommon</option>
+
+                                <option value="rare">Rare</option>
+
+                                <option value="mythic">Mythic</option>
+
+                              </select>
+
+                            </div>
+
+                          </div>
+
+                        </div>
+
+                      )}
+
+
+
+                      {/* Card List */}
+
+                      <div className="flex-1 overflow-y-auto p-4">
+
+                        {viewMode === 'list' ? (
+
+                          /* List View */
+
+                          <div className="space-y-1">
+
+                            {searchLoading ? (
+
+                              <div className="text-center py-8">
+
+                                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-accent-ember mx-auto"></div>
+
+                                <p className="text-text-secondary mt-2 text-xs">Searching...</p>
+
+                              </div>
+
+                            ) : searchResults.length === 0 ? (
+
+                              <div className="text-center py-8">
+
+                                <div className="text-2xl mb-2">🔍</div>
+
+                                <p className="text-text-secondary text-xs">
+
+                                  {searchQuery ? 'No cards found' : 'No cards available'}
+
+                                </p>
+
+                              </div>
+
+                            ) : (
+
+                              searchResults.map((card) => (
+
+                                <div 
+
+                                  key={card.id} 
+
+                                  className="flex items-center p-2 bg-bg-secondary rounded hover:bg-bg-primary transition-colors cursor-pointer"
+
+                                  onClick={() => onSelectCard(card)}
+
+                                >
+
+                                  <div className="flex items-center space-x-2 flex-1 min-w-0">
+
+                                    {card.image_url && (
+
+                                      <img
+
+                                        src={card.image_url}
+
+                                        alt={card.name}
+
+                                        className="w-8 h-11 object-cover rounded flex-shrink-0"
+
+                                      />
+
+                                    )}
+
+                                    <div className="min-w-0 flex-1">
+
+                                      <h4 className="font-medium text-text-primary text-xs truncate">{card.name}</h4>
+
+                                      <p className="text-text-secondary text-xs truncate">{card.set_name}</p>
+
+                                      <div className="flex items-center space-x-1">
+
+                                        {card.mana_cost && (
+
+                                          <ManaCost cost={card.mana_cost} size="xs" useSVG={manaSymbolSettings.useSVG} />
+
+                                        )}
+
+                                        {card.rarity && (
+
+                                          <span className={`text-xs px-1 rounded capitalize ${
+
+                                            card.rarity === 'mythic' ? 'bg-orange-100 text-orange-800' :
+
+                                            card.rarity === 'rare' ? 'bg-yellow-100 text-yellow-800' :
+
+                                            card.rarity === 'uncommon' ? 'bg-gray-100 text-gray-800' :
+
+                                            'bg-green-100 text-green-800'
+
+                                          }`}>
+
+                                            {card.rarity[0].toUpperCase()}
+
+                                          </span>
+
+                                        )}
+
+                                      </div>
+
+                                    </div>
+
+                                  </div>
+
+                                </div>
+
+                              ))
+
+                            )}
+
+                          </div>
+
+                        ) : (
+
+                          /* Thumbnail View */
+
+                          <div>
+
+                            {searchLoading ? (
+
+                              <div className="text-center py-8">
+
+                                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-accent-ember mx-auto"></div>
+
+                                <p className="text-text-secondary mt-2 text-xs">Searching...</p>
+
+                              </div>
+
+                            ) : searchResults.length === 0 ? (
+
+                              <div className="text-center py-8">
+
+                                <div className="text-2xl mb-2">🔍</div>
+
+                                <p className="text-text-secondary text-xs">
+
+                                  {searchQuery ? 'No cards found' : 'No cards available'}
+
+                                </p>
+
+                              </div>
+
+                            ) : (
+
+                              <div className="grid grid-cols-3 gap-2">
+
+                                {searchResults.map((card) => (
+
+                                  <div 
+
+                                    key={card.id} 
+
+                                    className="relative group cursor-pointer"
+
+                                    onClick={() => onSelectCard(card)}
+
+                                  >
+
+                                    {card.image_url ? (
+
+                                      <div className="relative">
+
+                                        <img
+
+                                          src={card.image_url}
+
+                                          alt={card.name}
+
+                                          className="w-full aspect-[2.5/3.5] object-cover rounded-lg shadow-sm group-hover:shadow-md transition-shadow"
+
+                                        />
+
+                                        {/* Hover overlay with card name */}
+
+                                        <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-200 rounded-lg flex items-end">
+
+                                          <div className="p-2 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+
+                                            <p className="text-xs font-medium truncate">{card.name}</p>
+
+                                            <p className="text-xs opacity-75 truncate">{card.set_name}</p>
+
+                                          </div>
+
+                                        </div>
+
+                                        {/* Rarity indicator */}
+
+                                        {card.rarity && (
+
+                                          <div className={`absolute top-1 right-1 w-2 h-2 rounded-full ${
+
+                                            card.rarity === 'mythic' ? 'bg-orange-500' :
+
+                                            card.rarity === 'rare' ? 'bg-yellow-500' :
+
+                                            card.rarity === 'uncommon' ? 'bg-gray-400' :
+
+                                            'bg-green-500'
+
+                                          }`}></div>
+
+                                        )}
+
+                                      </div>
+
+                                    ) : (
+
+                                      <div className="w-full aspect-[2.5/3.5] bg-bg-secondary rounded-lg flex items-center justify-center group-hover:bg-bg-primary transition-colors">
+
+                                        <div className="text-center p-2">
+
+                                          <p className="text-xs font-medium text-text-primary truncate">{card.name}</p>
+
+                                          <p className="text-xs text-text-secondary truncate">{card.set_name}</p>
+
+                                        </div>
+
+                                      </div>
+
+                                    )}
+
+                                  </div>
+
+                                ))}
+
+                              </div>
+
+                            )}
+
+                          </div>
+
+                        )}
+
+                      </div>
+
+                    </>
+
+                  ) : (
+
+                    /* Card Detail View */
+
+                    <>
+
+                      {/* Detail Header */}
+
+                      <div className="flex items-center p-4 border-b border-border bg-bg-secondary rounded-t-lg">
+
+                        <button
+
+                          onClick={() => onClearSelectedCard()}
+
+                          className="text-text-secondary hover:text-text-primary transition-colors mr-3"
+
+                        >
+
+                          ← Back
+
+                        </button>
+
+                        <h3 className="text-lg font-semibold text-text-primary truncate">{selectedCard.name}</h3>
+
+                      </div>
+
+
+
+                      {/* Card Detail Content */}
+
+                      <div className="flex-1 overflow-y-auto p-4">
+
+                        <div className="space-y-4">
+
+                          {/* Card Image */}
+
+                          {selectedCard.image_url && (
+
+                            <div className="text-center">
+
+                              <img
+
+                                src={selectedCard.image_url}
+
+                                alt={selectedCard.name}
+
+                                className="w-full max-w-64 mx-auto rounded-lg shadow-lg"
+
+                              />
+
+                            </div>
+
+                          )}
+
+
+
+                          {/* Card Info */}
+
+                          <div className="space-y-3">
+
+                            <div>
+
+                              <h4 className="font-semibold text-text-primary text-lg">{selectedCard.name}</h4>
+
+                              <p className="text-text-secondary text-sm">{selectedCard.set_name}</p>
+
+                            </div>
+
+
+
+                            {selectedCard.mana_cost && (
+
+                              <div>
+
+                                <label className="block text-text-secondary text-xs font-medium mb-1">Mana Cost</label>
+
+                                <div className="bg-bg-primary px-3 py-2 rounded">
+
+                                  <ManaCost cost={selectedCard.mana_cost} size="md" useSVG={manaSymbolSettings.useSVG} />
+
+                                </div>
+
+                              </div>
+
+                            )}
+
+
+
+                            {selectedCard.card_type && (
+
+                              <div>
+
+                                <label className="block text-text-secondary text-xs font-medium mb-1">Type</label>
+
+                                <div className="bg-bg-primary px-3 py-2 rounded text-sm">{selectedCard.card_type}</div>
+
+                              </div>
+
+                            )}
+
+
+
+                            {selectedCard.oracle_text && (
+
+                              <div>
+
+                                <label className="block text-text-secondary text-xs font-medium mb-1">Oracle Text</label>
+
+                                <div className="bg-bg-primary px-3 py-2 rounded text-sm whitespace-pre-wrap">{selectedCard.oracle_text}</div>
+
+                              </div>
+
+                            )}
+
+
+
+                            <div className="grid grid-cols-2 gap-4">
+
+                              {selectedCard.rarity && (
+
+                                <div>
+
+                                  <label className="block text-text-secondary text-xs font-medium mb-1">Rarity</label>
+
+                                  <div className={`px-3 py-2 rounded text-sm capitalize ${
+
+                                    selectedCard.rarity === 'mythic' ? 'bg-orange-100 text-orange-800' :
+
+                                    selectedCard.rarity === 'rare' ? 'bg-yellow-100 text-yellow-800' :
+
+                                    selectedCard.rarity === 'uncommon' ? 'bg-gray-100 text-gray-800' :
+
+                                    'bg-green-100 text-green-800'
+
+                                  }`}>
+
+                                    {selectedCard.rarity}
+
+                                  </div>
+
+                                </div>
+
+                              )}
+
+                          
+
+                              {selectedCard.cmc !== undefined && (
+
+                                <div>
+
+                                  <label className="block text-text-secondary text-xs font-medium mb-1">CMC</label>
+
+                                  <div className="bg-bg-primary px-3 py-2 rounded text-sm">{selectedCard.cmc}</div>
+
+                                </div>
+
+                              )}
+
+                            </div>
+
+                          </div>
+
+                        </div>
+
+                      </div>
+
+                    </>
+
+                  )}
+
+
+
+                  {/* Floating Action Button */}
+
+                  {selectedCard && (
+
+                    <div className="absolute bottom-4 left-4 right-4">
+
+                      <button
+
+                        onClick={() => onAddCardToDeck(selectedCard)}
+
+                        className="w-full bg-accent-ember text-white py-3 rounded-lg hover:bg-accent-ember-dark transition-colors font-semibold shadow-lg"
+
+                      >
+
+                        Add to Deck
+
+                      </button>
+
+                    </div>
+
+                  )}
+
+                </div>
+  );
+}
diff --git a/components/DeckBuilderDeckList.js b/components/DeckBuilderDeckList.js
new file mode 100644
index 0000000..4b948e0
--- /dev/null
+++ b/components/DeckBuilderDeckList.js
@@ -0,0 +1,85 @@
+/* eslint-disable @next/next/no-img-element -- External card image URLs; next/image migration is out of scope. */
+import { ManaCost } from './ManaSymbols';
+
+export default function DeckBuilderDeckList({
+  deckCards,
+  sidebarOpen,
+  onOpenSidebar,
+  manaSymbolSettings,
+  onAddCard,
+  onRemoveCard,
+}) {
+  return (
+              <div className="flex-1 overflow-y-auto space-y-2">
+                {deckCards.length === 0 ? (
+                  <div className="text-center py-12">
+                    <div className="text-6xl mb-4">🃏</div>
+                    <h3 className="text-xl font-semibold text-text-primary mb-2">Empty Deck</h3>
+                    <p className="text-text-secondary mb-4">Start building your deck by searching for cards</p>
+                    {!sidebarOpen && (
+                      <button
+                        onClick={onOpenSidebar}
+                        className="bg-accent-ember text-white px-4 py-2 rounded-lg hover:bg-accent-ember-dark transition-colors"
+                      >
+                        Open Card Browser
+                      </button>
+                    )}
+                  </div>
+                ) : (
+                  deckCards
+                    .sort((a, b) => a.name.localeCompare(b.name))
+                    .map((card) => (
+                      <div key={`${card.card_id}-${card.id}`} className="flex items-center justify-between p-4 bg-bg-primary rounded-lg hover:bg-bg-tertiary transition-colors">
+                        <div className="flex items-center space-x-4">
+                          {card.image_url && (
+                            <img
+                              src={card.image_url}
+                              alt={card.name}
+                              className="w-14 h-20 object-cover rounded shadow-md"
+                            />
+                          )}
+                          <div>
+                            <h4 className="font-semibold text-text-primary text-lg">{card.name}</h4>
+                            <p className="text-text-secondary text-sm">{card.set_name}</p>
+                            <div className="flex items-center space-x-3 mt-1">
+                              {card.mana_cost && (
+                                <div className="bg-bg-secondary px-2 py-1 rounded">
+                                  <ManaCost cost={card.mana_cost} size="sm" useSVG={manaSymbolSettings.useSVG} />
+                                </div>
+                              )}
+                              {card.rarity && (
+                                <span className={`text-xs px-2 py-1 rounded capitalize ${
+                                  card.rarity === 'mythic' ? 'bg-orange-100 text-orange-800' :
+                                  card.rarity === 'rare' ? 'bg-yellow-100 text-yellow-800' :
+                                  card.rarity === 'uncommon' ? 'bg-gray-100 text-gray-800' :
+                                  'bg-green-100 text-green-800'
+                                }`}>
+                                  {card.rarity}
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                        <div className="flex items-center space-x-3">
+                          <span className="text-text-primary font-bold text-lg">{card.quantity}x</span>
+                          <div className="flex items-center space-x-1">
+                            <button
+                              onClick={() => onRemoveCard(card.card_id, 1)}
+                              className="w-8 h-8 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors flex items-center justify-center font-bold"
+                            >
+                              −
+                            </button>
+                            <button
+                              onClick={() => onAddCard(card, 1)}
+                              className="w-8 h-8 bg-accent-ember text-white rounded-full hover:bg-accent-ember-dark transition-colors flex items-center justify-center font-bold"
+                            >
+                              +
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    ))
+                )}
+              </div>
+  );
+}
diff --git a/pages/deck-builder.js b/pages/deck-builder.js
index 70daf63..21b30b6 100644
--- a/pages/deck-builder.js
+++ b/pages/deck-builder.js
@@ -3,12 +3,11 @@ import { useState, useEffect, useRef } from 'react';
 import { useRouter } from 'next/router';
 import Link from 'next/link';
 import Layout from '../components/Layout';
+import DeckBuilderCardBrowser from '../components/DeckBuilderCardBrowser';
+import DeckBuilderDeckList from '../components/DeckBuilderDeckList';
 import DeckBuilderStatsBar from '../components/DeckBuilderStatsBar';
-import { ManaCost, ColorIdentity, ColorFilterSymbol } from '../components/ManaSymbols';
-import ManaSymbolSettings from '../components/ManaSymbolSettings';
 import { useAuth } from '../lib/use-auth';
 import { computeDeckStats, isBasicLand } from '../lib/deck-builder-stats';
-import { getColorIdentity, getColorSymbol } from '../lib/mana-symbols';
 
 export default function DeckBuilder() {
   const { user } = useAuth();
@@ -317,452 +316,45 @@ export default function DeckBuilder() {
 
               <DeckBuilderStatsBar stats={stats} />
 
-              {/* Deck Cards List */}
-              <div className="flex-1 overflow-y-auto space-y-2">
-                {deckCards.length === 0 ? (
-                  <div className="text-center py-12">
-                    <div className="text-6xl mb-4">🃏</div>
-                    <h3 className="text-xl font-semibold text-text-primary mb-2">Empty Deck</h3>
-                    <p className="text-text-secondary mb-4">Start building your deck by searching for cards</p>
-                    {!sidebarOpen && (
-                      <button
-                        onClick={() => setSidebarOpen(true)}
-                        className="bg-accent-ember text-white px-4 py-2 rounded-lg hover:bg-accent-ember-dark transition-colors"
-                      >
-                        Open Card Browser
-                      </button>
-                    )}
-                  </div>
-                ) : (
-                  deckCards
-                    .sort((a, b) => a.name.localeCompare(b.name))
-                    .map((card) => (
-                      <div key={`${card.card_id}-${card.id}`} className="flex items-center justify-between p-4 bg-bg-primary rounded-lg hover:bg-bg-tertiary transition-colors">
-                        <div className="flex items-center space-x-4">
-                          {card.image_url && (
-                            <img
-                              src={card.image_url}
-                              alt={card.name}
-                              className="w-14 h-20 object-cover rounded shadow-md"
-                            />
-                          )}
-                          <div>
-                            <h4 className="font-semibold text-text-primary text-lg">{card.name}</h4>
-                            <p className="text-text-secondary text-sm">{card.set_name}</p>
-                            <div className="flex items-center space-x-3 mt-1">
-                              {card.mana_cost && (
-                                <div className="bg-bg-secondary px-2 py-1 rounded">
-                                  <ManaCost cost={card.mana_cost} size="sm" useSVG={manaSymbolSettings.useSVG} />
-                                </div>
-                              )}
-                              {card.rarity && (
-                                <span className={`text-xs px-2 py-1 rounded capitalize ${
-                                  card.rarity === 'mythic' ? 'bg-orange-100 text-orange-800' :
-                                  card.rarity === 'rare' ? 'bg-yellow-100 text-yellow-800' :
-                                  card.rarity === 'uncommon' ? 'bg-gray-100 text-gray-800' :
-                                  'bg-green-100 text-green-800'
-                                }`}>
-                                  {card.rarity}
-                                </span>
-                              )}
-                            </div>
-                          </div>
-                        </div>
-                        <div className="flex items-center space-x-3">
-                          <span className="text-text-primary font-bold text-lg">{card.quantity}x</span>
-                          <div className="flex items-center space-x-1">
-                            <button
-                              onClick={() => removeCardFromDeck(card.card_id, 1)}
-                              className="w-8 h-8 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors flex items-center justify-center font-bold"
-                            >
-                              −
-                            </button>
-                            <button
-                              onClick={() => addCardToDeck(card, 1)}
-                              className="w-8 h-8 bg-accent-ember text-white rounded-full hover:bg-accent-ember-dark transition-colors flex items-center justify-center font-bold"
-                            >
-                              +
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                    ))
-                )}
-              </div>
+              <DeckBuilderDeckList
+                deckCards={deckCards}
+                sidebarOpen={sidebarOpen}
+                onOpenSidebar={() => setSidebarOpen(true)}
+                manaSymbolSettings={manaSymbolSettings}
+                onAddCard={(card, quantity) => addCardToDeck(card, quantity)}
+                onRemoveCard={(cardId, quantity) => removeCardFromDeck(cardId, quantity)}
+              />
             </div>
           </div>
 
           {/* Full Height Right Sidebar - Card Browser */}
           <div className={`transition-all duration-300 ${sidebarOpen ? 'w-96' : 'w-0 overflow-hidden'}`}>
-            <div className="bg-bg-tertiary rounded-lg h-full flex flex-col relative border border-border">
-              {!selectedCard ? (
-                <>
-                  {/* Header */}
-                  <div className="flex justify-between items-center p-4 border-b border-border bg-bg-secondary rounded-t-lg">
-                    <h3 className="text-lg font-semibold text-text-primary">Card Browser</h3>
-                    <div className="flex items-center space-x-2">
-                      {/* View Mode Toggle */}
-                      <div className="flex bg-bg-primary rounded-lg p-1">
-                        <button
-                          onClick={() => setViewMode('list')}
-                          className={`px-2 py-1 rounded text-xs transition-colors ${
-                            viewMode === 'list'
-                              ? 'bg-accent-ember text-white'
-                              : 'text-text-secondary hover:text-text-primary'
-                          }`}
-                          title="List View"
-                        >
-                          ☰
-                        </button>
-                        <button
-                          onClick={() => setViewMode('thumbnail')}
-                          className={`px-2 py-1 rounded text-xs transition-colors ${
-                            viewMode === 'thumbnail'
-                              ? 'bg-accent-ember text-white'
-                              : 'text-text-secondary hover:text-text-primary'
-                          }`}
-                          title="Thumbnail View"
-                        >
-                          ⊞
-                        </button>
-                      </div>
-                      <button
-                        onClick={() => setShowSettings(!showSettings)}
-                        className={`text-text-secondary hover:text-text-primary transition-colors p-1 ${
-                          showSettings ? 'text-accent-ember' : ''
-                        }`}
-                        title="Settings"
-                      >
-                        ⚙️
-                      </button>
-                      <button
-                        onClick={() => setSidebarOpen(false)}
-                        className="text-text-secondary hover:text-text-primary transition-colors p-1"
-                        title="Collapse"
-                      >
-                        →
-                      </button>
-                    </div>
-                  </div>
-
-                  {/* Search */}
-                  <div className="p-4 border-b border-border">
-                    <div className="flex space-x-2">
-                      <input
-                        type="text"
-                        value={searchQuery}
-                        onChange={(e) => setSearchQuery(e.target.value)}
-                        placeholder="Search for cards..."
-                        className="flex-1 px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-ember bg-bg-primary text-text-primary text-sm"
-                      />
-                      <button
-                        onClick={() => setShowFilters(!showFilters)}
-                        className={`p-2 rounded-lg transition-colors ${
-                          showFilters || filters.colors.length > 0 || filters.cmc || filters.rarity
-                            ? 'bg-accent-ember text-white'
-                            : 'bg-bg-primary text-text-secondary hover:bg-bg-tertiary'
-                        }`}
-                        title="Filters"
-                      >
-                        🔍
-                      </button>
-                    </div>
-                  </div>
-
-                  {/* Settings Panel */}
-                  {showSettings && (
-                    <div className="p-4 border-b border-border bg-bg-primary">
-                      <ManaSymbolSettings onSettingsChange={setManaSymbolSettings} />
-                    </div>
-                  )}
-
-                  {/* Quick Filters */}
-                  {showFilters && (
-                    <div className="p-4 border-b border-border bg-bg-primary space-y-3">
-                      {/* Color Filters */}
-                      <div>
-                        <div className="flex items-center justify-between mb-2">
-                          <label className="text-text-secondary text-xs font-medium">Colors</label>
-                          {(filters.colors.length > 0 || filters.cmc || filters.rarity) && (
-                            <button
-                              onClick={clearFilters}
-                              className="text-xs text-accent-ember hover:underline"
-                            >
-                              Clear All
-                            </button>
-                          )}
-                        </div>
-                        <div className="flex space-x-1">
-                          {['W', 'U', 'B', 'R', 'G'].map(color => (
-                            <ColorFilterSymbol
-                              key={color}
-                              color={color}
-                              isActive={filters.colors.includes(color)}
-                              onClick={toggleColorFilter}
-                              size="sm"
-                              useSVG={manaSymbolSettings.useSVG}
-                            />
-                          ))}
-                        </div>
-                      </div>
-
-                      {/* CMC and Rarity */}
-                      <div className="grid grid-cols-2 gap-2">
-                        <div>
-                          <label className="block text-text-secondary text-xs font-medium mb-1">CMC</label>
-                          <select
-                            value={filters.cmc}
-                            onChange={(e) => setFilters({...filters, cmc: e.target.value})}
-                            className="w-full px-2 py-1 border border-border rounded text-xs focus:outline-none focus:ring-1 focus:ring-accent-ember bg-bg-secondary text-text-primary"
-                          >
-                            <option value="">Any</option>
-                            <option value="0">0</option>
-                            <option value="1">1</option>
-                            <option value="2">2</option>
-                            <option value="3">3</option>
-                            <option value="4">4</option>
-                            <option value="5">5</option>
-                            <option value="6+">6+</option>
-                          </select>
-                        </div>
-                        <div>
-                          <label className="block text-text-secondary text-xs font-medium mb-1">Rarity</label>
-                          <select
-                            value={filters.rarity}
-                            onChange={(e) => setFilters({...filters, rarity: e.target.value})}
-                            className="w-full px-2 py-1 border border-border rounded text-xs focus:outline-none focus:ring-1 focus:ring-accent-ember bg-bg-secondary text-text-primary"
-                          >
-                            <option value="">Any</option>
-                            <option value="common">Common</option>
-                            <option value="uncommon">Uncommon</option>
-                            <option value="rare">Rare</option>
-                            <option value="mythic">Mythic</option>
-                          </select>
-                        </div>
-                      </div>
-                    </div>
-                  )}
-
-                  {/* Card List */}
-                  <div className="flex-1 overflow-y-auto p-4">
-                    {viewMode === 'list' ? (
-                      /* List View */
-                      <div className="space-y-1">
-                        {searchLoading ? (
-                          <div className="text-center py-8">
-                            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-accent-ember mx-auto"></div>
-                            <p className="text-text-secondary mt-2 text-xs">Searching...</p>
-                          </div>
-                        ) : searchResults.length === 0 ? (
-                          <div className="text-center py-8">
-                            <div className="text-2xl mb-2">🔍</div>
-                            <p className="text-text-secondary text-xs">
-                              {searchQuery ? 'No cards found' : 'No cards available'}
-                            </p>
-                          </div>
-                        ) : (
-                          searchResults.map((card) => (
-                            <div 
-                              key={card.id} 
-                              className="flex items-center p-2 bg-bg-secondary rounded hover:bg-bg-primary transition-colors cursor-pointer"
-                              onClick={() => setSelectedCard(card)}
-                            >
-                              <div className="flex items-center space-x-2 flex-1 min-w-0">
-                                {card.image_url && (
-                                  <img
-                                    src={card.image_url}
-                                    alt={card.name}
-                                    className="w-8 h-11 object-cover rounded flex-shrink-0"
-                                  />
-                                )}
-                                <div className="min-w-0 flex-1">
-                                  <h4 className="font-medium text-text-primary text-xs truncate">{card.name}</h4>
-                                  <p className="text-text-secondary text-xs truncate">{card.set_name}</p>
-                                  <div className="flex items-center space-x-1">
-                                    {card.mana_cost && (
-                                      <ManaCost cost={card.mana_cost} size="xs" useSVG={manaSymbolSettings.useSVG} />
-                                    )}
-                                    {card.rarity && (
-                                      <span className={`text-xs px-1 rounded capitalize ${
-                                        card.rarity === 'mythic' ? 'bg-orange-100 text-orange-800' :
-                                        card.rarity === 'rare' ? 'bg-yellow-100 text-yellow-800' :
-                                        card.rarity === 'uncommon' ? 'bg-gray-100 text-gray-800' :
-                                        'bg-green-100 text-green-800'
-                                      }`}>
-                                        {card.rarity[0].toUpperCase()}
-                                      </span>
-                                    )}
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          ))
-                        )}
-                      </div>
-                    ) : (
-                      /* Thumbnail View */
-                      <div>
-                        {searchLoading ? (
-                          <div className="text-center py-8">
-                            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-accent-ember mx-auto"></div>
-                            <p className="text-text-secondary mt-2 text-xs">Searching...</p>
-                          </div>
-                        ) : searchResults.length === 0 ? (
-                          <div className="text-center py-8">
-                            <div className="text-2xl mb-2">🔍</div>
-                            <p className="text-text-secondary text-xs">
-                              {searchQuery ? 'No cards found' : 'No cards available'}
-                            </p>
-                          </div>
-                        ) : (
-                          <div className="grid grid-cols-3 gap-2">
-                            {searchResults.map((card) => (
-                              <div 
-                                key={card.id} 
-                                className="relative group cursor-pointer"
-                                onClick={() => setSelectedCard(card)}
-                              >
-                                {card.image_url ? (
-                                  <div className="relative">
-                                    <img
-                                      src={card.image_url}
-                                      alt={card.name}
-                                      className="w-full aspect-[2.5/3.5] object-cover rounded-lg shadow-sm group-hover:shadow-md transition-shadow"
-                                    />
-                                    {/* Hover overlay with card name */}
-                                    <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-200 rounded-lg flex items-end">
-                                      <div className="p-2 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200">
-                                        <p className="text-xs font-medium truncate">{card.name}</p>
-                                        <p className="text-xs opacity-75 truncate">{card.set_name}</p>
-                                      </div>
-                                    </div>
-                                    {/* Rarity indicator */}
-                                    {card.rarity && (
-                                      <div className={`absolute top-1 right-1 w-2 h-2 rounded-full ${
-                                        card.rarity === 'mythic' ? 'bg-orange-500' :
-                                        card.rarity === 'rare' ? 'bg-yellow-500' :
-                                        card.rarity === 'uncommon' ? 'bg-gray-400' :
-                                        'bg-green-500'
-                                      }`}></div>
-                                    )}
-                                  </div>
-                                ) : (
-                                  <div className="w-full aspect-[2.5/3.5] bg-bg-secondary rounded-lg flex items-center justify-center group-hover:bg-bg-primary transition-colors">
-                                    <div className="text-center p-2">
-                                      <p className="text-xs font-medium text-text-primary truncate">{card.name}</p>
-                                      <p className="text-xs text-text-secondary truncate">{card.set_name}</p>
-                                    </div>
-                                  </div>
-                                )}
-                              </div>
-                            ))}
-                          </div>
-                        )}
-                      </div>
-                    )}
-                  </div>
-                </>
-              ) : (
-                /* Card Detail View */
-                <>
-                  {/* Detail Header */}
-                  <div className="flex items-center p-4 border-b border-border bg-bg-secondary rounded-t-lg">
-                    <button
-                      onClick={() => setSelectedCard(null)}
-                      className="text-text-secondary hover:text-text-primary transition-colors mr-3"
-                    >
-                      ← Back
-                    </button>
-                    <h3 className="text-lg font-semibold text-text-primary truncate">{selectedCard.name}</h3>
-                  </div>
-
-                  {/* Card Detail Content */}
-                  <div className="flex-1 overflow-y-auto p-4">
-                    <div className="space-y-4">
-                      {/* Card Image */}
-                      {selectedCard.image_url && (
-                        <div className="text-center">
-                          <img
-                            src={selectedCard.image_url}
-                            alt={selectedCard.name}
-                            className="w-full max-w-64 mx-auto rounded-lg shadow-lg"
-                          />
-                        </div>
-                      )}
-
-                      {/* Card Info */}
-                      <div className="space-y-3">
-                        <div>
-                          <h4 className="font-semibold text-text-primary text-lg">{selectedCard.name}</h4>
-                          <p className="text-text-secondary text-sm">{selectedCard.set_name}</p>
-                        </div>
-
-                        {selectedCard.mana_cost && (
-                          <div>
-                            <label className="block text-text-secondary text-xs font-medium mb-1">Mana Cost</label>
-                            <div className="bg-bg-primary px-3 py-2 rounded">
-                              <ManaCost cost={selectedCard.mana_cost} size="md" useSVG={manaSymbolSettings.useSVG} />
-                            </div>
-                          </div>
-                        )}
-
-                        {selectedCard.card_type && (
-                          <div>
-                            <label className="block text-text-secondary text-xs font-medium mb-1">Type</label>
-                            <div className="bg-bg-primary px-3 py-2 rounded text-sm">{selectedCard.card_type}</div>
-                          </div>
-                        )}
-
-                        {selectedCard.oracle_text && (
-                          <div>
-                            <label className="block text-text-secondary text-xs font-medium mb-1">Oracle Text</label>
-                            <div className="bg-bg-primary px-3 py-2 rounded text-sm whitespace-pre-wrap">{selectedCard.oracle_text}</div>
-                          </div>
-                        )}
-
-                        <div className="grid grid-cols-2 gap-4">
-                          {selectedCard.rarity && (
-                            <div>
-                              <label className="block text-text-secondary text-xs font-medium mb-1">Rarity</label>
-                              <div className={`px-3 py-2 rounded text-sm capitalize ${
-                                selectedCard.rarity === 'mythic' ? 'bg-orange-100 text-orange-800' :
-                                selectedCard.rarity === 'rare' ? 'bg-yellow-100 text-yellow-800' :
-                                selectedCard.rarity === 'uncommon' ? 'bg-gray-100 text-gray-800' :
-                                'bg-green-100 text-green-800'
-                              }`}>
-                                {selectedCard.rarity}
-                              </div>
-                            </div>
-                          )}
-                          
-                          {selectedCard.cmc !== undefined && (
-                            <div>
-                              <label className="block text-text-secondary text-xs font-medium mb-1">CMC</label>
-                              <div className="bg-bg-primary px-3 py-2 rounded text-sm">{selectedCard.cmc}</div>
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </>
-              )}
-
-              {/* Floating Action Button */}
-              {selectedCard && (
-                <div className="absolute bottom-4 left-4 right-4">
-                  <button
-                    onClick={() => {
-                      addCardToDeck(selectedCard);
-                      setSelectedCard(null);
-                    }}
-                    className="w-full bg-accent-ember text-white py-3 rounded-lg hover:bg-accent-ember-dark transition-colors font-semibold shadow-lg"
-                  >
-                    Add to Deck
-                  </button>
-                </div>
-              )}
-            </div>
+            <DeckBuilderCardBrowser
+              selectedCard={selectedCard}
+              onSelectCard={setSelectedCard}
+              onClearSelectedCard={() => setSelectedCard(null)}
+              viewMode={viewMode}
+              onViewModeChange={setViewMode}
+              showSettings={showSettings}
+              onToggleSettings={() => setShowSettings(!showSettings)}
+              onCollapseSidebar={() => setSidebarOpen(false)}
+              searchQuery={searchQuery}
+              onSearchQueryChange={setSearchQuery}
+              showFilters={showFilters}
+              onToggleFilters={() => setShowFilters(!showFilters)}
+              filters={filters}
+              onFiltersChange={setFilters}
+              onClearFilters={clearFilters}
+              onToggleColorFilter={toggleColorFilter}
+              searchLoading={searchLoading}
+              searchResults={searchResults}
+              manaSymbolSettings={manaSymbolSettings}
+              onManaSymbolSettingsChange={setManaSymbolSettings}
+              onAddCardToDeck={(card) => {
+                addCardToDeck(card);
+                setSelectedCard(null);
+              }}
+            />
           </div>
         </div>
       </div>