diff --git a/attached_assets/image_1772316737734.png b/attached_assets/image_1772316737734.png
new file mode 100644
index 0000000..0019553
Binary files /dev/null and b/attached_assets/image_1772316737734.png differ
diff --git a/client/src/components/photo-gallery.tsx b/client/src/components/photo-gallery.tsx
index a0b91e8..f76ff0c 100644
--- a/client/src/components/photo-gallery.tsx
+++ b/client/src/components/photo-gallery.tsx
@@ -224,22 +224,38 @@ export default function GalleryPage() {
   return (
     <div data-testid="page-gallery">
       {isLoading ? (
-        <div className="max-w-3xl mx-auto">
-          <div className="aspect-[4/3] bg-card rounded-lg animate-pulse" />
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
+          {Array.from({ length: 12 }).map((_, i) => (
+            <div key={i} className="aspect-square bg-card rounded-lg animate-pulse" />
+          ))}
         </div>
       ) : images && images.length > 0 ? (
-        <div className="max-w-3xl mx-auto">
-          <div className="bg-card rounded-lg border border-card-border overflow-hidden">
-            <SingleImageCarousel
-              images={images}
-              autoPlay={false}
-              onExpand={(i) => setLightboxIndex(i)}
-            />
-          </div>
-          <p className="text-center text-muted-foreground text-sm mt-3" data-testid="text-gallery-count">
+        <>
+          <p className="text-muted-foreground text-sm mb-4" data-testid="text-gallery-count">
             {images.length} Fotos
           </p>
-        </div>
+          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
+            {images.map((img, i) => (
+              <button
+                key={img.fileName}
+                onClick={() => setLightboxIndex(i)}
+                className="group relative aspect-square rounded-lg overflow-hidden bg-card border border-card-border cursor-pointer"
+                data-testid={`button-gallery-image-${i}`}
+              >
+                <img
+                  src={img.thumb}
+                  alt={img.fileName}
+                  className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+                  loading="lazy"
+                />
+                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors" />
+                <div className="absolute bottom-0 left-0 right-0 p-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <Maximize2 className="w-4 h-4 text-white ml-auto" />
+                </div>
+              </button>
+            ))}
+          </div>
+        </>
       ) : (
         <p className="text-center text-muted-foreground">Keine Fotos vorhanden</p>
       )}