diff --git a/pages/api/collections/[identifier]/thumbnails.js b/pages/api/collections/[identifier]/thumbnails.js
index d764d81..0956d56 100644
--- a/pages/api/collections/[identifier]/thumbnails.js
+++ b/pages/api/collections/[identifier]/thumbnails.js
@@ -114,11 +114,6 @@ export default async function handler(req, res) {
       LIMIT 5
     `;
 
-    console.log('🔍 thumbnailsResult type:', typeof thumbnailsResult);
-    console.log('🔍 thumbnailsResult:', thumbnailsResult);
-    console.log('🔍 thumbnailsResult.rows:', thumbnailsResult?.rows);
-    console.log('🔍 Array.isArray(thumbnailsResult):', Array.isArray(thumbnailsResult));
-
     // Handle the result properly based on its structure
     let thumbnailsArray;
     if (Array.isArray(thumbnailsResult)) {
diff --git a/pages/collections.js b/pages/collections.js
index ef3740f..d68e08c 100644
--- a/pages/collections.js
+++ b/pages/collections.js
@@ -253,12 +253,12 @@ export default function Collections() {
   const CollectionThumbnail = ({ collection }) => {
     const { thumbnails = [], image } = collection;
 
-    // If collection has a custom hero image, use it
+    // If there's a custom image, show it
     if (image) {
       return (
-        <div className="w-full h-48 rounded-xl overflow-hidden mb-4" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
-          <img 
-            src={image} 
+        <div className="w-full h-48 rounded-xl overflow-hidden mb-4">
+          <img
+            src={image}
             alt={collection.name}
             className="w-full h-full object-cover"
           />
@@ -266,7 +266,7 @@ export default function Collections() {
       );
     }
 
-    // If no thumbnails available, show crying emoji placeholder
+    // If no cards, show crying emoji
     if (!thumbnails || thumbnails.length === 0) {
       return (
         <div className="w-full h-48 rounded-xl mb-4 flex items-center justify-center" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
@@ -278,18 +278,17 @@ export default function Collections() {
       );
     }
 
-    // Show card layout with white boxes
-    const mainCard = thumbnails[0]; // Featured card (largest)
-    const gridCards = thumbnails.slice(1, 5); // Up to 4 additional cards
+    const mainCard = thumbnails[0];
+    const gridCards = thumbnails.slice(1, 5); // Get up to 4 cards for the 2x2 grid
 
     return (
       <div className="w-full h-48 rounded-xl overflow-hidden mb-4 p-3 flex gap-2" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
-        {/* Main card (left side - 2/3 width) */}
+        {/* Main card (larger, left side) */}
         <div className="flex-2 h-full">
           {mainCard ? (
             <div className="w-full h-full bg-white rounded-lg overflow-hidden shadow-sm border" style={{ borderColor: 'var(--border)' }}>
-              <img 
-                src={mainCard.image_url || mainCard.stock_image_url} 
+              <img
+                src={mainCard.image_url || mainCard.stock_image_url}
                 alt={mainCard.name}
                 className="w-full h-full object-cover"
               />
@@ -299,7 +298,7 @@ export default function Collections() {
           )}
         </div>
 
-        {/* Grid of smaller cards (right side - 1/3 width) */}
+        {/* Grid of 4 smaller cards (right side) */}
         <div className="flex-1 h-full">
           <div className="grid grid-cols-2 gap-2 h-full">
             {Array.from({ length: 4 }).map((_, index) => {
@@ -308,8 +307,8 @@ export default function Collections() {
                 <div key={index} className="relative">
                   {card ? (
                     <div className="w-full h-full bg-white rounded-md overflow-hidden shadow-sm border" style={{ borderColor: 'var(--border)' }}>
-                      <img 
-                        src={card.image_url || card.stock_image_url} 
+                      <img
+                        src={card.image_url || card.stock_image_url}
                         alt={card.name}
                         className="w-full h-full object-cover"
                       />
diff --git a/pages/community/collections.js b/pages/community/collections.js
index 9a3740a..a74fa2d 100644
--- a/pages/community/collections.js
+++ b/pages/community/collections.js
@@ -119,12 +119,12 @@ export default function CommunityCollections() {
   const CollectionThumbnail = ({ collection }) => {
     const { thumbnails = [], image } = collection;
 
-    // If collection has a custom hero image, use it
+    // If there's a custom image, show it
     if (image) {
       return (
-        <div className="w-full h-48 rounded-xl overflow-hidden mb-4" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
-          <img 
-            src={image} 
+        <div className="w-full h-48 rounded-xl overflow-hidden mb-4">
+          <img
+            src={image}
             alt={collection.name}
             className="w-full h-full object-cover"
           />
@@ -132,7 +132,7 @@ export default function CommunityCollections() {
       );
     }
 
-    // If no thumbnails available, show crying emoji placeholder
+    // If no cards, show crying emoji
     if (!thumbnails || thumbnails.length === 0) {
       return (
         <div className="w-full h-48 rounded-xl mb-4 flex items-center justify-center" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
@@ -144,18 +144,17 @@ export default function CommunityCollections() {
       );
     }
 
-    // Show card layout with white boxes
-    const mainCard = thumbnails[0]; // Featured card (largest)
-    const gridCards = thumbnails.slice(1, 5); // Up to 4 additional cards
+    const mainCard = thumbnails[0];
+    const gridCards = thumbnails.slice(1, 5); // Get up to 4 cards for the 2x2 grid
 
     return (
       <div className="w-full h-48 rounded-xl overflow-hidden mb-4 p-3 flex gap-2" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
-        {/* Main card (left side - 2/3 width) */}
+        {/* Main card (larger, left side) */}
         <div className="flex-2 h-full">
           {mainCard ? (
             <div className="w-full h-full bg-white rounded-lg overflow-hidden shadow-sm border" style={{ borderColor: 'var(--border)' }}>
-              <img 
-                src={mainCard.image_url || mainCard.stock_image_url} 
+              <img
+                src={mainCard.image_url || mainCard.stock_image_url}
                 alt={mainCard.name}
                 className="w-full h-full object-cover"
               />
@@ -165,7 +164,7 @@ export default function CommunityCollections() {
           )}
         </div>
 
-        {/* Grid of smaller cards (right side - 1/3 width) */}
+        {/* Grid of 4 smaller cards (right side) */}
         <div className="flex-1 h-full">
           <div className="grid grid-cols-2 gap-2 h-full">
             {Array.from({ length: 4 }).map((_, index) => {
@@ -174,8 +173,8 @@ export default function CommunityCollections() {
                 <div key={index} className="relative">
                   {card ? (
                     <div className="w-full h-full bg-white rounded-md overflow-hidden shadow-sm border" style={{ borderColor: 'var(--border)' }}>
-                      <img 
-                        src={card.image_url || card.stock_image_url} 
+                      <img
+                        src={card.image_url || card.stock_image_url}
                         alt={card.name}
                         className="w-full h-full object-cover"
                       />