diff --git a/mnemo_cards_admin/src/pages/CardsPage.tsx b/mnemo_cards_admin/src/pages/CardsPage.tsx
index 498a27b..03fda69 100644
--- a/mnemo_cards_admin/src/pages/CardsPage.tsx
+++ b/mnemo_cards_admin/src/pages/CardsPage.tsx
@@ -247,6 +247,20 @@ export default function CardsPage() {
     return pack?.title || packId
   }
 
+  // Get image source - handles both base64 and URLs
+  const getImageSrc = (image?: string): string | undefined => {
+    if (!image) return undefined
+    
+    // If it's already a data URL or http/https URL, return as is
+    if (image.startsWith('data:') || image.startsWith('http://') || image.startsWith('https://')) {
+      return image
+    }
+    
+    // Otherwise, assume it's base64 and add the data URL prefix
+    // Try to detect image type from base64 or default to png
+    return `data:image/png;base64,${image}`
+  }
+
   if (error) {
     const errorMessage = isCardsApiError(error)
       ? error.message 
@@ -350,9 +364,14 @@ export default function CardsPage() {
                 <>
                   {Object.entries(groupedCards).map(([packId, cards]) => (
                     <div key={packId} className="mb-8">
-                      <h3 className="text-lg font-semibold mb-4 pb-2 border-b">
-                        {getPackName(packId)} ({cards.length})
-                      </h3>
+                      <div className="bg-muted/50 px-4 py-3 rounded-t-lg border-b-2 border-primary/20 mb-0">
+                        <h3 className="text-xl font-bold">
+                          {getPackName(packId)}
+                        </h3>
+                        <p className="text-sm text-muted-foreground mt-1">
+                          {cards.length} {cards.length === 1 ? 'card' : 'cards'}
+                        </p>
+                      </div>
                       <Table>
                         <TableHeader>
                           <TableRow>
@@ -399,9 +418,14 @@ export default function CardsPage() {
                 <>
                   {Object.entries(groupedCards).map(([packId, cards]) => (
                     <div key={packId} className="mb-8">
-                      <h3 className="text-lg font-semibold mb-4 pb-2 border-b">
-                        {getPackName(packId)} ({cards.length})
-                      </h3>
+                      <div className="bg-muted/50 px-4 py-3 rounded-lg border-b-2 border-primary/20 mb-4">
+                        <h3 className="text-xl font-bold">
+                          {getPackName(packId)}
+                        </h3>
+                        <p className="text-sm text-muted-foreground mt-1">
+                          {cards.length} {cards.length === 1 ? 'card' : 'cards'}
+                        </p>
+                      </div>
                       <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
                         {cards.map((card) => (
                           <div
@@ -410,9 +434,9 @@ export default function CardsPage() {
                             onClick={() => openEditDialog(card)}
                           >
                             <div className="aspect-square bg-muted relative">
-                              {card.image ? (
+                              {getImageSrc(card.image) ? (
                                 <img
-                                  src={card.image}
+                                  src={getImageSrc(card.image)}
                                   alt={card.original}
                                   className="w-full h-full object-cover"
                                   onError={(e) => {