diff --git a/app/gallery/page.tsx b/app/gallery/page.tsx
index 0839a88..b8e8387 100644
--- a/app/gallery/page.tsx
+++ b/app/gallery/page.tsx
@@ -121,7 +121,7 @@ function PageComponent() {
               <div className="grid grid-cols-3 gap-y-36 gap-x-10 h-full overflow-y-auto no-scrollbar pt-20">
                 {galleries && galleries.map((gallery, index) => (
                   <GalleryThumbnail
-                    key={index}
+                    key={gallery.id}
                     id={gallery.id}
                     title={gallery.name}
                     columns={gallery.columns}
diff --git a/components/ui/gallery_thumbnail.tsx b/components/ui/gallery_thumbnail.tsx
index 7f9df7c..1cf459d 100644
--- a/components/ui/gallery_thumbnail.tsx
+++ b/components/ui/gallery_thumbnail.tsx
@@ -32,7 +32,7 @@ const GalleryThumbnail = ({ id, columns, onSelect, title, subscription }: Galler
 
     useEffect(() => {
         getData();
-    }, []);
+    }, [galleryId]);
 
     return (
         <div className="py-3 sm:max-w-xl sm:mx-auto flex-3 animate-in">
@@ -44,6 +44,7 @@ const GalleryThumbnail = ({ id, columns, onSelect, title, subscription }: Galler
                             src={thumbnailUrl}
                             alt=""
                             onClick={openGallery}
+                            key={galleryId}
                             style={{ width: '20rem', height: '20rem', objectFit: 'cover' }}
                         />
                         <div className="absolute top-2 left-0 w-full h-10% bg-gray-900 bg-opacity-10 backdrop-blur-sm p-2 rounded-md shadow-lg flex flex-col justify-end">