diff --git a/pages/collection/[id].js b/pages/collection/[id].js
index 7dd3e15..130ac06 100644
--- a/pages/collection/[id].js
+++ b/pages/collection/[id].js
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
+import Link from 'next/link';
 import CollaborationManager from '../../components/CollaborationManager';
 import Layout from '../../components/Layout';
 
@@ -19,19 +20,19 @@ export default function CollectionView() {
   const [isFavorited, setIsFavorited] = useState(false);
   const [showShareModal, setShowShareModal] = useState(false);
   const [copySuccess, setCopySuccess] = useState(false);
+  const [selectedTCG, setSelectedTCG] = useState('MTG');
 
   // Filter states
   const [searchQuery, setSearchQuery] = useState('');
-  const [selectedRarity, setSelectedRarity] = useState('all');
-  const [selectedType, setSelectedType] = useState('all');
-  const [sortBy, setSortBy] = useState('name');
-  const [viewMode, setViewMode] = useState('grid'); // grid or list
+  const [selectedRarity, setSelectedRarity] = useState('All Rarities');
+  const [selectedType, setSelectedType] = useState('All Types');
+  const [groupBy, setGroupBy] = useState('Group by Game');
+  const [sortBy, setSortBy] = useState('Sort by Name');
+  const [viewMode, setViewMode] = useState('grid');
   const [searchCards, setSearchCards] = useState('');
   const [searchResults, setSearchResults] = useState([]);
   const [showSearchResults, setShowSearchResults] = useState(false);
 
-
-
   useEffect(() => {
     if (id) {
       fetchCollectionData();
@@ -59,28 +60,8 @@ export default function CollectionView() {
     }
   };
 
-  const handleCopyLink = async () => {
-    try {
-      await navigator.clipboard.writeText(window.location.href);
-      setCopySuccess(true);
-      setTimeout(() => setCopySuccess(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy link:', err);
-    }
-  };
-
-  const handleFavorite = () => {
-    setIsFavorited(!isFavorited);
-    // Here you would typically make an API call
-  };
-
-  const handleSaveCopy = () => {
-    // Logic to save a copy to user's collections
-    console.log('Saving copy of collection');
-  };
-
   const handleSearchCards = async (query) => {
-    if (!query.trim()) {
+    if (query.length < 2) {
       setSearchResults([]);
       setShowSearchResults(false);
       return;
@@ -89,8 +70,8 @@ export default function CollectionView() {
     try {
       const response = await fetch(`/api/cards/search?q=${encodeURIComponent(query)}&limit=10`);
       if (response.ok) {
-        const results = await response.json();
-        setSearchResults(results);
+        const data = await response.json();
+        setSearchResults(data.cards || []);
         setShowSearchResults(true);
       }
     } catch (error) {
@@ -98,65 +79,86 @@ export default function CollectionView() {
     }
   };
 
-  const handleAddCard = async (card, quantity = 1) => {
+  const handleAddCard = async (card) => {
     try {
       const response = await fetch(`/api/collections/${id}/cards`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
+          'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
         },
         body: JSON.stringify({
           cardId: card.id,
-          quantity
+          quantity: 1
         })
       });
 
       if (response.ok) {
-        // Refresh collection data
-        fetchCollectionData();
         setSearchCards('');
-        setSearchResults([]);
         setShowSearchResults(false);
-      } else {
-        const error = await response.json();
-        alert(error.error || 'Failed to add card');
+        fetchCollectionData(); // Refresh the collection data
       }
     } catch (error) {
       console.error('Error adding card:', error);
-      alert('Network error. Please try again.');
     }
   };
 
-  const filteredCards = cards.filter(card => {
-    const matchesSearch = card.name.toLowerCase().includes(searchQuery.toLowerCase());
-    const matchesRarity = selectedRarity === 'all' || card.rarity === selectedRarity;
-    const matchesType = selectedType === 'all' || card.card_type === selectedType;
-    return matchesSearch && matchesRarity && matchesType;
-  });
+  const handleShare = () => {
+    const url = window.location.href;
+    navigator.clipboard.writeText(url).then(() => {
+      setCopySuccess(true);
+      setTimeout(() => setCopySuccess(false), 2000);
+    });
+  };
 
-  const sortedCards = [...filteredCards].sort((a, b) => {
-    switch (sortBy) {
-      case 'name':
-        return a.name.localeCompare(b.name);
-      case 'cost':
-        return b.market_price - a.market_price;
-      case 'rarity':
-        return a.rarity.localeCompare(b.rarity);
-      case 'type':
-        return a.card_type.localeCompare(b.card_type);
-      default:
-        return 0;
+  const toggleFavorite = () => {
+    setIsFavorited(!isFavorited);
+  };
+
+  const togglePublic = async () => {
+    try {
+      const response = await fetch(`/api/collections/${id}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
+        },
+        body: JSON.stringify({
+          is_public: !collection.is_public
+        })
+      });
+
+      if (response.ok) {
+        setCollection(prev => ({
+          ...prev,
+          is_public: !prev.is_public
+        }));
+      }
+    } catch (error) {
+      console.error('Error updating collection:', error);
     }
-  });
+  };
 
-  const totalValue = cards.reduce((sum, card) => sum + (card.market_price * card.quantity), 0);
-  const totalCards = cards.reduce((sum, card) => sum + card.quantity, 0);
+  // Group cards by game
+  const groupedCards = cards.reduce((acc, card) => {
+    const game = card.game || 'Other';
+    if (!acc[game]) acc[game] = [];
+    acc[game].push(card);
+    return acc;
+  }, {});
+
+  // Get game display names and counts
+  const gameStats = {
+    'MTG': groupedCards['MTG']?.length || 0,
+    'Lorcana': groupedCards['Lorcana']?.length || 0,
+    'Pokemon': groupedCards['Pokemon']?.length || 0
+  };
 
   if (loading) {
     return (
       <Layout user={user}>
         <div className="flex items-center justify-center min-h-screen">
-          <div className="animate-spin rounded-full h-32 w-32 border-b-2" style={{ borderColor: 'var(--text-accent)' }}></div>
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600"></div>
         </div>
       </Layout>
     );
@@ -170,12 +172,11 @@ export default function CollectionView() {
             <h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
               Collection not found
             </h2>
-            <button
-              onClick={() => router.push('/collections')}
-              className="px-6 py-3 rounded-lg font-medium gradient-bg-purple text-white hover:shadow-lg transform hover:scale-105 transition-all duration-200"
-            >
-              Back to Collections
-            </button>
+            <Link href="/collections">
+              <button className="px-4 py-2 rounded-lg gradient-bg-purple text-white">
+                Back to Collections
+              </button>
+            </Link>
           </div>
         </div>
       </Layout>
@@ -184,227 +185,225 @@ export default function CollectionView() {
 
   return (
     <Layout user={user}>
-      {/* Hero Section with Collection Info */}
-      <div 
-        className="relative h-64 bg-gradient-to-r from-purple-600 to-blue-600 flex items-end"
-        style={{
-          backgroundImage: collection.image 
-            ? `linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url("${collection.image}")`
-            : 'linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url("https://images.unsplash.com/photo-1606092195730-5d7b9af1efc5?w=1200")',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center'
-        }}
-      >
-        <div className="container mx-auto px-6 pb-8">
-          <div className="flex items-center space-x-4 mb-4">
-            <div className="p-3 rounded-xl bg-white bg-opacity-20 backdrop-blur-sm">
-              <div className="text-2xl">🃏</div>
-            </div>
-            <div>
-              <h1 className="text-4xl font-bold text-white mb-2">
-                {collection.name}
-              </h1>
-              <div className="flex items-center space-x-4 text-white text-opacity-90">
-                <div className="flex items-center space-x-2">
-                  <div className="w-6 h-6 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
-                    <span className="text-sm">👤</span>
-                  </div>
-                  <span>Created by {collection.creator_email}</span>
-                </div>
-                <span>•</span>
-                <span>TCG: {collection.tcg}</span>
-                <span>•</span>
-                <span>Value: ${totalValue.toFixed(2)}</span>
-                <span>•</span>
-                <span>Cards: {totalCards}</span>
+      <div className="min-h-screen" style={{ backgroundColor: 'var(--bg-primary)' }}>
+        {/* Header */}
+        <div className="p-6 border-b" style={{ backgroundColor: 'var(--bg-secondary)', borderColor: 'var(--border)' }}>
+          <div className="flex items-center justify-between mb-6">
+            {/* Back button and TCG tabs */}
+            <div className="flex items-center space-x-6">
+              <Link href="/collections">
+                <button className="flex items-center text-sm font-medium hover:underline" style={{ color: 'var(--text-secondary)' }}>
+                  <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                  </svg>
+                  Back to collections
+                </button>
+              </Link>
+              
+              {/* TCG Tabs */}
+              <div className="flex space-x-1">
+                {['MTG', 'Lorcana', 'Pokemon'].map((tcg) => (
+                  <button
+                    key={tcg}
+                    onClick={() => setSelectedTCG(tcg)}
+                    className={`px-3 py-1 text-xs font-medium rounded ${
+                      selectedTCG === tcg 
+                        ? 'bg-blue-100 text-blue-800' 
+                        : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                    }`}
+                  >
+                    {tcg}
+                  </button>
+                ))}
               </div>
             </div>
-          </div>
-          
-          <div className="flex items-center space-x-2 text-white text-opacity-75 text-sm">
-            <span>Created {new Date(collection.created_at).toLocaleDateString()}</span>
-            <span>•</span>
-            <span>Last updated {new Date(collection.updated_at).toLocaleDateString()}</span>
-            {collection.is_public && (
-              <>
-                <span>•</span>
-                <span className="px-2 py-1 rounded-full bg-white bg-opacity-20 text-xs">
-                  🌍 Public
-                </span>
-              </>
-            )}
-          </div>
-        </div>
-      </div>
 
-      {/* Action Buttons */}
-      <div className="border-b" style={{ backgroundColor: 'var(--bg-secondary)', borderColor: 'var(--border)' }}>
-        <div className="container mx-auto px-6 py-4">
-          <div className="flex items-center justify-between">
+            {/* Action buttons */}
             <div className="flex items-center space-x-3">
-              <button
-                onClick={handleCopyLink}
-                className="flex items-center space-x-2 px-4 py-2 rounded-lg border transition-all duration-200 hover:shadow-md"
-                style={{
-                  backgroundColor: 'var(--bg-primary)',
-                  borderColor: 'var(--border)',
-                  color: 'var(--text-primary)'
-                }}
-              >
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-                </svg>
-                <span>{copySuccess ? 'Copied!' : 'Copy link'}</span>
+              <button className="px-4 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50" style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}>
+                Upload Image
               </button>
+              <button className="px-4 py-2 text-sm font-medium bg-purple-600 text-white rounded-lg hover:bg-purple-700">
+                🪄 Generate AI Image
+              </button>
+            </div>
+          </div>
 
+          {/* Collection Info */}
+          <div className="mb-6">
+            <h1 className="text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
+              {collection.name}
+            </h1>
+            <p className="text-lg mb-4" style={{ color: 'var(--text-secondary)' }}>
+              {collection.description}
+            </p>
+            
+            {/* Creator and Stats */}
+            <div className="flex items-center space-x-6 text-sm" style={{ color: 'var(--text-secondary)' }}>
+              <div className="flex items-center space-x-2">
+                <span>Crafted by</span>
+                <div className="flex items-center space-x-1">
+                  <div className="w-6 h-6 bg-purple-600 rounded-full flex items-center justify-center">
+                    <span className="text-white text-xs font-bold">
+                      {collection.creator_email?.charAt(0).toUpperCase()}
+                    </span>
+                  </div>
+                  <span className="font-medium">{collection.creator_email}</span>
+                </div>
+              </div>
+              <div>Cards: <span className="font-medium">{cards.length}</span></div>
+              <div>Cost: <span className="font-medium">${collection.totalValue || '0'}</span></div>
+            </div>
+            
+            <div className="flex items-center space-x-4 mt-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
+              <span>Created {new Date(collection.created_at).toLocaleDateString()}</span>
+              <span>Last updated {new Date(collection.updated_at).toLocaleDateString()}</span>
+            </div>
+          </div>
+
+          {/* Action Bar */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-4">
               <button
-                onClick={() => setShowShareModal(true)}
-                className="flex items-center space-x-2 px-4 py-2 rounded-lg border transition-all duration-200 hover:shadow-md"
-                style={{
-                  backgroundColor: 'var(--bg-primary)',
-                  borderColor: 'var(--border)',
-                  color: 'var(--text-primary)'
-                }}
+                onClick={handleShare}
+                className="flex items-center space-x-2 px-3 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50"
+                style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}
               >
                 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
                 </svg>
-                <span>Copy list</span>
+                <span>Share</span>
               </button>
-
+              
               <button
-                className="flex items-center space-x-2 px-4 py-2 rounded-lg border transition-all duration-200 hover:shadow-md"
-                style={{
-                  backgroundColor: 'var(--bg-primary)',
-                  borderColor: 'var(--border)',
-                  color: 'var(--text-primary)'
-                }}
+                onClick={toggleFavorite}
+                className={`flex items-center space-x-2 px-3 py-2 text-sm font-medium border rounded-lg ${
+                  isFavorited ? 'bg-red-50 border-red-200 text-red-600' : 'hover:bg-gray-50'
+                }`}
+                style={!isFavorited ? { borderColor: 'var(--border)', color: 'var(--text-primary)' } : {}}
               >
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H9.414a1 1 0 01-.707-.293l-2-2A1 1 0 006 6H4a2 2 0 00-2 2v11a2 2 0 002 2h4a2 2 0 002-2v-1" />
+                <svg className="w-4 h-4" fill={isFavorited ? 'currentColor' : 'none'} stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                 </svg>
-                <span>Print proxies</span>
+                <span>Favorite</span>
+              </button>
+              
+              <button className="flex items-center space-x-2 px-3 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50" style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}>
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                </svg>
+                <span>Download List</span>
               </button>
             </div>
 
-            <button
-              onClick={handleSaveCopy}
-              className="flex items-center space-x-2 px-6 py-2 rounded-lg font-medium gradient-bg-purple text-white hover:shadow-lg transform hover:scale-105 transition-all duration-200"
-            >
-              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3-3m0 0l-3 3m3-3v12" />
-              </svg>
-              <span>Save deck</span>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Stats and Filters */}
-      <div className="container mx-auto px-6 py-6">
-        {/* Collection Stats */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-          <div className="text-center p-4 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
-            <div className="text-2xl font-bold gradient-text-blue">{totalCards}</div>
-            <div className="text-sm" style={{ color: 'var(--text-secondary)' }}>Total Cards</div>
-          </div>
-          <div className="text-center p-4 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
-            <div className="text-2xl font-bold gradient-text-purple">${totalValue.toFixed(2)}</div>
-            <div className="text-sm" style={{ color: 'var(--text-secondary)' }}>Total Value</div>
-          </div>
-          <div className="text-center p-4 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
-            <div className="text-2xl font-bold gradient-text-green">{collection.tcg}</div>
-            <div className="text-sm" style={{ color: 'var(--text-secondary)' }}>Game</div>
-          </div>
-          <div className="text-center p-4 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
-            <div className="text-2xl font-bold gradient-text-orange">{collection.is_public ? 'Public' : 'Private'}</div>
-            <div className="text-sm" style={{ color: 'var(--text-secondary)' }}>Visibility</div>
-          </div>
-        </div>
-
-        {/* Collaboration Manager */}
-        <CollaborationManager 
-          collectionId={id} 
-          isOwner={collection.creator_email === user.email} 
-        />
-
-        {/* Filters */}
-        <div className="p-6 rounded-xl mb-6" style={{ backgroundColor: 'var(--bg-secondary)' }}>
-          <div className="flex flex-col lg:flex-row gap-4">
-            <div className="flex-1">
-              <input
-                type="text"
-                placeholder="Search cards..."
-                className="w-full px-4 py-3 rounded-lg border transition-all duration-200 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-                style={{
-                  backgroundColor: 'var(--bg-primary)',
-                  borderColor: 'var(--border)',
-                  color: 'var(--text-primary)'
-                }}
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-              />
+            <div className="flex items-center space-x-4">
+              <button className="px-4 py-2 text-sm font-medium bg-blue-600 text-white rounded-lg hover:bg-blue-700">
+                📧 Invite Collaborator
+              </button>
+              
+              <div className="flex items-center space-x-2">
+                <span className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>Public</span>
+                <button
+                  onClick={togglePublic}
+                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                    collection.is_public ? 'bg-blue-600' : 'bg-gray-200'
+                  }`}
+                >
+                  <span
+                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                      collection.is_public ? 'translate-x-6' : 'translate-x-1'
+                    }`}
+                  />
+                </button>
+              </div>
+              
+              <div className="flex items-center space-x-1 text-sm" style={{ color: 'var(--text-secondary)' }}>
+                <span>Activity</span>
+                <span className="px-2 py-1 bg-purple-100 text-purple-800 rounded-full text-xs font-medium">123</span>
+              </div>
             </div>
-            
-            <div className="flex flex-wrap gap-3">
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="p-6">
+          {/* Search and Filters */}
+          <div className="flex items-center justify-between mb-6">
+            <div className="flex items-center space-x-4">
+              <div className="relative">
+                <input
+                  type="text"
+                  placeholder="Search cards..."
+                  value={searchCards}
+                  onChange={(e) => {
+                    setSearchCards(e.target.value);
+                    handleSearchCards(e.target.value);
+                  }}
+                  className="w-64 px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+                  style={{ borderColor: 'var(--border)', backgroundColor: 'var(--bg-secondary)' }}
+                />
+                <svg className="absolute right-3 top-2.5 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" style={{ color: 'var(--text-secondary)' }}>
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+              </div>
+              
               <select
                 value={selectedRarity}
                 onChange={(e) => setSelectedRarity(e.target.value)}
-                className="px-4 py-3 rounded-lg border transition-all duration-200"
-                style={{
-                  backgroundColor: 'var(--bg-primary)',
-                  borderColor: 'var(--border)',
-                  color: 'var(--text-primary)'
-                }}
+                className="px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500"
+                style={{ borderColor: 'var(--border)', backgroundColor: 'var(--bg-secondary)' }}
               >
-                <option value="all">All Rarities</option>
-                <option value="Common">Common</option>
-                <option value="Uncommon">Uncommon</option>
-                <option value="Rare">Rare</option>
-                <option value="Ultra Rare">Ultra Rare</option>
-                <option value="Rainbow Rare">Rainbow Rare</option>
+                <option>All Rarities</option>
+                <option>Common</option>
+                <option>Uncommon</option>
+                <option>Rare</option>
+                <option>Mythic</option>
+                <option>Legendary</option>
               </select>
-
+              
               <select
                 value={selectedType}
                 onChange={(e) => setSelectedType(e.target.value)}
-                className="px-4 py-3 rounded-lg border transition-all duration-200"
-                style={{
-                  backgroundColor: 'var(--bg-primary)',
-                  borderColor: 'var(--border)',
-                  color: 'var(--text-primary)'
-                }}
+                className="px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500"
+                style={{ borderColor: 'var(--border)', backgroundColor: 'var(--bg-secondary)' }}
               >
-                <option value="all">All Types</option>
-                <option value="Electric">Electric</option>
-                <option value="Trainer">Trainer</option>
-                <option value="Energy">Energy</option>
+                <option>All Types</option>
+                <option>Creature</option>
+                <option>Instant</option>
+                <option>Sorcery</option>
+                <option>Artifact</option>
+                <option>Enchantment</option>
               </select>
-
+              
+              <select
+                value={groupBy}
+                onChange={(e) => setGroupBy(e.target.value)}
+                className="px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500"
+                style={{ borderColor: 'var(--border)', backgroundColor: 'var(--bg-secondary)' }}
+              >
+                <option>Group by Game</option>
+                <option>Group by Rarity</option>
+                <option>Group by Type</option>
+              </select>
+              
               <select
                 value={sortBy}
                 onChange={(e) => setSortBy(e.target.value)}
-                className="px-4 py-3 rounded-lg border transition-all duration-200"
-                style={{
-                  backgroundColor: 'var(--bg-primary)',
-                  borderColor: 'var(--border)',
-                  color: 'var(--text-primary)'
-                }}
+                className="px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500"
+                style={{ borderColor: 'var(--border)', backgroundColor: 'var(--bg-secondary)' }}
               >
-                <option value="name">Sort by Name</option>
-                <option value="cost">Sort by Price</option>
-                <option value="rarity">Sort by Rarity</option>
-                <option value="type">Sort by Type</option>
+                <option>Sort by Name</option>
+                <option>Sort by Price</option>
+                <option>Sort by Rarity</option>
+                <option>Sort by Date Added</option>
               </select>
+            </div>
 
+            <div className="flex items-center space-x-3">
               <div className="flex rounded-lg border" style={{ borderColor: 'var(--border)' }}>
                 <button
                   onClick={() => setViewMode('grid')}
-                  className={`p-3 rounded-l-lg transition-all duration-200 ${
-                    viewMode === 'grid' 
-                      ? 'gradient-bg-purple text-white' 
-                      : 'bg-transparent'
-                  }`}
+                  className={`p-2 rounded-l-lg ${viewMode === 'grid' ? 'bg-purple-600 text-white' : 'bg-transparent'}`}
                   style={viewMode !== 'grid' ? { color: 'var(--text-secondary)' } : {}}
                 >
                   <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -413,11 +412,7 @@ export default function CollectionView() {
                 </button>
                 <button
                   onClick={() => setViewMode('list')}
-                  className={`p-3 rounded-r-lg transition-all duration-200 ${
-                    viewMode === 'list' 
-                      ? 'gradient-bg-purple text-white' 
-                      : 'bg-transparent'
-                  }`}
+                  className={`p-2 rounded-r-lg ${viewMode === 'list' ? 'bg-purple-600 text-white' : 'bg-transparent'}`}
                   style={viewMode !== 'list' ? { color: 'var(--text-secondary)' } : {}}
                 >
                   <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -425,248 +420,112 @@ export default function CollectionView() {
                   </svg>
                 </button>
               </div>
+              
+              <button className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 flex items-center space-x-2">
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                </svg>
+                <span>Add Cards</span>
+              </button>
+              
+              <button className="px-4 py-2 border rounded-lg hover:bg-gray-50 flex items-center space-x-2" style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}>
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+                <span>Scan Cards</span>
+              </button>
             </div>
           </div>
-        </div>
 
-        {/* Cards Display */}
-        <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
-            Cards ({sortedCards.length})
-          </h2>
-        </div>
-
-        {viewMode === 'grid' ? (
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
-            {sortedCards.map(card => (
-              <div 
-                key={card.id} 
-                className="group cursor-pointer transition-all duration-300 hover:scale-105"
-                onClick={() => router.push(`/card/${card.id}`)}
-              >
-                <div className="relative rounded-xl overflow-hidden shadow-lg group-hover:shadow-xl transition-all duration-300">
-                  <img
-                    src={card.image_url}
-                    alt={card.name}
-                    className="w-full h-auto object-cover"
-                    onError={(e) => {
-                      e.target.src = 'https://via.placeholder.com/250x350/6366f1/ffffff?text=No+Image';
-                    }}
-                  />
-                  {card.quantity > 1 && (
-                    <div className="absolute top-2 right-2 bg-black bg-opacity-75 text-white text-xs px-2 py-1 rounded-full">
-                      {card.quantity}x
-                    </div>
-                  )}
-                  <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-3">
-                    <div className="text-white text-sm font-medium truncate">
-                      {card.name}
-                    </div>
-                    <div className="text-white text-opacity-75 text-xs">
-                      ${card.market_price}
-                    </div>
-                  </div>
-                </div>
+          {/* Game Sections */}
+          {Object.entries(groupedCards).map(([game, gameCards]) => (
+            <div key={game} className="mb-8">
+              <div className="flex items-center justify-between mb-4">
+                <h2 className="text-xl font-bold flex items-center space-x-3" style={{ color: 'var(--text-primary)' }}>
+                  <span>{game === 'MTG' ? 'Magic The Gathering' : game}</span>
+                  <span className="px-2 py-1 bg-gray-100 text-gray-600 rounded text-sm font-medium">
+                    {gameCards.length}
+                  </span>
+                </h2>
               </div>
-            ))}
-          </div>
-        ) : (
-          <div className="space-y-2">
-            {sortedCards.map(card => (
-              <div 
+              
+              <div className="grid grid-cols-7 gap-4">
+                {gameCards.map((card, index) => (
+                  <div key={card.id || index} className="aspect-[2.5/3.5] bg-gray-200 rounded-lg flex items-center justify-center text-gray-500 text-sm font-medium hover:bg-gray-300 transition-colors cursor-pointer">
+                    {card.image_url ? (
+                      <img
+                        src={card.image_url}
+                        alt={card.name}
+                        className="w-full h-full object-cover rounded-lg"
+                      />
+                    ) : (
+                      'Card'
+                    )}
+                  </div>
+                ))}
+                
+                {/* Add empty card slots to fill the row */}
+                {Array.from({ length: Math.max(0, 7 - (gameCards.length % 7)) }, (_, index) => (
+                  <div key={`empty-${index}`} className="aspect-[2.5/3.5] bg-gray-200 rounded-lg flex items-center justify-center text-gray-500 text-sm font-medium hover:bg-gray-300 transition-colors cursor-pointer">
+                    Card
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+
+          {cards.length === 0 && (
+            <div className="text-center py-12">
+              <div className="text-6xl mb-4">🃏</div>
+              <h3 className="text-xl font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>
+                Start Building Your Collection
+              </h3>
+              <p className="mb-6" style={{ color: 'var(--text-secondary)' }}>
+                Add cards to get started with your collection
+              </p>
+              <button className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
+                Browse Cards to Add
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Search Results Dropdown */}
+        {showSearchResults && searchResults.length > 0 && (
+          <div className="absolute top-full left-0 right-0 bg-white border border-gray-200 rounded-lg shadow-lg max-h-64 overflow-y-auto z-50">
+            {searchResults.map(card => (
+              <div
                 key={card.id}
-                className="flex items-center p-4 rounded-xl border transition-all duration-200 hover:shadow-md cursor-pointer"
-                style={{
-                  backgroundColor: 'var(--bg-secondary)',
-                  borderColor: 'var(--border)'
-                }}
-                onClick={() => router.push(`/card/${card.id}`)}
+                onClick={() => handleAddCard(card)}
+                className="flex items-center p-3 hover:bg-gray-50 cursor-pointer"
               >
                 <img
                   src={card.image_url}
                   alt={card.name}
-                  className="w-16 h-22 object-cover rounded-lg mr-4"
+                  className="w-12 h-16 object-cover rounded mr-3"
                   onError={(e) => {
-                    e.target.src = 'https://via.placeholder.com/64x88/6366f1/ffffff?text=No+Image';
+                    e.target.src = 'https://via.placeholder.com/48x64/6366f1/ffffff?text=No+Image';
                   }}
                 />
-                <div className="flex-1">
-                  <h3 className="font-semibold" style={{ color: 'var(--text-primary)' }}>
-                    {card.name}
-                  </h3>
-                  <div className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-                    {card.set_name} • {card.rarity} • {card.card_type}
-                  </div>
+                <div>
+                  <div className="font-medium">{card.name}</div>
+                  <div className="text-sm text-gray-500">{card.set_name} • ${card.market_price}</div>
                 </div>
-                                  <div className="text-right">
-                    <div className="font-semibold" style={{ color: 'var(--text-primary)' }}>
-                      ${card.market_price}
-                    </div>
-                    <div className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-                      Qty: {card.quantity}
-                    </div>
-                  </div>
               </div>
             ))}
           </div>
         )}
 
-        {cards.length === 0 ? (
-          // Empty collection state
-          <div className="text-center py-16">
-            <div className="text-8xl mb-6">🃏</div>
-            <h3 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
-              Start Building Your Collection
-            </h3>
-            <p className="text-lg mb-8 max-w-md mx-auto" style={{ color: 'var(--text-secondary)' }}>
-              This collection is empty. Add your first cards to get started!
-            </p>
-            <div className="space-y-4">
-              <button
-                onClick={() => router.push('/cards')}
-                className="inline-flex items-center space-x-2 px-8 py-4 rounded-xl font-medium gradient-bg-purple text-white hover:shadow-lg transform hover:scale-105 transition-all duration-200"
-              >
-                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-                </svg>
-                <span>Browse Cards to Add</span>
-              </button>
-              <div className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-                Or search for specific cards to add to your collection
-              </div>
-            </div>
-            
-            {/* Quick add section */}
-            <div className="mt-12 p-6 rounded-2xl max-w-md mx-auto relative" style={{ backgroundColor: 'var(--bg-secondary)' }}>
-              <h4 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
-                Quick Add
-              </h4>
-              <div className="space-y-3">
-                <input
-                  type="text"
-                  placeholder="Search for a card to add..."
-                  value={searchCards}
-                  onChange={(e) => {
-                    setSearchCards(e.target.value);
-                    handleSearchCards(e.target.value);
-                  }}
-                  className="w-full px-4 py-3 rounded-lg border transition-all duration-200"
-                  style={{
-                    backgroundColor: 'var(--bg-primary)',
-                    borderColor: 'var(--border)',
-                    color: 'var(--text-primary)'
-                  }}
-                />
-                
-                {/* Search Results */}
-                {showSearchResults && searchResults.length > 0 && (
-                  <div className="absolute top-full left-0 right-0 mt-1 bg-white border rounded-lg shadow-lg z-10 max-h-60 overflow-y-auto">
-                    {searchResults.map((card) => (
-                      <div 
-                        key={card.id}
-                        className="flex items-center p-3 hover:bg-gray-50 cursor-pointer border-b last:border-b-0"
-                        onClick={() => handleAddCard(card)}
-                      >
-                        <img
-                          src={card.image_url}
-                          alt={card.name}
-                          className="w-10 h-14 object-cover rounded mr-3"
-                          onError={(e) => {
-                            e.target.src = 'https://via.placeholder.com/40x56/6366f1/ffffff?text=?';
-                          }}
-                        />
-                        <div className="flex-1">
-                          <div className="font-medium text-gray-900">{card.name}</div>
-                          <div className="text-sm text-gray-500">{card.set_name} • {card.rarity}</div>
-                        </div>
-                        <div className="text-right">
-                          <div className="font-medium text-gray-900">${card.market_price}</div>
-                          <div className="text-xs text-gray-500">{card.game}</div>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        ) : sortedCards.length === 0 ? (
-          // No results for current filters
-          <div className="text-center py-12">
-            <div className="text-6xl mb-4">🔍</div>
-            <h3 className="text-xl font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>
-              No cards match your filters
-            </h3>
-            <p style={{ color: 'var(--text-secondary)' }}>
-              Try adjusting your search or filter criteria
-            </p>
-            <button
-              onClick={() => {
-                setSearchQuery('');
-                setSelectedRarity('all');
-                setSelectedType('all');
-              }}
-              className="mt-4 px-4 py-2 rounded-lg border transition-all duration-200"
-              style={{
-                backgroundColor: 'var(--bg-primary)',
-                borderColor: 'var(--border)',
-                color: 'var(--text-primary)'
-              }}
-            >
-              Clear All Filters
-            </button>
-          </div>
-        ) : null}
-      </div>
-
-      {/* Share Modal */}
-      {showShareModal && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-          <div className="p-6 rounded-2xl shadow-lg max-w-md w-full mx-4" style={{ backgroundColor: 'var(--bg-secondary)' }}>
-            <h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
-              Share Collection
-            </h2>
-            <div className="space-y-4">
-              <div>
-                <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
-                  Collection URL
-                </label>
-                <div className="flex">
-                  <input
-                    type="text"
-                    value={window.location.href}
-                    readOnly
-                    className="flex-1 px-4 py-2 rounded-l-lg border"
-                    style={{
-                      backgroundColor: 'var(--bg-primary)',
-                      borderColor: 'var(--border)',
-                      color: 'var(--text-primary)'
-                    }}
-                  />
-                  <button
-                    onClick={handleCopyLink}
-                    className="px-4 py-2 rounded-r-lg gradient-bg-purple text-white hover:shadow-lg transition-all duration-200"
-                  >
-                    Copy
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div className="flex space-x-3 mt-6">
-              <button
-                onClick={() => setShowShareModal(false)}
-                className="flex-1 py-2 px-4 rounded-xl border transition-colors"
-                style={{ 
-                  borderColor: 'var(--border)', 
-                  color: 'var(--text-secondary)' 
-                }}
-              >
-                Close
-              </button>
-            </div>
-          </div>
+        {/* Collaboration Manager */}
+        <div className="p-6 border-t" style={{ borderColor: 'var(--border)' }}>
+          <CollaborationManager
+            collectionId={id}
+            userRole={collection.userRole}
+            isPublic={collection.is_public}
+          />
         </div>
-      )}
+      </div>
     </Layout>
   );
 } 
\ No newline at end of file