diff --git a/resources/js/guest/pages/GalleryPage.tsx b/resources/js/guest/pages/GalleryPage.tsx
index bf1c240..860a6ef 100644
--- a/resources/js/guest/pages/GalleryPage.tsx
+++ b/resources/js/guest/pages/GalleryPage.tsx
@@ -307,68 +307,64 @@ export default function GalleryPage() {
 
   return (
     <Page title="">
-      <PullToRefresh
-        onRefresh={handleRefresh}
-        pullLabel={t('common.pullToRefresh')}
-        releaseLabel={t('common.releaseToRefresh')}
-        refreshingLabel={t('common.refreshing')}
-      >
-        <motion.div className="space-y-3" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...containerMotion}>
-          <motion.div
-            className="rounded-3xl border border-pink-200/40 bg-gradient-to-br from-pink-50 via-white to-white p-4 shadow-sm dark:border-white/10 dark:from-pink-500/10 dark:via-slate-950 dark:to-slate-950"
-            style={{ borderRadius: radius }}
-            {...fadeUpMotion}
-          >
-            <div className="flex flex-wrap items-start justify-between gap-4">
-              <div className="flex items-center gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-500/10 text-pink-500" style={{ borderRadius: radius }}>
-                  <ImageIcon className="h-5 w-5" aria-hidden />
-                </div>
-                <div>
-                  <h1 className="text-2xl font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>{t('galleryPage.title')}</h1>
-                  <p className="text-sm text-muted-foreground">{t('galleryPage.subtitle')}</p>
+      <div className="relative">
+        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(236,72,153,0.10),_transparent_60%)] dark:bg-[radial-gradient(circle_at_top,_rgba(236,72,153,0.22),_transparent_65%)]" aria-hidden />
+        <PullToRefresh
+          onRefresh={handleRefresh}
+          pullLabel={t('common.pullToRefresh')}
+          releaseLabel={t('common.releaseToRefresh')}
+          refreshingLabel={t('common.refreshing')}
+        >
+          <motion.div className="space-y-3 px-2" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...containerMotion}>
+            <motion.div
+              className="rounded-3xl border border-pink-200/40 bg-white/90 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-950/80"
+              style={{ borderRadius: radius }}
+              {...fadeUpMotion}
+            >
+              <div className="flex flex-wrap items-start justify-between gap-4">
+                <div className="flex items-center gap-3">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-500/10 text-pink-500" style={{ borderRadius: radius }}>
+                    <ImageIcon className="h-5 w-5" aria-hidden />
+                  </div>
+                  <div>
+                    <h1 className="text-2xl font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>{t('galleryPage.title')}</h1>
+                    <p className="text-sm text-muted-foreground">{t('galleryPage.subtitle')}</p>
+                  </div>
                 </div>
+
+                {newCount > 0 ? (
+                  <button
+                    type="button"
+                    onClick={acknowledgeNew}
+                    className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold transition ${badgeEmphasisClass}`}
+                    style={{ borderRadius: radius }}
+                  >
+                    {newPhotosBadgeText}
+                  </button>
+                ) : (
+                  <span className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ${badgeEmphasisClass}`} style={{ borderRadius: radius }}>
+                    {newPhotosBadgeText}
+                  </span>
+                )}
               </div>
 
-              {newCount > 0 ? (
-                <button
-                  type="button"
-                  onClick={acknowledgeNew}
-                  className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold transition ${badgeEmphasisClass}`}
-                  style={{ borderRadius: radius }}
-                >
-                  {newPhotosBadgeText}
-                </button>
-              ) : (
-                <span className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ${badgeEmphasisClass}`} style={{ borderRadius: radius }}>
-                  {newPhotosBadgeText}
-                </span>
-              )}
-            </div>
+              <div className="mt-4">
+                <FiltersBar
+                  value={filter}
+                  onChange={setFilter}
+                  className="mt-0"
+                  showPhotobooth={showPhotoboothFilter}
+                  styleOverride={{ borderRadius: radius, fontFamily: headingFont }}
+                />
+              </div>
+            </motion.div>
           </motion.div>
-        </motion.div>
-
-        <motion.div className="sticky top-2 z-20" {...fadeUpMotion}>
-          <div className="rounded-2xl border border-border/60 bg-white/85 p-2 shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-950/70">
-            <FiltersBar
-              value={filter}
-              onChange={setFilter}
-              className="mt-0"
-              showPhotobooth={showPhotoboothFilter}
-              styleOverride={{ borderRadius: radius, fontFamily: headingFont }}
-            />
-          </div>
-        </motion.div>
-        {loading && (
-          <motion.p className="px-4" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...fadeUpMotion}>
-            {t('galleryPage.loading', 'Lade…')}
-          </motion.p>
-        )}
-        <motion.section
-          className="mx-2 rounded-[28px] border border-border/60 bg-[radial-gradient(circle_at_top,_rgba(236,72,153,0.08),_transparent_55%)] p-2 shadow-sm dark:border-white/10 dark:bg-[radial-gradient(circle_at_top,_rgba(236,72,153,0.18),_transparent_60%)]"
-          {...fadeUpMotion}
-        >
-          <motion.div className="grid grid-cols-2 gap-3 pb-12 sm:grid-cols-3 lg:grid-cols-4" {...gridMotion}>
+          {loading && (
+            <motion.p className="px-4" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...fadeUpMotion}>
+              {t('galleryPage.loading', 'Lade…')}
+            </motion.p>
+          )}
+          <motion.div className="grid grid-cols-2 gap-3 px-2 pb-16 sm:grid-cols-3 lg:grid-cols-4" {...gridMotion}>
             {list.map((p: GalleryPhoto) => {
               const imageUrl = normalizeImageUrl(p.thumbnail_path || p.file_path);
               const createdLabel = p.created_at
@@ -397,75 +393,70 @@ export default function GalleryPage() {
                       openPhoto();
                     }
                   }}
-                  className="group relative overflow-hidden border border-white/40 bg-white text-white shadow-md ring-1 ring-black/5 transition duration-300 hover:-translate-y-0.5 hover:shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-400 dark:border-white/10 dark:bg-slate-950 dark:ring-white/10"
+                  className="group flex flex-col overflow-hidden border border-border/60 bg-white shadow-sm ring-1 ring-black/5 transition duration-300 hover:-translate-y-0.5 hover:shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-400 dark:border-white/10 dark:bg-slate-950 dark:ring-white/10"
                   style={{ borderRadius: radius }}
                   {...fadeScaleMotion}
                 >
-                  <img
-                    src={imageUrl}
-                    alt={altText}
-                    className="aspect-[3/4] w-full object-cover transition duration-500 group-hover:scale-105"
-                    onError={(e) => {
-                      (e.target as HTMLImageElement).src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg==';
-                    }}
-                    loading="lazy"
-                  />
-                  <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent" aria-hidden />
-                  <div className="absolute inset-x-0 bottom-0 space-y-2 px-3 pb-3" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
+                  <div className="relative">
+                    <img
+                      src={imageUrl}
+                      alt={altText}
+                      className="aspect-[3/4] w-full object-cover transition duration-500 group-hover:scale-105"
+                      onError={(e) => {
+                        (e.target as HTMLImageElement).src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg==';
+                      }}
+                      loading="lazy"
+                    />
+                    <div className="pointer-events-none absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-black/55 via-black/0 to-transparent" aria-hidden />
+                  </div>
+                  <div className="space-y-2 px-3 pb-3 pt-3" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
                     {localizedTaskTitle && (
                       <p
-                        className="text-sm font-semibold leading-tight line-clamp-2 text-white"
+                        className="text-sm font-semibold leading-tight line-clamp-2 text-foreground"
                         style={headingFont ? { fontFamily: headingFont } : undefined}
                       >
                         {localizedTaskTitle}
                       </p>
                     )}
-                    <div className="flex flex-wrap items-center gap-2 text-[11px] text-white/90">
-                      <span className="rounded-full bg-white/15 px-2 py-1 backdrop-blur">{createdLabel}</span>
-                      <span className="rounded-full bg-white/10 px-2 py-1 backdrop-blur">
-                        {p.uploader_name || t('galleryPage.photo.anonymous', 'Gast')}
-                      </span>
+                    <div className="flex items-center justify-between gap-2 text-[11px] text-muted-foreground">
+                      <span className="truncate">{createdLabel}</span>
+                      <span className="truncate">{p.uploader_name || t('galleryPage.photo.anonymous', 'Gast')}</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-2">
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onLike(p.id);
+                        }}
+                        className={cn(
+                          'inline-flex items-center gap-1 rounded-full border border-border/60 px-3 py-1 text-xs font-semibold text-foreground transition',
+                          liked.has(p.id) ? 'border-pink-200 bg-pink-50 text-pink-600' : 'hover:bg-muted/40'
+                        )}
+                        aria-label={t('galleryPage.photo.likeAria', 'Foto liken')}
+                        style={{ borderRadius: radius }}
+                      >
+                        <Heart className={`h-3.5 w-3.5 ${liked.has(p.id) ? 'fill-current' : ''}`} aria-hidden />
+                        {likeCount}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onShare(p);
+                        }}
+                        className={cn(
+                          'inline-flex items-center gap-1 rounded-full border border-border/60 px-3 py-1 text-xs font-semibold text-foreground transition',
+                          shareTargetId === p.id ? 'opacity-60' : 'hover:bg-muted/40'
+                        )}
+                        aria-label={t('galleryPage.photo.shareAria', 'Foto teilen')}
+                        disabled={shareTargetId === p.id}
+                        style={{ borderRadius: radius }}
+                      >
+                        <Share2 className="h-3.5 w-3.5" aria-hidden />
+                        {t('galleryPage.photo.shareLabel', 'Teilen')}
+                      </button>
                     </div>
-                  </div>
-                  <div className="absolute right-3 top-3 z-10 flex items-center gap-1 rounded-full border border-white/20 bg-black/50 p-1 backdrop-blur">
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onShare(p);
-                      }}
-                      className={cn(
-                        'flex h-9 w-9 items-center justify-center text-white transition',
-                        shareTargetId === p.id ? 'opacity-60' : 'hover:bg-white/10'
-                      )}
-                      aria-label={t('galleryPage.photo.shareAria', 'Foto teilen')}
-                      disabled={shareTargetId === p.id}
-                      style={{
-                        borderRadius: radius,
-                        color: buttonStyle === 'outline' ? linkColor : undefined,
-                      }}
-                    >
-                      <Share2 className="h-4 w-4" aria-hidden />
-                    </button>
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onLike(p.id);
-                      }}
-                      className={cn(
-                        'flex items-center gap-1 px-3 py-1 text-sm font-medium transition',
-                        liked.has(p.id) ? 'text-pink-300' : 'text-white'
-                      )}
-                      aria-label={t('galleryPage.photo.likeAria', 'Foto liken')}
-                      style={{
-                        borderRadius: radius,
-                        color: buttonStyle === 'outline' ? linkColor : undefined,
-                      }}
-                    >
-                      <Heart className={`h-4 w-4 ${liked.has(p.id) ? 'fill-current' : ''}`} aria-hidden />
-                      {likeCount}
-                    </button>
                   </div>
                 </motion.div>
               );
@@ -486,8 +477,8 @@ export default function GalleryPage() {
               </motion.div>
             ))}
           </motion.div>
-        </motion.section>
-      </PullToRefresh>
+        </PullToRefresh>
+      </div>
       {currentPhotoIndex !== null && list.length > 0 && (
         <PhotoLightbox
           photos={list}