diff --git a/frontend/src/components/gallery/GuestNamePromptModal.tsx b/frontend/src/components/gallery/GuestNamePromptModal.tsx
index 95c3efd6..9e520bba 100644
--- a/frontend/src/components/gallery/GuestNamePromptModal.tsx
+++ b/frontend/src/components/gallery/GuestNamePromptModal.tsx
@@ -72,7 +72,7 @@ export const GuestNamePromptModal: React.FC<GuestNamePromptModalProps> = ({
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+    <div className="fixed inset-0 z-[60] flex items-center justify-center p-4">
       <div className="fixed inset-0 bg-black bg-opacity-50" onClick={allowCancel ? handleClose : undefined} />
       <div className="relative bg-surface rounded-lg shadow-xl max-w-md w-full p-6">
         {allowCancel && (
diff --git a/frontend/src/components/gallery/GuestRecoveryModal.tsx b/frontend/src/components/gallery/GuestRecoveryModal.tsx
index 44300d2d..1f5768eb 100644
--- a/frontend/src/components/gallery/GuestRecoveryModal.tsx
+++ b/frontend/src/components/gallery/GuestRecoveryModal.tsx
@@ -86,7 +86,7 @@ export const GuestRecoveryModal: React.FC = () => {
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+    <div className="fixed inset-0 z-[60] flex items-center justify-center p-4">
       <div className="fixed inset-0 bg-black bg-opacity-50" onClick={handleClose} />
       <div className="relative bg-surface rounded-lg shadow-xl max-w-md w-full p-6">
         <button
diff --git a/frontend/src/components/gallery/PhotoLightbox.tsx b/frontend/src/components/gallery/PhotoLightbox.tsx
index eb02301b..7273ea4e 100644
--- a/frontend/src/components/gallery/PhotoLightbox.tsx
+++ b/frontend/src/components/gallery/PhotoLightbox.tsx
@@ -8,6 +8,7 @@ import { PhotoFeedback } from './PhotoFeedback';
 import { feedbackService } from '../../services/feedback.service';
 import { FeedbackIdentityModal } from './FeedbackIdentityModal';
 import { VideoPlayer } from './VideoPlayer';
+import { useGuestIdentityOptional } from '../../contexts/GuestIdentityContext';
 
 interface PhotoLightboxProps {
   photos: Photo[];
@@ -63,6 +64,8 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
   const [showIdentityModal, setShowIdentityModal] = useState(false);
   const [pendingAction, setPendingAction] = useState<null | { type: 'like' | 'rating'; rating?: number }>(null);
   const [imageLoaded, setImageLoaded] = useState(false);
+  const guestIdentity = useGuestIdentityOptional();
+  const isGuestMode = guestIdentity?.identityMode === 'guest';
 
   useEffect(() => {
     const onResize = () => setIsSmallScreen(window.innerWidth < 640);
@@ -203,6 +206,33 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
   }, [slug, currentPhoto.id, feedbackSettings?.feedback_enabled]);
 
   const submitLike = async () => {
+    // Guest identity mode: ensure we have a per-person guest token. The
+    // server reads name/email from the token — body values are ignored.
+    if (isGuestMode && guestIdentity) {
+      try {
+        await guestIdentity.ensureIdentity();
+      } catch {
+        // User cancelled the prompt — abort silently.
+        return;
+      }
+      try {
+        await feedbackService.submitFeedback(slug, String(currentPhoto.id), {
+          feedback_type: 'like',
+        });
+        setMyLiked(prev => {
+          const next = !prev;
+          setLikeCount(c => Math.max(0, c + (next ? 1 : -1)));
+          return next;
+        });
+        if (onFeedbackChange) onFeedbackChange();
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.warn('Like submit failed', err);
+      }
+      return;
+    }
+
+    // Simple mode: legacy inline identity modal flow.
     const needIdentity = feedbackSettings?.require_name_email && !savedIdentity;
     if (needIdentity) {
       setPendingAction({ type: 'like' });
@@ -222,6 +252,33 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
   };
 
   const submitRating = async (value: number) => {
+    // Guest identity mode.
+    if (isGuestMode && guestIdentity) {
+      try {
+        await guestIdentity.ensureIdentity();
+      } catch {
+        return;
+      }
+      try {
+        await feedbackService.submitFeedback(slug, String(currentPhoto.id), {
+          feedback_type: 'rating',
+          rating: value,
+        });
+        setMyRating(value);
+        try {
+          const fresh = await feedbackService.getPhotoFeedback(slug, String(currentPhoto.id));
+          setAvgRating(Number(fresh.summary?.average_rating) || 0);
+          setTotalRatings(Number(fresh.summary?.total_ratings) || 0);
+        } catch {}
+        if (onFeedbackChange) onFeedbackChange();
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.warn('Rating submit failed', err);
+      }
+      return;
+    }
+
+    // Simple mode: legacy inline identity modal flow.
     const needIdentity = feedbackSettings?.require_name_email && !savedIdentity;
     if (needIdentity) {
       setPendingAction({ type: 'rating', rating: value });
diff --git a/frontend/src/components/gallery/layouts/MasonryGalleryLayout.tsx b/frontend/src/components/gallery/layouts/MasonryGalleryLayout.tsx
index baaf59fa..36f7c1cf 100644
--- a/frontend/src/components/gallery/layouts/MasonryGalleryLayout.tsx
+++ b/frontend/src/components/gallery/layouts/MasonryGalleryLayout.tsx
@@ -34,6 +34,9 @@ interface MasonryPhotoProps {
   onQuickComment?: () => void;
   // Column width for calculating proper aspect-ratio-based height
   columnWidth?: number;
+  // Optimistic "I liked this" state + callback (lifted to parent)
+  liked?: boolean;
+  onLikeSuccess?: () => void;
 }
 
 const MasonryPhoto: React.FC<MasonryPhotoProps> = ({
@@ -49,7 +52,9 @@ const MasonryPhoto: React.FC<MasonryPhotoProps> = ({
   slug,
   feedbackOptions,
   onQuickComment,
-  columnWidth = 300
+  columnWidth = 300,
+  liked = false,
+  onLikeSuccess,
 }) => {
   const [showIdentityModal, setShowIdentityModal] = useState(false);
   const [pendingAction, setPendingAction] = useState<null | { type: 'like'; photoId: number }>(null);
@@ -150,7 +155,11 @@ const MasonryPhoto: React.FC<MasonryPhotoProps> = ({
             )}
             {feedbackEnabled && feedbackOptions?.allowLikes && (
               <button
-                className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
+                className={`p-2 rounded-full transition-colors ${
+                  liked
+                    ? 'bg-red-500/90 hover:bg-red-500'
+                    : 'bg-white/90 hover:bg-white'
+                }`}
                 onClick={async (e) => {
                   e.stopPropagation();
                   if (guestIdentity?.identityMode === 'guest') {
@@ -159,9 +168,16 @@ const MasonryPhoto: React.FC<MasonryPhotoProps> = ({
                     } catch {
                       return;
                     }
-                    await feedbackService.submitFeedback(slug!, String(photo.id), {
-                      feedback_type: 'like',
-                    });
+                    // Optimistic UI: mark as liked immediately
+                    if (onLikeSuccess) onLikeSuccess();
+                    try {
+                      await feedbackService.submitFeedback(slug!, String(photo.id), {
+                        feedback_type: 'like',
+                      });
+                    } catch (err) {
+                      // eslint-disable-next-line no-console
+                      console.warn('Like submit failed, keeping optimistic UI', err);
+                    }
                     return;
                   }
                   if (feedbackOptions?.requireNameEmail && !savedIdentity) {
@@ -169,16 +185,26 @@ const MasonryPhoto: React.FC<MasonryPhotoProps> = ({
                     setShowIdentityModal(true);
                     return;
                   }
-                  await feedbackService.submitFeedback(slug!, String(photo.id), {
-                    feedback_type: 'like',
-                    guest_name: savedIdentity?.name,
-                    guest_email: savedIdentity?.email,
-                  });
+                  // Optimistic UI: mark as liked immediately
+                  if (onLikeSuccess) onLikeSuccess();
+                  try {
+                    await feedbackService.submitFeedback(slug!, String(photo.id), {
+                      feedback_type: 'like',
+                      guest_name: savedIdentity?.name,
+                      guest_email: savedIdentity?.email,
+                    });
+                  } catch (err) {
+                    // eslint-disable-next-line no-console
+                    console.warn('Like submit failed, keeping optimistic UI', err);
+                  }
                 }}
-                aria-label="Like photo"
-                title="Like"
+                aria-label={liked ? 'Unlike photo' : 'Like photo'}
+                aria-pressed={liked}
+                title={liked ? 'Unlike' : 'Like'}
               >
-                <Heart className="w-5 h-5 text-neutral-800" />
+                <Heart
+                  className={`w-5 h-5 ${liked ? 'text-white fill-white' : 'text-neutral-800'}`}
+                />
               </button>
             )}
           </>
@@ -193,6 +219,9 @@ const MasonryPhoto: React.FC<MasonryPhotoProps> = ({
           setSavedIdentity({ name, email });
           setShowIdentityModal(false);
           if (pendingAction) {
+            if (pendingAction.type === 'like' && onLikeSuccess) {
+              onLikeSuccess();
+            }
             await feedbackService.submitFeedback(slug!, String(pendingAction.photoId), {
               feedback_type: pendingAction.type,
               guest_name: name,
@@ -249,6 +278,9 @@ export const MasonryGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
   const containerRef = useRef<HTMLDivElement>(null);
   const [columns, setColumns] = useState(3);
   const [containerWidth, setContainerWidth] = useState(0);
+  // Optimistic "I liked this" state — lifted here so it survives re-renders
+  // of individual MasonryPhoto components during layout reflow/resize.
+  const [likedPhotoIds, setLikedPhotoIds] = useState<Set<number>>(new Set());
   const gallerySettings = theme.gallerySettings || {};
   const gutter = gallerySettings.masonryGutter || 16;
   const mode = gallerySettings.masonryMode || 'columns';
@@ -798,6 +830,14 @@ export const MasonryGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                 feedbackOptions={feedbackOptions}
                 onQuickComment={() => onOpenPhotoWithFeedback && onOpenPhotoWithFeedback(originalIndex)}
                 columnWidth={columnWidth}
+                liked={likedPhotoIds.has(photo.id)}
+                onLikeSuccess={() => {
+                  setLikedPhotoIds((prev) => {
+                    const next = new Set(prev);
+                    next.add(photo.id);
+                    return next;
+                  });
+                }}
               />
             );
           })}