diff --git a/components/PublicCardsView.js b/components/PublicCardsView.js
new file mode 100644
index 0000000..649344e
--- /dev/null
+++ b/components/PublicCardsView.js
@@ -0,0 +1,62 @@
+import Link from 'next/link';
+import Layout from './Layout';
+import { VOCAB } from '../lib/collection-vocabulary.js';
+
+export default function PublicCardsView() {
+  return (
+    <Layout user={null}>
+      <div className="p-6">
+        <div className="max-w-7xl mx-auto">
+          {/* Header with login prompt */}
+          <div className="mb-8 text-center">
+            <h1 className="text-4xl font-bold mb-4 gradient-text-flame">Browse Trading Cards</h1>
+            <p className="text-xl mb-6" style={{ color: 'var(--text-secondary)' }}>
+              Discover thousands of trading cards from popular TCGs
+            </p>
+            <div className="bg-gradient-to-r from-orange-50 to-red-50 dark:from-orange-900/20 dark:to-red-900/20 rounded-2xl p-6 border border-orange-200 dark:border-orange-800">
+              <h3 className="text-lg font-semibold mb-2 gradient-text-ember">Sign Up to Unlock Full Features</h3>
+              <p className="mb-4" style={{ color: 'var(--text-secondary)' }}>
+                Create lists, add cards to {VOCAB.MY_COLLECTION}, mark favorites, and more!
+              </p>
+              <div className="flex flex-col sm:flex-row gap-3 justify-center">
+                <Link 
+                  href="/signup"
+                  className="px-6 py-3 font-medium rounded-xl transition-all duration-200 hover:opacity-90"
+                  style={{ 
+                    backgroundColor: 'var(--accent-ember)', 
+                    color: 'white'
+                  }}
+                >
+                  Create Free Account
+                </Link>
+                <Link 
+                  href="/login"
+                  className="px-6 py-3 font-medium rounded-xl border-2 transition-all duration-200 hover:opacity-80"
+                  style={{ 
+                    color: 'var(--text-primary)',
+                    borderColor: 'var(--accent-ember)'
+                  }}
+                >
+                  Sign In
+                </Link>
+              </div>
+            </div>
+          </div>
+          
+          {/* Basic card browser would go here - simplified version */}
+          <div className="text-center py-20">
+            <div className="w-16 h-16 mx-auto mb-4 rounded-2xl flex items-center justify-center" style={{ backgroundColor: 'var(--accent-ember)' }}>
+              <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+              </svg>
+            </div>
+            <h3 className="text-xl font-semibold mb-2 gradient-text-flame">Full Card Browser Coming Soon</h3>
+            <p style={{ color: 'var(--text-secondary)' }}>
+              Sign up now to get early access to our complete card database and list tools.
+            </p>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}
diff --git a/pages/cards.js b/pages/cards.js
index 57aa942..27f5ef6 100644
--- a/pages/cards.js
+++ b/pages/cards.js
@@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
 import Link from 'next/link';
 import Layout from '../components/Layout';
 import CardItem from '../components/CardItem';
+import PublicCardsView from '../components/PublicCardsView';
 import BulkSelectionToolbar from '../components/BulkSelectionToolbar';
 import CollectionSelectionModal from '../components/CollectionSelectionModal';
 import ProtectedRoute from '../components/ProtectedRoute';
@@ -11,66 +12,6 @@ import ManaSymbolSettings from '../components/ManaSymbolSettings';
 import { useAuth } from '../lib/use-auth';
 import { VOCAB } from '../lib/collection-vocabulary.js';
 
-// Public fallback component for non-authenticated users
-function PublicCardsView() {
-  return (
-    <Layout user={null}>
-      <div className="p-6">
-        <div className="max-w-7xl mx-auto">
-          {/* Header with login prompt */}
-          <div className="mb-8 text-center">
-            <h1 className="text-4xl font-bold mb-4 gradient-text-flame">Browse Trading Cards</h1>
-            <p className="text-xl mb-6" style={{ color: 'var(--text-secondary)' }}>
-              Discover thousands of trading cards from popular TCGs
-            </p>
-            <div className="bg-gradient-to-r from-orange-50 to-red-50 dark:from-orange-900/20 dark:to-red-900/20 rounded-2xl p-6 border border-orange-200 dark:border-orange-800">
-              <h3 className="text-lg font-semibold mb-2 gradient-text-ember">Sign Up to Unlock Full Features</h3>
-              <p className="mb-4" style={{ color: 'var(--text-secondary)' }}>
-                Create lists, add cards to {VOCAB.MY_COLLECTION}, mark favorites, and more!
-              </p>
-              <div className="flex flex-col sm:flex-row gap-3 justify-center">
-                <Link 
-                  href="/signup"
-                  className="px-6 py-3 font-medium rounded-xl transition-all duration-200 hover:opacity-90"
-                  style={{ 
-                    backgroundColor: 'var(--accent-ember)', 
-                    color: 'white'
-                  }}
-                >
-                  Create Free Account
-                </Link>
-                <Link 
-                  href="/login"
-                  className="px-6 py-3 font-medium rounded-xl border-2 transition-all duration-200 hover:opacity-80"
-                  style={{ 
-                    color: 'var(--text-primary)',
-                    borderColor: 'var(--accent-ember)'
-                  }}
-                >
-                  Sign In
-                </Link>
-              </div>
-            </div>
-          </div>
-          
-          {/* Basic card browser would go here - simplified version */}
-          <div className="text-center py-20">
-            <div className="w-16 h-16 mx-auto mb-4 rounded-2xl flex items-center justify-center" style={{ backgroundColor: 'var(--accent-ember)' }}>
-              <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-              </svg>
-            </div>
-            <h3 className="text-xl font-semibold mb-2 gradient-text-flame">Full Card Browser Coming Soon</h3>
-            <p style={{ color: 'var(--text-secondary)' }}>
-              Sign up now to get early access to our complete card database and list tools.
-            </p>
-          </div>
-        </div>
-      </div>
-    </Layout>
-  );
-}
-
 function AuthenticatedCards() {
   const router = useRouter();
   const { user, loading: authLoading } = useAuth();