diff --git a/frontend/src/pages/Writer/Images.tsx b/frontend/src/pages/Writer/Images.tsx
index d86ec590..e4f0f61e 100644
--- a/frontend/src/pages/Writer/Images.tsx
+++ b/frontend/src/pages/Writer/Images.tsx
@@ -570,13 +570,38 @@ export default function Images() {
       />
 
       {/* Lightbox */}
-      <Lightbox
-        open={lightboxOpen}
-        close={() => setLightboxOpen(false)}
-        index={lightboxIndex}
-        slides={lightboxSlides}
-        on={{ view: ({ index }) => setLightboxIndex(index) }}
-      />
+      {lightboxOpen && (
+        <div className="fixed inset-0 z-[99999]">
+          <Lightbox
+            open={lightboxOpen}
+            close={() => setLightboxOpen(false)}
+            index={lightboxIndex}
+            slides={lightboxSlides}
+            on={{ view: ({ index }) => setLightboxIndex(index) }}
+          />
+          {/* Custom Close Button - Match Modal Style */}
+          <button
+            onClick={() => setLightboxOpen(false)}
+            className="absolute right-3 top-3 z-[999999] flex h-9.5 w-9.5 items-center justify-center rounded-full bg-gray-100 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:right-6 sm:top-6 sm:h-11 sm:w-11"
+            aria-label="Close lightbox"
+          >
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M6.04289 16.5413C5.65237 16.9318 5.65237 17.565 6.04289 17.9555C6.43342 18.346 7.06658 18.346 7.45711 17.9555L11.9987 13.4139L16.5408 17.956C16.9313 18.3466 17.5645 18.3466 17.955 17.956C18.3455 17.5655 18.3455 16.9323 17.955 16.5418L13.4129 11.9997L17.955 7.4576C18.3455 7.06707 18.3455 6.43391 17.955 6.04338C17.5645 5.65286 16.9313 5.65286 16.5408 6.04338L11.9987 10.5855L7.45711 6.0439C7.06658 5.65338 6.43342 5.65338 6.04289 6.0439C5.65237 6.43442 5.65237 7.06759 6.04289 7.45811L10.5845 11.9997L6.04289 16.5413Z"
+                fill="currentColor"
+              />
+            </svg>
+          </button>
+        </div>
+      )}
 
       {/* AI Function Logs - Display below table (only when Resource Debug is enabled) */}
       {resourceDebugEnabled && aiLogs.length > 0 && (
diff --git a/frontend/src/styles/igny8-colors.css b/frontend/src/styles/igny8-colors.css
index 3b696ce5..2d31f1c2 100644
--- a/frontend/src/styles/igny8-colors.css
+++ b/frontend/src/styles/igny8-colors.css
@@ -230,6 +230,22 @@
 .igny8-badge-danger { background: var(--igny8-red); }
 .igny8-badge-purple { background: var(--igny8-purple); }
 
+/* ===================================================================
+   LIGHTBOX STYLES - Match Modal Background
+   =================================================================== */
+/* Use same background as modals: bg-gray-400/50 backdrop-blur-[32px] */
+.yarl__container {
+  background: rgba(156, 163, 175, 0.5) !important; /* gray-400/50 */
+  backdrop-filter: blur(32px) !important;
+  -webkit-backdrop-filter: blur(32px) !important;
+}
+
+.yarl__backdrop {
+  background: rgba(156, 163, 175, 0.5) !important; /* gray-400/50 */
+  backdrop-filter: blur(32px) !important;
+  -webkit-backdrop-filter: blur(32px) !important;
+}
+
 /* ===================================================================
    COMPACT LAYOUT STYLES (Global - Apply to all pages)
    =================================================================== */