diff --git a/apps/admin/next-env.d.ts b/apps/admin/next-env.d.ts
new file mode 100644
index 0000000..40c3d68
--- /dev/null
+++ b/apps/admin/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/apps/api-service/src/db.ts b/apps/api-service/src/db.ts
index 0800e4c..a94d211 100644
--- a/apps/api-service/src/db.ts
+++ b/apps/api-service/src/db.ts
@@ -1,9 +1,17 @@
 import { createDbClient } from '@banatie/database';
+import { config } from 'dotenv';
+import path from 'path';
+
+// Load .env from api-service directory BEFORE reading env vars
+// __dirname in tsx points to src directory, so ../.env goes to api-service/.env
+config({ path: path.join(__dirname, '../.env'), debug: true });
 
 const DATABASE_URL =
   process.env['DATABASE_URL'] ||
   'postgresql://banatie_user:banatie_secure_password@localhost:5434/banatie_db';
 
+console.log('[DB] Using DATABASE_URL:', DATABASE_URL);
+
 export const db = createDbClient(DATABASE_URL);
 
 console.log(
diff --git a/apps/api-service/src/routes/images.ts b/apps/api-service/src/routes/images.ts
index 0393eba..988bb6a 100644
--- a/apps/api-service/src/routes/images.ts
+++ b/apps/api-service/src/routes/images.ts
@@ -1,6 +1,9 @@
 import { Router, Request, Response } from 'express';
 import { StorageFactory } from '../services/StorageFactory';
 import { asyncHandler } from '../middleware/errorHandler';
+import { validateApiKey } from '../middleware/auth/validateApiKey';
+import { requireProjectKey } from '../middleware/auth/requireProjectKey';
+import { rateLimitByApiKey } from '../middleware/auth/rateLimiter';
 
 export const imagesRouter = Router();
 
@@ -135,3 +138,93 @@ imagesRouter.get(
     }
   }),
 );
+
+/**
+ * GET /api/images/generated
+ * List generated images for the authenticated project
+ */
+imagesRouter.get(
+  '/images/generated',
+  validateApiKey,
+  requireProjectKey,
+  rateLimitByApiKey,
+  asyncHandler(async (req: any, res: Response) => {
+    const timestamp = new Date().toISOString();
+    const requestId = req.requestId;
+
+    // Parse and validate query parameters
+    const limit = Math.min(Math.max(parseInt(req.query.limit as string, 10) || 30, 1), 100);
+    const offset = Math.max(parseInt(req.query.offset as string, 10) || 0, 0);
+    const prefix = (req.query.prefix as string) || undefined;
+
+    // Validate query parameters
+    if (isNaN(limit) || isNaN(offset)) {
+      return res.status(400).json({
+        success: false,
+        message: 'Invalid query parameters',
+        error: 'limit and offset must be valid numbers',
+      });
+    }
+
+    // Extract org/project from validated API key
+    const orgId = req.apiKey?.organizationSlug || 'default';
+    const projectId = req.apiKey?.projectSlug!;
+
+    console.log(
+      `[${timestamp}] [${requestId}] Listing generated images for org:${orgId}, project:${projectId}, limit:${limit}, offset:${offset}, prefix:${prefix || 'none'}`,
+    );
+
+    try {
+      // Get storage service instance
+      const storageService = await StorageFactory.getInstance();
+
+      // List files in generated category
+      const allFiles = await storageService.listFiles(orgId, projectId, 'generated', prefix);
+
+      // Sort by lastModified descending (newest first)
+      allFiles.sort((a, b) => {
+        const dateA = a.lastModified ? new Date(a.lastModified).getTime() : 0;
+        const dateB = b.lastModified ? new Date(b.lastModified).getTime() : 0;
+        return dateB - dateA;
+      });
+
+      // Apply pagination
+      const total = allFiles.length;
+      const paginatedFiles = allFiles.slice(offset, offset + limit);
+
+      // Map to response format with public URLs
+      const images = paginatedFiles.map((file) => ({
+        filename: file.filename,
+        url: storageService.getPublicUrl(orgId, projectId, 'generated', file.filename),
+        size: file.size,
+        contentType: file.contentType,
+        lastModified: file.lastModified ? file.lastModified.toISOString() : new Date().toISOString(),
+      }));
+
+      const hasMore = offset + limit < total;
+
+      console.log(
+        `[${timestamp}] [${requestId}] Successfully listed ${images.length} of ${total} generated images`,
+      );
+
+      return res.status(200).json({
+        success: true,
+        data: {
+          images,
+          total,
+          offset,
+          limit,
+          hasMore,
+        },
+      });
+    } catch (error) {
+      console.error(`[${timestamp}] [${requestId}] Failed to list generated images:`, error);
+
+      return res.status(500).json({
+        success: false,
+        message: 'Failed to list generated images',
+        error: error instanceof Error ? error.message : 'Unknown error occurred',
+      });
+    }
+  }),
+);
diff --git a/apps/api-service/src/server.ts b/apps/api-service/src/server.ts
index c9d85a6..1b218d5 100644
--- a/apps/api-service/src/server.ts
+++ b/apps/api-service/src/server.ts
@@ -1,3 +1,10 @@
+// Load environment variables FIRST before any other imports
+import { config } from 'dotenv';
+import { resolve } from 'path';
+
+// Explicitly load from api-service .env file (not root)
+config({ path: resolve(__dirname, '../.env') });
+
 import { createApp, appConfig } from './app';
 import fs from 'fs';
 
diff --git a/apps/api-service/src/services/MinioStorageService.ts b/apps/api-service/src/services/MinioStorageService.ts
index 04d0bde..78a0ae2 100644
--- a/apps/api-service/src/services/MinioStorageService.ts
+++ b/apps/api-service/src/services/MinioStorageService.ts
@@ -449,11 +449,16 @@ export class MinioStorageService implements StorageService {
             etag: metadata.etag,
             path: obj.name,
           });
-        } catch (error) {}
+        } catch (error) {
+          console.error('[MinIO listFiles] Error processing file:', obj.name, error);
+        }
       });
 
       stream.on('end', () => resolve(files));
-      stream.on('error', reject);
+      stream.on('error', (error) => {
+        console.error('[MinIO listFiles] Stream error:', error);
+        reject(error);
+      });
     });
   }
 }
diff --git a/apps/landing/src/app/demo/gallery/page.tsx b/apps/landing/src/app/demo/gallery/page.tsx
new file mode 100644
index 0000000..1dd9eb6
--- /dev/null
+++ b/apps/landing/src/app/demo/gallery/page.tsx
@@ -0,0 +1,377 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { MinimizedApiKey } from '@/components/demo/MinimizedApiKey';
+import { ImageZoomModal } from '@/components/demo/ImageZoomModal';
+import { ImageGrid } from '@/components/demo/gallery/ImageGrid';
+import { EmptyGalleryState } from '@/components/demo/gallery/EmptyGalleryState';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
+const API_KEY_STORAGE_KEY = 'banatie_demo_api_key';
+const IMAGES_PER_PAGE = 30;
+
+type ImageItem = {
+  name: string;
+  url: string;
+  size: number;
+  contentType: string;
+  lastModified: string;
+};
+
+type ImagesResponse = {
+  success: boolean;
+  data?: {
+    images: ImageItem[];
+    total: number;
+    offset: number;
+    limit: number;
+    hasMore: boolean;
+  };
+  error?: string;
+  message?: string;
+};
+
+type ApiKeyInfo = {
+  organizationSlug?: string;
+  projectSlug?: string;
+};
+
+type DownloadTimeMap = {
+  [imageId: string]: number;
+};
+
+export default function GalleryPage() {
+  const [apiKey, setApiKey] = useState('');
+  const [apiKeyVisible, setApiKeyVisible] = useState(false);
+  const [apiKeyValidated, setApiKeyValidated] = useState(false);
+  const [apiKeyInfo, setApiKeyInfo] = useState<ApiKeyInfo | null>(null);
+  const [apiKeyError, setApiKeyError] = useState('');
+  const [validatingKey, setValidatingKey] = useState(false);
+
+  const [images, setImages] = useState<ImageItem[]>([]);
+  const [offset, setOffset] = useState(0);
+  const [hasMore, setHasMore] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState('');
+
+  const [zoomedImageUrl, setZoomedImageUrl] = useState<string | null>(null);
+  const [downloadTimes, setDownloadTimes] = useState<DownloadTimeMap>({});
+
+  useEffect(() => {
+    const storedApiKey = localStorage.getItem(API_KEY_STORAGE_KEY);
+    if (storedApiKey) {
+      setApiKey(storedApiKey);
+      validateStoredApiKey(storedApiKey);
+    }
+  }, []);
+
+  const validateStoredApiKey = async (keyToValidate: string) => {
+    setValidatingKey(true);
+    setApiKeyError('');
+
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/info`, {
+        headers: {
+          'X-API-Key': keyToValidate,
+        },
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setApiKeyValidated(true);
+        if (data.keyInfo) {
+          setApiKeyInfo({
+            organizationSlug: data.keyInfo.organizationSlug || data.keyInfo.organizationId,
+            projectSlug: data.keyInfo.projectSlug || data.keyInfo.projectId,
+          });
+        } else {
+          setApiKeyInfo({
+            organizationSlug: 'Unknown',
+            projectSlug: 'Unknown',
+          });
+        }
+        await fetchImages(keyToValidate, 0);
+      } else {
+        localStorage.removeItem(API_KEY_STORAGE_KEY);
+        setApiKeyError('Stored API key is invalid or expired');
+        setApiKeyValidated(false);
+      }
+    } catch (error) {
+      setApiKeyError('Failed to validate stored API key');
+      setApiKeyValidated(false);
+    } finally {
+      setValidatingKey(false);
+    }
+  };
+
+  const validateApiKey = async () => {
+    if (!apiKey.trim()) {
+      setApiKeyError('Please enter an API key');
+      return;
+    }
+
+    setValidatingKey(true);
+    setApiKeyError('');
+
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/info`, {
+        headers: {
+          'X-API-Key': apiKey,
+        },
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setApiKeyValidated(true);
+        localStorage.setItem(API_KEY_STORAGE_KEY, apiKey);
+
+        if (data.keyInfo) {
+          setApiKeyInfo({
+            organizationSlug: data.keyInfo.organizationSlug || data.keyInfo.organizationId,
+            projectSlug: data.keyInfo.projectSlug || data.keyInfo.projectId,
+          });
+        } else {
+          setApiKeyInfo({
+            organizationSlug: 'Unknown',
+            projectSlug: 'Unknown',
+          });
+        }
+
+        await fetchImages(apiKey, 0);
+      } else {
+        const error = await response.json();
+        setApiKeyError(error.message || 'Invalid API key');
+        setApiKeyValidated(false);
+      }
+    } catch (error) {
+      setApiKeyError('Failed to validate API key. Please check your connection.');
+      setApiKeyValidated(false);
+    } finally {
+      setValidatingKey(false);
+    }
+  };
+
+  const revokeApiKey = () => {
+    localStorage.removeItem(API_KEY_STORAGE_KEY);
+    setApiKey('');
+    setApiKeyValidated(false);
+    setApiKeyInfo(null);
+    setApiKeyError('');
+    setImages([]);
+    setOffset(0);
+    setHasMore(false);
+    setError('');
+  };
+
+  const fetchImages = async (keyToUse: string, fetchOffset: number) => {
+    if (fetchOffset === 0) {
+      setLoading(true);
+    } else {
+      setLoadingMore(true);
+    }
+    setError('');
+
+    try {
+      const response = await fetch(
+        `${API_BASE_URL}/api/images/generated?limit=${IMAGES_PER_PAGE}&offset=${fetchOffset}`,
+        {
+          headers: {
+            'X-API-Key': keyToUse,
+          },
+        }
+      );
+
+      if (!response.ok) {
+        const errorData: ImagesResponse = await response.json();
+        throw new Error(errorData.error || errorData.message || 'Failed to fetch images');
+      }
+
+      const result: ImagesResponse = await response.json();
+
+      if (result.success && result.data) {
+        const { images: newImages, offset: newOffset, hasMore: newHasMore } = result.data;
+
+        if (fetchOffset === 0) {
+          setImages(newImages);
+        } else {
+          setImages((prev) => [...prev, ...newImages]);
+        }
+        setOffset(newOffset);
+        setHasMore(newHasMore);
+      } else {
+        throw new Error(result.error || 'Failed to fetch images');
+      }
+    } catch (error) {
+      setError(error instanceof Error ? error.message : 'Failed to load images');
+    } finally {
+      setLoading(false);
+      setLoadingMore(false);
+    }
+  };
+
+  const handleLoadMore = () => {
+    const newOffset = offset + IMAGES_PER_PAGE;
+    fetchImages(apiKey, newOffset);
+  };
+
+  const handleDownloadMeasured = useCallback((imageId: string, downloadMs: number) => {
+    setDownloadTimes((prev) => ({
+      ...prev,
+      [imageId]: downloadMs,
+    }));
+  }, []);
+
+  return (
+    <div className="relative z-10 max-w-7xl mx-auto px-6 py-12 md:py-16 min-h-screen">
+      {apiKeyValidated && apiKeyInfo && (
+        <MinimizedApiKey
+          organizationSlug={apiKeyInfo.organizationSlug || 'Unknown'}
+          projectSlug={apiKeyInfo.projectSlug || 'Unknown'}
+          apiKey={apiKey}
+          onRevoke={revokeApiKey}
+        />
+      )}
+
+      <header className="mb-8 md:mb-12">
+        <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3">
+          Image Gallery
+        </h1>
+        <p className="text-gray-400 text-base md:text-lg">
+          Browse your AI-generated images
+        </p>
+      </header>
+
+      {!apiKeyValidated && (
+        <section
+          className="mb-6 p-5 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl"
+          aria-label="API Key Validation"
+        >
+          <h2 className="text-lg font-semibold text-white mb-3">API Key</h2>
+          <div className="flex gap-3">
+            <div className="flex-1 relative">
+              <input
+                type={apiKeyVisible ? 'text' : 'password'}
+                value={apiKey}
+                onChange={(e) => setApiKey(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    e.preventDefault();
+                    validateApiKey();
+                  }
+                }}
+                placeholder="Enter your API key"
+                className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent pr-12"
+                aria-label="API key input"
+              />
+              <button
+                type="button"
+                onClick={() => setApiKeyVisible(!apiKeyVisible)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 p-2 text-gray-400 hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-amber-500 rounded"
+                aria-label={apiKeyVisible ? 'Hide API key' : 'Show API key'}
+              >
+                {apiKeyVisible ? (
+                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+                    />
+                  </svg>
+                ) : (
+                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                    />
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                    />
+                  </svg>
+                )}
+              </button>
+            </div>
+            <button
+              onClick={validateApiKey}
+              disabled={validatingKey}
+              className="px-6 py-3 rounded-lg bg-amber-600 text-white font-semibold hover:bg-amber-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-slate-950 min-h-[44px]"
+              aria-busy={validatingKey}
+            >
+              {validatingKey ? 'Validating...' : 'Validate'}
+            </button>
+          </div>
+
+          {apiKeyError && (
+            <div className="mt-3 p-3 bg-red-900/20 border border-red-700/50 rounded-lg" role="alert" aria-live="assertive">
+              <p className="text-sm text-red-400 font-medium mb-1">{apiKeyError}</p>
+              <p className="text-xs text-red-300/80">
+                {apiKeyError.includes('Invalid')
+                  ? 'Please check your API key and try again. You can create a new key in the admin dashboard.'
+                  : 'Please check your internet connection and try again.'}
+              </p>
+            </div>
+          )}
+        </section>
+      )}
+
+      {apiKeyValidated && (
+        <section aria-label="Image Gallery">
+          {loading ? (
+            <div className="flex flex-col items-center justify-center py-16" role="status" aria-live="polite">
+              <div className="animate-spin w-12 h-12 border-4 border-amber-600 border-t-transparent rounded-full mb-4" aria-hidden="true"></div>
+              <p className="text-gray-400">Loading images...</p>
+            </div>
+          ) : error ? (
+            <div className="p-6 bg-red-900/20 border border-red-700/50 rounded-2xl" role="alert" aria-live="assertive">
+              <p className="text-red-400 font-medium mb-2">{error}</p>
+              <p className="text-sm text-red-300/80">
+                {error.includes('fetch') || error.includes('load')
+                  ? 'Unable to load images. Please check your connection and try refreshing the page.'
+                  : 'An error occurred while fetching your images. Please try again later.'}
+              </p>
+            </div>
+          ) : images.length === 0 ? (
+            <EmptyGalleryState />
+          ) : (
+            <>
+              <ImageGrid
+                images={images}
+                onImageZoom={setZoomedImageUrl}
+                onDownloadMeasured={handleDownloadMeasured}
+              />
+
+              {hasMore && (
+                <div className="flex justify-center mt-8">
+                  <button
+                    onClick={handleLoadMore}
+                    disabled={loadingMore}
+                    className="px-8 py-4 rounded-xl bg-gradient-to-r from-amber-600 to-orange-600 text-white font-semibold hover:from-amber-500 hover:to-orange-500 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-amber-900/30 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-slate-950 min-h-[44px]"
+                    aria-busy={loadingMore}
+                    aria-live="polite"
+                  >
+                    {loadingMore ? (
+                      <span className="flex items-center gap-2">
+                        <div className="animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full" aria-hidden="true"></div>
+                        Loading more images...
+                      </span>
+                    ) : (
+                      'Load More Images'
+                    )}
+                  </button>
+                </div>
+              )}
+            </>
+          )}
+        </section>
+      )}
+
+      <ImageZoomModal imageUrl={zoomedImageUrl} onClose={() => setZoomedImageUrl(null)} />
+    </div>
+  );
+}
diff --git a/apps/landing/src/components/demo/ImageZoomModal.tsx b/apps/landing/src/components/demo/ImageZoomModal.tsx
index 791bd7f..1f0d221 100644
--- a/apps/landing/src/components/demo/ImageZoomModal.tsx
+++ b/apps/landing/src/components/demo/ImageZoomModal.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 interface ImageZoomModalProps {
   imageUrl: string | null;
@@ -8,6 +8,9 @@ interface ImageZoomModalProps {
 }
 
 export const ImageZoomModal = ({ imageUrl, onClose }: ImageZoomModalProps) => {
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
+  const modalRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
@@ -17,6 +20,19 @@ export const ImageZoomModal = ({ imageUrl, onClose }: ImageZoomModalProps) => {
 
     if (imageUrl) {
       document.addEventListener('keydown', handleEscape);
+
+      // Focus trap
+      const previousActiveElement = document.activeElement as HTMLElement;
+      closeButtonRef.current?.focus();
+
+      // Disable body scroll
+      document.body.style.overflow = 'hidden';
+
+      return () => {
+        document.removeEventListener('keydown', handleEscape);
+        document.body.style.overflow = '';
+        previousActiveElement?.focus();
+      };
     }
 
     return () => {
@@ -26,25 +42,39 @@ export const ImageZoomModal = ({ imageUrl, onClose }: ImageZoomModalProps) => {
 
   if (!imageUrl) return null;
 
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === modalRef.current) {
+      onClose();
+    }
+  };
+
   return (
     <div
-      className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-4"
-      onClick={onClose}
+      ref={modalRef}
+      className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-4 sm:p-6 md:p-8"
+      onClick={handleBackdropClick}
       role="dialog"
       aria-modal="true"
-      aria-label="Zoomed image view"
+      aria-labelledby="modal-title"
     >
-      <button
-        onClick={onClose}
-        className="absolute top-4 right-4 w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 text-white flex items-center justify-center transition-colors focus:ring-2 focus:ring-white"
-        aria-label="Close zoomed image"
-      >
-        ✕
-      </button>
+      <div className="absolute top-4 right-4 sm:top-6 sm:right-6 flex items-center gap-3">
+        <span id="modal-title" className="sr-only">Full size image viewer</span>
+        <span className="hidden sm:block text-white/70 text-sm font-medium">Press ESC to close</span>
+        <button
+          ref={closeButtonRef}
+          onClick={onClose}
+          className="w-11 h-11 sm:w-12 sm:h-12 rounded-full bg-white/10 hover:bg-white/20 text-white flex items-center justify-center transition-colors focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black/90"
+          aria-label="Close zoomed image"
+        >
+          <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
       <img
         src={imageUrl}
-        alt="Zoomed"
-        className="max-w-full max-h-full object-contain"
+        alt="Full size view"
+        className="max-w-full max-h-full object-contain rounded-lg"
         onClick={(e) => e.stopPropagation()}
       />
     </div>
diff --git a/apps/landing/src/components/demo/gallery/EmptyGalleryState.tsx b/apps/landing/src/components/demo/gallery/EmptyGalleryState.tsx
index cb8ba83..0136ded 100644
--- a/apps/landing/src/components/demo/gallery/EmptyGalleryState.tsx
+++ b/apps/landing/src/components/demo/gallery/EmptyGalleryState.tsx
@@ -31,7 +31,7 @@ export const EmptyGalleryState = () => {
 
       <Link
         href="/demo/tti"
-        className="px-6 py-3 rounded-lg bg-gradient-to-r from-amber-600 to-orange-600 text-white font-semibold hover:from-amber-500 hover:to-orange-500 transition-all shadow-lg shadow-amber-900/30 focus:ring-2 focus:ring-amber-500"
+        className="inline-block px-8 py-4 rounded-xl bg-gradient-to-r from-amber-600 to-orange-600 text-white font-semibold hover:from-amber-500 hover:to-orange-500 transition-all shadow-lg shadow-amber-900/30 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-slate-950 min-h-[44px]"
       >
         Generate Images
       </Link>
diff --git a/apps/landing/src/components/demo/gallery/GalleryImageCard.tsx b/apps/landing/src/components/demo/gallery/GalleryImageCard.tsx
index b3bfd9c..ae8b3ac 100644
--- a/apps/landing/src/components/demo/gallery/GalleryImageCard.tsx
+++ b/apps/landing/src/components/demo/gallery/GalleryImageCard.tsx
@@ -80,11 +80,11 @@ export const GalleryImageCard = ({
       className="p-4 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-xl hover:border-slate-600 transition-all h-full"
     >
       <div
-        className="aspect-video bg-slate-800 rounded-lg mb-3 overflow-hidden cursor-pointer group relative"
+        className="aspect-video bg-slate-800 rounded-lg mb-3 overflow-hidden cursor-pointer group relative focus:outline-none focus:ring-2 focus:ring-amber-500"
         onClick={() => onZoom(imageUrl)}
         role="button"
         tabIndex={0}
-        aria-label="View full size image"
+        aria-label={`View full size image: ${filename}`}
         onKeyDown={handleKeyDown}
       >
         {isVisible ? (
@@ -95,47 +95,52 @@ export const GalleryImageCard = ({
               className="w-full h-full object-cover transition-transform group-hover:scale-105"
             />
 
-            <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-transparent to-black/70 opacity-0 group-hover:opacity-100 transition-opacity">
+            <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-transparent to-black/70 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity">
               <div className="absolute top-3 left-3">
-                <span className="px-2.5 py-1 bg-black/50 backdrop-blur-sm text-white text-xs font-medium rounded border border-white/10">
+                <span className="px-3 py-2 bg-black/50 backdrop-blur-sm text-white text-xs sm:text-sm font-medium rounded border border-white/10" aria-label={`Created ${formatTimestamp(lastModified)}`}>
                   {formatTimestamp(lastModified)}
                 </span>
               </div>
 
               <div className="absolute top-3 right-3 max-w-[60%]">
                 <span
-                  className="px-2.5 py-1 bg-black/50 backdrop-blur-sm text-white text-xs font-medium rounded border border-white/10 truncate block"
+                  className="px-3 py-2 bg-black/50 backdrop-blur-sm text-white text-xs sm:text-sm font-medium rounded border border-white/10 truncate block"
                   title={filename}
+                  aria-label={`Filename: ${filename}`}
                 >
                   {filename}
                 </span>
               </div>
 
-              <div className="absolute inset-0 flex items-center justify-center">
-                <svg
-                  className="w-12 h-12 text-white"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"
-                  />
-                </svg>
+              <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+                <div className="bg-black/60 backdrop-blur-sm rounded-full p-4">
+                  <svg
+                    className="w-10 h-10 sm:w-12 sm:h-12 text-white"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"
+                    />
+                  </svg>
+                </div>
               </div>
             </div>
           </>
         ) : (
-          <div className="w-full h-full flex items-center justify-center">
-            <div className="animate-pulse text-gray-600">
+          <div className="w-full h-full flex items-center justify-center bg-slate-800 animate-pulse" aria-label="Loading image">
+            <div className="text-gray-600">
               <svg
                 className="w-12 h-12"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
+                aria-hidden="true"
               >
                 <path
                   strokeLinecap="round"
diff --git a/apps/landing/src/components/shared/ImageMetadataBar.tsx b/apps/landing/src/components/shared/ImageMetadataBar.tsx
index 66f81e6..a7ff562 100644
--- a/apps/landing/src/components/shared/ImageMetadataBar.tsx
+++ b/apps/landing/src/components/shared/ImageMetadataBar.tsx
@@ -105,51 +105,51 @@ export const ImageMetadataBar = ({
 
   return (
     <div
-      className={`flex items-center justify-between px-3 py-2 bg-slate-800/50 border border-slate-700 rounded-lg text-xs ${className}`}
+      className={`flex items-center justify-between px-2.5 py-2 sm:px-3 bg-slate-800/50 border border-slate-700 rounded-lg text-xs ${className}`}
       role="status"
       aria-label={ariaLabel}
     >
-      <div className="flex items-center gap-2 flex-wrap">
-        <span className="font-medium text-white cursor-help whitespace-nowrap" title={dimensionsTooltip}>
+      <div className="flex items-center gap-1.5 sm:gap-2 flex-wrap min-w-0">
+        <span className="font-medium text-white cursor-help whitespace-nowrap text-[11px] sm:text-xs" title={dimensionsTooltip}>
           {width} × {height}
         </span>
 
-        <span className="text-gray-600" aria-hidden="true">
+        <span className="text-gray-600 hidden xs:inline" aria-hidden="true">
           ·
         </span>
 
-        <span className="flex items-center gap-1 text-gray-400 cursor-help whitespace-nowrap" title={aspectRatioTooltip}>
+        <span className="flex items-center gap-1 text-gray-400 cursor-help whitespace-nowrap text-[11px] sm:text-xs" title={aspectRatioTooltip}>
           <span>{aspectRatio}</span>
           {showVisualIndicator && (
-            <span title={visualIndicatorTooltip}>
+            <span className="hidden sm:inline" title={visualIndicatorTooltip}>
               <AspectRatioIcon width={width} height={height} />
             </span>
           )}
         </span>
 
-        <span className="text-gray-600" aria-hidden="true">
+        <span className="text-gray-600 hidden xs:inline" aria-hidden="true">
           ·
         </span>
 
-        <span className="text-gray-400 cursor-help whitespace-nowrap" title={fileSizeTooltip}>
+        <span className="text-gray-400 cursor-help whitespace-nowrap text-[11px] sm:text-xs" title={fileSizeTooltip}>
           {formattedSize}
         </span>
 
-        <span className="text-gray-600" aria-hidden="true">
+        <span className="text-gray-600 hidden sm:inline" aria-hidden="true">
           ·
         </span>
 
-        <span className="text-gray-400 cursor-help whitespace-nowrap" title={fileTypeTooltip}>
+        <span className="text-gray-400 cursor-help whitespace-nowrap text-[11px] sm:text-xs hidden sm:inline" title={fileTypeTooltip}>
           {formattedType}
         </span>
 
         {downloadMs !== null && downloadMs !== undefined && downloadPerformance && (
           <>
-            <span className="text-gray-600" aria-hidden="true">
+            <span className="text-gray-600 hidden sm:inline" aria-hidden="true">
               ·
             </span>
 
-            <span className="flex items-center gap-1.5 cursor-help whitespace-nowrap" title={downloadTooltip}>
+            <span className="flex items-center gap-1.5 cursor-help whitespace-nowrap text-[11px] sm:text-xs hidden sm:flex" title={downloadTooltip}>
               <DownloadIcon />
               <span className={downloadPerformance.color}>{downloadTimeText}</span>
             </span>
diff --git a/apps/landing/src/hooks/useIntersectionObserver.ts b/apps/landing/src/hooks/useIntersectionObserver.ts
index 1765e58..625e6c5 100644
--- a/apps/landing/src/hooks/useIntersectionObserver.ts
+++ b/apps/landing/src/hooks/useIntersectionObserver.ts
@@ -9,7 +9,7 @@ type UseIntersectionObserverOptions = {
 };
 
 type UseIntersectionObserverReturn = {
-  ref: React.RefObject<HTMLDivElement>;
+  ref: React.RefObject<HTMLDivElement | null>;
   isIntersecting: boolean;
 };
 
diff --git a/apps/studio/next-env.d.ts b/apps/studio/next-env.d.ts
new file mode 100644
index 0000000..40c3d68
--- /dev/null
+++ b/apps/studio/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.