Merge pull request #282 from the-luap/release-please--branches--main

chore(main): release 2.6.5
2026-04-08 13:18:17 +02:00 · 2026-04-08 11:15:26 +00:00 · 2026-04-08 13:15:07 +02:00 · 2026-04-08 13:14:57 +02:00 · 2026-04-08 09:39:15 +02:00 · 2026-04-08 07:14:32 +00:00
230 changed files with 22420 additions and 4645 deletions
@@ -22,6 +22,7 @@ REDIS_PASSWORD=your_secure_redis_password_here
 # Admin Account (initial setup)
 ADMIN_USERNAME=admin
 ADMIN_EMAIL=admin@yourdomain.com
+ADMIN_PASSWORD=your_secure_admin_password_here

 # Email Configuration
 # For Gmail: use app-specific password
@@ -39,6 +40,11 @@ EMAIL_FROM=noreply@yourdomain.com
 FRONTEND_URL=https://yourdomain.com
 ADMIN_URL=https://yourdomain.com

+# API URL for email assets (logos, images in notification emails)
+# This must be the publicly accessible URL where email recipients can load images.
+# If not set, defaults to http://localhost:3001 which will show broken images in emails.
+API_URL=https://yourdomain.com/api
+
 # Frontend API base
 # For pre-built images and production behind a reverse proxy, keep '/api'.
 # If you rebuild the frontend yourself, you may set a full URL at build time.
@@ -9,7 +9,7 @@ assignees: ''

 ⚠️ **IMPORTANT: For serious security vulnerabilities, please DO NOT create a public issue.**

-Instead, please email security@example.com with the details.
+Instead, please use [GitHub Private Vulnerability Reporting](https://github.com/the-luap/picpeak/security/advisories/new) or email **info@picpeak.app** with the details.

 For minor security improvements or questions, you can use this template:

@@ -86,6 +86,14 @@ docs/*_PLAN.md
 docs/test-*.md
 docs/feature-*.md

+# Scaffolding documentation (local development reference)
+docs/DATABASE_SCHEMA.md
+docs/BACKEND_SERVICES.md
+docs/API_ROUTES.md
+docs/FRONTEND_ARCHITECTURE.md
+docs/DEVELOPER_ONBOARDING.md
+docs/ENVIRONMENT_VARIABLES.md
+
 # Local backup directory (from testing)
 backup/

@@ -94,3 +102,16 @@ backup/

 # Local SQLite files in backend
 backend/*.sqlite*
+backend/*.db
+
+# Test files and artifacts
+test-images/
+test-logo*.jpg
+test-logo*.png
+test-results/
+
+# Development docker compose
+docker-compose.dev.yml
+
+# New layout development files
+new-layouts/
@@ -1,3 +1,3 @@
 {
-  ".": "3.0.0-beta.0"
+  ".": "3.17.1-beta.0"
 }
@@ -1,3 +1,3 @@
 {
-  ".": "2.3.2"
+  ".": "2.6.5"
 }
@@ -5,6 +5,459 @@ All notable changes to PicPeak will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

+## [2.6.5](https://github.com/the-luap/picpeak/compare/v2.6.4...v2.6.5) (2026-04-08)
+
+
+### Documentation
+
+* rewrite README — shorter, cleaner ([62643f2](https://github.com/the-luap/picpeak/commit/62643f241b51dc1620e30a8c8767f52428c0314c))
+* rewrite README — shorter, cleaner, less AI-sounding ([64f6061](https://github.com/the-luap/picpeak/commit/64f606152fde2db9034fa9ffa08cc58623edf646))
+
+## [2.6.4](https://github.com/the-luap/picpeak/compare/v2.6.3...v2.6.4) (2026-04-08)
+
+
+### Bug Fixes
+
+* sync backend package-lock.json for security deps ([bb81fa5](https://github.com/the-luap/picpeak/commit/bb81fa5f4b5f1bd927a02470ce80a13c4f53443f))
+* sync backend package-lock.json with security dep updates ([03e1989](https://github.com/the-luap/picpeak/commit/03e19893b3532a27aa59e7b834d53c6a2b52b7cd))
+
+## [2.6.3](https://github.com/the-luap/picpeak/compare/v2.6.2...v2.6.3) (2026-04-07)
+
+
+### Documentation
+
+* add External Media Library section to deployment guide ([#270](https://github.com/the-luap/picpeak/issues/270)) ([2e1c71c](https://github.com/the-luap/picpeak/commit/2e1c71c1ab073e488ac93e35337a2d3955dfef3d))
+* add External Media Library section to deployment guide ([#270](https://github.com/the-luap/picpeak/issues/270)) ([f6ca713](https://github.com/the-luap/picpeak/commit/f6ca713a6edc8ba371db790daba05ecb85ea4872))
+
+## [2.6.2](https://github.com/the-luap/picpeak/compare/v2.6.1...v2.6.2) (2026-03-16)
+
+
+### Bug Fixes
+
+* **security:** invalidate tokens on password change, enforce session timeout, fix role update ([85a60a2](https://github.com/the-luap/picpeak/commit/85a60a2dc7526aa6b673e2a04e9fdfba7de7117f))
+* **security:** token invalidation on password change, session timeout enforcement ([0a3a537](https://github.com/the-luap/picpeak/commit/0a3a53763c9f3caef9fdceccf9fdbfdefe9bd8bf))
+
+## [2.6.1](https://github.com/the-luap/picpeak/compare/v2.6.0...v2.6.1) (2026-03-11)
+
+
+### Bug Fixes
+
+* update security policy with private reporting channels ([7f77362](https://github.com/the-luap/picpeak/commit/7f7736282f534adf4b9d5331d841a1f0bff7341c))
+* update security policy with proper contact email and private reporting ([67b0f32](https://github.com/the-luap/picpeak/commit/67b0f32456d0216e4c685a104c680fa5a5fd578f)), closes [#223](https://github.com/the-luap/picpeak/issues/223)
+
+## [3.17.1-beta.0](https://github.com/the-luap/picpeak/compare/v3.17.0-beta.0...v3.17.1-beta.0) (2026-03-08)
+
+
+### Bug Fixes
+
+* respect optional email settings in event creation ([831ea6a](https://github.com/the-luap/picpeak/commit/831ea6a3bccfae4ec00ce1f619967b91b85150ce))
+* respect optional email settings in event creation ([#217](https://github.com/the-luap/picpeak/issues/217)) ([9c44a0e](https://github.com/the-luap/picpeak/commit/9c44a0ebfa527fa133512eb7f2f03335a2377aaa))
+
+## [3.17.0-beta.0](https://github.com/the-luap/picpeak/compare/v3.16.0-beta.0...v3.17.0-beta.0) (2026-03-05)
+
+
+### Features
+
+* configurable upload batch size for reverse proxy compatibility ([9b7495e](https://github.com/the-luap/picpeak/commit/9b7495e0054975e66c9b5006c24a9fae63969de4))
+
+## [3.16.0-beta.0](https://github.com/the-luap/picpeak/compare/v3.15.3-beta.0...v3.16.0-beta.0) (2026-03-05)
+
+
+### Features
+
+* add thumbnail settings UI to admin panel ([3a30fea](https://github.com/the-luap/picpeak/commit/3a30fea862034d64fbc7188fc25292594a9319e2))
+* add thumbnail settings UI to admin settings page ([#206](https://github.com/the-luap/picpeak/issues/206)) ([7d6d2f5](https://github.com/the-luap/picpeak/commit/7d6d2f56883a4402f0d97c95b0432a8a783c8024))
+
+## [3.15.3-beta.0](https://github.com/the-luap/picpeak/compare/v3.15.2-beta.0...v3.15.3-beta.0) (2026-03-02)
+
+
+### Bug Fixes
+
+* issue [#203](https://github.com/the-luap/picpeak/issues/203) file type validation + security CVE fixes ([8017171](https://github.com/the-luap/picpeak/commit/80171713e0ffedda56f7cffb403b25a8d55634d1))
+* respect allowed_file_types setting for upload validation ([#203](https://github.com/the-luap/picpeak/issues/203)) ([fe07a14](https://github.com/the-luap/picpeak/commit/fe07a148f1d998c0be00377c1f8b4eca3908305c))
+* **security:** resolve all npm audit vulnerabilities ([4272618](https://github.com/the-luap/picpeak/commit/4272618b3f7fcb06aaca14fb724a6a7733251f24))
+* **security:** resolve Docker image CVEs for code scanning alerts ([cbecb93](https://github.com/the-luap/picpeak/commit/cbecb9323cf4b80c800326de14f6df73f60147c1))
+
+## [2.6.0](https://github.com/the-luap/picpeak/compare/v2.5.1...v2.6.0) (2026-03-11)
+
+
+### Features
+
+* add configurable upload batch size for reverse proxy compatibility ([#208](https://github.com/the-luap/picpeak/issues/208)) ([02a46e0](https://github.com/the-luap/picpeak/commit/02a46e083d68cfdb355b5a4fe4a8da7d667050b9))
+* configurable upload batch size for reverse proxy compatibility ([4243363](https://github.com/the-luap/picpeak/commit/424336340bef8e1629490ade154f0ceebb2a71e1))
+
+
+### Bug Fixes
+
+* video upload media type, select all, and dimension repair ([#203](https://github.com/the-luap/picpeak/issues/203), [#220](https://github.com/the-luap/picpeak/issues/220), [#180](https://github.com/the-luap/picpeak/issues/180)) ([fc75bcd](https://github.com/the-luap/picpeak/commit/fc75bcdfc38673d6e4dd1cd943cfb4638d3a306c))
+* video upload, select all, and dimension repair ([#203](https://github.com/the-luap/picpeak/issues/203), [#220](https://github.com/the-luap/picpeak/issues/220), [#180](https://github.com/the-luap/picpeak/issues/180)) ([a0bb080](https://github.com/the-luap/picpeak/commit/a0bb0805868e742f323b64312c3c5ef8ec408f68))
+
+## [2.5.1](https://github.com/the-luap/picpeak/compare/v2.5.0...v2.5.1) (2026-02-22)
+
+
+### Bug Fixes
+
+* resolve issues [#194](https://github.com/the-luap/picpeak/issues/194), [#195](https://github.com/the-luap/picpeak/issues/195), [#196](https://github.com/the-luap/picpeak/issues/196), [#197](https://github.com/the-luap/picpeak/issues/197) ([33af088](https://github.com/the-luap/picpeak/commit/33af0885607799e0071e2e74a582c7eb396c9b83))
+* resolve issues [#194](https://github.com/the-luap/picpeak/issues/194), [#195](https://github.com/the-luap/picpeak/issues/195), [#196](https://github.com/the-luap/picpeak/issues/196), [#197](https://github.com/the-luap/picpeak/issues/197) ([33483cf](https://github.com/the-luap/picpeak/commit/33483cf32dfae57f8da51c0765353792239135f9))
+
+## [2.5.0](https://github.com/the-luap/picpeak/compare/v2.4.0...v2.5.0) (2026-02-21)
+
+
+### Features
+
+* add admin dark mode and SEO/robots.txt settings ([9c2a0d2](https://github.com/the-luap/picpeak/commit/9c2a0d272a21dfcace2ec795034e2f1adcba47e0))
+* add bulk category editing for photos ([#157](https://github.com/the-luap/picpeak/issues/157)) ([eca36c7](https://github.com/the-luap/picpeak/commit/eca36c70a23f18f937a9f5bddeff855e18f364c3))
+* add category hero/cover photo selection ([#163](https://github.com/the-luap/picpeak/issues/163)) ([6c30e2c](https://github.com/the-luap/picpeak/commit/6c30e2c2edd19a24d4f30a9558690bb7e2331b32))
+* add customizable event types with admin management ([f8881d5](https://github.com/the-luap/picpeak/commit/f8881d5bd62d449fb40917ec8c20f0eb16c1fdad))
+* add Gallery Premium and Gallery Story layouts (Beta) ([e179def](https://github.com/the-luap/picpeak/commit/e179def3cceefe5fd6acd5574f2986e4f9e223ef))
+* add hero image focal point picker with anchor positioning ([#162](https://github.com/the-luap/picpeak/issues/162)) ([734868a](https://github.com/the-luap/picpeak/commit/734868abc23731b0ac9ad73e799194df1e6aa6ab))
+* add justified layout modes and aspect-ratio-aware mosaic ([#146](https://github.com/the-luap/picpeak/issues/146)) ([608bbd5](https://github.com/the-luap/picpeak/commit/608bbd50e7b31d49c7516a00e96f284fa16e2777))
+* Add justified layout modes and aspect-ratio-aware mosaic ([#146](https://github.com/the-luap/picpeak/issues/146)) ([ef2ae00](https://github.com/the-luap/picpeak/commit/ef2ae00ff20b754c2f2ed797e18c146d12d7f31a))
+* add justified/rows layout mode to masonry gallery ([#146](https://github.com/the-luap/picpeak/issues/146)) ([e081b56](https://github.com/the-luap/picpeak/commit/e081b56a44bf9fdaa3dd225d5dd4dde35bfe83d3))
+* add justified/rows layout mode to masonry gallery ([#146](https://github.com/the-luap/picpeak/issues/146)) + security fixes ([cd1d504](https://github.com/the-luap/picpeak/commit/cd1d50474f673b759c2f9401fdbe209a84773e39))
+* add optional event date and expiration settings ([3079eaa](https://github.com/the-luap/picpeak/commit/3079eaa2e5d1728c2c0f315626cc253e4b08edc2))
+* add optional event date and expiration settings ([2151147](https://github.com/the-luap/picpeak/commit/2151147f2d3134448ff32130da44678e2942d73c)), closes [#118](https://github.com/the-luap/picpeak/issues/118)
+* add original filename preservation and Lightroom export support ([a59f414](https://github.com/the-luap/picpeak/commit/a59f41463f960a3a74ce3933dc7db84ee3a2018d))
+* add original filename preservation and Lightroom export support ([9872ad3](https://github.com/the-luap/picpeak/commit/9872ad3aef6488b359c5499a6dc3d8bfbfa48fde))
+* add per-event custom logo upload with bug fixes ([85170b8](https://github.com/the-luap/picpeak/commit/85170b883f504d83f1d862abb3f4e46741074826))
+* add per-event hero logo customization options ([0790a1d](https://github.com/the-luap/picpeak/commit/0790a1ddad774af89827a0a392e9fae0a945bff2))
+* add quilted layout, fix mosaic, and backfill photo dimensions ([#146](https://github.com/the-luap/picpeak/issues/146)) ([46ed1bc](https://github.com/the-luap/picpeak/commit/46ed1bc276867a25b27bf22cd9b9d7e879a6947b))
+* add update instructions dialog, email notifications, and capture date sorting ([50c0990](https://github.com/the-luap/picpeak/commit/50c09904a9434f988ab32a07da5d24db0e02065e)), closes [#181](https://github.com/the-luap/picpeak/issues/181)
+* decouple hero header from gallery layouts ([#158](https://github.com/the-luap/picpeak/issues/158)) ([7b8d8bd](https://github.com/the-luap/picpeak/commit/7b8d8bd92ba7a96717bb4d821b38dddc395f701a))
+* gallery layouts, bulk category editing, and hero header improvements ([7037106](https://github.com/the-luap/picpeak/commit/7037106bff62593bba600d898a781f79f07b459d))
+* gallery layouts, hero customization, bulk categories & event types ([d9e00dc](https://github.com/the-luap/picpeak/commit/d9e00dc0dbd7cef0ddb4665e5306c98aac3573e3))
+* gallery layouts, hero customization, event types, and UX improvements ([#146](https://github.com/the-luap/picpeak/issues/146), [#155](https://github.com/the-luap/picpeak/issues/155)-163, [#170](https://github.com/the-luap/picpeak/issues/170), [#171](https://github.com/the-luap/picpeak/issues/171)) ([4280444](https://github.com/the-luap/picpeak/commit/4280444d70e73db09e67e18ce25bac75cf499b75))
+* improve gallery layouts with aspect-ratio-aware masonry and mosaic modes ([#146](https://github.com/the-luap/picpeak/issues/146)) ([aacfcd5](https://github.com/the-luap/picpeak/commit/aacfcd517ea5739e834cf84627b55b3449740a5c))
+* improve hero image UX and live preview ([#163](https://github.com/the-luap/picpeak/issues/163), [#158](https://github.com/the-luap/picpeak/issues/158)) ([d63f67a](https://github.com/the-luap/picpeak/commit/d63f67a2afba1b92610382aa1012428ccacb86bd))
+* new features and bug fixes for beta release ([151e1bf](https://github.com/the-luap/picpeak/commit/151e1bf50f206ae0571fa044c75b8bc9f0f40120))
+* original filename in admin UI, update dialog, and security hardening ([3ea9d5b](https://github.com/the-luap/picpeak/commit/3ea9d5b1219980032cbee7a2564c0004948923f5))
+* original filename in admin UI, update dialog, security hardening, and bug fixes ([bcf2745](https://github.com/the-luap/picpeak/commit/bcf2745ab64acb968ae4bd0710b28e78c14f340c))
+* per-event custom logos, customizable event types, and multiple bug fixes ([4c08160](https://github.com/the-luap/picpeak/commit/4c081601e02888d7ad289acb7847aee9d6f5703f))
+* pre-generate watermarks for instant lightbox loading ([1be974a](https://github.com/the-luap/picpeak/commit/1be974afbb0b7a1bdbdd140327771907a5d3c2ae)), closes [#112](https://github.com/the-luap/picpeak/issues/112)
+* pre-generated watermarks and mobile upload button improvements ([c6fdd38](https://github.com/the-luap/picpeak/commit/c6fdd38e842e1a8c0aa9cbab9fc791e6669e402d))
+* show original filename in admin UI ([#184](https://github.com/the-luap/picpeak/issues/184)) ([0891be1](https://github.com/the-luap/picpeak/commit/0891be197fdb7d92ade5a293b8db0bed26fa6e3a))
+## [3.15.2-beta.0](https://github.com/the-luap/picpeak/compare/v3.15.1-beta.0...v3.15.2-beta.0) (2026-02-22)
+
+
+### Bug Fixes
+
+* add allow_user_uploads to gallery API responses ([691e3ab](https://github.com/the-luap/picpeak/commit/691e3aba09f2148afe902a0bb0139d062634e669))
+* add STORAGE_PATH to production docker-compose ([cdda709](https://github.com/the-luap/picpeak/commit/cdda70988664a177b351abc6a259ec39664d17ff))
+* checkbox and toggle settings not persisting after page refresh ([808ed1d](https://github.com/the-luap/picpeak/commit/808ed1d2f1164d9fd1114586c68a1f925bf73ddf)), closes [#117](https://github.com/the-luap/picpeak/issues/117)
+* correct invitation activation validation and add missing translations ([991aa98](https://github.com/the-luap/picpeak/commit/991aa98f98cffd1d7785c272726615325e2c0208)), closes [#129](https://github.com/the-luap/picpeak/issues/129)
+* correct invitation email link URL path ([86fa104](https://github.com/the-luap/picpeak/commit/86fa1046d5439cb451feb164175c919c49ca219a)), closes [#129](https://github.com/the-luap/picpeak/issues/129)
+* correct storage path resolution in multiple files ([#96](https://github.com/the-luap/picpeak/issues/96)) ([0e3674b](https://github.com/the-luap/picpeak/commit/0e3674b2b0325bbcee5aa2c9ff7781da92f612d1))
+* correct storage path resolution in multiple files ([#96](https://github.com/the-luap/picpeak/issues/96)) ([3ccb815](https://github.com/the-luap/picpeak/commit/3ccb8154eb40a432aa467fb06b3f216fd0d2c6b4))
+* docker compose v2 syntax and add missing ADMIN_PASSWORD to .env.example ([#189](https://github.com/the-luap/picpeak/issues/189)) ([0817443](https://github.com/the-luap/picpeak/commit/0817443e793e37c770c6a1968ecae4b9464107b0))
+* event-specific custom CSS settings not being saved ([dadef81](https://github.com/the-luap/picpeak/commit/dadef81158972d28aa32812203500f77ed08a999)), closes [#136](https://github.com/the-luap/picpeak/issues/136)
+* events without expiration date incorrectly shown as expired ([c4f16eb](https://github.com/the-luap/picpeak/commit/c4f16eb76c909158abdb63aa4cc22f817f274dc5))
+* handle null dates in dashboard and gallery pages ([c5a8ffc](https://github.com/the-luap/picpeak/commit/c5a8ffc08cd4c53c37fe4fb9cde8519a68f1f343))
+* hero header state and preview in admin theme editor ([#158](https://github.com/the-luap/picpeak/issues/158)) ([f554f46](https://github.com/the-luap/picpeak/commit/f554f463b3492346dba067c0980b52ef42dd5e70))
+* improve ghost button visibility in admin dark mode ([4912e2b](https://github.com/the-luap/picpeak/commit/4912e2bccf282134d5598a8ac80942ed46d0523c))
+* improve password validation errors and event list UX ([#170](https://github.com/the-luap/picpeak/issues/170), [#171](https://github.com/the-luap/picpeak/issues/171)) ([171abb3](https://github.com/the-luap/picpeak/commit/171abb31615484d77cf95a99cb5634afa0160adc))
+* improve photo serving, category filters, and upload chunking ([#155](https://github.com/the-luap/picpeak/issues/155), [#156](https://github.com/the-luap/picpeak/issues/156), [#161](https://github.com/the-luap/picpeak/issues/161)) ([fa4c838](https://github.com/the-luap/picpeak/commit/fa4c83812d87cfa63394e51186e320a072929d37))
+* increase upload limit to 1GB and fix category filters ([#155](https://github.com/the-luap/picpeak/issues/155), [#156](https://github.com/the-luap/picpeak/issues/156)) ([397d33a](https://github.com/the-luap/picpeak/commit/397d33a95a09e0b0986c3f6cf5965c544992a764))
+* mobile upload button not visible in gallery ([#113](https://github.com/the-luap/picpeak/issues/113)) ([cacaffa](https://github.com/the-luap/picpeak/commit/cacaffa5c39f67105c4cfb092ea62157121fb72e))
+* mobile upload button visibility in gallery ([2a2c23d](https://github.com/the-luap/picpeak/commit/2a2c23d11610e6c81684163eb4ea934a6d6104fb)), closes [#113](https://github.com/the-luap/picpeak/issues/113)
+* mobile upload button visibility in gallery ([df7dbff](https://github.com/the-luap/picpeak/commit/df7dbffbffb180e62af0d2b58326f9de0f515439)), closes [#113](https://github.com/the-luap/picpeak/issues/113)
+* mobile upload button visibility in gallery ([#113](https://github.com/the-luap/picpeak/issues/113)) ([05a5307](https://github.com/the-luap/picpeak/commit/05a5307e22dc45be4b75b2996ff9fac65dec399d))
+* mobile upload button visibility in gallery ([#113](https://github.com/the-luap/picpeak/issues/113)) ([6cb4342](https://github.com/the-luap/picpeak/commit/6cb43428d1e703267edeacda9ede050a8c4f8e0c))
+* remove non-functional watermark toggle from Feature Toggles ([d4a15db](https://github.com/the-luap/picpeak/commit/d4a15dbe74d0d70bbe6ff03362dc7337fb8f4c5c))
+* render minimal/none header styles, cap hero height, switch category hero images ([#158](https://github.com/the-luap/picpeak/issues/158), [#162](https://github.com/the-luap/picpeak/issues/162), [#163](https://github.com/the-luap/picpeak/issues/163)) ([bc6c48b](https://github.com/the-luap/picpeak/commit/bc6c48bb2429505c2de3641693a8ff4f623a4951))
+* resend gallery email fails for events without password ([6b3ead7](https://github.com/the-luap/picpeak/commit/6b3ead747b1395d8ea2b3d135a5ac24db05e2eb8)), closes [#137](https://github.com/the-luap/picpeak/issues/137)
+* resolve admin invitation flow issues and improve STORAGE_PATH documentation ([41bf6ff](https://github.com/the-luap/picpeak/commit/41bf6ff884d5ef3181f95f3aa4a528434c23947a))
+* resolve code quality issues and add missing i18n keys ([#162](https://github.com/the-luap/picpeak/issues/162), [#163](https://github.com/the-luap/picpeak/issues/163)) ([329d224](https://github.com/the-luap/picpeak/commit/329d224846d3f4eefa31e42337f34047c267d578))
+* resolve mixed light/dark mode styling in admin UI ([#175](https://github.com/the-luap/picpeak/issues/175)) ([f8c8abd](https://github.com/the-luap/picpeak/commit/f8c8abd70bbae35d6cd519894624ade33b5115a8))
+* restore aspect-ratio layouts and improve hero image quality ([#180](https://github.com/the-luap/picpeak/issues/180)) ([3974ba5](https://github.com/the-luap/picpeak/commit/3974ba5de5a6605ad906608d3e4d61620a215059))
+* restore aspect-ratio layouts and improve hero image quality ([#180](https://github.com/the-luap/picpeak/issues/180)) ([5cef7fd](https://github.com/the-luap/picpeak/commit/5cef7fdd188389512bc4b55ae61536c8b1219eb8))
+* show upload button in mobile topbar instead of sidebar ([ae181cf](https://github.com/the-luap/picpeak/commit/ae181cf92fc9c1e85cad7a7b843a4d83cec636ac)), closes [#113](https://github.com/the-luap/picpeak/issues/113)
+* sync header_style DB column with theme editor selections ([#158](https://github.com/the-luap/picpeak/issues/158)) ([2288309](https://github.com/the-luap/picpeak/commit/228830939553fd32c250704bb89a8ce233324d25))
+* sync header_style DB column with theme editor selections ([#158](https://github.com/the-luap/picpeak/issues/158)) ([a19e7c4](https://github.com/the-luap/picpeak/commit/a19e7c40a200ff822c947a83349ed07ccf4e1b01))
+* update docker-compose to docker compose and add ADMIN_PASSWORD to .env.example ([#189](https://github.com/the-luap/picpeak/issues/189)) ([a4c6248](https://github.com/the-luap/picpeak/commit/a4c624802b2926a16adcf0472a3041562f9b2f48))
+* update packages to fix security vulnerabilities ([8097a0c](https://github.com/the-luap/picpeak/commit/8097a0cb530bd8003597cde81606231efadb0bf5))
+* use actual photo aspect ratios in masonry columns mode ([#146](https://github.com/the-luap/picpeak/issues/146)) ([8711f96](https://github.com/the-luap/picpeak/commit/8711f967a15f5d57f6ad01bfdbd8d33f9ee96abc))
+* use CSS Columns for gap-free mosaic layout ([#146](https://github.com/the-luap/picpeak/issues/146)) ([821d329](https://github.com/the-luap/picpeak/commit/821d3296ea4b6bde499e5497d258f15ab8dd1dbc))
+* use photo dimensions for mosaic aspect ratios ([#146](https://github.com/the-luap/picpeak/issues/146)) ([27ff51e](https://github.com/the-luap/picpeak/commit/27ff51e7a1217848859b47940bc88caa6f1fb20f))
+
+
+### Documentation
+
+* add API_URL environment variable to .env.example files ([3e69579](https://github.com/the-luap/picpeak/commit/3e69579f5a171b31a253b2a42bb033bf1b97387d))
+* emphasize importance of STORAGE_PATH in env example ([3397807](https://github.com/the-luap/picpeak/commit/3397807670784e02cbe34a7a60db43c95d64f19c))
+* resolve issues [#194](https://github.com/the-luap/picpeak/issues/194), [#195](https://github.com/the-luap/picpeak/issues/195), [#196](https://github.com/the-luap/picpeak/issues/196), [#197](https://github.com/the-luap/picpeak/issues/197) ([5ea4ef3](https://github.com/the-luap/picpeak/commit/5ea4ef3cf36b06f9e6c9108f80bfe2e9a6470898))
+* resolve issues [#194](https://github.com/the-luap/picpeak/issues/194), [#195](https://github.com/the-luap/picpeak/issues/195), [#196](https://github.com/the-luap/picpeak/issues/196), [#197](https://github.com/the-luap/picpeak/issues/197) ([cd00bc1](https://github.com/the-luap/picpeak/commit/cd00bc13d4e02a86a0f1742ed1f11f064614b8da))
+
+## [3.15.1-beta.0](https://github.com/the-luap/picpeak/compare/v3.15.0-beta.0...v3.15.1-beta.0) (2026-02-21)
+
+
+### Bug Fixes
+
+* docker compose v2 syntax and add missing ADMIN_PASSWORD to .env.example ([#189](https://github.com/the-luap/picpeak/issues/189)) ([0817443](https://github.com/the-luap/picpeak/commit/0817443e793e37c770c6a1968ecae4b9464107b0))
+* update docker-compose to docker compose and add ADMIN_PASSWORD to .env.example ([#189](https://github.com/the-luap/picpeak/issues/189)) ([a4c6248](https://github.com/the-luap/picpeak/commit/a4c624802b2926a16adcf0472a3041562f9b2f48))
+
+## [3.15.0-beta.0](https://github.com/the-luap/picpeak/compare/v3.14.0-beta.0...v3.15.0-beta.0) (2026-02-17)
+
+
+### Features
+
+* original filename in admin UI, update dialog, security hardening, and bug fixes ([bcf2745](https://github.com/the-luap/picpeak/commit/bcf2745ab64acb968ae4bd0710b28e78c14f340c))
+
+
+### Bug Fixes
+
+* events without expiration date incorrectly shown as expired ([c4f16eb](https://github.com/the-luap/picpeak/commit/c4f16eb76c909158abdb63aa4cc22f817f274dc5))
+
+## [3.14.0-beta.0](https://github.com/the-luap/picpeak/compare/v3.13.1-beta.0...v3.14.0-beta.0) (2026-02-17)
+
+
+### Features
+
+* add update instructions dialog, email notifications, and capture date sorting ([50c0990](https://github.com/the-luap/picpeak/commit/50c09904a9434f988ab32a07da5d24db0e02065e)), closes [#181](https://github.com/the-luap/picpeak/issues/181)
+* original filename in admin UI, update dialog, and security hardening ([3ea9d5b](https://github.com/the-luap/picpeak/commit/3ea9d5b1219980032cbee7a2564c0004948923f5))
+* show original filename in admin UI ([#184](https://github.com/the-luap/picpeak/issues/184)) ([0891be1](https://github.com/the-luap/picpeak/commit/0891be197fdb7d92ade5a293b8db0bed26fa6e3a))
+
+## [3.13.1-beta.0](https://github.com/the-luap/picpeak/compare/v3.13.0-beta.0...v3.13.1-beta.0) (2026-02-15)
+
+
+### Bug Fixes
+
+* restore aspect-ratio layouts and improve hero image quality ([#180](https://github.com/the-luap/picpeak/issues/180)) ([3974ba5](https://github.com/the-luap/picpeak/commit/3974ba5de5a6605ad906608d3e4d61620a215059))
+* restore aspect-ratio layouts and improve hero image quality ([#180](https://github.com/the-luap/picpeak/issues/180)) ([5cef7fd](https://github.com/the-luap/picpeak/commit/5cef7fdd188389512bc4b55ae61536c8b1219eb8))
+
+## [3.13.0-beta.0](https://github.com/the-luap/picpeak/compare/v3.12.0-beta.0...v3.13.0-beta.0) (2026-02-06)
+
+
+### Features
+
+* improve hero image UX and live preview ([#163](https://github.com/the-luap/picpeak/issues/163), [#158](https://github.com/the-luap/picpeak/issues/158)) ([d63f67a](https://github.com/the-luap/picpeak/commit/d63f67a2afba1b92610382aa1012428ccacb86bd))
+
+## [3.12.0-beta.0](https://github.com/the-luap/picpeak/compare/v3.11.0-beta.0...v3.12.0-beta.0) (2026-02-06)
+
+
+### Features
+
+* add admin dark mode and SEO/robots.txt settings ([9c2a0d2](https://github.com/the-luap/picpeak/commit/9c2a0d272a21dfcace2ec795034e2f1adcba47e0))
+
+
+### Bug Fixes
+
+* improve ghost button visibility in admin dark mode ([4912e2b](https://github.com/the-luap/picpeak/commit/4912e2bccf282134d5598a8ac80942ed46d0523c))
+* resolve mixed light/dark mode styling in admin UI ([#175](https://github.com/the-luap/picpeak/issues/175)) ([f8c8abd](https://github.com/the-luap/picpeak/commit/f8c8abd70bbae35d6cd519894624ade33b5115a8))
+
+## [3.11.0-beta.0](https://github.com/the-luap/picpeak/compare/v3.10.1-beta.0...v3.11.0-beta.0) (2026-02-06)
+
+
+### Features
+
+* add Gallery Premium and Gallery Story layouts (Beta) ([e179def](https://github.com/the-luap/picpeak/commit/e179def3cceefe5fd6acd5574f2986e4f9e223ef))
+* gallery layouts, hero customization, event types, and UX improvements ([#146](https://github.com/the-luap/picpeak/issues/146), [#155](https://github.com/the-luap/picpeak/issues/155)-163, [#170](https://github.com/the-luap/picpeak/issues/170), [#171](https://github.com/the-luap/picpeak/issues/171)) ([4280444](https://github.com/the-luap/picpeak/commit/4280444d70e73db09e67e18ce25bac75cf499b75))
+
+
+### Bug Fixes
+
+* improve password validation errors and event list UX ([#170](https://github.com/the-luap/picpeak/issues/170), [#171](https://github.com/the-luap/picpeak/issues/171)) ([171abb3](https://github.com/the-luap/picpeak/commit/171abb31615484d77cf95a99cb5634afa0160adc))
+* render minimal/none header styles, cap hero height, switch category hero images ([#158](https://github.com/the-luap/picpeak/issues/158), [#162](https://github.com/the-luap/picpeak/issues/162), [#163](https://github.com/the-luap/picpeak/issues/163)) ([bc6c48b](https://github.com/the-luap/picpeak/commit/bc6c48bb2429505c2de3641693a8ff4f623a4951))
+
+## [3.10.1-beta.0](https://github.com/the-luap/picpeak/compare/v3.10.0-beta.0...v3.10.1-beta.0) (2026-02-03)
+
+
+### Bug Fixes
+
+* sync header_style DB column with theme editor selections ([#158](https://github.com/the-luap/picpeak/issues/158)) ([2288309](https://github.com/the-luap/picpeak/commit/228830939553fd32c250704bb89a8ce233324d25))
+* sync header_style DB column with theme editor selections ([#158](https://github.com/the-luap/picpeak/issues/158)) ([a19e7c4](https://github.com/the-luap/picpeak/commit/a19e7c40a200ff822c947a83349ed07ccf4e1b01))
+
+## [3.10.0-beta.0](https://github.com/the-luap/picpeak/compare/v3.9.0-beta.0...v3.10.0-beta.0) (2026-02-03)
+
+
+### Features
+
+* add category hero/cover photo selection ([#163](https://github.com/the-luap/picpeak/issues/163)) ([6c30e2c](https://github.com/the-luap/picpeak/commit/6c30e2c2edd19a24d4f30a9558690bb7e2331b32))
+* add hero image focal point picker with anchor positioning ([#162](https://github.com/the-luap/picpeak/issues/162)) ([734868a](https://github.com/the-luap/picpeak/commit/734868abc23731b0ac9ad73e799194df1e6aa6ab))
+* gallery layouts, hero customization, bulk categories & event types ([d9e00dc](https://github.com/the-luap/picpeak/commit/d9e00dc0dbd7cef0ddb4665e5306c98aac3573e3))
+
+
+### Bug Fixes
+
+* hero header state and preview in admin theme editor ([#158](https://github.com/the-luap/picpeak/issues/158)) ([f554f46](https://github.com/the-luap/picpeak/commit/f554f463b3492346dba067c0980b52ef42dd5e70))
+* improve photo serving, category filters, and upload chunking ([#155](https://github.com/the-luap/picpeak/issues/155), [#156](https://github.com/the-luap/picpeak/issues/156), [#161](https://github.com/the-luap/picpeak/issues/161)) ([fa4c838](https://github.com/the-luap/picpeak/commit/fa4c83812d87cfa63394e51186e320a072929d37))
+* resolve code quality issues and add missing i18n keys ([#162](https://github.com/the-luap/picpeak/issues/162), [#163](https://github.com/the-luap/picpeak/issues/163)) ([329d224](https://github.com/the-luap/picpeak/commit/329d224846d3f4eefa31e42337f34047c267d578))
+
+## [3.9.0-beta.0](https://github.com/the-luap/picpeak/compare/v3.8.0-beta.0...v3.9.0-beta.0) (2026-02-01)
+
+
+### Features
+
+* add bulk category editing for photos ([#157](https://github.com/the-luap/picpeak/issues/157)) ([eca36c7](https://github.com/the-luap/picpeak/commit/eca36c70a23f18f937a9f5bddeff855e18f364c3))
+* decouple hero header from gallery layouts ([#158](https://github.com/the-luap/picpeak/issues/158)) ([7b8d8bd](https://github.com/the-luap/picpeak/commit/7b8d8bd92ba7a96717bb4d821b38dddc395f701a))
+* gallery layouts, bulk category editing, and hero header improvements ([7037106](https://github.com/the-luap/picpeak/commit/7037106bff62593bba600d898a781f79f07b459d))
+
+
+### Bug Fixes
+
+* increase upload limit to 1GB and fix category filters ([#155](https://github.com/the-luap/picpeak/issues/155), [#156](https://github.com/the-luap/picpeak/issues/156)) ([397d33a](https://github.com/the-luap/picpeak/commit/397d33a95a09e0b0986c3f6cf5965c544992a764))
+
+## [3.8.0-beta.0](https://github.com/the-luap/picpeak/compare/v3.7.0-beta.0...v3.8.0-beta.0) (2026-01-30)
+
+
+### Features
+
+* add quilted layout, fix mosaic, and backfill photo dimensions ([#146](https://github.com/the-luap/picpeak/issues/146)) ([46ed1bc](https://github.com/the-luap/picpeak/commit/46ed1bc276867a25b27bf22cd9b9d7e879a6947b))
+* improve gallery layouts with aspect-ratio-aware masonry and mosaic modes ([#146](https://github.com/the-luap/picpeak/issues/146)) ([aacfcd5](https://github.com/the-luap/picpeak/commit/aacfcd517ea5739e834cf84627b55b3449740a5c))
+
+
+### Bug Fixes
+
+* use actual photo aspect ratios in masonry columns mode ([#146](https://github.com/the-luap/picpeak/issues/146)) ([8711f96](https://github.com/the-luap/picpeak/commit/8711f967a15f5d57f6ad01bfdbd8d33f9ee96abc))
+* use CSS Columns for gap-free mosaic layout ([#146](https://github.com/the-luap/picpeak/issues/146)) ([821d329](https://github.com/the-luap/picpeak/commit/821d3296ea4b6bde499e5497d258f15ab8dd1dbc))
+* use photo dimensions for mosaic aspect ratios ([#146](https://github.com/the-luap/picpeak/issues/146)) ([27ff51e](https://github.com/the-luap/picpeak/commit/27ff51e7a1217848859b47940bc88caa6f1fb20f))
+
+## [3.7.0-beta.0](https://github.com/the-luap/picpeak/compare/v3.6.0-beta.0...v3.7.0-beta.0) (2026-01-28)
+
+
+### Features
+
+* add justified layout modes and aspect-ratio-aware mosaic ([#146](https://github.com/the-luap/picpeak/issues/146)) ([608bbd5](https://github.com/the-luap/picpeak/commit/608bbd50e7b31d49c7516a00e96f284fa16e2777))
+* Add justified layout modes and aspect-ratio-aware mosaic ([#146](https://github.com/the-luap/picpeak/issues/146)) ([ef2ae00](https://github.com/the-luap/picpeak/commit/ef2ae00ff20b754c2f2ed797e18c146d12d7f31a))
+
+## [3.6.0-beta.0](https://github.com/the-luap/picpeak/compare/v3.5.0-beta.0...v3.6.0-beta.0) (2026-01-27)
+
+
+### Features
+
+* add justified/rows layout mode to masonry gallery ([#146](https://github.com/the-luap/picpeak/issues/146)) ([e081b56](https://github.com/the-luap/picpeak/commit/e081b56a44bf9fdaa3dd225d5dd4dde35bfe83d3))
+* add justified/rows layout mode to masonry gallery ([#146](https://github.com/the-luap/picpeak/issues/146)) + security fixes ([cd1d504](https://github.com/the-luap/picpeak/commit/cd1d50474f673b759c2f9401fdbe209a84773e39))
+
+
+### Bug Fixes
+
+* update packages to fix security vulnerabilities ([8097a0c](https://github.com/the-luap/picpeak/commit/8097a0cb530bd8003597cde81606231efadb0bf5))
+
+## [3.5.0-beta.0](https://github.com/the-luap/picpeak/compare/v3.4.0-beta.0...v3.5.0-beta.0) (2026-01-25)
+
+
+### Features
+
+* add per-event custom logo upload with bug fixes ([85170b8](https://github.com/the-luap/picpeak/commit/85170b883f504d83f1d862abb3f4e46741074826))
+* per-event custom logos, customizable event types, and multiple bug fixes ([4c08160](https://github.com/the-luap/picpeak/commit/4c081601e02888d7ad289acb7847aee9d6f5703f))
+
+## [3.4.0-beta.0](https://github.com/the-luap/picpeak/compare/v3.3.0-beta.0...v3.4.0-beta.0) (2026-01-22)
+
+
+### Features
+
+* add customizable event types with admin management ([f8881d5](https://github.com/the-luap/picpeak/commit/f8881d5bd62d449fb40917ec8c20f0eb16c1fdad))
+* add per-event hero logo customization options ([0790a1d](https://github.com/the-luap/picpeak/commit/0790a1ddad774af89827a0a392e9fae0a945bff2))
+* new features and bug fixes for beta release ([151e1bf](https://github.com/the-luap/picpeak/commit/151e1bf50f206ae0571fa044c75b8bc9f0f40120))
+
+
+### Bug Fixes
+
+* event-specific custom CSS settings not being saved ([dadef81](https://github.com/the-luap/picpeak/commit/dadef81158972d28aa32812203500f77ed08a999)), closes [#136](https://github.com/the-luap/picpeak/issues/136)
+* handle null dates in dashboard and gallery pages ([c5a8ffc](https://github.com/the-luap/picpeak/commit/c5a8ffc08cd4c53c37fe4fb9cde8519a68f1f343))
+* remove non-functional watermark toggle from Feature Toggles ([d4a15db](https://github.com/the-luap/picpeak/commit/d4a15dbe74d0d70bbe6ff03362dc7337fb8f4c5c))
+* resend gallery email fails for events without password ([6b3ead7](https://github.com/the-luap/picpeak/commit/6b3ead747b1395d8ea2b3d135a5ac24db05e2eb8)), closes [#137](https://github.com/the-luap/picpeak/issues/137)
+
+## [3.3.0-beta.0](https://github.com/the-luap/picpeak/compare/v3.2.5-beta.0...v3.3.0-beta.0) (2026-01-21)
+
+
+### Features
+
+* add original filename preservation and Lightroom export support ([a59f414](https://github.com/the-luap/picpeak/commit/a59f41463f960a3a74ce3933dc7db84ee3a2018d))
+* add original filename preservation and Lightroom export support ([9872ad3](https://github.com/the-luap/picpeak/commit/9872ad3aef6488b359c5499a6dc3d8bfbfa48fde))
+
+## [3.2.5-beta.0](https://github.com/the-luap/picpeak/compare/v3.2.4-beta.0...v3.2.5-beta.0) (2026-01-18)
+
+
+### Bug Fixes
+
+* add STORAGE_PATH to production docker-compose ([cdda709](https://github.com/the-luap/picpeak/commit/cdda70988664a177b351abc6a259ec39664d17ff))
+* correct invitation activation validation and add missing translations ([991aa98](https://github.com/the-luap/picpeak/commit/991aa98f98cffd1d7785c272726615325e2c0208)), closes [#129](https://github.com/the-luap/picpeak/issues/129)
+* correct invitation email link URL path ([86fa104](https://github.com/the-luap/picpeak/commit/86fa1046d5439cb451feb164175c919c49ca219a)), closes [#129](https://github.com/the-luap/picpeak/issues/129)
+* resolve admin invitation flow issues and improve STORAGE_PATH documentation ([41bf6ff](https://github.com/the-luap/picpeak/commit/41bf6ff884d5ef3181f95f3aa4a528434c23947a))
+
+
+### Documentation
+
+* emphasize importance of STORAGE_PATH in env example ([3397807](https://github.com/the-luap/picpeak/commit/3397807670784e02cbe34a7a60db43c95d64f19c))
+
+## [3.2.4-beta.0](https://github.com/the-luap/picpeak/compare/v3.2.3-beta.0...v3.2.4-beta.0) (2026-01-17)
+
+
+### Bug Fixes
+
+* correct storage path resolution in multiple files ([#96](https://github.com/the-luap/picpeak/issues/96)) ([0e3674b](https://github.com/the-luap/picpeak/commit/0e3674b2b0325bbcee5aa2c9ff7781da92f612d1))
+* correct storage path resolution in multiple files ([#96](https://github.com/the-luap/picpeak/issues/96)) ([3ccb815](https://github.com/the-luap/picpeak/commit/3ccb8154eb40a432aa467fb06b3f216fd0d2c6b4))
+
+## [3.2.3-beta.0](https://github.com/the-luap/picpeak/compare/v3.2.2-beta.0...v3.2.3-beta.0) (2026-01-16)
+
+
+### Bug Fixes
+
+* add allow_user_uploads to gallery API responses ([691e3ab](https://github.com/the-luap/picpeak/commit/691e3aba09f2148afe902a0bb0139d062634e669))
+* mobile upload button not visible in gallery ([#113](https://github.com/the-luap/picpeak/issues/113)) ([cacaffa](https://github.com/the-luap/picpeak/commit/cacaffa5c39f67105c4cfb092ea62157121fb72e))
+
+## [3.2.2-beta.0](https://github.com/the-luap/picpeak/compare/v3.2.1-beta.0...v3.2.2-beta.0) (2026-01-16)
+
+
+### Bug Fixes
+
+* mobile upload button visibility in gallery ([2a2c23d](https://github.com/the-luap/picpeak/commit/2a2c23d11610e6c81684163eb4ea934a6d6104fb)), closes [#113](https://github.com/the-luap/picpeak/issues/113)
+* mobile upload button visibility in gallery ([#113](https://github.com/the-luap/picpeak/issues/113)) ([05a5307](https://github.com/the-luap/picpeak/commit/05a5307e22dc45be4b75b2996ff9fac65dec399d))
+
+## [3.2.1-beta.0](https://github.com/the-luap/picpeak/compare/v3.2.0-beta.0...v3.2.1-beta.0) (2026-01-16)
+
+
+### Bug Fixes
+
+* mobile upload button visibility in gallery ([df7dbff](https://github.com/the-luap/picpeak/commit/df7dbffbffb180e62af0d2b58326f9de0f515439)), closes [#113](https://github.com/the-luap/picpeak/issues/113)
+* mobile upload button visibility in gallery ([#113](https://github.com/the-luap/picpeak/issues/113)) ([6cb4342](https://github.com/the-luap/picpeak/commit/6cb43428d1e703267edeacda9ede050a8c4f8e0c))
+
+## [3.2.0-beta.0](https://github.com/the-luap/picpeak/compare/v3.1.0-beta.0...v3.2.0-beta.0) (2026-01-16)
+
+
+### Features
+
+* add optional event date and expiration settings ([3079eaa](https://github.com/the-luap/picpeak/commit/3079eaa2e5d1728c2c0f315626cc253e4b08edc2))
+* add optional event date and expiration settings ([2151147](https://github.com/the-luap/picpeak/commit/2151147f2d3134448ff32130da44678e2942d73c)), closes [#118](https://github.com/the-luap/picpeak/issues/118)
+
+
+### Bug Fixes
+
+* checkbox and toggle settings not persisting after page refresh ([808ed1d](https://github.com/the-luap/picpeak/commit/808ed1d2f1164d9fd1114586c68a1f925bf73ddf)), closes [#117](https://github.com/the-luap/picpeak/issues/117)
+
+
+### Documentation
+
+* add API_URL environment variable to .env.example files ([3e69579](https://github.com/the-luap/picpeak/commit/3e69579f5a171b31a253b2a42bb033bf1b97387d))
+
+## [3.1.0-beta.0](https://github.com/the-luap/picpeak/compare/v3.0.1-beta.0...v3.1.0-beta.0) (2026-01-15)
+
+
+### Features
+
+* dynamic website title from branding settings ([d29aab7](https://github.com/the-luap/picpeak/commit/d29aab7c70c5777451666fb7d5c7a9729dab684a))
+* pre-generate watermarks for instant lightbox loading ([1be974a](https://github.com/the-luap/picpeak/commit/1be974afbb0b7a1bdbdd140327771907a5d3c2ae)), closes [#112](https://github.com/the-luap/picpeak/issues/112)
+* pre-generated watermarks and mobile upload button improvements ([c6fdd38](https://github.com/the-luap/picpeak/commit/c6fdd38e842e1a8c0aa9cbab9fc791e6669e402d))
+
+
+### Bug Fixes
+
+* add lightbox loading spinner and watermark cache invalidation ([050ed37](https://github.com/the-luap/picpeak/commit/050ed378199eb3b15c7c7f243792f68f858803f5))
+* lightbox watermark loading, white label translations, and dynamic footer year ([ce8587b](https://github.com/the-luap/picpeak/commit/ce8587b24df3f53a11a74348eff8b5c5b96c5488))
+* prevent database migration restart failures ([83a4344](https://github.com/the-luap/picpeak/commit/83a4344a01de4f65c5024fdf2d177a04457ccd2f)), closes [#107](https://github.com/the-luap/picpeak/issues/107)
+* show upload button in mobile topbar instead of sidebar ([ae181cf](https://github.com/the-luap/picpeak/commit/ae181cf92fc9c1e85cad7a7b843a4d83cec636ac)), closes [#113](https://github.com/the-luap/picpeak/issues/113)
+* watermark thumbnails, custom logo display, and German translations ([ea20446](https://github.com/the-luap/picpeak/commit/ea20446a797a00cf45dbe7bf6f06574a79c4d8a6))
+
+## [3.0.1-beta.0](https://github.com/the-luap/picpeak/compare/v3.0.0-beta.0...v3.0.1-beta.0) (2026-01-15)
+
+
+### Bug Fixes
+
+* CI workflow fixes for protected branches ([cb01218](https://github.com/the-luap/picpeak/commit/cb012186d93403a1ac4e2d2f5283319603b290d6))
+* lightbox watermark loading, white label translations, and dynamic footer year ([3b720ed](https://github.com/the-luap/picpeak/commit/3b720ed56ecd2ded6aec57309f8c408c63a617ef))
+* lightbox watermark loading, white label translations, and dynamic footer year ([ce8587b](https://github.com/the-luap/picpeak/commit/ce8587b24df3f53a11a74348eff8b5c5b96c5488))
+* lightbox watermark loading, white label translations, and dynamic footer year ([#108](https://github.com/the-luap/picpeak/issues/108)) ([3b720ed](https://github.com/the-luap/picpeak/commit/3b720ed56ecd2ded6aec57309f8c408c63a617ef))
+
 ## [2.3.2](https://github.com/the-luap/picpeak/compare/v2.3.1...v2.3.2) (2026-01-15)


@@ -11,7 +11,7 @@ This guide covers multiple deployment options for PicPeak, from simple local set
 - [First Login](#-first-login)
 - [Release Channels](#-release-channels)
 - [Reverse Proxy Setup](#-reverse-proxy-setup)
- [External Media Library](#external-media-library)
+- [External Media Library](#-external-media-library)
 - [Maintenance](#-maintenance)
 - [Troubleshooting](#-troubleshooting)

@@ -552,6 +552,95 @@ sudo certbot certonly --webroot -w /var/www/certbot -d your-domain.com
 # Or use your reverse proxy's built-in ACME support
 ```

+## 📂 External Media Library
+
+The External Media Library allows events to reference photos stored directly on your host filesystem instead of uploading them through the admin UI. This is useful for photographers who already have organized photo libraries and want to share them without re-uploading.
+
+### How It Works
+
+- **Managed mode** (default): Photos are uploaded through the admin UI and stored inside PicPeak's storage directory.
+- **Reference mode**: Photos remain on your host filesystem. PicPeak reads them directly and generates thumbnails on demand.
+
+Each event can use either mode. Reference mode events point to a folder under the configured external media root.
+
+### Configuration
+
+Add the following to your `.env` file:
+
+```bash
+# Path where your photo library is stored on the host
+EXTERNAL_MEDIA_ROOT=/path/to/your/photos
+```
+
+Then mount this path into the backend container in your `docker-compose.yml` or `docker-compose.production.yml`:
+
+```yaml
+services:
+  backend:
+    environment:
+      - EXTERNAL_MEDIA_ROOT=/external-media
+    volumes:
+      - /path/to/your/photos:/external-media:ro  # read-only is recommended
+```
+
+> **Permissions**: Ensure the container user (`PUID`/`PGID`) has read access to the mounted directory. If thumbnails fail to generate, this is usually a permissions issue.
+
+### Folder Structure
+
+Organize your photos with subdirectories for each event. Within each event folder, use `individual/` and `collages/` subdirectories to classify photos:
+
+```
+/path/to/your/photos/
+├── wedding-smith-2026/
+│   ├── individual/
+│   │   ├── IMG_0001.jpg
+│   │   ├── IMG_0002.jpg
+│   │   └── ...
+│   └── collages/
+│       ├── group-photo.jpg
+│       └── ...
+├── corporate-event/
+│   ├── individual/
+│   │   └── ...
+│   └── collages/
+│       └── ...
+```
+
+Supported file formats: `.jpg`, `.jpeg`, `.png`, `.webp`
+
+### Usage
+
+1. **Create an event** in the admin panel as usual (name, date, email, etc.).
+
+2. **Switch source mode** to "Reference external folder" in the event details under Source Mode.
+
+3. **Browse and select** the external folder using the folder picker that appears. Navigate to the event's directory.
+
+4. **Import photos** by clicking "Import from External Folder" in the Photos tab. PicPeak will:
+   - Recursively scan the selected folder
+   - Classify photos by subfolder name (`individual/` or `collages/`)
+   - Deduplicate by filename (keeps the largest file if duplicates exist)
+   - Extract image dimensions for gallery layout
+   - Register the photos in the database
+
+5. **Thumbnails** are generated on demand when a guest first views the gallery. There is no upfront processing delay.
+
+### Limitations
+
+- **Images only** — video files are not supported for external media.
+- **Read-only** — PicPeak does not modify or delete files in the external media directory.
+- **No automatic sync** — If you add new photos to the external folder, you need to re-import from the admin UI.
+- **Backup caveat** — External media originals are excluded from PicPeak's built-in backup system. Only thumbnails and database records are backed up. You are responsible for backing up the source files separately.
+
+### Troubleshooting
+
+| Problem | Solution |
+|---------|----------|
+| Folder picker shows empty directory | Check that the volume is mounted correctly and `EXTERNAL_MEDIA_ROOT` matches the container path |
+| "Permission denied" errors | Ensure `PUID`/`PGID` in `.env` match the owner of the external media files on the host |
+| Thumbnails not generating | Verify the backend container can read the files: `docker exec picpeak-backend ls /external-media/your-folder/` |
+| Import finds 0 photos | Only `.jpg`, `.jpeg`, `.png`, `.webp` files are supported. Check file extensions. |
+
 ## 🔧 Maintenance

 ### Viewing Logs
@@ -1,333 +1,142 @@
-# 📸 PicPeak - Open Source Photo Sharing for Events
+# PicPeak

 <div align="center">
  <img src="docs/picpeak-logo.png" alt="PicPeak Logo" width="300" />
-  
+
+  **Self-hosted photo sharing for event photographers.**
+
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
  [![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=flat&logo=docker&logoColor=white)](https://www.docker.com/)
  [![Node.js](https://img.shields.io/badge/node.js-6DA55F?style=flat&logo=node.js&logoColor=white)](https://nodejs.org/)
  [![React](https://img.shields.io/badge/react-%2320232a.svg?style=flat&logo=react&logoColor=%2361DAFB)](https://reactjs.org/)
+
+  [Live Demo](https://demo.picpeak.app) · [Deployment Guide](DEPLOYMENT_GUIDE.md) · [Homepage](https://www.picpeak.app)
 </div>

-**PicPeak** is a powerful, self-hosted open-source alternative to commercial photo-sharing platforms like PicDrop.com and Scrapbook.de. Designed specifically for photographers and event organizers, PicPeak makes it simple to share beautiful, time-limited photo galleries with clients while maintaining full control over your data and branding.
+---
+
+PicPeak lets you create password-protected, time-limited photo galleries for your clients — hosted on your own server. No subscriptions, no storage limits, no third-party access to your photos.

 ![PicPeak Gallery Preview](docs/screenshot-gallery.png)

-## 🌟 Why Choose PicPeak?
+## Demo

-Unlike expensive SaaS solutions, PicPeak gives you:
+Try it out at [demo.picpeak.app](https://demo.picpeak.app).

- **💰 No Monthly Fees** - One-time setup, unlimited galleries
- **🔒 Complete Data Control** - Your photos stay on your server
- **🎨 White-Label Ready** - Full branding customization
- **📱 Mobile-First Design** - Beautiful on all devices
- **🚀 Lightning Fast** - Optimized performance and caching
- **🌍 Multi-Language** - Built-in i18n support (EN, DE)
+Admin panel: [demo.picpeak.app/admin](https://demo.picpeak.app/admin) — login with `demo@picpeak.app` / `Demo2026!`

-## ✨ Key Features
+> The demo resets periodically.

-### For Photographers
- 📁 **Drag & Drop Upload** - Simply drop photos into folders
- 🔗 **External Media (Reference Mode)** - Browse and import from a read‑only external folder library without copying originals
- ⏰ **Auto-Expiring Galleries** - Set expiration dates (default: 30 days)
- 🔐 **Password Protection** - Secure client galleries
- 📧 **Automated Emails** - Creation confirmations and expiration warnings
- 📊 **Analytics Dashboard** - Track views, downloads, and engagement
- 🎨 **Custom Themes** - Match your brand perfectly
- 🌐 **Public Landing Page** - Publish a curated marketing page when guests visit your root URL
+## Features

-### For Clients
- 🖼️ **Beautiful Galleries** - Clean, modern interface
- 📱 **Mobile Optimized** - Swipe through photos on any device
- ⬇️ **Bulk Downloads** - Download all photos with one click
- 🔍 **Smart Search** - Find photos quickly
- 📤 **Guest Uploads** - Optional client photo uploads
- 🛡️ **Download Protection** - Advanced image protection with watermarking and right-click prevention
+**Gallery Management** — Create galleries, upload photos via drag & drop, set passwords and expiration dates. Galleries auto-archive when they expire. Events start as drafts so you can upload and prepare before notifying the client.

-### Technical Excellence
- 🐳 **Docker Ready** - Deploy in minutes
- 🔄 **Auto-Processing** - Automatic thumbnail generation
- 🗂️ **Reference Library Support** - Point PicPeak at `EXTERNAL_MEDIA_ROOT` to reference existing originals, index quickly, and generate thumbnails on demand
- 💾 **Smart Storage** - Automatic archiving of expired galleries
- 🛡️ **Security First** - JWT auth, rate limiting, CORS protection
- 📈 **Scalable** - From small studios to large agencies
+**Client Experience** — Responsive galleries that look great on any device. Guests can browse, download individual photos or everything at once. Optional guest uploads and feedback (likes, comments, ratings).

-## 🚀 Quick Start
+**Themes & Branding** — 11 built-in theme presets, custom CSS templates, configurable colors/fonts/layouts. White-label your admin panel and login page with your own logo and company name.

-Get PicPeak running in under 5 minutes:
+**Email Notifications** — Automated gallery creation, expiration warning, and archive emails. Multilingual templates (EN, DE, NL, PT, RU) editable from the admin UI.
+
+**Photo Protection** — Watermarking, right-click prevention, canvas rendering, DevTools detection. Configurable per gallery.
+
+**External Media** — Reference photos from a mounted folder instead of uploading. PicPeak reads originals in place and generates thumbnails on demand.
+
+**Multi-Language** — Full UI translations for English, German, Dutch, Portuguese, and Russian. Email templates support all languages independently.
+
+**Analytics** — Built-in view/download tracking plus optional Umami integration for privacy-focused analytics.
+
+**Video Support** — Upload and stream MP4, WebM, MOV alongside photos. FFmpeg bundled via npm.
+
+**Multiple Admins** — Role-based access control with super admin, admin, and editor roles.
+
+## Quick Start

 ```bash
-# Clone the repository
 git clone https://github.com/the-luap/picpeak.git
 cd picpeak
-
-# Copy environment template
 cp .env.example .env
-
-# Edit configuration (required: JWT_SECRET)
-nano .env
-
-# Start with Docker Compose
-docker-compose up -d
-
-# Access at http://localhost:3005
+# Edit .env — set at least JWT_SECRET and passwords
+docker compose up -d
 ```

-Note on Docker file permissions (PUID/PGID)
- When using bind mounts (e.g., `./storage`, `./data`, `./logs`, `./events`), ensure the container user can write to these host folders. The backend runs as a non‑root user by default.
- Set `PUID` and `PGID` in your `.env` to match your host user’s UID/GID (run `id -u` and `id -g` on the host). Compose maps the container user to these values.
- Example in `.env`:
-  - `PUID=1000`
-  - `PGID=1000`
- Without this, creating events, uploads, thumbnails, or logs can fail with "Permission denied".
+Open `http://localhost:3000` and log in with the credentials from your `.env`.

-## 🔄 Release Channels
+> **Permissions:** Set `PUID` and `PGID` in `.env` to match your host user (`id -u` / `id -g`) so Docker volumes are writable.

-PicPeak offers two release channels for different needs:
+See the [Deployment Guide](DEPLOYMENT_GUIDE.md) for reverse proxy setup, SSL, external media, and production configuration.

-### Stable Channel (Recommended)
- Production-ready releases
- Thoroughly tested before release
- Docker tags: `stable`, `latest`, or specific version like `v2.3.0`
-
-### Beta Channel
- Early access to new features
- May contain bugs or incomplete functionality
- Docker tags: `beta` or specific version like `v2.3.0-beta.1`
-
-### Switching Channels
-
-Set the `PICPEAK_CHANNEL` environment variable in your `.env` file:
-
-```bash
-# For stable releases (default)
-PICPEAK_CHANNEL=stable
-
-# For beta releases
-PICPEAK_CHANNEL=beta
-
-# For a specific version
-PICPEAK_CHANNEL=v2.3.0
-```
-
-Then update your containers:
-
-```bash
-docker-compose -f docker-compose.production.yml pull
-docker-compose -f docker-compose.production.yml up -d
-```
-
-### Update Notifications
-
-The admin dashboard automatically notifies you when updates are available for your channel. To disable update checks, set:
-
-```bash
-UPDATE_CHECK_ENABLED=false
-```
-
-## 📖 Documentation
-
- 📘 [**Deployment Guide**](DEPLOYMENT_GUIDE.md) - Detailed installation instructions
-  - Includes the new [External Media Library](DEPLOYMENT_GUIDE.md#external-media-library) reference mode
- 📚 [**Admin API (OpenAPI)**](docs/picpeak-admin-api.openapi.yaml) - Machine-readable documentation for event automation endpoints
- 🛠️ [**Admin API Quickstart**](docs/admin-api-quickstart.md) - Step-by-step authentication and testing guide for the documented endpoints
- 🤝 [**Contributing**](CONTRIBUTING.md) - How to contribute
- 📜 [**License**](LICENSE) - MIT License
- 🔒 [**Security**](SECURITY.md) - Security policies
- 📋 [**Code of Conduct**](CODE_OF_CONDUCT.md) - Community guidelines
-
-## 🌐 Public Landing Page
-
-Spotlight your studio with a customizable marketing page at `/`:
-
- Head to **Admin → CMS Pages** to enable the public landing page toggle.
- Edit the provided HTML template (rich sections, hero, testimonials) and optional CSS overrides.
- The preview renders in a sandboxed iframe so you can iterate safely before publishing.
- PicPeak sanitizes stored HTML and CSS server-side—scripts, iframes, and unsafe attributes are stripped automatically.
- Use **Reset to default** anytime to restore the bundled template.
- The backend caches the rendered landing page for 60 seconds by default; override with `PUBLIC_SITE_CACHE_TTL_MS` if you need a different TTL.
- When the landing page is disabled PicPeak continues to serve the admin SPA/login exactly as before.
-
-## 🎯 Use Cases
-
-Perfect for:
- 💒 **Wedding Photographers** - Share ceremony photos securely
- 🎂 **Event Photography** - Birthday parties, corporate events
- 📸 **Portrait Studios** - Client galleries with download limits
- 🏢 **Corporate Events** - Internal photo sharing with branding
- 🎓 **School Photography** - Secure parent access with expiration
-
-## 🏗️ Tech Stack
-
- **Backend**: Node.js, Express, SQLite/PostgreSQL
- **Frontend**: React, Tailwind CSS, Framer Motion
- **Storage**: File-based with automatic archiving
- **Email**: SMTP with customizable templates
- **Analytics**: Privacy-focused with Umami integration
-
-## 💻 System Requirements
-
-### Minimum Requirements
- **CPU**: 2 CPU cores
- **RAM**: 2GB minimum
- **Storage**: 20GB minimum (plus photo storage needs)
- **OS**: Linux (Ubuntu 20.04+), macOS, or Windows with WSL2
- **Node.js**: v18.0.0 or higher
- **Database**: SQLite (included) or PostgreSQL 12+
-
-### Docker Requirements (Recommended)
- **Docker**: v20.10.0+
- **Docker Compose**: v2.0.0+
-
-### Video Support Requirements
-When enabling video uploads, consider these additional resources:
-
-| Resource | Recommendation | Notes |
-|----------|----------------|-------|
-| **RAM** | 4GB+ recommended | FFmpeg processing requires more memory |
-| **Storage** | Plan for 10-100x more | Videos are significantly larger than images |
-| **CPU** | Additional cores help | Video thumbnail extraction is CPU-intensive |
-| **Bandwidth** | Higher throughput | Video streaming requires more bandwidth |
-
-**Technical Notes:**
- FFmpeg is bundled via npm (`@ffmpeg-installer/ffmpeg`) - no system installation required
- Maximum upload size: **10GB per video file**
- Chunked upload support for files >100MB (resumable uploads)
- Supported formats: MP4, WebM, MOV, AVI
- Video thumbnails are automatically generated from the first few seconds
-
-**For Nginx/Reverse Proxy:**
-If using Nginx, increase the client max body size:
-```nginx
-client_max_body_size 10G;
-proxy_read_timeout 3600;
-proxy_send_timeout 3600;
-```
-
-## 🤝 Contributing
-
-We love contributions! PicPeak is built by photographers, for photographers. Whether you're fixing bugs, adding features, or improving documentation, your help is welcome.
-
-See our [Contributing Guide](CONTRIBUTING.md) for details.
-
-## 📊 Comparison with Alternatives
-
-| Feature | PicPeak | PicDrop | Scrapbook.de |
-|---------|---------|---------|--------------|
-| Self-Hosted | ✅ | ❌ | ❌ |
-| Custom Branding | ✅ Full | Limited | Limited |
-| Monthly Cost | $0 | $29-199 | €19-99 |
-| Storage Limit | Unlimited* | 50-500GB | 100-1000GB |
-| Client Uploads | ✅ | ✅ | ✅ |
-| API Access | ✅ | Paid | ❌ |
-| Open Source | ✅ | ❌ | ❌ |
-
-*Limited only by your server storage
-
-## 🛡️ Security
-
-PicPeak takes security seriously:
- 🔐 Password hashing with bcrypt
- 🎫 JWT-based authentication
- 🚦 Rate limiting on all endpoints
- 🛡️ CORS protection
- 📝 Activity logging
- 🔒 Secure file access
-
-Found a security issue? Please open a [security issue](https://github.com/the-luap/picpeak/issues/new?labels=security) on GitHub
-
-## 📸 Screenshots
-
-### 🎛️ **Admin Dashboard**
-Get a complete overview of your photo galleries, analytics, and system status.
-
-<img src="docs/screenshot-dashboard.png" alt="PicPeak Admin Dashboard" width="800" />
-
-### 📊 **Analytics & Insights**
-Track gallery performance, view statistics, and monitor user engagement.
-
-<img src="docs/screenshot-analytics.png" alt="PicPeak Analytics Dashboard" width="800" />
-
-### 📁 **Event Management**
-Organize and manage your photo galleries with intuitive event management tools.
-
-<img src="docs/screenshots-events.png" alt="PicPeak Events Management" width="800" />
-
-### ✨ **Key Interface Highlights**
+## Screenshots

 <details>
-<summary>👆 Click to see more interface details</summary>
-
-#### What makes PicPeak's interface special:
-
- **🎨 Clean Design**: Modern, photographer-friendly interface
- **📱 Responsive**: Perfect on desktop, tablet, and mobile
- **⚡ Fast Loading**: Optimized for quick photo browsing
- **🔒 Secure Access**: Password-protected galleries with expiration
- **📤 Easy Uploads**: Drag & drop functionality for effortless photo management
- **🎯 Client-Focused**: Intuitive gallery experience for your clients
+<summary>Admin Dashboard</summary>

+<img src="docs/screenshot-dashboard.png" alt="Admin Dashboard" width="800" />
 </details>

-## 🗺️ Roadmap
+<details>
+<summary>Event Management</summary>

-We're constantly improving PicPeak and welcome contributions from our community! If you have ideas for new features or want to help implement existing ones, please open an issue or submit a pull request. Your contributions help make PicPeak better for everyone.
+<img src="docs/screenshots-events.png" alt="Event Management" width="800" />
+</details>

-### 🚧 Beta Features (Use at your own risk)
+<details>
+<summary>Analytics</summary>

-These features are currently in beta testing and may have limited functionality or stability:
+<img src="docs/screenshot-analytics.png" alt="Analytics" width="800" />
+</details>

-| Feature | Description | Status |
-|---------|-------------|--------|
-| **Simple Deployment Script** | One-click deployment script for quick server setup with automated configuration and dependency installation | 🧪 Beta |
+## Comparison

-### 📋 Future Enhancements
+| | PicPeak | PicDrop | Scrapbook.de |
+|---|---|---|---|
+| Self-hosted | Yes | No | No |
+| Monthly cost | $0 | $29-199 | 19-99 EUR |
+| Storage | Unlimited | 50-500 GB | 100-1000 GB |
+| Custom branding | Full | Limited | Limited |
+| Open source | Yes | No | No |
+| API | Yes | Paid | No |

-| Feature | Description | Priority | Status |
-|---------|-------------|----------|---------|
-| **Backup & Restore** | Comprehensive backup system with S3/MinIO support, automated scheduling, and safe restore functionality | High | ✅ Implemented |
-| **External Media Library (Reference Mode)** | Use an external folder library as a read‑only source with import and on‑demand thumbnail generation | High | ✅ Implemented |
-| **Download Protection** | Advanced image protection system with canvas rendering, invisible watermarking, right-click prevention, and DevTools detection to protect photos from unauthorized downloads | High | ✅ Implemented |
-| **Gallery Templates** | Multiple gallery layouts (grid, masonry, carousel, timeline, hero, mosaic) with custom CSS styling support. Includes starter templates like Apple Liquid Glass for complete visual customization | Medium | ✅ Implemented |
-| **Face Recognition** | AI-powered face detection to help guests find their photos and create automatic person-based albums | Low | 🔄 Open |
-| **Gallery Feedback** | Allow guests to like, rate, and comment on photos with admin notifications and moderation | Medium | ✅ Implemented |
-| **Video Support** | Upload and display videos alongside photos in galleries with streaming support | Low | ✅ Implemented |
-| **Multiple Administrators** | Support for multiple admin accounts with role-based permissions and activity tracking | Low | ✅ Implemented |
-| **Filtering & Export Options** | Filter photos by likes, ratings, comments, or favorites. Search by filename. Sort by date, name, size, or rating. Export filtered selections as ZIP or generate Capture One/Lightroom-compatible file lists for professional workflows | Medium | ✅ Implemented |
+## Tech Stack

-**Status Legend:** ✅ Implemented | 🚧 In Progress | 🔄 Open | 📋 Planned
+- **Backend:** Node.js, Express, PostgreSQL (or SQLite)
+- **Frontend:** React, TypeScript, Tailwind CSS
+- **Infrastructure:** Docker, Nginx, Redis
+- **Processing:** Sharp (images), FFmpeg (video)

-## 🙏 Acknowledgments
+## Release Channels

-PicPeak is inspired by the best features of commercial platforms while remaining completely open source. Special thanks to all contributors who make this project possible.
+**Stable** (`stable` / `latest`) — Production-ready. Use this for real deployments.

-### 🤖 AI-Assisted Development
+**Beta** (`beta`) — Early access to new features. May have rough edges.

-This project was generated with the assistance of AI technology, but has been:
- ✅ **Fully tested end-to-end** by human developers
- 🔒 **Security audited** with comprehensive security checks
- 👨‍💻 **Human-reviewed** for code quality and best practices
- 🧪 **Production-tested** in real-world scenarios
+```bash
+# Set in .env
+PICPEAK_CHANNEL=stable  # or beta

-We believe in transparent development practices and the responsible use of AI as a tool to accelerate development while maintaining high standards of quality and security.
+# Update
+docker compose -f docker-compose.production.yml pull
+docker compose -f docker-compose.production.yml up -d
+```

-## 📄 License
+The admin dashboard notifies you when updates are available.

-PicPeak is released under the [MIT License](LICENSE). Use it freely for personal or commercial projects.
+## Contributing

-## 🚀 Ready to Get Started?
+We welcome contributions — bug fixes, features, translations, documentation. See [CONTRIBUTING.md](CONTRIBUTING.md) for setup instructions.

-1. ⭐ **Star this repository** to show your support
-2. 📖 Read the [Deployment Guide](DEPLOYMENT_GUIDE.md)
-3. 🐛 Report issues or request features
-4. 🤝 Join our community and contribute!
+## Documentation
+
+- [Deployment Guide](DEPLOYMENT_GUIDE.md) — Installation, configuration, reverse proxy, external media
+- [Admin API (OpenAPI)](docs/picpeak-admin-api.openapi.yaml) — Machine-readable API spec
+- [Admin API Quickstart](docs/admin-api-quickstart.md) — Authentication and testing guide
+- [Security Policy](SECURITY.md)
+
+## License
+
+MIT — use it for personal or commercial projects.

 ---

 <p align="center">
-  Made with ❤️ by photographers, for photographers
-  <br>
-  <a href="https://github.com/the-luap/picpeak">GitHub</a> •
-  <a href="DEPLOYMENT_GUIDE.md">Documentation</a> •
-  <a href="https://github.com/the-luap/picpeak/issues">Support</a>
+  <a href="https://www.picpeak.app">Homepage</a> · <a href="https://demo.picpeak.app">Live Demo</a> · <a href="DEPLOYMENT_GUIDE.md">Docs</a> · <a href="https://github.com/the-luap/picpeak/issues">Issues</a>
 </p>
@@ -6,8 +6,8 @@ We release patches for security vulnerabilities. Currently supported versions:

 | Version | Supported          |
 | ------- | ------------------ |
-| 1.x.x   | :white_check_mark: |
-| < 1.0   | :x:                |
+| 2.x.x   | :white_check_mark: |
+| < 2.0   | :x:                |

 ## Reporting a Vulnerability

@@ -15,9 +15,9 @@ We take the security of PicPeak seriously. If you have discovered a security vul

 ### 1. **Do NOT create a public GitHub issue**

-### 2. Report the vulnerability by:
- Opening a [security issue](https://github.com/the-luap/picpeak/issues/new?labels=security) on GitHub
- Mark it clearly as "SECURITY" in the title
+### 2. Report the vulnerability privately by:
+- **Preferred:** Use [GitHub Private Vulnerability Reporting](https://github.com/the-luap/picpeak/security/advisories/new)
+- **Alternative:** Email us at **info@picpeak.app** with the details
 - Include:
  - Description of the vulnerability
  - Steps to reproduce
@@ -82,7 +82,7 @@ We believe in responsible disclosure. Once a vulnerability is fixed:

 ## Contact

- Security issues: [Create a security issue](https://github.com/the-luap/picpeak/issues/new?labels=security) on GitHub
+- Security issues: Email **info@picpeak.app** or use [GitHub Private Vulnerability Reporting](https://github.com/the-luap/picpeak/security/advisories/new)
 - General support: [GitHub Issues](https://github.com/the-luap/picpeak/issues)

 Thank you for helping keep PicPeak and its users safe!
@@ -14,6 +14,11 @@ ADMIN_URL=https://photos.example.com
 FRONTEND_URL=https://photos.example.com
 BACKEND_URL=https://photos.example.com  # Or https://api.photos.example.com if separate

+# API URL for email assets (logos, images in emails)
+# This must be the publicly accessible URL where recipients can load images
+# If not set, defaults to http://localhost:3001 which will break images in production emails
+API_URL=https://photos.example.com/api
+
 # Database Configuration
 DATABASE_CLIENT=pg
 DB_HOST=localhost
@@ -39,6 +44,7 @@ SMTP_PASS=your-sendgrid-api-key
 EMAIL_FROM=noreply@example.com

 # Storage Paths
+# IMPORTANT: STORAGE_PATH must be set to avoid file path resolution issues
 # Docker deployment:
 STORAGE_PATH=/app/storage
 EVENTS_PATH=/app/storage/events
@@ -11,10 +11,6 @@ LABEL org.opencontainers.image.source="https://github.com/the-luap/picpeak"
 LABEL org.opencontainers.image.description="PicPeak Backend Service"
 LABEL org.opencontainers.image.licenses="MIT"

-# Upgrade npm to fix glob CVE-2025-64756 vulnerability
-# Pin to npm 10.x which supports --omit=dev flag
-RUN npm install -g npm@10
-
 WORKDIR /app

 # Copy package files
@@ -31,12 +27,11 @@ FROM node:20-alpine

 WORKDIR /app

-# Upgrade all packages to fix security vulnerabilities (BusyBox CVEs)
+# Upgrade all packages to fix security vulnerabilities (OpenSSL, libexpat, BusyBox CVEs)
 RUN apk upgrade --no-cache

-# Upgrade npm to fix glob CVE-2025-64756 vulnerability
-# Pin to npm 10.x which supports --omit=dev flag
-RUN npm install -g npm@10
+# Upgrade npm to latest to fix tar, minimatch, brace-expansion CVEs in npm's own deps
+RUN npm install -g npm@latest

 # Install dumb-init for proper signal handling and postgresql-client for database checks
 RUN apk add --no-cache dumb-init postgresql-client
@@ -1,6 +1,6 @@
 # Database Migrations

-This directory contains database migrations for the Wedding Photo Sharing platform.
+This directory contains database migrations for the PicPeak photo sharing platform.

 ## Directory Structure

@@ -9,6 +9,7 @@ Essential migrations that are always run for new deployments. These include:
 - `init.js` - Initial database schema creation
 - Backup service tables (029-035)
 - Gallery feedback tables (033)
+- Pre-generated watermarks (061)

 ### `/legacy`
 Migrations needed only when upgrading from older versions. New deployments can skip these as the core schema already includes all necessary tables and columns.
@@ -14,8 +14,8 @@ exports.up = async function(knex) {
    // Create default admin user if none exists
    const adminExists = await knex('admin_users').first();
    if (!adminExists) {
-      // Generate a secure random password
-      const generatedPassword = generateReadablePassword();
+      // Use ADMIN_PASSWORD from environment if set, otherwise generate a random one
+      const generatedPassword = process.env.ADMIN_PASSWORD || generateReadablePassword();
      const passwordHash = await bcrypt.hash(generatedPassword, 12); // Increased rounds for better security
      
      // Get admin credentials from environment or use defaults
@@ -0,0 +1,107 @@
+/**
+ * Migration: Add event_types table
+ *
+ * Creates a customizable event types system to replace hardcoded event types.
+ * This allows users to:
+ * - Rename existing event types (wedding, birthday, corporate, other)
+ * - Create custom event types with custom slug prefixes
+ * - Associate default theme presets with event types
+ *
+ * Backward compatible: Existing events keep their event_type strings.
+ * New events can use either legacy strings or custom event type slug_prefix.
+ */
+
+const { createTableIfNotExists, insertIfNotExists } = require('../helpers');
+
+exports.up = async function(knex) {
+  console.log('Creating event_types table...');
+
+  // Create event_types table
+  const hasEventTypesTable = await knex.schema.hasTable('event_types');
+  if (!hasEventTypesTable) {
+    await knex.schema.createTable('event_types', (table) => {
+      table.increments('id').primary();
+      table.string('name', 100).notNullable(); // Display name: "Family Shoot"
+      table.string('slug_prefix', 50).unique().notNullable(); // URL prefix: "family"
+      table.string('emoji', 10); // Icon emoji: "👨‍👩‍👧"
+      table.string('theme_preset', 50); // Default theme: "elegantWedding"
+      table.text('theme_config'); // Custom theme JSON overrides (optional)
+      table.integer('display_order').defaultTo(0); // Sorting in dropdowns
+      table.boolean('is_system').defaultTo(false); // Protect default types
+      table.boolean('is_active').defaultTo(true); // Allow hiding types
+      table.timestamp('created_at').defaultTo(knex.fn.now());
+      table.timestamp('updated_at').defaultTo(knex.fn.now());
+
+      // Indexes for performance
+      table.index('slug_prefix');
+      table.index('display_order');
+      table.index('is_active');
+    });
+    console.log('event_types table created');
+  } else {
+    console.log('event_types table already exists, skipping creation');
+  }
+
+  // Seed default event types (matching current hardcoded values)
+  const existingTypes = await knex('event_types').select('slug_prefix');
+  const existingSlugs = existingTypes.map(t => t.slug_prefix);
+
+  const defaultTypes = [
+    {
+      name: 'Wedding',
+      slug_prefix: 'wedding',
+      emoji: '💒',
+      theme_preset: 'elegantWedding',
+      display_order: 1,
+      is_system: true,
+      is_active: true
+    },
+    {
+      name: 'Birthday',
+      slug_prefix: 'birthday',
+      emoji: '🎂',
+      theme_preset: 'birthdayFun',
+      display_order: 2,
+      is_system: true,
+      is_active: true
+    },
+    {
+      name: 'Corporate',
+      slug_prefix: 'corporate',
+      emoji: '🏢',
+      theme_preset: 'corporateTimeline',
+      display_order: 3,
+      is_system: true,
+      is_active: true
+    },
+    {
+      name: 'Other',
+      slug_prefix: 'other',
+      emoji: '📸',
+      theme_preset: 'default',
+      display_order: 4,
+      is_system: true,
+      is_active: true
+    }
+  ];
+
+  const typesToInsert = defaultTypes.filter(type => !existingSlugs.includes(type.slug_prefix));
+
+  if (typesToInsert.length > 0) {
+    await knex('event_types').insert(typesToInsert);
+    console.log(`Inserted ${typesToInsert.length} default event types`);
+  } else {
+    console.log('Default event types already exist, skipping seed');
+  }
+
+  console.log('Migration 061_add_event_types_table completed successfully');
+};
+
+exports.down = async function(knex) {
+  console.log('Rolling back event_types table...');
+
+  // Drop the table (data will be lost)
+  await knex.schema.dropTableIfExists('event_types');
+
+  console.log('event_types table dropped');
+};
@@ -0,0 +1,53 @@
+/**
+ * Migration: Add optional event date and expiration settings
+ * These settings control whether event_date and expiration are required
+ * when creating new events, supporting non-event use cases like portraits.
+ */
+
+exports.up = async function(knex) {
+  // Add new settings for optional date and expiration
+  const settings = [
+    { setting_key: 'event_require_event_date', setting_value: JSON.stringify(true), setting_type: 'boolean' },
+    { setting_key: 'event_require_expiration', setting_value: JSON.stringify(true), setting_type: 'boolean' }
+  ];
+
+  for (const setting of settings) {
+    const exists = await knex('app_settings').where('setting_key', setting.setting_key).first();
+    if (!exists) {
+      await knex('app_settings').insert({
+        ...setting,
+        updated_at: knex.fn.now()
+      });
+    }
+  }
+
+  // Make event_date and expires_at columns nullable
+  // PostgreSQL supports ALTER COLUMN ... DROP NOT NULL
+  // SQLite requires table recreation (handled differently)
+  const client = knex.client.config.client;
+
+  if (client === 'pg' || client === 'postgresql') {
+    // PostgreSQL: directly alter columns
+    await knex.raw('ALTER TABLE events ALTER COLUMN event_date DROP NOT NULL');
+    await knex.raw('ALTER TABLE events ALTER COLUMN expires_at DROP NOT NULL');
+  } else if (client === 'sqlite3' || client === 'better-sqlite3') {
+    // SQLite: columns are already effectively nullable in most cases
+    // SQLite doesn't enforce NOT NULL as strictly, and altering requires table recreation
+    // For safety, we'll skip the schema change for SQLite as it's complex
+    // The application logic will handle null values appropriately
+    console.log('SQLite detected - skipping schema alteration (columns will accept NULL values)');
+  }
+};
+
+exports.down = async function(knex) {
+  // Remove the settings
+  await knex('app_settings')
+    .whereIn('setting_key', [
+      'event_require_event_date',
+      'event_require_expiration'
+    ])
+    .del();
+
+  // Note: We don't restore NOT NULL constraints as that could fail
+  // if there are existing NULL values in the database
+};
@@ -0,0 +1,28 @@
+/**
+ * Migration 061: Add pre-generated watermark path to photos table
+ * - photos.watermark_path: path to pre-generated watermarked image
+ * - photos.watermark_generated_at: timestamp of watermark generation
+ */
+
+const { addColumnIfNotExists } = require('../helpers');
+
+exports.up = async function(knex) {
+  console.log('Running migration: 061_add_watermark_path');
+
+  // photos.watermark_path (nullable - path to pre-generated watermarked image)
+  await addColumnIfNotExists(knex, 'photos', 'watermark_path', (table) => {
+    table.string('watermark_path', 512);
+  });
+
+  // photos.watermark_generated_at (nullable - when watermark was last generated)
+  await addColumnIfNotExists(knex, 'photos', 'watermark_generated_at', (table) => {
+    table.timestamp('watermark_generated_at');
+  });
+
+  console.log('Migration 061_add_watermark_path completed');
+};
+
+exports.down = async function(knex) {
+  console.log('Rollback: 061_add_watermark_path');
+  // Keep columns (safe rollback not removing data). Intentionally no-op.
+};
@@ -0,0 +1,70 @@
+/**
+ * Migration: Add hero logo customization settings to events table
+ *
+ * Allows per-event customization of the hero gallery logo:
+ * - hero_logo_visible: Show/hide the logo overlay
+ * - hero_logo_size: Logo size (small, medium, large, xlarge)
+ * - hero_logo_position: Logo position (top, center, bottom)
+ *
+ * Addresses GitHub Issue #138: Add Option to customize the Hero gallery layout
+ */
+
+exports.up = async function (knex) {
+  console.log('Adding hero logo settings to events table...');
+
+  // Add hero_logo_visible column
+  const hasVisibleColumn = await knex.schema.hasColumn('events', 'hero_logo_visible');
+  if (!hasVisibleColumn) {
+    await knex.schema.table('events', (table) => {
+      table.boolean('hero_logo_visible').notNullable().defaultTo(true);
+    });
+    console.log('Added hero_logo_visible column');
+  }
+
+  // Add hero_logo_size column
+  const hasSizeColumn = await knex.schema.hasColumn('events', 'hero_logo_size');
+  if (!hasSizeColumn) {
+    await knex.schema.table('events', (table) => {
+      table.string('hero_logo_size', 20).notNullable().defaultTo('medium');
+    });
+    console.log('Added hero_logo_size column');
+  }
+
+  // Add hero_logo_position column
+  const hasPositionColumn = await knex.schema.hasColumn('events', 'hero_logo_position');
+  if (!hasPositionColumn) {
+    await knex.schema.table('events', (table) => {
+      table.string('hero_logo_position', 20).notNullable().defaultTo('top');
+    });
+    console.log('Added hero_logo_position column');
+  }
+
+  console.log('Migration 062_add_hero_logo_settings completed successfully');
+};
+
+exports.down = async function (knex) {
+  console.log('Rolling back hero logo settings...');
+
+  const hasVisibleColumn = await knex.schema.hasColumn('events', 'hero_logo_visible');
+  if (hasVisibleColumn) {
+    await knex.schema.table('events', (table) => {
+      table.dropColumn('hero_logo_visible');
+    });
+  }
+
+  const hasSizeColumn = await knex.schema.hasColumn('events', 'hero_logo_size');
+  if (hasSizeColumn) {
+    await knex.schema.table('events', (table) => {
+      table.dropColumn('hero_logo_size');
+    });
+  }
+
+  const hasPositionColumn = await knex.schema.hasColumn('events', 'hero_logo_position');
+  if (hasPositionColumn) {
+    await knex.schema.table('events', (table) => {
+      table.dropColumn('hero_logo_position');
+    });
+  }
+
+  console.log('Hero logo settings columns dropped');
+};
@@ -0,0 +1,23 @@
+/**
+ * Migration 062: Add original_filename to photos table
+ * - photos.original_filename: preserves the original filename from upload
+ *   This enables Lightroom integration by exporting filtered filenames
+ */
+
+const { addColumnIfNotExists } = require('../helpers');
+
+exports.up = async function(knex) {
+  console.log('Running migration: 062_add_original_filename');
+
+  // photos.original_filename (nullable - original filename before renaming)
+  await addColumnIfNotExists(knex, 'photos', 'original_filename', (table) => {
+    table.string('original_filename', 512);
+  });
+
+  console.log('Migration 062_add_original_filename completed');
+};
+
+exports.down = async function(knex) {
+  console.log('Rollback: 062_add_original_filename');
+  // Keep column (safe rollback not removing data). Intentionally no-op.
+};
@@ -0,0 +1,53 @@
+/**
+ * Migration: Add custom logo support to events table
+ *
+ * Allows per-event custom logo that overrides the global branding logo:
+ * - hero_logo_url: Public path to the uploaded custom logo
+ * - hero_logo_path: Full filesystem path to the custom logo
+ *
+ * Logo priority: Event custom logo > Global branding logo > Default PicPeak logo
+ *
+ * Addresses GitHub Issue #138: Per-event custom logo option
+ */
+
+exports.up = async function (knex) {
+  console.log('Adding custom logo columns to events table...');
+
+  const hasUrlColumn = await knex.schema.hasColumn('events', 'hero_logo_url');
+  if (!hasUrlColumn) {
+    await knex.schema.table('events', (table) => {
+      table.string('hero_logo_url', 500).nullable().defaultTo(null);
+    });
+    console.log('Added hero_logo_url column');
+  }
+
+  const hasPathColumn = await knex.schema.hasColumn('events', 'hero_logo_path');
+  if (!hasPathColumn) {
+    await knex.schema.table('events', (table) => {
+      table.string('hero_logo_path', 500).nullable().defaultTo(null);
+    });
+    console.log('Added hero_logo_path column');
+  }
+
+  console.log('Migration 063_add_event_custom_logo completed successfully');
+};
+
+exports.down = async function (knex) {
+  console.log('Rolling back custom logo columns...');
+
+  const hasUrlColumn = await knex.schema.hasColumn('events', 'hero_logo_url');
+  if (hasUrlColumn) {
+    await knex.schema.table('events', (table) => {
+      table.dropColumn('hero_logo_url');
+    });
+  }
+
+  const hasPathColumn = await knex.schema.hasColumn('events', 'hero_logo_path');
+  if (hasPathColumn) {
+    await knex.schema.table('events', (table) => {
+      table.dropColumn('hero_logo_path');
+    });
+  }
+
+  console.log('Custom logo columns dropped');
+};
@@ -0,0 +1,105 @@
+/**
+ * Migration: Backfill photo dimensions
+ *
+ * This migration extracts width/height from existing photos that don't have
+ * these dimensions stored. This is needed for aspect-ratio-aware layouts
+ * (masonry, mosaic, justified) to work properly.
+ */
+
+const path = require('path');
+const fs = require('fs');
+
+exports.up = async function(knex) {
+  // Check if the width/height columns exist
+  const hasWidth = await knex.schema.hasColumn('photos', 'width');
+  const hasHeight = await knex.schema.hasColumn('photos', 'height');
+
+  if (!hasWidth || !hasHeight) {
+    console.log('[Migration 064] Width/height columns not found, skipping backfill');
+    return;
+  }
+
+  // Get storage path
+  const storagePath = process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');
+
+  // Find photos without dimensions
+  const photos = await knex('photos')
+    .whereNull('width')
+    .orWhereNull('height')
+    .select('id', 'path', 'filename', 'media_type');
+
+  console.log(`[Migration 064] Found ${photos.length} photos without dimensions`);
+
+  if (photos.length === 0) {
+    return;
+  }
+
+  // Import sharp dynamically (only needed during migration)
+  let sharp;
+  try {
+    sharp = require('sharp');
+  } catch (err) {
+    console.error('[Migration 064] Sharp not available, skipping backfill:', err.message);
+    return;
+  }
+
+  let updated = 0;
+  let failed = 0;
+
+  for (const photo of photos) {
+    try {
+      // Skip videos - they need ffprobe for metadata
+      if (photo.media_type === 'video') {
+        continue;
+      }
+
+      // Construct the full file path
+      let fullPath;
+      if (photo.path) {
+        // Path is relative to events/active directory
+        fullPath = path.join(storagePath, 'events/active', photo.path);
+      } else {
+        console.warn(`[Migration 064] Photo ${photo.id} (${photo.filename}) has no path, skipping`);
+        continue;
+      }
+
+      // Check if file exists
+      if (!fs.existsSync(fullPath)) {
+        console.warn(`[Migration 064] Photo ${photo.id} file not found: ${fullPath}`);
+        failed++;
+        continue;
+      }
+
+      // Extract dimensions using sharp
+      const metadata = await sharp(fullPath).metadata();
+
+      if (metadata.width && metadata.height) {
+        await knex('photos')
+          .where('id', photo.id)
+          .update({
+            width: metadata.width,
+            height: metadata.height
+          });
+        updated++;
+
+        if (updated % 50 === 0) {
+          console.log(`[Migration 064] Updated ${updated} photos...`);
+        }
+      } else {
+        console.warn(`[Migration 064] Could not extract dimensions for photo ${photo.id}`);
+        failed++;
+      }
+    } catch (err) {
+      console.error(`[Migration 064] Error processing photo ${photo.id}:`, err.message);
+      failed++;
+    }
+  }
+
+  console.log(`[Migration 064] Completed: ${updated} updated, ${failed} failed`);
+};
+
+exports.down = async function(knex) {
+  // This migration only adds data, no rollback needed
+  // We don't want to null out dimensions on rollback as they're still valid
+  console.log('[Migration 064] Rollback: No action needed (data-only migration)');
+};
@@ -0,0 +1,131 @@
+/**
+ * Migration: Add header_style and hero_divider_style columns
+ *
+ * This migration decouples the hero header style from gallery layout,
+ * allowing any combination of header style with any layout type.
+ */
+
+exports.up = async function(knex) {
+  console.log('[Migration 065] Adding header_style and hero_divider_style columns');
+
+  // Check if columns already exist
+  const hasHeaderStyle = await knex.schema.hasColumn('events', 'header_style');
+  const hasDividerStyle = await knex.schema.hasColumn('events', 'hero_divider_style');
+
+  if (!hasHeaderStyle) {
+    await knex.schema.alterTable('events', (table) => {
+      table.string('header_style', 20).defaultTo('standard');
+    });
+    console.log('[Migration 065] Added header_style column');
+  }
+
+  if (!hasDividerStyle) {
+    await knex.schema.alterTable('events', (table) => {
+      table.string('hero_divider_style', 20).defaultTo('wave');
+    });
+    console.log('[Migration 065] Added hero_divider_style column');
+  }
+
+  // Migrate existing events with hero layout in color_theme
+  console.log('[Migration 065] Migrating existing hero layouts...');
+
+  const events = await knex('events')
+    .whereNotNull('color_theme')
+    .select('id', 'color_theme');
+
+  let migratedCount = 0;
+
+  for (const event of events) {
+    try {
+      // Skip if color_theme is not JSON
+      if (!event.color_theme || !event.color_theme.startsWith('{')) {
+        continue;
+      }
+
+      const theme = JSON.parse(event.color_theme);
+
+      // Check if this event uses hero layout
+      if (theme.galleryLayout === 'hero') {
+        // Migrate: set headerStyle to 'hero' and galleryLayout to 'grid'
+        const updatedTheme = {
+          ...theme,
+          headerStyle: 'hero',
+          galleryLayout: 'grid',
+          heroDividerStyle: theme.heroDividerStyle || 'wave'
+        };
+
+        await knex('events')
+          .where('id', event.id)
+          .update({
+            color_theme: JSON.stringify(updatedTheme),
+            header_style: 'hero',
+            hero_divider_style: theme.heroDividerStyle || 'wave'
+          });
+
+        migratedCount++;
+      }
+    } catch (err) {
+      // Invalid JSON in color_theme, skip
+      console.warn(`[Migration 065] Could not parse color_theme for event ${event.id}: ${err.message}`);
+    }
+  }
+
+  console.log(`[Migration 065] Migrated ${migratedCount} events from hero layout`);
+  console.log('[Migration 065] Completed');
+};
+
+exports.down = async function(knex) {
+  console.log('[Migration 065] Removing header_style and hero_divider_style columns');
+
+  // First, migrate any hero header styles back to hero layout
+  const events = await knex('events')
+    .where('header_style', 'hero')
+    .whereNotNull('color_theme')
+    .select('id', 'color_theme');
+
+  for (const event of events) {
+    try {
+      if (!event.color_theme || !event.color_theme.startsWith('{')) {
+        continue;
+      }
+
+      const theme = JSON.parse(event.color_theme);
+
+      // Revert: set galleryLayout back to 'hero'
+      const revertedTheme = {
+        ...theme,
+        galleryLayout: 'hero'
+      };
+
+      // Remove the new properties
+      delete revertedTheme.headerStyle;
+      delete revertedTheme.heroDividerStyle;
+
+      await knex('events')
+        .where('id', event.id)
+        .update({
+          color_theme: JSON.stringify(revertedTheme)
+        });
+    } catch (err) {
+      console.warn(`[Migration 065] Could not revert color_theme for event ${event.id}: ${err.message}`);
+    }
+  }
+
+  // Remove the columns
+  const hasHeaderStyle = await knex.schema.hasColumn('events', 'header_style');
+  const hasDividerStyle = await knex.schema.hasColumn('events', 'hero_divider_style');
+
+  if (hasHeaderStyle) {
+    await knex.schema.alterTable('events', (table) => {
+      table.dropColumn('header_style');
+    });
+  }
+
+  if (hasDividerStyle) {
+    await knex.schema.alterTable('events', (table) => {
+      table.dropColumn('hero_divider_style');
+    });
+  }
+
+  console.log('[Migration 065] Rollback completed');
+};
@@ -0,0 +1,48 @@
+/**
+ * Migration: Add hero image anchor position and category-specific hero images
+ *
+ * Issue #162: Add hero_image_anchor column to events table for controlling
+ *             how hero images are cropped (top/center/bottom)
+ *
+ * Issue #163: Add hero_photo_id column to photo_categories table for
+ *             category-specific hero images
+ */
+
+exports.up = async function(knex) {
+  // Add hero_image_anchor to events table (Issue #162)
+  const hasHeroAnchor = await knex.schema.hasColumn('events', 'hero_image_anchor');
+  if (!hasHeroAnchor) {
+    await knex.schema.alterTable('events', function(table) {
+      // Values: 'top', 'center', 'bottom' - defaults to 'center' for backward compatibility
+      table.string('hero_image_anchor', 10).defaultTo('center');
+    });
+    console.log('Added hero_image_anchor column to events table');
+  }
+
+  // Add hero_photo_id to photo_categories table (Issue #163)
+  const hasCategoryHero = await knex.schema.hasColumn('photo_categories', 'hero_photo_id');
+  if (!hasCategoryHero) {
+    await knex.schema.alterTable('photo_categories', function(table) {
+      table.integer('hero_photo_id').references('id').inTable('photos').onDelete('SET NULL');
+    });
+    console.log('Added hero_photo_id column to photo_categories table');
+  }
+};
+
+exports.down = async function(knex) {
+  // Remove hero_image_anchor from events table
+  const hasHeroAnchor = await knex.schema.hasColumn('events', 'hero_image_anchor');
+  if (hasHeroAnchor) {
+    await knex.schema.alterTable('events', function(table) {
+      table.dropColumn('hero_image_anchor');
+    });
+  }
+
+  // Remove hero_photo_id from photo_categories table
+  const hasCategoryHero = await knex.schema.hasColumn('photo_categories', 'hero_photo_id');
+  if (hasCategoryHero) {
+    await knex.schema.alterTable('photo_categories', function(table) {
+      table.dropColumn('hero_photo_id');
+    });
+  }
+};
@@ -0,0 +1,32 @@
+/**
+ * Migration: Expand hero_image_anchor column to support focal point percentages
+ *
+ * Changes string(10) to string(20) so values like "100% 100%" (9 chars) fit
+ * with room to spare. Existing 'top', 'center', 'bottom' values are preserved.
+ */
+
+exports.up = async function(knex) {
+  const hasColumn = await knex.schema.hasColumn('events', 'hero_image_anchor');
+  if (!hasColumn) {
+    // Column doesn't exist yet – nothing to expand
+    return;
+  }
+
+  // SQLite doesn't truly support ALTER COLUMN, but Knex handles the
+  // rebuild-table strategy internally when we call alterTable.
+  await knex.schema.alterTable('events', function(table) {
+    table.string('hero_image_anchor', 20).defaultTo('center').alter();
+  });
+  console.log('Expanded hero_image_anchor column to string(20)');
+};
+
+exports.down = async function(knex) {
+  const hasColumn = await knex.schema.hasColumn('events', 'hero_image_anchor');
+  if (!hasColumn) {
+    return;
+  }
+
+  await knex.schema.alterTable('events', function(table) {
+    table.string('hero_image_anchor', 10).defaultTo('center').alter();
+  });
+};
@@ -0,0 +1,54 @@
+const DEFAULT_AI_AGENTS = [
+  'GPTBot',
+  'ChatGPT-User',
+  'Google-Extended',
+  'Claude-Web',
+  'Anthropic-AI',
+  'CCBot',
+  'Bytespider',
+  'FacebookBot',
+  'Omgilibot',
+  'Diffbot',
+  'PetalBot',
+  'Amazonbot',
+  'PerplexityBot',
+  'YouBot',
+  'Applebot-Extended'
+];
+
+exports.up = async function(knex) {
+  const defaults = [
+    { setting_key: 'seo_allow_indexing', setting_value: JSON.stringify(false), setting_type: 'seo' },
+    { setting_key: 'seo_block_ai_crawlers', setting_value: JSON.stringify(true), setting_type: 'seo' },
+    { setting_key: 'seo_block_social_bots', setting_value: JSON.stringify(false), setting_type: 'seo' },
+    { setting_key: 'seo_blocked_ai_agents', setting_value: JSON.stringify(DEFAULT_AI_AGENTS), setting_type: 'seo' },
+    { setting_key: 'seo_custom_rules', setting_value: JSON.stringify([]), setting_type: 'seo' },
+    { setting_key: 'seo_meta_noindex', setting_value: JSON.stringify(true), setting_type: 'seo' },
+    { setting_key: 'seo_meta_nofollow', setting_value: JSON.stringify(false), setting_type: 'seo' },
+    { setting_key: 'seo_meta_noai', setting_value: JSON.stringify(true), setting_type: 'seo' },
+    { setting_key: 'seo_sitemap_url', setting_value: JSON.stringify(''), setting_type: 'seo' }
+  ];
+
+  for (const setting of defaults) {
+    const exists = await knex('app_settings').where('setting_key', setting.setting_key).first();
+    if (!exists) {
+      await knex('app_settings').insert({ ...setting, updated_at: knex.fn.now() });
+    }
+  }
+};
+
+exports.down = async function(knex) {
+  await knex('app_settings')
+    .whereIn('setting_key', [
+      'seo_allow_indexing',
+      'seo_block_ai_crawlers',
+      'seo_block_social_bots',
+      'seo_blocked_ai_agents',
+      'seo_custom_rules',
+      'seo_meta_noindex',
+      'seo_meta_nofollow',
+      'seo_meta_noai',
+      'seo_sitemap_url'
+    ])
+    .del();
+};
@@ -0,0 +1,22 @@
+/**
+ * Migration 069: Add hero image path to photos table
+ * - photos.hero_path: path to hero-optimized image (1920x1080) for gallery headers
+ */
+
+const { addColumnIfNotExists } = require('../helpers');
+
+exports.up = async function(knex) {
+  console.log('Running migration: 069_add_hero_path');
+
+  // photos.hero_path (nullable - path to hero-optimized image)
+  await addColumnIfNotExists(knex, 'photos', 'hero_path', (table) => {
+    table.string('hero_path', 512);
+  });
+
+  console.log('Migration 069_add_hero_path completed');
+};
+
+exports.down = async function(knex) {
+  console.log('Rollback: 069_add_hero_path');
+  // Keep columns (safe rollback not removing data). Intentionally no-op.
+};
@@ -0,0 +1,161 @@
+/**
+ * Migration 070: Add update notification settings and email template
+ * - Settings for email notifications when new versions are available
+ * - Email template for version update notifications
+ */
+
+exports.up = async function(knex) {
+  console.log('Running migration: 070_add_update_notification_settings');
+
+  // Add app_settings for update notifications
+  const settings = [
+    {
+      setting_key: 'update_email_notifications_enabled',
+      setting_value: JSON.stringify(false),
+      setting_type: 'notifications'
+    },
+    {
+      setting_key: 'update_email_recipients',
+      setting_value: JSON.stringify(''), // Comma-separated emails, or empty for all admin emails
+      setting_type: 'notifications'
+    },
+    {
+      setting_key: 'last_notified_version',
+      setting_value: JSON.stringify(''),
+      setting_type: 'notifications'
+    }
+  ];
+
+  for (const setting of settings) {
+    const exists = await knex('app_settings').where('setting_key', setting.setting_key).first();
+    if (!exists) {
+      await knex('app_settings').insert({ ...setting, updated_at: knex.fn.now() });
+    }
+  }
+
+  // Check if email template already exists
+  const existingTemplate = await knex('email_templates')
+    .where('template_key', 'version_update_available')
+    .first();
+
+  if (!existingTemplate) {
+    await knex('email_templates').insert({
+      template_key: 'version_update_available',
+      subject_en: 'PicPeak Update Available: Version {{new_version}}',
+      subject_de: 'PicPeak Update verfugbar: Version {{new_version}}',
+      body_html_en: `
+<h2>A New Version of PicPeak is Available</h2>
+
+<p>Great news! A new version of PicPeak is available for your installation.</p>
+
+<div style="background-color: #f0f8ff; border-left: 4px solid #5C8762; padding: 20px; margin: 20px 0; border-radius: 4px;">
+  <p style="margin: 0;"><strong>Current Version:</strong> {{current_version}}</p>
+  <p style="margin: 10px 0 0 0;"><strong>New Version:</strong> {{new_version}}</p>
+  <p style="margin: 10px 0 0 0;"><strong>Channel:</strong> {{channel}}</p>
+</div>
+
+<h3>What's New?</h3>
+<p>Check the release notes to see what's included in this update:</p>
+
+<div style="text-align: center; margin: 30px 0;">
+  <a href="{{release_notes_url}}" style="display: inline-block; padding: 14px 35px; background-color: #5C8762; color: white; text-decoration: none; border-radius: 5px; font-weight: 600; font-size: 16px;">View Release Notes</a>
+</div>
+
+<h3>How to Update</h3>
+<p>To update your installation, log in to the admin panel and click on the "Update Available" notification. You'll find environment-specific instructions there.</p>
+
+<div style="background-color: #fff3cd; border: 1px solid #ffeaa7; color: #856404; padding: 15px; border-radius: 4px; margin: 20px 0;">
+  <p style="margin: 0;"><strong>Reminder:</strong> Always backup your database before updating to ensure you can recover if anything goes wrong.</p>
+</div>
+
+<p>Best regards,<br>
+Your PicPeak Installation</p>`,
+      body_text_en: `A New Version of PicPeak is Available
+
+Great news! A new version of PicPeak is available for your installation.
+
+Current Version: {{current_version}}
+New Version: {{new_version}}
+Channel: {{channel}}
+
+What's New?
+Check the release notes to see what's included in this update:
+{{release_notes_url}}
+
+How to Update
+To update your installation, log in to the admin panel and click on the "Update Available" notification. You'll find environment-specific instructions there.
+
+REMINDER: Always backup your database before updating to ensure you can recover if anything goes wrong.
+
+Best regards,
+Your PicPeak Installation`,
+      body_html_de: `
+<h2>Eine neue Version von PicPeak ist verfugbar</h2>
+
+<p>Gute Neuigkeiten! Eine neue Version von PicPeak ist fur Ihre Installation verfugbar.</p>
+
+<div style="background-color: #f0f8ff; border-left: 4px solid #5C8762; padding: 20px; margin: 20px 0; border-radius: 4px;">
+  <p style="margin: 0;"><strong>Aktuelle Version:</strong> {{current_version}}</p>
+  <p style="margin: 10px 0 0 0;"><strong>Neue Version:</strong> {{new_version}}</p>
+  <p style="margin: 10px 0 0 0;"><strong>Kanal:</strong> {{channel}}</p>
+</div>
+
+<h3>Was ist neu?</h3>
+<p>Schauen Sie sich die Versionshinweise an, um zu sehen, was in diesem Update enthalten ist:</p>
+
+<div style="text-align: center; margin: 30px 0;">
+  <a href="{{release_notes_url}}" style="display: inline-block; padding: 14px 35px; background-color: #5C8762; color: white; text-decoration: none; border-radius: 5px; font-weight: 600; font-size: 16px;">Versionshinweise anzeigen</a>
+</div>
+
+<h3>So aktualisieren Sie</h3>
+<p>Um Ihre Installation zu aktualisieren, melden Sie sich im Admin-Panel an und klicken Sie auf die Benachrichtigung "Update verfugbar". Dort finden Sie umgebungsspezifische Anweisungen.</p>
+
+<div style="background-color: #fff3cd; border: 1px solid #ffeaa7; color: #856404; padding: 15px; border-radius: 4px; margin: 20px 0;">
+  <p style="margin: 0;"><strong>Erinnerung:</strong> Erstellen Sie immer ein Backup Ihrer Datenbank, bevor Sie aktualisieren, um sicherzustellen, dass Sie im Fehlerfall wiederherstellen konnen.</p>
+</div>
+
+<p>Mit freundlichen Grussen,<br>
+Ihre PicPeak-Installation</p>`,
+      body_text_de: `Eine neue Version von PicPeak ist verfugbar
+
+Gute Neuigkeiten! Eine neue Version von PicPeak ist fur Ihre Installation verfugbar.
+
+Aktuelle Version: {{current_version}}
+Neue Version: {{new_version}}
+Kanal: {{channel}}
+
+Was ist neu?
+Schauen Sie sich die Versionshinweise an, um zu sehen, was in diesem Update enthalten ist:
+{{release_notes_url}}
+
+So aktualisieren Sie
+Um Ihre Installation zu aktualisieren, melden Sie sich im Admin-Panel an und klicken Sie auf die Benachrichtigung "Update verfugbar". Dort finden Sie umgebungsspezifische Anweisungen.
+
+ERINNERUNG: Erstellen Sie immer ein Backup Ihrer Datenbank, bevor Sie aktualisieren, um sicherzustellen, dass Sie im Fehlerfall wiederherstellen konnen.
+
+Mit freundlichen Grussen,
+Ihre PicPeak-Installation`,
+      variables: JSON.stringify(['current_version', 'new_version', 'channel', 'release_notes_url'])
+    });
+  }
+
+  console.log('Migration 070_add_update_notification_settings completed');
+};
+
+exports.down = async function(knex) {
+  console.log('Rollback: 070_add_update_notification_settings');
+
+  // Remove settings
+  await knex('app_settings')
+    .whereIn('setting_key', [
+      'update_email_notifications_enabled',
+      'update_email_recipients',
+      'last_notified_version'
+    ])
+    .del();
+
+  // Remove email template
+  await knex('email_templates')
+    .where('template_key', 'version_update_available')
+    .del();
+};
@@ -0,0 +1,42 @@
+/**
+ * Migration 071: Add captured_at column to photos table
+ * - Stores the original capture date from EXIF metadata
+ * - Enables sorting photos by capture date instead of upload date
+ */
+
+const { addColumnIfNotExists } = require('../helpers');
+
+exports.up = async function(knex) {
+  console.log('Running migration: 071_add_captured_at');
+
+  // Add captured_at column to photos table
+  await addColumnIfNotExists(knex, 'photos', 'captured_at', (table) => {
+    table.datetime('captured_at').nullable();
+  });
+
+  // Add index for sorting performance
+  const indexExists = await knex.schema.hasIndex
+    ? await knex.schema.hasIndex('photos', 'idx_photos_captured_at')
+    : false;
+
+  if (!indexExists) {
+    // Use raw query for index creation with IF NOT EXISTS
+    const client = knex.client.config.client;
+    if (client === 'pg') {
+      await knex.raw('CREATE INDEX IF NOT EXISTS idx_photos_captured_at ON photos(captured_at)');
+    } else if (client === 'sqlite3' || client === 'better-sqlite3') {
+      // SQLite doesn't support IF NOT EXISTS for indexes, so we need to check first
+      const existingIndexes = await knex.raw("SELECT name FROM sqlite_master WHERE type='index' AND name='idx_photos_captured_at'");
+      if (existingIndexes.length === 0) {
+        await knex.raw('CREATE INDEX idx_photos_captured_at ON photos(captured_at)');
+      }
+    }
+  }
+
+  console.log('Migration 071_add_captured_at completed');
+};
+
+exports.down = async function(knex) {
+  console.log('Rollback: 071_add_captured_at');
+  // Keep column for safe rollback (intentionally no-op)
+};
@@ -0,0 +1,13 @@
+exports.up = async function(knex) {
+  await knex.schema.alterTable('events', (table) => {
+    table.string('host_email', 255).nullable().alter();
+    table.string('admin_email', 255).nullable().alter();
+  });
+};
+
+exports.down = async function(knex) {
+  await knex.schema.alterTable('events', (table) => {
+    table.string('host_email', 255).notNullable().defaultTo('').alter();
+    table.string('admin_email', 255).notNullable().defaultTo('').alter();
+  });
+};
@@ -1,22 +1,27 @@
 exports.up = async function(knex) {
-  // Add photo_counter column to photo_categories table
-  await knex.schema.alterTable('photo_categories', function(table) {
-    table.integer('photo_counter').defaultTo(0).notNullable();
-  });
+  // Check if photo_counter column already exists to make migration idempotent
+  const hasPhotoCounter = await knex.schema.hasColumn('photo_categories', 'photo_counter');

-  // Initialize counters based on existing photos
-  const categories = await knex('photo_categories').select('id');
-  
-  for (const category of categories) {
-    const photoCount = await knex('photos')
-      .where('category_id', category.id)
-      .count('id as count')
-      .first();
-    
-    if (photoCount && photoCount.count > 0) {
-      await knex('photo_categories')
-        .where('id', category.id)
-        .update({ photo_counter: photoCount.count });
+  if (!hasPhotoCounter) {
+    // Add photo_counter column to photo_categories table
+    await knex.schema.alterTable('photo_categories', function(table) {
+      table.integer('photo_counter').defaultTo(0).notNullable();
+    });
+
+    // Initialize counters based on existing photos
+    const categories = await knex('photo_categories').select('id');
+
+    for (const category of categories) {
+      const photoCount = await knex('photos')
+        .where('category_id', category.id)
+        .count('id as count')
+        .first();
+
+      if (photoCount && photoCount.count > 0) {
+        await knex('photo_categories')
+          .where('id', category.id)
+          .update({ photo_counter: photoCount.count });
+      }
    }
  }
 };
@@ -1,23 +1,33 @@
 exports.up = async function(knex) {
-  // Add language-specific columns to email_templates
-  await knex.schema.alterTable('email_templates', function(table) {
-    // Add English versions (rename existing columns for consistency)
-    table.renameColumn('subject', 'subject_en');
-    table.renameColumn('body_html', 'body_html_en');
-    table.renameColumn('body_text', 'body_text_en');
-    
-    // Add German versions
-    table.string('subject_de');
-    table.text('body_html_de');
-    table.text('body_text_de');
-  });
+  // Check which columns already exist to make migration idempotent
+  const hasSubjectEn = await knex.schema.hasColumn('email_templates', 'subject_en');
+  const hasSubjectDe = await knex.schema.hasColumn('email_templates', 'subject_de');
+  const hasSubjectOriginal = await knex.schema.hasColumn('email_templates', 'subject');

-  // Copy existing values to German columns as defaults
-  await knex('email_templates').update({
-    subject_de: knex.raw('subject_en'),
-    body_html_de: knex.raw('body_html_en'),
-    body_text_de: knex.raw('body_text_en')
-  });
+  // Only rename columns if they haven't been renamed yet
+  if (hasSubjectOriginal && !hasSubjectEn) {
+    await knex.schema.alterTable('email_templates', function(table) {
+      table.renameColumn('subject', 'subject_en');
+      table.renameColumn('body_html', 'body_html_en');
+      table.renameColumn('body_text', 'body_text_en');
+    });
+  }
+
+  // Only add German columns if they don't exist
+  if (!hasSubjectDe) {
+    await knex.schema.alterTable('email_templates', function(table) {
+      table.string('subject_de');
+      table.text('body_html_de');
+      table.text('body_text_de');
+    });
+
+    // Copy existing values to German columns as defaults
+    await knex('email_templates').update({
+      subject_de: knex.raw('subject_en'),
+      body_html_de: knex.raw('body_html_en'),
+      body_text_de: knex.raw('body_text_en')
+    });
+  }
 };

 exports.down = async function(knex) {
@@ -67,26 +67,37 @@ async function runMigrationSafely(filepath) {
    const migrationPath = path.join(__dirname, filepath);
    const migration = require(migrationPath);
    const filename = path.basename(filepath);
-    
+
    if (migration.up) {
      console.log(`Running migration: ${filepath}`);
-      
+
      // Run migration in a transaction if possible
+      // IMPORTANT: Include the migrations table insert INSIDE the transaction
+      // to ensure atomicity between schema changes and tracking
      if (db.client.config.client === 'pg') {
        await db.transaction(async (trx) => {
          await migration.up(trx);
+          // Insert migration record inside transaction for atomicity
+          await trx('migrations').insert({ filename });
        });
      } else {
        await migration.up(db);
+        await db('migrations').insert({ filename });
      }
-      
-      await db('migrations').insert({ filename });
+
      console.log(`Migration ${filepath} completed successfully`);
    }
  } catch (error) {
    // Check if error is because schema already exists
-    if (error.code === '42P07' || // PostgreSQL: relation already exists
-        error.code === 'SQLITE_ERROR' && error.message.includes('already exists')) {
+    // PostgreSQL error codes:
+    // - 42P07: duplicate_table (relation already exists)
+    // - 42701: duplicate_column (column already exists)
+    // - 42710: duplicate_object (constraint, index, etc. already exists)
+    // - 23505: unique_violation (migration record already exists)
+    const schemaExistsErrors = ['42P07', '42701', '42710', '23505'];
+    const isSQLiteAlreadyExists = error.code === 'SQLITE_ERROR' && error.message.includes('already exists');
+
+    if (schemaExistsErrors.includes(error.code) || isSQLiteAlreadyExists) {
      console.log(`Migration ${filepath} - schema already exists, marking as applied`);
      await markMigrationAsApplied(path.basename(filepath));
    } else {
@@ -26,11 +26,22 @@ async function runMigration(filepath) {
  const migrationPath = path.join(__dirname, filepath);
  const migration = require(migrationPath);
  const filename = path.basename(filepath);
-  
+
  if (migration.up) {
    console.log(`Running migration: ${filepath}`);
-    await migration.up(db);
-    await db('migrations').insert({ filename });
+
+    // Run migration in a transaction if PostgreSQL to ensure atomicity
+    // between schema changes and migration tracking
+    if (db.client.config.client === 'pg') {
+      await db.transaction(async (trx) => {
+        await migration.up(trx);
+        await trx('migrations').insert({ filename });
+      });
+    } else {
+      await migration.up(db);
+      await db('migrations').insert({ filename });
+    }
+
    console.log(`Migration ${filepath} completed`);
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "picpeak-backend",
-  "version": "2.3.2",
+  "version": "2.6.5",
  "description": "Backend for PicPeak event photo sharing platform",
  "main": "server.js",
  "scripts": {
@@ -8,6 +8,7 @@
    "dev": "nodemon server.js",
    "migrate": "node migrations/run-migrations.js",
    "migrate:safe": "node migrations/run-migrations-safe.js",
+    "generate:watermarks": "node scripts/generate-watermarks.js",
    "test": "jest",
    "lint": "eslint src/"
  },
@@ -18,18 +19,19 @@
    "@ffmpeg-installer/ffmpeg": "^1.1.0",
    "adm-zip": "^0.5.16",
    "archiver": "^5.3.1",
-    "axios": "^1.12.2",
+    "axios": "1.14.0",
    "bcrypt": "6.0.0",
    "chokidar": "4.0.3",
    "cookie-parser": "^1.4.7",
    "cors": "^2.8.5",
    "dotenv": "^16.0.3",
+    "exifr": "^7.1.3",
    "express": "^4.18.2",
    "express-rate-limit": "^6.7.0",
    "express-validator": "^7.0.1",
    "fluent-ffmpeg": "^2.1.3",
    "form-data": "^4.0.4",
-    "handlebars": "^4.7.8",
+    "handlebars": "^4.7.9",
    "helmet": "^7.0.0",
    "i18next": "25.3.2",
    "i18next-browser-languagedetector": "^8.2.0",
@@ -42,7 +44,7 @@
    "mime-types": "^3.0.1",
    "multer": "^2.0.2",
    "node-cron": "^3.0.2",
-    "nodemailer": "^7.0.10",
+    "nodemailer": "^7.0.13",
    "pg": "^8.16.3",
    "react-i18next": "^15.6.0",
    "sanitize-html": "^2.17.0",
@@ -64,7 +66,13 @@
      "tar-fs": "2.1.4"
    },
    "glob": "^11.1.0",
-    "body-parser": "^2.2.1",
-    "js-yaml": "^4.1.1"
+    "js-yaml": "^4.1.1",
+    "fast-xml-parser": ">=5.5.10",
+    "qs": ">=6.14.2",
+    "tar": ">=7.5.13",
+    "brace-expansion": ">=5.0.5",
+    "minimatch": ">=9.0.7",
+    "path-to-regexp": "0.1.13",
+    "lodash": ">=4.18.1"
  }
 }
@@ -44,28 +44,39 @@ async function createAdmin() {
      .orWhere('username', username)
      .first();

-    if (existingUser) {
-      console.error(`Error: User with email "${email}" or username "${username}" already exists`);
-      process.exit(1);
-    }
-
    // Hash password
    const passwordHash = await bcrypt.hash(password, 10);

-    // Create admin user
-    await db('admin_users').insert({
-      username,
-      email,
-      password_hash: passwordHash,
-      is_active: true,
-      created_at: new Date(),
-      updated_at: new Date()
-    });
+    if (existingUser) {
+      // Update existing user's password
+      await db('admin_users')
+        .where('id', existingUser.id)
+        .update({
+          password_hash: passwordHash,
+          updated_at: new Date()
+        });

-    console.log(`✅ Admin user created successfully!`);
-    console.log(`   Email: ${email}`);
-    console.log(`   Username: ${username}`);
-    console.log(`   Login URL: ${process.env.ADMIN_URL || 'http://localhost:3000'}/admin/login`);
+      console.log(`✅ Admin user updated successfully!`);
+      console.log(`   Email: ${existingUser.email}`);
+      console.log(`   Username: ${existingUser.username}`);
+      console.log(`   Password has been reset to the provided value`);
+      console.log(`   Login URL: ${process.env.ADMIN_URL || 'http://localhost:3000'}/admin/login`);
+    } else {
+      // Create new admin user
+      await db('admin_users').insert({
+        username,
+        email,
+        password_hash: passwordHash,
+        is_active: true,
+        created_at: new Date(),
+        updated_at: new Date()
+      });
+
+      console.log(`✅ Admin user created successfully!`);
+      console.log(`   Email: ${email}`);
+      console.log(`   Username: ${username}`);
+      console.log(`   Login URL: ${process.env.ADMIN_URL || 'http://localhost:3000'}/admin/login`);
+    }
    
    process.exit(0);
  } catch (error) {
@@ -0,0 +1,161 @@
+#!/usr/bin/env node
+
+/**
+ * Script to generate pre-watermarked versions for existing photos
+ * This is a one-time migration script to populate watermarks for photos
+ * that existed before the pre-generation feature was implemented.
+ *
+ * Usage: node scripts/generate-watermarks.js [eventId]
+ *
+ * Options:
+ *   eventId - Optional: Only generate watermarks for a specific event
+ *
+ * Examples:
+ *   node scripts/generate-watermarks.js          # Generate for all photos
+ *   node scripts/generate-watermarks.js 5        # Generate for event ID 5
+ */
+
+const path = require('path');
+const { db } = require('../src/database/db');
+const watermarkService = require('../src/services/watermarkService');
+const watermarkGeneratorService = require('../src/services/watermarkGeneratorService');
+
+async function generateWatermarks(eventId = null) {
+  try {
+    console.log('='.repeat(60));
+    console.log('PicPeak Watermark Generation Script');
+    console.log('='.repeat(60));
+
+    // Check if watermarking is enabled
+    const settings = await watermarkService.getWatermarkSettings();
+
+    if (!settings || !settings.enabled) {
+      console.log('\nWatermarking is currently DISABLED in settings.');
+      console.log('Enable watermarking in Admin > Branding settings first.');
+      console.log('Exiting without generating watermarks.');
+      process.exit(0);
+    }
+
+    console.log('\nWatermark Settings:');
+    console.log(`  Enabled: ${settings.enabled}`);
+    console.log(`  Position: ${settings.position}`);
+    console.log(`  Opacity: ${settings.opacity}%`);
+    console.log(`  Size: ${settings.size}%`);
+    console.log(`  Logo: ${settings.logoPath || '(using text fallback)'}`);
+
+    // Build query
+    let query = db('photos')
+      .join('events', 'photos.event_id', 'events.id')
+      .whereNull('photos.watermark_path')
+      .whereNot(function() {
+        this.where('photos.media_type', 'video')
+          .orWhere('photos.mime_type', 'like', 'video/%');
+      })
+      .select(
+        'photos.id',
+        'photos.filename',
+        'photos.event_id',
+        'events.event_name'
+      );
+
+    if (eventId) {
+      query = query.where('photos.event_id', eventId);
+      console.log(`\nFiltering to event ID: ${eventId}`);
+    }
+
+    const photos = await query;
+
+    if (photos.length === 0) {
+      console.log('\nNo photos found without watermarks.');
+      if (eventId) {
+        console.log(`(Checked event ID: ${eventId})`);
+      }
+      console.log('All photos already have pre-generated watermarks or watermarking is disabled.');
+      process.exit(0);
+    }
+
+    console.log(`\nFound ${photos.length} photos without watermarks.`);
+
+    // Group by event for display
+    const eventCounts = {};
+    photos.forEach(p => {
+      eventCounts[p.event_name] = (eventCounts[p.event_name] || 0) + 1;
+    });
+
+    console.log('\nPhotos by event:');
+    Object.entries(eventCounts).forEach(([name, count]) => {
+      console.log(`  ${name}: ${count} photos`);
+    });
+
+    console.log('\nStarting watermark generation...\n');
+
+    let successCount = 0;
+    let failCount = 0;
+    const startTime = Date.now();
+
+    // Process photos with progress display
+    for (let i = 0; i < photos.length; i++) {
+      const photo = photos[i];
+      const progress = Math.round(((i + 1) / photos.length) * 100);
+
+      process.stdout.write(`\r[${progress}%] Processing photo ${i + 1}/${photos.length}: ${photo.filename.substring(0, 30)}...`);
+
+      try {
+        const result = await watermarkGeneratorService.generateForPhoto(photo.id);
+
+        if (result.success) {
+          successCount++;
+        } else {
+          failCount++;
+          console.log(`\n  Failed: ${photo.filename} - ${result.error}`);
+        }
+      } catch (error) {
+        failCount++;
+        console.log(`\n  Error: ${photo.filename} - ${error.message}`);
+      }
+    }
+
+    const duration = ((Date.now() - startTime) / 1000).toFixed(1);
+
+    console.log('\n');
+    console.log('='.repeat(60));
+    console.log('Watermark Generation Complete');
+    console.log('='.repeat(60));
+    console.log(`  Total processed: ${photos.length}`);
+    console.log(`  Successful: ${successCount}`);
+    console.log(`  Failed: ${failCount}`);
+    console.log(`  Duration: ${duration} seconds`);
+    console.log(`  Average: ${(photos.length / parseFloat(duration)).toFixed(1)} photos/second`);
+
+    if (failCount > 0) {
+      console.log('\nSome watermarks failed to generate. Check the errors above.');
+      console.log('You can re-run this script to retry failed photos.');
+    }
+
+    process.exit(failCount > 0 ? 1 : 0);
+  } catch (error) {
+    console.error('\nFatal error:', error.message);
+    console.error(error.stack);
+    process.exit(1);
+  }
+}
+
+// Parse command line arguments
+const args = process.argv.slice(2);
+const eventId = args[0] ? parseInt(args[0], 10) : null;
+
+if (args[0] && isNaN(eventId)) {
+  console.error('Error: eventId must be a number');
+  console.log('Usage: node scripts/generate-watermarks.js [eventId]');
+  process.exit(1);
+}
+
+// Run the script
+generateWatermarks(eventId)
+  .then(() => {
+    process.exit(0);
+  })
+  .catch(error => {
+    console.error('Unhandled error:', error);
+    process.exit(1);
+  });
@@ -252,10 +252,29 @@ function renderBrandFooter(branding) {
 </footer>`;
 }

+function buildSeoMetaTags(seoSettings) {
+  const tags = [];
+  const robotsDirectives = [];
+
+  if (seoSettings.seo_meta_noindex) robotsDirectives.push('noindex');
+  if (seoSettings.seo_meta_nofollow) robotsDirectives.push('nofollow');
+
+  if (robotsDirectives.length > 0) {
+    tags.push(`<meta name="robots" content="${robotsDirectives.join(', ')}" />`);
+  }
+
+  if (seoSettings.seo_meta_noai) {
+    tags.push('<meta name="robots" content="noai, noimageai" />');
+  }
+
+  return tags.join('\n  ');
+}
+
 function buildPublicSiteDocument(payload) {
  const inlineStyles = composeInlineStyles(payload);
  const header = renderBrandHeader(payload.branding);
  const footer = renderBrandFooter(payload.branding);
+  const seoMeta = payload.seoSettings ? buildSeoMetaTags(payload.seoSettings) : '';

  return `<!DOCTYPE html>
 <html lang="en">
@@ -265,6 +284,7 @@ function buildPublicSiteDocument(payload) {
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>${payload.title}</title>
  <meta name="description" content="Curated photo galleries and stories from unforgettable celebrations." />
+  ${seoMeta}
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
@@ -296,6 +316,21 @@ async function handlePublicSiteRequest(req, res, next) {
      return;
    }

+    // Inject SEO meta settings into payload
+    try {
+      const seoRows = await db('app_settings')
+        .where('setting_type', 'seo')
+        .whereIn('setting_key', ['seo_meta_noindex', 'seo_meta_nofollow', 'seo_meta_noai'])
+        .select('setting_key', 'setting_value');
+      const seoSettings = {};
+      for (const row of seoRows) {
+        let val = row.setting_value;
+        if (typeof val === 'string') { try { val = JSON.parse(val); } catch {} }
+        seoSettings[row.setting_key] = val;
+      }
+      payload.seoSettings = seoSettings;
+    } catch {}
+
    const document = buildPublicSiteDocument(payload);

    res.setHeader('Content-Type', 'text/html; charset=utf-8');
@@ -324,8 +359,8 @@ async function initializeRateLimiters() {
 }

 // Note: Rate limiters will be initialized after database connection
-app.use(express.json({ limit: '10gb' }));
-app.use(express.urlencoded({ extended: true, limit: '10gb' }));
+app.use(express.json({ limit: '50mb' }));
+app.use(express.urlencoded({ extended: true, limit: '50mb' }));

 // Request logging for API routes (with timestamps)
 const apiRequestLogger = (req, res, next) => {
@@ -351,8 +386,23 @@ app.use('/api/admin', sessionTimeoutMiddleware);

 // Middleware to set CORS headers for static files
 const setCorsHeaders = (req, res, next) => {
-  res.header('Access-Control-Allow-Origin', req.headers.origin || '*');
-  res.header('Access-Control-Allow-Credentials', 'true');
+  const origin = req.headers.origin;
+  const staticAllowedOrigins = [
+    process.env.FRONTEND_URL || 'http://localhost:3005',
+    process.env.ADMIN_URL || 'http://localhost:3005'
+  ];
+  if (process.env.NODE_ENV === 'development') {
+    staticAllowedOrigins.push(
+      'http://localhost:5173',
+      'http://localhost:3002',
+      'http://localhost:3001',
+      'http://localhost:3000'
+    );
+  }
+  if (origin && staticAllowedOrigins.indexOf(origin) !== -1) {
+    res.header('Access-Control-Allow-Origin', origin);
+    res.header('Access-Control-Allow-Credentials', 'true');
+  }
  res.header('Cross-Origin-Resource-Policy', 'cross-origin');
  next();
 };
@@ -395,24 +445,37 @@ if (process.env.NODE_ENV === 'development') {
  });
 }

+// robots.txt endpoint (dynamic, served from DB settings)
+const { generateRobotsTxt } = require('./src/services/robotsTxtService');
+app.get('/robots.txt', async (req, res) => {
+  try {
+    const robotsTxt = await generateRobotsTxt();
+    res.setHeader('Content-Type', 'text/plain');
+    res.setHeader('Cache-Control', 'public, max-age=3600');
+    res.status(200).send(robotsTxt);
+  } catch (error) {
+    logger.error('Failed to generate robots.txt', { error: error.message });
+    // Safe default for a private photo platform
+    res.setHeader('Content-Type', 'text/plain');
+    res.status(200).send('User-agent: *\nDisallow: /\n');
+  }
+});
+
 // Health check endpoint
 app.get('/health', async (req, res) => {
  try {
    // Check database connectivity
    await db.raw('SELECT 1');
-    
-    res.json({ 
-      status: 'ok', 
-      database: 'connected',
-      timestamp: new Date().toISOString() 
+
+    res.json({
+      status: 'ok',
+      timestamp: new Date().toISOString()
    });
  } catch (error) {
    logger.error('Health check failed:', error);
-    res.status(503).json({ 
-      status: 'error', 
-      database: 'disconnected',
-      error: error.message,
-      timestamp: new Date().toISOString() 
+    res.status(503).json({
+      status: 'error',
+      timestamp: new Date().toISOString()
    });
  }
 });
@@ -432,11 +495,13 @@ app.use('/api/admin/database-backup', require('./src/routes/adminDatabaseBackup'
 app.use('/api/admin/feedback', require('./src/routes/adminFeedback'));
 app.use('/api/admin/image-security', require('./src/routes/adminImageSecurity'));
 app.use('/api/admin/thumbnails', require('./src/routes/adminThumbnails'));
+app.use('/api/admin/photos', require('./src/routes/adminPhotoDimensions'));
 app.use('/api/admin/photos', require('./src/routes/adminPhotos'));
 app.use('/api/admin/photo-export', require('./src/routes/adminPhotoExport'));
 app.use('/api/admin/css-templates', require('./src/routes/adminCssTemplates'));
 app.use('/api/admin/events', require('./src/routes/adminEventRename'));
 app.use('/api/admin/users', require('./src/routes/adminUsers'));
+app.use('/api/admin/event-types', require('./src/routes/adminEventTypes'));
 app.use('/api/invite', require('./src/routes/acceptInvite'));
 app.use('/api/public/settings', require('./src/routes/publicSettings'));
 app.use('/api/public', require('./src/routes/publicCMS'));
@@ -168,9 +168,10 @@ async function galleryAuth(req, res, next) {
      return res.status(404).json({ error: 'Gallery not found or expired' });
    }
    
-    // Check if gallery has expired
-    if (new Date(event.expires_at) < new Date()) {
-      return res.status(410).json({ 
+    // Check if gallery has expired (only if expires_at is set)
+    // Galleries with null expires_at never expire
+    if (event.expires_at && new Date(event.expires_at) < new Date()) {
+      return res.status(410).json({
        error: 'Gallery has expired',
        code: 'GALLERY_EXPIRED'
      });
@@ -85,18 +85,28 @@ async function sessionTimeoutMiddleware(req, res, next) {
    const now = Date.now();
    const lastActivity = sessions.get(token);
    const timeout = await getSessionTimeout();
-    
-    // If session exists, check if it's expired
+
    if (lastActivity) {
+      // Existing session — check if idle too long
      if (now - lastActivity > timeout) {
        sessions.delete(token);
-        return res.status(401).json({ 
-          error: 'Session expired', 
-          code: 'SESSION_TIMEOUT' 
+        return res.status(401).json({
+          error: 'Session expired',
+          code: 'SESSION_TIMEOUT'
+        });
+      }
+    } else {
+      // First request with this token — check if token was issued longer ago than the timeout
+      // This prevents old/stolen tokens from bypassing session timeout after server restart
+      const tokenIssuedAt = (decoded.iat || 0) * 1000; // iat is in seconds
+      if (now - tokenIssuedAt > timeout) {
+        return res.status(401).json({
+          error: 'Session expired',
+          code: 'SESSION_TIMEOUT'
        });
      }
    }
-    
+
    // Update last activity
    sessions.set(token, now);
    
@@ -122,13 +122,15 @@ router.post('/change-password', [
  // Hash new password with more rounds
  const newPasswordHash = await bcrypt.hash(newPassword, 12);

-  // Update password and clear must_change_password flag
+  // Update password, set password_changed_at to invalidate existing tokens, and clear must_change_password flag
+  const now = new Date();
  await db('admin_users')
    .where('id', userId)
    .update({
      password_hash: newPasswordHash,
+      password_changed_at: now,
      must_change_password: false,
-      updated_at: new Date()
+      updated_at: now
    });

  // Log activity
@@ -106,42 +106,53 @@ router.post('/', adminAuth, requirePermission('settings.edit'), [

 // Update a category
 router.put('/:id', adminAuth, requirePermission('settings.edit'), [
-  body('name').notEmpty().withMessage('Category name is required')
+  body('name').notEmpty().withMessage('Category name is required'),
+  body('hero_photo_id').optional({ nullable: true }).custom((value) => {
+    if (value === null || value === undefined) return true;
+    return Number.isInteger(Number(value));
+  }).withMessage('hero_photo_id must be an integer or null')
 ], async (req, res) => {
  try {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() });
    }
-    
+
    const { id } = req.params;
-    const { name } = req.body;
-    
+    const { name, hero_photo_id } = req.body;
+
    const category = await db('photo_categories').where('id', id).first();
    if (!category) {
      return res.status(404).json({ error: 'Category not found' });
    }
-    
+
+    const updateData = {
+      name,
+      slug: name.toLowerCase()
+        .replace(/[^\w\s-]/g, '')
+        .replace(/\s+/g, '-')
+        .replace(/-+/g, '-')
+        .trim()
+    };
+
+    // Update hero_photo_id if provided (including null to clear it)
+    if (Object.prototype.hasOwnProperty.call(req.body, 'hero_photo_id')) {
+      updateData.hero_photo_id = hero_photo_id || null;
+    }
+
    await db('photo_categories')
      .where('id', id)
-      .update({
-        name,
-        slug: name.toLowerCase()
-          .replace(/[^\w\s-]/g, '')
-          .replace(/\s+/g, '-')
-          .replace(/-+/g, '-')
-          .trim()
-      });
-    
+      .update(updateData);
+
    const updated = await db('photo_categories').where('id', id).first();
-    
+
    // Log activity
    await logActivity('category_updated',
-      { categoryName: name },
+      { categoryName: name, heroPhotoId: hero_photo_id },
      category.event_id,
      { type: 'admin', id: req.admin.id, name: req.admin.username }
    );
-    
+
    res.json(updated);
  } catch (error) {
    console.error('Error updating category:', error);
@@ -149,6 +160,55 @@ router.put('/:id', adminAuth, requirePermission('settings.edit'), [
  }
 });

+// Set category hero photo (#163)
+router.put('/:id/hero', adminAuth, requirePermission('settings.edit'), [
+  body('hero_photo_id').optional({ nullable: true }).custom((value) => {
+    if (value === null || value === undefined) return true;
+    return Number.isInteger(Number(value));
+  }).withMessage('hero_photo_id must be an integer or null')
+], async (req, res) => {
+  try {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { id } = req.params;
+    const { hero_photo_id } = req.body;
+
+    const category = await db('photo_categories').where('id', id).first();
+    if (!category) {
+      return res.status(404).json({ error: 'Category not found' });
+    }
+
+    // If hero_photo_id is provided, verify it belongs to a photo in this category
+    if (hero_photo_id) {
+      const photo = await db('photos').where('id', hero_photo_id).first();
+      if (!photo) {
+        return res.status(404).json({ error: 'Photo not found' });
+      }
+    }
+
+    await db('photo_categories')
+      .where('id', id)
+      .update({ hero_photo_id: hero_photo_id || null });
+
+    const updated = await db('photo_categories').where('id', id).first();
+
+    // Log activity
+    await logActivity('category_hero_updated',
+      { categoryName: category.name, heroPhotoId: hero_photo_id },
+      category.event_id,
+      { type: 'admin', id: req.admin.id, name: req.admin.username }
+    );
+
+    res.json(updated);
+  } catch (error) {
+    console.error('Error updating category hero:', error);
+    res.status(500).json({ error: 'Failed to update category hero' });
+  }
+});
+
 // Delete a category
 router.delete('/:id', adminAuth, requirePermission('settings.edit'), async (req, res) => {
  try {
@@ -0,0 +1,258 @@
+/**
+ * Admin Event Types Routes
+ * CRUD operations for managing customizable event types
+ *
+ * @module routes/adminEventTypes
+ */
+
+const express = require('express');
+const { body, param, validationResult } = require('express-validator');
+const { logActivity } = require('../database/db');
+const { adminAuth } = require('../middleware/auth');
+const { requirePermission } = require('../middleware/permissions');
+const eventTypeService = require('../services/eventTypeService');
+const logger = require('../utils/logger');
+
+const router = express.Router();
+
+/**
+ * GET /admin/event-types
+ * Get all event types (for admin management)
+ */
+router.get('/', adminAuth, requirePermission('settings.view'), async (req, res) => {
+  try {
+    const includeInactive = req.query.includeInactive === 'true';
+    const eventTypes = await eventTypeService.getAllEventTypes({
+      activeOnly: !includeInactive
+    });
+
+    res.json({ eventTypes });
+  } catch (error) {
+    logger.error('Error fetching event types:', { error: error.message });
+    res.status(500).json({ error: 'Failed to fetch event types' });
+  }
+});
+
+/**
+ * GET /admin/event-types/active
+ * Get only active event types (for dropdowns/selection)
+ */
+router.get('/active', adminAuth, async (req, res) => {
+  try {
+    const eventTypes = await eventTypeService.getActiveEventTypes();
+    res.json({ eventTypes });
+  } catch (error) {
+    logger.error('Error fetching active event types:', { error: error.message });
+    res.status(500).json({ error: 'Failed to fetch event types' });
+  }
+});
+
+/**
+ * GET /admin/event-types/:id
+ * Get a single event type by ID
+ */
+router.get('/:id', adminAuth, requirePermission('settings.view'), [
+  param('id').isInt().withMessage('Invalid event type ID')
+], async (req, res) => {
+  try {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { id } = req.params;
+    const eventType = await eventTypeService.getEventTypeById(parseInt(id));
+
+    if (!eventType) {
+      return res.status(404).json({ error: 'Event type not found' });
+    }
+
+    res.json(eventType);
+  } catch (error) {
+    logger.error('Error fetching event type:', { error: error.message });
+    res.status(500).json({ error: 'Failed to fetch event type' });
+  }
+});
+
+/**
+ * POST /admin/event-types
+ * Create a new event type
+ */
+router.post('/', adminAuth, requirePermission('settings.edit'), [
+  body('name').notEmpty().trim().withMessage('Name is required'),
+  body('slug_prefix')
+    .notEmpty()
+    .trim()
+    .isLength({ min: 2, max: 50 })
+    .matches(/^[a-z0-9-]+$/i)
+    .withMessage('Slug prefix must be 2-50 characters and contain only letters, numbers, and hyphens'),
+  body('emoji').optional().trim(),
+  body('theme_preset').optional().trim(),
+  body('theme_config').optional(),
+  body('display_order').optional().isInt({ min: 0 })
+], async (req, res) => {
+  try {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const {
+      name,
+      slug_prefix,
+      emoji,
+      theme_preset,
+      theme_config,
+      display_order
+    } = req.body;
+
+    const eventType = await eventTypeService.createEventType({
+      name,
+      slug_prefix,
+      emoji,
+      theme_preset,
+      theme_config,
+      display_order
+    });
+
+    // Log activity
+    await logActivity('event_type_created',
+      { name, slug_prefix },
+      null,
+      { type: 'admin', id: req.admin.id, name: req.admin.username }
+    );
+
+    res.status(201).json(eventType);
+  } catch (error) {
+    logger.error('Error creating event type:', { error: error.message });
+
+    if (error.code === 'DUPLICATE_SLUG_PREFIX') {
+      return res.status(400).json({ error: error.message });
+    }
+
+    res.status(500).json({ error: 'Failed to create event type' });
+  }
+});
+
+/**
+ * PUT /admin/event-types/:id
+ * Update an event type
+ */
+router.put('/:id', adminAuth, requirePermission('settings.edit'), [
+  param('id').isInt().withMessage('Invalid event type ID'),
+  body('name').optional().notEmpty().trim().withMessage('Name cannot be empty'),
+  body('slug_prefix')
+    .optional()
+    .trim()
+    .isLength({ min: 2, max: 50 })
+    .matches(/^[a-z0-9-]+$/i)
+    .withMessage('Slug prefix must be 2-50 characters and contain only letters, numbers, and hyphens'),
+  body('emoji').optional().trim(),
+  body('theme_preset').optional().trim(),
+  body('theme_config').optional(),
+  body('display_order').optional().isInt({ min: 0 }),
+  body('is_active').optional().isBoolean()
+], async (req, res) => {
+  try {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { id } = req.params;
+    const updates = req.body;
+
+    const eventType = await eventTypeService.updateEventType(parseInt(id), updates);
+
+    // Log activity
+    await logActivity('event_type_updated',
+      { id, changes: Object.keys(updates) },
+      null,
+      { type: 'admin', id: req.admin.id, name: req.admin.username }
+    );
+
+    res.json(eventType);
+  } catch (error) {
+    logger.error('Error updating event type:', { error: error.message });
+
+    if (error.code === 'NOT_FOUND') {
+      return res.status(404).json({ error: error.message });
+    }
+    if (error.code === 'DUPLICATE_SLUG_PREFIX') {
+      return res.status(400).json({ error: error.message });
+    }
+
+    res.status(500).json({ error: 'Failed to update event type' });
+  }
+});
+
+/**
+ * DELETE /admin/event-types/:id
+ * Delete an event type (only non-system types with no events)
+ */
+router.delete('/:id', adminAuth, requirePermission('settings.edit'), [
+  param('id').isInt().withMessage('Invalid event type ID')
+], async (req, res) => {
+  try {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { id } = req.params;
+    const result = await eventTypeService.deleteEventType(parseInt(id));
+
+    // Log activity
+    await logActivity('event_type_deleted',
+      { id, name: result.deleted.name, slug_prefix: result.deleted.slug_prefix },
+      null,
+      { type: 'admin', id: req.admin.id, name: req.admin.username }
+    );
+
+    res.json({ message: 'Event type deleted successfully' });
+  } catch (error) {
+    logger.error('Error deleting event type:', { error: error.message });
+
+    if (error.code === 'NOT_FOUND') {
+      return res.status(404).json({ error: error.message });
+    }
+    if (error.code === 'SYSTEM_TYPE' || error.code === 'IN_USE') {
+      return res.status(400).json({ error: error.message });
+    }
+
+    res.status(500).json({ error: 'Failed to delete event type' });
+  }
+});
+
+/**
+ * POST /admin/event-types/reorder
+ * Reorder event types by providing an array of IDs in the desired order
+ */
+router.post('/reorder', adminAuth, requirePermission('settings.edit'), [
+  body('orderedIds').isArray().withMessage('orderedIds must be an array'),
+  body('orderedIds.*').isInt().withMessage('Each ID must be an integer')
+], async (req, res) => {
+  try {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { orderedIds } = req.body;
+    const eventTypes = await eventTypeService.reorderEventTypes(orderedIds);
+
+    // Log activity
+    await logActivity('event_types_reordered',
+      { newOrder: orderedIds },
+      null,
+      { type: 'admin', id: req.admin.id, name: req.admin.username }
+    );
+
+    res.json({ eventTypes, message: 'Event types reordered successfully' });
+  } catch (error) {
+    logger.error('Error reordering event types:', { error: error.message });
+    res.status(500).json({ error: 'Failed to reorder event types' });
+  }
+});
+
+module.exports = router;
@@ -6,8 +6,10 @@ const { buildShareLinkVariants } = require('../services/shareLinkService');
 const { requirePermission } = require('../middleware/permissions');

 // Enhanced event creation with password validation
+// Note: This is a partial/reference file - dynamic event type validation should be implemented
+// similar to adminEvents.js using eventTypeService.isValidEventType()
 router.post('/', adminAuth, requirePermission('events.create'), [
-  body('event_type').isIn(['wedding', 'birthday', 'corporate', 'other']),
+  body('event_type').notEmpty().trim(), // Dynamic validation via eventTypeService
  body('event_name').notEmpty().trim(),
  body('event_date').isDate(),
  body('customer_email').isEmail().normalizeEmail(),
@@ -1,5 +1,5 @@
 const express = require('express');
-const { body, query, validationResult } = require('express-validator');
+const { body, validationResult } = require('express-validator');
 const { db, logActivity } = require('../database/db');
 const { formatBoolean } = require('../utils/dbCompat');
 const { adminAuth } = require('../middleware/auth');
@@ -9,6 +9,7 @@ const bcrypt = require('bcrypt');
 const crypto = require('crypto');
 const fs = require('fs').promises;
 const path = require('path');
+const multer = require('multer');
 const { archiveEvent } = require('../services/archiveService');
 const { queueEmail } = require('../services/emailProcessor');
 const { escapeLikePattern } = require('../utils/sqlSecurity');
@@ -16,7 +17,48 @@ const { escapeLikePattern } = require('../utils/sqlSecurity');
 const { validatePasswordInContext, getBcryptRounds } = require('../utils/passwordValidation');
 const logger = require('../utils/logger');
 const { buildShareLinkVariants } = require('../services/shareLinkService');
-const { parseBooleanInput, parseStringInput, parseJsonInput } = require('../utils/parsers');
+const { parseBooleanInput, parseStringInput } = require('../utils/parsers');
+const eventTypeService = require('../services/eventTypeService');
+const { validateFileType } = require('../utils/fileSecurityUtils');
+
+// Shared validator for hero_image_anchor – accepts legacy keywords or "X% Y%" focal point
+const validateHeroImageAnchor = (value) => {
+  if (['top', 'center', 'bottom'].includes(value)) return true;
+  if (typeof value === 'string' && /^\d{1,3}%\s+\d{1,3}%$/.test(value)) {
+    const [x, y] = value.split(/\s+/).map(v => parseInt(v));
+    if (x >= 0 && x <= 100 && y >= 0 && y <= 100) return true;
+  }
+  throw new Error('Must be top, center, bottom, or "X% Y%" (0-100)');
+};
+
+// Get storage path from environment or default
+const getStoragePath = () => process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');
+
+// Configure multer for event logo uploads
+const eventLogoStorage = multer.diskStorage({
+  destination: async (req, file, cb) => {
+    const uploadDir = path.join(getStoragePath(), 'uploads/logos/events');
+    await fs.mkdir(uploadDir, { recursive: true });
+    cb(null, uploadDir);
+  },
+  filename: (req, file, cb) => {
+    const ext = path.extname(file.originalname);
+    cb(null, `event-${req.params.id}-logo-${Date.now()}${ext}`);
+  }
+});
+
+const eventLogoUpload = multer({
+  storage: eventLogoStorage,
+  limits: { fileSize: 5 * 1024 * 1024 }, // 5MB
+  fileFilter: (req, file, cb) => {
+    const allowedMimeTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml'];
+    if (validateFileType(file.originalname, file.mimetype, allowedMimeTypes)) {
+      return cb(null, true);
+    } else {
+      cb(new Error('Only JPEG, PNG, GIF and SVG image files are allowed'));
+    }
+  }
+});

 // Helper to get event field requirements from settings
 const getEventFieldRequirements = async () => {
@@ -25,14 +67,18 @@ const getEventFieldRequirements = async () => {
      .whereIn('setting_key', [
        'event_require_customer_name',
        'event_require_customer_email',
-        'event_require_admin_email'
+        'event_require_admin_email',
+        'event_require_event_date',
+        'event_require_expiration'
      ])
      .select('setting_key', 'setting_value');

    const requirements = {
      require_customer_name: true,
      require_customer_email: true,
-      require_admin_email: true
+      require_admin_email: true,
+      require_event_date: true,
+      require_expiration: true
    };

    settings.forEach(s => {
@@ -47,6 +93,8 @@ const getEventFieldRequirements = async () => {
      if (s.setting_key === 'event_require_customer_name') requirements.require_customer_name = value;
      if (s.setting_key === 'event_require_customer_email') requirements.require_customer_email = value;
      if (s.setting_key === 'event_require_admin_email') requirements.require_admin_email = value;
+      if (s.setting_key === 'event_require_event_date') requirements.require_event_date = value;
+      if (s.setting_key === 'event_require_expiration') requirements.require_expiration = value;
    });

    return requirements;
@@ -55,7 +103,9 @@ const getEventFieldRequirements = async () => {
    return {
      require_customer_name: true,
      require_customer_email: true,
-      require_admin_email: true
+      require_admin_email: true,
+      require_event_date: true,
+      require_expiration: true
    };
  }
 };
@@ -104,12 +154,18 @@ const hasCustomerContactColumns = async () => {

 // Create new event
 router.post('/', adminAuth, requirePermission('events.create'), [
-  body('event_type').isIn(['wedding', 'birthday', 'corporate', 'other']),
+  body('event_type').notEmpty().trim().custom(async (value) => {
+    const isValid = await eventTypeService.isValidEventType(value);
+    if (!isValid) {
+      throw new Error('Invalid event type');
+    }
+    return true;
+  }),
  body('event_name').notEmpty().trim(),
-  body('event_date').isDate(),
+  body('event_date').optional({ values: 'falsy' }).isDate(),
  body('customer_name').optional().trim(),
-  body('customer_email').optional().isEmail().normalizeEmail(),
-  body('admin_email').optional().isEmail().normalizeEmail(),
+  body('customer_email').optional({ values: 'falsy' }).isEmail().normalizeEmail(),
+  body('admin_email').optional({ values: 'falsy' }).isEmail().normalizeEmail(),
  body('require_password').optional().isBoolean(),
  body('password').optional().isString().custom((value, { req }) => {
    const input = req.body.require_password;
@@ -143,7 +199,16 @@ router.post('/', adminAuth, requirePermission('events.create'), [
  body('disable_right_click').optional().isBoolean(),
  body('watermark_downloads').optional().isBoolean(),
  body('watermark_text').optional().trim(),
-  body('css_template_id').optional({ nullable: true, checkFalsy: true }).isInt()
+  body('css_template_id').optional({ nullable: true, checkFalsy: true }).isInt(),
+  // Hero logo settings
+  body('hero_logo_visible').optional().isBoolean(),
+  body('hero_logo_size').optional().isIn(['small', 'medium', 'large', 'xlarge']),
+  body('hero_logo_position').optional().isIn(['top', 'center', 'bottom']),
+  // Header style settings (decoupled from layout)
+  body('header_style').optional().isIn(['hero', 'standard', 'minimal', 'none']),
+  body('hero_divider_style').optional().isIn(['wave', 'straight', 'angle', 'curve', 'none']),
+  // Hero image anchor position (#162) – accepts legacy keywords or "X% Y%" focal point
+  body('hero_image_anchor').optional().custom(validateHeroImageAnchor)
 ], async (req, res) => {
  try {
    logger.debug('Create event request body', { body: req.body });
@@ -182,7 +247,16 @@ router.post('/', adminAuth, requirePermission('events.create'), [
      moderate_comments = true,
      show_feedback_to_guests = true,
      // CSS Template
-      css_template_id = null
+      css_template_id = null,
+      // Hero logo settings
+      hero_logo_visible = true,
+      hero_logo_size = 'medium',
+      hero_logo_position = 'top',
+      // Header style settings
+      header_style = 'standard',
+      hero_divider_style = 'wave',
+      // Hero image anchor position (#162)
+      hero_image_anchor = 'center'
    } = req.body;

    const customerName = getCustomerNameFromPayload(req.body);
@@ -201,6 +275,9 @@ router.post('/', adminAuth, requirePermission('events.create'), [
    if (fieldRequirements.require_admin_email && !admin_email) {
      validationErrors.push({ path: 'admin_email', msg: 'Admin email is required' });
    }
+    if (fieldRequirements.require_event_date && !event_date) {
+      validationErrors.push({ path: 'event_date', msg: 'Event date is required' });
+    }

    if (validationErrors.length > 0) {
      return res.status(400).json({ errors: validationErrors });
@@ -245,10 +322,13 @@ router.post('/', adminAuth, requirePermission('events.create'), [
      .replace(/[^a-z0-9]/g, '-') // Replace non-alphanumeric with dash
      .replace(/-+/g, '-')         // Replace multiple dashes with single dash
      .replace(/^-|-$/g, '');      // Remove leading/trailing dashes
-    const baseSlug = `${event_type}-${processedEventName}-${event_date}`;
+
+    // Use event_date in slug if provided, otherwise use random suffix
+    const slugSuffix = event_date || crypto.randomBytes(3).toString('hex');
+    const baseSlug = `${event_type}-${processedEventName}-${slugSuffix}`;
    let slug = baseSlug;
    let counter = 1;
-    
+
    while (await db('events').where({ slug }).first()) {
      slug = `${baseSlug}-${counter}`;
      counter++;
@@ -256,7 +336,7 @@ router.post('/', adminAuth, requirePermission('events.create'), [
    
    // Generate share link respecting configured format
    const shareToken = crypto.randomBytes(16).toString('hex');
-    const { sharePath, shareUrl, shareLinkToStore } = await buildShareLinkVariants({ slug, shareToken });
+    const { shareUrl, shareLinkToStore } = await buildShareLinkVariants({ slug, shareToken });
    
    // Hash password with configurable rounds (random placeholder when not required)
    const password_hash = requirePassword
@@ -264,15 +344,20 @@ router.post('/', adminAuth, requirePermission('events.create'), [
      : await bcrypt.hash(crypto.randomBytes(32).toString('hex'), getBcryptRounds());
    
    // Calculate expiration date (days after event date)
-    // Parse YYYY-MM-DD format as local date to avoid timezone issues
-    let expires_at;
-    if (event_date.match(/^\d{4}-\d{2}-\d{2}$/)) {
-      const [year, month, day] = event_date.split('-').map(num => parseInt(num, 10));
-      expires_at = new Date(year, month - 1, day);
-    } else {
-      expires_at = new Date(event_date);
+    // If expiration is not required, expires_at will be null (never expires)
+    // If event_date is not provided, use current date as base for expiration
+    let expires_at = null;
+    if (fieldRequirements.require_expiration) {
+      const baseDate = event_date || new Date().toISOString().split('T')[0];
+      // Parse YYYY-MM-DD format as local date to avoid timezone issues
+      if (baseDate.match(/^\d{4}-\d{2}-\d{2}$/)) {
+        const [year, month, day] = baseDate.split('-').map(num => parseInt(num, 10));
+        expires_at = new Date(year, month - 1, day);
+      } else {
+        expires_at = new Date(baseDate);
+      }
+      expires_at.setDate(expires_at.getDate() + parseInt(expiration_days, 10));
    }
-    expires_at.setDate(expires_at.getDate() + parseInt(expiration_days, 10));
    
    // Create folder structure
    const storagePath = process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');
@@ -280,22 +365,42 @@ router.post('/', adminAuth, requirePermission('events.create'), [
    await fs.mkdir(path.join(eventPath, 'collages'), { recursive: true });
    await fs.mkdir(path.join(eventPath, 'individual'), { recursive: true });
    
+    // Sync header_style / hero_divider_style from color_theme JSON when not
+    // explicitly provided in the request body (#158).
+    let effectiveHeaderStyle = header_style;
+    let effectiveDividerStyle = hero_divider_style;
+    if (color_theme && (!req.body.header_style || !req.body.hero_divider_style)) {
+      try {
+        if (typeof color_theme === 'string' && color_theme.startsWith('{')) {
+          const parsed = JSON.parse(color_theme);
+          if (!req.body.header_style && parsed.headerStyle) {
+            effectiveHeaderStyle = parsed.headerStyle;
+          }
+          if (!req.body.hero_divider_style && parsed.heroDividerStyle) {
+            effectiveDividerStyle = parsed.heroDividerStyle;
+          }
+        }
+      } catch (_) {
+        // color_theme is not JSON – nothing to extract
+      }
+    }
+
    // Insert into database
    const insertResult = await db('events').insert({
      slug,
      event_type,
      event_name,
-      event_date,
+      event_date: event_date || null,
      ...(customerColumnsAvailable ? { customer_name: customerName, customer_email: customerEmail } : {}),
-      host_name: customerName,
-      host_email: customerEmail,
-      admin_email,
+      host_name: customerName || null,
+      host_email: customerEmail || null,
+      admin_email: admin_email || null,
      password_hash,
      welcome_message,
      color_theme,
      share_link: shareLinkToStore,
      share_token: shareToken,
-      expires_at: expires_at.toISOString(),
+      expires_at: expires_at ? expires_at.toISOString() : null,
      created_at: new Date().toISOString(),
      created_by: req.admin.id,
      allow_user_uploads,
@@ -305,7 +410,13 @@ router.post('/', adminAuth, requirePermission('events.create'), [
      watermark_downloads: formatBoolean(watermark_downloads !== undefined ? watermark_downloads : false),
      watermark_text,
      require_password: formatBoolean(requirePassword),
-      css_template_id: css_template_id || null
+      css_template_id: css_template_id || null,
+      hero_logo_visible: formatBoolean(hero_logo_visible !== undefined ? hero_logo_visible : true),
+      hero_logo_size: hero_logo_size || 'medium',
+      hero_logo_position: hero_logo_position || 'top',
+      header_style: effectiveHeaderStyle || 'standard',
+      hero_divider_style: effectiveDividerStyle || 'wave',
+      hero_image_anchor: hero_image_anchor || 'center'
    }).returning('id');
    
    // Handle both PostgreSQL (returns array of objects) and SQLite (returns array of IDs)
@@ -335,28 +446,30 @@ router.post('/', adminAuth, requirePermission('events.create'), [
      { type: 'admin', id: req.admin.id, name: req.admin.username }
    );
    
-    // Queue creation email
+    // Queue creation email (only if there is a recipient)
    // Language detection is handled by email processor
-    
-    await db('email_queue').insert({
-      event_id: eventId,
-      recipient_email: customerEmail,
-      email_type: 'gallery_created',
-      email_data: JSON.stringify({
-        customer_name: customerName,
-        customer_email: customerEmail,
-        host_name: customerName || (customerEmail ? customerEmail.split('@')[0] : null),
-        event_name,
-        event_date: event_date,  // Pass raw date - will be formatted by email processor
-        gallery_link: shareUrl,
-        gallery_password: requirePassword ? password : 'No password required',
-        expiry_date: expires_at.toISOString(),  // Pass ISO string - will be formatted by email processor
-        welcome_message: welcome_message || ''
-      }),
-      status: 'pending',
-      created_at: new Date()
-      // scheduled_at will use default value
-    });
+
+    if (customerEmail) {
+      await db('email_queue').insert({
+        event_id: eventId,
+        recipient_email: customerEmail,
+        email_type: 'gallery_created',
+        email_data: JSON.stringify({
+          customer_name: customerName,
+          customer_email: customerEmail,
+          host_name: customerName || (customerEmail ? customerEmail.split('@')[0] : null),
+          event_name,
+          event_date: event_date,  // Pass raw date - will be formatted by email processor
+          gallery_link: shareUrl,
+          gallery_password: requirePassword ? password : 'No password required',
+          expiry_date: expires_at ? expires_at.toISOString() : null,  // Pass ISO string - will be formatted by email processor
+          welcome_message: welcome_message || ''
+        }),
+        status: 'pending',
+        created_at: new Date()
+        // scheduled_at will use default value
+      });
+    }
    
    res.json({
      id: eventId,
@@ -367,7 +480,7 @@ router.post('/', adminAuth, requirePermission('events.create'), [
      customer_email: customerEmail,
      require_password: requirePassword,
      share_link: shareUrl,
-      expires_at: expires_at.toISOString(),
+      expires_at: expires_at ? expires_at.toISOString() : null,
      created_at: new Date().toISOString()
    });
  } catch (error) {
@@ -384,8 +497,9 @@ router.get('/', adminAuth, requirePermission('events.view'), async (req, res) =>
    const offset = (page - 1) * limit;
    const search = req.query.search || '';
    const status = req.query.status || 'all';
-    const sortBy = req.query.sortBy || 'created_at';
-    const sortOrder = req.query.sortOrder || 'desc';
+    const allowedSortBy = ['created_at', 'event_name', 'slug', 'updated_at', 'expires_at', 'capture_date'];
+    const sortBy = allowedSortBy.includes(req.query.sortBy) ? req.query.sortBy : 'created_at';
+    const sortOrder = ['asc', 'desc'].includes(req.query.sortOrder) ? req.query.sortOrder : 'desc';

    // Build query
    let query = db('events');
@@ -541,7 +655,7 @@ router.put('/:id', adminAuth, requirePermission('events.edit'), [
  body('event_name').optional().trim().notEmpty(),
  body('admin_email').optional().isEmail(),
  body('is_active').optional().isBoolean(),
-  body('expires_at').optional().isISO8601(),
+  body('expires_at').optional({ nullable: true, checkFalsy: true }).isISO8601(),
  body('welcome_message').optional({ nullable: true, checkFalsy: true }).trim(),
  body('color_theme').optional({ nullable: true }),
  body('allow_user_uploads').optional().isBoolean(),
@@ -573,7 +687,7 @@ router.put('/:id', adminAuth, requirePermission('events.edit'), [
  body('overlay_protection').optional().isBoolean(),
  body('image_quality').optional().isInt({ min: 1, max: 100 }),
  body('fragmentation_level').optional().isInt({ min: 1, max: 10 }),
-  body('password').optional().isString().custom((value, { req }) => {
+  body('password').optional().isString().custom((value) => {
    if (value === undefined || value === null || value === '') {
      return true;
    }
@@ -582,7 +696,16 @@ router.put('/:id', adminAuth, requirePermission('events.edit'), [
    }
    return true;
  }),
-  body('css_template_id').optional({ nullable: true, checkFalsy: true }).isInt()
+  body('css_template_id').optional({ nullable: true, checkFalsy: true }).isInt(),
+  // Hero logo settings
+  body('hero_logo_visible').optional().isBoolean(),
+  body('hero_logo_size').optional().isIn(['small', 'medium', 'large', 'xlarge']),
+  body('hero_logo_position').optional().isIn(['top', 'center', 'bottom']),
+  // Header style settings (decoupled from layout)
+  body('header_style').optional().isIn(['hero', 'standard', 'minimal', 'none']),
+  body('hero_divider_style').optional().isIn(['wave', 'straight', 'angle', 'curve', 'none']),
+  // Hero image anchor position (#162) – accepts legacy keywords or "X% Y%" focal point
+  body('hero_image_anchor').optional().custom(validateHeroImageAnchor)
 ], async (req, res) => {
  try {
    const errors = validationResult(req);
@@ -694,6 +817,43 @@ router.put('/:id', adminAuth, requirePermission('events.edit'), [
      updates.password_hash = await bcrypt.hash(crypto.randomBytes(32).toString('hex'), getBcryptRounds());
    }

+    // Enforce expires_at requirement based on app settings
+    if (Object.prototype.hasOwnProperty.call(updates, 'expires_at')) {
+      if (!updates.expires_at) {
+        const fieldReqs = await getEventFieldRequirements();
+        if (fieldReqs.require_expiration) {
+          return res.status(400).json({ error: 'Expiration date is required.' });
+        }
+        updates.expires_at = null;
+      }
+    }
+
+    // Format hero logo settings if provided
+    if (Object.prototype.hasOwnProperty.call(updates, 'hero_logo_visible')) {
+      updates.hero_logo_visible = formatBoolean(updates.hero_logo_visible);
+    }
+
+    // Sync header_style / hero_divider_style from color_theme JSON when not
+    // explicitly provided in the request body (#158).  This ensures the
+    // database columns stay in sync even if the frontend only sends the
+    // serialised theme object.
+    if (updates.color_theme && !Object.prototype.hasOwnProperty.call(updates, 'header_style')) {
+      try {
+        const themeStr = typeof updates.color_theme === 'string' ? updates.color_theme : '';
+        if (themeStr.startsWith('{')) {
+          const parsed = JSON.parse(themeStr);
+          if (parsed.headerStyle) {
+            updates.header_style = parsed.headerStyle;
+          }
+          if (parsed.heroDividerStyle && !Object.prototype.hasOwnProperty.call(updates, 'hero_divider_style')) {
+            updates.hero_divider_style = parsed.heroDividerStyle;
+          }
+        }
+      } catch (_) {
+        // color_theme is not JSON (e.g. preset name) – nothing to extract
+      }
+    }
+
    // Update event
    await db('events')
      .where('id', id)
@@ -759,7 +919,7 @@ router.delete('/:id', adminAuth, requirePermission('events.delete'), async (req,
      if (event.archive_path) {
        const storagePath = process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');
        const archivePath = path.join(storagePath, event.archive_path);
-        
+
        try {
          const fsPromises = require('fs').promises;
          await fsPromises.unlink(archivePath);
@@ -768,6 +928,16 @@ router.delete('/:id', adminAuth, requirePermission('events.delete'), async (req,
          // Don't fail the transaction if file deletion fails
        }
      }
+
+      // Delete custom event logo if exists
+      if (event.hero_logo_path) {
+        try {
+          const fsPromises = require('fs').promises;
+          await fsPromises.unlink(event.hero_logo_path);
+        } catch (err) {
+          logger.warn('Failed to delete event logo file during event deletion', { path: event.hero_logo_path, error: err.message });
+        }
+      }
    });

    // Log activity (outside transaction)
@@ -927,7 +1097,8 @@ router.post('/:id/resend-email', adminAuth, requirePermission('events.edit'), as
    
    // For resending creation email, we need the actual password
    // First, try to get it from the request body if provided
-    let galleryPassword = req.body.password;
+    // Use optional chaining to handle cases where req.body might be undefined
+    let galleryPassword = req.body?.password;
    
    // If no password provided, we can't decrypt the existing one
    // So we'll show a security message
@@ -1094,4 +1265,103 @@ router.post('/bulk-archive', adminAuth, requirePermission('events.archive'), [
  }
 });

+// Upload event custom logo
+router.post('/:id/logo', adminAuth, requirePermission('events.edit'), eventLogoUpload.single('logo'), async (req, res) => {
+  try {
+    const { id } = req.params;
+
+    // Check if event exists
+    let eventQuery = db('events').where('id', id);
+    if (req.admin.roleName === 'editor') {
+      eventQuery = eventQuery.where('created_by', req.admin.id);
+    }
+    const event = await eventQuery.first();
+    if (!event) {
+      return res.status(404).json({ error: 'Event not found' });
+    }
+
+    if (!req.file) {
+      return res.status(400).json({ error: 'No logo file provided' });
+    }
+
+    // Delete old logo file if exists
+    if (event.hero_logo_path) {
+      try {
+        await fs.unlink(event.hero_logo_path);
+        logger.debug('Deleted old event logo file', { path: event.hero_logo_path });
+      } catch (err) {
+        logger.warn('Failed to delete old event logo file', { path: event.hero_logo_path, error: err.message });
+      }
+    }
+
+    const logoUrl = `/uploads/logos/events/${req.file.filename}`;
+    const logoPath = req.file.path;
+
+    await db('events')
+      .where('id', id)
+      .update({
+        hero_logo_url: logoUrl,
+        hero_logo_path: logoPath
+      });
+
+    await logActivity('event_logo_uploaded',
+      { eventName: event.event_name, filename: req.file.filename },
+      id,
+      { type: 'admin', id: req.admin.id, name: req.admin.username }
+    );
+
+    res.json({
+      message: 'Event logo uploaded successfully',
+      hero_logo_url: logoUrl
+    });
+  } catch (error) {
+    logger.error('Error uploading event logo:', { error: error.message, eventId: req.params.id });
+    res.status(500).json({ error: 'Failed to upload event logo' });
+  }
+});
+
+// Delete event custom logo
+router.delete('/:id/logo', adminAuth, requirePermission('events.edit'), async (req, res) => {
+  try {
+    const { id } = req.params;
+
+    let eventQuery = db('events').where('id', id);
+    if (req.admin.roleName === 'editor') {
+      eventQuery = eventQuery.where('created_by', req.admin.id);
+    }
+    const event = await eventQuery.first();
+    if (!event) {
+      return res.status(404).json({ error: 'Event not found' });
+    }
+
+    // Delete logo file if exists
+    if (event.hero_logo_path) {
+      try {
+        await fs.unlink(event.hero_logo_path);
+        logger.debug('Deleted event logo file', { path: event.hero_logo_path });
+      } catch (err) {
+        logger.warn('Failed to delete event logo file', { path: event.hero_logo_path, error: err.message });
+      }
+    }
+
+    await db('events')
+      .where('id', id)
+      .update({
+        hero_logo_url: null,
+        hero_logo_path: null
+      });
+
+    await logActivity('event_logo_removed',
+      { eventName: event.event_name },
+      id,
+      { type: 'admin', id: req.admin.id, name: req.admin.username }
+    );
+
+    res.json({ message: 'Event logo removed successfully' });
+  } catch (error) {
+    logger.error('Error deleting event logo:', { error: error.message, eventId: req.params.id });
+    res.status(500).json({ error: 'Failed to delete event logo' });
+  }
+});
+
 module.exports = router;
@@ -0,0 +1,151 @@
+const express = require('express');
+const router = express.Router();
+const { db } = require('../database/db');
+const { adminAuth } = require('../middleware/auth');
+const { requirePermission } = require('../middleware/permissions');
+const path = require('path');
+const fs = require('fs').promises;
+const logger = require('../utils/logger');
+
+const getStoragePath = () => process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');
+
+// Module-level progress state
+let repairProgress = {
+  isRunning: false,
+  lastResult: null
+};
+
+// Repair photo dimensions (background job)
+router.post('/repair-dimensions', adminAuth, requirePermission('photos.edit'), async (req, res) => {
+  try {
+    if (repairProgress.isRunning) {
+      return res.status(409).json({ error: 'Repair is already running' });
+    }
+
+    const photos = await db('photos')
+      .where(function () {
+        this.whereNull('width').orWhereNull('height');
+      })
+      .where(function () {
+        this.where('media_type', '!=', 'video').orWhereNull('media_type');
+      })
+      .select('id', 'path', 'filename');
+
+    if (photos.length === 0) {
+      return res.json({ message: 'No photos need dimension repair', count: 0 });
+    }
+
+    // Return immediately
+    res.json({
+      message: `Started repairing dimensions for ${photos.length} photos`,
+      count: photos.length
+    });
+
+    // Process in background
+    repairProgress.isRunning = true;
+    repairProgress.lastResult = null;
+
+    setImmediate(async () => {
+      let sharp;
+      try {
+        sharp = require('sharp');
+      } catch (err) {
+        logger.error('Sharp not available for dimension repair:', err.message);
+        repairProgress.isRunning = false;
+        repairProgress.lastResult = { success: 0, failed: 0, error: 'Sharp not available' };
+        return;
+      }
+
+      let successCount = 0;
+      let errorCount = 0;
+
+      for (const photo of photos) {
+        try {
+          if (!photo.path) {
+            logger.warn(`Photo ${photo.id} has no path, skipping dimension repair`);
+            errorCount++;
+            continue;
+          }
+
+          const storagePath = getStoragePath();
+          const fullPath = path.join(storagePath, 'events/active', photo.path);
+
+          try {
+            await fs.access(fullPath);
+          } catch (err) {
+            logger.warn(`File not found for photo ${photo.id}: ${fullPath}`);
+            errorCount++;
+            continue;
+          }
+
+          const metadata = await sharp(fullPath).metadata();
+
+          if (metadata.width && metadata.height) {
+            await db('photos')
+              .where({ id: photo.id })
+              .update({
+                width: metadata.width,
+                height: metadata.height,
+                updated_at: db.fn.now()
+              });
+            successCount++;
+
+            if (successCount % 50 === 0) {
+              logger.info(`Dimension repair progress: ${successCount} updated...`);
+            }
+          } else {
+            logger.warn(`Could not extract dimensions for photo ${photo.id}`);
+            errorCount++;
+          }
+        } catch (error) {
+          logger.error(`Error repairing dimensions for photo ${photo.id}:`, error);
+          errorCount++;
+        }
+      }
+
+      repairProgress.isRunning = false;
+      repairProgress.lastResult = { success: successCount, failed: errorCount };
+      logger.info(`Dimension repair complete: ${successCount} success, ${errorCount} errors`);
+    });
+  } catch (error) {
+    logger.error('Error starting dimension repair:', error);
+    res.status(500).json({ error: 'Failed to start dimension repair' });
+  }
+});
+
+// Get dimension repair status
+router.get('/repair-dimensions/status', adminAuth, requirePermission('photos.view'), async (req, res) => {
+  try {
+    const totalPhotos = await db('photos')
+      .where(function () {
+        this.where('media_type', '!=', 'video').orWhereNull('media_type');
+      })
+      .count('id as count')
+      .first();
+
+    const withDimensions = await db('photos')
+      .where(function () {
+        this.where('media_type', '!=', 'video').orWhereNull('media_type');
+      })
+      .whereNotNull('width')
+      .whereNotNull('height')
+      .count('id as count')
+      .first();
+
+    const total = Number(totalPhotos.count);
+    const withDims = Number(withDimensions.count);
+
+    res.json({
+      total,
+      withDimensions: withDims,
+      withoutDimensions: total - withDims,
+      isRunning: repairProgress.isRunning,
+      lastResult: repairProgress.lastResult
+    });
+  } catch (error) {
+    logger.error('Error fetching dimension repair status:', error);
+    res.status(500).json({ error: 'Failed to fetch dimension repair status' });
+  }
+});
+
+module.exports = router;
@@ -71,12 +71,12 @@ router.get('/:eventId/filtered', adminAuth, requirePermission('photos.view'), [
    // Build filtered query
    const filterBuilder = new PhotoFilterBuilder(
      db('photos')
-        .leftJoin('categories', 'photos.category_id', 'categories.id')
+        .leftJoin('photo_categories', 'photos.category_id', 'photo_categories.id')
        .select(
          'photos.id',
          'photos.filename',
          'photos.original_filename',
-          'photos.file_path',
+          'photos.path',
          'photos.average_rating',
          'photos.feedback_count',
          'photos.like_count',
@@ -84,8 +84,8 @@ router.get('/:eventId/filtered', adminAuth, requirePermission('photos.view'), [
          'photos.comment_count',
          'photos.width',
          'photos.height',
-          'photos.created_at',
-          'categories.name as category_name'
+          'photos.uploaded_at',
+          'photo_categories.name as category_name'
        ),
      eventId
    );
@@ -5,13 +5,15 @@ const fs = require('fs').promises;
 const { db, logActivity } = require('../database/db');
 const { adminAuth } = require('../middleware/auth');
 const { requirePermission } = require('../middleware/permissions');
-const { generateThumbnail, ensureThumbnail } = require('../services/imageProcessor');
+const { generateThumbnail, ensureThumbnail, extractCaptureDate } = require('../services/imageProcessor');
+const { processUploadedVideo, isVideoMimeType } = require('../services/videoProcessor');
 const { generatePhotoFilename } = require('../utils/filenameSanitizer');
 const { escapeLikePattern } = require('../utils/sqlSecurity');
 const { validateUploadedFiles } = require('../middleware/uploadValidation');
-const { getMaxFilesPerUpload } = require('../services/uploadSettings');
+const { getMaxFilesPerUpload, getAllowedMimeTypes } = require('../services/uploadSettings');
 const { processUploadedPhotos } = require('../services/photoProcessor');
 const chunkedUpload = require('../services/chunkedUploadService');
+const watermarkGeneratorService = require('../services/watermarkGeneratorService');
 const router = express.Router();

 // Get storage path from environment or default
@@ -46,47 +48,55 @@ const storage = multer.diskStorage({
  }
 });

-const { validateFileType } = require('../utils/fileSecurityUtils');
+const { validateFileType, createFileUploadValidator } = require('../utils/fileSecurityUtils');

+// Create a multer instance that uses dynamically resolved allowed MIME types.
+// The allowed types are fetched from the database once per request (before multer
+// processes files) and attached to req.allowedMimeTypes so that the fileFilter
+// callback can read them synchronously.
 const upload = multer({
  storage: storage,
  limits: {
    fileSize: 10 * 1024 * 1024 * 1024, // 10GB limit per file to support large videos
    files: 2000, // Hard safety ceiling; actual limit enforced dynamically
-    // Set a reasonable field size limit to prevent memory issues
    fieldSize: 10 * 1024 * 1024, // 10MB for non-file fields
-    // Add part size limits to prevent incomplete uploads
-    parts: 10000, // Maximum number of parts (fields + files)
-    headerPairs: 2000 // Maximum number of header key-value pairs
+    parts: 10000,
+    headerPairs: 2000
  },
  fileFilter: (req, file, cb) => {
-    // Accept images and videos with proper validation
-    const allowedMimeTypes = [
-      'image/jpeg', 'image/png', 'image/webp',
-      'video/mp4', 'video/webm', 'video/quicktime', 'video/x-msvideo'
-    ];
+    // req.allowedMimeTypes is populated by the middleware that runs before multer
+    const allowedMimeTypes = req.allowedMimeTypes || ['image/jpeg', 'image/png', 'image/webp'];

    if (validateFileType(file.originalname, file.mimetype, allowedMimeTypes)) {
      return cb(null, true);
    } else {
-      cb(new Error('Only JPEG, PNG, WebP images and MP4, WebM, MOV, AVI videos are allowed'));
+      cb(new Error('Invalid file type. Check allowed file types in system settings.'));
    }
  },
-  // Add abort on limit to stop processing when limits are exceeded
  abortOnLimit: true
 });

-const { createFileUploadValidator } = require('../utils/fileSecurityUtils');
+// Middleware to resolve allowed MIME types from settings before multer runs
+const resolveAllowedTypes = async (req, res, next) => {
+  try {
+    req.allowedMimeTypes = await getAllowedMimeTypes();
+  } catch (error) {
+    console.error('Failed to resolve allowed MIME types:', error);
+    req.allowedMimeTypes = ['image/jpeg', 'image/png', 'image/webp'];
+  }
+  next();
+};

-// Create content validator middleware
-const validateUploadContent = createFileUploadValidator({
-  allowedTypes: [
-    'image/jpeg', 'image/png', 'image/webp',
-    'video/mp4', 'video/webm', 'video/quicktime', 'video/x-msvideo'
-  ],
-  maxFileSize: 10 * 1024 * 1024 * 1024, // 10GB to support large videos
-  validateContent: true
-});
+// Dynamic content validator middleware that reads allowed types from req
+const validateUploadContent = async (req, res, next) => {
+  const allowedTypes = req.allowedMimeTypes || ['image/jpeg', 'image/png', 'image/webp'];
+  const validator = createFileUploadValidator({
+    allowedTypes,
+    maxFileSize: 10 * 1024 * 1024 * 1024, // 10GB to support large videos
+    validateContent: true
+  });
+  return validator(req, res, next);
+};

 // Request timeout middleware for uploads
 const uploadTimeout = (timeout = 300000) => { // 5 minutes default
@@ -110,7 +120,7 @@ const uploadTimeout = (timeout = 300000) => { // 5 minutes default

 // Upload photos for an event
 // Max file count is configurable via general settings
-router.post('/:eventId/upload', adminAuth, requirePermission('photos.upload'), uploadTimeout(600000), async (req, res, next) => { // 10 minute timeout
+router.post('/:eventId/upload', adminAuth, requirePermission('photos.upload'), uploadTimeout(600000), resolveAllowedTypes, async (req, res, next) => { // 10 minute timeout
  let maxFilesPerUpload;
  try {
    maxFilesPerUpload = await getMaxFilesPerUpload();
@@ -175,8 +185,9 @@ router.post('/:eventId/upload', adminAuth, requirePermission('photos.upload'), u
      return res.status(400).json({ error: 'No files uploaded' });
    }
    
-    // Parse category_id to number if provided
-    const parsedCategoryId = category_id ? parseInt(category_id, 10) : null;
+    // Parse category_id to number if provided (handle string values like 'individual', 'collage')
+    const rawParsed = category_id ? parseInt(category_id, 10) : NaN;
+    const parsedCategoryId = !isNaN(rawParsed) ? rawParsed : null;

    // Determine photo type and category name
    let photoType = 'individual'; // default
@@ -251,16 +262,33 @@ router.post('/:eventId/upload', adminAuth, requirePermission('photos.upload'), u
            const finalPath = path.join(finalDestPath, newFilename);
            const storagePath = getStoragePath();
            const relativePath = path.relative(path.join(storagePath, 'events/active'), finalPath);
-            
+
+            // Extract capture date from EXIF metadata
+            let capturedAt = null;
+            try {
+              capturedAt = await extractCaptureDate(tempPath);
+            } catch (exifError) {
+              // Non-fatal - just log and continue without capture date
+              console.log(`Could not extract EXIF date for ${file.originalname}`);
+            }
+
+            // Determine media type
+            const isVideo = isVideoMimeType(file.mimetype);
+            const mediaType = isVideo ? 'video' : 'image';
+
            // Prepare photo data for batch insert
            const photoData = {
              event_id: parseInt(eventId),
              filename: newFilename,
+              original_filename: file.originalname, // Preserve original filename for Lightroom export
              path: relativePath,
              thumbnail_path: null, // Will generate after successful commit
              type: photoType,
              category_id: parsedCategoryId, // Save the selected category
-              size_bytes: tempStats.size // Use actual file size from stat
+              size_bytes: tempStats.size, // Use actual file size from stat
+              captured_at: capturedAt, // EXIF capture date (if available)
+              media_type: mediaType,
+              mime_type: file.mimetype
            };
            
            batchPhotos.push(photoData);
@@ -304,20 +332,67 @@ router.post('/:eventId/upload', adminAuth, requirePermission('photos.upload'), u
                throw new Error(`File size mismatch after move: expected ${operation.photoData.size_bytes}, got ${finalStats.size}`);
              }
              
-              // Generate thumbnail with final path
+              // Generate thumbnail and extract metadata
+              const photoId = insertedIds[idx]?.id || insertedIds[idx];
+              const isVideoFile = isVideoMimeType(operation.photoData.mime_type);
              let thumbnailPath = null;
+
              try {
-                thumbnailPath = await generateThumbnail(operation.finalPath);
-                
-                // Update the database with thumbnail path
-                if (thumbnailPath && insertedIds[idx]) {
-                  const photoId = insertedIds[idx]?.id || insertedIds[idx];
-                  await db('photos')
-                    .where({ id: photoId })
-                    .update({ thumbnail_path: thumbnailPath });
+                if (isVideoFile) {
+                  // Process video: extract metadata and generate thumbnail
+                  const thumbnailDir = path.join(getStoragePath(), 'thumbnails');
+                  await fs.mkdir(thumbnailDir, { recursive: true });
+                  const videoThumbnailPath = path.join(thumbnailDir, `thumb_${operation.filename.replace(/\.[^.]+$/, '.jpg')}`);
+
+                  const result = await processUploadedVideo(operation.finalPath, videoThumbnailPath);
+                  thumbnailPath = path.relative(getStoragePath(), videoThumbnailPath);
+
+                  if (photoId && result.metadata) {
+                    await db('photos')
+                      .where({ id: photoId })
+                      .update({
+                        thumbnail_path: thumbnailPath,
+                        duration: result.metadata.duration,
+                        video_codec: result.metadata.videoCodec,
+                        audio_codec: result.metadata.audioCodec,
+                        width: result.metadata.width,
+                        height: result.metadata.height
+                      });
+                  }
+                } else {
+                  thumbnailPath = await generateThumbnail(operation.finalPath);
+
+                  // Update the database with thumbnail path and image dimensions
+                  if (photoId) {
+                    const updateData = {};
+                    if (thumbnailPath) updateData.thumbnail_path = thumbnailPath;
+
+                    try {
+                      const sharp = require('sharp');
+                      const metadata = await sharp(operation.finalPath).metadata();
+                      if (metadata.width && metadata.height) {
+                        updateData.width = metadata.width;
+                        updateData.height = metadata.height;
+                      }
+                    } catch (metadataError) {
+                      console.warn(`Could not extract image dimensions for ${operation.filename}:`, metadataError.message);
+                    }
+
+                    if (Object.keys(updateData).length > 0) {
+                      await db('photos')
+                        .where({ id: photoId })
+                        .update(updateData);
+                    }
+                  }
                }
              } catch (thumbError) {
-                console.error(`Thumbnail generation failed for ${operation.filename}:`, thumbError.message);
+                console.error(`Thumbnail/metadata processing failed for ${operation.filename}:`, thumbError.message);
+              }
+
+              // Queue watermark generation in background (non-blocking, images only)
+              if (photoId && !isVideoFile) {
+                watermarkGeneratorService.generateForPhoto(photoId)
+                  .catch(err => console.warn(`Watermark generation queued failed for photo ${photoId}:`, err.message));
              }
              
              // Add to successful uploads
@@ -461,7 +536,12 @@ router.delete('/:eventId/photos/:photoId', adminAuth, requirePermission('photos.
        }
      }
    }
-    
+
+    // Delete pre-generated watermark if exists
+    if (photo.watermark_path) {
+      await watermarkGeneratorService.deleteForPhoto(photo.id);
+    }
+
    // Remove from database
    await db('photos').where({ id: photoId }).delete();
    
@@ -582,8 +662,13 @@ router.post('/:eventId/photos/bulk-delete', adminAuth, requirePermission('photos
          }
        }
      }
+
+      // Delete pre-generated watermark
+      if (photo.watermark_path) {
+        await watermarkGeneratorService.deleteForPhoto(photo.id);
+      }
    }
-    
+
    // Delete from database
    await db('photos')
      .whereIn('id', photoIds)
@@ -626,9 +711,7 @@ router.post('/:eventId/photos/bulk-update', adminAuth, requirePermission('photos
    }
    
    // Prepare update data
-    const updateData = {
-      updated_at: new Date()
-    };
+    const updateData = {};

    if (updates.category_id !== undefined) {
      // Handle type-based categories ('individual' or 'collage')
@@ -698,20 +781,28 @@ router.get('/:eventId/photos/:photoId/download', adminAuth, requirePermission('p
 router.get('/:eventId/photos', adminAuth, requirePermission('photos.view'), async (req, res) => {
  try {
    const { eventId } = req.params;
-    const { category_id, type, search, sort = 'date', order = 'desc' } = req.query;
+    const { category_id, type, search, sort = 'date' } = req.query;
+    const order = ['asc', 'desc'].includes(req.query.order) ? req.query.order : 'desc';
    
    let query = db('photos')
      .where({ 'photos.event_id': eventId })
      .leftJoin('photo_categories', 'photos.category_id', 'photo_categories.id')
      .select('photos.*', 'photo_categories.name as pc_name', 'photo_categories.slug as pc_slug');
    
-    // Filter by type (individual/collage) - category_id maps to type
-    if (category_id !== undefined) {
-      if (category_id === '' || category_id === '0') {
-        // For backwards compatibility, empty category means no filter
-        // Don't filter anything
-      } else if (category_id === 'individual' || category_id === 'collage') {
+    // Filter by category_id
+    if (category_id !== undefined && category_id !== '' && category_id !== '0') {
+      if (category_id === 'individual' || category_id === 'collage') {
+        // Legacy type-based filtering
        query = query.where({ 'photos.type': category_id });
+      } else if (category_id === 'uncategorized') {
+        // Filter for photos with no category assigned
+        query = query.whereNull('photos.category_id');
+      } else {
+        // Numeric category ID from photo_categories table
+        const numericCategoryId = parseInt(category_id, 10);
+        if (!isNaN(numericCategoryId)) {
+          query = query.where({ 'photos.category_id': numericCategoryId });
+        }
      }
    }
    
@@ -755,6 +846,7 @@ router.get('/:eventId/photos', adminAuth, requirePermission('photos.view'), asyn
      photos: photos.map(photo => ({
        id: photo.id,
        filename: photo.filename,
+        original_filename: photo.original_filename || null,
        // Use the correct admin photos router base for serving images
        url: `/admin/photos/${eventId}/photo/${photo.id}`,
        // Always expose a thumbnail URL; backend will generate on demand if missing
@@ -763,6 +855,11 @@ router.get('/:eventId/photos', adminAuth, requirePermission('photos.view'), asyn
        category_id: photo.category_id || photo.type,
        category_name: photo.pc_name || (photo.type === 'individual' ? 'Individual Photos' : 'Collages'),
        category_slug: photo.pc_slug || photo.type,
+        media_type: photo.media_type || 'image',
+        mime_type: photo.mime_type || null,
+        width: photo.width || null,
+        height: photo.height || null,
+        duration: photo.duration || null,
        size: photo.size_bytes,
        uploaded_at: photo.uploaded_at,
        // Feedback data
@@ -23,6 +23,8 @@ const { clearShareLinkSettingsCache } = require('../services/shareLinkService');
 const { resetSecurityConfigCache } = require('../utils/authSecurity');
 const router = express.Router();
 const { clearMaxFilesPerUploadCache, MAX_ALLOWED_FILES_PER_UPLOAD } = require('../services/uploadSettings');
+const watermarkService = require('../services/watermarkService');
+const watermarkGeneratorService = require('../services/watermarkGeneratorService');

 const getStoragePath = () => process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');

@@ -100,19 +102,31 @@ router.get('/', adminAuth, requirePermission('settings.view'), async (req, res)
    // Convert to object format
    const settingsObject = {};
    settings.forEach(setting => {
-      if (setting.setting_value) {
-        try {
-          // Try to parse as JSON first
-          settingsObject[setting.setting_key] = JSON.parse(setting.setting_value);
-        } catch (e) {
-          // If it's not valid JSON, use the raw value
+      // Check for null/undefined explicitly to handle boolean false and 0 values
+      // PostgreSQL json column returns parsed values (false as boolean, not string)
+      if (setting.setting_value !== null && setting.setting_value !== undefined) {
+        // If the value is already parsed (from json column), use it directly
+        if (typeof setting.setting_value !== 'string') {
          settingsObject[setting.setting_key] = setting.setting_value;
+        } else {
+          try {
+            // Try to parse as JSON first
+            settingsObject[setting.setting_key] = JSON.parse(setting.setting_value);
+          } catch (e) {
+            // If it's not valid JSON, use the raw value
+            settingsObject[setting.setting_key] = setting.setting_value;
+          }
        }
      } else {
        settingsObject[setting.setting_key] = null;
      }
    });

+    // Mask sensitive secrets before sending to client
+    if (settingsObject.security_recaptcha_secret_key) {
+      settingsObject.security_recaptcha_secret_key = '••••••••';
+    }
+
    res.json(settingsObject);
  } catch (error) {
    console.error('Settings fetch error:', error);
@@ -127,23 +141,35 @@ router.get('/:type', adminAuth, requirePermission('settings.view'), async (req,
    const settings = await db('app_settings')
      .where('setting_type', type)
      .select('*');
-    
+
    // Convert to object format
    const settingsObject = {};
    settings.forEach(setting => {
-      if (setting.setting_value) {
-        try {
-          // Try to parse as JSON first
-          settingsObject[setting.setting_key] = JSON.parse(setting.setting_value);
-        } catch (e) {
-          // If it's not valid JSON, use the raw value
+      // Check for null/undefined explicitly to handle boolean false and 0 values
+      // PostgreSQL json column returns parsed values (false as boolean, not string)
+      if (setting.setting_value !== null && setting.setting_value !== undefined) {
+        // If the value is already parsed (from json column), use it directly
+        if (typeof setting.setting_value !== 'string') {
          settingsObject[setting.setting_key] = setting.setting_value;
+        } else {
+          try {
+            // Try to parse as JSON first
+            settingsObject[setting.setting_key] = JSON.parse(setting.setting_value);
+          } catch (e) {
+            // If it's not valid JSON, use the raw value
+            settingsObject[setting.setting_key] = setting.setting_value;
+          }
        }
      } else {
        settingsObject[setting.setting_key] = null;
      }
    });

+    // Mask sensitive secrets before sending to client
+    if (settingsObject.security_recaptcha_secret_key) {
+      settingsObject.security_recaptcha_secret_key = '••••••••';
+    }
+
    res.json(settingsObject);
  } catch (error) {
    console.error('Settings fetch error:', error);
@@ -196,6 +222,9 @@ router.put('/branding', adminAuth, requirePermission('settings.edit'), async (re
      hide_powered_by
    } = req.body;

+    // Get current watermark settings hash for change detection
+    const oldSettingsHash = await watermarkService.getSettingsHash();
+
    const brandingSettings = {
      company_name,
      company_tagline,
@@ -306,7 +335,40 @@ router.put('/branding', adminAuth, requirePermission('settings.edit'), async (re

    clearPublicSiteCache();

-    res.json({ message: 'Branding settings updated successfully' });
+    // Check if watermark settings changed and trigger regeneration
+    const newSettingsHash = await watermarkService.getSettingsHash();
+    let watermarkRegenerationStarted = false;
+
+    if (oldSettingsHash !== newSettingsHash) {
+      // Clear watermark cache
+      watermarkService.clearCache();
+
+      // Check if watermarking is now enabled or settings changed
+      const currentSettings = await watermarkService.getWatermarkSettings();
+
+      if (currentSettings && currentSettings.enabled) {
+        // Start background regeneration of all watermarks
+        console.log('Watermark settings changed, starting background regeneration');
+        watermarkGeneratorService.regenerateAll()
+          .then(result => {
+            console.log(`Watermark regeneration completed: ${result.success}/${result.total} successful`);
+          })
+          .catch(err => {
+            console.error('Watermark regeneration failed:', err);
+          });
+        watermarkRegenerationStarted = true;
+      } else {
+        // Watermarking was disabled, clear all pre-generated watermarks
+        console.log('Watermarking disabled, clearing pre-generated watermarks');
+        watermarkGeneratorService.clearAllWatermarks()
+          .catch(err => console.error('Failed to clear watermarks:', err));
+      }
+    }
+
+    res.json({
+      message: 'Branding settings updated successfully',
+      watermarkRegenerationStarted
+    });
  } catch (error) {
    console.error('Branding update error:', error);
    res.status(500).json({ error: 'Failed to update branding settings' });
@@ -441,9 +503,27 @@ router.post('/branding/watermark-logo', adminAuth, requirePermission('settings.e
        updated_at: new Date()
      });

-    res.json({ 
+    // Trigger watermark regeneration since the logo changed
+    watermarkService.clearCache();
+    const currentSettings = await watermarkService.getWatermarkSettings();
+    let watermarkRegenerationStarted = false;
+
+    if (currentSettings && currentSettings.enabled) {
+      console.log('Watermark logo changed, starting background regeneration');
+      watermarkGeneratorService.regenerateAll()
+        .then(result => {
+          console.log(`Watermark regeneration completed: ${result.success}/${result.total} successful`);
+        })
+        .catch(err => {
+          console.error('Watermark regeneration failed:', err);
+        });
+      watermarkRegenerationStarted = true;
+    }
+
+    res.json({
      message: 'Watermark logo uploaded successfully',
-      watermarkLogoUrl: publicPath
+      watermarkLogoUrl: publicPath,
+      watermarkRegenerationStarted
    });
  } catch (error) {
    console.error('Watermark logo upload error:', error);
@@ -663,6 +743,70 @@ router.put('/analytics', adminAuth, requirePermission('settings.edit'), async (r
  }
 });

+// Update SEO settings
+router.put('/seo', adminAuth, requirePermission('settings.edit'), async (req, res) => {
+  try {
+    const settings = req.body;
+
+    // Validate seo_blocked_ai_agents is an array of strings
+    if (settings.seo_blocked_ai_agents !== undefined) {
+      if (!Array.isArray(settings.seo_blocked_ai_agents) ||
+          !settings.seo_blocked_ai_agents.every(a => typeof a === 'string')) {
+        return res.status(400).json({ error: 'seo_blocked_ai_agents must be an array of strings' });
+      }
+    }
+
+    // Validate seo_custom_rules structure
+    if (settings.seo_custom_rules !== undefined) {
+      if (!Array.isArray(settings.seo_custom_rules)) {
+        return res.status(400).json({ error: 'seo_custom_rules must be an array' });
+      }
+      for (const rule of settings.seo_custom_rules) {
+        if (!rule.userAgent || typeof rule.userAgent !== 'string') {
+          return res.status(400).json({ error: 'Each custom rule must have a userAgent string' });
+        }
+        if (!Array.isArray(rule.disallow) || !rule.disallow.every(d => typeof d === 'string')) {
+          return res.status(400).json({ error: 'Each custom rule must have a disallow array of strings' });
+        }
+      }
+    }
+
+    // Update or insert each setting
+    for (const [key, value] of Object.entries(settings)) {
+      await db('app_settings')
+        .insert({
+          setting_key: key,
+          setting_value: JSON.stringify(value),
+          setting_type: 'seo',
+          updated_at: new Date()
+        })
+        .onConflict('setting_key')
+        .merge({
+          setting_value: JSON.stringify(value),
+          updated_at: new Date()
+        });
+    }
+
+    // Clear robots.txt cache
+    const { clearRobotsTxtCache } = require('../services/robotsTxtService');
+    clearRobotsTxtCache();
+
+    // Log activity
+    await db('activity_logs').insert({
+      activity_type: 'seo_settings_updated',
+      actor_type: 'admin',
+      actor_id: req.admin.id,
+      actor_name: req.admin.username,
+      metadata: JSON.stringify({ settings_count: Object.keys(settings).length })
+    });
+
+    res.json({ message: 'SEO settings updated successfully' });
+  } catch (error) {
+    console.error('SEO settings update error:', error);
+    res.status(500).json({ error: 'Failed to update SEO settings' });
+  }
+});
+
 // Get storage info
 router.get('/storage/info', adminAuth, requirePermission('settings.view'), async (req, res) => {
  try {
@@ -8,6 +8,12 @@ const os = require('os');
 const { formatBoolean } = require('../utils/dbCompat');
 const logger = require('../utils/logger');
 const { checkForUpdates, getCurrentChannel } = require('../services/updateCheckService');
+const { detectEnvironment, generateUpdateInstructions } = require('../services/environmentService');
+const {
+  checkAndNotifyUpdates,
+  sendUpdateNotificationNow,
+  getUpdateNotificationSettings
+} = require('../services/updateNotificationService');
 const router = express.Router();

 // Get system version
@@ -65,6 +71,47 @@ router.get('/updates', adminAuth, requirePermission('settings.view'), async (req
  }
 });

+// Get update instructions for current environment
+router.get('/updates/instructions', adminAuth, requirePermission('settings.view'), async (req, res) => {
+  try {
+    // Check if update checking is enabled
+    const updateCheckEnabled = process.env.UPDATE_CHECK_ENABLED !== 'false';
+
+    if (!updateCheckEnabled) {
+      return res.json({
+        enabled: false,
+        message: 'Update checking is disabled'
+      });
+    }
+
+    const env = await detectEnvironment();
+    const updateInfo = await checkForUpdates();
+
+    if (!updateInfo.updateAvailable) {
+      return res.json({
+        updateAvailable: false,
+        currentVersion: updateInfo.current,
+        message: 'You are running the latest version'
+      });
+    }
+
+    const instructions = generateUpdateInstructions(env, updateInfo.latest.forChannel);
+
+    res.json({
+      updateAvailable: true,
+      currentVersion: updateInfo.current,
+      targetVersion: updateInfo.latest.forChannel,
+      channel: updateInfo.channel,
+      environment: env,
+      instructions,
+      releaseNotesUrl: `https://github.com/the-luap/picpeak/releases/tag/v${updateInfo.latest.forChannel}`
+    });
+  } catch (error) {
+    logger.error('Error generating update instructions:', error);
+    res.status(500).json({ error: 'Failed to generate update instructions' });
+  }
+});
+
 // Get comprehensive system status
 router.get('/status', adminAuth, requirePermission('settings.view'), async (req, res) => {
  try {
@@ -262,4 +309,68 @@ router.get('/database', adminAuth, requirePermission('settings.view'), async (re
  }
 });

+// Get update notification settings
+router.get('/updates/notifications', adminAuth, requirePermission('settings.view'), async (req, res) => {
+  try {
+    const settings = await getUpdateNotificationSettings();
+    res.json(settings);
+  } catch (error) {
+    logger.error('Error fetching update notification settings:', error);
+    res.status(500).json({ error: 'Failed to fetch update notification settings' });
+  }
+});
+
+// Update notification settings
+router.put('/updates/notifications', adminAuth, requirePermission('settings.edit'), async (req, res) => {
+  try {
+    const { enabled, recipients } = req.body;
+
+    if (typeof enabled !== 'undefined') {
+      await db('app_settings')
+        .where('setting_key', 'update_email_notifications_enabled')
+        .update({
+          setting_value: JSON.stringify(enabled === true),
+          updated_at: db.fn.now()
+        });
+    }
+
+    if (typeof recipients !== 'undefined') {
+      await db('app_settings')
+        .where('setting_key', 'update_email_recipients')
+        .update({
+          setting_value: JSON.stringify(recipients || ''),
+          updated_at: db.fn.now()
+        });
+    }
+
+    const updatedSettings = await getUpdateNotificationSettings();
+    res.json({ success: true, settings: updatedSettings });
+  } catch (error) {
+    logger.error('Error updating notification settings:', error);
+    res.status(500).json({ error: 'Failed to update notification settings' });
+  }
+});
+
+// Manually trigger update notification email
+router.post('/updates/notifications/send', adminAuth, requirePermission('settings.edit'), async (req, res) => {
+  try {
+    const result = await sendUpdateNotificationNow();
+    res.json(result);
+  } catch (error) {
+    logger.error('Error sending update notification:', error);
+    res.status(500).json({ error: 'Failed to send update notification' });
+  }
+});
+
+// Check and send update notifications (called on admin login or periodically)
+router.post('/updates/notifications/check', adminAuth, requirePermission('settings.view'), async (req, res) => {
+  try {
+    const result = await checkAndNotifyUpdates();
+    res.json(result);
+  } catch (error) {
+    logger.error('Error checking for update notifications:', error);
+    res.status(500).json({ error: 'Failed to check for update notifications' });
+  }
+});
+
 module.exports = router;
@@ -10,27 +10,33 @@ const logger = require('../utils/logger');

 const getStoragePath = () => process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');

+// Parse JSON-encoded setting values
+function parseSettingValue(value) {
+  if (value === null || value === undefined) return null;
+  try { return JSON.parse(value); } catch (e) { return value; }
+}
+
 // Get thumbnail settings
 router.get('/settings', adminAuth, requirePermission('photos.view'), async (req, res) => {
  try {
    const settings = await db('app_settings')
-      .whereIn('key', [
+      .whereIn('setting_key', [
        'thumbnail_width',
        'thumbnail_height',
        'thumbnail_fit',
        'thumbnail_quality',
        'thumbnail_format'
      ])
-      .select('key', 'value', 'description');
-    
+      .select('setting_key', 'setting_value');
+
    const settingsMap = {};
    settings.forEach(s => {
-      settingsMap[s.key] = {
-        value: s.value,
-        description: s.description
+      const parsed = parseSettingValue(s.setting_value);
+      settingsMap[s.setting_key] = {
+        value: String(parsed ?? '')
      };
    });
-    
+
    res.json({
      settings: settingsMap,
      fitOptions: ['cover', 'contain', 'fill', 'inside', 'outside'],
@@ -66,17 +72,17 @@ router.put('/settings', adminAuth, requirePermission('photos.edit'), async (req,
    
    // Update settings
    const updates = [];
-    if (width) updates.push({ key: 'thumbnail_width', value: width.toString() });
-    if (height) updates.push({ key: 'thumbnail_height', value: height.toString() });
-    if (fit) updates.push({ key: 'thumbnail_fit', value: fit });
-    if (quality) updates.push({ key: 'thumbnail_quality', value: quality.toString() });
-    if (format) updates.push({ key: 'thumbnail_format', value: format });
-    
+    if (width) updates.push({ setting_key: 'thumbnail_width', setting_value: width });
+    if (height) updates.push({ setting_key: 'thumbnail_height', setting_value: height });
+    if (fit) updates.push({ setting_key: 'thumbnail_fit', setting_value: JSON.stringify(fit) });
+    if (quality) updates.push({ setting_key: 'thumbnail_quality', setting_value: quality });
+    if (format) updates.push({ setting_key: 'thumbnail_format', setting_value: JSON.stringify(format) });
+
    for (const update of updates) {
      await db('app_settings')
-        .where('key', update.key)
+        .where('setting_key', update.setting_key)
        .update({
-          value: update.value,
+          setting_value: update.setting_value,
          updated_at: db.fn.now()
        });
    }
@@ -11,6 +11,7 @@ const path = require('path');
 const router = express.Router();
 const { buildShareLinkVariants } = require('../services/shareLinkService');
 const { parseBooleanInput, parseStringInput } = require('../utils/parsers');
+const eventTypeService = require('../services/eventTypeService');

 // Use parseStringInput from shared parsers for customer data extraction
 const getCustomerNameFromPayload = (payload = {}) => parseStringInput(payload.customer_name);
@@ -55,7 +56,13 @@ const hasCustomerContactColumns = async () => {

 // Create new event
 router.post('/', adminAuth, [
-  body('event_type').isIn(['wedding', 'birthday', 'corporate', 'other']),
+  body('event_type').notEmpty().trim().custom(async (value) => {
+    const isValid = await eventTypeService.isValidEventType(value);
+    if (!isValid) {
+      throw new Error('Invalid event type');
+    }
+    return true;
+  }),
  body('event_name').notEmpty(),
  body('event_date').isDate(),
  body('customer_name').notEmpty().trim(),
@@ -5,6 +5,7 @@ const archiver = require('archiver');
 const path = require('path');
 const router = express.Router();
 const watermarkService = require('../services/watermarkService');
+const watermarkGeneratorService = require('../services/watermarkGeneratorService');
 const { verifyGalleryAccess } = require('../middleware/gallery');
 const secureImageService = require('../services/secureImageService');
 const logger = require('../utils/logger');
@@ -12,10 +13,10 @@ const { resolvePhotoFilePath } = require('../services/photoResolver');
 const { getEventShareToken, resolveShareIdentifier, buildShareLinkVariants } = require('../services/shareLinkService');
 const { handleAsync } = require('../utils/routeHelpers');
 const { NotFoundError } = require('../utils/errors');
-const { ensureThumbnail } = require('../services/imageProcessor');
+const { ensureThumbnail, ensureHeroImage } = require('../services/imageProcessor');

 // Get storage path from environment or default
-const getStoragePath = () => process.env.STORAGE_PATH || path.join(__dirname, '../../storage');
+const getStoragePath = () => process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');

 // Check for slug redirect (for renamed events)
 async function checkSlugRedirect(slug) {
@@ -107,13 +108,21 @@ router.get('/:slug/info', async (req, res) => {
        'share_link',
        'share_token',
        'allow_downloads',
+        'allow_user_uploads',
        'disable_right_click',
        'watermark_downloads',
        'watermark_text',
        'require_password',
        'color_theme',
        'enable_devtools_protection',
-        'use_canvas_rendering'
+        'use_canvas_rendering',
+        'hero_logo_visible',
+        'hero_logo_size',
+        'hero_logo_position',
+        'hero_logo_url',
+        'header_style',
+        'hero_divider_style',
+        'hero_image_anchor'
      )
      .first();

@@ -151,15 +160,23 @@ router.get('/:slug/info', async (req, res) => {
      event_date: event.event_date,
      expires_at: event.expires_at,
      is_active: event.is_active,
-      is_expired: !event.is_active || new Date(event.expires_at) < new Date(),
+      is_expired: !event.is_active || (event.expires_at && new Date(event.expires_at) < new Date()),
      requires_password: requiresPassword,
      color_theme: event.color_theme,
      allow_downloads: !(event.allow_downloads === false || event.allow_downloads === 0 || event.allow_downloads === '0'),
+      allow_user_uploads: event.allow_user_uploads === true || event.allow_user_uploads === 1 || event.allow_user_uploads === '1',
      disable_right_click: event.disable_right_click === true || event.disable_right_click === 1 || event.disable_right_click === '1',
      watermark_downloads: event.watermark_downloads === true || event.watermark_downloads === 1 || event.watermark_downloads === '1',
      watermark_text: event.watermark_text,
      enable_devtools_protection: event.enable_devtools_protection === true || event.enable_devtools_protection === 1 || event.enable_devtools_protection === '1',
-      use_canvas_rendering: event.use_canvas_rendering === true || event.use_canvas_rendering === 1 || event.use_canvas_rendering === '1'
+      use_canvas_rendering: event.use_canvas_rendering === true || event.use_canvas_rendering === 1 || event.use_canvas_rendering === '1',
+      hero_logo_visible: event.hero_logo_visible !== false && event.hero_logo_visible !== 0 && event.hero_logo_visible !== '0',
+      hero_logo_size: event.hero_logo_size || 'medium',
+      hero_logo_position: event.hero_logo_position || 'top',
+      hero_logo_url: event.hero_logo_url || null,
+      header_style: event.header_style || 'standard',
+      hero_divider_style: event.hero_divider_style || 'wave',
+      hero_image_anchor: event.hero_image_anchor || 'center'
    });
  } catch (error) {
    console.error('Error fetching gallery info:', error);
@@ -170,14 +187,34 @@ router.get('/:slug/info', async (req, res) => {
 // Get all photos
 router.get('/:slug/photos', verifyGalleryAccess, async (req, res) => {
  try {
-    // Get filter parameters from query
-    const { filter, guest_id } = req.query;
-    
-    // First get all photos
-    let photos = await db('photos')
+    // Get filter and sort parameters from query
+    const { filter, guest_id, sort = 'upload_date', order = 'desc' } = req.query;
+
+    // Get watermark settings to generate cache-busting version for URLs
+    const watermarkSettings = await watermarkService.getWatermarkSettings();
+    const wmVersion = watermarkSettings?.enabled
+      ? `wm=${watermarkSettings.opacity}${watermarkSettings.position}${watermarkSettings.size}`
+      : '';
+
+    // Build the query with sorting
+    const sortOrder = order === 'asc' ? 'asc' : 'desc';
+    let photosQuery = db('photos')
      .where('photos.event_id', req.event.id)
-      .select('photos.*')
-      .orderBy('photos.uploaded_at', 'desc');
+      .select('photos.*');
+
+    // Apply sort option
+    if (sort === 'capture_date') {
+      // Sort by capture date, falling back to uploaded_at if capture date is null
+      photosQuery = photosQuery.orderByRaw('COALESCE(photos.captured_at, photos.uploaded_at) ' + sortOrder);
+    } else if (sort === 'filename') {
+      photosQuery = photosQuery.orderBy('photos.filename', sortOrder);
+    } else {
+      // Default: sort by upload date
+      photosQuery = photosQuery.orderBy('photos.uploaded_at', sortOrder);
+    }
+
+    // Execute the query
+    let photos = await photosQuery;
    
    // Apply filtering if requested (supports global stats + per-guest interactions)
    if (filter) {
@@ -273,20 +310,36 @@ router.get('/:slug/photos', verifyGalleryAccess, async (req, res) => {
      commentMap[c.photo_id] = parseInt(c.comment_count);
    });
    
-    // Get distinct photo types for this event
-    const categoryResults = await db('photos')
+    // Get actual categories used by photos in this event
+    // This includes both global categories and event-specific ones
+    const usedCategoryIds = await db('photos')
      .where('event_id', req.event.id)
-      .select('type')
-      .distinct('type')
-      .orderBy('type', 'asc');
-    
-    // Convert types to category-like objects
-    const categories = categoryResults.map(result => ({
-      id: result.type,
-      name: result.type === 'individual' ? 'Individual Photos' : 'Collages',
-      slug: result.type,
-      is_global: false
-    }));
+      .whereNotNull('category_id')
+      .distinct('category_id')
+      .pluck('category_id');
+
+    // Fetch category details from photo_categories table
+    let categories = [];
+    if (usedCategoryIds.length > 0) {
+      const categoryDetails = await db('photo_categories')
+        .whereIn('id', usedCategoryIds)
+        .select('id', 'name', 'slug', 'is_global', 'hero_photo_id')
+        .orderBy('name', 'asc');
+
+      categories = categoryDetails.map(cat => ({
+        id: cat.id,
+        name: cat.name,
+        slug: cat.slug,
+        is_global: cat.is_global,
+        hero_photo_id: cat.hero_photo_id || null
+      }));
+    }
+
+    // Build a map for quick category lookup
+    const categoryMap = {};
+    categories.forEach(cat => {
+      categoryMap[cat.id] = cat;
+    });
    
    // Log view
    await db('access_logs').insert({
@@ -317,33 +370,48 @@ router.get('/:slug/photos', verifyGalleryAccess, async (req, res) => {
        expires_at: req.event.expires_at,
        hero_photo_id: req.event.hero_photo_id,
        allow_downloads: req.event.allow_downloads !== false,
+        allow_user_uploads: req.event.allow_user_uploads === true,
        disable_right_click: req.event.disable_right_click === true,
        watermark_downloads: req.event.watermark_downloads === true,
        watermark_text: req.event.watermark_text,
        enable_devtools_protection: req.event.enable_devtools_protection === true,
        use_canvas_rendering: req.event.use_canvas_rendering === true,
+        hero_logo_visible: req.event.hero_logo_visible !== false && req.event.hero_logo_visible !== 0 && req.event.hero_logo_visible !== '0',
+        hero_logo_size: req.event.hero_logo_size || 'medium',
+        hero_logo_position: req.event.hero_logo_position || 'top',
+        hero_logo_url: req.event.hero_logo_url || null,
+        header_style: req.event.header_style || 'standard',
+        hero_divider_style: req.event.hero_divider_style || 'wave',
+        hero_image_anchor: req.event.hero_image_anchor || 'center',
        ...protectionSettings
      },
      categories: categories,
      photos: photos.map(photo => {
        const useJwtUrl = (protectionSettings.protection_level === 'basic' || protectionSettings.protection_level === 'standard');
-        const photoUrl = useJwtUrl ? 
-          `/api/gallery/${req.params.slug}/photo/${photo.id}` : 
+        // Add watermark version to URLs for cache busting when settings change
+        const wmQuery = wmVersion ? `?${wmVersion}` : '';
+        const photoUrl = useJwtUrl ?
+          `/api/gallery/${req.params.slug}/photo/${photo.id}${wmQuery}` :
          `/api/secure-images/${req.params.slug}/secure/${photo.id}/{{token}}`;
-        
+
        return {
          id: photo.id,
          filename: photo.filename,
          url: photoUrl,
-          thumbnail_url: photo.thumbnail_path ? `/api/gallery/${req.params.slug}/thumbnail/${photo.id}` : null,
+          thumbnail_url: photo.thumbnail_path ? `/api/gallery/${req.params.slug}/thumbnail/${photo.id}${wmQuery}` : null,
+          // Hero-optimized image URL (1920x1080) for full-width hero sections
+          hero_url: `/api/gallery/${req.params.slug}/hero/${photo.id}${wmQuery}`,
          secure_url_template: `/api/secure-images/${req.params.slug}/secure/${photo.id}/{{token}}`,
          download_url_template: `/api/secure-images/${req.params.slug}/secure-download/${photo.id}/{{token}}`,
          type: photo.type,
-          category_id: photo.type,
-          category_name: photo.type === 'individual' ? 'Individual Photos' : 'Collages',
-          category_slug: photo.type,
+          category_id: photo.category_id || null,
+          category_name: photo.category_id && categoryMap[photo.category_id] ? categoryMap[photo.category_id].name : null,
+          category_slug: photo.category_id && categoryMap[photo.category_id] ? categoryMap[photo.category_id].slug : null,
          size: photo.size_bytes,
          uploaded_at: photo.uploaded_at,
+          // Image dimensions for layout calculations
+          width: photo.width || null,
+          height: photo.height || null,
          // Fixed: Use the calculated useJwtUrl variable instead of recalculating
          requires_token: !useJwtUrl,
          // Feedback data
@@ -699,8 +767,34 @@ router.get('/:slug/photo/:photoId',

      // Resolve the absolute file path for this photo, supporting both managed and external reference modes
      const { resolvePhotoFilePath } = require('../services/photoResolver');
-      const filePath = resolvePhotoFilePath(req.event, photo);
+      const fs = require('fs');

+      let filePath;
+      try {
+        filePath = resolvePhotoFilePath(req.event, photo);
+      } catch (resolveError) {
+        logger.error('Failed to resolve photo path', {
+          slug: req.params.slug,
+          photoId,
+          eventId: req.event.id,
+          error: resolveError.message,
+          photoPath: photo.path,
+          photoFilename: photo.filename
+        });
+        return res.status(404).json({ error: 'Photo file not found' });
+      }
+
+      // Verify file exists before attempting to serve
+      if (!fs.existsSync(filePath)) {
+        logger.error('Photo file does not exist at resolved path', {
+          slug: req.params.slug,
+          photoId,
+          eventId: req.event.id,
+          resolvedPath: filePath,
+          photoPath: photo.path
+        });
+        return res.status(404).json({ error: 'Photo file not found' });
+      }

      // Log access - temporarily disabled for debugging
      // await secureImageService.logImageAccess(
@@ -712,14 +806,13 @@ router.get('/:slug/photo/:photoId',

      // Handle video streaming with range requests
      if (isVideo) {
-        const fs = require('fs');
        const stat = fs.statSync(filePath);
        const fileSize = stat.size;
        const range = req.headers.range;

        if (range) {
          // Parse range header
-          const parts = range.replace(/bytes=/, "").split("-");
+          const parts = range.replace(/bytes=/, '').split('-');
          const start = parseInt(parts[0], 10);
          const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1;
          const chunksize = (end - start) + 1;
@@ -754,13 +847,52 @@ router.get('/:slug/photo/:photoId',
      // Get watermark settings
      const watermarkSettings = await watermarkService.getWatermarkSettings();

+      // Generate ETag based on photo id, modification time, and watermark settings
+      // This ensures cache invalidation when watermark settings change
+      const stat = fs.statSync(filePath);
+      const watermarkHash = watermarkSettings?.enabled
+        ? `-wm${watermarkSettings.opacity}${watermarkSettings.position}${watermarkSettings.size}`
+        : '-nowm';
+      const etag = `"${photoId}-${stat.mtime.getTime()}${watermarkHash}"`;
+
+      // Check if client has valid cached version
+      if (req.headers['if-none-match'] === etag) {
+        return res.status(304).end();
+      }
+
      if (watermarkSettings && watermarkSettings.enabled) {
-        // Apply watermark and send
+        // Try to serve pre-generated watermarked file for instant loading
+        if (photo.watermark_path) {
+          const watermarkFilePath = path.join(getStoragePath(), photo.watermark_path);
+          try {
+            // Check if pre-generated watermark file exists
+            if (fs.existsSync(watermarkFilePath)) {
+              res.set({
+                'Content-Type': photo.mime_type || 'image/jpeg',
+                'Cache-Control': 'private, max-age=1800',
+                'ETag': etag,
+                'X-Protection-Level': 'basic'
+              });
+              return res.sendFile(watermarkFilePath);
+            }
+          } catch (err) {
+            // File doesn't exist or error, fall through to on-the-fly generation
+            logger.warn(`Pre-generated watermark not found for photo ${photoId}, falling back to on-the-fly`);
+          }
+        }
+
+        // Fallback: Apply watermark on-the-fly (slower, but ensures image is served)
+        // Also queue regeneration for next time
        const watermarkedBuffer = await watermarkService.applyWatermark(filePath, watermarkSettings);

+        // Queue watermark generation in background for next request
+        watermarkGeneratorService.generateForPhoto(photo.id)
+          .catch(err => logger.warn(`Background watermark generation failed for photo ${photo.id}:`, err.message));
+
        res.set({
          'Content-Type': photo.mime_type || 'image/jpeg',
          'Cache-Control': 'private, max-age=1800', // Cache for 30 minutes
+          'ETag': etag,
          'X-Protection-Level': 'basic'
        });

@@ -769,6 +901,7 @@ router.get('/:slug/photo/:photoId',
        // Send original file with basic protection headers
        res.set({
          'Cache-Control': 'private, max-age=1800',
+          'ETag': etag,
          'X-Protection-Level': 'basic'
        });
        // Ensure absolute path for res.sendFile
@@ -820,18 +953,32 @@ router.get('/:slug/thumbnail/:photoId',
        'thumbnail'
      );

+      // Check if watermarks are enabled and apply to thumbnail
+      const watermarkSettings = await watermarkService.getWatermarkSettings();
+
+      // Generate ETag based on photo id, thumbnail modification time, and watermark settings
+      const fs = require('fs');
+      const stat = fs.statSync(thumbPath);
+      const watermarkHash = watermarkSettings?.enabled
+        ? `-wm${watermarkSettings.opacity}${watermarkSettings.position}${watermarkSettings.size}`
+        : '-nowm';
+      const etag = `"thumb-${photoId}-${stat.mtime.getTime()}${watermarkHash}"`;
+
+      // Check if client has valid cached version
+      if (req.headers['if-none-match'] === etag) {
+        return res.status(304).end();
+      }
+
      // Set appropriate headers with enhanced security
      res.set({
        'Content-Type': 'image/jpeg',
        'Cache-Control': 'private, max-age=1800', // Reduced cache time
        'Cross-Origin-Resource-Policy': 'cross-origin',
        'X-Content-Type-Options': 'nosniff',
-        'X-Protected-Thumbnail': 'true'
+        'X-Protected-Thumbnail': 'true',
+        'ETag': etag
      });

-      // Check if watermarks are enabled and apply to thumbnail
-      const watermarkSettings = await watermarkService.getWatermarkSettings();
-
      if (watermarkSettings && watermarkSettings.enabled) {
        // Apply watermark to thumbnail
        const watermarkedBuffer = await watermarkService.applyWatermark(thumbPath, watermarkSettings);
@@ -851,6 +998,92 @@ router.get('/:slug/thumbnail/:photoId',
  }
 );

+// Serve hero-optimized image (1920x1080 for full-width hero sections)
+router.get('/:slug/hero/:photoId',
+  verifyGalleryAccess,
+  async (req, res) => {
+    try {
+      const { photoId } = req.params;
+
+      const photo = await db('photos')
+        .where({ id: photoId, event_id: req.event.id })
+        .first();
+
+      if (!photo) {
+        return res.status(404).json({ error: 'Photo not found' });
+      }
+
+      // Check if this is a video - videos don't get hero images
+      const isVideo = photo.media_type === 'video' || (photo.mime_type && photo.mime_type.startsWith('video/'));
+      if (isVideo) {
+        // For videos, redirect to the regular photo endpoint
+        return res.redirect(`/api/gallery/${req.params.slug}/photo/${photoId}`);
+      }
+
+      // Ensure hero image exists and is valid, regenerate if needed
+      const heroPath = await ensureHeroImage(photo);
+
+      if (!heroPath) {
+        // If hero generation fails, fall back to original photo
+        logger.warn(`Failed to generate hero image for photo ${photoId}, falling back to original`);
+        return res.redirect(`/api/gallery/${req.params.slug}/photo/${photoId}`);
+      }
+
+      const heroFullPath = path.join(getStoragePath(), heroPath);
+      const fs = require('fs');
+
+      // Verify file exists before attempting to serve
+      if (!fs.existsSync(heroFullPath)) {
+        logger.error('Hero image file does not exist at resolved path', {
+          slug: req.params.slug,
+          photoId,
+          eventId: req.event.id,
+          resolvedPath: heroFullPath
+        });
+        return res.redirect(`/api/gallery/${req.params.slug}/photo/${photoId}`);
+      }
+
+      // Get file stats for ETag
+      const stat = fs.statSync(heroFullPath);
+      const etag = `"hero-${photoId}-${stat.mtime.getTime()}"`;
+
+      // Check if client has valid cached version
+      if (req.headers['if-none-match'] === etag) {
+        return res.status(304).end();
+      }
+
+      // Check if watermarks should be applied
+      const watermarkSettings = await watermarkService.getWatermarkSettings();
+
+      res.set({
+        'Content-Type': 'image/jpeg',
+        'Cache-Control': 'private, max-age=3600', // Cache for 1 hour
+        'Cross-Origin-Resource-Policy': 'cross-origin',
+        'X-Content-Type-Options': 'nosniff',
+        'X-Hero-Image': 'true',
+        'ETag': etag
+      });
+
+      if (watermarkSettings && watermarkSettings.enabled) {
+        // Apply watermark to hero image
+        const watermarkedBuffer = await watermarkService.applyWatermark(heroFullPath, watermarkSettings);
+        res.send(watermarkedBuffer);
+      } else {
+        // Send hero image without watermark
+        res.sendFile(path.resolve(heroFullPath));
+      }
+    } catch (error) {
+      logger.error('Error serving hero image:', {
+        error: error.message,
+        photoId: req.params.photoId,
+        eventId: req.event?.id
+      });
+      // Fall back to original photo on any error
+      res.redirect(`/api/gallery/${req.params.slug}/photo/${req.params.photoId}`);
+    }
+  }
+);
+
 // Get feedback settings for gallery
 router.get('/:slug/feedback-settings', verifyGalleryAccess, async (req, res) => {
  try {
@@ -936,6 +1169,17 @@ router.post('/:eventId/upload', verifyGalleryAccess, async (req, res) => {

    // Import multer and photo processing
    const multer = require('multer');
+    const { getAllowedMimeTypes } = require('../services/uploadSettings');
+    const { validateFileType } = require('../utils/fileSecurityUtils');
+
+    // Resolve allowed MIME types from settings
+    let allowedMimeTypes;
+    try {
+      allowedMimeTypes = await getAllowedMimeTypes();
+    } catch {
+      allowedMimeTypes = ['image/jpeg', 'image/png', 'image/webp'];
+    }
+
    const upload = multer({
      dest: tempUploadDir,
      limits: {
@@ -943,8 +1187,7 @@ router.post('/:eventId/upload', verifyGalleryAccess, async (req, res) => {
        files: 10 // Max 10 files at once
      },
      fileFilter: (req, file, cb) => {
-        const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];
-        if (allowedTypes.includes(file.mimetype)) {
+        if (validateFileType(file.originalname, file.mimetype, allowedMimeTypes)) {
          cb(null, true);
        } else {
          cb(new Error('Invalid file type'));
@@ -12,7 +12,8 @@ router.get('/', async (req, res) => {
        .where(function() {
          this.whereIn('setting_type', ['branding', 'theme', 'general', 'security', 'analytics', 'boolean'])
            .orWhere('setting_key', 'like', 'analytics_%')
-            .orWhere('setting_key', 'like', 'event_require_%');
+            .orWhere('setting_key', 'like', 'event_require_%')
+            .orWhereIn('setting_key', ['seo_meta_noindex', 'seo_meta_nofollow', 'seo_meta_noai']);
        })
        .select('setting_key', 'setting_value');
    });
@@ -74,7 +75,15 @@ router.get('/', async (req, res) => {
      // Event field requirements
      event_require_customer_name: settingsObject.event_require_customer_name !== false,
      event_require_customer_email: settingsObject.event_require_customer_email !== false,
-      event_require_admin_email: settingsObject.event_require_admin_email !== false
+      event_require_admin_email: settingsObject.event_require_admin_email !== false,
+      event_require_event_date: settingsObject.event_require_event_date !== false,
+      event_require_expiration: settingsObject.event_require_expiration !== false,
+      // Upload settings (safe to expose - needed for client-side validation)
+      allowed_file_types: settingsObject.general_allowed_file_types || 'jpg,jpeg,png,webp',
+      // SEO meta tag flags (safe to expose - these are intended for crawlers)
+      seo_meta_noindex: settingsObject.seo_meta_noindex === true,
+      seo_meta_nofollow: settingsObject.seo_meta_nofollow === true,
+      seo_meta_noai: settingsObject.seo_meta_noai === true
    };

    res.json(publicSettings);
@@ -437,7 +437,7 @@ async function performLocalBackup(config, files) {
  };
 }

-function buildRsyncCommand(config) {
+function buildRsyncArgs(config) {
  const storagePath = getStoragePath();
  const host = config.backup_rsync_host;
  const remotePath = config.backup_rsync_path;
@@ -446,20 +446,21 @@ function buildRsyncCommand(config) {
    throw new Error('Rsync configuration incomplete');
  }

-  const options = ['-avz', '--delete', '--stats'];
+  const args = ['-avz', '--delete', '--stats'];
  if (config.backup_rsync_ssh_key) {
-    options.push(`-e "ssh -i ${config.backup_rsync_ssh_key} -o StrictHostKeyChecking=no"`);
+    args.push('-e', `ssh -i ${config.backup_rsync_ssh_key} -o StrictHostKeyChecking=no`);
  }

  const excludePatterns = config.backup_exclude_patterns || [];
-  excludePatterns.forEach(pattern => options.push(`--exclude="${pattern}"`));
+  excludePatterns.forEach(pattern => args.push('--exclude', pattern));

  const source = `${storagePath}/`;
  const destination = config.backup_rsync_user
    ? `${config.backup_rsync_user}@${host}:${remotePath}`
    : `${host}:${remotePath}`;

-  return `rsync ${options.join(' ')} "${source}" "${destination}"`;
+  args.push(source, destination);
+  return args;
 }

 function parseRsyncStats(output) {
@@ -479,9 +480,9 @@ function parseRsyncStats(output) {
 }

 async function performRsyncBackup(config, files) {
-  const command = buildRsyncCommand(config);
-  const execAsync = getExecAsync();
-  const { stdout } = await execAsync(command);
+  const { spawnAsync } = require('../utils/safeExec');
+  const rsyncArgs = buildRsyncArgs(config);
+  const { stdout } = await spawnAsync('rsync', rsyncArgs);
  const stats = parseRsyncStats(stdout);

  const backedUpFiles = files.map(file => file.relativePath);
@@ -503,8 +504,7 @@ async function performRsyncBackup(config, files) {
    backedUpCount: typeof stats.filesTransferred === 'number' ? stats.filesTransferred : backedUpFiles.length,
    backedUpSize: totalSize,
    backedUpFiles,
-    backupPath: `${config.backup_rsync_host}:${config.backup_rsync_path}`,
-    rsyncCommand: command
+    backupPath: `${config.backup_rsync_host}:${config.backup_rsync_path}`
  };
 }

@@ -1,9 +1,7 @@
 const fs = require('fs').promises;
 const path = require('path');
-const { exec } = require('child_process');
-const { promisify } = require('util');
-const execAsync = promisify(exec);
 const crypto = require('crypto');
+const { spawnAsync, spawnToFile } = require('../utils/safeExec');
 const zlib = require('zlib');
 const { pipeline } = require('stream/promises');
 const { createReadStream, createWriteStream } = require('fs');
@@ -163,10 +161,10 @@ class DatabaseBackupService {
    
    try {
      // Use SQLite's backup API for consistency
-      await execAsync(`sqlite3 "${dbPath}" ".backup '${tempPath}'"`);
-      
+      await spawnAsync('sqlite3', [dbPath, `.backup '${tempPath}'`]);
+
      // Verify the backup
-      const verifyResult = await execAsync(`sqlite3 "${tempPath}" "PRAGMA integrity_check"`);
+      const verifyResult = await spawnAsync('sqlite3', [tempPath, 'PRAGMA integrity_check']);
      if (!verifyResult.stdout.includes('ok')) {
        throw new Error('Backup integrity check failed');
      }
@@ -192,14 +190,6 @@ class DatabaseBackupService {
  async createPostgreSQLBackup(outputPath, options = {}) {
    const { host, port, user, password, database } = knexConfig.connection;
    
-    // Build connection string with proper escaping
-    const connectionParts = [
-      `host=${host}`,
-      `port=${port}`,
-      `dbname=${database}`,
-      `user=${user}`
-    ];
-    
    // Set PGPASSWORD environment variable for security
    const env = { ...process.env };
    if (password) {
@@ -227,14 +217,17 @@ class DatabaseBackupService {
      pgDumpOptions.push('--compress=6');
    }
    
-    const command = `pg_dump "${connectionParts.join(' ')}" ${pgDumpOptions.join(' ')} > "${outputPath}"`;
-    
+    const pgDumpArgs = [
+      ...pgDumpOptions,
+      '-h', host,
+      '-p', String(port),
+      '-U', user,
+      '-d', database
+    ];
+
    try {
-      const { stderr } = await execAsync(command, { 
-        env, 
-        maxBuffer: 1024 * 1024 * 100 // 100MB buffer
-      });
-      
+      const { stderr } = await spawnToFile('pg_dump', pgDumpArgs, outputPath, { env });
+
      // pg_dump writes progress to stderr, not an error
      if (stderr && !stderr.includes('dump complete')) {
        logger.warn('pg_dump warnings:', stderr);
@@ -261,7 +254,7 @@ class DatabaseBackupService {
    try {
      if (this.dbType === 'sqlite') {
        // For SQLite, we can directly check integrity
-        const result = await execAsync(`sqlite3 "${backupPath}" "PRAGMA integrity_check"`);
+        const result = await spawnAsync('sqlite3', [backupPath, 'PRAGMA integrity_check']);
        if (!result.stdout.includes('ok')) {
          throw new Error('Backup integrity check failed');
        }
@@ -0,0 +1,195 @@
+/**
+ * Environment Detection Service
+ * Detects the deployment environment and generates update instructions accordingly.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const logger = require('../utils/logger');
+
+/**
+ * Detect the current deployment environment
+ * @returns {Object} Environment information
+ */
+async function detectEnvironment() {
+  // Check for Docker environment
+  const isDocker = fs.existsSync('/.dockerenv') ||
+                   process.env.DOCKER_CONTAINER === 'true';
+
+  // Determine project root (services -> src -> backend)
+  const projectRoot = path.join(__dirname, '../../..');
+
+  // Check for git repository
+  const isGit = fs.existsSync(path.join(projectRoot, '.git'));
+
+  // Check for docker-compose files
+  const hasDockerCompose = fs.existsSync(path.join(projectRoot, 'docker-compose.yml')) ||
+                           fs.existsSync(path.join(projectRoot, 'docker-compose.yaml'));
+
+  // Get app version
+  let appVersion = '0.0.0';
+  try {
+    const packagePath = path.join(__dirname, '../../package.json');
+    const packageContent = fs.readFileSync(packagePath, 'utf8');
+    const packageJson = JSON.parse(packageContent);
+    appVersion = packageJson.version || '0.0.0';
+  } catch (err) {
+    logger.warn('Could not read package.json for version:', err.message);
+  }
+
+  // Determine environment type
+  let type;
+  if (isDocker) {
+    type = 'docker';
+  } else if (isGit) {
+    type = 'git';
+  } else {
+    type = 'standalone';
+  }
+
+  return {
+    type,
+    isDocker,
+    isGit,
+    hasDockerCompose,
+    platform: process.platform,
+    nodeVersion: process.version,
+    appVersion
+  };
+}
+
+/**
+ * Generate environment-specific update instructions
+ * @param {Object} env - Environment info from detectEnvironment()
+ * @param {string} targetVersion - Target version to update to
+ * @returns {Object} Update instructions with pre-checks, steps, and post-checks
+ */
+function generateUpdateInstructions(env, targetVersion) {
+  const instructions = {
+    preChecks: [
+      {
+        id: 'backup',
+        text: 'I have backed up my database',
+        required: true
+      },
+      {
+        id: 'no-uploads',
+        text: 'No uploads are currently in progress',
+        required: true
+      },
+      {
+        id: 'downtime-aware',
+        text: 'I understand the application will restart during update',
+        required: false
+      }
+    ],
+    steps: [],
+    postChecks: [
+      'Verify the application starts correctly',
+      'Check the version in Admin -> System',
+      'Review release notes for any breaking changes or required actions'
+    ],
+    warnings: []
+  };
+
+  if (env.isDocker) {
+    instructions.environmentName = 'Docker';
+    instructions.steps = [
+      {
+        description: 'Pull latest images',
+        command: 'docker compose pull',
+        note: 'Downloads the new version images'
+      },
+      {
+        description: 'Recreate containers with new images',
+        command: 'docker compose up -d',
+        note: 'Restarts containers with new version'
+      },
+      {
+        description: 'Watch logs for startup (optional)',
+        command: 'docker compose logs -f backend',
+        note: 'Press Ctrl+C to exit logs',
+        optional: true
+      }
+    ];
+    instructions.warnings.push('Make sure you are in the directory containing your docker-compose.yml file');
+  } else if (env.isGit) {
+    instructions.environmentName = 'Git (Development)';
+    instructions.steps = [
+      {
+        description: 'Fetch latest changes',
+        command: 'git fetch origin',
+        note: 'Downloads references from remote'
+      },
+      {
+        description: 'Switch to new version tag',
+        command: `git checkout v${targetVersion}`,
+        note: 'Switches to the release version'
+      },
+      {
+        description: 'Install backend dependencies',
+        command: 'cd backend && npm install',
+        note: 'Updates npm packages'
+      },
+      {
+        description: 'Build frontend',
+        command: 'cd frontend && npm install && npm run build',
+        note: 'Compiles the frontend application'
+      },
+      {
+        description: 'Run database migrations',
+        command: 'cd backend && npm run migrate',
+        note: 'Updates database schema'
+      },
+      {
+        description: 'Restart application',
+        command: '# Restart your application (pm2, systemd, etc.)',
+        note: 'Method depends on your setup - e.g., pm2 restart picpeak'
+      }
+    ];
+    instructions.warnings.push('Adjust the restart command based on your process manager (pm2, systemd, etc.)');
+  } else {
+    instructions.environmentName = 'Standalone';
+    instructions.steps = [
+      {
+        description: 'Download release archive',
+        command: `# Download v${targetVersion} from GitHub Releases`,
+        note: `https://github.com/the-luap/picpeak/releases/tag/v${targetVersion}`
+      },
+      {
+        description: 'Backup current installation',
+        command: '# Create backup of current files',
+        note: 'Keep a copy of your current installation'
+      },
+      {
+        description: 'Extract and replace application files',
+        command: '# Extract release archive to installation directory',
+        note: 'Preserve your .env file and storage directory'
+      },
+      {
+        description: 'Install dependencies',
+        command: 'cd backend && npm install --production',
+        note: 'Updates npm packages'
+      },
+      {
+        description: 'Run database migrations',
+        command: 'cd backend && npm run migrate',
+        note: 'Updates database schema'
+      },
+      {
+        description: 'Restart application',
+        command: '# Restart your application service',
+        note: 'Method depends on your setup'
+      }
+    ];
+    instructions.warnings.push('Make sure to preserve your .env file and storage directory when updating');
+    instructions.warnings.push('Consider creating a full backup before updating');
+  }
+
+  return instructions;
+}
+
+module.exports = {
+  detectEnvironment,
+  generateUpdateInstructions
+};
@@ -14,8 +14,9 @@ const { formatBoolean } = require('../utils/dbCompat');
 const { validatePasswordInContext, getBcryptRounds } = require('../utils/passwordValidation');
 const { buildShareLinkVariants } = require('./shareLinkService');
 const { parseBooleanInput, parseStringInput } = require('../utils/parsers');
+const eventTypeService = require('./eventTypeService');

-const getStoragePath = () => process.env.STORAGE_PATH || path.join(__dirname, '../../storage');
+const getStoragePath = () => process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');

 // Cache for schema detection
 let customerColumnCache = null;
@@ -67,13 +68,23 @@ const mapEventForApi = (event) => {

 /**
 * Generate a unique slug for an event
- * @param {string} eventType
+ * @param {string} eventType - Event type identifier (slug_prefix or legacy type)
 * @param {string} eventName
 * @param {string} eventDate
 * @returns {Promise<string>}
 */
 const generateUniqueSlug = async (eventType, eventName, eventDate) => {
-  const baseSlug = `${eventType}-${eventName.toLowerCase().replace(/[^a-z0-9]/g, '-')}-${eventDate}`;
+  // Get the slug_prefix from event type (supports both new dynamic types and legacy)
+  const eventTypeInfo = await eventTypeService.getEventTypeForSlug(eventType);
+  const slugPrefix = eventTypeInfo.slug_prefix || eventType;
+
+  const processedName = eventName
+    .toLowerCase()
+    .replace(/[^a-z0-9]/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '');
+
+  const baseSlug = `${slugPrefix}-${processedName}-${eventDate}`;
  let slug = baseSlug;
  let counter = 1;

@@ -0,0 +1,314 @@
+/**
+ * Event Type Service Layer
+ * Handles all event type-related business logic
+ *
+ * @module services/eventTypeService
+ */
+
+const { db } = require('../database/db');
+const { formatBoolean } = require('../utils/dbCompat');
+
+/**
+ * Get all event types
+ * @param {Object} options - Filter options
+ * @param {boolean} options.activeOnly - Only return active types
+ * @returns {Promise<Array>} - Array of event types
+ */
+const getAllEventTypes = async (options = {}) => {
+  const { activeOnly = false } = options;
+
+  let query = db('event_types').select('*');
+
+  if (activeOnly) {
+    query = query.where('is_active', formatBoolean(true));
+  }
+
+  const types = await query.orderBy('display_order', 'asc');
+  return types;
+};
+
+/**
+ * Get active event types for dropdown/selection
+ * @returns {Promise<Array>} - Array of active event types
+ */
+const getActiveEventTypes = async () => {
+  return getAllEventTypes({ activeOnly: true });
+};
+
+/**
+ * Get an event type by ID
+ * @param {number} id - Event type ID
+ * @returns {Promise<Object|null>}
+ */
+const getEventTypeById = async (id) => {
+  const eventType = await db('event_types').where('id', id).first();
+  return eventType || null;
+};
+
+/**
+ * Get an event type by slug prefix
+ * @param {string} slugPrefix - The slug prefix
+ * @returns {Promise<Object|null>}
+ */
+const getEventTypeBySlugPrefix = async (slugPrefix) => {
+  const eventType = await db('event_types')
+    .where('slug_prefix', slugPrefix.toLowerCase())
+    .first();
+  return eventType || null;
+};
+
+/**
+ * Check if a slug prefix is valid (exists in event_types or is a legacy type)
+ * @param {string} slugPrefix - The slug prefix to validate
+ * @returns {Promise<boolean>}
+ */
+const isValidEventType = async (slugPrefix) => {
+  const normalized = slugPrefix.toLowerCase();
+
+  // Check in database
+  const eventType = await getEventTypeBySlugPrefix(normalized);
+  if (eventType && eventType.is_active) {
+    return true;
+  }
+
+  // Legacy fallback: Accept old hardcoded values for backward compatibility
+  const legacyTypes = ['wedding', 'birthday', 'corporate', 'other'];
+  return legacyTypes.includes(normalized);
+};
+
+/**
+ * Get all valid slug prefixes (for validation)
+ * @returns {Promise<string[]>}
+ */
+const getValidSlugPrefixes = async () => {
+  const types = await db('event_types')
+    .where('is_active', formatBoolean(true))
+    .select('slug_prefix');
+
+  return types.map(t => t.slug_prefix);
+};
+
+/**
+ * Create a new event type
+ * @param {Object} eventTypeData - Event type data
+ * @returns {Promise<Object>} - Created event type
+ */
+const createEventType = async (eventTypeData) => {
+  const {
+    name,
+    slug_prefix,
+    emoji,
+    theme_preset,
+    theme_config,
+    display_order
+  } = eventTypeData;
+
+  // Normalize slug_prefix
+  const normalizedSlugPrefix = slug_prefix.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+
+  // Check for duplicate slug_prefix
+  const existing = await getEventTypeBySlugPrefix(normalizedSlugPrefix);
+  if (existing) {
+    const error = new Error('An event type with this slug prefix already exists');
+    error.code = 'DUPLICATE_SLUG_PREFIX';
+    throw error;
+  }
+
+  // Get max display order if not provided
+  let finalDisplayOrder = display_order;
+  if (finalDisplayOrder === undefined || finalDisplayOrder === null) {
+    const maxOrder = await db('event_types').max('display_order as max').first();
+    finalDisplayOrder = (maxOrder?.max || 0) + 1;
+  }
+
+  const insertData = {
+    name,
+    slug_prefix: normalizedSlugPrefix,
+    emoji: emoji || '📷',
+    theme_preset: theme_preset || 'default',
+    theme_config: theme_config ? JSON.stringify(theme_config) : null,
+    display_order: finalDisplayOrder,
+    is_system: false,
+    is_active: true,
+    created_at: new Date(),
+    updated_at: new Date()
+  };
+
+  const insertResult = await db('event_types').insert(insertData).returning('id');
+  const eventTypeId = insertResult[0]?.id || insertResult[0];
+
+  return getEventTypeById(eventTypeId);
+};
+
+/**
+ * Update an event type
+ * @param {number} id - Event type ID
+ * @param {Object} updates - Fields to update
+ * @returns {Promise<Object>} - Updated event type
+ */
+const updateEventType = async (id, updates) => {
+  const eventType = await getEventTypeById(id);
+  if (!eventType) {
+    const error = new Error('Event type not found');
+    error.code = 'NOT_FOUND';
+    throw error;
+  }
+
+  // Build update object
+  const updateData = {};
+
+  if (updates.name !== undefined) {
+    updateData.name = updates.name;
+  }
+
+  if (updates.slug_prefix !== undefined) {
+    const normalizedSlugPrefix = updates.slug_prefix.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+
+    // Check for duplicate (excluding current)
+    const existing = await db('event_types')
+      .where('slug_prefix', normalizedSlugPrefix)
+      .whereNot('id', id)
+      .first();
+
+    if (existing) {
+      const error = new Error('An event type with this slug prefix already exists');
+      error.code = 'DUPLICATE_SLUG_PREFIX';
+      throw error;
+    }
+
+    updateData.slug_prefix = normalizedSlugPrefix;
+  }
+
+  if (updates.emoji !== undefined) {
+    updateData.emoji = updates.emoji;
+  }
+
+  if (updates.theme_preset !== undefined) {
+    updateData.theme_preset = updates.theme_preset;
+  }
+
+  if (updates.theme_config !== undefined) {
+    updateData.theme_config = updates.theme_config ? JSON.stringify(updates.theme_config) : null;
+  }
+
+  if (updates.display_order !== undefined) {
+    updateData.display_order = updates.display_order;
+  }
+
+  if (updates.is_active !== undefined) {
+    updateData.is_active = formatBoolean(updates.is_active);
+  }
+
+  updateData.updated_at = new Date();
+
+  await db('event_types').where('id', id).update(updateData);
+
+  return getEventTypeById(id);
+};
+
+/**
+ * Delete an event type
+ * @param {number} id - Event type ID
+ * @returns {Promise<Object>}
+ */
+const deleteEventType = async (id) => {
+  const eventType = await getEventTypeById(id);
+  if (!eventType) {
+    const error = new Error('Event type not found');
+    error.code = 'NOT_FOUND';
+    throw error;
+  }
+
+  // Prevent deletion of system types
+  if (eventType.is_system) {
+    const error = new Error('Cannot delete system event types. You can deactivate them instead.');
+    error.code = 'SYSTEM_TYPE';
+    throw error;
+  }
+
+  // Check if any events use this type
+  const eventsUsingType = await db('events')
+    .where('event_type', eventType.slug_prefix)
+    .count('id as count')
+    .first();
+
+  if (eventsUsingType && parseInt(eventsUsingType.count) > 0) {
+    const error = new Error(`Cannot delete: ${eventsUsingType.count} events are using this type. Deactivate it instead or reassign those events.`);
+    error.code = 'IN_USE';
+    throw error;
+  }
+
+  await db('event_types').where('id', id).del();
+
+  return { success: true, deleted: eventType };
+};
+
+/**
+ * Reorder event types
+ * @param {Array} orderedIds - Array of IDs in new order
+ * @returns {Promise<Array>}
+ */
+const reorderEventTypes = async (orderedIds) => {
+  await db.transaction(async (trx) => {
+    for (let i = 0; i < orderedIds.length; i++) {
+      await trx('event_types')
+        .where('id', orderedIds[i])
+        .update({ display_order: i + 1, updated_at: new Date() });
+    }
+  });
+
+  return getAllEventTypes();
+};
+
+/**
+ * Get event type info for slug generation
+ * Returns the slug_prefix to use for a given event type identifier
+ * @param {string} eventTypeIdentifier - Either an ID or slug_prefix
+ * @returns {Promise<Object>} - Event type with slug_prefix and theme_preset
+ */
+const getEventTypeForSlug = async (eventTypeIdentifier) => {
+  // Try to find by slug_prefix first
+  let eventType = await getEventTypeBySlugPrefix(eventTypeIdentifier);
+
+  if (eventType) {
+    return eventType;
+  }
+
+  // Try by ID if numeric
+  if (!isNaN(eventTypeIdentifier)) {
+    eventType = await getEventTypeById(parseInt(eventTypeIdentifier));
+    if (eventType) {
+      return eventType;
+    }
+  }
+
+  // Fallback for legacy types - return a compatible object
+  const legacyDefaults = {
+    wedding: { slug_prefix: 'wedding', theme_preset: 'elegantWedding', emoji: '💒' },
+    birthday: { slug_prefix: 'birthday', theme_preset: 'birthdayFun', emoji: '🎂' },
+    corporate: { slug_prefix: 'corporate', theme_preset: 'corporateTimeline', emoji: '🏢' },
+    other: { slug_prefix: 'other', theme_preset: 'default', emoji: '📸' }
+  };
+
+  const normalized = eventTypeIdentifier.toLowerCase();
+  if (legacyDefaults[normalized]) {
+    return legacyDefaults[normalized];
+  }
+
+  // Default fallback
+  return { slug_prefix: 'event', theme_preset: 'default', emoji: '📷' };
+};
+
+module.exports = {
+  getAllEventTypes,
+  getActiveEventTypes,
+  getEventTypeById,
+  getEventTypeBySlugPrefix,
+  isValidEventType,
+  getValidSlugPrefixes,
+  createEventType,
+  updateEventType,
+  deleteEventType,
+  reorderEventTypes,
+  getEventTypeForSlug
+};
@@ -21,9 +21,11 @@ async function checkExpirations() {
    const warningDate = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000); // 7 days from now
    
    // Check for events needing warning emails
+    // Skip events with null expires_at (they never expire)
    const eventsNeedingWarning = await db('events')
      .where('is_active', formatBoolean(true))
      .where('is_archived', formatBoolean(false))
+      .whereNotNull('expires_at')
      .where('expires_at', '<=', warningDate)
      .where('expires_at', '>', now);
    
@@ -40,9 +42,11 @@ async function checkExpirations() {
    }
    
    // Check for expired events
+    // Skip events with null expires_at (they never expire)
    const expiredEvents = await db('events')
      .where('is_active', formatBoolean(true))
      .where('is_archived', formatBoolean(false))
+      .whereNotNull('expires_at')
      .where('expires_at', '<=', now);
    
    for (const event of expiredEvents) {
@@ -1,4 +1,5 @@
 const sharp = require('sharp');
+const exifr = require('exifr');
 const path = require('path');
 const fs = require('fs').promises;
 const logger = require('../utils/logger');
@@ -119,6 +120,9 @@ async function generateThumbnail(imagePath, options = {}) {
      failOnError: false // Don't fail on minor issues
    });
    
+    // Strip EXIF/metadata from thumbnails (privacy: prevent GPS leak etc.)
+    sharpInstance = sharpInstance.withMetadata(false);
+
    // Apply resize with configured settings
    // For square thumbnails with 'cover' fit, we crop to center
    sharpInstance = sharpInstance.resize(settings.width, settings.height, {
@@ -287,4 +291,220 @@ async function generateVideoPlaceholder(originalFilename, options = {}) {
  }
 }

-module.exports = { generateThumbnail, isThumbnailValid, ensureThumbnail, generateVideoPlaceholder };
+// Hero image settings - optimized for large displays
+const DEFAULT_HERO_WIDTH = 1920;
+const DEFAULT_HERO_HEIGHT = 1080;
+const DEFAULT_HERO_QUALITY = 85;
+const DEFAULT_HERO_FORMAT = 'jpeg';
+
+const getHeroPath = () => path.join(getStoragePath(), 'heroes');
+
+/**
+ * Generate a hero-optimized image for gallery headers
+ * Outputs a 1920x1080 image suitable for full-width hero sections
+ */
+async function generateHeroImage(imagePath, options = {}) {
+  const filename = path.basename(imagePath);
+  const heroFilename = `hero_${filename}`;
+  const heroDir = getHeroPath();
+  const heroPath = path.join(heroDir, heroFilename);
+
+  // Ensure hero directory exists
+  await fs.mkdir(heroDir, { recursive: true });
+
+  // Check if we need to regenerate
+  if (options.regenerate) {
+    try {
+      await fs.unlink(heroPath);
+      logger.info(`Deleted existing hero image: ${heroPath}`);
+    } catch (err) {
+      // File might not exist, that's okay
+    }
+  }
+
+  try {
+    // First, verify the source image is complete and valid
+    const metadata = await sharp(imagePath).metadata();
+
+    if (!metadata.width || !metadata.height) {
+      throw new Error('Invalid image metadata - file may be incomplete');
+    }
+
+    // Calculate dimensions to maintain aspect ratio while fitting within hero bounds
+    const heroWidth = options.width || DEFAULT_HERO_WIDTH;
+    const heroHeight = options.height || DEFAULT_HERO_HEIGHT;
+    const quality = options.quality || DEFAULT_HERO_QUALITY;
+
+    // Create sharp instance with memory-efficient settings
+    let sharpInstance = sharp(imagePath, {
+      limitInputPixels: 268402689,
+      sequentialRead: true,
+      failOnError: false
+    });
+
+    // Strip EXIF/metadata from hero images (privacy: prevent GPS leak etc.)
+    sharpInstance = sharpInstance.withMetadata(false);
+
+    // Resize to fit hero dimensions while maintaining aspect ratio
+    // Use 'cover' to fill the hero area (crops if needed)
+    sharpInstance = sharpInstance.resize(heroWidth, heroHeight, {
+      withoutEnlargement: false, // Allow upscaling for small images
+      fit: 'cover',
+      position: 'center'
+    });
+
+    // Apply JPEG format with high quality
+    sharpInstance = sharpInstance.jpeg({
+      quality: quality,
+      progressive: true,
+      mozjpeg: true
+    });
+
+    // Save the hero image
+    await sharpInstance.toFile(heroPath);
+
+    // Verify the hero image was created successfully
+    const stats = await fs.stat(heroPath);
+    if (stats.size === 0) {
+      throw new Error('Generated hero image is empty');
+    }
+
+    logger.info(`Generated hero image for ${filename}: ${heroPath}`);
+    return path.relative(getStoragePath(), heroPath);
+  } catch (error) {
+    const msg = (error && error.message) ? error.message : String(error);
+    logger.error(`Failed to generate hero image for ${filename}: ${msg}`);
+
+    // Clean up any partially created file
+    try {
+      await fs.unlink(heroPath);
+    } catch (unlinkErr) {
+      // Ignore unlink errors
+    }
+
+    return null;
+  }
+}
+
+/**
+ * Check if a hero image exists and is valid
+ */
+async function isHeroValid(heroPath) {
+  try {
+    const fullPath = path.join(getStoragePath(), heroPath);
+    const stats = await fs.stat(fullPath);
+
+    if (stats.size === 0) {
+      return false;
+    }
+
+    // Try to read metadata to ensure it's a valid image
+    await sharp(fullPath).metadata();
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+/**
+ * Ensure a hero image exists for a photo, regenerate if needed
+ */
+async function ensureHeroImage(photo) {
+  const { db } = require('../database/db');
+  const { resolvePhotoFilePath } = require('./photoResolver');
+
+  let originalPath;
+  try {
+    const event = await db('events').where('id', photo.event_id).first();
+    originalPath = resolvePhotoFilePath(event, photo);
+    logger.info(`Ensuring hero image for photo ${photo.id} from source: ${originalPath}`);
+  } catch (e) {
+    const msg = (e && e.message) ? e.message : String(e);
+    logger.error(`Failed to resolve original path for hero image (photo ${photo.id}): ${msg}`);
+    return null;
+  }
+
+  // Check if hero image exists and is valid
+  if (photo.hero_path) {
+    const isValid = await isHeroValid(photo.hero_path);
+    if (isValid) {
+      return photo.hero_path;
+    }
+    logger.warn(`Invalid hero image detected for photo ${photo.id}, regenerating...`);
+  }
+
+  // Generate new hero image
+  const newHeroPath = await generateHeroImage(originalPath, { regenerate: true });
+
+  if (newHeroPath) {
+    // Update database with new hero path
+    await db('photos')
+      .where({ id: photo.id })
+      .update({ hero_path: newHeroPath });
+
+    logger.info(`Regenerated hero image for photo ${photo.id}`);
+    return newHeroPath;
+  }
+
+  return null;
+}
+
+/**
+ * Extract capture date from EXIF metadata
+ * @param {string} imagePath - Path to the image file
+ * @returns {Date|null} - The capture date or null if not available
+ */
+async function extractCaptureDate(imagePath) {
+  try {
+    // Parse EXIF data, looking for common date fields
+    const exif = await exifr.parse(imagePath, {
+      pick: ['DateTimeOriginal', 'CreateDate', 'DateTimeDigitized', 'ModifyDate']
+    });
+
+    if (!exif) {
+      return null;
+    }
+
+    // Priority order: DateTimeOriginal > CreateDate > DateTimeDigitized > ModifyDate
+    const captureDate = exif.DateTimeOriginal ||
+                        exif.CreateDate ||
+                        exif.DateTimeDigitized ||
+                        exif.ModifyDate;
+
+    if (captureDate) {
+      // exifr returns Date objects directly when parsing dates
+      if (captureDate instanceof Date) {
+        // Validate the date is reasonable (not in the future, not before 1990)
+        const now = new Date();
+        const minDate = new Date('1990-01-01');
+        if (captureDate > minDate && captureDate <= now) {
+          return captureDate;
+        }
+      }
+      // Handle string dates if necessary
+      if (typeof captureDate === 'string') {
+        const parsed = new Date(captureDate);
+        if (!isNaN(parsed.getTime())) {
+          return parsed;
+        }
+      }
+    }
+
+    return null;
+  } catch (error) {
+    // Log only as debug - many images don't have EXIF data
+    logger.debug(`Could not extract EXIF date from ${path.basename(imagePath)}:`, error.message);
+    return null;
+  }
+}
+
+module.exports = {
+  generateThumbnail,
+  isThumbnailValid,
+  ensureThumbnail,
+  generateVideoPlaceholder,
+  generateHeroImage,
+  isHeroValid,
+  ensureHeroImage,
+  extractCaptureDate
+};
@@ -23,13 +23,13 @@ class PhotoExportService {
   */
  async getPhotosWithFeedback(eventId, photoIds = null) {
    let query = db('photos')
-      .leftJoin('categories', 'photos.category_id', 'categories.id')
+      .leftJoin('photo_categories', 'photos.category_id', 'photo_categories.id')
      .where('photos.event_id', eventId)
      .select(
        'photos.id',
        'photos.filename',
        'photos.original_filename',
-        'photos.file_path',
+        'photos.path',
        'photos.average_rating',
        'photos.feedback_count',
        'photos.like_count',
@@ -37,9 +37,9 @@ class PhotoExportService {
        'photos.comment_count',
        'photos.width',
        'photos.height',
-        'photos.file_size',
-        'photos.created_at',
-        'categories.name as category_name'
+        'photos.size_bytes',
+        'photos.uploaded_at',
+        'photo_categories.name as category_name'
      )
      .orderBy('photos.filename', 'asc');

@@ -86,7 +86,7 @@ class PhotoExportService {
    const { filename_format = 'original', separator = 'newline' } = options;

    const filenames = photos.map(photo =>
-      filename_format === 'original' ? photo.original_filename : photo.filename
+      filename_format === 'original' ? (photo.original_filename || photo.filename) : photo.filename
    );

    let content;
@@ -126,14 +126,14 @@ class PhotoExportService {
      'category',
      'width',
      'height',
-      'file_size',
-      'created_at'
+      'size_bytes',
+      'uploaded_at'
    ];

    const rows = photos.map(photo => [
-      filename_format === 'original' ? photo.original_filename : photo.filename,
+      filename_format === 'original' ? (photo.original_filename || photo.filename) : photo.filename,
      photo.original_filename || '',
-      photo.average_rating ? photo.average_rating.toFixed(2) : '0.00',
+      photo.average_rating ? parseFloat(photo.average_rating).toFixed(2) : '0.00',
      photo.feedback_count || 0,
      photo.like_count || 0,
      photo.favorite_count || 0,
@@ -141,8 +141,8 @@ class PhotoExportService {
      photo.category_name || '',
      photo.width || '',
      photo.height || '',
-      photo.file_size || '',
-      photo.created_at ? new Date(photo.created_at).toISOString() : ''
+      photo.size_bytes || '',
+      photo.uploaded_at ? new Date(photo.uploaded_at).toISOString() : ''
    ]);

    const csvContent = [
@@ -170,7 +170,7 @@ class PhotoExportService {

    for (const photo of photos) {
      const baseFilename = filename_format === 'original'
-        ? photo.original_filename
+        ? (photo.original_filename || photo.filename)
        : photo.filename;
      const xmpFilename = this.xmpGenerator.getXmpFilename(baseFilename);
      const xmpContent = this.xmpGenerator.generateXmp(photo, options);
@@ -209,21 +209,21 @@ class PhotoExportService {
      photos: photos.map(photo => ({
        id: photo.id,
        filename: photo.filename,
-        original_filename: photo.original_filename,
+        original_filename: photo.original_filename || null,
        category: photo.category_name || null,
        rating: {
-          average: photo.average_rating ? parseFloat(photo.average_rating.toFixed(2)) : 0,
+          average: photo.average_rating ? parseFloat(parseFloat(photo.average_rating).toFixed(2)) : 0,
          count: photo.feedback_count || 0
        },
        likes: photo.like_count || 0,
        favorites: photo.favorite_count || 0,
        comments: photo.comment_count || 0,
        dimensions: {
-          width: photo.width,
-          height: photo.height
+          width: photo.width || null,
+          height: photo.height || null
        },
-        file_size: photo.file_size,
-        created_at: photo.created_at
+        size_bytes: photo.size_bytes || null,
+        uploaded_at: photo.uploaded_at || null
      }))
    };

@@ -158,6 +158,7 @@ async function processUploadedPhotos(files, eventId, uploadedBy = 'admin', categ
      // Generate thumbnail and extract metadata
      let thumbnailPath;
      let videoMetadata = null;
+      let imageMetadata = null;

      if (isVideo) {
        // Process video: extract metadata and generate thumbnail
@@ -169,8 +170,22 @@ async function processUploadedPhotos(files, eventId, uploadedBy = 'admin', categ
        videoMetadata = result.metadata;
        thumbnailPath = path.relative(getStoragePath(), videoThumbnailPath);
      } else {
-        // Process image: generate thumbnail
+        // Process image: generate thumbnail and extract dimensions
        thumbnailPath = await generateThumbnail(newPath);
+
+        // Extract image dimensions using sharp
+        try {
+          const sharp = require('sharp');
+          const metadata = await sharp(newPath).metadata();
+          if (metadata.width && metadata.height) {
+            imageMetadata = {
+              width: metadata.width,
+              height: metadata.height
+            };
+          }
+        } catch (metadataError) {
+          console.warn(`Could not extract image dimensions for ${file.originalname}:`, metadataError.message);
+        }
      }

      // Calculate relative paths
@@ -186,6 +201,7 @@ async function processUploadedPhotos(files, eventId, uploadedBy = 'admin', categ
      const photoData = {
        event_id: eventId,
        filename: newFilename,
+        original_filename: file.originalname,
        path: relativePath,
        thumbnail_path: relativeThumbPath,
        type: photoType,
@@ -205,6 +221,12 @@ async function processUploadedPhotos(files, eventId, uploadedBy = 'admin', categ
        photoData.height = videoMetadata.height;
      }

+      // Add image dimensions if available
+      if (!isVideo && imageMetadata) {
+        photoData.width = imageMetadata.width;
+        photoData.height = imageMetadata.height;
+      }
+
      if (supportsReturning) {
        insertResult = await trx('photos')
          .insert(photoData)
@@ -10,7 +10,7 @@ const fs = require('fs').promises;
 const { db } = require('../database/db');
 const { formatBoolean } = require('../utils/dbCompat');

-const getStoragePath = () => process.env.STORAGE_PATH || path.join(__dirname, '../../storage');
+const getStoragePath = () => process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');

 /**
 * Get photos for an event with optional filtering
@@ -4,9 +4,7 @@ const crypto = require('crypto');
 const zlib = require('zlib');
 const { pipeline } = require('stream/promises');
 const { createReadStream, createWriteStream } = require('fs');
-const { exec } = require('child_process');
-const { promisify } = require('util');
-const execAsync = promisify(exec);
+const { spawnAsync, spawnToFile, spawnFromFile } = require('../utils/safeExec');
 const { db } = require('../database/db');
 const knexConfig = require('../../knexfile');
 const logger = require('../utils/logger');
@@ -418,12 +416,14 @@ class RestoreService {
      let availableBytes = 0;
      let diskCheckSucceeded = false;
      try {
-        const { exec } = require('child_process');
-        const execAsync = promisify(exec);
        // Use root path as fallback if storage path doesn't exist yet
        const checkPath = await fs.access(storagePath).then(() => storagePath).catch(() => '/');
-        const { stdout } = await execAsync(`df -k "${checkPath}" | tail -1 | awk '{print $4}'`);
-        const parsed = parseInt(stdout.trim());
+        const { stdout } = await spawnAsync('df', ['-k', checkPath]);
+        // Parse df output: last line, 4th column is available KB
+        const lines = stdout.trim().split('\n');
+        const lastLine = lines[lines.length - 1];
+        const columns = lastLine.trim().split(/\s+/);
+        const parsed = parseInt(columns[3]);
        if (!isNaN(parsed) && parsed > 0) {
          availableBytes = parsed * 1024; // Convert from KB to bytes
          diskCheckSucceeded = true;
@@ -492,15 +492,12 @@ class RestoreService {
        
        if (this.dbType === 'sqlite') {
          const dbPath = knexConfig.connection.filename;
-          await execAsync(`sqlite3 "${dbPath}" ".backup '${dbBackupPath}'"`);
+          await spawnAsync('sqlite3', [dbPath, `.backup '${dbBackupPath}'`]);
        } else {
          // PostgreSQL backup
          const { host, port, user, password, database } = knexConfig.connection;
          const env = { ...process.env, PGPASSWORD: password };
-          await execAsync(
-            `pg_dump -h ${host} -p ${port} -U ${user} -d ${database} > "${dbBackupPath}"`,
-            { env }
-          );
+          await spawnToFile('pg_dump', ['-h', host, '-p', String(port), '-U', user, '-d', database], dbBackupPath, { env });
        }

        // Compress database backup
@@ -513,8 +510,8 @@ class RestoreService {
        this.log('info', 'Backing up current files...');
        const storagePath = process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');
        const filesBackupPath = path.join(backupPath, 'files.tar.gz');
-        
-        await execAsync(`tar -czf "${filesBackupPath}" -C "${path.dirname(storagePath)}" "${path.basename(storagePath)}"`);
+
+        await spawnAsync('tar', ['-czf', filesBackupPath, '-C', path.dirname(storagePath), path.basename(storagePath)]);
      }

      // Create backup manifest
@@ -696,10 +693,10 @@ class RestoreService {
        
        try {
          // Restore from backup
-          await execAsync(`sqlite3 "${dbPath}" ".restore '${restoreFile}'"`);
-          
+          await spawnAsync('sqlite3', [dbPath, `.restore '${restoreFile}'`]);
+
          // Verify integrity
-          const integrityCheck = await execAsync(`sqlite3 "${dbPath}" "PRAGMA integrity_check"`);
+          const integrityCheck = await spawnAsync('sqlite3', [dbPath, 'PRAGMA integrity_check']);
          if (!integrityCheck.stdout.includes('ok')) {
            throw new Error('Database integrity check failed after restore');
          }
@@ -722,21 +719,12 @@ class RestoreService {
        // Drop and recreate database (extremely dangerous!)
        this.log('warn', 'Dropping and recreating PostgreSQL database...');
        
-        await execAsync(
-          `psql -h ${host} -p ${port} -U ${user} -c "DROP DATABASE IF EXISTS ${database}"`,
-          { env }
-        );
-        
-        await execAsync(
-          `psql -h ${host} -p ${port} -U ${user} -c "CREATE DATABASE ${database}"`,
-          { env }
-        );
-        
+        await spawnAsync('psql', ['-h', host, '-p', String(port), '-U', user, '-c', `DROP DATABASE IF EXISTS ${database}`], { env });
+
+        await spawnAsync('psql', ['-h', host, '-p', String(port), '-U', user, '-c', `CREATE DATABASE ${database}`], { env });
+
        // Restore from backup
-        await execAsync(
-          `psql -h ${host} -p ${port} -U ${user} -d ${database} < "${restoreFile}"`,
-          { env, maxBuffer: 1024 * 1024 * 100 } // 100MB buffer
-        );
+        await spawnFromFile('psql', ['-h', host, '-p', String(port), '-U', user, '-d', database], restoreFile, { env });
      }

      // Re-initialize database connection
@@ -987,14 +975,11 @@ class RestoreService {

        if (this.dbType === 'sqlite') {
          const dbPath = knexConfig.connection.filename;
-          await execAsync(`sqlite3 "${dbPath}" ".restore '${decompressedPath}'"`);
+          await spawnAsync('sqlite3', [dbPath, `.restore '${decompressedPath}'`]);
        } else {
          const { host, port, user, password, database } = knexConfig.connection;
          const env = { ...process.env, PGPASSWORD: password };
-          await execAsync(
-            `psql -h ${host} -p ${port} -U ${user} -d ${database} < "${decompressedPath}"`,
-            { env }
-          );
+          await spawnFromFile('psql', ['-h', host, '-p', String(port), '-U', user, '-d', database], decompressedPath, { env });
        }

        await fs.unlink(decompressedPath);
@@ -1004,7 +989,7 @@ class RestoreService {
      const filesBackupPath = path.join(preRestoreBackupPath, 'files.tar.gz');
      if (await fs.access(filesBackupPath).then(() => true).catch(() => false)) {
        const storagePath = process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');
-        await execAsync(`tar -xzf "${filesBackupPath}" -C "${path.dirname(storagePath)}"`);
+        await spawnAsync('tar', ['-xzf', filesBackupPath, '-C', path.dirname(storagePath)]);
      }

      this.log('info', 'Rollback completed successfully');
@@ -0,0 +1,128 @@
+const { db } = require('../database/db');
+
+let cachedRobotsTxt = null;
+let cacheTimestamp = 0;
+const CACHE_TTL_MS = 60 * 1000; // 60 seconds
+
+function parseSetting(raw) {
+  if (raw === null || raw === undefined) return null;
+  if (typeof raw !== 'string') return raw;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return raw;
+  }
+}
+
+async function getSeoSettings() {
+  const rows = await db('app_settings')
+    .where('setting_type', 'seo')
+    .select('setting_key', 'setting_value');
+
+  const settings = {};
+  for (const row of rows) {
+    settings[row.setting_key] = parseSetting(row.setting_value);
+  }
+  return settings;
+}
+
+const SOCIAL_BOTS = [
+  'Twitterbot',
+  'facebookexternalhit',
+  'LinkedInBot',
+  'Slackbot',
+  'WhatsApp',
+  'TelegramBot',
+  'Discordbot'
+];
+
+async function generateRobotsTxt() {
+  const now = Date.now();
+  if (cachedRobotsTxt && (now - cacheTimestamp) < CACHE_TTL_MS) {
+    return cachedRobotsTxt;
+  }
+
+  const settings = await getSeoSettings();
+  const allowIndexing = settings.seo_allow_indexing === true;
+  const blockAiCrawlers = settings.seo_block_ai_crawlers !== false;
+  const blockSocialBots = settings.seo_block_social_bots === true;
+  const aiAgents = Array.isArray(settings.seo_blocked_ai_agents)
+    ? settings.seo_blocked_ai_agents
+    : [];
+  const customRules = Array.isArray(settings.seo_custom_rules)
+    ? settings.seo_custom_rules
+    : [];
+  const sitemapUrl = settings.seo_sitemap_url || '';
+
+  const lines = [];
+
+  // Always block admin and API paths for all agents
+  lines.push('# Protected paths');
+  lines.push('User-agent: *');
+  lines.push('Disallow: /admin');
+  lines.push('Disallow: /api');
+  lines.push('');
+
+  if (!allowIndexing) {
+    // Block everything for all agents
+    lines.push('# Indexing disabled - block all crawlers');
+    lines.push('User-agent: *');
+    lines.push('Disallow: /');
+    lines.push('');
+  }
+
+  // Block AI crawlers if enabled
+  if (blockAiCrawlers && aiAgents.length > 0) {
+    lines.push('# AI/LLM crawler blocking');
+    for (const agent of aiAgents) {
+      lines.push(`User-agent: ${agent}`);
+      lines.push('Disallow: /');
+      lines.push('');
+    }
+  }
+
+  // Block social bots if enabled
+  if (blockSocialBots) {
+    lines.push('# Social media bot blocking');
+    for (const bot of SOCIAL_BOTS) {
+      lines.push(`User-agent: ${bot}`);
+      lines.push('Disallow: /');
+      lines.push('');
+    }
+  }
+
+  // Custom rules
+  if (customRules.length > 0) {
+    lines.push('# Custom rules');
+    for (const rule of customRules) {
+      if (rule.userAgent && Array.isArray(rule.disallow)) {
+        lines.push(`User-agent: ${rule.userAgent}`);
+        for (const path of rule.disallow) {
+          lines.push(`Disallow: ${path}`);
+        }
+        lines.push('');
+      }
+    }
+  }
+
+  // Sitemap
+  if (sitemapUrl) {
+    lines.push(`Sitemap: ${sitemapUrl}`);
+    lines.push('');
+  }
+
+  const result = lines.join('\n');
+  cachedRobotsTxt = result;
+  cacheTimestamp = now;
+  return result;
+}
+
+function clearRobotsTxtCache() {
+  cachedRobotsTxt = null;
+  cacheTimestamp = 0;
+}
+
+module.exports = {
+  generateRobotsTxt,
+  clearRobotsTxtCache
+};
@@ -0,0 +1,246 @@
+/**
+ * Update Notification Service
+ * Checks for updates and sends email notifications to administrators.
+ */
+
+const { db } = require('../database/db');
+const { checkForUpdates } = require('./updateCheckService');
+const { sendTemplateEmail, initializeTransporter } = require('./emailProcessor');
+const logger = require('../utils/logger');
+
+/**
+ * Get update notification settings from database
+ */
+async function getUpdateNotificationSettings() {
+  try {
+    const settings = await db('app_settings')
+      .whereIn('setting_key', [
+        'update_email_notifications_enabled',
+        'update_email_recipients',
+        'last_notified_version'
+      ])
+      .select('setting_key', 'setting_value');
+
+    const result = {};
+    for (const setting of settings) {
+      try {
+        result[setting.setting_key] = JSON.parse(setting.setting_value);
+      } catch (e) {
+        result[setting.setting_key] = setting.setting_value;
+      }
+    }
+
+    return {
+      enabled: result.update_email_notifications_enabled === true,
+      recipients: result.update_email_recipients || '',
+      lastNotifiedVersion: result.last_notified_version || ''
+    };
+  } catch (error) {
+    logger.error('Error fetching update notification settings:', error);
+    return {
+      enabled: false,
+      recipients: '',
+      lastNotifiedVersion: ''
+    };
+  }
+}
+
+/**
+ * Update the last notified version in database
+ */
+async function updateLastNotifiedVersion(version) {
+  try {
+    await db('app_settings')
+      .where('setting_key', 'last_notified_version')
+      .update({
+        setting_value: JSON.stringify(version),
+        updated_at: db.fn.now()
+      });
+  } catch (error) {
+    logger.error('Error updating last notified version:', error);
+  }
+}
+
+/**
+ * Get admin email addresses to notify
+ * If recipients setting is empty, get all active admin emails
+ */
+async function getNotificationRecipients(recipientsSetting) {
+  try {
+    if (recipientsSetting && recipientsSetting.trim()) {
+      // Use configured recipients (comma-separated)
+      return recipientsSetting.split(',').map(email => email.trim()).filter(Boolean);
+    }
+
+    // Fallback: get all active admin user emails
+    const admins = await db('admin_users')
+      .where('is_active', true)
+      .whereNotNull('email')
+      .select('email');
+
+    return admins.map(admin => admin.email).filter(Boolean);
+  } catch (error) {
+    logger.error('Error fetching notification recipients:', error);
+    return [];
+  }
+}
+
+/**
+ * Check for updates and send notification emails if new version is available
+ */
+async function checkAndNotifyUpdates() {
+  logger.info('Update notification service: Checking for updates...');
+
+  try {
+    // Check if update notifications are enabled
+    const settings = await getUpdateNotificationSettings();
+
+    if (!settings.enabled) {
+      logger.info('Update email notifications are disabled');
+      return { notified: false, reason: 'notifications_disabled' };
+    }
+
+    // Check for available updates
+    const updateInfo = await checkForUpdates();
+
+    if (!updateInfo.updateAvailable) {
+      logger.info('No updates available');
+      return { notified: false, reason: 'no_updates' };
+    }
+
+    const newVersion = updateInfo.latest.forChannel;
+
+    // Check if we've already notified about this version
+    if (settings.lastNotifiedVersion === newVersion) {
+      logger.info(`Already notified about version ${newVersion}`);
+      return { notified: false, reason: 'already_notified' };
+    }
+
+    // Get recipients
+    const recipients = await getNotificationRecipients(settings.recipients);
+
+    if (recipients.length === 0) {
+      logger.warn('No recipients configured for update notifications');
+      return { notified: false, reason: 'no_recipients' };
+    }
+
+    // Ensure email transporter is initialized
+    await initializeTransporter();
+
+    // Send email to each recipient
+    const frontendUrl = process.env.FRONTEND_URL || 'http://localhost:3000';
+    const releaseNotesUrl = `https://github.com/the-luap/picpeak/releases/tag/v${newVersion}`;
+    const channelLabel = updateInfo.channel === 'beta' ? 'Beta' : 'Stable';
+
+    let successCount = 0;
+    let errorCount = 0;
+
+    for (const email of recipients) {
+      try {
+        await sendTemplateEmail(email, 'version_update_available', {
+          current_version: updateInfo.current,
+          new_version: newVersion,
+          channel: channelLabel,
+          release_notes_url: releaseNotesUrl,
+          admin_url: `${frontendUrl}/admin`
+        });
+        successCount++;
+        logger.info(`Update notification sent to ${email}`);
+      } catch (error) {
+        errorCount++;
+        logger.error(`Failed to send update notification to ${email}:`, error);
+      }
+    }
+
+    // Update last notified version
+    if (successCount > 0) {
+      await updateLastNotifiedVersion(newVersion);
+      logger.info(`Update notifications sent: ${successCount} success, ${errorCount} failed`);
+    }
+
+    return {
+      notified: successCount > 0,
+      newVersion,
+      successCount,
+      errorCount,
+      totalRecipients: recipients.length
+    };
+  } catch (error) {
+    logger.error('Error in update notification service:', error);
+    return { notified: false, reason: 'error', error: error.message };
+  }
+}
+
+/**
+ * Force send update notification (for manual trigger from admin UI)
+ */
+async function sendUpdateNotificationNow() {
+  logger.info('Manually triggering update notification...');
+
+  try {
+    // Check for available updates
+    const updateInfo = await checkForUpdates(true); // Force refresh
+
+    if (!updateInfo.updateAvailable) {
+      return { success: false, message: 'No updates available' };
+    }
+
+    const newVersion = updateInfo.latest.forChannel;
+    const settings = await getUpdateNotificationSettings();
+
+    // Get recipients
+    const recipients = await getNotificationRecipients(settings.recipients);
+
+    if (recipients.length === 0) {
+      return { success: false, message: 'No recipients configured' };
+    }
+
+    // Ensure email transporter is initialized
+    await initializeTransporter();
+
+    // Send email to each recipient
+    const releaseNotesUrl = `https://github.com/the-luap/picpeak/releases/tag/v${newVersion}`;
+    const channelLabel = updateInfo.channel === 'beta' ? 'Beta' : 'Stable';
+
+    let successCount = 0;
+    let errorCount = 0;
+
+    for (const email of recipients) {
+      try {
+        await sendTemplateEmail(email, 'version_update_available', {
+          current_version: updateInfo.current,
+          new_version: newVersion,
+          channel: channelLabel,
+          release_notes_url: releaseNotesUrl
+        });
+        successCount++;
+      } catch (error) {
+        errorCount++;
+        logger.error(`Failed to send update notification to ${email}:`, error);
+      }
+    }
+
+    // Update last notified version
+    if (successCount > 0) {
+      await updateLastNotifiedVersion(newVersion);
+    }
+
+    return {
+      success: successCount > 0,
+      newVersion,
+      successCount,
+      errorCount,
+      totalRecipients: recipients.length
+    };
+  } catch (error) {
+    logger.error('Error sending manual update notification:', error);
+    return { success: false, message: error.message };
+  }
+}
+
+module.exports = {
+  checkAndNotifyUpdates,
+  sendUpdateNotificationNow,
+  getUpdateNotificationSettings,
+  getNotificationRecipients
+};
@@ -7,6 +7,25 @@ const CACHE_TTL_MS = 60_000;
 let cachedValue = DEFAULT_MAX_FILES_PER_UPLOAD;
 let cacheExpiresAt = 0;

+// Map of file extension to MIME type(s)
+const EXTENSION_TO_MIME = {
+  'jpg': 'image/jpeg',
+  'jpeg': 'image/jpeg',
+  'png': 'image/png',
+  'webp': 'image/webp',
+  'gif': 'image/gif',
+  'mp4': 'video/mp4',
+  'm4v': 'video/mp4',
+  'webm': 'video/webm',
+  'mov': 'video/quicktime',
+  'avi': 'video/x-msvideo',
+};
+
+const DEFAULT_ALLOWED_FILE_TYPES = 'jpg,jpeg,png,webp';
+
+let cachedAllowedTypes = null;
+let allowedTypesCacheExpiresAt = 0;
+
 const parseSettingValue = (setting) => {
  if (!setting || setting.setting_value == null) {
    return null;
@@ -79,9 +98,76 @@ const clearMaxFilesPerUploadCache = () => {
  cacheExpiresAt = 0;
 };

+/**
+ * Convert a comma-separated list of file extensions into an array of MIME types.
+ * Unknown extensions are silently ignored.
+ */
+const extensionsToMimeTypes = (extString) => {
+  if (!extString || typeof extString !== 'string') {
+    return extensionsToMimeTypes(DEFAULT_ALLOWED_FILE_TYPES);
+  }
+
+  const mimeSet = new Set();
+  extString.split(',').forEach(ext => {
+    const cleaned = ext.trim().toLowerCase().replace(/^\./, '');
+    const mime = EXTENSION_TO_MIME[cleaned];
+    if (mime) {
+      mimeSet.add(mime);
+    }
+  });
+
+  if (mimeSet.size === 0) {
+    return extensionsToMimeTypes(DEFAULT_ALLOWED_FILE_TYPES);
+  }
+
+  return Array.from(mimeSet);
+};
+
+/**
+ * Get the allowed MIME types for uploads from the database setting.
+ * Returns an array of MIME type strings, e.g. ['image/jpeg', 'image/png', 'video/mp4'].
+ */
+const getAllowedMimeTypes = async () => {
+  if (Date.now() < allowedTypesCacheExpiresAt && cachedAllowedTypes) {
+    return cachedAllowedTypes;
+  }
+
+  try {
+    const setting = await db('app_settings')
+      .where({ setting_key: 'general_allowed_file_types' })
+      .first();
+
+    let rawValue = setting?.setting_value;
+    if (typeof rawValue === 'string') {
+      try { rawValue = JSON.parse(rawValue); } catch { /* keep string */ }
+    }
+
+    const mimeTypes = extensionsToMimeTypes(rawValue);
+    cachedAllowedTypes = mimeTypes;
+    allowedTypesCacheExpiresAt = Date.now() + CACHE_TTL_MS;
+    return mimeTypes;
+  } catch (error) {
+    console.error('Failed to read allowed file types setting:', error.message);
+    const fallback = extensionsToMimeTypes(DEFAULT_ALLOWED_FILE_TYPES);
+    cachedAllowedTypes = fallback;
+    allowedTypesCacheExpiresAt = Date.now() + CACHE_TTL_MS;
+    return fallback;
+  }
+};
+
+const clearAllowedTypesCache = () => {
+  allowedTypesCacheExpiresAt = 0;
+  cachedAllowedTypes = null;
+};
+
 module.exports = {
  getMaxFilesPerUpload,
  clearMaxFilesPerUploadCache,
+  getAllowedMimeTypes,
+  clearAllowedTypesCache,
+  extensionsToMimeTypes,
+  EXTENSION_TO_MIME,
  DEFAULT_MAX_FILES_PER_UPLOAD,
-  MAX_ALLOWED_FILES_PER_UPLOAD
+  MAX_ALLOWED_FILES_PER_UPLOAD,
+  DEFAULT_ALLOWED_FILE_TYPES
 };
@@ -60,7 +60,7 @@ async function createInvitation({ email, roleId, invitedById }) {
  // Queue invitation email
  const frontendUrl = process.env.FRONTEND_URL || process.env.ADMIN_URL || 'http://localhost:3005';
  await queueEmail(null, email, 'admin_invitation', {
-    invite_link: `${frontendUrl}/admin/accept-invite/${token}`,
+    invite_link: `${frontendUrl}/invite/${token}`,
    role_name: role.display_name,
    expires_at: expiresAt.toISOString()
  });
@@ -0,0 +1,433 @@
+/**
+ * WatermarkGeneratorService
+ *
+ * Handles batch generation of pre-watermarked images for fast serving.
+ * This service is responsible for:
+ * - Generating watermarks for newly uploaded photos
+ * - Regenerating all watermarks when settings change
+ * - Tracking regeneration progress
+ */
+
+const path = require('path');
+const { db } = require('../database/db');
+const watermarkService = require('./watermarkService');
+const { getStoragePath } = require('../config/storage');
+
+class WatermarkGeneratorService {
+  constructor() {
+    // Track active regeneration jobs
+    this.activeJobs = new Map();
+    // Batch size for processing (to manage memory)
+    this.batchSize = 10;
+    // Concurrent processing limit
+    this.concurrentLimit = 2;
+  }
+
+  /**
+   * Generate watermark for a single photo
+   * @param {number} photoId - The photo ID
+   * @returns {Object} Result with success status and watermark path
+   */
+  async generateForPhoto(photoId) {
+    try {
+      // Get photo with event info
+      const photo = await db('photos')
+        .join('events', 'photos.event_id', 'events.id')
+        .where('photos.id', photoId)
+        .select(
+          'photos.*',
+          'events.slug',
+          'events.source_mode',
+          'events.external_path'
+        )
+        .first();
+
+      if (!photo) {
+        return { success: false, error: 'Photo not found' };
+      }
+
+      // Skip video files
+      if (photo.media_type === 'video' || (photo.mime_type && photo.mime_type.startsWith('video/'))) {
+        return { success: false, error: 'Videos do not support watermarks' };
+      }
+
+      // Get watermark settings
+      const settings = await watermarkService.getWatermarkSettings();
+      if (!settings || !settings.enabled) {
+        return { success: false, error: 'Watermarking is disabled' };
+      }
+
+      // Resolve the original file path
+      const originalPath = this.resolvePhotoPath(photo);
+      if (!originalPath) {
+        return { success: false, error: 'Could not resolve photo path' };
+      }
+
+      // Generate and save watermark
+      const result = await watermarkService.generateAndSaveWatermark(photo, originalPath, settings);
+
+      if (result.success) {
+        // Update database with watermark path
+        await db('photos')
+          .where({ id: photoId })
+          .update({
+            watermark_path: result.watermarkPath,
+            watermark_generated_at: db.fn.now()
+          });
+      }
+
+      return result;
+    } catch (error) {
+      console.error(`Error generating watermark for photo ${photoId}:`, error);
+      return { success: false, error: error.message };
+    }
+  }
+
+  /**
+   * Resolve the full file path for a photo
+   */
+  resolvePhotoPath(photo) {
+    const storagePath = getStoragePath();
+
+    // Handle external/reference mode
+    if (photo.source_mode === 'reference' && photo.external_relpath) {
+      const externalRoot = process.env.EXTERNAL_MEDIA_PATH || path.join(storagePath, 'external');
+      return path.join(externalRoot, photo.external_path || '', photo.external_relpath);
+    }
+
+    // Standard managed mode
+    if (photo.file_path) {
+      // file_path might be absolute or relative
+      if (path.isAbsolute(photo.file_path)) {
+        return photo.file_path;
+      }
+      return path.join(storagePath, photo.file_path);
+    }
+
+    // Fallback to constructing path from slug and filename
+    return path.join(storagePath, 'events', 'active', photo.slug, photo.filename);
+  }
+
+  /**
+   * Generate watermarks for all photos in an event
+   * @param {number} eventId - The event ID
+   * @param {Function} onProgress - Optional callback for progress updates
+   * @returns {Object} Result with success count and errors
+   */
+  async generateForEvent(eventId, onProgress = null) {
+    const results = { total: 0, success: 0, failed: 0, errors: [] };
+
+    try {
+      // Get all photos for the event (excluding videos)
+      const photos = await db('photos')
+        .join('events', 'photos.event_id', 'events.id')
+        .where('photos.event_id', eventId)
+        .whereNot(function() {
+          this.where('photos.media_type', 'video')
+            .orWhere('photos.mime_type', 'like', 'video/%');
+        })
+        .select(
+          'photos.*',
+          'events.slug',
+          'events.source_mode',
+          'events.external_path'
+        );
+
+      results.total = photos.length;
+
+      if (photos.length === 0) {
+        return results;
+      }
+
+      // Get watermark settings once
+      const settings = await watermarkService.getWatermarkSettings();
+      if (!settings || !settings.enabled) {
+        return { ...results, errors: ['Watermarking is disabled'] };
+      }
+
+      // Process in batches
+      for (let i = 0; i < photos.length; i += this.batchSize) {
+        const batch = photos.slice(i, i + this.batchSize);
+
+        // Process batch with limited concurrency
+        const batchResults = await Promise.all(
+          batch.map(photo => this.processPhotoWatermark(photo, settings))
+        );
+
+        // Collect results
+        for (const result of batchResults) {
+          if (result.success) {
+            results.success++;
+          } else {
+            results.failed++;
+            if (result.error) {
+              results.errors.push(`Photo ${result.photoId}: ${result.error}`);
+            }
+          }
+        }
+
+        // Progress callback
+        if (onProgress) {
+          onProgress({
+            total: results.total,
+            processed: results.success + results.failed,
+            success: results.success,
+            failed: results.failed
+          });
+        }
+      }
+
+      return results;
+    } catch (error) {
+      console.error(`Error generating watermarks for event ${eventId}:`, error);
+      return { ...results, errors: [...results.errors, error.message] };
+    }
+  }
+
+  /**
+   * Process watermark for a single photo (internal helper)
+   */
+  async processPhotoWatermark(photo, settings) {
+    try {
+      const originalPath = this.resolvePhotoPath(photo);
+      if (!originalPath) {
+        return { success: false, photoId: photo.id, error: 'Could not resolve path' };
+      }
+
+      const result = await watermarkService.generateAndSaveWatermark(photo, originalPath, settings);
+
+      if (result.success) {
+        await db('photos')
+          .where({ id: photo.id })
+          .update({
+            watermark_path: result.watermarkPath,
+            watermark_generated_at: db.fn.now()
+          });
+      }
+
+      return { ...result, photoId: photo.id };
+    } catch (error) {
+      return { success: false, photoId: photo.id, error: error.message };
+    }
+  }
+
+  /**
+   * Regenerate watermarks for all photos in the system
+   * @param {Function} onProgress - Optional callback for progress updates
+   * @returns {Object} Result with success count and errors
+   */
+  async regenerateAll(onProgress = null) {
+    const jobId = Date.now().toString();
+    const results = { jobId, total: 0, success: 0, failed: 0, errors: [], status: 'running' };
+
+    try {
+      this.activeJobs.set(jobId, results);
+
+      // Get watermark settings
+      const settings = await watermarkService.getWatermarkSettings();
+      if (!settings || !settings.enabled) {
+        results.status = 'completed';
+        results.errors.push('Watermarking is disabled');
+        return results;
+      }
+
+      // First, clear existing watermarks from DB (the files will be overwritten)
+      // This ensures stale paths don't persist if regeneration fails
+
+      // Get all image photos (exclude videos)
+      const photos = await db('photos')
+        .join('events', 'photos.event_id', 'events.id')
+        .whereNot(function() {
+          this.where('photos.media_type', 'video')
+            .orWhere('photos.mime_type', 'like', 'video/%');
+        })
+        .select(
+          'photos.*',
+          'events.slug',
+          'events.source_mode',
+          'events.external_path'
+        );
+
+      results.total = photos.length;
+
+      if (photos.length === 0) {
+        results.status = 'completed';
+        return results;
+      }
+
+      console.log(`Starting watermark regeneration for ${photos.length} photos`);
+
+      // Process in batches
+      for (let i = 0; i < photos.length; i += this.batchSize) {
+        // Check if job was cancelled
+        if (!this.activeJobs.has(jobId)) {
+          results.status = 'cancelled';
+          return results;
+        }
+
+        const batch = photos.slice(i, i + this.batchSize);
+
+        // Process batch with limited concurrency
+        const batchResults = await Promise.all(
+          batch.map(photo => this.processPhotoWatermark(photo, settings))
+        );
+
+        // Collect results
+        for (const result of batchResults) {
+          if (result.success) {
+            results.success++;
+          } else {
+            results.failed++;
+            if (result.error && results.errors.length < 50) {
+              results.errors.push(`Photo ${result.photoId}: ${result.error}`);
+            }
+          }
+        }
+
+        // Update job status
+        this.activeJobs.set(jobId, { ...results });
+
+        // Progress callback
+        if (onProgress) {
+          onProgress({
+            jobId,
+            total: results.total,
+            processed: results.success + results.failed,
+            success: results.success,
+            failed: results.failed,
+            percentComplete: Math.round(((results.success + results.failed) / results.total) * 100)
+          });
+        }
+
+        // Small delay between batches to prevent CPU saturation
+        await new Promise(resolve => setTimeout(resolve, 100));
+      }
+
+      results.status = 'completed';
+      console.log(`Watermark regeneration completed: ${results.success}/${results.total} successful`);
+
+      return results;
+    } catch (error) {
+      console.error('Error during watermark regeneration:', error);
+      results.status = 'failed';
+      results.errors.push(error.message);
+      return results;
+    } finally {
+      // Clean up job tracking after a delay
+      setTimeout(() => {
+        this.activeJobs.delete(jobId);
+      }, 60000); // Keep for 1 minute for status queries
+    }
+  }
+
+  /**
+   * Clear all watermarks (when watermarking is disabled)
+   */
+  async clearAllWatermarks() {
+    try {
+      // Get all photos with watermarks
+      const photos = await db('photos')
+        .whereNotNull('watermark_path')
+        .select('id', 'watermark_path');
+
+      // Delete watermark files
+      for (const photo of photos) {
+        await watermarkService.deleteWatermarkFile(photo.watermark_path);
+      }
+
+      // Clear database paths
+      await db('photos')
+        .whereNotNull('watermark_path')
+        .update({
+          watermark_path: null,
+          watermark_generated_at: null
+        });
+
+      console.log(`Cleared ${photos.length} watermarks`);
+      return { success: true, cleared: photos.length };
+    } catch (error) {
+      console.error('Error clearing watermarks:', error);
+      return { success: false, error: error.message };
+    }
+  }
+
+  /**
+   * Delete watermark for a specific photo
+   */
+  async deleteForPhoto(photoId) {
+    try {
+      const photo = await db('photos')
+        .where({ id: photoId })
+        .select('watermark_path')
+        .first();
+
+      if (photo && photo.watermark_path) {
+        await watermarkService.deleteWatermarkFile(photo.watermark_path);
+        await db('photos')
+          .where({ id: photoId })
+          .update({
+            watermark_path: null,
+            watermark_generated_at: null
+          });
+      }
+
+      return { success: true };
+    } catch (error) {
+      console.error(`Error deleting watermark for photo ${photoId}:`, error);
+      return { success: false, error: error.message };
+    }
+  }
+
+  /**
+   * Get status of an active regeneration job
+   */
+  getJobStatus(jobId) {
+    return this.activeJobs.get(jobId) || null;
+  }
+
+  /**
+   * Cancel an active regeneration job
+   */
+  cancelJob(jobId) {
+    if (this.activeJobs.has(jobId)) {
+      this.activeJobs.delete(jobId);
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Check if there's an active regeneration job
+   */
+  hasActiveJob() {
+    for (const [, job] of this.activeJobs) {
+      if (job.status === 'running') {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Get count of photos needing watermark generation
+   */
+  async getPendingCount() {
+    const settings = await watermarkService.getWatermarkSettings();
+    if (!settings || !settings.enabled) {
+      return 0;
+    }
+
+    const result = await db('photos')
+      .whereNull('watermark_path')
+      .whereNot(function() {
+        this.where('media_type', 'video')
+          .orWhere('mime_type', 'like', 'video/%');
+      })
+      .count('id as count')
+      .first();
+
+    return parseInt(result.count) || 0;
+  }
+}
+
+module.exports = new WatermarkGeneratorService();
@@ -2,6 +2,7 @@ const sharp = require('sharp');
 const path = require('path');
 const fs = require('fs').promises;
 const { db } = require('../database/db');
+const { getStoragePath } = require('../config/storage');

 class WatermarkService {
  constructor() {
@@ -232,6 +233,125 @@ class WatermarkService {
  clearCache() {
    this.cache.clear();
  }
+
+  /**
+   * Get the watermarks directory path, creating it if needed
+   */
+  async getWatermarksDir() {
+    const watermarksDir = path.join(getStoragePath(), 'watermarks');
+    try {
+      await fs.access(watermarksDir);
+    } catch {
+      await fs.mkdir(watermarksDir, { recursive: true });
+    }
+    return watermarksDir;
+  }
+
+  /**
+   * Get the file extension from a filename
+   */
+  getFileExtension(filename) {
+    const ext = path.extname(filename).toLowerCase();
+    // Map common extensions
+    if (ext === '.jpeg') return '.jpg';
+    return ext || '.jpg';
+  }
+
+  /**
+   * Generate watermarked version of a photo and save to disk
+   * @param {Object} photo - Photo object with id, filename, and path info
+   * @param {string} originalPath - Full path to the original image file
+   * @param {Object} settings - Watermark settings (optional, will fetch if not provided)
+   * @returns {Object} { success, watermarkPath, error }
+   */
+  async generateAndSaveWatermark(photo, originalPath, settings = null) {
+    try {
+      // Get settings if not provided
+      if (!settings) {
+        settings = await this.getWatermarkSettings();
+      }
+
+      // If watermarking is disabled, return early
+      if (!settings || !settings.enabled) {
+        return { success: false, watermarkPath: null, error: 'Watermarking is disabled' };
+      }
+
+      // Verify original file exists
+      try {
+        await fs.access(originalPath);
+      } catch {
+        return { success: false, watermarkPath: null, error: 'Original file not found' };
+      }
+
+      // Generate watermarked buffer using existing method
+      const watermarkedBuffer = await this.applyWatermark(originalPath, settings);
+
+      // Determine output path
+      const watermarksDir = await this.getWatermarksDir();
+      const ext = this.getFileExtension(photo.filename);
+      const outputFilename = `${photo.id}_watermarked${ext}`;
+      const outputPath = path.join(watermarksDir, outputFilename);
+
+      // Write the watermarked image to disk
+      await fs.writeFile(outputPath, watermarkedBuffer);
+
+      // Return relative path for database storage
+      const relativePath = `watermarks/${outputFilename}`;
+
+      return {
+        success: true,
+        watermarkPath: relativePath,
+        error: null
+      };
+    } catch (error) {
+      console.error(`Error generating watermark for photo ${photo.id}:`, error);
+      return {
+        success: false,
+        watermarkPath: null,
+        error: error.message
+      };
+    }
+  }
+
+  /**
+   * Delete a pre-generated watermark file
+   * @param {string} watermarkPath - Relative path to the watermark file
+   * @returns {boolean} - True if deleted successfully
+   */
+  async deleteWatermarkFile(watermarkPath) {
+    if (!watermarkPath) return false;
+
+    try {
+      const fullPath = path.join(getStoragePath(), watermarkPath);
+      await fs.unlink(fullPath);
+      return true;
+    } catch (error) {
+      // File might not exist, which is fine
+      if (error.code !== 'ENOENT') {
+        console.error('Error deleting watermark file:', error);
+      }
+      return false;
+    }
+  }
+
+  /**
+   * Create a hash of current watermark settings for change detection
+   * @returns {string} - Hash string of settings
+   */
+  async getSettingsHash() {
+    const settings = await this.getWatermarkSettings();
+    if (!settings) return '';
+
+    const hashData = `${settings.enabled}-${settings.logoPath || ''}-${settings.position}-${settings.opacity}-${settings.size}`;
+    // Simple hash for change detection (not cryptographic)
+    let hash = 0;
+    for (let i = 0; i < hashData.length; i++) {
+      const char = hashData.charCodeAt(i);
+      hash = ((hash << 5) - hash) + char;
+      hash = hash & hash; // Convert to 32bit integer
+    }
+    return hash.toString(16);
+  }
 }

 module.exports = new WatermarkService();
@@ -76,7 +76,7 @@ class XmpGenerator {
   * @returns {string} Description XML
   */
  generateDescription(photo) {
-    const rating = photo.average_rating ? photo.average_rating.toFixed(1) : '0';
+    const rating = photo.average_rating ? parseFloat(photo.average_rating).toFixed(1) : '0';
    const likes = photo.like_count || 0;
    const favorites = photo.favorite_count || 0;

@@ -0,0 +1,113 @@
+const { spawn } = require('child_process');
+
+/**
+ * Safe command execution utilities using spawn (shell: false).
+ * These prevent command injection by never invoking a shell interpreter.
+ */
+
+/**
+ * Run a command with arguments, returning { stdout, stderr }.
+ * Equivalent to execAsync(cmd) but safe from injection.
+ */
+function spawnAsync(cmd, args = [], options = {}) {
+  return new Promise((resolve, reject) => {
+    const child = spawn(cmd, args, {
+      shell: false,
+      ...options,
+      stdio: ['ignore', 'pipe', 'pipe']
+    });
+
+    const stdoutChunks = [];
+    const stderrChunks = [];
+
+    child.stdout.on('data', chunk => stdoutChunks.push(chunk));
+    child.stderr.on('data', chunk => stderrChunks.push(chunk));
+
+    child.on('error', reject);
+    child.on('close', (code) => {
+      const stdout = Buffer.concat(stdoutChunks).toString();
+      const stderr = Buffer.concat(stderrChunks).toString();
+      if (code !== 0) {
+        const err = new Error(`${cmd} exited with code ${code}: ${stderr}`);
+        err.code = code;
+        err.stdout = stdout;
+        err.stderr = stderr;
+        return reject(err);
+      }
+      resolve({ stdout, stderr });
+    });
+  });
+}
+
+/**
+ * Run a command and redirect stdout to a file (replaces shell `> file`).
+ */
+function spawnToFile(cmd, args, outputPath, options = {}) {
+  const fs = require('fs');
+  return new Promise((resolve, reject) => {
+    const outStream = fs.createWriteStream(outputPath);
+    const child = spawn(cmd, args, {
+      shell: false,
+      ...options,
+      stdio: ['ignore', outStream, 'pipe']
+    });
+
+    const stderrChunks = [];
+    child.stderr.on('data', chunk => stderrChunks.push(chunk));
+
+    child.on('error', (err) => {
+      outStream.destroy();
+      reject(err);
+    });
+    child.on('close', (code) => {
+      outStream.end();
+      const stderr = Buffer.concat(stderrChunks).toString();
+      if (code !== 0) {
+        const err = new Error(`${cmd} exited with code ${code}: ${stderr}`);
+        err.code = code;
+        err.stderr = stderr;
+        return reject(err);
+      }
+      resolve({ stderr });
+    });
+  });
+}
+
+/**
+ * Run a command and pipe a file into stdin (replaces shell `< file`).
+ */
+function spawnFromFile(cmd, args, inputPath, options = {}) {
+  const fs = require('fs');
+  return new Promise((resolve, reject) => {
+    const inStream = fs.createReadStream(inputPath);
+    const child = spawn(cmd, args, {
+      shell: false,
+      ...options,
+      stdio: [inStream, 'pipe', 'pipe']
+    });
+
+    const stdoutChunks = [];
+    const stderrChunks = [];
+    child.stdout.on('data', chunk => stdoutChunks.push(chunk));
+    child.stderr.on('data', chunk => stderrChunks.push(chunk));
+
+    child.on('error', (err) => {
+      inStream.destroy();
+      reject(err);
+    });
+    child.on('close', (code) => {
+      const stdout = Buffer.concat(stdoutChunks).toString();
+      const stderr = Buffer.concat(stderrChunks).toString();
+      if (code !== 0) {
+        const err = new Error(`${cmd} exited with code ${code}: ${stderr}`);
+        err.code = code;
+        err.stdout = stdout;
+        err.stderr = stderr;
+        return reject(err);
+      }
+      resolve({ stdout, stderr });
+    });
+  });
+}
+
+module.exports = { spawnAsync, spawnToFile, spawnFromFile };
@@ -46,6 +46,7 @@ services:
      - NODE_ENV=production
      - DB_HOST=${DB_HOST:-postgres}
      - REDIS_HOST=redis
+      - STORAGE_PATH=/app/storage
      - PHOTOS_DIR=/app/storage/events
      - PICPEAK_RELEASE_CHANNEL=${PICPEAK_CHANNEL:-stable}
    volumes:
@@ -70,7 +70,7 @@ services:
    volumes:
      - postgres-data:/var/lib/postgresql/data
    ports:
-      - "${DB_PORT:-5432}:5432"
+      - "127.0.0.1:${DB_PORT:-5432}:5432"
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U ${DB_USER} -d ${DB_NAME}"]
      interval: 10s
@@ -89,7 +89,7 @@ services:
    volumes:
      - redis-data:/data
    ports:
-      - "${REDIS_PORT:-6379}:6379"
+      - "127.0.0.1:${REDIS_PORT:-6379}:6379"
    healthcheck:
      test: ["CMD", "redis-cli", "--raw", "incr", "ping"]
      interval: 10s
@@ -12,9 +12,6 @@ LABEL org.opencontainers.image.source="https://github.com/the-luap/picpeak"
 LABEL org.opencontainers.image.description="PicPeak Frontend Application"
 LABEL org.opencontainers.image.licenses="MIT"

-# Upgrade npm to fix glob CVE-2025-64756 vulnerability
-RUN npm install -g npm@latest
-
 # Set working directory
 WORKDIR /app

@@ -30,12 +27,10 @@ COPY . .
 # Build the application
 RUN npm run build

-# Production stage (use Alpine with patched libpng/c-ares)
-FROM nginx:1.27-alpine
+# Production stage (Alpine 3.23 with OpenSSL 3.5.5, patched libexpat)
+FROM nginx:1.28-alpine

-# Upgrade all packages to fix security vulnerabilities
-# This ensures libpng >= 1.6.51 (fixes CVE-2025-64720, CVE-2025-65018, CVE-2025-64505, CVE-2025-64506)
-# and c-ares >= 1.34.5 (fixes CVE-2025-31498)
+# Upgrade all packages to fix security vulnerabilities (OpenSSL, libexpat, BusyBox CVEs)
 RUN apk upgrade --no-cache

 # Install runtime dependencies
@@ -22,10 +22,10 @@ ENV VITE_API_URL=$VITE_API_URL
 # Build the application
 RUN npm run build

-# Production stage
-FROM nginx:alpine
+# Production stage (Alpine 3.23 with OpenSSL 3.5.5, patched libexpat)
+FROM nginx:1.28-alpine

-# Upgrade all packages to fix security vulnerabilities (BusyBox CVEs)
+# Upgrade all packages to fix security vulnerabilities (OpenSSL, libexpat, BusyBox CVEs)
 RUN apk upgrade --no-cache

 # Install runtime dependencies
@@ -1,6 +1,7 @@
 server {
    listen 80;
    server_name localhost;
+    server_tokens off;
    root /usr/share/nginx/html;
    index index.html;

@@ -8,8 +9,8 @@ server {
    resolver 127.0.0.11 valid=10s ipv6=off;
    resolver_timeout 5s;

-    # Allow larger file uploads (up to 100MB)
-    client_max_body_size 100M;
+    # Allow larger file uploads (up to 1GB for video support)
+    client_max_body_size 1G;
    client_body_timeout 300s;

    # Gzip compression
@@ -21,9 +22,9 @@ server {
    # Security headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
-    add_header X-XSS-Protection "1; mode=block" always;
-    add_header Referrer-Policy "no-referrer-when-downgrade" always;
-    add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline' 'unsafe-eval'" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+    add_header Permissions-Policy "camera=(), microphone=(), geolocation=(), payment=()" always;
+    add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://www.google.com https://www.gstatic.com; style-src 'self' 'unsafe-inline' https:; img-src 'self' data: https: blob:; connect-src 'self' https://www.google.com https://www.gstatic.com; font-src 'self' https: data:; object-src 'none'; media-src 'self'; frame-src 'self' https://www.google.com" always;

    # Health check endpoint
    location /health {
@@ -60,8 +61,8 @@ server {
        proxy_cache_bypass $http_upgrade;
        proxy_read_timeout 86400;

-        # Allow larger uploads for API endpoints
-        client_max_body_size 100M;
+        # Allow larger uploads for API endpoints (up to 1GB for video support)
+        client_max_body_size 1G;
        client_body_timeout 300s;
    }

@@ -111,6 +112,17 @@ server {
        proxy_cache_valid 404 1m;
    }

+    # Dynamic robots.txt served by backend
+    location = /robots.txt {
+        set $backend_upstream backend;
+        proxy_pass http://$backend_upstream:3000/robots.txt;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
    # Delegate root requests to backend for public landing page handling
    location = / {
        # Use variable to force DNS resolution per request (required for Docker Swarm)
@@ -1,12 +1,12 @@
 {
  "name": "picpeak-frontend",
-  "version": "1.1.15",
+  "version": "2.6.2",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "picpeak-frontend",
-      "version": "1.1.15",
+      "version": "2.6.2",
      "dependencies": {
        "@tanstack/react-query": "^5.0.0",
        "@tiptap/extension-character-count": "^2.26.1",
@@ -20,17 +20,20 @@
        "@types/dompurify": "^3.0.5",
        "@types/lodash": "^4.17.20",
        "@types/react-google-recaptcha": "^2.1.9",
-        "axios": "^1.12.2",
+        "axios": "1.14.0",
        "clsx": "^2.0.0",
        "date-fns": "4.1.0",
        "dompurify": "^3.2.6",
+        "framer-motion": "^12.33.0",
        "i18next": "^25.3.1",
        "i18next-browser-languagedetector": "^8.2.0",
        "i18next-http-backend": "^3.0.2",
+        "justified-layout": "^4.1.0",
        "linkifyjs": "^4.3.2",
        "lodash": "^4.17.21",
        "lowlight": "^2.9.0",
        "lucide-react": "0.525.0",
+        "photoswipe": "^5.4.4",
        "react": "^18.3.1",
        "react-countdown": "^2.3.5",
        "react-dom": "^18.3.1",
@@ -38,9 +41,12 @@
        "react-i18next": "^15.6.0",
        "react-image-gallery": "^1.2.11",
        "react-intersection-observer": "^9.4.3",
+        "react-photo-album": "^3.4.0",
        "react-router-dom": "^6.8.0",
        "react-toastify": "11.0.5",
-        "tailwind-merge": "^3.3.1"
+        "swiper": "^12.1.0",
+        "tailwind-merge": "^3.3.1",
+        "yet-another-react-lightbox": "^3.28.0"
      },
      "devDependencies": {
        "@eslint/js": "^9.29.0",
@@ -1281,9 +1287,9 @@
      "license": "MIT"
    },
    "node_modules/@remix-run/router": {
-      "version": "1.23.1",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.1.tgz",
-      "integrity": "sha512-vDbaOzF7yT2Qs4vO6XV1MHcJv+3dgR1sT+l3B8xxOVhUC336prMvqrvsLL/9Dnw2xr6Qhz4J0dmS0llNAbnUmQ==",
+      "version": "1.23.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.2.tgz",
+      "integrity": "sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w==",
      "license": "MIT",
      "engines": {
        "node": ">=14.0.0"
@@ -1297,9 +1303,9 @@
      "license": "MIT"
    },
    "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.53.3.tgz",
-      "integrity": "sha512-mRSi+4cBjrRLoaal2PnqH82Wqyb+d3HsPUN/W+WslCXsZsyHa9ZeQQX/pQsZaVIWDkPcpV6jJ+3KLbTbgnwv8w==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.59.0.tgz",
+      "integrity": "sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==",
      "cpu": [
        "arm"
      ],
@@ -1311,9 +1317,9 @@
      ]
    },
    "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.53.3.tgz",
-      "integrity": "sha512-CbDGaMpdE9sh7sCmTrTUyllhrg65t6SwhjlMJsLr+J8YjFuPmCEjbBSx4Z/e4SmDyH3aB5hGaJUP2ltV/vcs4w==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.59.0.tgz",
+      "integrity": "sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==",
      "cpu": [
        "arm64"
      ],
@@ -1325,9 +1331,9 @@
      ]
    },
    "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.53.3.tgz",
-      "integrity": "sha512-Nr7SlQeqIBpOV6BHHGZgYBuSdanCXuw09hon14MGOLGmXAFYjx1wNvquVPmpZnl0tLjg25dEdr4IQ6GgyToCUA==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.59.0.tgz",
+      "integrity": "sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==",
      "cpu": [
        "arm64"
      ],
@@ -1339,9 +1345,9 @@
      ]
    },
    "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.53.3.tgz",
-      "integrity": "sha512-DZ8N4CSNfl965CmPktJ8oBnfYr3F8dTTNBQkRlffnUarJ2ohudQD17sZBa097J8xhQ26AwhHJ5mvUyQW8ddTsQ==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.59.0.tgz",
+      "integrity": "sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==",
      "cpu": [
        "x64"
      ],
@@ -1353,9 +1359,9 @@
      ]
    },
    "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.53.3.tgz",
-      "integrity": "sha512-yMTrCrK92aGyi7GuDNtGn2sNW+Gdb4vErx4t3Gv/Tr+1zRb8ax4z8GWVRfr3Jw8zJWvpGHNpss3vVlbF58DZ4w==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.59.0.tgz",
+      "integrity": "sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==",
      "cpu": [
        "arm64"
      ],
@@ -1367,9 +1373,9 @@
      ]
    },
    "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.53.3.tgz",
-      "integrity": "sha512-lMfF8X7QhdQzseM6XaX0vbno2m3hlyZFhwcndRMw8fbAGUGL3WFMBdK0hbUBIUYcEcMhVLr1SIamDeuLBnXS+Q==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.59.0.tgz",
+      "integrity": "sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==",
      "cpu": [
        "x64"
      ],
@@ -1381,9 +1387,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.53.3.tgz",
-      "integrity": "sha512-k9oD15soC/Ln6d2Wv/JOFPzZXIAIFLp6B+i14KhxAfnq76ajt0EhYc5YPeX6W1xJkAdItcVT+JhKl1QZh44/qw==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.59.0.tgz",
+      "integrity": "sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==",
      "cpu": [
        "arm"
      ],
@@ -1395,9 +1401,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.53.3.tgz",
-      "integrity": "sha512-vTNlKq+N6CK/8UktsrFuc+/7NlEYVxgaEgRXVUVK258Z5ymho29skzW1sutgYjqNnquGwVUObAaxae8rZ6YMhg==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.59.0.tgz",
+      "integrity": "sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==",
      "cpu": [
        "arm"
      ],
@@ -1409,9 +1415,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.53.3.tgz",
-      "integrity": "sha512-RGrFLWgMhSxRs/EWJMIFM1O5Mzuz3Xy3/mnxJp/5cVhZ2XoCAxJnmNsEyeMJtpK+wu0FJFWz+QF4mjCA7AUQ3w==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.59.0.tgz",
+      "integrity": "sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==",
      "cpu": [
        "arm64"
      ],
@@ -1423,9 +1429,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.53.3.tgz",
-      "integrity": "sha512-kASyvfBEWYPEwe0Qv4nfu6pNkITLTb32p4yTgzFCocHnJLAHs+9LjUu9ONIhvfT/5lv4YS5muBHyuV84epBo/A==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.59.0.tgz",
+      "integrity": "sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==",
      "cpu": [
        "arm64"
      ],
@@ -1437,9 +1443,23 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.53.3.tgz",
-      "integrity": "sha512-JiuKcp2teLJwQ7vkJ95EwESWkNRFJD7TQgYmCnrPtlu50b4XvT5MOmurWNrCj3IFdyjBQ5p9vnrX4JM6I8OE7g==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.59.0.tgz",
+      "integrity": "sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.59.0.tgz",
+      "integrity": "sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==",
      "cpu": [
        "loong64"
      ],
@@ -1451,9 +1471,23 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.53.3.tgz",
-      "integrity": "sha512-EoGSa8nd6d3T7zLuqdojxC20oBfNT8nexBbB/rkxgKj5T5vhpAQKKnD+h3UkoMuTyXkP5jTjK/ccNRmQrPNDuw==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.59.0.tgz",
+      "integrity": "sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.59.0.tgz",
+      "integrity": "sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==",
      "cpu": [
        "ppc64"
      ],
@@ -1465,9 +1499,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.53.3.tgz",
-      "integrity": "sha512-4s+Wped2IHXHPnAEbIB0YWBv7SDohqxobiiPA1FIWZpX+w9o2i4LezzH/NkFUl8LRci/8udci6cLq+jJQlh+0g==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.59.0.tgz",
+      "integrity": "sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==",
      "cpu": [
        "riscv64"
      ],
@@ -1479,9 +1513,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.53.3.tgz",
-      "integrity": "sha512-68k2g7+0vs2u9CxDt5ktXTngsxOQkSEV/xBbwlqYcUrAVh6P9EgMZvFsnHy4SEiUl46Xf0IObWVbMvPrr2gw8A==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.59.0.tgz",
+      "integrity": "sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==",
      "cpu": [
        "riscv64"
      ],
@@ -1493,9 +1527,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.53.3.tgz",
-      "integrity": "sha512-VYsFMpULAz87ZW6BVYw3I6sWesGpsP9OPcyKe8ofdg9LHxSbRMd7zrVrr5xi/3kMZtpWL/wC+UIJWJYVX5uTKg==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.59.0.tgz",
+      "integrity": "sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==",
      "cpu": [
        "s390x"
      ],
@@ -1507,9 +1541,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.53.3.tgz",
-      "integrity": "sha512-3EhFi1FU6YL8HTUJZ51imGJWEX//ajQPfqWLI3BQq4TlvHy4X0MOr5q3D2Zof/ka0d5FNdPwZXm3Yyib/UEd+w==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.59.0.tgz",
+      "integrity": "sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==",
      "cpu": [
        "x64"
      ],
@@ -1520,9 +1554,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.53.3.tgz",
-      "integrity": "sha512-eoROhjcc6HbZCJr+tvVT8X4fW3/5g/WkGvvmwz/88sDtSJzO7r/blvoBDgISDiCjDRZmHpwud7h+6Q9JxFwq1Q==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.59.0.tgz",
+      "integrity": "sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==",
      "cpu": [
        "x64"
      ],
@@ -1533,10 +1567,24 @@
        "linux"
      ]
    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.59.0.tgz",
+      "integrity": "sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
    "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.53.3.tgz",
-      "integrity": "sha512-OueLAWgrNSPGAdUdIjSWXw+u/02BRTcnfw9PN41D2vq/JSEPnJnVuBgw18VkN8wcd4fjUs+jFHVM4t9+kBSNLw==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.59.0.tgz",
+      "integrity": "sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==",
      "cpu": [
        "arm64"
      ],
@@ -1548,9 +1596,9 @@
      ]
    },
    "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.53.3.tgz",
-      "integrity": "sha512-GOFuKpsxR/whszbF/bzydebLiXIHSgsEUp6M0JI8dWvi+fFa1TD6YQa4aSZHtpmh2/uAlj/Dy+nmby3TJ3pkTw==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.59.0.tgz",
+      "integrity": "sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==",
      "cpu": [
        "arm64"
      ],
@@ -1562,9 +1610,9 @@
      ]
    },
    "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.53.3.tgz",
-      "integrity": "sha512-iah+THLcBJdpfZ1TstDFbKNznlzoxa8fmnFYK4V67HvmuNYkVdAywJSoteUszvBQ9/HqN2+9AZghbajMsFT+oA==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.59.0.tgz",
+      "integrity": "sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==",
      "cpu": [
        "ia32"
      ],
@@ -1576,9 +1624,9 @@
      ]
    },
    "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.53.3.tgz",
-      "integrity": "sha512-J9QDiOIZlZLdcot5NXEepDkstocktoVjkaKUtqzgzpt2yWjGlbYiKyp05rWwk4nypbYUNoFAztEgixoLaSETkg==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.59.0.tgz",
+      "integrity": "sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==",
      "cpu": [
        "x64"
      ],
@@ -1590,9 +1638,9 @@
      ]
    },
    "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.53.3.tgz",
-      "integrity": "sha512-UhTd8u31dXadv0MopwGgNOBpUVROFKWVQgAg5N1ESyCz8AuBcMqm4AuTjrwgQKGDfoFuz02EuMRHQIw/frmYKQ==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.59.0.tgz",
+      "integrity": "sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==",
      "cpu": [
        "x64"
      ],
@@ -2343,7 +2391,7 @@
      "version": "18.3.7",
      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "peer": true,
      "peerDependencies": {
@@ -2578,13 +2626,13 @@
      }
    },
    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
      "dev": true,
      "license": "ISC",
      "dependencies": {
-        "brace-expansion": "^2.0.1"
+        "brace-expansion": "^2.0.2"
      },
      "engines": {
        "node": ">=16 || 14 >=14.17"
@@ -2819,9 +2867,9 @@
      }
    },
    "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -2972,14 +3020,14 @@
      }
    },
    "node_modules/axios": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
-      "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.14.0.tgz",
+      "integrity": "sha512-3Y8yrqLSwjuzpXuZ0oIYZ/XGgLwUIBU3uLvbcpb0pidD9ctpShJd43KSlEEkVQg6DS0G9NKyzOvBfUtDKEyHvQ==",
      "license": "MIT",
      "dependencies": {
-        "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.4",
-        "proxy-from-env": "^1.1.0"
+        "follow-redirects": "^1.15.11",
+        "form-data": "^4.0.5",
+        "proxy-from-env": "^2.1.0"
      }
    },
    "node_modules/balanced-match": {
@@ -4089,6 +4137,33 @@
        "url": "https://github.com/sponsors/rawify"
      }
    },
+    "node_modules/framer-motion": {
+      "version": "12.33.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.33.0.tgz",
+      "integrity": "sha512-ca8d+rRPcDP5iIF+MoT3WNc0KHJMjIyFAbtVLvM9eA7joGSpeqDfiNH/kCs1t4CHi04njYvWyj0jS4QlEK/rJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.33.0",
+        "motion-utils": "^12.29.2",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/fsevents": {
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -4664,6 +4739,12 @@
        "node": ">=6"
      }
    },
+    "node_modules/justified-layout": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/justified-layout/-/justified-layout-4.1.0.tgz",
+      "integrity": "sha512-M5FimNMXgiOYerVRGsXZ2YK9YNCaTtwtYp7Hb2308U1Q9TXXHx5G0p08mcVR5O53qf8bWY4NJcPBxE6zuayXSg==",
+      "license": "ISC"
+    },
    "node_modules/keyv": {
      "version": "4.5.4",
      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -4740,9 +4821,9 @@
      }
    },
    "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
      "license": "MIT"
    },
    "node_modules/lodash.merge": {
@@ -4827,9 +4908,9 @@
      }
    },
    "node_modules/markdown-it": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
-      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "version": "14.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.1.tgz",
+      "integrity": "sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==",
      "license": "MIT",
      "dependencies": {
        "argparse": "^2.0.1",
@@ -4927,9 +5008,9 @@
      }
    },
    "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
      "dev": true,
      "license": "ISC",
      "dependencies": {
@@ -4939,6 +5020,21 @@
        "node": "*"
      }
    },
+    "node_modules/motion-dom": {
+      "version": "12.33.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.33.0.tgz",
+      "integrity": "sha512-XRPebVypsl0UM+7v0Hr8o9UAj0S2djsQWRdHBd5iVouVpMrQqAI0C/rDAT3QaYnXnHuC5hMcwDHCboNeyYjPoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.29.2"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.29.2",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.29.2.tgz",
+      "integrity": "sha512-G3kc34H2cX2gI63RqU+cZq+zWRRPSsNIOjpdl9TN4AQwC4sgwYPl/Q/Obf/d53nOm569T0fYK+tcoSV50BWx8A==",
+      "license": "MIT"
+    },
    "node_modules/ms": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -5186,6 +5282,15 @@
        "node": ">= 14.16"
      }
    },
+    "node_modules/photoswipe": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.4.4.tgz",
+      "integrity": "sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.12.0"
+      }
+    },
    "node_modules/picocolors": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -5646,10 +5751,13 @@
      }
    },
    "node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "license": "MIT"
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
    },
    "node_modules/punycode": {
      "version": "2.3.1",
@@ -5813,6 +5921,27 @@
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
      "license": "MIT"
    },
+    "node_modules/react-photo-album": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/react-photo-album/-/react-photo-album-3.4.0.tgz",
+      "integrity": "sha512-pPaCoxEfVDhowpqxECq4SOD5kzP1Uao8PEN11Jasxayv4cZjad3Fy8SlKt6wvtLnVJRtOjsQDU/ZnnUuberwMg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/igordanchenko"
+      },
+      "peerDependencies": {
+        "@types/react": "^18 || ^19",
+        "react": "^18 || ^19"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/react-refresh": {
      "version": "0.17.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -5824,12 +5953,12 @@
      }
    },
    "node_modules/react-router": {
-      "version": "6.30.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.2.tgz",
-      "integrity": "sha512-H2Bm38Zu1bm8KUE5NVWRMzuIyAV8p/JrOaBJAwVmp37AXG72+CZJlEBw6pdn9i5TBgLMhNDgijS4ZlblpHyWTA==",
+      "version": "6.30.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.3.tgz",
+      "integrity": "sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw==",
      "license": "MIT",
      "dependencies": {
-        "@remix-run/router": "1.23.1"
+        "@remix-run/router": "1.23.2"
      },
      "engines": {
        "node": ">=14.0.0"
@@ -5839,13 +5968,13 @@
      }
    },
    "node_modules/react-router-dom": {
-      "version": "6.30.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.2.tgz",
-      "integrity": "sha512-l2OwHn3UUnEVUqc6/1VMmR1cvZryZ3j3NzapC2eUXO1dB0sYp5mvwdjiXhpUbRb21eFow3qSxpP8Yv6oAU824Q==",
+      "version": "6.30.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.3.tgz",
+      "integrity": "sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag==",
      "license": "MIT",
      "dependencies": {
-        "@remix-run/router": "1.23.1",
-        "react-router": "6.30.2"
+        "@remix-run/router": "1.23.2",
+        "react-router": "6.30.3"
      },
      "engines": {
        "node": ">=14.0.0"
@@ -5961,9 +6090,9 @@
      }
    },
    "node_modules/rollup": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.3.tgz",
-      "integrity": "sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
+      "integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -5977,28 +6106,31 @@
        "npm": ">=8.0.0"
      },
      "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.53.3",
-        "@rollup/rollup-android-arm64": "4.53.3",
-        "@rollup/rollup-darwin-arm64": "4.53.3",
-        "@rollup/rollup-darwin-x64": "4.53.3",
-        "@rollup/rollup-freebsd-arm64": "4.53.3",
-        "@rollup/rollup-freebsd-x64": "4.53.3",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.53.3",
-        "@rollup/rollup-linux-arm-musleabihf": "4.53.3",
-        "@rollup/rollup-linux-arm64-gnu": "4.53.3",
-        "@rollup/rollup-linux-arm64-musl": "4.53.3",
-        "@rollup/rollup-linux-loong64-gnu": "4.53.3",
-        "@rollup/rollup-linux-ppc64-gnu": "4.53.3",
-        "@rollup/rollup-linux-riscv64-gnu": "4.53.3",
-        "@rollup/rollup-linux-riscv64-musl": "4.53.3",
-        "@rollup/rollup-linux-s390x-gnu": "4.53.3",
-        "@rollup/rollup-linux-x64-gnu": "4.53.3",
-        "@rollup/rollup-linux-x64-musl": "4.53.3",
-        "@rollup/rollup-openharmony-arm64": "4.53.3",
-        "@rollup/rollup-win32-arm64-msvc": "4.53.3",
-        "@rollup/rollup-win32-ia32-msvc": "4.53.3",
-        "@rollup/rollup-win32-x64-gnu": "4.53.3",
-        "@rollup/rollup-win32-x64-msvc": "4.53.3",
+        "@rollup/rollup-android-arm-eabi": "4.59.0",
+        "@rollup/rollup-android-arm64": "4.59.0",
+        "@rollup/rollup-darwin-arm64": "4.59.0",
+        "@rollup/rollup-darwin-x64": "4.59.0",
+        "@rollup/rollup-freebsd-arm64": "4.59.0",
+        "@rollup/rollup-freebsd-x64": "4.59.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.59.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.59.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.59.0",
+        "@rollup/rollup-linux-arm64-musl": "4.59.0",
+        "@rollup/rollup-linux-loong64-gnu": "4.59.0",
+        "@rollup/rollup-linux-loong64-musl": "4.59.0",
+        "@rollup/rollup-linux-ppc64-gnu": "4.59.0",
+        "@rollup/rollup-linux-ppc64-musl": "4.59.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.59.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.59.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.59.0",
+        "@rollup/rollup-linux-x64-gnu": "4.59.0",
+        "@rollup/rollup-linux-x64-musl": "4.59.0",
+        "@rollup/rollup-openbsd-x64": "4.59.0",
+        "@rollup/rollup-openharmony-arm64": "4.59.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.59.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.59.0",
+        "@rollup/rollup-win32-x64-gnu": "4.59.0",
+        "@rollup/rollup-win32-x64-msvc": "4.59.0",
        "fsevents": "~2.3.2"
      }
    },
@@ -6227,6 +6359,25 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/swiper": {
+      "version": "12.1.2",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.1.2.tgz",
+      "integrity": "sha512-4gILrI3vXZqoZh71I1PALqukCFgk+gpOwe1tOvz5uE9kHtl2gTDzmYflYCwWvR4LOvCrJi6UEEU+gnuW5BtkgQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
    "node_modules/symbol-tree": {
      "version": "3.2.4",
      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -6447,6 +6598,12 @@
      "dev": true,
      "license": "Apache-2.0"
    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
    "node_modules/type-check": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -6890,6 +7047,32 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/yet-another-react-lightbox": {
+      "version": "3.28.0",
+      "resolved": "https://registry.npmjs.org/yet-another-react-lightbox/-/yet-another-react-lightbox-3.28.0.tgz",
+      "integrity": "sha512-bHjG1/DS4aWPkKb/6hNp0+zcgjda27wQlXBpJvb9TcblC1U1dY3Ih0pe85O8/ZLz+OIy+ZvLxN2gmsbDW0Q/QQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/igordanchenko"
+      },
+      "peerDependencies": {
+        "@types/react": "^16 || ^17 || ^18 || ^19",
+        "@types/react-dom": "^16 || ^17 || ^18 || ^19",
+        "react": "^16.8.0 || ^17 || ^18 || ^19",
+        "react-dom": "^16.8.0 || ^17 || ^18 || ^19"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/yocto-queue": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -1,7 +1,7 @@
 {
  "name": "picpeak-frontend",
  "private": true,
-  "version": "2.3.2",
+  "version": "2.6.5",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -24,17 +24,20 @@
    "@types/dompurify": "^3.0.5",
    "@types/lodash": "^4.17.20",
    "@types/react-google-recaptcha": "^2.1.9",
-    "axios": "^1.12.2",
+    "axios": "1.14.0",
    "clsx": "^2.0.0",
    "date-fns": "4.1.0",
    "dompurify": "^3.2.6",
+    "framer-motion": "^12.33.0",
    "i18next": "^25.3.1",
    "i18next-browser-languagedetector": "^8.2.0",
    "i18next-http-backend": "^3.0.2",
+    "justified-layout": "^4.1.0",
    "linkifyjs": "^4.3.2",
    "lodash": "^4.17.21",
    "lowlight": "^2.9.0",
    "lucide-react": "0.525.0",
+    "photoswipe": "^5.4.4",
    "react": "^18.3.1",
    "react-countdown": "^2.3.5",
    "react-dom": "^18.3.1",
@@ -42,9 +45,12 @@
    "react-i18next": "^15.6.0",
    "react-image-gallery": "^1.2.11",
    "react-intersection-observer": "^9.4.3",
+    "react-photo-album": "^3.4.0",
    "react-router-dom": "^6.8.0",
    "react-toastify": "11.0.5",
-    "tailwind-merge": "^3.3.1"
+    "swiper": "^12.1.0",
+    "tailwind-merge": "^3.3.1",
+    "yet-another-react-lightbox": "^3.28.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.29.0",
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ToastContainer } from 'react-toastify';
@@ -24,11 +24,12 @@ import {
  SettingsPage,
  BackupManagement,
  CMSPage,
-  UserManagementPage
+  UserManagementPage,
+  EventTypesPage
 } from './pages/admin';
 import { AcceptInvitePage } from './pages/public/AcceptInvitePage';
 import { AdminLayout, AdminAuthWrapper } from './components/admin';
-import { PageErrorBoundary, OfflineIndicator, SkipLink, DynamicFavicon } from './components/common';
+import { PageErrorBoundary, OfflineIndicator, SkipLink, DynamicFavicon, RobotsMetaTags } from './components/common';
 import { MaintenanceWrapper } from './components/MaintenanceWrapper';
 import { GlobalThemeProvider } from './components/GlobalThemeProvider';
 import { getApiBaseUrl } from './utils/url';
@@ -44,6 +45,17 @@ const queryClient = new QueryClient({
 });

 function App() {
+  // Track dark mode for toast theming
+  const [toastTheme, setToastTheme] = useState<'light' | 'dark'>('light');
+
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setToastTheme(document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+    });
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+    return () => observer.disconnect();
+  }, []);
+
  // Initialize Umami Analytics based on settings
  useEffect(() => {
    const initializeAnalytics = async () => {
@@ -102,6 +114,7 @@ function App() {
          <ThemeProvider>
            <GlobalThemeProvider>
              <DynamicFavicon />
+              <RobotsMetaTags />
              <Router>
                <MaintenanceWrapper>
                  <SkipLink />
@@ -128,6 +141,7 @@ function App() {
                      <Route path="analytics" element={<AnalyticsPage />} />
                      <Route path="branding" element={<BrandingPage />} />
                      <Route path="settings" element={<SettingsPage />} />
+                      <Route path="event-types" element={<EventTypesPage />} />
                      <Route path="backup" element={<BackupManagement />} />
                      <Route path="cms" element={<CMSPage />} />
                      <Route path="users" element={<UserManagementPage />} />
@@ -163,7 +177,7 @@ function App() {
              pauseOnFocusLoss
              draggable
              pauseOnHover
-              theme="light"
+              theme={toastTheme}
            />
            </GlobalThemeProvider>
          </ThemeProvider>
@@ -1,12 +1,15 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
 import { AdminAuthProvider, PermissionsProvider } from '../../contexts';
+import { AdminDarkModeProvider } from '../../contexts/AdminDarkModeContext';

 export const AdminAuthWrapper: React.FC = () => {
  return (
    <AdminAuthProvider>
      <PermissionsProvider>
-        <Outlet />
+        <AdminDarkModeProvider>
+          <Outlet />
+        </AdminDarkModeProvider>
      </PermissionsProvider>
    </AdminAuthProvider>
  );
@@ -1,12 +1,13 @@
 import React, { useState, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Menu, User, LogOut, Settings, Bell, Lock, CheckCircle, Trash2 } from 'lucide-react';
+import { Menu, User, LogOut, Settings, Bell, Lock, CheckCircle, Trash2, Sun, Moon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useLocalizedDate } from '../../hooks/useLocalizedDate';
 import { useLocalizedTimeAgo } from '../../hooks/useLocalizedTimeAgo';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

 import { useAdminAuth } from '../../contexts';
+import { useAdminDarkMode } from '../../contexts/AdminDarkModeContext';
 import { useOnClickOutside } from '../../hooks/useOnClickOutside';
 import { PasswordChangeModal } from './PasswordChangeModal';
 import { LanguageSelector } from '../common';
@@ -20,6 +21,7 @@ interface AdminHeaderProps {
 export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
  const navigate = useNavigate();
  const { user, logout } = useAdminAuth();
+  const { isDark, toggle: toggleDarkMode } = useAdminDarkMode();
  const { t } = useTranslation();
  const { format } = useLocalizedDate();
  const { formatTimeAgo } = useLocalizedTimeAgo();
@@ -68,7 +70,7 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
  const unreadCount = notificationsData?.unreadCount || 0;

  return (
-    <header className="sticky top-0 z-30 bg-white border-b border-neutral-200">
+    <header className="sticky top-0 z-30 bg-white dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-700">
      <div className="px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          {/* Left side - Menu button, Logo, and Date */}
@@ -87,8 +89,8 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
            </div>

            {/* Date display - hidden on smaller screens */}
-            <div className="hidden xl:block pl-3 border-l border-neutral-200 ml-1">
-              <p className="text-base text-neutral-700">
+            <div className="hidden xl:block pl-3 border-l border-neutral-200 dark:border-neutral-700 ml-1">
+              <p className="text-base text-neutral-700 dark:text-neutral-300">
                {format(new Date(), 'PPPP')}
              </p>
            </div>
@@ -98,12 +100,21 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
          <div className="flex items-center gap-3">
            {/* Language Selector */}
            <LanguageSelector />
-            
+
+            {/* Dark Mode Toggle */}
+            <button
+              onClick={toggleDarkMode}
+              className="p-2 text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
+              title={isDark ? t('admin.lightMode', 'Switch to light mode') : t('admin.darkMode', 'Switch to dark mode')}
+            >
+              {isDark ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+            </button>
+
            {/* Notifications */}
            <div className="relative" ref={notificationRef}>
              <button
                onClick={() => setShowNotifications(!showNotifications)}
-                className="relative p-2 text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 rounded-lg transition-colors"
+                className="relative p-2 text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
              >
                <Bell className="w-5 h-5" />
                {unreadCount > 0 && (
@@ -113,14 +124,14 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {

              {/* Notifications dropdown */}
              {showNotifications && (
-                <div className="absolute right-0 mt-2 w-96 bg-white rounded-lg shadow-lg border border-neutral-200">
-                  <div className="px-4 py-3 border-b border-neutral-100 flex items-center justify-between">
-                    <h3 className="text-sm font-semibold text-neutral-900">{t('admin.notifications')}</h3>
+                <div className="absolute right-0 mt-2 w-96 bg-white dark:bg-neutral-800 rounded-lg shadow-lg border border-neutral-200 dark:border-neutral-700">
+                  <div className="px-4 py-3 border-b border-neutral-100 dark:border-neutral-700 flex items-center justify-between">
+                    <h3 className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">{t('admin.notifications')}</h3>
                    <div className="flex items-center gap-2">
                      {unreadCount > 0 && (
                        <button
                          onClick={() => markAllAsReadMutation.mutate()}
-                          className="text-xs text-primary-600 hover:text-primary-700 flex items-center gap-1"
+                          className="text-xs text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 flex items-center gap-1"
                          title={t('admin.markAllRead')}
                        >
                          <CheckCircle className="w-3 h-3" />
@@ -129,7 +140,7 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
                      )}
                      <button
                        onClick={() => clearAllMutation.mutate()}
-                        className="text-xs text-neutral-600 hover:text-neutral-700 flex items-center gap-1"
+                        className="text-xs text-neutral-600 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 flex items-center gap-1"
                        title={t('admin.clearAll')}
                      >
                        <Trash2 className="w-3 h-3" />
@@ -139,7 +150,7 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
                  </div>
                  <div className="max-h-96 overflow-y-auto">
                    {notifications.length === 0 ? (
-                      <div className="px-4 py-8 text-center text-sm text-neutral-500">
+                      <div className="px-4 py-8 text-center text-sm text-neutral-500 dark:text-neutral-400">
                        {t('admin.noNotificationsMessage')}
                      </div>
                    ) : (
@@ -148,7 +159,7 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
                        return (
                          <div
                            key={notification.id}
-                            className={`px-4 py-3 hover:bg-neutral-50 cursor-pointer border-l-4 ${
+                            className={`px-4 py-3 hover:bg-neutral-50 dark:hover:bg-neutral-700 cursor-pointer border-l-4 ${
                              notification.isRead ? 'border-transparent opacity-75' : 'border-primary-500'
                            }`}
                          >
@@ -157,10 +168,10 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
                                <Bell className="w-4 h-4" />
                              </div>
                              <div className="flex-1 min-w-0">
-                                <p className="text-sm text-neutral-900">
+                                <p className="text-sm text-neutral-900 dark:text-neutral-100">
                                  {notificationsService.formatNotificationMessage(notification)}
                                </p>
-                                <p className="text-xs text-neutral-500 mt-1">
+                                <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
                                  {formatTimeAgo(notification.createdAt)}
                                </p>
                              </div>
@@ -171,10 +182,10 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
                    )}
                  </div>
                  {notifications.length > 0 && (
-                    <div className="px-4 py-2 border-t border-neutral-100 text-center">
-                      <button 
+                    <div className="px-4 py-2 border-t border-neutral-100 dark:border-neutral-700 text-center">
+                      <button
                        onClick={() => setShowNotifications(false)}
-                        className="text-sm text-primary-600 hover:text-primary-700"
+                        className="text-sm text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300"
                      >
                        {t('admin.close')}
                      </button>
@@ -188,11 +199,11 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
            <div className="relative" ref={userMenuRef}>
              <button
                onClick={() => setShowUserMenu(!showUserMenu)}
-                className="flex items-center gap-3 p-2 hover:bg-neutral-100 rounded-lg transition-colors"
+                className="flex items-center gap-3 p-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
              >
                <div className="text-right hidden sm:block">
-                  <p className="text-sm font-medium text-neutral-900">{user?.username}</p>
-                  <p className="text-xs text-neutral-500">{user?.email}</p>
+                  <p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">{user?.username}</p>
+                  <p className="text-xs text-neutral-500 dark:text-neutral-400">{user?.email}</p>
                </div>
                <div className="w-8 h-8 bg-primary-600 rounded-full flex items-center justify-center">
                  <User className="w-5 h-5 text-white" />
@@ -201,17 +212,17 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {

              {/* User dropdown */}
              {showUserMenu && (
-                <div className="absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-neutral-200 py-1">
-                  <div className="px-4 py-2 border-b border-neutral-100 sm:hidden">
-                    <p className="text-sm font-medium text-neutral-900">{user?.username}</p>
-                    <p className="text-xs text-neutral-500">{user?.email}</p>
+                <div className="absolute right-0 mt-2 w-56 bg-white dark:bg-neutral-800 rounded-lg shadow-lg border border-neutral-200 dark:border-neutral-700 py-1">
+                  <div className="px-4 py-2 border-b border-neutral-100 dark:border-neutral-700 sm:hidden">
+                    <p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">{user?.username}</p>
+                    <p className="text-xs text-neutral-500 dark:text-neutral-400">{user?.email}</p>
                  </div>
                  <button
                    onClick={() => {
                      setShowUserMenu(false);
                      navigate('/admin/settings');
                    }}
-                    className="w-full px-4 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-50 flex items-center gap-3"
+                    className="w-full px-4 py-2 text-left text-sm text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700 flex items-center gap-3"
                  >
                    <Settings className="w-4 h-4" />
                    {t('navigation.settings')}
@@ -221,14 +232,14 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
                      setShowUserMenu(false);
                      setShowPasswordModal(true);
                    }}
-                    className="w-full px-4 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-50 flex items-center gap-3"
+                    className="w-full px-4 py-2 text-left text-sm text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700 flex items-center gap-3"
                  >
                    <Lock className="w-4 h-4" />
                    {t('admin.changePassword')}
                  </button>
                  <button
                    onClick={handleLogout}
-                    className="w-full px-4 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-50 flex items-center gap-3"
+                    className="w-full px-4 py-2 text-left text-sm text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700 flex items-center gap-3"
                  >
                    <LogOut className="w-4 h-4" />
                    {t('common.logout')}
@@ -17,7 +17,7 @@ export const AdminLayout: React.FC = () => {

  if (isLoading) {
    return (
-      <div className="min-h-screen bg-neutral-50 flex items-center justify-center">
+      <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950 flex items-center justify-center">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-primary-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-neutral-600">Loading...</p>
@@ -31,7 +31,7 @@ export const AdminLayout: React.FC = () => {
  }

  return (
-    <div className="h-screen bg-neutral-50 flex overflow-hidden">
+    <div className="h-screen bg-neutral-50 dark:bg-neutral-950 flex overflow-hidden">
      {/* Mandatory Password Change Modal */}
      {mustChangePassword && <MandatoryPasswordChangeModal />}
      
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Check, Download, Trash2, Eye, Package, MessageSquare, Star, Video } from 'lucide-react';
+import { Check, Download, Trash2, Eye, Package, MessageSquare, Star, Video, FolderOpen } from 'lucide-react';
 import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';

@@ -7,6 +7,12 @@ import { AdminPhoto } from '../../services/photos.service';
 import { photosService } from '../../services/photos.service';
 import { Button } from '../common';
 import { AdminAuthenticatedImage } from './AdminAuthenticatedImage';
+import { BulkCategoryModal } from './BulkCategoryModal';
+
+interface CategoryOption {
+  id: number;
+  name: string;
+}

 interface AdminPhotoGridProps {
  photos: AdminPhoto[];
@@ -14,6 +20,7 @@ interface AdminPhotoGridProps {
  onPhotoClick: (photo: AdminPhoto, index: number) => void;
  onPhotosDeleted: () => void;
  onSelectionChange?: (selectedIds: number[]) => void;
+  categories?: CategoryOption[];
 }

 export const AdminPhotoGrid: React.FC<AdminPhotoGridProps> = ({
@@ -21,13 +28,16 @@ export const AdminPhotoGrid: React.FC<AdminPhotoGridProps> = ({
  eventId,
  onPhotoClick,
  onPhotosDeleted,
-  onSelectionChange
+  onSelectionChange,
+  categories = []
 }) => {
  const { t } = useTranslation();
  const [selectedPhotos, setSelectedPhotos] = useState<Set<number>>(new Set());
  const [isSelectionMode, setIsSelectionMode] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);
  const [deletingPhotos, setDeletingPhotos] = useState<Set<number>>(new Set());
+  const [isCategoryModalOpen, setIsCategoryModalOpen] = useState(false);
+  const [isUpdatingCategory, setIsUpdatingCategory] = useState(false);

  const handlePhotoSelect = (photoId: number, e?: React.MouseEvent) => {
    if (e) {
@@ -125,6 +135,35 @@ export const AdminPhotoGrid: React.FC<AdminPhotoGridProps> = ({
    }
  };

+  const handleMoveToCategory = async (categoryId: number | null) => {
+    if (selectedPhotos.size === 0) return;
+
+    setIsUpdatingCategory(true);
+    const selectedIds = Array.from(selectedPhotos);
+
+    try {
+      await photosService.updatePhotosCategory(eventId, selectedIds, categoryId);
+      const categoryName = categoryId
+        ? categories.find(c => Number(c.id) === categoryId)?.name || t('photos.selectedCategory', 'selected category')
+        : t('photos.uncategorized', 'Uncategorized');
+      toast.success(
+        t('photos.movedToCategory', '{{count}} photos moved to {{category}}', {
+          count: selectedIds.length,
+          category: categoryName
+        })
+      );
+      setSelectedPhotos(new Set());
+      setIsSelectionMode(false);
+      onSelectionChange?.([]);
+      setIsCategoryModalOpen(false);
+      onPhotosDeleted(); // Refresh the photo list
+    } catch {
+      toast.error(t('photos.moveToCategoryFailed', 'Failed to move photos to category'));
+    } finally {
+      setIsUpdatingCategory(false);
+    }
+  };
+
  return (
    <div>
      {/* Action Bar */}
@@ -151,9 +190,17 @@ export const AdminPhotoGrid: React.FC<AdminPhotoGridProps> = ({
              
              {selectedPhotos.size > 0 && (
                <>
-                  <span className="text-sm text-neutral-600">
+                  <span className="text-sm text-neutral-600 dark:text-neutral-400">
                    {t('gallery.photosSelected', { count: selectedPhotos.size })}
                  </span>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setIsCategoryModalOpen(true)}
+                    leftIcon={<FolderOpen className="w-4 h-4" />}
+                  >
+                    {t('photos.moveToCategory', 'Move to Category')}
+                  </Button>
                  <button
                    onClick={handleDeleteSelected}
                    disabled={isDeleting}
@@ -168,7 +215,7 @@ export const AdminPhotoGrid: React.FC<AdminPhotoGridProps> = ({
          )}
        </div>
        
-        <div className="text-sm text-neutral-600">
+        <div className="text-sm text-neutral-600 dark:text-neutral-400">
          {t('gallery.photosCount', { count: photos.length })}
        </div>
      </div>
@@ -187,7 +234,7 @@ export const AdminPhotoGrid: React.FC<AdminPhotoGridProps> = ({
            <div
              key={photo.id}
              data-testid={`admin-photo-tile-${photo.id}`}
-              className={`relative group cursor-pointer rounded-lg overflow-hidden bg-neutral-100 transition-opacity ${
+              className={`relative group cursor-pointer rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-800 transition-opacity ${
                isSelectionMode ? 'ring-2 ring-offset-2 ' + (selectedPhotos.has(photo.id) ? 'ring-primary-500' : 'ring-transparent') : ''
              } ${isDeleting ? 'opacity-50' : ''}`}
              onClick={() => !isDeleting && onPhotoClick(photo, index)}
@@ -240,6 +287,11 @@ export const AdminPhotoGrid: React.FC<AdminPhotoGridProps> = ({
                <p className="text-white text-xs font-medium truncate mb-1">
                  {photo.filename}
                </p>
+                {photo.original_filename && photo.original_filename !== photo.filename && (
+                  <p className="text-white/60 text-[10px] truncate mb-1">
+                    Original: {photo.original_filename}
+                  </p>
+                )}
                <p className="text-white/80 text-xs mb-2">
                  {photosService.formatBytes(photo.size)}
                </p>
@@ -306,9 +358,19 @@ export const AdminPhotoGrid: React.FC<AdminPhotoGridProps> = ({

      {photos.length === 0 && (
        <div className="text-center py-12">
-          <p className="text-neutral-500">{t('gallery.noMedia', 'No media uploaded yet')}</p>
+          <p className="text-neutral-500 dark:text-neutral-400">{t('gallery.noMedia', 'No media uploaded yet')}</p>
        </div>
      )}
+
+      {/* Bulk Category Modal */}
+      <BulkCategoryModal
+        isOpen={isCategoryModalOpen}
+        onClose={() => setIsCategoryModalOpen(false)}
+        onConfirm={handleMoveToCategory}
+        photoCount={selectedPhotos.size}
+        categories={categories}
+        isLoading={isUpdatingCategory}
+      />
    </div>
  );
 };
@@ -230,7 +230,11 @@ export const AdminPhotoViewer: React.FC<AdminPhotoViewerProps> = ({

        {/* Sidebar */}
        <div className="lg:w-80 bg-neutral-900 rounded-lg p-6 overflow-y-auto">
-          <h3 className="text-white font-medium text-lg mb-4">{currentPhoto.filename}</h3>
+          <h3 className="text-white font-medium text-lg">{currentPhoto.filename}</h3>
+          {currentPhoto.original_filename && currentPhoto.original_filename !== currentPhoto.filename && (
+            <p className="text-neutral-400 text-sm">Original: {currentPhoto.original_filename}</p>
+          )}
+          <div className="mb-4" />

          {/* Actions */}
          <div className="flex gap-2 mb-6">
@@ -11,7 +11,8 @@ import {
  Palette,
  FileText,
  HardDrive,
-  Users
+  Users,
+  Tags
 } from 'lucide-react';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
@@ -39,6 +40,7 @@ const navigation: NavItem[] = [
  { nameKey: 'navigation.emailSettings', href: '/admin/email', icon: Mail, permission: 'email.view' },
  { nameKey: 'navigation.branding', href: '/admin/branding', icon: Palette, permission: 'branding.view' },
  { nameKey: 'navigation.settings', href: '/admin/settings', icon: Settings, permission: 'settings.view' },
+  { nameKey: 'navigation.eventTypes', href: '/admin/event-types', icon: Tags, permission: 'settings.view' },
  { nameKey: 'navigation.backup', href: '/admin/backup', icon: HardDrive, permission: 'backup.view' },
  { nameKey: 'navigation.cmsPages', href: '/admin/cms', icon: FileText, permission: 'cms.view' },
  { nameKey: 'navigation.users', href: '/admin/users', icon: Users, permission: 'users.view' },
@@ -57,15 +59,15 @@ export const AdminSidebar: React.FC<AdminSidebarProps> = ({ isOpen, onClose }) =

  return (
    <div
-      className={`fixed inset-y-0 left-0 z-50 w-64 bg-white border-r border-neutral-200 transform transition-transform duration-200 ease-in-out lg:relative lg:translate-x-0 lg:h-screen ${
+      className={`fixed inset-y-0 left-0 z-50 w-64 bg-white dark:bg-neutral-900 border-r border-neutral-200 dark:border-neutral-700 transform transition-transform duration-200 ease-in-out lg:relative lg:translate-x-0 lg:h-screen ${
        isOpen ? 'translate-x-0' : '-translate-x-full'
      }`}
    >
      <div className="flex flex-col h-screen lg:h-full">
        {/* Brand */}
-        <div className="flex items-center justify-between h-16 px-6 border-b border-neutral-200 flex-shrink-0">
+        <div className="flex items-center justify-between h-16 px-6 border-b border-neutral-200 dark:border-neutral-700 flex-shrink-0">
          <div className="flex items-center">
-            <span className="text-xl font-bold text-neutral-900">{t('admin.title')}</span>
+            <span className="text-xl font-bold text-neutral-900 dark:text-neutral-100">{t('admin.title')}</span>
          </div>
          <button
            onClick={onClose}
@@ -88,8 +90,8 @@ export const AdminSidebar: React.FC<AdminSidebarProps> = ({ isOpen, onClose }) =
                onClick={() => onClose()}
                className={`flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
                  isActive
-                    ? 'bg-primary-50 text-primary-700'
-                    : 'text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900'
+                    ? 'bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400'
+                    : 'text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 hover:text-neutral-900 dark:hover:text-neutral-100'
                }`}
              >
                <item.icon className={`w-5 h-5 mr-3 ${
@@ -136,26 +138,26 @@ const StorageInfo: React.FC = () => {
  const isOverSoftLimit = limitInUse && storageInfo.total_used >= limitInUse;
  const progressBarClass = isOverSoftLimit ? 'bg-red-600' : 'bg-primary-600';
  const containerClass = isOverSoftLimit
-    ? 'bg-red-50 border border-red-200'
-    : 'bg-neutral-100';
+    ? 'bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800'
+    : 'bg-neutral-100 dark:bg-neutral-800';
  const softLimitDisplay = settingsService.formatBytes(limitInUse);

  return (
-    <div className="p-4 border-t border-neutral-200">
+    <div className="p-4 border-t border-neutral-200 dark:border-neutral-700">
      <div className={`${containerClass} rounded-lg p-3 transition-colors duration-300`}>
        <div className="flex items-center justify-between text-sm">
-          <span className="text-neutral-700">{t('admin.storageUsed')}</span>
-          <span className="font-medium text-neutral-900">
+          <span className="text-neutral-700 dark:text-neutral-300">{t('admin.storageUsed')}</span>
+          <span className="font-medium text-neutral-900 dark:text-neutral-100">
            {settingsService.formatBytes(storageInfo.total_used)}
          </span>
        </div>
-        <div className="mt-2 w-full bg-neutral-200 rounded-full h-2">
-          <div 
+        <div className="mt-2 w-full bg-neutral-200 dark:bg-neutral-700 rounded-full h-2">
+          <div
            className={`${progressBarClass} h-2 rounded-full transition-all duration-300`}
            style={{ width: `${Math.min(usagePercent, 100)}%` }}
          />
        </div>
-        <p className="text-xs text-neutral-600 mt-1">
+        <p className="text-xs text-neutral-600 dark:text-neutral-400 mt-1">
          {t('admin.storagePercent', { percent: usagePercent, limit: softLimitDisplay })}
        </p>
      </div>
@@ -152,8 +152,8 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
      <Card className="p-6">
        <div className="flex items-center justify-between">
          <div className="flex-1">
-            <h3 className="text-lg font-semibold text-gray-900">{t('backup.configuration.enableBackup')}</h3>
-            <p className="mt-1 text-sm text-gray-600">
+            <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">{t('backup.configuration.enableBackup')}</h3>
+            <p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
              {t('backup.configuration.enableBackupHelp')}
            </p>
          </div>
@@ -164,15 +164,15 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
              onChange={(e) => handleChange('backup_enabled', e.target.checked)}
              className="sr-only peer"
            />
-            <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
+            <div className="w-11 h-6 bg-neutral-200 dark:bg-neutral-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 dark:after:border-neutral-500 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
          </label>
        </div>
      </Card>

      {/* Destination Configuration */}
      <Card className="p-6">
-        <h3 className="text-lg font-semibold text-gray-900 mb-4">{t('backup.configuration.destinationType')}</h3>
-        
+        <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-4">{t('backup.configuration.destinationType')}</h3>
+
        {/* Destination Type Selection */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
          {destinationTypes.map((type) => {
@@ -184,17 +184,17 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
                onClick={() => handleChange('backup_destination_type', type.id)}
                className={`p-4 rounded-lg border-2 transition-all ${
                  formData.backup_destination_type === type.id
-                    ? 'border-primary bg-primary-50'
-                    : 'border-gray-200 hover:border-gray-300'
+                    ? 'border-primary bg-primary-50 dark:bg-primary-900/30'
+                    : 'border-neutral-200 dark:border-neutral-600 hover:border-neutral-300 dark:hover:border-neutral-500'
                }`}
              >
                <Icon className={`h-8 w-8 mb-2 mx-auto ${
                  formData.backup_destination_type === type.id
                    ? 'text-primary'
-                    : 'text-gray-400'
+                    : 'text-neutral-400'
                }`} />
-                <h4 className="font-medium text-gray-900">{type.name}</h4>
-                <p className="text-xs text-gray-500 mt-1">{type.description}</p>
+                <h4 className="font-medium text-neutral-900 dark:text-neutral-100">{type.name}</h4>
+                <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">{type.description}</p>
              </button>
            );
          })}
@@ -205,7 +205,7 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
          {formData.backup_destination_type === 'local' && (
            <>
              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                  {t('backup.configuration.fields.destinationPath')}
                </label>
                <Input
@@ -215,7 +215,7 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
                  placeholder={t('backup.configuration.fields.destinationPathPlaceholder')}
                  required
                />
-                <p className="mt-1 text-xs text-gray-500">
+                <p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
                  {t('backup.configuration.fields.destinationPathHelp')}
                </p>
              </div>
@@ -226,7 +226,7 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
            <>
              <div className="grid grid-cols-2 gap-4">
                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                    {t('backup.configuration.fields.rsyncHost')}
                  </label>
                  <Input
@@ -238,7 +238,7 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
                  />
                </div>
                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                    {t('backup.configuration.fields.rsyncUser')}
                  </label>
                  <Input
@@ -251,7 +251,7 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
                </div>
              </div>
              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                  {t('backup.configuration.fields.rsyncPath')}
                </label>
                <Input
@@ -263,7 +263,7 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
                />
              </div>
              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                  {t('backup.configuration.fields.rsyncSshKey')}
                </label>
                <div className="relative">
@@ -271,18 +271,18 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
                    value={formData.backup_rsync_ssh_key}
                    onChange={(e) => handleChange('backup_rsync_ssh_key', e.target.value)}
                    placeholder={t('backup.configuration.fields.rsyncSshKeyPlaceholder')}
-                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary font-mono text-sm"
+                    className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-md focus:outline-none focus:ring-primary focus:border-primary font-mono text-sm"
                    rows={4}
                  />
                  <button
                    type="button"
                    onClick={() => setShowSecrets(prev => ({ ...prev, ssh_key: !prev.ssh_key }))}
-                    className="absolute top-2 right-2 text-gray-400 hover:text-gray-600"
+                    className="absolute top-2 right-2 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300"
                  >
                    {showSecrets.ssh_key ? <EyeOff size={20} /> : <Eye size={20} />}
                  </button>
                </div>
-                <p className="mt-1 text-xs text-gray-500">
+                <p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
                  {t('backup.configuration.fields.rsyncSshKeyHelp')}
                </p>
              </div>
@@ -292,7 +292,7 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
          {formData.backup_destination_type === 's3' && (
            <>
              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                  {t('backup.configuration.fields.s3Endpoint')}
                </label>
                <Input
@@ -302,13 +302,13 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
                  placeholder="https://s3.amazonaws.com"
                  required
                />
-                <p className="mt-1 text-xs text-gray-500">
+                <p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
                  {t('backup.configuration.fields.s3EndpointHelp')}
                </p>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                    {t('backup.configuration.fields.s3Bucket')}
                  </label>
                  <Input
@@ -320,7 +320,7 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
                  />
                </div>
                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                    {t('backup.configuration.fields.s3Region')}
                  </label>
                  <Input
@@ -333,7 +333,7 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                    {t('backup.configuration.fields.s3AccessKey')}
                  </label>
                  <Input
@@ -345,7 +345,7 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
                  />
                </div>
                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                    {t('backup.configuration.fields.s3SecretKey')}
                  </label>
                  <div className="relative">
@@ -359,7 +359,7 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
                    <button
                      type="button"
                      onClick={() => setShowSecrets(prev => ({ ...prev, s3_secret_key: !prev.s3_secret_key }))}
-                      className="absolute top-1/2 -translate-y-1/2 right-2 text-gray-400 hover:text-gray-600"
+                      className="absolute top-1/2 -translate-y-1/2 right-2 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300"
                    >
                      {showSecrets.s3_secret_key ? <EyeOff size={20} /> : <Eye size={20} />}
                    </button>
@@ -398,17 +398,17 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {

      {/* Schedule Configuration */}
      <Card className="p-6">
-        <h3 className="text-lg font-semibold text-gray-900 mb-4">{t('backup.configuration.schedule.title')}</h3>
+        <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-4">{t('backup.configuration.schedule.title')}</h3>
        
        <div className="space-y-4">
          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
+            <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
              {t('backup.configuration.schedule.scheduleType')}
            </label>
            <select
              value={formData.backup_schedule}
              onChange={(e) => handleChange('backup_schedule', e.target.value)}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary"
+              className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-md focus:outline-none focus:ring-primary focus:border-primary"
            >
              {scheduleOptions.map(option => (
                <option key={option.value} value={option.value}>
@@ -420,7 +420,7 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {

          {formData.backup_schedule === 'custom' && (
            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                {t('backup.configuration.schedule.customCron')}
              </label>
              <Input
@@ -429,14 +429,14 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
                onChange={(e) => handleChange('backup_schedule_cron', e.target.value)}
                placeholder="0 3 * * *"
              />
-              <p className="mt-1 text-xs text-gray-500">
+              <p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
                {t('backup.configuration.schedule.customCronHelp')}
              </p>
            </div>
          )}

          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
+            <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
              {t('backup.configuration.schedule.retention')}
            </label>
            <Input
@@ -446,7 +446,7 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
              min="1"
              max="365"
            />
-            <p className="mt-1 text-xs text-gray-500">
+            <p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
              {t('backup.configuration.schedule.retentionHelp')}
            </p>
          </div>
@@ -455,7 +455,7 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {

      {/* Backup Content Selection */}
      <Card className="p-6">
-        <h3 className="text-lg font-semibold text-gray-900 mb-4">{t('backup.configuration.whatToBackup.title')}</h3>
+        <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-4">{t('backup.configuration.whatToBackup.title')}</h3>
        
        <div className="space-y-3">
          <label className="flex items-center">
@@ -463,14 +463,14 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
              type="checkbox"
              checked={formData.backup_include_database}
              onChange={(e) => handleChange('backup_include_database', e.target.checked)}
-              className="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
+              className="h-4 w-4 text-primary focus:ring-primary border-neutral-300 dark:border-neutral-600 rounded bg-white dark:bg-neutral-700"
            />
            <div className="ml-3">
              <div className="flex items-center space-x-2">
-                <Database className="h-4 w-4 text-gray-400" />
-                <span className="text-sm font-medium text-gray-700">{t('backup.configuration.whatToBackup.database')}</span>
+                <Database className="h-4 w-4 text-neutral-400" />
+                <span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">{t('backup.configuration.whatToBackup.database')}</span>
              </div>
-              <p className="text-xs text-gray-500">{t('backup.configuration.whatToBackup.databaseHelp')}</p>
+              <p className="text-xs text-neutral-500 dark:text-neutral-400">{t('backup.configuration.whatToBackup.databaseHelp')}</p>
            </div>
          </label>

@@ -479,14 +479,14 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
              type="checkbox"
              checked={formData.backup_include_photos}
              onChange={(e) => handleChange('backup_include_photos', e.target.checked)}
-              className="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
+              className="h-4 w-4 text-primary focus:ring-primary border-neutral-300 dark:border-neutral-600 rounded bg-white dark:bg-neutral-700"
            />
            <div className="ml-3">
              <div className="flex items-center space-x-2">
-                <Image className="h-4 w-4 text-gray-400" />
-                <span className="text-sm font-medium text-gray-700">{t('backup.configuration.whatToBackup.photos')}</span>
+                <Image className="h-4 w-4 text-neutral-400" />
+                <span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">{t('backup.configuration.whatToBackup.photos')}</span>
              </div>
-              <p className="text-xs text-gray-500">{t('backup.configuration.whatToBackup.photosHelp')}</p>
+              <p className="text-xs text-neutral-500 dark:text-neutral-400">{t('backup.configuration.whatToBackup.photosHelp')}</p>
            </div>
          </label>

@@ -495,14 +495,14 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
              type="checkbox"
              checked={formData.backup_include_archives}
              onChange={(e) => handleChange('backup_include_archives', e.target.checked)}
-              className="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
+              className="h-4 w-4 text-primary focus:ring-primary border-neutral-300 dark:border-neutral-600 rounded bg-white dark:bg-neutral-700"
            />
            <div className="ml-3">
              <div className="flex items-center space-x-2">
-                <FileArchive className="h-4 w-4 text-gray-400" />
-                <span className="text-sm font-medium text-gray-700">{t('backup.configuration.whatToBackup.archives')}</span>
+                <FileArchive className="h-4 w-4 text-neutral-400" />
+                <span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">{t('backup.configuration.whatToBackup.archives')}</span>
              </div>
-              <p className="text-xs text-gray-500">{t('backup.configuration.whatToBackup.archivesHelp')}</p>
+              <p className="text-xs text-neutral-500 dark:text-neutral-400">{t('backup.configuration.whatToBackup.archivesHelp')}</p>
            </div>
          </label>

@@ -511,14 +511,14 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
              type="checkbox"
              checked={formData.backup_include_thumbnails}
              onChange={(e) => handleChange('backup_include_thumbnails', e.target.checked)}
-              className="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
+              className="h-4 w-4 text-primary focus:ring-primary border-neutral-300 dark:border-neutral-600 rounded bg-white dark:bg-neutral-700"
            />
            <div className="ml-3">
              <div className="flex items-center space-x-2">
-                <Image className="h-4 w-4 text-gray-400" />
-                <span className="text-sm font-medium text-gray-700">{t('backup.configuration.whatToBackup.thumbnails')}</span>
+                <Image className="h-4 w-4 text-neutral-400" />
+                <span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">{t('backup.configuration.whatToBackup.thumbnails')}</span>
              </div>
-              <p className="text-xs text-gray-500">{t('backup.configuration.whatToBackup.thumbnailsHelp')}</p>
+              <p className="text-xs text-neutral-500 dark:text-neutral-400">{t('backup.configuration.whatToBackup.thumbnailsHelp')}</p>
            </div>
          </label>
        </div>
@@ -526,7 +526,7 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {

      {/* Advanced Options */}
      <Card className="p-6">
-        <h3 className="text-lg font-semibold text-gray-900 mb-4">{t('backup.configuration.advancedOptions.title')}</h3>
+        <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-4">{t('backup.configuration.advancedOptions.title')}</h3>
        
        <div className="space-y-4">
          <label className="flex items-center">
@@ -534,11 +534,11 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
              type="checkbox"
              checked={formData.backup_compression}
              onChange={(e) => handleChange('backup_compression', e.target.checked)}
-              className="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
+              className="h-4 w-4 text-primary focus:ring-primary border-neutral-300 dark:border-neutral-600 rounded bg-white dark:bg-neutral-700"
            />
            <div className="ml-3">
-              <span className="text-sm font-medium text-gray-700">{t('backup.configuration.advancedOptions.compression')}</span>
-              <p className="text-xs text-gray-500">{t('backup.configuration.advancedOptions.compressionHelp')}</p>
+              <span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">{t('backup.configuration.advancedOptions.compression')}</span>
+              <p className="text-xs text-neutral-500 dark:text-neutral-400">{t('backup.configuration.advancedOptions.compressionHelp')}</p>
            </div>
          </label>

@@ -548,17 +548,17 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
                type="checkbox"
                checked={formData.backup_encryption}
                onChange={(e) => handleChange('backup_encryption', e.target.checked)}
-                className="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
+                className="h-4 w-4 text-primary focus:ring-primary border-neutral-300 dark:border-neutral-600 rounded bg-white dark:bg-neutral-700"
              />
              <div className="ml-3">
-                <span className="text-sm font-medium text-gray-700">{t('backup.configuration.advancedOptions.encryption')}</span>
-                <p className="text-xs text-gray-500">{t('backup.configuration.advancedOptions.encryptionHelp')}</p>
+                <span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">{t('backup.configuration.advancedOptions.encryption')}</span>
+                <p className="text-xs text-neutral-500 dark:text-neutral-400">{t('backup.configuration.advancedOptions.encryptionHelp')}</p>
              </div>
            </label>

            {formData.backup_encryption && (
              <div className="ml-7">
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                  {t('backup.configuration.advancedOptions.encryptionPassphrase')}
                </label>
                <div className="relative">
@@ -572,7 +572,7 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
                  <button
                    type="button"
                    onClick={() => setShowSecrets(prev => ({ ...prev, encryption_passphrase: !prev.encryption_passphrase }))}
-                    className="absolute top-1/2 -translate-y-1/2 right-2 text-gray-400 hover:text-gray-600"
+                    className="absolute top-1/2 -translate-y-1/2 right-2 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300"
                  >
                    {showSecrets.encryption_passphrase ? <EyeOff size={20} /> : <Eye size={20} />}
                  </button>
@@ -25,14 +25,14 @@ const StatCard = ({ icon: Icon, label, value, color = 'blue', subtext }) => (
  <Card className="p-6">
    <div className="flex items-center justify-between">
      <div className="flex-1">
-        <p className="text-sm font-medium text-gray-600">{label}</p>
-        <p className="mt-2 text-3xl font-semibold text-gray-900">{value}</p>
+        <p className="text-sm font-medium text-neutral-600 dark:text-neutral-400">{label}</p>
+        <p className="mt-2 text-3xl font-semibold text-neutral-900 dark:text-neutral-100">{value}</p>
        {subtext && (
-          <p className="mt-1 text-sm text-gray-500">{subtext}</p>
+          <p className="mt-1 text-sm text-neutral-500 dark:text-neutral-400">{subtext}</p>
        )}
      </div>
-      <div className={`p-3 bg-${color}-100 rounded-lg`}>
-        <Icon className={`h-6 w-6 text-${color}-600`} />
+      <div className={`p-3 bg-${color}-100 dark:bg-${color}-900/40 rounded-lg`}>
+        <Icon className={`h-6 w-6 text-${color}-600 dark:text-${color}-400`} />
      </div>
    </div>
  </Card>
@@ -86,14 +86,14 @@ export const BackupDashboard = ({ status, config, onRunBackup, isBackupRunning }
    <div className="space-y-6">
      {/* Configuration Alert */}
      {!isConfigured && (
-        <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
+        <div className="bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 rounded-lg p-4">
          <div className="flex">
            <AlertTriangle className="h-5 w-5 text-amber-400 mt-0.5" />
            <div className="ml-3">
-              <h3 className="text-sm font-medium text-amber-800">
+              <h3 className="text-sm font-medium text-amber-800 dark:text-amber-200">
                {t('backup.dashboard.notConfigured.title')}
              </h3>
-              <p className="mt-1 text-sm text-amber-700">
+              <p className="mt-1 text-sm text-amber-700 dark:text-amber-300">
                {t('backup.dashboard.notConfigured.message')}
              </p>
            </div>
@@ -104,8 +104,8 @@ export const BackupDashboard = ({ status, config, onRunBackup, isBackupRunning }
      {/* Health Score Card */}
      <Card className="p-6">
        <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-semibold text-gray-900">{t('backup.dashboard.health.title')}</h3>
-          <span className={`px-3 py-1 rounded-full text-sm font-medium bg-${healthColors[health.status]}-100 text-${healthColors[health.status]}-700`}>
+          <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">{t('backup.dashboard.health.title')}</h3>
+          <span className={`px-3 py-1 rounded-full text-sm font-medium bg-${healthColors[health.status]}-100 dark:bg-${healthColors[health.status]}-900/40 text-${healthColors[health.status]}-700 dark:text-${healthColors[health.status]}-300`}>
            {health.status.charAt(0).toUpperCase() + health.status.slice(1)}
          </span>
        </div>
@@ -120,7 +120,7 @@ export const BackupDashboard = ({ status, config, onRunBackup, isBackupRunning }
                stroke="currentColor"
                strokeWidth="8"
                fill="none"
-                className="text-gray-200"
+                className="text-neutral-200 dark:text-neutral-700"
              />
              <circle
                cx="48"
@@ -134,14 +134,14 @@ export const BackupDashboard = ({ status, config, onRunBackup, isBackupRunning }
              />
            </svg>
            <div className="absolute inset-0 flex items-center justify-center">
-              <span className="text-2xl font-bold text-gray-900">{health.score}%</span>
+              <span className="text-2xl font-bold text-neutral-900 dark:text-neutral-100">{health.score}%</span>
            </div>
          </div>
          
          <div className="flex-1">
-            <p className="text-gray-700 font-medium">{health.message}</p>
+            <p className="text-neutral-700 dark:text-neutral-300 font-medium">{health.message}</p>
            {lastBackup && (
-              <p className="text-sm text-gray-500 mt-1">
+              <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1">
                Last successful backup: {formatDistanceToNow(new Date(lastBackup.created_at), { addSuffix: true })}
              </p>
            )}
@@ -206,10 +206,10 @@ export const BackupDashboard = ({ status, config, onRunBackup, isBackupRunning }
      {/* Recent Activity */}
      {status?.recentBackups && status.recentBackups.length > 0 && (
        <Card className="p-6">
-          <h3 className="text-lg font-semibold text-gray-900 mb-4">{t('backup.dashboard.recentActivity.title')}</h3>
+          <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-4">{t('backup.dashboard.recentActivity.title')}</h3>
          <div className="space-y-3">
            {status.recentBackups.slice(0, 5).map((backup) => (
-              <div key={backup.id} className="flex items-center justify-between py-3 border-b border-gray-100 last:border-0">
+              <div key={backup.id} className="flex items-center justify-between py-3 border-b border-neutral-100 dark:border-neutral-700 last:border-0">
                <div className="flex items-center space-x-3">
                  {backup.status === 'completed' ? (
                    <CheckCircle className="h-5 w-5 text-green-500" />
@@ -219,19 +219,19 @@ export const BackupDashboard = ({ status, config, onRunBackup, isBackupRunning }
                    <Loader2 className="h-5 w-5 text-blue-500 animate-spin" />
                  )}
                  <div>
-                    <p className="font-medium text-gray-900">
+                    <p className="font-medium text-neutral-900 dark:text-neutral-100">
                      {t('backup.dashboard.backupType', { type: backup.backup_type })}
                    </p>
-                    <p className="text-sm text-gray-500">
+                    <p className="text-sm text-neutral-500 dark:text-neutral-400">
                      {format(new Date(backup.created_at), 'PPp')}
                    </p>
                  </div>
                </div>
                <div className="text-right">
-                  <p className="text-sm font-medium text-gray-900">
+                  <p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
                    {formatBytes(backup.statistics?.total_size || 0)}
                  </p>
-                  <p className="text-sm text-gray-500">
+                  <p className="text-sm text-neutral-500 dark:text-neutral-400">
                    {backup.statistics?.files_processed || 0} files
                  </p>
                </div>
@@ -244,36 +244,36 @@ export const BackupDashboard = ({ status, config, onRunBackup, isBackupRunning }
      {/* Storage Status */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card className="p-6">
-          <h3 className="text-lg font-semibold text-gray-900 mb-4">{t('backup.dashboard.coverage.title')}</h3>
+          <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-4">{t('backup.dashboard.coverage.title')}</h3>
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
-                <Database className="h-5 w-5 text-gray-400" />
-                <span className="text-gray-700">Database</span>
+                <Database className="h-5 w-5 text-neutral-400" />
+                <span className="text-neutral-700 dark:text-neutral-300">Database</span>
              </div>
              <span className={`px-2 py-1 rounded text-xs font-medium ${
-                statistics.database_backed_up ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700'
+                statistics.database_backed_up ? 'bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300' : 'bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300'
              }`}>
                {statistics.database_backed_up ? t('backup.dashboard.coverage.included') : t('backup.dashboard.coverage.excluded')}
              </span>
            </div>
-            
+
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
-                <Image className="h-5 w-5 text-gray-400" />
-                <span className="text-gray-700">{t('backup.configuration.whatToBackup.photos')}</span>
+                <Image className="h-5 w-5 text-neutral-400" />
+                <span className="text-neutral-700 dark:text-neutral-300">{t('backup.configuration.whatToBackup.photos')}</span>
              </div>
-              <span className="text-sm text-gray-500">
+              <span className="text-sm text-neutral-500 dark:text-neutral-400">
                {statistics.photos_backed_up || 0} {t('common.of')} {statistics.total_photos || 0}
              </span>
            </div>
-            
+
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
-                <FileArchive className="h-5 w-5 text-gray-400" />
-                <span className="text-gray-700">{t('backup.configuration.whatToBackup.archives')}</span>
+                <FileArchive className="h-5 w-5 text-neutral-400" />
+                <span className="text-neutral-700 dark:text-neutral-300">{t('backup.configuration.whatToBackup.archives')}</span>
              </div>
-              <span className="text-sm text-gray-500">
+              <span className="text-sm text-neutral-500 dark:text-neutral-400">
                {statistics.archives_backed_up || 0} {t('backup.dashboard.stats.files')}
              </span>
            </div>
@@ -281,7 +281,7 @@ export const BackupDashboard = ({ status, config, onRunBackup, isBackupRunning }
        </Card>

        <Card className="p-6">
-          <h3 className="text-lg font-semibold text-gray-900 mb-4">{t('backup.dashboard.storageDestination')}</h3>
+          <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-4">{t('backup.dashboard.storageDestination')}</h3>
          <div className="space-y-3">
            <div className="flex items-center space-x-3">
              {config?.backup_destination_type === 's3' ? (
@@ -289,15 +289,15 @@ export const BackupDashboard = ({ status, config, onRunBackup, isBackupRunning }
              ) : config?.backup_destination_type === 'rsync' ? (
                <Server className="h-5 w-5 text-purple-500" />
              ) : (
-                <HardDrive className="h-5 w-5 text-gray-500" />
+                <HardDrive className="h-5 w-5 text-neutral-500" />
              )}
              <div>
-                <p className="font-medium text-gray-900">
-                  {config?.backup_destination_type 
-                    ? t(`backup.configuration.destinationTypes.${config.backup_destination_type}.name`) 
+                <p className="font-medium text-neutral-900 dark:text-neutral-100">
+                  {config?.backup_destination_type
+                    ? t(`backup.configuration.destinationTypes.${config.backup_destination_type}.name`)
                    : t('backup.dashboard.notConfigured.title')}
                </p>
-                <p className="text-sm text-gray-500">
+                <p className="text-sm text-neutral-500 dark:text-neutral-400">
                  {config?.backup_destination_type === 's3' && config?.backup_s3_bucket
                    ? `Bucket: ${config.backup_s3_bucket}`
                    : config?.backup_destination_type === 'local' && config?.backup_destination_path
@@ -308,12 +308,12 @@ export const BackupDashboard = ({ status, config, onRunBackup, isBackupRunning }
                </p>
              </div>
            </div>
-            
+
            {config?.backup_retention_days && (
-              <div className="mt-4 p-3 bg-gray-50 rounded-lg">
+              <div className="mt-4 p-3 bg-neutral-50 dark:bg-neutral-700 rounded-lg">
                <div className="flex items-center space-x-2">
-                  <Info className="h-4 w-4 text-gray-400" />
-                  <span className="text-sm text-gray-600">
+                  <Info className="h-4 w-4 text-neutral-400" />
+                  <span className="text-sm text-neutral-600 dark:text-neutral-300">
                    {t('backup.configuration.schedule.retentionDays')} {config.backup_retention_days} {t('backup.configuration.schedule.retentionHelp').replace('days (older backups will be automatically deleted)', '')}
                  </span>
                </div>
@@ -109,7 +109,7 @@ export const BackupHistory = () => {
        <div className="flex flex-col sm:flex-row gap-4">
          <div className="flex-1">
            <div className="relative">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-neutral-400" />
              <Input
                type="text"
                placeholder={t('backup.history.searchPlaceholder')}
@@ -124,7 +124,7 @@ export const BackupHistory = () => {
            <select
              value={filterStatus}
              onChange={(e) => setFilterStatus(e.target.value)}
-              className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary"
+              className="px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-md focus:outline-none focus:ring-primary focus:border-primary"
            >
              <option value="all">All Status</option>
              <option value="completed">Completed</option>
@@ -149,33 +149,33 @@ export const BackupHistory = () => {
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
-              <tr className="bg-gray-50 border-b border-gray-200">
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              <tr className="bg-neutral-50 dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700">
+                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
                  {t('backup.history.columns.status')}
                </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
                  {t('backup.history.columns.dateTime')}
                </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
                  {t('backup.history.columns.type')}
                </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
                  {t('backup.history.columns.size')}
                </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
                  {t('backup.history.columns.duration')}
                </th>
-                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="px-6 py-3 text-right text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
                  {t('backup.history.columns.actions')}
                </th>
              </tr>
            </thead>
-            <tbody className="bg-white divide-y divide-gray-200">
+            <tbody className="bg-white dark:bg-neutral-800 divide-y divide-neutral-200 dark:divide-neutral-700">
              {backups.length === 0 ? (
                <tr>
-                  <td colSpan={6} className="px-6 py-12 text-center text-gray-500">
-                    <FileArchive className="h-12 w-12 mx-auto mb-3 text-gray-300" />
-                    <p className="text-lg font-medium">No backups found</p>
+                  <td colSpan={6} className="px-6 py-12 text-center text-neutral-500 dark:text-neutral-400">
+                    <FileArchive className="h-12 w-12 mx-auto mb-3 text-neutral-300 dark:text-neutral-600" />
+                    <p className="text-lg font-medium text-neutral-900 dark:text-neutral-100">No backups found</p>
                    <p className="text-sm mt-1">Backups will appear here once created</p>
                  </td>
                </tr>
@@ -188,40 +188,40 @@ export const BackupHistory = () => {

                  return (
                    <React.Fragment key={backup.id}>
-                      <tr className="hover:bg-gray-50">
+                      <tr className="hover:bg-neutral-50 dark:hover:bg-neutral-700/50">
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="flex items-center">
                            <StatusIcon className={`h-5 w-5 ${statusColor}`} />
-                            <span className="ml-2 text-sm font-medium text-gray-900 capitalize">
+                            <span className="ml-2 text-sm font-medium text-neutral-900 dark:text-neutral-100 capitalize">
                              {backup.status}
                            </span>
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div>
-                            <p className="text-sm font-medium text-gray-900">
+                            <p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
                              {format(new Date(backup.created_at), 'PPP')}
                            </p>
-                            <p className="text-xs text-gray-500">
+                            <p className="text-xs text-neutral-500 dark:text-neutral-400">
                              {format(new Date(backup.created_at), 'p')} • {formatDistanceToNow(new Date(backup.created_at), { addSuffix: true })}
                            </p>
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
-                          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 capitalize">
+                          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-300 capitalize">
                            {backup.backup_type || 'Manual'}
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
-                          <p className="text-sm text-gray-900">
+                          <p className="text-sm text-neutral-900 dark:text-neutral-100">
                            {formatBytes(stats.total_size || 0)}
                          </p>
-                          <p className="text-xs text-gray-500">
+                          <p className="text-xs text-neutral-500 dark:text-neutral-400">
                            {stats.files_processed || 0} {t('backup.dashboard.stats.files')}
                          </p>
                        </td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                          {backup.duration_seconds 
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-neutral-900 dark:text-neutral-100">
+                          {backup.duration_seconds
                            ? `${Math.round(backup.duration_seconds / 60)}m ${backup.duration_seconds % 60}s`
                            : '-'}
                        </td>
@@ -229,7 +229,7 @@ export const BackupHistory = () => {
                          <div className="flex items-center justify-end space-x-2">
                            <button
                              onClick={() => toggleRowExpansion(backup.id)}
-                              className="text-gray-400 hover:text-gray-600"
+                              className="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300"
                              title={t('backup.actions.view')}
                            >
                              {isExpanded ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
@@ -237,7 +237,7 @@ export const BackupHistory = () => {
                            {backup.manifest_path && (
                              <button
                                onClick={() => window.open(`/admin/backup/download/${backup.id}`, '_blank')}
-                                className="text-gray-400 hover:text-gray-600"
+                                className="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300"
                                title={t('backup.actions.download')}
                              >
                                <Download size={20} />
@@ -245,7 +245,7 @@ export const BackupHistory = () => {
                            )}
                            <button
                              onClick={() => handleDelete(backup)}
-                              className="text-gray-400 hover:text-red-600"
+                              className="text-neutral-400 hover:text-red-600"
                              title={t('backup.actions.delete')}
                              disabled={deleteMutation.isLoading}
                            >
@@ -258,24 +258,24 @@ export const BackupHistory = () => {
                      {/* Expanded Details Row */}
                      {isExpanded && (
                        <tr>
-                          <td colSpan={6} className="px-6 py-4 bg-gray-50">
+                          <td colSpan={6} className="px-6 py-4 bg-neutral-50 dark:bg-neutral-700/50">
                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                              {/* Backup Details */}
                              <div className="space-y-2">
-                                <h4 className="font-medium text-gray-900">{t('backup.history.details.backupDetails')}</h4>
+                                <h4 className="font-medium text-neutral-900 dark:text-neutral-100">{t('backup.history.details.backupDetails')}</h4>
                                <div className="text-sm space-y-1">
                                  <div className="flex justify-between">
-                                    <span className="text-gray-500">{t('backup.history.details.destination')}:</span>
-                                    <span className="text-gray-900">{backup.destination_type || 'Unknown'}</span>
+                                    <span className="text-neutral-500 dark:text-neutral-400">{t('backup.history.details.destination')}:</span>
+                                    <span className="text-neutral-900 dark:text-neutral-100">{backup.destination_type || 'Unknown'}</span>
                                  </div>
                                  <div className="flex justify-between">
-                                    <span className="text-gray-500">{t('backup.history.details.started')}:</span>
-                                    <span className="text-gray-900">{format(new Date(backup.created_at), 'p')}</span>
+                                    <span className="text-neutral-500 dark:text-neutral-400">{t('backup.history.details.started')}:</span>
+                                    <span className="text-neutral-900 dark:text-neutral-100">{format(new Date(backup.created_at), 'p')}</span>
                                  </div>
                                  {backup.completed_at && (
                                    <div className="flex justify-between">
-                                      <span className="text-gray-500">{t('backup.history.details.completed')}:</span>
-                                      <span className="text-gray-900">{format(new Date(backup.completed_at), 'p')}</span>
+                                      <span className="text-neutral-500 dark:text-neutral-400">{t('backup.history.details.completed')}:</span>
+                                      <span className="text-neutral-900 dark:text-neutral-100">{format(new Date(backup.completed_at), 'p')}</span>
                                    </div>
                                  )}
                                </div>
@@ -283,21 +283,21 @@ export const BackupHistory = () => {

                              {/* Content Backed Up */}
                              <div className="space-y-2">
-                                <h4 className="font-medium text-gray-900">{t('backup.history.details.contentBackedUp')}</h4>
+                                <h4 className="font-medium text-neutral-900 dark:text-neutral-100">{t('backup.history.details.contentBackedUp')}</h4>
                                <div className="space-y-2">
                                  <div className="flex items-center space-x-2">
-                                    <Database className={`h-4 w-4 ${stats.database_backed_up ? 'text-green-500' : 'text-gray-300'}`} />
-                                    <span className="text-sm text-gray-700">{t('backup.configuration.whatToBackup.database')}</span>
+                                    <Database className={`h-4 w-4 ${stats.database_backed_up ? 'text-green-500' : 'text-neutral-300 dark:text-neutral-600'}`} />
+                                    <span className="text-sm text-neutral-700 dark:text-neutral-300">{t('backup.configuration.whatToBackup.database')}</span>
                                  </div>
                                  <div className="flex items-center space-x-2">
-                                    <Image className={`h-4 w-4 ${stats.photos_backed_up > 0 ? 'text-green-500' : 'text-gray-300'}`} />
-                                    <span className="text-sm text-gray-700">
+                                    <Image className={`h-4 w-4 ${stats.photos_backed_up > 0 ? 'text-green-500' : 'text-neutral-300 dark:text-neutral-600'}`} />
+                                    <span className="text-sm text-neutral-700 dark:text-neutral-300">
                                      Photos ({stats.photos_backed_up || 0} of {stats.total_photos || 0})
                                    </span>
                                  </div>
                                  <div className="flex items-center space-x-2">
-                                    <FileArchive className={`h-4 w-4 ${stats.archives_backed_up > 0 ? 'text-green-500' : 'text-gray-300'}`} />
-                                    <span className="text-sm text-gray-700">
+                                    <FileArchive className={`h-4 w-4 ${stats.archives_backed_up > 0 ? 'text-green-500' : 'text-neutral-300 dark:text-neutral-600'}`} />
+                                    <span className="text-sm text-neutral-700 dark:text-neutral-300">
                                      Archives ({stats.archives_backed_up || 0})
                                    </span>
                                  </div>
@@ -307,8 +307,8 @@ export const BackupHistory = () => {
                              {/* Error Information */}
                              {backup.error_message && (
                                <div className="space-y-2">
-                                  <h4 className="font-medium text-red-900">{t('backup.history.details.errorDetails')}</h4>
-                                  <p className="text-sm text-red-700 bg-red-50 p-2 rounded">
+                                  <h4 className="font-medium text-red-900 dark:text-red-200">{t('backup.history.details.errorDetails')}</h4>
+                                  <p className="text-sm text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-900/30 p-2 rounded">
                                    {backup.error_message}
                                  </p>
                                </div>
@@ -317,8 +317,8 @@ export const BackupHistory = () => {
                              {/* Manifest Path */}
                              {backup.manifest_path && (
                                <div className="space-y-2">
-                                  <h4 className="font-medium text-gray-900">{t('backup.history.details.manifest')}</h4>
-                                  <p className="text-sm text-gray-600 font-mono break-all">
+                                  <h4 className="font-medium text-neutral-900 dark:text-neutral-100">{t('backup.history.details.manifest')}</h4>
+                                  <p className="text-sm text-neutral-600 dark:text-neutral-400 font-mono break-all">
                                    {backup.manifest_path}
                                  </p>
                                </div>
@@ -337,7 +337,7 @@ export const BackupHistory = () => {

        {/* Pagination */}
        {pagination.pages > 1 && (
-          <div className="bg-white px-4 py-3 border-t border-gray-200 sm:px-6">
+          <div className="bg-white dark:bg-neutral-800 px-4 py-3 border-t border-neutral-200 dark:border-neutral-700 sm:px-6">
            <div className="flex items-center justify-between">
              <div className="flex-1 flex justify-between sm:hidden">
                <Button
@@ -359,7 +359,7 @@ export const BackupHistory = () => {
              </div>
              <div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                <div>
-                  <p className="text-sm text-gray-700">
+                  <p className="text-sm text-neutral-700 dark:text-neutral-300">
                    {t('backup.history.pagination.showing', {
                      from: (currentPage - 1) * pagination.limit + 1,
                      to: Math.min(currentPage * pagination.limit, pagination.total),
@@ -372,11 +372,11 @@ export const BackupHistory = () => {
                    <button
                      onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                      disabled={currentPage === 1}
-                      className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                      className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-sm font-medium text-neutral-500 dark:text-neutral-400 hover:bg-neutral-50 dark:hover:bg-neutral-700 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      {t('backup.history.pagination.previous')}
                    </button>
-                    
+
                    {[...Array(Math.min(5, pagination.pages))].map((_, i) => {
                      const pageNum = i + 1;
                      return (
@@ -385,19 +385,19 @@ export const BackupHistory = () => {
                          onClick={() => setCurrentPage(pageNum)}
                          className={`relative inline-flex items-center px-4 py-2 border text-sm font-medium ${
                            currentPage === pageNum
-                              ? 'z-10 bg-primary-50 border-primary text-primary'
-                              : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'
+                              ? 'z-10 bg-primary-50 dark:bg-primary-900/30 border-primary text-primary'
+                              : 'bg-white dark:bg-neutral-800 border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700'
                          }`}
                        >
                          {pageNum}
                        </button>
                      );
                    })}
-                    
+
                    <button
                      onClick={() => setCurrentPage(p => Math.min(pagination.pages, p + 1))}
                      disabled={currentPage === pagination.pages}
-                      className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                      className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-sm font-medium text-neutral-500 dark:text-neutral-400 hover:bg-neutral-50 dark:hover:bg-neutral-700 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      {t('backup.history.pagination.next')}
                    </button>
@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import { FolderOpen, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button, Card } from '../common';
+
+interface CategoryOption {
+  id: number;
+  name: string;
+}
+
+interface BulkCategoryModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: (categoryId: number | null) => Promise<void>;
+  photoCount: number;
+  categories: CategoryOption[];
+  isLoading: boolean;
+}
+
+export const BulkCategoryModal: React.FC<BulkCategoryModalProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  photoCount,
+  categories,
+  isLoading,
+}) => {
+  const { t } = useTranslation();
+  const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(null);
+
+  if (!isOpen) return null;
+
+  const handleConfirm = async () => {
+    await onConfirm(selectedCategoryId);
+  };
+
+  const handleClose = () => {
+    setSelectedCategoryId(null);
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+      <Card className="w-full max-w-md">
+        <div className="p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100">
+              {t('photos.moveToCategory', 'Move {{count}} photos to category', { count: photoCount })}
+            </h2>
+            <button
+              onClick={handleClose}
+              className="p-1 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors"
+              disabled={isLoading}
+            >
+              <X className="w-5 h-5 text-neutral-500 dark:text-neutral-400" />
+            </button>
+          </div>
+
+          <div className="mb-6">
+            <label htmlFor="category-select" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">
+              {t('photos.selectCategory', 'Select category')}
+            </label>
+            <select
+              id="category-select"
+              value={selectedCategoryId ?? ''}
+              onChange={(e) => setSelectedCategoryId(e.target.value === '' ? null : Number(e.target.value))}
+              className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+              disabled={isLoading}
+            >
+              <option value="">{t('photos.uncategorized', 'Uncategorized')}</option>
+              {categories.map((category) => (
+                <option key={category.id} value={category.id}>
+                  {category.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="flex justify-end gap-3">
+            <Button
+              variant="outline"
+              onClick={handleClose}
+              disabled={isLoading}
+            >
+              {t('common.cancel', 'Cancel')}
+            </Button>
+            <Button
+              variant="primary"
+              onClick={handleConfirm}
+              isLoading={isLoading}
+              leftIcon={<FolderOpen className="w-4 h-4" />}
+            >
+              {t('photos.movePhotos', 'Move Photos')}
+            </Button>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+BulkCategoryModal.displayName = 'BulkCategoryModal';
@@ -101,7 +101,7 @@ export const CategoryManager: React.FC = () => {
  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
-        <h3 className="text-lg font-semibold text-neutral-900">{t('categories.title')}</h3>
+        <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">{t('categories.title')}</h3>
        {!isAdding && (
          <Button
            variant="primary"
@@ -116,14 +116,14 @@ export const CategoryManager: React.FC = () => {

      {/* Add new category form */}
      {isAdding && (
-        <div className="flex gap-2 p-3 bg-neutral-50 rounded-lg">
+        <div className="flex gap-2 p-3 bg-neutral-50 dark:bg-neutral-800 rounded-lg">
          <input
            type="text"
            value={newCategoryName}
            onChange={(e) => setNewCategoryName(e.target.value)}
            onKeyPress={(e) => e.key === 'Enter' && handleCreate()}
            placeholder={t('categories.categoryName')}
-            className="flex-1 px-3 py-2 border border-neutral-300 rounded-md focus:ring-2 focus:ring-primary-500"
+            className="flex-1 px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-md bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500"
            autoFocus
          />
          <Button
@@ -154,14 +154,14 @@ export const CategoryManager: React.FC = () => {
      {/* Categories list */}
      <div className="space-y-2">
        {categories.length === 0 ? (
-          <p className="text-neutral-500 text-center py-8">
+          <p className="text-neutral-500 dark:text-neutral-400 text-center py-8">
            {t('categories.noCategoriesYet')}
          </p>
        ) : (
          categories.map((category) => (
            <div
              key={category.id}
-              className="flex items-center justify-between p-3 bg-white rounded-lg border border-neutral-200 hover:border-neutral-300 transition-colors"
+              className="flex items-center justify-between p-3 bg-white dark:bg-neutral-800 rounded-lg border border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600 transition-colors"
            >
              {editingId === category.id ? (
                <div className="flex gap-2 flex-1">
@@ -173,7 +173,7 @@ export const CategoryManager: React.FC = () => {
                      if (e.key === 'Enter') handleUpdate(category.id);
                      if (e.key === 'Escape') cancelEdit();
                    }}
-                    className="flex-1 px-3 py-1 border border-neutral-300 rounded-md focus:ring-2 focus:ring-primary-500"
+                    className="flex-1 px-3 py-1 border border-neutral-300 dark:border-neutral-600 rounded-md bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500"
                    autoFocus
                  />
                  <Button
@@ -199,20 +199,20 @@ export const CategoryManager: React.FC = () => {
              ) : (
                <>
                  <div>
-                    <p className="font-medium text-neutral-900">{category.name}</p>
-                    <p className="text-sm text-neutral-500">/{category.slug}</p>
+                    <p className="font-medium text-neutral-900 dark:text-neutral-100">{category.name}</p>
+                    <p className="text-sm text-neutral-500 dark:text-neutral-400">/{category.slug}</p>
                  </div>
                  <div className="flex gap-1">
                    <button
                      onClick={() => startEdit(category)}
-                      className="p-1.5 text-neutral-600 hover:text-primary-600 hover:bg-primary-50 rounded transition-colors"
+                      className="p-1.5 text-neutral-600 dark:text-neutral-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/30 rounded transition-colors"
                      title={t('common.edit')}
                    >
                      <Edit2 className="w-4 h-4" />
                    </button>
                    <button
                      onClick={() => handleDelete(category)}
-                      className="p-1.5 text-neutral-600 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
+                      className="p-1.5 text-neutral-600 dark:text-neutral-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 rounded transition-colors"
                      title={t('common.delete')}
                      disabled={deleteMutation.isPending}
                    >
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
-import { Save, RotateCcw, Eye, Code, AlertTriangle, Check } from 'lucide-react';
+import { Save, RotateCcw, Code, AlertTriangle, Check } from 'lucide-react';
 import { Button, Card, Loading } from '../common';
 import { cssTemplatesService, CssTemplate } from '../../services/cssTemplates.service';

@@ -92,14 +92,14 @@ export const CssTemplateEditor: React.FC = () => {
    <Card>
      <div className="p-6">
        <div className="flex items-center justify-between mb-6">
-          <h2 className="text-lg font-semibold text-neutral-900 flex items-center gap-2">
+          <h2 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
            <Code className="w-5 h-5" />
            {t('cssTemplates.title', 'Custom CSS Templates')}
          </h2>
        </div>

        {/* Tab Navigation */}
-        <div className="flex border-b border-neutral-200 mb-6">
+        <div className="flex border-b border-neutral-200 dark:border-neutral-700 mb-6">
          {[1, 2, 3].map(slot => {
            const template = localTemplates.find(t => t.slot_number === slot);
            return (
@@ -109,7 +109,7 @@ export const CssTemplateEditor: React.FC = () => {
                className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
                  activeSlot === slot
                    ? 'border-primary-600 text-primary-600'
-                    : 'border-transparent text-neutral-600 hover:text-neutral-900 hover:border-neutral-300'
+                    : 'border-transparent text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 hover:border-neutral-300 dark:hover:border-neutral-600'
                }`}
              >
                {t('cssTemplates.template', 'Template')} {slot}
@@ -130,7 +130,7 @@ export const CssTemplateEditor: React.FC = () => {
          <div className="space-y-6">
            {/* Template Name */}
            <div>
-              <label className="block text-sm font-medium text-neutral-700 mb-2">
+              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 dark:text-neutral-300 mb-2">
                {t('cssTemplates.templateName', 'Template Name')}
              </label>
              <input
@@ -138,7 +138,7 @@ export const CssTemplateEditor: React.FC = () => {
                value={activeTemplate.name}
                onChange={(e) => updateLocalTemplate({ name: e.target.value })}
                maxLength={50}
-                className="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
              />
            </div>

@@ -151,18 +151,18 @@ export const CssTemplateEditor: React.FC = () => {
                  onChange={(e) => updateLocalTemplate({ is_enabled: e.target.checked })}
                  className="rounded border-neutral-300 text-primary-600 focus:ring-primary-500"
                />
-                <span className="text-sm font-medium text-neutral-700">
+                <span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
                  {t('cssTemplates.enableTemplate', 'Enable this template')}
                </span>
              </label>
-              <p className="text-xs text-neutral-500 mt-1 ml-6">
+              <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1 ml-6">
                {t('cssTemplates.enableHint', 'Enabled templates can be selected when creating events')}
              </p>
            </div>

            {/* CSS Editor */}
            <div>
-              <label className="block text-sm font-medium text-neutral-700 mb-2">
+              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 dark:text-neutral-300 mb-2">
                {t('cssTemplates.cssContent', 'CSS Content')}
              </label>
              <div className="relative">
@@ -177,22 +177,22 @@ export const CssTemplateEditor: React.FC = () => {
                  {(activeTemplate.css_content?.length || 0).toLocaleString()} / 102,400 {t('common.characters', 'characters')}
                </div>
              </div>
-              <p className="text-xs text-neutral-500 mt-2">
+              <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-2">
                {t('cssTemplates.cssHint', 'Use .gallery-page to scope styles to the gallery. Available variables: --gallery-bg, --gallery-text, --gallery-accent')}
              </p>
            </div>

            {/* Security Notice */}
-            <div className="flex items-start gap-2 p-3 bg-amber-50 border border-amber-200 rounded-lg">
-              <AlertTriangle className="w-4 h-4 text-amber-600 mt-0.5 flex-shrink-0" />
-              <div className="text-xs text-amber-800">
+            <div className="flex items-start gap-2 p-3 bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 rounded-lg">
+              <AlertTriangle className="w-4 h-4 text-amber-600 dark:text-amber-400 mt-0.5 flex-shrink-0" />
+              <div className="text-xs text-amber-800 dark:text-amber-200">
                <strong>{t('cssTemplates.securityNotice', 'Security Notice')}:</strong>{' '}
                {t('cssTemplates.securityText', 'CSS is sanitized to prevent malicious code. External URLs, @import, and JavaScript expressions are blocked.')}
              </div>
            </div>

            {/* Action Buttons */}
-            <div className="flex items-center justify-between pt-4 border-t border-neutral-100">
+            <div className="flex items-center justify-between pt-4 border-t border-neutral-100 dark:border-neutral-700">
              <div className="flex items-center gap-3">
                {activeSlot === 1 && activeTemplate.is_default && (
                  <Button
@@ -227,7 +227,7 @@ export const CssTemplateEditor: React.FC = () => {

            {/* Last Updated */}
            {activeTemplate.updated_at && (
-              <p className="text-xs text-neutral-400 text-right">
+              <p className="text-xs text-neutral-400 dark:text-neutral-500 text-right">
                {t('cssTemplates.lastUpdated', 'Last updated')}: {new Date(activeTemplate.updated_at).toLocaleString()}
              </p>
            )}
@@ -25,27 +25,27 @@ export const EmailPreviewModal: React.FC<EmailPreviewModalProps> = ({
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <Card className="w-full max-w-4xl max-h-[90vh] flex flex-col">
        {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-neutral-200">
+        <div className="flex items-center justify-between p-6 border-b border-neutral-200 dark:border-neutral-700">
          <div className="flex items-center gap-3">
            <Mail className="w-6 h-6 text-primary-600" />
-            <h2 className="text-xl font-semibold text-neutral-900">Email Preview</h2>
+            <h2 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100">Email Preview</h2>
          </div>
          <button
            onClick={onClose}
-            className="text-neutral-400 hover:text-neutral-600 transition-colors"
+            className="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors"
          >
            <X className="w-6 h-6" />
          </button>
        </div>

        {/* Subject */}
-        <div className="px-6 py-4 border-b border-neutral-200 bg-neutral-50">
-          <p className="text-sm font-medium text-neutral-600">Subject:</p>
-          <p className="text-lg font-semibold text-neutral-900 mt-1">{subject}</p>
+        <div className="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800">
+          <p className="text-sm font-medium text-neutral-600 dark:text-neutral-400">Subject:</p>
+          <p className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mt-1">{subject}</p>
        </div>

        {/* View mode toggle */}
-        <div className="px-6 py-3 border-b border-neutral-200">
+        <div className="px-6 py-3 border-b border-neutral-200 dark:border-neutral-700">
          <div className="flex gap-2">
            <Button
              variant={viewMode === 'html' ? 'primary' : 'outline'}
@@ -71,7 +71,7 @@ export const EmailPreviewModal: React.FC<EmailPreviewModalProps> = ({
        {/* Content */}
        <div className="flex-1 overflow-auto p-6">
          {viewMode === 'html' ? (
-            <div className="bg-white border border-neutral-200 rounded-lg shadow-sm">
+            <div className="bg-white border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-sm">
              <iframe
                srcDoc={htmlContent}
                className="w-full h-[600px] border-0"
@@ -79,8 +79,8 @@ export const EmailPreviewModal: React.FC<EmailPreviewModalProps> = ({
              />
            </div>
          ) : (
-            <div className="bg-neutral-50 border border-neutral-200 rounded-lg p-6">
-              <pre className="whitespace-pre-wrap font-mono text-sm text-neutral-700">
+            <div className="bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg p-6">
+              <pre className="whitespace-pre-wrap font-mono text-sm text-neutral-700 dark:text-neutral-300">
                {textContent}
              </pre>
            </div>
@@ -88,7 +88,7 @@ export const EmailPreviewModal: React.FC<EmailPreviewModalProps> = ({
        </div>

        {/* Footer */}
-        <div className="flex justify-end gap-3 p-6 border-t border-neutral-200">
+        <div className="flex justify-end gap-3 p-6 border-t border-neutral-200 dark:border-neutral-700">
          <Button variant="outline" onClick={onClose}>
            Close
          </Button>
@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { Plus, X, Loader2 } from 'lucide-react';
+import { Plus, X, Loader2, Image as ImageIcon, Check } from 'lucide-react';
 import { toast } from 'react-toastify';
 import { categoriesService, type PhotoCategory } from '../../services/categories.service';
-import { Button } from '../common';
+import { photosService } from '../../services/photos.service';
+import { Button, Card, AuthenticatedImage } from '../common';
 import { useTranslation } from 'react-i18next';

 interface EventCategoryManagerProps {
@@ -15,6 +16,7 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
  const { t } = useTranslation();
  const [isAdding, setIsAdding] = useState(false);
  const [newCategoryName, setNewCategoryName] = useState('');
+  const [heroPickerCategoryId, setHeroPickerCategoryId] = useState<number | null>(null);

  // Fetch categories for this event
  const { data: categories = [], isLoading } = useQuery({
@@ -22,16 +24,23 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
    queryFn: () => categoriesService.getEventCategories(eventId),
  });

+  // Fetch photos for hero selection
+  const { data: photos = [] } = useQuery({
+    queryKey: ['admin-event-photos', eventId, {}],
+    queryFn: () => photosService.getEventPhotos(eventId, {}),
+    enabled: heroPickerCategoryId !== null,
+  });
+
  // Filter to show only event-specific categories
  const eventCategories = categories.filter(cat => !cat.is_global);

  // Create category mutation
  const createMutation = useMutation({
-    mutationFn: (name: string) => 
-      categoriesService.createCategory({ 
-        name, 
+    mutationFn: (name: string) =>
+      categoriesService.createCategory({
+        name,
        is_global: false,
-        event_id: eventId 
+        event_id: eventId
      }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['event-categories', eventId] });
@@ -56,6 +65,20 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
    },
  });

+  // Set hero photo mutation
+  const heroMutation = useMutation({
+    mutationFn: ({ categoryId, photoId }: { categoryId: number; photoId: number | null }) =>
+      categoriesService.setCategoryHeroPhoto(categoryId, photoId),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['event-categories', eventId] });
+      setHeroPickerCategoryId(null);
+      toast.success(variables.photoId ? t('categories.coverPhotoSet') : t('categories.coverPhotoRemoved'));
+    },
+    onError: (error: any) => {
+      toast.error(error.response?.data?.error || t('categories.failedToSetCoverPhoto'));
+    },
+  });
+
  const handleCreate = () => {
    if (newCategoryName.trim()) {
      createMutation.mutate(newCategoryName.trim());
@@ -68,6 +91,14 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
    }
  };

+  const handleSelectHeroPhoto = (categoryId: number, photoId: number) => {
+    heroMutation.mutate({ categoryId, photoId });
+  };
+
+  const handleRemoveHeroPhoto = (categoryId: number) => {
+    heroMutation.mutate({ categoryId, photoId: null });
+  };
+
  if (isLoading) {
    return (
      <div className="flex justify-center items-center py-4">
@@ -79,7 +110,7 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
  return (
    <div className="space-y-3">
      <div className="flex justify-between items-center">
-        <h3 className="text-sm font-medium text-neutral-700">{t('categories.eventSpecificCategories')}</h3>
+        <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">{t('categories.eventSpecificCategories')}</h3>
        {!isAdding && (
          <Button
            variant="outline"
@@ -92,6 +123,11 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
        )}
      </div>

+      {/* Hint about hero photo fallback */}
+      <p className="text-xs text-neutral-500 dark:text-neutral-400 italic">
+        {t('categories.categoryHeroHint')}
+      </p>
+
      {/* Add new category form */}
      {isAdding && (
        <div className="flex gap-2">
@@ -101,7 +137,7 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
            onChange={(e) => setNewCategoryName(e.target.value)}
            onKeyPress={(e) => e.key === 'Enter' && handleCreate()}
            placeholder={t('categories.categoryName')}
-            className="flex-1 px-3 py-1.5 text-sm border border-neutral-300 rounded-md focus:ring-2 focus:ring-primary-500"
+            className="flex-1 px-3 py-1.5 text-sm border border-neutral-300 dark:border-neutral-600 rounded-md bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500"
            autoFocus
          />
          <Button
@@ -131,49 +167,176 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even

      {/* Event categories list */}
      {eventCategories.length === 0 ? (
-        <p className="text-sm text-neutral-500 italic">
+        <p className="text-sm text-neutral-500 dark:text-neutral-400 italic">
          {t('categories.noEventSpecificCategories')}
        </p>
      ) : (
-        <div className="space-y-1">
-          {eventCategories.map((category) => (
-            <div
-              key={category.id}
-              className="flex items-center justify-between px-3 py-2 bg-neutral-50 rounded-md"
-            >
-              <span className="text-sm text-neutral-700">{category.name}</span>
-              <button
-                onClick={() => handleDelete(category)}
-                className="p-1 text-neutral-400 hover:text-red-600 transition-colors"
-                title={t('categories.deleteCategoryTitle')}
-                disabled={deleteMutation.isPending}
+        <div className="space-y-2">
+          {eventCategories.map((category) => {
+            const heroPhoto = category.hero_photo_id
+              ? photos.find(p => p.id === category.hero_photo_id)
+              : null;
+            return (
+              <div
+                key={category.id}
+                className="flex items-center justify-between px-3 py-2 bg-neutral-50 dark:bg-neutral-800 rounded-md"
              >
-                {deleteMutation.isPending ? (
-                  <Loader2 className="w-3 h-3 animate-spin" />
-                ) : (
-                  <X className="w-3 h-3" />
-                )}
-              </button>
-            </div>
-          ))}
+                <div className="flex items-center gap-3 flex-1 min-w-0">
+                  {/* Hero photo thumbnail */}
+                  <button
+                    onClick={() => setHeroPickerCategoryId(category.id)}
+                    className="flex-shrink-0 w-10 h-10 rounded border border-neutral-200 dark:border-neutral-700 overflow-hidden bg-neutral-100 dark:bg-neutral-700 hover:border-primary-400 transition-colors flex items-center justify-center"
+                    title={t('categories.setCoverPhoto')}
+                  >
+                    {heroPhoto ? (
+                      <AuthenticatedImage
+                        src={heroPhoto.thumbnail_url || heroPhoto.url}
+                        alt={category.name}
+                        className="w-full h-full object-cover"
+                      />
+                    ) : category.hero_photo_id ? (
+                      <ImageIcon className="w-4 h-4 text-primary-400" />
+                    ) : (
+                      <ImageIcon className="w-4 h-4 text-neutral-300" />
+                    )}
+                  </button>
+                  <span className="text-sm text-neutral-700 dark:text-neutral-300 truncate">{category.name}</span>
+                </div>
+                <button
+                  onClick={() => handleDelete(category)}
+                  className="p-1 text-neutral-400 dark:text-neutral-500 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+                  title={t('categories.deleteCategoryTitle')}
+                  disabled={deleteMutation.isPending}
+                >
+                  {deleteMutation.isPending ? (
+                    <Loader2 className="w-3 h-3 animate-spin" />
+                  ) : (
+                    <X className="w-3 h-3" />
+                  )}
+                </button>
+              </div>
+            );
+          })}
        </div>
      )}

      {/* Show available global categories */}
-      <div className="mt-4 pt-3 border-t border-neutral-200">
-        <p className="text-xs font-medium text-neutral-500 mb-2">{t('categories.globalCategoriesAlwaysAvailable')}</p>
-        <div className="flex flex-wrap gap-1">
+      <div className="mt-4 pt-3 border-t border-neutral-200 dark:border-neutral-700">
+        <p className="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-2">{t('categories.globalCategoriesAlwaysAvailable')}</p>
+        <div className="space-y-2">
          {categories
            .filter(cat => cat.is_global)
-            .map(cat => (
-              <span key={cat.id} className="px-2 py-1 text-xs bg-neutral-100 text-neutral-600 rounded">
-                {cat.name}
-              </span>
-            ))}
+            .map(cat => {
+              const heroPhoto = cat.hero_photo_id
+                ? photos.find(p => p.id === cat.hero_photo_id)
+                : null;
+              return (
+                <div key={cat.id} className="flex items-center gap-3 px-3 py-2 bg-neutral-50 dark:bg-neutral-800 rounded-md">
+                  <button
+                    onClick={() => setHeroPickerCategoryId(cat.id)}
+                    className="flex-shrink-0 w-10 h-10 rounded border border-neutral-200 dark:border-neutral-700 overflow-hidden bg-neutral-100 dark:bg-neutral-700 hover:border-primary-400 transition-colors flex items-center justify-center"
+                    title={t('categories.setCoverPhoto')}
+                  >
+                    {heroPhoto ? (
+                      <AuthenticatedImage
+                        src={heroPhoto.thumbnail_url || heroPhoto.url}
+                        alt={cat.name}
+                        className="w-full h-full object-cover"
+                      />
+                    ) : cat.hero_photo_id ? (
+                      <ImageIcon className="w-4 h-4 text-primary-400" />
+                    ) : (
+                      <ImageIcon className="w-4 h-4 text-neutral-300" />
+                    )}
+                  </button>
+                  <span className="text-sm text-neutral-600 dark:text-neutral-400">{cat.name}</span>
+                </div>
+              );
+            })}
        </div>
      </div>
+
+      {/* Hero Photo Picker Modal */}
+      {heroPickerCategoryId !== null && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+          <Card className="max-w-4xl w-full max-h-[90vh] overflow-hidden">
+            <div className="p-6 border-b border-neutral-200 dark:border-neutral-700">
+              <div className="flex items-center justify-between">
+                <h2 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100">{t('categories.setCoverPhoto')}</h2>
+                <button
+                  onClick={() => setHeroPickerCategoryId(null)}
+                  className="p-2 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors"
+                >
+                  <X className="w-5 h-5" />
+                </button>
+              </div>
+            </div>
+
+            <div className="p-6 overflow-y-auto max-h-[calc(90vh-180px)]">
+              {photos.length === 0 ? (
+                <p className="text-center text-neutral-500 dark:text-neutral-400 py-8">
+                  {t('events.noPhotosAvailable')}
+                </p>
+              ) : (
+                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+                  {photos.map((photo) => {
+                    const currentCategory = categories.find(c => c.id === heroPickerCategoryId);
+                    const isSelected = photo.id === currentCategory?.hero_photo_id;
+                    return (
+                      <div
+                        key={photo.id}
+                        onClick={() => handleSelectHeroPhoto(heroPickerCategoryId, photo.id)}
+                        className={`relative cursor-pointer rounded-lg overflow-hidden border-2 transition-all ${
+                          isSelected
+                            ? 'border-primary-500 ring-2 ring-primary-500 ring-offset-2'
+                            : 'border-transparent hover:border-neutral-300'
+                        }`}
+                      >
+                        <div className="aspect-square bg-neutral-100 dark:bg-neutral-700">
+                          <AuthenticatedImage
+                            src={photo.thumbnail_url || photo.url}
+                            alt={photo.filename}
+                            className="w-full h-full object-cover"
+                          />
+                        </div>
+                        {isSelected && (
+                          <div className="absolute top-2 right-2 bg-primary-500 text-white rounded-full p-1">
+                            <Check className="w-4 h-4" />
+                          </div>
+                        )}
+                        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-2">
+                          <p className="text-white text-xs truncate">{photo.filename}</p>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+
+            <div className="p-6 border-t border-neutral-200 dark:border-neutral-700 flex justify-between gap-3">
+              {categories.find(c => c.id === heroPickerCategoryId)?.hero_photo_id && (
+                <Button
+                  variant="outline"
+                  onClick={() => handleRemoveHeroPhoto(heroPickerCategoryId)}
+                  disabled={heroMutation.isPending}
+                >
+                  {t('categories.removeCoverPhoto')}
+                </Button>
+              )}
+              <div className="flex-1" />
+              <Button
+                variant="outline"
+                onClick={() => setHeroPickerCategoryId(null)}
+              >
+                {t('common.cancel')}
+              </Button>
+            </div>
+          </Card>
+        </div>
+      )}
    </div>
  );
 };

-EventCategoryManager.displayName = 'EventCategoryManager';
+EventCategoryManager.displayName = 'EventCategoryManager';
@@ -28,7 +28,7 @@ interface EventRenameDialogProps {
 export const EventRenameDialog: React.FC<EventRenameDialogProps> = ({
  isOpen,
  eventName,
-  eventId,
+  eventId: _eventId,
  customerEmail,
  onClose,
  onRename,
@@ -51,7 +51,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
    <Card className={className}>
      <div className="p-6 space-y-6">
        <div className="flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-neutral-900 flex items-center gap-2">
+          <h2 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
            <MessageSquare className="w-5 h-5" />
            {t('feedback.settings.title', 'Guest Feedback Settings')}
          </h2>
@@ -62,7 +62,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
              onChange={() => handleToggle('feedback_enabled')}
              className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
            />
-            <span className="text-sm font-medium text-neutral-700">
+            <span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
              {t('feedback.settings.enableFeedback', 'Enable feedback')}
            </span>
          </label>
@@ -72,77 +72,77 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
          <>
            {/* Feedback Types */}
            <div className="space-y-4">
-              <h3 className="text-sm font-medium text-neutral-700">
+              <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
                {t('feedback.settings.feedbackTypes', 'Feedback Types')}
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <label className="flex items-center gap-3 p-3 bg-neutral-50 rounded-lg cursor-pointer hover:bg-neutral-100">
+                <label className="flex items-center gap-3 p-3 bg-neutral-50 dark:bg-neutral-800 rounded-lg cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-700">
                  <input
                    type="checkbox"
                    checked={settings.allow_ratings}
                    onChange={() => handleToggle('allow_ratings')}
                    className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
                  />
-                  <Star className="w-5 h-5 text-neutral-600" />
+                  <Star className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
                  <div className="flex-1">
-                    <div className="text-sm font-medium text-neutral-900">
+                    <div className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
                      {t('feedback.settings.ratings', 'Star Ratings')}
                    </div>
-                    <div className="text-xs text-neutral-500">
+                    <div className="text-xs text-neutral-500 dark:text-neutral-400">
                      {t('feedback.settings.ratingsDesc', 'Allow guests to rate photos (1-5 stars)')}
                    </div>
                  </div>
                </label>

-                <label className="flex items-center gap-3 p-3 bg-neutral-50 rounded-lg cursor-pointer hover:bg-neutral-100">
+                <label className="flex items-center gap-3 p-3 bg-neutral-50 dark:bg-neutral-800 rounded-lg cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-700">
                  <input
                    type="checkbox"
                    checked={settings.allow_likes}
                    onChange={() => handleToggle('allow_likes')}
                    className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
                  />
-                  <Heart className="w-5 h-5 text-neutral-600" />
+                  <Heart className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
                  <div className="flex-1">
-                    <div className="text-sm font-medium text-neutral-900">
+                    <div className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
                      {t('feedback.settings.likes', 'Likes')}
                    </div>
-                    <div className="text-xs text-neutral-500">
+                    <div className="text-xs text-neutral-500 dark:text-neutral-400">
                      {t('feedback.settings.likesDesc', 'Simple like/unlike functionality')}
                    </div>
                  </div>
                </label>

-                <label className="flex items-center gap-3 p-3 bg-neutral-50 rounded-lg cursor-pointer hover:bg-neutral-100">
+                <label className="flex items-center gap-3 p-3 bg-neutral-50 dark:bg-neutral-800 rounded-lg cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-700">
                  <input
                    type="checkbox"
                    checked={settings.allow_comments}
                    onChange={() => handleToggle('allow_comments')}
                    className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
                  />
-                  <MessageSquare className="w-5 h-5 text-neutral-600" />
+                  <MessageSquare className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
                  <div className="flex-1">
-                    <div className="text-sm font-medium text-neutral-900">
+                    <div className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
                      {t('feedback.settings.comments', 'Comments')}
                    </div>
-                    <div className="text-xs text-neutral-500">
+                    <div className="text-xs text-neutral-500 dark:text-neutral-400">
                      {t('feedback.settings.commentsDesc', 'Text comments on photos')}
                    </div>
                  </div>
                </label>

-                <label className="flex items-center gap-3 p-3 bg-neutral-50 rounded-lg cursor-pointer hover:bg-neutral-100">
+                <label className="flex items-center gap-3 p-3 bg-neutral-50 dark:bg-neutral-800 rounded-lg cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-700">
                  <input
                    type="checkbox"
                    checked={settings.allow_favorites}
                    onChange={() => handleToggle('allow_favorites')}
                    className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
                  />
-                  <Bookmark className="w-5 h-5 text-neutral-600" />
+                  <Bookmark className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
                  <div className="flex-1">
-                    <div className="text-sm font-medium text-neutral-900">
+                    <div className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
                      {t('feedback.settings.favorites', 'Favorites')}
                    </div>
-                    <div className="text-xs text-neutral-500">
+                    <div className="text-xs text-neutral-500 dark:text-neutral-400">
                      {t('feedback.settings.favoritesDesc', 'Mark photos as favorites')}
                    </div>
                  </div>
@@ -150,11 +150,11 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
              </div>
            </div>

-            <div className="border-t pt-4" />
+            <div className="border-t border-neutral-200 dark:border-neutral-700 pt-4" />

            {/* Privacy & Moderation */}
            <div className="space-y-4">
-              <h3 className="text-sm font-medium text-neutral-700">
+              <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
                {t('feedback.settings.privacyModeration', 'Privacy & Moderation')}
              </h3>
              <div className="space-y-3">
@@ -166,10 +166,10 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
                    className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
                  />
                  <div className="flex-1">
-                    <div className="text-sm font-medium text-neutral-900">
+                    <div className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
                      {t('feedback.settings.requireInfo', 'Require Name & Email')}
                    </div>
-                    <div className="text-xs text-neutral-500">
+                    <div className="text-xs text-neutral-500 dark:text-neutral-400">
                      {t('feedback.settings.requireInfoDesc', 'Guests must provide name and email to leave feedback')}
                    </div>
                  </div>
@@ -183,12 +183,12 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
                    disabled={!settings.allow_comments}
                    className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500 disabled:opacity-50"
                  />
-                  <Shield className="w-5 h-5 text-neutral-600" />
+                  <Shield className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
                  <div className="flex-1">
-                    <div className="text-sm font-medium text-neutral-900">
+                    <div className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
                      {t('feedback.settings.moderateComments', 'Moderate Comments')}
                    </div>
-                    <div className="text-xs text-neutral-500">
+                    <div className="text-xs text-neutral-500 dark:text-neutral-400">
                      {t('feedback.settings.moderateCommentsDesc', 'Comments require approval before being visible')}
                    </div>
                  </div>
@@ -201,12 +201,12 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
                    onChange={() => handleToggle('show_feedback_to_guests')}
                    className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
                  />
-                  <Eye className="w-5 h-5 text-neutral-600" />
+                  <Eye className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
                  <div className="flex-1">
-                    <div className="text-sm font-medium text-neutral-900">
+                    <div className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
                      {t('feedback.settings.showToGuests', 'Show Feedback to Guests')}
                    </div>
-                    <div className="text-xs text-neutral-500">
+                    <div className="text-xs text-neutral-500 dark:text-neutral-400">
                      {t('feedback.settings.showToGuestsDesc', 'Other guests can see ratings, likes, and approved comments')}
                    </div>
                  </div>
@@ -214,7 +214,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
              </div>
            </div>

-            <div className="border-t pt-4" />
+            <div className="border-t border-neutral-200 dark:border-neutral-700 pt-4" />

            {/* Rate Limiting */}
            <div className="space-y-4">
@@ -226,10 +226,10 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
                  className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
                />
                <div className="flex-1">
-                  <div className="text-sm font-medium text-neutral-900">
+                  <div className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
                    {t('feedback.settings.enableRateLimiting', 'Enable Rate Limiting')}
                  </div>
-                  <div className="text-xs text-neutral-500">
+                  <div className="text-xs text-neutral-500 dark:text-neutral-400">
                    {t('feedback.settings.rateLimitingDesc', 'Prevent spam by limiting feedback frequency')}
                  </div>
                </div>
@@ -238,7 +238,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
              {settings.enable_rate_limiting && (
                <div className="grid grid-cols-2 gap-4 ml-7">
                  <div>
-                    <label className="block text-xs font-medium text-neutral-600 mb-1">
+                    <label className="block text-xs font-medium text-neutral-600 dark:text-neutral-400 mb-1">
                      {t('feedback.settings.timeWindow', 'Time Window (minutes)')}
                    </label>
                    <input
@@ -247,11 +247,11 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
                      max="60"
                      value={settings.rate_limit_window_minutes || 15}
                      onChange={(e) => handleNumberChange('rate_limit_window_minutes', e.target.value)}
-                      className="w-full px-3 py-1.5 text-sm border border-neutral-300 rounded-md focus:ring-primary-500 focus:border-primary-500"
+                      className="w-full px-3 py-1.5 text-sm border border-neutral-300 dark:border-neutral-600 rounded-md bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-primary-500 focus:border-primary-500"
                    />
                  </div>
                  <div>
-                    <label className="block text-xs font-medium text-neutral-600 mb-1">
+                    <label className="block text-xs font-medium text-neutral-600 dark:text-neutral-400 mb-1">
                      {t('feedback.settings.maxRequests', 'Max Requests')}
                    </label>
                    <input
@@ -260,7 +260,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
                      max="100"
                      value={settings.rate_limit_max_requests || 10}
                      onChange={(e) => handleNumberChange('rate_limit_max_requests', e.target.value)}
-                      className="w-full px-3 py-1.5 text-sm border border-neutral-300 rounded-md focus:ring-primary-500 focus:border-primary-500"
+                      className="w-full px-3 py-1.5 text-sm border border-neutral-300 dark:border-neutral-600 rounded-md bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-primary-500 focus:border-primary-500"
                    />
                  </div>
                </div>
@@ -0,0 +1,117 @@
+import React, { useRef, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AuthenticatedImage, Button } from '../common';
+
+interface FocalPointPickerProps {
+  imageUrl: string;
+  currentValue: string;
+  onChange: (value: string) => void;
+  slug?: string;
+}
+
+/** Convert legacy keyword to percentage pair */
+const keywordToPercent = (value: string): string => {
+  switch (value) {
+    case 'top': return '50% 0%';
+    case 'center': return '50% 50%';
+    case 'bottom': return '50% 100%';
+    default: return value || '50% 50%';
+  }
+};
+
+/** Parse an anchor value (keyword or "X% Y%") into [x, y] numbers 0-100 */
+const parseAnchor = (value: string): [number, number] => {
+  const pct = keywordToPercent(value);
+  const match = pct.match(/^(\d{1,3})%\s+(\d{1,3})%$/);
+  if (match) return [parseInt(match[1]), parseInt(match[2])];
+  return [50, 50];
+};
+
+export const FocalPointPicker: React.FC<FocalPointPickerProps> = ({
+  imageUrl,
+  currentValue,
+  onChange,
+  slug,
+}) => {
+  const { t } = useTranslation();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [x, y] = parseAnchor(currentValue);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const px = Math.round(Math.min(100, Math.max(0, ((e.clientX - rect.left) / rect.width) * 100)));
+      const py = Math.round(Math.min(100, Math.max(0, ((e.clientY - rect.top) / rect.height) * 100)));
+      onChange(`${px}% ${py}%`);
+    },
+    [onChange],
+  );
+
+  const presets: { label: string; value: string }[] = [
+    { label: t('events.heroImageAnchorTop', 'Top'), value: '50% 0%' },
+    { label: t('events.heroImageAnchorCenter', 'Center'), value: '50% 50%' },
+    { label: t('events.heroImageAnchorBottom', 'Bottom'), value: '50% 100%' },
+  ];
+
+  return (
+    <div>
+      {/* Clickable image preview */}
+      <div
+        ref={containerRef}
+        onClick={handleClick}
+        className="relative w-full h-48 rounded-lg overflow-hidden cursor-crosshair border border-neutral-300"
+      >
+        <AuthenticatedImage
+          src={imageUrl}
+          alt={t('events.heroPreview', 'Hero preview')}
+          className="w-full h-full object-cover pointer-events-none"
+          style={{ objectPosition: `${x}% ${y}%` }}
+          slug={slug}
+        />
+
+        {/* Crosshair marker */}
+        <div
+          className="absolute pointer-events-none"
+          style={{ left: `${x}%`, top: `${y}%`, transform: 'translate(-50%, -50%)' }}
+        >
+          {/* Outer ring (dark) for contrast on light areas */}
+          <div className="w-6 h-6 rounded-full border-2 border-black/50" />
+          {/* Inner ring (white) for contrast on dark areas */}
+          <div className="absolute inset-0 m-px w-6 h-6 rounded-full border-2 border-white" />
+          {/* Center dot */}
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="w-1.5 h-1.5 rounded-full bg-white shadow-sm" />
+          </div>
+        </div>
+
+        {/* Coordinate label */}
+        <span className="absolute bottom-1.5 right-1.5 px-1.5 py-0.5 text-[10px] font-mono leading-none text-white bg-black/60 rounded">
+          {x}% {y}%
+        </span>
+      </div>
+
+      {/* Preset buttons */}
+      <div className="flex gap-2 mt-2">
+        {presets.map((p) => (
+          <Button
+            key={p.value}
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => onChange(p.value)}
+            className={
+              keywordToPercent(currentValue) === p.value
+                ? 'bg-primary-50 border-primary-300 text-primary-700'
+                : ''
+            }
+          >
+            {p.label}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+FocalPointPicker.displayName = 'FocalPointPicker';
@@ -1,7 +1,8 @@
 import React, { useMemo } from 'react';
-import { Camera } from 'lucide-react';
-import { ThemeConfig, GalleryLayoutType } from '../../types/theme.types';
+import { Camera, Calendar } from 'lucide-react';
+import { ThemeConfig, GalleryLayoutType, HeroDividerStyle } from '../../types/theme.types';
 import { buildResourceUrl } from '../../utils/url';
+import { useTranslation } from 'react-i18next';

 interface GalleryPreviewBranding {
  company_name?: string;
@@ -64,12 +65,13 @@ const PreviewPhoto: React.FC<{
  </div>
 );

-export const GalleryPreview: React.FC<GalleryPreviewProps> = ({ 
-  theme, 
+export const GalleryPreview: React.FC<GalleryPreviewProps> = ({
+  theme,
  branding,
  layoutType,
-  className = '' 
+  className = ''
 }) => {
+  const { t } = useTranslation();
  const mockPhotos = useMemo(() => generateMockPhotos(12), []);
  
  // Use the provided layoutType or fallback to theme's gallery layout
@@ -92,6 +94,41 @@ export const GalleryPreview: React.FC<GalleryPreviewProps> = ({
      ? 'justify-end text-right flex-row-reverse'
      : 'justify-start text-left';
  
+  // Check header style
+  const isHeroHeader = theme.headerStyle === 'hero';
+  const isMinimalHeader = theme.headerStyle === 'minimal';
+  const isNoHeader = theme.headerStyle === 'none';
+  const heroDividerStyle: HeroDividerStyle = theme.heroDividerStyle || 'wave';
+
+  // Render hero divider based on style
+  const renderHeroDivider = () => {
+    const bgColor = theme.backgroundColor || '#fafafa';
+    switch (heroDividerStyle) {
+      case 'wave':
+        return (
+          <svg className="w-full h-6" viewBox="0 0 1200 120" preserveAspectRatio="none">
+            <path d="M0,60 C150,90 350,30 600,60 C850,90 1050,30 1200,60 L1200,120 L0,120 Z" fill={bgColor} />
+          </svg>
+        );
+      case 'curve':
+        return (
+          <svg className="w-full h-6" viewBox="0 0 1200 120" preserveAspectRatio="none">
+            <path d="M0,120 Q600,0 1200,120 L1200,120 L0,120 Z" fill={bgColor} />
+          </svg>
+        );
+      case 'angle':
+        return (
+          <svg className="w-full h-6" viewBox="0 0 1200 120" preserveAspectRatio="none">
+            <path d="M0,120 L600,40 L1200,120 L1200,120 L0,120 Z" fill={bgColor} />
+          </svg>
+        );
+      case 'straight':
+      case 'none':
+      default:
+        return null;
+    }
+  };
+
  const renderLayout = () => {
    const spacing = theme.gallerySettings?.spacing || 'normal';
    const gapClass = spacing === 'tight' ? 'gap-1' : spacing === 'relaxed' ? 'gap-4' : 'gap-2';
@@ -151,18 +188,6 @@ export const GalleryPreview: React.FC<GalleryPreviewProps> = ({
          </div>
        );
      
-      case 'hero':
-        return (
-          <div className="space-y-3">
-            <PreviewPhoto photo={mockPhotos[0]} aspectRatio="aspect-[16/9]" className="w-full" />
-            <div className={`grid grid-cols-4 ${gapClass}`}>
-              {mockPhotos.slice(1, 5).map((photo) => (
-                <PreviewPhoto key={photo.id} photo={photo} />
-              ))}
-            </div>
-          </div>
-        );
-      
      case 'mosaic':
        return (
          <div className={`grid grid-cols-4 grid-rows-3 ${gapClass} h-64`}>
@@ -181,7 +206,7 @@ export const GalleryPreview: React.FC<GalleryPreviewProps> = ({
  };
  
  return (
-    <div 
+    <div
      className={`bg-white rounded-lg shadow-sm overflow-hidden ${className}`}
      style={{
        backgroundColor: theme.backgroundColor || '#ffffff',
@@ -189,45 +214,124 @@ export const GalleryPreview: React.FC<GalleryPreviewProps> = ({
        fontFamily: theme.fontFamily || 'Inter, sans-serif',
      }}
    >
-      {/* Preview Header */}
-      <div 
-        className="px-4 py-3 border-b space-y-2"
-        style={{
-          borderColor: theme.primaryColor ? `${theme.primaryColor}20` : '#e5e7eb',
-        }}
-      >
-        <div className={`flex items-center gap-3 ${brandFlexClass}`}>
-          {showLogo && (
-            resolvedLogoUrl ? (
-              <img
-                src={resolvedLogoUrl}
-                alt={brandName}
-                className="h-8 w-auto object-contain"
-              />
-            ) : (
-              <div className="h-8 w-8 rounded-full bg-neutral-200 flex items-center justify-center">
-                <Camera className="w-4 h-4 text-neutral-500" />
-              </div>
-            )
-          )}
-          {showText && (
-            <div>
-              <p className="text-sm font-semibold leading-tight">{brandName}</p>
-              {brandTagline && (
-                <p className="text-xs text-neutral-500 leading-tight">{brandTagline}</p>
+      {/* Hero Header */}
+      {isHeroHeader && (
+        <div
+          className="relative text-white overflow-hidden"
+          style={{
+            backgroundColor: theme.accentColor || theme.primaryColor || '#22c55e',
+            backgroundImage: 'url("data:image/svg+xml,%3Csvg width=\'40\' height=\'40\' viewBox=\'0 0 40 40\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.03\'%3E%3Cpath d=\'M0 40L40 0H20L0 20M40 40V20L20 40\'/%3E%3C/g%3E%3C/svg%3E")',
+          }}
+        >
+          <div className="py-8 px-4 relative z-10">
+            <div className="text-center max-w-md mx-auto">
+              {showLogo && (
+                <div className="mb-3">
+                  {resolvedLogoUrl ? (
+                    <img
+                      src={resolvedLogoUrl}
+                      alt={brandName}
+                      className="h-10 w-auto object-contain mx-auto"
+                      style={{ filter: 'brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))' }}
+                    />
+                  ) : (
+                    <div className="h-10 w-10 rounded-full bg-white/20 flex items-center justify-center mx-auto">
+                      <Camera className="w-5 h-5 text-white" />
+                    </div>
+                  )}
+                </div>
              )}
+              <h1
+                className="text-xl font-bold mb-2"
+                style={{
+                  fontFamily: theme.headingFontFamily || theme.fontFamily || 'Inter, sans-serif',
+                  textShadow: '0 2px 4px rgba(0, 0, 0, 0.3)'
+                }}
+              >
+                Sample Event
+              </h1>
+              <div className="flex items-center justify-center text-white/80 text-sm" style={{ textShadow: '0 1px 3px rgba(0, 0, 0, 0.3)' }}>
+                <Calendar className="w-4 h-4 mr-1" />
+                <span>January 15, 2026</span>
+              </div>
+              {/* Hero photo placeholder hint */}
+              <div className="mt-3 flex items-center justify-center gap-1.5 text-white/60 text-xs">
+                <Camera className="w-3 h-3" />
+                <span>{t('branding.heroPlaceholderText')}</span>
+              </div>
            </div>
-          )}
-          {!showLogo && !showText && (
-            <p className="text-sm font-semibold">{brandName}</p>
-          )}
+          </div>
+          <div className="absolute bottom-0 left-0 right-0">
+            {renderHeroDivider()}
+          </div>
        </div>
-        <div className="text-xs text-neutral-500 flex justify-between">
-          <span>Gallery preview</span>
-          <span className="capitalize">{activeLayout} layout</span>
+      )}
+
+      {/* Standard Header */}
+      {!isHeroHeader && !isMinimalHeader && !isNoHeader && (
+        <div
+          className="px-4 py-3 border-b space-y-2"
+          style={{
+            borderColor: theme.primaryColor ? `${theme.primaryColor}20` : '#e5e7eb',
+          }}
+        >
+          <div className={`flex items-center gap-3 ${brandFlexClass}`}>
+            {showLogo && (
+              resolvedLogoUrl ? (
+                <img
+                  src={resolvedLogoUrl}
+                  alt={brandName}
+                  className="h-8 w-auto object-contain"
+                />
+              ) : (
+                <div className="h-8 w-8 rounded-full bg-neutral-200 flex items-center justify-center">
+                  <Camera className="w-4 h-4 text-neutral-500" />
+                </div>
+              )
+            )}
+            {showText && (
+              <div>
+                <p className="text-sm font-semibold leading-tight">{brandName}</p>
+                {brandTagline && (
+                  <p className="text-xs text-neutral-500 leading-tight">{brandTagline}</p>
+                )}
+              </div>
+            )}
+            {!showLogo && !showText && (
+              <p className="text-sm font-semibold">{brandName}</p>
+            )}
+          </div>
        </div>
+      )}
+
+      {/* Minimal Header - thin bar with just event name */}
+      {isMinimalHeader && (
+        <div
+          className="px-4 py-2 border-b"
+          style={{
+            borderColor: theme.primaryColor ? `${theme.primaryColor}20` : '#e5e7eb',
+          }}
+        >
+          <p
+            className="text-sm font-semibold truncate"
+            style={{
+              fontFamily: theme.headingFontFamily || theme.fontFamily || 'Inter, sans-serif',
+            }}
+          >
+            Sample Event
+          </p>
+        </div>
+      )}
+
+      {/* None Header - no header content at all */}
+      {/* (isNoHeader renders nothing here — goes straight to layout bar) */}
+
+      {/* Layout info bar */}
+      <div className="px-4 py-1 border-b text-xs text-neutral-500 flex justify-between" style={{ borderColor: theme.primaryColor ? `${theme.primaryColor}20` : '#e5e7eb' }}>
+        <span>Gallery preview</span>
+        <span className="capitalize">{isHeroHeader ? `Hero + ${activeLayout}` : isMinimalHeader ? `Minimal + ${activeLayout}` : isNoHeader ? `No header + ${activeLayout}` : `${activeLayout} layout`}</span>
      </div>
-      
+
      {/* Preview Content */}
      <div className="p-4" style={{ maxHeight: '400px', overflowY: 'auto' }}>
        {renderLayout()}
@@ -37,7 +37,7 @@ export const HeroPhotoSelector: React.FC<HeroPhotoSelectorProps> = ({
  if (!isEditing) {
    return (
      <div>
-        <label className="block text-sm font-medium text-neutral-700 mb-1">
+        <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
          {t('events.heroPhoto')}
        </label>
        {currentHeroPhoto ? (
@@ -57,10 +57,10 @@ export const HeroPhotoSelector: React.FC<HeroPhotoSelectorProps> = ({

  return (
    <div>
-      <label className="block text-sm font-medium text-neutral-700 mb-1">
+      <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
        {t('events.heroPhoto')}
      </label>
-      <p className="text-xs text-neutral-500 mb-2">
+      <p className="text-xs text-neutral-500 dark:text-neutral-400 mb-2">
        {t('events.heroPhotoHelp')}
      </p>
      
@@ -107,12 +107,12 @@ export const HeroPhotoSelector: React.FC<HeroPhotoSelectorProps> = ({
      {isOpen && (
        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
          <Card className="max-w-4xl w-full max-h-[90vh] overflow-hidden">
-            <div className="p-6 border-b border-neutral-200">
+            <div className="p-6 border-b border-neutral-200 dark:border-neutral-700">
              <div className="flex items-center justify-between">
-                <h2 className="text-xl font-semibold">{t('events.selectHeroPhoto')}</h2>
+                <h2 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100">{t('events.selectHeroPhoto')}</h2>
                <button
                  onClick={() => setIsOpen(false)}
-                  className="p-2 hover:bg-neutral-100 rounded-lg transition-colors"
+                  className="p-2 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors"
                >
                  <X className="w-5 h-5" />
                </button>
@@ -157,7 +157,7 @@ export const HeroPhotoSelector: React.FC<HeroPhotoSelectorProps> = ({
              )}
            </div>
            
-            <div className="p-6 border-t border-neutral-200 flex justify-end gap-3">
+            <div className="p-6 border-t border-neutral-200 dark:border-neutral-700 flex justify-end gap-3">
              <Button
                variant="outline"
                onClick={() => setIsOpen(false)}
@@ -103,10 +103,10 @@ export const PasswordChangeModal: React.FC<PasswordChangeModalProps> = ({ isOpen
      <Card className="w-full max-w-md">
        <div className="p-6">
          <div className="flex items-center justify-between mb-4">
-            <h2 className="text-xl font-semibold text-neutral-900">{t('passwordChange.title')}</h2>
+            <h2 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100">{t('passwordChange.title')}</h2>
            <button
              onClick={onClose}
-              className="p-1 hover:bg-neutral-100 rounded-lg transition-colors"
+              className="p-1 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors"
            >
              <X className="w-5 h-5 text-neutral-500" />
            </button>
@@ -115,7 +115,7 @@ export const PasswordChangeModal: React.FC<PasswordChangeModalProps> = ({ isOpen
          <form onSubmit={handleSubmit} className="space-y-4">
            {/* Current Password */}
            <div>
-              <label htmlFor="currentPassword" className="block text-sm font-medium text-neutral-700 mb-1">
+              <label htmlFor="currentPassword" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                {t('passwordChange.currentPassword')}
              </label>
              <div className="relative">
@@ -131,7 +131,7 @@ export const PasswordChangeModal: React.FC<PasswordChangeModalProps> = ({ isOpen
                <button
                  type="button"
                  onClick={() => setShowPasswords(prev => ({ ...prev, current: !prev.current }))}
-                  className="absolute right-3 top-2 p-1 hover:bg-neutral-100 rounded"
+                  className="absolute right-3 top-2 p-1 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded"
                >
                  {showPasswords.current ? 
                    <EyeOff className="w-4 h-4 text-neutral-500" /> : 
@@ -143,7 +143,7 @@ export const PasswordChangeModal: React.FC<PasswordChangeModalProps> = ({ isOpen

            {/* New Password */}
            <div>
-              <label htmlFor="newPassword" className="block text-sm font-medium text-neutral-700 mb-1">
+              <label htmlFor="newPassword" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                {t('passwordChange.newPassword')}
              </label>
              <div className="relative">
@@ -159,7 +159,7 @@ export const PasswordChangeModal: React.FC<PasswordChangeModalProps> = ({ isOpen
                <button
                  type="button"
                  onClick={() => setShowPasswords(prev => ({ ...prev, new: !prev.new }))}
-                  className="absolute right-3 top-2 p-1 hover:bg-neutral-100 rounded"
+                  className="absolute right-3 top-2 p-1 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded"
                >
                  {showPasswords.new ? 
                    <EyeOff className="w-4 h-4 text-neutral-500" /> : 
@@ -171,7 +171,7 @@ export const PasswordChangeModal: React.FC<PasswordChangeModalProps> = ({ isOpen

            {/* Confirm Password */}
            <div>
-              <label htmlFor="confirmPassword" className="block text-sm font-medium text-neutral-700 mb-1">
+              <label htmlFor="confirmPassword" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                {t('passwordChange.confirmPassword')}
              </label>
              <div className="relative">
@@ -187,7 +187,7 @@ export const PasswordChangeModal: React.FC<PasswordChangeModalProps> = ({ isOpen
                <button
                  type="button"
                  onClick={() => setShowPasswords(prev => ({ ...prev, confirm: !prev.confirm }))}
-                  className="absolute right-3 top-2 p-1 hover:bg-neutral-100 rounded"
+                  className="absolute right-3 top-2 p-1 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded"
                >
                  {showPasswords.confirm ? 
                    <EyeOff className="w-4 h-4 text-neutral-500" /> : 
@@ -198,10 +198,10 @@ export const PasswordChangeModal: React.FC<PasswordChangeModalProps> = ({ isOpen
            </div>

            {/* Password Requirements */}
-            <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+            <div className="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
              <div className="flex items-start gap-2">
-                <AlertCircle className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
-                <div className="text-sm text-blue-800">
+                <AlertCircle className="w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
+                <div className="text-sm text-blue-800 dark:text-blue-200">
                  <p className="font-medium">{t('passwordChange.requirements')}</p>
                  <ul className="list-disc list-inside mt-1 space-y-1">
                    <li>{t('passwordChange.minLength')}</li>
--- a/Show More
+++ b/Show More