chore: bump version to 1.0.123 (backend + frontend)

feat(docker): add PUID/PGID and user mapping to avoid bind mount permission issues; feat(setup): prompt for admin email interactively; docs: PUID/PGID in .env.example
chore: bump version to 1.0.122 (backend + frontend)
2025-09-14 13:53:37 +00:00 · 2025-09-14 15:46:35 +02:00 · 2025-09-09 18:54:09 +00:00 · 2025-09-09 20:48:49 +02:00 · 2025-09-09 18:45:28 +00:00 · 2025-09-09 20:40:17 +02:00
73 changed files with 3499 additions and 854 deletions
@@ -34,9 +34,15 @@ SMTP_PASS=your-app-specific-password
 EMAIL_FROM=noreply@yourdomain.com

 # Application URLs
+# Use full origin with scheme, no trailing slash.
+# Admin UI is served by the frontend at /admin.
 FRONTEND_URL=https://yourdomain.com
-ADMIN_URL=https://yourdomain.com:3001
-VITE_API_URL=https://yourdomain.com:3001/api
+ADMIN_URL=https://yourdomain.com
+
+# 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.
+VITE_API_URL=/api

 # Port Configuration (optional)
 # BACKEND_PORT=3001
@@ -47,7 +53,25 @@ VITE_API_URL=https://yourdomain.com:3001/api
 # Timezone
 TZ=UTC

+# Runtime user mapping for Docker (optional)
+# Set these to your host user's UID/GID to avoid permission issues on bind mounts.
+# Run `id -u` and `id -g` on host to get values. Defaults to 1001.
+PUID=1001
+PGID=1001
+
 # Analytics (Optional - Umami)
 VITE_UMAMI_URL=
 VITE_UMAMI_WEBSITE_ID=
-VITE_UMAMI_SHARE_URL=
+VITE_UMAMI_SHARE_URL=
+
+# Storage variables (host paths)
+# These control where data is stored on the host. Defaults are local folders.
+APP_STORAGE=./storage
+APP_DATA=./data
+LOGS=./logs
+
+# Note on FRONTEND_API_URL (documentation only):
+# When using pre-built frontend images, runtime env vars cannot override the built JS.
+# Do NOT rely on FRONTEND_API_URL in Compose. Instead, keep VITE_API_URL=/api and
+# let the frontend Nginx proxy /api to the backend. Only if you rebuild the frontend
+# should you change VITE_API_URL at build time.
@@ -33,7 +33,7 @@ jobs:
          # Remove sensitive files/directories if they exist
          echo "Removing sensitive files..."
          rm -rf .gitea/ || true
-          rm -rf scripts/ || true
+          rm -rf scripts/install-gitea-runner.sh || true
          rm -rf .drone* || true
          rm -rf photo-sharing-prd.md || true
          rm -rf CLAUDE.md || true
@@ -43,6 +43,8 @@ jobs:

    - name: Log in to Container Registry
      if: github.event_name != 'pull_request' || github.event.inputs.push == 'true'
+      id: login-ghcr
+      continue-on-error: true
      uses: docker/login-action@v3
      with:
        registry: ${{ env.REGISTRY }}
@@ -73,7 +75,8 @@ jobs:
      with:
        context: ./backend
        file: ./backend/Dockerfile
-        push: ${{ github.event_name != 'pull_request' || github.event.inputs.push == 'true' }}
+        # Always build; only push when registry login succeeded
+        push: ${{ (github.event_name != 'pull_request' || github.event.inputs.push == 'true') && steps.login-ghcr.outcome == 'success' }}
        tags: ${{ steps.meta-backend.outputs.tags }}
        labels: ${{ steps.meta-backend.outputs.labels }}
        platforms: linux/amd64,linux/arm64
@@ -86,7 +89,7 @@ jobs:
          VERSION=${{ steps.meta-backend.outputs.version }}

    - name: Run Trivy vulnerability scanner
-      if: github.event_name != 'pull_request'
+      if: github.event_name != 'pull_request' && steps.login-ghcr.outcome == 'success'
      uses: aquasecurity/trivy-action@master
      with:
        image-ref: ${{ env.REGISTRY }}/${{ env.BACKEND_IMAGE_NAME }}:${{ steps.meta-backend.outputs.version }}
@@ -96,7 +99,7 @@ jobs:
        timeout: '10m'

    - name: Upload Trivy scan results to GitHub Security tab
-      if: github.event_name != 'pull_request'
+      if: github.event_name != 'pull_request' && steps.login-ghcr.outcome == 'success'
      uses: github/codeql-action/upload-sarif@v3
      with:
        sarif_file: 'trivy-backend.sarif'
@@ -120,6 +123,8 @@ jobs:

    - name: Log in to Container Registry
      if: github.event_name != 'pull_request' || github.event.inputs.push == 'true'
+      id: login-ghcr
+      continue-on-error: true
      uses: docker/login-action@v3
      with:
        registry: ${{ env.REGISTRY }}
@@ -150,7 +155,8 @@ jobs:
      with:
        context: ./frontend
        file: ./frontend/Dockerfile
-        push: ${{ github.event_name != 'pull_request' || github.event.inputs.push == 'true' }}
+        # Always build; only push when registry login succeeded
+        push: ${{ (github.event_name != 'pull_request' || github.event.inputs.push == 'true') && steps.login-ghcr.outcome == 'success' }}
        tags: ${{ steps.meta-frontend.outputs.tags }}
        labels: ${{ steps.meta-frontend.outputs.labels }}
        platforms: linux/amd64,linux/arm64
@@ -163,7 +169,7 @@ jobs:
          VERSION=${{ steps.meta-frontend.outputs.version }}

    - name: Run Trivy vulnerability scanner
-      if: github.event_name != 'pull_request'
+      if: github.event_name != 'pull_request' && steps.login-ghcr.outcome == 'success'
      uses: aquasecurity/trivy-action@master
      with:
        image-ref: ${{ env.REGISTRY }}/${{ env.FRONTEND_IMAGE_NAME }}:${{ steps.meta-frontend.outputs.version }}
@@ -173,7 +179,7 @@ jobs:
        timeout: '10m'

    - name: Upload Trivy scan results to GitHub Security tab
-      if: github.event_name != 'pull_request'
+      if: github.event_name != 'pull_request' && steps.login-ghcr.outcome == 'success'
      uses: github/codeql-action/upload-sarif@v3
      with:
        sarif_file: 'trivy-frontend.sarif'
@@ -220,4 +226,4 @@ jobs:
        echo "- PR number (for pull requests)" >> $GITHUB_STEP_SUMMARY
        echo "- Version tags (for releases)" >> $GITHUB_STEP_SUMMARY
        echo "- Short SHA with branch prefix" >> $GITHUB_STEP_SUMMARY
-        echo "- \`latest\` (for main branch)" >> $GITHUB_STEP_SUMMARY
+        echo "- \`latest\` (for main branch)" >> $GITHUB_STEP_SUMMARY
@@ -72,3 +72,12 @@ logs/
 storage/
 data/
 certbot/
+
+# Ignore local contributor guide copy
+AGENTS.md
+
+# Local artifacts from browser tooling
+.playwright-mcp/
+
+# Local SQLite files in backend
+backend/*.sqlite*
@@ -71,6 +71,7 @@ If you need to customize the application or the pre-built images aren't availabl
 - [Reverse Proxy Setup](#reverse-proxy-setup)
 - [Maintenance](#maintenance)
 - [Troubleshooting](#troubleshooting)
+ - [External Media Library](#external-media-library)

 ## Prerequisites

@@ -111,6 +112,43 @@ If you need to customize the application or the pre-built images aren't availabl
   docker compose -f docker-compose.production.yml logs -f
   ```

+## External Media Library
+
+PicPeak can reference an existing, read‑only media library mounted into the backend container. This avoids copying originals into PicPeak storage.
+
+- Map your host library path to the container as read‑only in `docker-compose.production.yml`:
+  - Add volume under `backend`: `- ${EXTERNAL_MEDIA}:/external-media:ro`
+  - Add backend env: `EXTERNAL_MEDIA_ROOT=/external-media`
+- In `.env`, set:
+  - `EXTERNAL_MEDIA=/mnt/photos` (example host path)
+  - `EXTERNAL_MEDIA_ROOT=/external-media`
+
+Usage:
+- In Admin → Events, set “Source Mode” to “Reference (external folder)”, select a folder under `/external-media`, then import to index and generate thumbnails. Originals stay in your library.
+
+Backups and Archives:
+- Backups only include data under `STORAGE_PATH` and exclude external originals. The backup manifest includes `metadata.external_references = { excluded: true, events: N, photos: M }` and the Admin UI surfaces a warning.
+- Archiving reference events creates a manifest‑only ZIP and deletes thumbnails for that event. External originals are never moved or deleted.
+
+Local (npm) setup (no Docker):
+
+1. Create or choose a folder that contains your external originals, e.g. `/Users/you/Pictures/picpeak-external` (macOS/Linux) or `C:\\Pictures\\picpeak-external` (Windows).
+2. In `backend/.env` (or your shell), set:
+   - `EXTERNAL_MEDIA_ROOT=/absolute/path/to/picpeak-external`
+   - Ensure `STORAGE_PATH` points to your PicPeak storage (defaults to `./storage`).
+3. Start services from source:
+   - Backend: `cd backend && npm install && npm run migrate && JWT_SECRET=... npm start`
+   - Frontend: `cd frontend && npm install && npm run dev` (or build + serve)
+4. In Admin → Events:
+   - Create an event, set “Source Mode” to “Reference (external folder)”.
+   - Use the folder picker to browse under your `EXTERNAL_MEDIA_ROOT` and select the subfolder to reference.
+   - Click “Import from selected folder” to index files and generate thumbnails on demand.
+
+Notes:
+- PicPeak only reads from `EXTERNAL_MEDIA_ROOT`; it never modifies or deletes your originals there.
+- Thumbnails are generated under `STORAGE_PATH/thumbnails` and are included in backups; originals in `EXTERNAL_MEDIA_ROOT` are excluded.
+- On Windows, use absolute paths (e.g., `C:\\Photos\\Library`) for `EXTERNAL_MEDIA_ROOT`.
+
 ### Method 2: Building from Source

 1. **Clone the repository**
@@ -170,8 +208,28 @@ Update `.env` with:
 - `REDIS_PASSWORD` - Redis password
 - `SMTP_*` - Email configuration
 - **URL Configuration** (for backend CORS):
-  - `FRONTEND_URL` - Frontend URL (e.g., `http://localhost:3000` for Docker)
-  - `ADMIN_URL` - Admin URL (e.g., `http://localhost:3000` for Docker)
+  - `FRONTEND_URL` - Frontend origin (use full URL with scheme, no trailing slash)
+    - Example (Docker): `http://localhost:3000`
+  - `ADMIN_URL` - Admin origin (same as `FRONTEND_URL` for Docker; full URL, no trailing slash)
+    - Example (Docker): `http://localhost:3000`
+  
+  Notes:
+  - Do not include trailing `/` (e.g., use `http://host:3000`, not `http://host:3000/`).
+  - Always include the scheme (`http://` or `https://`).
+  - The backend compares origins strictly for CORS; malformed values will cause login requests to fail with 500.
+
+#### External Database Example
+To use an external PostgreSQL instead of the bundled container, set the following in `.env` and ensure the `postgres` service is disabled or removed:
+
+```env
+DB_HOST=db.example.com
+DB_PORT=5432
+DB_USER=picpeak
+DB_PASSWORD=change_me
+DB_NAME=picpeak_prod
+```
+
+Compose uses these values via `env_file: .env`. The backend service also defaults `DB_HOST=${DB_HOST:-postgres}` so if you don’t set `DB_HOST` it will use the bundled `postgres` container.

 ### Frontend Configuration (frontend/.env)
 Create `frontend/.env` from `frontend/.env.example`:
@@ -181,9 +239,10 @@ cp frontend/.env.example frontend/.env

 Update `frontend/.env` with:
 - `VITE_API_URL` - Backend API URL
-  - For Docker deployment: `http://localhost:3001/api`
-  - For non-Docker local dev: `http://localhost:3001`
-  - For production with reverse proxy: `/api`
+  - Docker (pre-built images) and production behind reverse proxy: `/api` (recommended; avoids CORS and matches the frontend Nginx proxy in the image)
+  - Local dev (Vite): `http://localhost:3001` or `/api` if proxying through a dev proxy
+
+Note: When using pre-built frontend images, runtime container env does not change the already-built JS. Prefer the default `/api` and let the frontend Nginx proxy forward to the backend.

 ⚠️ **IMPORTANT PORT CONFIGURATION**: 
 - The frontend runs on port **3000** in Docker (exposed via nginx)
@@ -246,8 +305,8 @@ docker compose ps
 ### Access Points

 By default, services are exposed on:
- Frontend: http://localhost:3000
- Backend/API: http://localhost:3001
+- Frontend (UI + Admin): http://localhost:3000 (admin at `/admin`)
+- Backend/API: http://localhost:3001 (API only; no UI routes)
 - PostgreSQL: localhost:5432 (if needed)
 - Redis: localhost:6379 (if needed)

@@ -318,7 +377,11 @@ After deployment, you must complete the first login process which includes manda

 ### Step 2: Access Admin Panel

-1. Navigate to your admin panel URL (e.g., `http://your-domain.com:3001/admin` or `https://your-domain.com/admin`)
+1. Navigate to your frontend domain and open the admin section:
+   - `http://your-domain.com/admin` (behind reverse proxy)
+   - `http://localhost:3000/admin` (Docker local)
+   
+   The backend at `:3001` serves API only and does not serve the admin UI.
 2. Login using:
   - **Email**: `admin@example.com` (or your custom admin email)
   - **Password**: The auto-generated password from the logs
@@ -392,7 +455,16 @@ server {
        proxy_set_header X-Forwarded-Proto $scheme;
    }

-    # Backend API
+    # Frontend (serves UI and /admin/*)
+    location / {
+        proxy_pass http://localhost:3000;
+        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;
+    }
+
+    # Backend API and protected resources
    location /api {
        proxy_pass http://localhost:3001;
        proxy_set_header Host $host;
@@ -400,21 +472,11 @@ server {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
-
-    # Protected photos and uploads
    location ~ ^/(photos|thumbnails|uploads) {
        proxy_pass http://localhost:3001;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-    }
-
-    # Admin routes
-    location /admin {
-        proxy_pass http://localhost:3001;
-        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;
    }
 }
@@ -735,4 +797,4 @@ For issues and questions:
  - Error messages
  - Log output
  - Environment details (without secrets)
-  - Steps to reproduce
+  - Steps to reproduce
@@ -28,6 +28,7 @@ Unlike expensive SaaS solutions, PicPeak gives you:

 ### 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
@@ -45,6 +46,7 @@ Unlike expensive SaaS solutions, PicPeak gives you:
 ### 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
@@ -73,6 +75,7 @@ docker-compose up -d
 ## 📖 Documentation

 - 📘 [**Deployment Guide**](DEPLOYMENT_GUIDE.md) - Detailed installation instructions
+  - Includes the new [External Media Library](DEPLOYMENT_GUIDE.md#external-media-library) reference mode
 - 🤝 [**Contributing**](CONTRIBUTING.md) - How to contribute
 - 📜 [**License**](LICENSE) - MIT License
 - 🔒 [**Security**](SECURITY.md) - Security policies
@@ -192,9 +195,10 @@ These features are currently in beta testing and may have limited functionality
 | 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 |
 | **Gallery Templates** | Additional gallery layouts and themes (masonry, slideshow, story-style) for different event types | Medium | 🔄 Open |
 | **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 (not tested) |
+| **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 | 🔄 Open |
 | **Multiple Administrators** | Support for multiple admin accounts with role-based permissions and activity tracking | Low | 📋 Planned |

@@ -233,4 +237,4 @@ PicPeak is released under the [MIT License](LICENSE). Use it freely for personal
  <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>
-</p>
+</p>
@@ -8,7 +8,7 @@ This guide provides easy installation instructions for PicPeak on Linux servers

 ```bash
 # Download and run the unified setup script
-curl -fsSL https://raw.githubusercontent.com/yourusername/wedding-photo-sharing/main/scripts/setup.sh -o setup.sh && \
+curl -fsSL https://raw.githubusercontent.com/the-luap/picpeak/main/scripts/setup.sh -o setup.sh && \
 chmod +x setup.sh && \
 sudo ./setup.sh
 ```
@@ -166,8 +166,10 @@ sudo ./setup.sh --native --unattended \
 ## 🌐 Access Methods

 ### Direct Access (Simplest)
- **Docker**: `http://your-server:3000` (frontend), `http://your-server:3001/admin` (admin)
- **Native**: `http://your-server:3001/admin` (admin panel)
+- Docker: `http://your-server:3000` (frontend and admin at `/admin`)
+- Backend/API: `http://your-server:3001` (API only; no UI routes)
+  
+For native installs, serve the built frontend (e.g., with nginx or Caddy) and access the admin at `/admin` on the frontend domain.

 ### With Domain & HTTPS
 If configured during setup:
@@ -175,9 +177,23 @@ If configured during setup:
 - `https://your-domain.com/admin` - Admin panel

 ### Behind Existing Proxy
-Add to your Nginx/Apache configuration:
+Add to your Nginx/Apache configuration (split frontend vs backend):
 ```nginx
+# Frontend (UI + /admin/*)
 location / {
+    proxy_pass http://localhost:3000;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection 'upgrade';
+    proxy_set_header Host $host;
+    proxy_cache_bypass $http_upgrade;
+    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;
+}
+
+# Backend API and protected resources
+location /api {
    proxy_pass http://localhost:3001;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
@@ -189,6 +205,14 @@ location / {
    proxy_set_header X-Forwarded-Proto $scheme;
    client_max_body_size 100M;
 }
+location ~ ^/(photos|thumbnails|uploads) {
+    proxy_pass http://localhost:3001;
+    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;
+}
 ```

 ## 📁 Managing Galleries
@@ -281,9 +305,9 @@ docker compose restart
 ```

 ### Native Configuration
-Edit `/opt/picpeak/backend/.env`:
+Edit `/opt/picpeak/app/backend/.env`:
 ```bash
-sudo nano /opt/picpeak/backend/.env
+sudo nano /opt/picpeak/app/backend/.env
 sudo systemctl restart picpeak-backend
 ```

@@ -345,7 +369,7 @@ tar -czf photos-backup.tar.gz storage/events/
 #### Native:
 ```bash
 # Database backup
-sudo cp /opt/picpeak/backend/database.sqlite /backup/database-$(date +%Y%m%d).sqlite
+sudo cp /opt/picpeak/app/backend/data/photo_sharing.db /backup/database-$(date +%Y%m%d).sqlite

 # Photos backup
 sudo tar -czf /backup/photos-$(date +%Y%m%d).tar.gz /opt/picpeak/events/
@@ -422,7 +446,7 @@ ls -la ~/picpeak/storage/events/
 docker exec picpeak-backend node scripts/reset-admin-password.js

 # Native
-cd /opt/picpeak/backend
+cd /opt/picpeak/app/backend
 sudo -u picpeak node scripts/reset-admin-password.js
 ```

@@ -434,11 +458,11 @@ sudo -u picpeak node scripts/reset-admin-password.js
   - Installation: `/tmp/picpeak-setup-*.log`

 2. **Documentation:**
-   - [Full Documentation](https://github.com/yourusername/wedding-photo-sharing)
+   - [Full Documentation](https://github.com/the-luap/picpeak)
   - [Deployment Guide](./DEPLOYMENT_GUIDE.md)

 3. **Support:**
-   - [GitHub Issues](https://github.com/yourusername/wedding-photo-sharing/issues)
+   - [GitHub Issues](https://github.com/the-luap/picpeak/issues)
   - Include: Error messages, system info (`uname -a`), installation method

 ## 🔒 Security Best Practices
@@ -474,7 +498,7 @@ services:
 ### Native Optimization
 ```bash
 # Increase Node.js memory
-echo "NODE_OPTIONS=--max-old-space-size=2048" >> /opt/picpeak/backend/.env
+echo "NODE_OPTIONS=--max-old-space-size=2048" >> /opt/picpeak/app/backend/.env
 sudo systemctl restart picpeak-backend
 ```

@@ -516,4 +540,4 @@ sudo ./setup.sh --native \

 ---

-**PicPeak Setup v1.0** | [Documentation](https://github.com/yourusername/wedding-photo-sharing) | [Support](https://github.com/yourusername/wedding-photo-sharing/issues)
+**PicPeak Setup v1.0** | [Documentation](https://github.com/the-luap/picpeak) | [Support](https://github.com/the-luap/picpeak/issues)
@@ -26,29 +26,37 @@ const config = {

  production: {
    client: process.env.DATABASE_CLIENT || 'pg',
-    connection: {
-      host: process.env.DB_HOST || 'db',
-      port: process.env.DB_PORT || 5432,
-      user: process.env.DB_USER || 'picpeak',
-      password: process.env.DB_PASSWORD,
-      database: process.env.DB_NAME || 'picpeak',
-      ssl: process.env.DB_SSL === 'true' ? { rejectUnauthorized: false } : false,
-      // Connection stability settings
-      connectionTimeoutMillis: 30000,
-      idleTimeoutMillis: 30000,
-      keepAlive: true,
-      keepAliveInitialDelayMillis: 0
-    },
-    pool: {
-      min: 5,
-      max: 25,
-      acquireTimeoutMillis: 60000,
-      createTimeoutMillis: 60000,
-      idleTimeoutMillis: 30000,
-      reapIntervalMillis: 1000,
-      createRetryIntervalMillis: 200,
-      propagateCreateError: false
-    },
+    // Support both Postgres and SQLite in production based on DATABASE_CLIENT
+    connection: (process.env.DATABASE_CLIENT || 'pg') === 'pg'
+      ? {
+          host: process.env.DB_HOST || 'db',
+          port: process.env.DB_PORT || 5432,
+          user: process.env.DB_USER || 'picpeak',
+          password: process.env.DB_PASSWORD,
+          database: process.env.DB_NAME || 'picpeak',
+          ssl: process.env.DB_SSL === 'true' ? { rejectUnauthorized: false } : false,
+          // Connection stability settings
+          connectionTimeoutMillis: 30000,
+          idleTimeoutMillis: 30000,
+          keepAlive: true,
+          keepAliveInitialDelayMillis: 0
+        }
+      : {
+          filename: path.join(__dirname, process.env.DATABASE_PATH || './data/photo_sharing.db')
+        },
+    useNullAsDefault: (process.env.DATABASE_CLIENT || 'pg') !== 'pg',
+    pool: (process.env.DATABASE_CLIENT || 'pg') === 'pg'
+      ? {
+          min: 5,
+          max: 25,
+          acquireTimeoutMillis: 60000,
+          createTimeoutMillis: 60000,
+          idleTimeoutMillis: 30000,
+          reapIntervalMillis: 1000,
+          createRetryIntervalMillis: 200,
+          propagateCreateError: false
+        }
+      : undefined,
    migrations: {
      directory: './migrations'
    },
@@ -56,4 +64,4 @@ const config = {
  }
 };

-module.exports = config[process.env.NODE_ENV || 'development'];
+module.exports = config[process.env.NODE_ENV || 'development'];
@@ -0,0 +1,89 @@
+exports.up = async function(knex) {
+  console.log('Running migration: 041_add_logo_customization_settings');
+  
+  // Add default logo customization settings
+  const logoSettings = [
+    {
+      setting_key: 'branding_logo_size',
+      setting_value: JSON.stringify('medium'),
+      setting_type: 'branding',
+      description: 'Logo size: small, medium, large, xlarge, or custom',
+      created_at: new Date(),
+      updated_at: new Date()
+    },
+    {
+      setting_key: 'branding_logo_max_height',
+      setting_value: JSON.stringify(48),
+      setting_type: 'branding', 
+      description: 'Maximum logo height in pixels (used when size is custom)',
+      created_at: new Date(),
+      updated_at: new Date()
+    },
+    {
+      setting_key: 'branding_logo_position',
+      setting_value: JSON.stringify('left'),
+      setting_type: 'branding',
+      description: 'Logo position in header: left, center, right',
+      created_at: new Date(),
+      updated_at: new Date()
+    },
+    {
+      setting_key: 'branding_logo_display_header',
+      setting_value: JSON.stringify(true),
+      setting_type: 'branding',
+      description: 'Show logo in gallery header',
+      created_at: new Date(),
+      updated_at: new Date()
+    },
+    {
+      setting_key: 'branding_logo_display_hero',
+      setting_value: JSON.stringify(true),
+      setting_type: 'branding',
+      description: 'Show logo in hero section (for non-grid layouts)',
+      created_at: new Date(),
+      updated_at: new Date()
+    },
+    {
+      setting_key: 'branding_logo_display_mode',
+      setting_value: JSON.stringify('logo_and_text'),
+      setting_type: 'branding',
+      description: 'Display mode: logo_only, text_only, logo_and_text',
+      created_at: new Date(),
+      updated_at: new Date()
+    }
+  ];
+
+  // Insert settings that don't already exist
+  for (const setting of logoSettings) {
+    const exists = await knex('app_settings')
+      .where('setting_key', setting.setting_key)
+      .first();
+    
+    if (!exists) {
+      await knex('app_settings').insert(setting);
+      console.log(`Added setting: ${setting.setting_key}`);
+    } else {
+      console.log(`Setting already exists: ${setting.setting_key}`);
+    }
+  }
+
+  console.log('Migration 041_add_logo_customization_settings completed');
+};
+
+exports.down = async function(knex) {
+  console.log('Rolling back migration: 041_add_logo_customization_settings');
+  
+  // Remove the logo customization settings
+  await knex('app_settings')
+    .whereIn('setting_key', [
+      'branding_logo_size',
+      'branding_logo_max_height',
+      'branding_logo_position',
+      'branding_logo_display_header',
+      'branding_logo_display_hero',
+      'branding_logo_display_mode'
+    ])
+    .del();
+  
+  console.log('Rollback of 041_add_logo_customization_settings completed');
+};
@@ -0,0 +1,54 @@
+/**
+ * Migration 041: Add external media reference support
+ * - events.source_mode: 'managed' | 'reference'
+ * - events.external_path: relative path under external media root
+ * - photos.source_origin: 'managed' | 'external'
+ * - photos.external_relpath: relative path within event.external_path
+ */
+
+const { addColumnIfNotExists } = require('../helpers');
+
+exports.up = async function(knex) {
+  console.log('Running migration: 041_add_external_media');
+
+  // events.source_mode (default 'managed')
+  await addColumnIfNotExists(knex, 'events', 'source_mode', (table) => {
+    table.string('source_mode').notNullable().defaultTo('managed');
+  });
+
+  // events.external_path (nullable)
+  await addColumnIfNotExists(knex, 'events', 'external_path', (table) => {
+    table.text('external_path');
+  });
+
+  // photos.source_origin (default 'managed')
+  await addColumnIfNotExists(knex, 'photos', 'source_origin', (table) => {
+    table.string('source_origin').notNullable().defaultTo('managed');
+  });
+
+  // photos.external_relpath (nullable)
+  await addColumnIfNotExists(knex, 'photos', 'external_relpath', (table) => {
+    table.text('external_relpath');
+  });
+
+  // Helpful index for queries
+  try {
+    if (knex.client.config.client === 'pg') {
+      await knex.raw("CREATE INDEX IF NOT EXISTS photos_event_source_idx ON photos (event_id, source_origin)");
+    } else {
+      await knex.schema.alterTable('photos', (table) => {
+        table.index(['event_id', 'source_origin'], 'photos_event_source_idx');
+      });
+    }
+  } catch (e) {
+    console.log('Index creation skipped or failed (may already exist):', e.message);
+  }
+
+  console.log('Migration 041_add_external_media completed');
+};
+
+exports.down = async function(knex) {
+  console.log('Rollback: 041_add_external_media');
+  // Keep columns (safe rollback not removing data). Intentionally no-op.
+};
+
@@ -1,12 +1,12 @@
 {
  "name": "picpeak-backend",
-  "version": "1.0.105",
+  "version": "1.0.123",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "picpeak-backend",
-      "version": "1.0.105",
+      "version": "1.0.123",
      "dependencies": {
        "@aws-sdk/client-s3": "^3.850.0",
        "@aws-sdk/lib-storage": "^3.850.0",
@@ -1,6 +1,6 @@
 {
  "name": "picpeak-backend",
-  "version": "1.0.105",
+  "version": "1.0.123",
  "description": "Backend for PicPeak event photo sharing platform",
  "main": "server.js",
  "scripts": {
@@ -12,6 +12,7 @@ logger.info('Server starting up', {
  timestamp: new Date().toISOString()
 });

+const fs = require('fs');
 const express = require('express');
 const helmet = require('helmet');
 const cors = require('cors');
@@ -42,25 +43,36 @@ const PORT = process.env.PORT || 3000;
 app.set('trust proxy', 'loopback, linklocal, uniquelocal');

 // Security middleware with custom CSP
+// In native HTTP installs, do NOT force HTTPS for subresources.
+const enableHsts = process.env.ENABLE_HSTS === 'true';
+const cspDirectives = {
+  defaultSrc: ["'self'"],
+  scriptSrc: ["'self'", "'unsafe-inline'"], // Required for React
+  styleSrc: ["'self'", "'unsafe-inline'", "https:"], // Required for styled components
+  imgSrc: ["'self'", "data:", "https:", "blob:"], // Allow data URLs and external images
+  connectSrc: ["'self'"], // API connections
+  fontSrc: ["'self'", "https:", "data:"], // Web fonts
+  objectSrc: ["'none'"], // Disable plugins
+  mediaSrc: ["'self'"], // Audio/video
+  frameSrc: ["'none'"], // Disable iframes
+};
+// Only upgrade insecure requests when HSTS explicitly enabled (HTTPS deployment)
+if (enableHsts) {
+  // In helmet, an empty array enables the directive
+  cspDirectives.upgradeInsecureRequests = [];
+}
+
 app.use(helmet({
  contentSecurityPolicy: {
-    directives: {
-      defaultSrc: ["'self'"],
-      scriptSrc: ["'self'", "'unsafe-inline'"], // Required for React
-      styleSrc: ["'self'", "'unsafe-inline'", "https:"], // Required for styled components
-      imgSrc: ["'self'", "data:", "https:", "blob:"], // Allow data URLs and external images
-      connectSrc: ["'self'"], // API connections
-      fontSrc: ["'self'", "https:", "data:"], // Web fonts
-      objectSrc: ["'none'"], // Disable plugins
-      mediaSrc: ["'self'"], // Audio/video
-      frameSrc: ["'none'"], // Disable iframes
-    },
+    // Avoid helmet adding defaults like upgrade-insecure-requests when not desired
+    useDefaults: false,
+    directives: cspDirectives,
  },
-  hsts: {
+  hsts: enableHsts ? {
    maxAge: 31536000, // 1 year
    includeSubDomains: true,
    preload: true
-  },
+  } : false,
  permittedCrossDomainPolicies: false,
  referrerPolicy: { policy: "strict-origin-when-cross-origin" }
 }));
@@ -72,14 +84,14 @@ app.use((req, res, next) => {
  next();
 });

-// CORS configuration
+// CORS configuration (apply only to API routes)
 const corsOptions = {
  origin: function (origin, callback) {
    const allowedOrigins = [
      process.env.FRONTEND_URL || 'http://localhost:3005',
      process.env.ADMIN_URL || 'http://localhost:3005'
    ];
-    
+
    // In development, also allow localhost origins
    if (process.env.NODE_ENV === 'development') {
      allowedOrigins.push(
@@ -89,18 +101,22 @@ const corsOptions = {
        'http://localhost:3000'  // Direct backend access
      );
    }
-    
-    // Allow requests with no origin (like mobile apps or curl)
+
+    // Allow requests with no origin (like curl) and allow-listed origins
    if (!origin || allowedOrigins.indexOf(origin) !== -1) {
      callback(null, true);
    } else {
-      callback(new Error('Not allowed by CORS'));
+      // Do not error globally; just omit CORS headers on disallowed origins
+      callback(null, false);
    }
  },
  credentials: true
 };

-app.use(cors(corsOptions));
+// Only attach CORS to API endpoints, not static assets
+app.use('/api', cors(corsOptions));
+// Handle preflight explicitly for API paths
+app.options('/api/*', cors(corsOptions));

 // Initialize rate limiters (they will be created dynamically)
 let generalRateLimiter;
@@ -124,6 +140,22 @@ async function initializeRateLimiters() {
 app.use(express.json({ limit: '100mb' }));
 app.use(express.urlencoded({ extended: true, limit: '100mb' }));

+// Request logging for API routes (with timestamps)
+const apiRequestLogger = (req, res, next) => {
+  try {
+    const started = Date.now();
+    const ts = new Date().toISOString();
+    logger.info(`[${ts}] ${req.method} ${req.originalUrl}`);
+    res.on('finish', () => {
+      const ms = Date.now() - started;
+      const tsDone = new Date().toISOString();
+      logger.info(`[${tsDone}] ${req.method} ${req.originalUrl} -> ${res.statusCode} (${ms}ms)`);
+    });
+  } catch (_) {}
+  next();
+};
+app.use('/api', apiRequestLogger);
+
 // Maintenance mode middleware - add after body parsing but before routes
 app.use(maintenanceMiddleware);

@@ -143,6 +175,7 @@ const secureStatic = require('./src/middleware/secureStatic');

 // Get storage path from environment or use default
 const storagePath = process.env.STORAGE_PATH || path.join(__dirname, '../storage');
+process.env.EXTERNAL_MEDIA_ROOT = process.env.EXTERNAL_MEDIA_ROOT || '/external-media';

 // Static file serving for photos (protected)
 app.use('/photos', require('./src/middleware/photoAuth'), setCorsHeaders, secureStatic(path.join(storagePath, 'events/active')));
@@ -199,7 +232,8 @@ app.get('/health', async (req, res) => {

 // Routes
 app.use('/api/auth', authRoutes);
-app.use('/api/events', eventRoutes);
+  app.use('/api/events', eventRoutes);
+  app.use('/api/admin/external-media', require('./src/routes/adminExternalMedia'));
 // Gallery routes - main routes first, then feedback routes
 app.use('/api/gallery', galleryRoutes);
 app.use('/api/gallery', require('./src/routes/galleryFeedback'));
@@ -217,6 +251,27 @@ app.use('/api/public', require('./src/routes/publicCMS'));
 app.use('/api/images', require('./src/routes/protectedImages'));
 app.use('/api/secure-images', secureImagesRoutes);

+// Optional: Serve built frontend (native installs)
+try {
+  const serveFrontendEnv = process.env.SERVE_FRONTEND; // 'true' | 'false' | undefined
+  const frontendDir = process.env.FRONTEND_DIR || path.join(__dirname, '../frontend/dist');
+  const indexPath = path.join(frontendDir, 'index.html');
+  // Auto-serve when dist exists unless explicitly disabled
+  const shouldServe = (serveFrontendEnv === 'true') || ((serveFrontendEnv === undefined || serveFrontendEnv === 'auto') && fs.existsSync(indexPath));
+  if (shouldServe) {
+    logger.info(`Serving frontend from ${frontendDir}`);
+    app.use(express.static(frontendDir));
+    // SPA fallback for non-API routes
+    app.get([ '/', '/admin', '/admin/*', '/gallery/*' ], (req, res) => {
+      res.sendFile(indexPath);
+    });
+  } else {
+    logger.info('Frontend static serving disabled or dist not found', { serveFrontendEnv, frontendDir });
+  }
+} catch (e) {
+  logger.warn('Failed to enable frontend static serving', { error: e.message });
+}
+
 // Error handling middleware
 app.use((err, req, res, next) => {
  console.error('EXPRESS ERROR HANDLER:', err);
@@ -1,7 +1,28 @@
+const fs = require('fs');
+const path = require('path');
 const knex = require('knex');
 const knexConfig = require('../../knexfile');
 const logger = require('../utils/logger');

+// Ensure SQLite directory exists when using file-based DB (native installs)
+try {
+  const isPostgres = knexConfig && knexConfig.client === 'pg';
+  if (!isPostgres && knexConfig && knexConfig.connection) {
+    const filename = typeof knexConfig.connection === 'object'
+      ? knexConfig.connection.filename
+      : (typeof knexConfig.connection === 'string' ? knexConfig.connection : null);
+    if (filename && typeof filename === 'string') {
+      const dir = path.dirname(filename);
+      if (dir && dir !== '.') {
+        fs.mkdirSync(dir, { recursive: true });
+      }
+    }
+  }
+} catch (e) {
+  // Non-fatal: log and continue; SQLite will fail later if still missing
+  try { logger.warn('SQLite directory ensure failed', { error: e.message }); } catch (_) {}
+}
+
 // Create database connection with built-in retry logic
 const db = knex(knexConfig);

@@ -312,4 +333,4 @@ async function logActivity(activityType, metadata = {}, eventId = null, actor =
  }
 }

-module.exports = { db, initializeDatabase, logActivity, withRetry };
+module.exports = { db, initializeDatabase, logActivity, withRetry };
@@ -0,0 +1,112 @@
+const express = require('express');
+const path = require('path');
+const fs = require('fs').promises;
+const { adminAuth } = require('../middleware/auth');
+const { list, resolveExternalPath, getExternalMediaRoot } = require('../services/externalMediaService');
+const { db, logActivity } = require('../database/db');
+
+const router = express.Router();
+
+// GET /api/admin/external-media/list?path=relative/dir
+router.get('/list', adminAuth, async (req, res) => {
+  try {
+    const relPath = (req.query.path || '').replace(/^\/+/, '');
+    const result = await list(relPath);
+    res.json(result);
+  } catch (error) {
+    res.status(400).json({ error: 'Invalid path', details: error.message });
+  }
+});
+
+// Helper to recursively collect files under a directory, filtered by image extensions
+async function walkDir(dir, baseDir) {
+  const results = [];
+  const entries = await fs.readdir(dir, { withFileTypes: true });
+  for (const e of entries) {
+    if (e.name.startsWith('.')) continue;
+    const full = path.join(dir, e.name);
+    if (e.isDirectory()) {
+      results.push(...await walkDir(full, baseDir));
+    } else if (e.isFile()) {
+      const ext = path.extname(e.name).toLowerCase();
+      if (['.jpg', '.jpeg', '.png', '.webp'].includes(ext)) {
+        const rel = path.relative(baseDir, full);
+        results.push({ full, rel, name: e.name });
+      }
+    }
+  }
+  return results;
+}
+
+// POST /api/admin/events/:id/import-external
+// Body: { external_path: string, recursive?: boolean, map?: { individual?: string, collages?: string } }
+router.post('/events/:id/import-external', adminAuth, async (req, res) => {
+  try {
+    const eventId = parseInt(req.params.id);
+    const { external_path, recursive = true, map = { individual: 'individual', collages: 'collages' } } = req.body || {};
+    if (!external_path) return res.status(400).json({ error: 'external_path is required' });
+
+    // Load event
+    const event = await db('events').where('id', eventId).first();
+    if (!event) return res.status(404).json({ error: 'Event not found' });
+
+    const baseAbs = resolveExternalPath({ external_path }, '');
+    // Collect files
+    const files = recursive ? await walkDir(baseAbs, baseAbs) : (await fs.readdir(baseAbs, { withFileTypes: true }))
+      .filter(e => e.isFile())
+      .map(e => ({ full: path.join(baseAbs, e.name), rel: e.name, name: e.name }))
+      .filter(f => ['.jpg', '.jpeg', '.png', '.webp'].includes(path.extname(f.name).toLowerCase()));
+
+    let imported = 0;
+    let skipped = 0;
+
+    // Insert photos
+    for (const f of files) {
+      // Infer type by subfolder names
+      const segs = f.rel.split(path.sep);
+      let type = 'individual';
+      if (segs[0] === map.collages) type = 'collage';
+      if (segs[0] === map.individual) type = 'individual';
+
+      try {
+        // Check if already exists (by external_relpath)
+        const exists = await db('photos')
+          .where({ event_id: eventId, external_relpath: f.rel })
+          .first();
+        if (exists) { skipped++; continue; }
+
+        const stats = await fs.stat(f.full);
+        const inserted = await db('photos')
+          .insert({
+            event_id: eventId,
+            filename: f.name,
+            // Keep path as a hint for legacy code but not used for resolution in external mode
+            path: path.join(event.slug, f.name),
+            thumbnail_path: null,
+            type,
+            size_bytes: stats.size,
+            source_origin: 'external',
+            external_relpath: f.rel
+          })
+          .returning('id');
+
+        imported += (inserted?.length ? 1 : 0);
+      } catch (e) {
+        skipped++;
+      }
+    }
+
+    // Update event fields
+    await db('events').where('id', eventId).update({ source_mode: 'reference', external_path });
+
+    // Queue thumbnail generation lazily by reading thumbnails via ensure endpoint as needed
+    await logActivity('external_import_completed', { event_id: eventId, imported, skipped, external_path }, eventId, { type: 'admin' });
+
+    res.json({ imported, skipped, thumbnailsQueued: 0 });
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to import external media', details: error.message });
+  }
+});
+
+module.exports = router;
+
@@ -60,8 +60,8 @@ router.put('/events/:eventId/feedback-settings',
        settings: updatedSettings
      }, eventId, {
        type: 'admin',
-        id: req.user.id,
-        name: req.user.username
+        id: req.admin.id,
+        name: req.admin.username
      });
      
      res.json(updatedSettings);
@@ -167,7 +167,7 @@ router.put('/feedback/:feedbackId/:action',
        return res.status(400).json({ error: 'Invalid action' });
      }
      
-      await feedbackService.moderateFeedback(feedbackId, action, req.user.id);
+      await feedbackService.moderateFeedback(feedbackId, action, req.admin.id);
      
      res.json({ success: true });
    } catch (error) {
@@ -184,7 +184,7 @@ router.delete('/feedback/:feedbackId',
    try {
      const { feedbackId } = req.params;
      
-      await feedbackService.deleteFeedback(feedbackId, req.user.id);
+      await feedbackService.deleteFeedback(feedbackId, req.admin.id);
      
      res.json({ success: true });
    } catch (error) {
@@ -606,8 +606,9 @@ router.get('/:eventId/photos/:photoId/download', adminAuth, async (req, res) =>
      return res.status(404).json({ error: 'Photo not found' });
    }
    
-    const storagePath = getStoragePath();
-    const filePath = path.join(storagePath, 'events/active', photo.path);
+    const { resolvePhotoFilePath } = require('../services/photoResolver');
+    const event = await db('events').where('id', eventId).first();
+    const filePath = resolvePhotoFilePath(event, photo);
    
    // Check if file exists
    try {
@@ -684,8 +685,10 @@ router.get('/:eventId/photos', adminAuth, async (req, res) => {
      photos: photos.map(photo => ({
        id: photo.id,
        filename: photo.filename,
-        url: `/admin/events/${eventId}/photo/${photo.id}`,
-        thumbnail_url: photo.thumbnail_path ? `/admin/events/${eventId}/thumbnail/${photo.id}` : 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
+        thumbnail_url: `/admin/photos/${eventId}/thumbnail/${photo.id}`,
        type: photo.type,
        category_id: photo.type,
        category_name: photo.type === 'individual' ? 'Individual Photos' : 'Collages',
@@ -719,8 +722,9 @@ router.get('/:eventId/photo/:photoId', adminAuth, async (req, res) => {
      return res.status(404).json({ error: 'Photo not found' });
    }
    
-    const storagePath = getStoragePath();
-    const filePath = path.join(storagePath, 'events/active', photo.path);
+    const { resolvePhotoFilePath } = require('../services/photoResolver');
+    const event = await db('events').where('id', eventId).first();
+    const filePath = resolvePhotoFilePath(event, photo);
    
    // Check if file exists
    try {
@@ -802,4 +806,4 @@ router.get('/:eventId/debug', adminAuth, async (req, res) => {
  }
 });

-module.exports = router;
+module.exports = router;
@@ -170,7 +170,13 @@ router.put('/branding', adminAuth, async (req, res) => {
      watermark_size,
      favicon_url,
      logo_url,
-      watermark_logo_url
+      watermark_logo_url,
+      logo_size,
+      logo_max_height,
+      logo_position,
+      logo_display_header,
+      logo_display_hero,
+      logo_display_mode
    } = req.body;

    const brandingSettings = {
@@ -184,7 +190,13 @@ router.put('/branding', adminAuth, async (req, res) => {
      watermark_size,
      favicon_url,
      logo_url,
-      watermark_logo_url
+      watermark_logo_url,
+      logo_size,
+      logo_max_height,
+      logo_position,
+      logo_display_header,
+      logo_display_hero,
+      logo_display_mode
    };

    // Handle favicon deletion if empty string or null is provided
@@ -97,12 +97,42 @@ 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;
+    const feedbackService = require('../services/feedbackService');
+    
    // First get all photos
-    const photos = await db('photos')
+    let photos = await db('photos')
      .where('photos.event_id', req.event.id)
      .select('photos.*')
      .orderBy('photos.uploaded_at', 'desc');
    
+    // Apply filtering if requested
+    if (filter && guest_id) {
+      let filters = {};
+      
+      // Parse filter parameter
+      if (filter === 'liked') {
+        filters.liked = true;
+      } else if (filter === 'favorited') {
+        filters.favorited = true;
+      } else if (filter === 'liked,favorited' || filter === 'favorited,liked') {
+        filters.liked = true;
+        filters.favorited = true;
+        filters.operator = 'OR';
+      }
+      
+      // Get filtered photo IDs
+      const filteredPhotoIds = await feedbackService.getFilteredPhotos(
+        req.event.id,
+        guest_id,
+        filters
+      );
+      
+      // Filter photos to only include those with feedback
+      photos = photos.filter(photo => filteredPhotoIds.includes(photo.id));
+    }
+    
    // Then get comment counts separately
    const commentCounts = await db('photo_feedback')
      .whereIn('photo_id', photos.map(p => p.id))
@@ -150,13 +180,6 @@ router.get('/:slug/photos', verifyGalleryAccess, async (req, res) => {
      overlay_protection: req.event.overlay_protection !== false
    };
    
-    console.log('[Gallery Photos] Event data:', {
-      id: req.event.id,
-      slug: req.params.slug,
-      protection_level: req.event.protection_level,
-      calculated_protection: protectionSettings.protection_level,
-      is_basic_or_standard: (protectionSettings.protection_level === 'basic' || protectionSettings.protection_level === 'standard')
-    });

    res.json({
      event: {
@@ -181,8 +204,6 @@ router.get('/:slug/photos', verifyGalleryAccess, async (req, res) => {
          `/api/gallery/${req.params.slug}/photo/${photo.id}` : 
          `/api/secure-images/${req.params.slug}/secure/${photo.id}/{{token}}`;
        
-        console.log(`[Photo ${photo.id}] Protection: ${protectionSettings.protection_level}, Use JWT: ${useJwtUrl}, URL: ${photoUrl}`);
-        
        return {
          id: photo.id,
          filename: photo.filename,
@@ -363,14 +384,6 @@ router.get('/:slug/download-all', verifyGalleryAccess, async (req, res) => {
  }
 });

-// Test route
-router.get('/:slug/photo-test/:photoId', 
-  verifyGalleryAccess,
-  (req, res) => {
-    console.log('TEST ROUTE EXECUTED!');
-    res.json({ message: 'Test route works!', photoId: req.params.photoId });
-  }
-);

 // View single photo (with watermark if enabled)
 router.get('/:slug/photo/:photoId', 
@@ -24,14 +24,15 @@ router.get('/:slug/feedback-settings',
      const settings = await feedbackService.getEventFeedbackSettings(event.id);
      
      // Only send relevant settings to guests
+      // Convert SQLite boolean values (0/1) to proper booleans
      const guestSettings = {
-        feedback_enabled: settings.feedback_enabled,
-        allow_ratings: settings.allow_ratings,
-        allow_likes: settings.allow_likes,
-        allow_comments: settings.allow_comments,
-        allow_favorites: settings.allow_favorites,
-        require_name_email: settings.require_name_email,
-        show_feedback_to_guests: settings.show_feedback_to_guests
+        feedback_enabled: Boolean(settings.feedback_enabled),
+        allow_ratings: Boolean(settings.allow_ratings),
+        allow_likes: Boolean(settings.allow_likes),
+        allow_comments: Boolean(settings.allow_comments),
+        allow_favorites: Boolean(settings.allow_favorites),
+        require_name_email: Boolean(settings.require_name_email),
+        show_feedback_to_guests: Boolean(settings.show_feedback_to_guests)
      };
      
      res.json(guestSettings);
@@ -42,6 +42,12 @@ router.get('/', async (req, res) => {
      branding_watermark_size: settingsObject.branding_watermark_size || 15,
      branding_favicon_url: settingsObject.branding_favicon_url || '',
      branding_logo_url: settingsObject.branding_logo_url || '',
+      branding_logo_size: settingsObject.branding_logo_size || 'medium',
+      branding_logo_max_height: settingsObject.branding_logo_max_height || 48,
+      branding_logo_position: settingsObject.branding_logo_position || 'left',
+      branding_logo_display_header: settingsObject.branding_logo_display_header !== false,
+      branding_logo_display_hero: settingsObject.branding_logo_display_hero !== false,
+      branding_logo_display_mode: settingsObject.branding_logo_display_mode || 'logo_and_text',
      theme_config: settingsObject.theme_config || null,
      default_language: settingsObject.general_default_language || 'en',
      enable_analytics: settingsObject.general_enable_analytics !== false,
@@ -0,0 +1,67 @@
+const fs = require('fs').promises;
+const path = require('path');
+const { safePathJoin } = require('../utils/fileSecurityUtils');
+
+function getExternalMediaRoot() {
+  return process.env.EXTERNAL_MEDIA_ROOT || '/external-media';
+}
+
+function isUnderRoot(p) {
+  const root = path.resolve(getExternalMediaRoot());
+  const resolved = path.resolve(p);
+  return resolved === root || resolved.startsWith(root + path.sep);
+}
+
+async function list(relativePath = '') {
+  const root = getExternalMediaRoot();
+  // Normalize and ensure safe join under root
+  const targetDir = safePathJoin(root, relativePath || '.');
+
+  const entries = [];
+  try {
+    const dirents = await fs.readdir(targetDir, { withFileTypes: true });
+    for (const d of dirents) {
+      // Skip hidden files and directories
+      if (d.name.startsWith('.')) continue;
+      const full = path.join(targetDir, d.name);
+      const stat = await fs.stat(full).catch(() => null);
+      if (!stat) continue;
+
+      if (d.isDirectory()) {
+        entries.push({ name: d.name, type: 'dir' });
+      } else if (d.isFile()) {
+        const ext = path.extname(d.name).toLowerCase();
+        if (['.jpg', '.jpeg', '.png', '.webp'].includes(ext)) {
+          entries.push({ name: d.name, type: 'file', size: stat.size, mtime: stat.mtime });
+        }
+      }
+    }
+  } catch (e) {
+    // Propagate errors for caller to handle (e.g., invalid path)
+    throw e;
+  }
+
+  const rootResolved = path.resolve(root);
+  const currentResolved = path.resolve(targetDir);
+  const canNavigateUp = currentResolved !== rootResolved;
+
+  // Return normalized relative path from root
+  const relFromRoot = path.relative(rootResolved, currentResolved);
+
+  return { path: relFromRoot, entries, canNavigateUp };
+}
+
+function resolveExternalPath(event, relpath) {
+  const root = getExternalMediaRoot();
+  const base = event?.external_path ? path.join(event.external_path) : '';
+  const combined = base ? path.join(base, relpath || '') : (relpath || '');
+  return safePathJoin(root, combined);
+}
+
+module.exports = {
+  getExternalMediaRoot,
+  isUnderRoot,
+  list,
+  resolveExternalPath,
+};
+
@@ -390,6 +390,76 @@ class FeedbackService {
      throw error;
    }
  }
+
+  /**
+   * Get filtered photos based on feedback criteria
+   * @param {number} eventId - Event ID
+   * @param {string} guestIdentifier - Guest identifier
+   * @param {object} filters - Filter criteria
+   * @param {boolean} filters.liked - Include liked photos
+   * @param {boolean} filters.favorited - Include favorited photos
+   * @param {string} filters.operator - 'AND' or 'OR' for multiple filters
+   * @returns {Promise<number[]>} Array of photo IDs that match criteria
+   */
+  async getFilteredPhotos(eventId, guestIdentifier, filters = {}) {
+    try {
+      const { liked, favorited, operator = 'OR' } = filters;
+      
+      // If no filters specified, return all photos
+      if (!liked && !favorited) {
+        const allPhotos = await db('photos')
+          .where('event_id', eventId)
+          .select('id');
+        return allPhotos.map(p => p.id);
+      }
+      
+      // Build query based on filters
+      let query = db('photo_feedback')
+        .where('event_id', eventId)
+        .where('guest_identifier', guestIdentifier)
+        .where('is_hidden', false);
+      
+      // Apply filter logic
+      if (operator === 'AND' && liked && favorited) {
+        // For AND operation, we need photos that have both types of feedback
+        const likedPhotos = await db('photo_feedback')
+          .where('event_id', eventId)
+          .where('guest_identifier', guestIdentifier)
+          .where('feedback_type', 'like')
+          .where('is_hidden', false)
+          .select('photo_id');
+        
+        const favoritedPhotos = await db('photo_feedback')
+          .where('event_id', eventId)
+          .where('guest_identifier', guestIdentifier)
+          .where('feedback_type', 'favorite')
+          .where('is_hidden', false)
+          .select('photo_id');
+        
+        const likedIds = new Set(likedPhotos.map(p => p.photo_id));
+        const favoritedIds = new Set(favoritedPhotos.map(p => p.photo_id));
+        
+        // Return intersection of both sets
+        return Array.from(likedIds).filter(id => favoritedIds.has(id));
+      } else {
+        // OR operation or single filter
+        const feedbackTypes = [];
+        if (liked) feedbackTypes.push('like');
+        if (favorited) feedbackTypes.push('favorite');
+        
+        query.whereIn('feedback_type', feedbackTypes);
+      }
+      
+      const filteredPhotos = await query
+        .distinct('photo_id')
+        .select('photo_id');
+      
+      return filteredPhotos.map(p => p.photo_id);
+    } catch (error) {
+      logger.error('Error getting filtered photos:', error);
+      throw error;
+    }
+  }
 }

 module.exports = new FeedbackService();
@@ -132,7 +132,8 @@ async function generateThumbnail(imagePath, options = {}) {
    
    return path.relative(getStoragePath(), thumbnailPath);
  } catch (error) {
-    logger.error(`Failed to generate thumbnail for ${filename}:`, error.message);
+    const msg = (error && error.message) ? error.message : String(error);
+    logger.error(`Failed to generate thumbnail for ${filename}: ${msg}`);
    
    // Clean up any partially created file
    try {
@@ -171,8 +172,18 @@ async function isThumbnailValid(thumbnailPath) {
 * Regenerate thumbnail if it's broken or missing
 */
 async function ensureThumbnail(photo) {
-  const storagePath = getStoragePath();
-  const originalPath = path.join(storagePath, 'events/active', photo.path);
+  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 thumbnail 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 thumbnail (photo ${photo.id}): ${msg}`);
+    return null;
+  }
  
  // Check if thumbnail exists and is valid
  if (photo.thumbnail_path) {
@@ -0,0 +1,44 @@
+const path = require('path');
+const { resolveExternalPath } = require('./externalMediaService');
+
+const getStoragePath = () => process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');
+
+/**
+ * Resolve absolute photo file path based on event + photo origin
+ * Managed: storage/events/active + photo.path (legacy variants supported)
+ * External reference: EXTERNAL_MEDIA_ROOT + event.external_path + photo.external_relpath
+ */
+function resolvePhotoFilePath(event, photo) {
+  if (!event || !photo) throw new Error('resolvePhotoFilePath requires event and photo');
+
+  const mode = (event.source_mode || photo.source_origin || 'managed');
+  if (mode === 'reference' || photo.source_origin === 'external') {
+    if (!photo.external_relpath) {
+      throw new Error('Missing external_relpath for external photo');
+    }
+    // Normalize duplicate leaf segments (e.g., event.external_path ends with 'individual'
+    // and external_relpath starts with 'individual/') to avoid double segment like
+    // '/external-media/.../individual/individual/file.jpg'
+    let rel = photo.external_relpath;
+    try {
+      const lastSeg = path.basename(event.external_path || '');
+      const firstSeg = rel.split(path.sep)[0];
+      if (lastSeg && firstSeg && lastSeg === firstSeg) {
+        rel = rel.split(path.sep).slice(1).join(path.sep) || '';
+      }
+    } catch (_) {
+      // ignore normalization errors
+    }
+    return resolveExternalPath(event, rel);
+  }
+
+  const storagePath = getStoragePath();
+  if (photo.path && photo.path.startsWith('events/active/')) {
+    return path.join(storagePath, photo.path);
+  }
+  return path.join(storagePath, 'events/active', photo.path || '');
+}
+
+module.exports = {
+  resolvePhotoFilePath,
+};
@@ -227,11 +227,17 @@ async function validateGuestRequirements(settings, guestData) {
  
  const errors = [];
  
-  if (!guestData.guest_name || guestData.guest_name.trim().length === 0) {
+  // Check for name - handle both undefined and empty strings
+  const name = guestData.guest_name;
+  if (!name || (typeof name === 'string' && name.trim().length === 0)) {
    errors.push('Name is required');
  }
  
-  if (!guestData.guest_email || !validator.isEmail(guestData.guest_email)) {
+  // Check for email - handle both undefined and empty strings  
+  const email = guestData.guest_email;
+  if (!email || (typeof email === 'string' && email.trim().length === 0)) {
+    errors.push('Email is required');
+  } else if (email && typeof email === 'string' && !validator.isEmail(email.trim())) {
    errors.push('Valid email is required');
  }
  
@@ -0,0 +1,63 @@
+// Test script for filter functionality
+const axios = require('axios');
+
+const API_URL = 'http://localhost:3001/api';
+const TEST_SLUG = 'wedding-test-feedback-event-2025-09-02';
+const TEST_PASSWORD = 'StrongTiger3610%';
+
+async function testFilterFunctionality() {
+  try {
+    console.log('Testing filter functionality...\n');
+    
+    // 1. Authenticate to get JWT token
+    console.log('1. Authenticating with gallery...');
+    const authResponse = await axios.post(`${API_URL}/auth/gallery-login`, {
+      slug: TEST_SLUG,
+      password: TEST_PASSWORD
+    });
+    
+    const token = authResponse.data.token;
+    console.log('✅ Authentication successful\n');
+    
+    // 2. Test fetching all photos (no filter)
+    console.log('2. Fetching all photos (no filter)...');
+    const allPhotosResponse = await axios.get(`${API_URL}/gallery/${TEST_SLUG}/photos`, {
+      headers: { Authorization: `Bearer ${token}` }
+    });
+    console.log(`✅ Found ${allPhotosResponse.data.photos.length} total photos\n`);
+    
+    // 3. Test fetching with liked filter
+    console.log('3. Testing filter for liked photos...');
+    const guestId = 'test_guest_123';
+    const likedPhotosResponse = await axios.get(`${API_URL}/gallery/${TEST_SLUG}/photos`, {
+      params: { filter: 'liked', guest_id: guestId },
+      headers: { Authorization: `Bearer ${token}` }
+    });
+    console.log(`✅ Found ${likedPhotosResponse.data.photos.length} liked photos for guest ${guestId}\n`);
+    
+    // 4. Test fetching with favorited filter
+    console.log('4. Testing filter for favorited photos...');
+    const favoritedPhotosResponse = await axios.get(`${API_URL}/gallery/${TEST_SLUG}/photos`, {
+      params: { filter: 'favorited', guest_id: guestId },
+      headers: { Authorization: `Bearer ${token}` }
+    });
+    console.log(`✅ Found ${favoritedPhotosResponse.data.photos.length} favorited photos for guest ${guestId}\n`);
+    
+    // 5. Test combined filter
+    console.log('5. Testing combined filter (liked OR favorited)...');
+    const combinedPhotosResponse = await axios.get(`${API_URL}/gallery/${TEST_SLUG}/photos`, {
+      params: { filter: 'liked,favorited', guest_id: guestId },
+      headers: { Authorization: `Bearer ${token}` }
+    });
+    console.log(`✅ Found ${combinedPhotosResponse.data.photos.length} photos that are liked OR favorited\n`);
+    
+    console.log('🎉 All filter tests passed successfully!');
+    
+  } catch (error) {
+    console.error('❌ Test failed:', error.response?.data || error.message);
+    process.exit(1);
+  }
+}
+
+// Run the test
+testFilterFunctionality();
@@ -41,13 +41,13 @@ services:
    env_file: .env
    environment:
      - NODE_ENV=production
-      - DB_HOST=postgres
+      - DB_HOST=${DB_HOST:-postgres}
      - REDIS_HOST=redis
      - PHOTOS_DIR=/app/storage/events
    volumes:
-      - ./storage:/app/storage
-      - ./logs:/app/logs
-      - ./data:/app/data
+      - ${APP_STORAGE}:/app/storage
+      - ${LOGS}:/app/logs
+      - ${APP_DATA}:/app/data
    ports:
      - "${BACKEND_PORT:-3001}:3000"
    networks:
@@ -59,7 +59,8 @@ services:
        condition: service_healthy
    restart: unless-stopped
    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:3000/api/health"]
+      # Backend exposes /health on internal port 3000
+      test: ["CMD", "curl", "-f", "http://localhost:3000/health"]
      interval: 30s
      timeout: 10s
      retries: 3
@@ -68,8 +69,8 @@ services:
    # Use pre-built image from GitHub Container Registry
    image: ghcr.io/the-luap/picpeak/frontend:latest
    container_name: picpeak-frontend
-    environment:
-      - VITE_API_URL=${FRONTEND_API_URL:-http://localhost:3001}
+    # Note: Pre-built frontend uses Nginx to proxy /api to backend:3001.
+    # Prefer keeping API base as '/api' in builds to avoid CORS.
    ports:
      - "${FRONTEND_PORT:-3000}:80"
    networks:
@@ -110,4 +111,4 @@ volumes:

 networks:
  picpeak-network:
-    driver: bridge
+    driver: bridge
@@ -29,6 +29,11 @@ services:
      - ADMIN_URL=${ADMIN_URL:-http://localhost:3001}
      - TZ=${TZ:-UTC}
      - STORAGE_PATH=/app/storage
+      # Optional: run container as matching host user to avoid bind mount permission issues
+      - PUID=${PUID:-1001}
+      - PGID=${PGID:-1001}
+    # Use host-matching user ID/GID so bind-mounted folders are writable
+    user: "${PUID:-1001}:${PGID:-1001}"
    volumes:
      - ./events:/app/events
      - ./data:/app/data
@@ -122,4 +127,4 @@ volumes:

 networks:
  picpeak-network:
-    driver: bridge
+    driver: bridge
@@ -4,6 +4,10 @@ server {
    root /usr/share/nginx/html;
    index index.html;

+    # Allow larger file uploads (up to 100MB)
+    client_max_body_size 100M;
+    client_body_timeout 300s;
+
    # Gzip compression
    gzip on;
    gzip_vary on;
@@ -49,6 +53,10 @@ server {
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
        proxy_read_timeout 86400;
+        
+        # Allow larger uploads for API endpoints
+        client_max_body_size 100M;
+        client_body_timeout 300s;
    }

    # Photo serving proxy
@@ -1,12 +1,12 @@
 {
  "name": "picpeak-frontend",
-  "version": "1.0.105",
+  "version": "1.0.123",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "picpeak-frontend",
-      "version": "1.0.105",
+      "version": "1.0.123",
      "dependencies": {
        "@tanstack/react-query": "^5.0.0",
        "@tiptap/extension-character-count": "^2.26.1",
@@ -1,7 +1,7 @@
 {
  "name": "picpeak-frontend",
  "private": true,
-  "version": "1.0.105",
+  "version": "1.0.123",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -15,6 +15,7 @@ import { parseISO } from 'date-fns';
 import { toast } from 'react-toastify';

 import { Card, Loading, Button } from '../common';
+import { AdminAuthenticatedImage } from './AdminAuthenticatedImage';
 import { feedbackService } from '../../services/feedback.service';
 import { useLocalizedDate } from '../../hooks/useLocalizedDate';

@@ -118,14 +119,28 @@ export const FeedbackModerationPanel: React.FC<FeedbackModerationPanelProps> = (
                          </span>
                          <span className="text-neutral-500">•</span>
                          <span className="text-neutral-500">
-                            {format(parseISO(item.created_at), 'MMM d, h:mm a')}
+                            {format(
+                              typeof item.created_at === 'string' 
+                                ? parseISO(item.created_at) 
+                                : new Date(item.created_at), 
+                              'MMM d, h:mm a'
+                            )}
                          </span>
                        </div>
-                        <p className="mt-1 text-sm text-neutral-700">{item.comment}</p>
-                        {item.photo_filename && (
-                          <p className="mt-1 text-xs text-neutral-500">
-                            {t('feedback.onPhoto', 'On photo')}: {item.photo_filename}
-                          </p>
+                        <p className="mt-1 text-sm text-neutral-700">{item.comment_text || item.comment}</p>
+                        {item.photo_id && (
+                          <div className="mt-2 flex items-center gap-2">
+                            <div className="w-16 h-16 overflow-hidden rounded">
+                              <AdminAuthenticatedImage 
+                                src={`/api/admin/photos/${eventId}/thumbnail/${item.photo_id}`}
+                                alt={item.filename || 'Photo'}
+                                className="w-16 h-16 object-cover rounded"
+                              />
+                            </div>
+                            <p className="text-xs text-neutral-500">
+                              {t('feedback.onPhoto', 'On photo')}: {item.filename || item.photo_filename || `#${item.photo_id}`}
+                            </p>
+                          </div>
                        )}
                      </div>
                    </div>
@@ -202,4 +217,4 @@ export const FeedbackModerationPanel: React.FC<FeedbackModerationPanelProps> = (
  );
 };

-FeedbackModerationPanel.displayName = 'FeedbackModerationPanel';
+FeedbackModerationPanel.displayName = 'FeedbackModerationPanel';
@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import { X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button, Input } from '../common';
+
+interface FeedbackIdentityModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (name: string, email: string) => void;
+  feedbackType: string;
+}
+
+export const FeedbackIdentityModal: React.FC<FeedbackIdentityModalProps> = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  feedbackType
+}) => {
+  const { t } = useTranslation();
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  if (!isOpen) return null;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const newErrors: Record<string, string> = {};
+
+    if (!name.trim()) {
+      newErrors.name = t('feedback.nameRequired', 'Name is required');
+    }
+    if (!email.trim()) {
+      newErrors.email = t('feedback.emailRequired', 'Email is required');
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      newErrors.email = t('feedback.invalidEmail', 'Invalid email address');
+    }
+
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      return;
+    }
+
+    onSubmit(name.trim(), email.trim());
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="fixed inset-0 bg-black bg-opacity-50" onClick={onClose} />
+      <div className="relative bg-white rounded-lg shadow-xl max-w-md w-full p-6">
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 p-1 hover:bg-neutral-100 rounded-lg transition-colors"
+        >
+          <X className="w-5 h-5 text-neutral-600" />
+        </button>
+
+        <h2 className="text-lg font-semibold text-neutral-900 mb-2">
+          {t('feedback.identityRequired', 'Your Information Required')}
+        </h2>
+        <p className="text-sm text-neutral-600 mb-4">
+          {t('feedback.identityReason', 'Please provide your name and email to submit {{type}}.', { type: feedbackType })}
+        </p>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <Input
+            label={t('feedback.yourName', 'Your Name')}
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            error={errors.name}
+            placeholder={t('feedback.namePlaceholder', 'Enter your name')}
+            required
+          />
+          <Input
+            type="email"
+            label={t('feedback.yourEmail', 'Your Email')}
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            error={errors.email}
+            placeholder={t('feedback.emailPlaceholder', 'Enter your email')}
+            required
+          />
+          <div className="flex gap-2 pt-2">
+            <Button
+              type="submit"
+              variant="primary"
+              className="flex-1"
+            >
+              {t('feedback.submitFeedback', 'Submit Feedback')}
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={onClose}
+              className="flex-1"
+            >
+              {t('common.cancel', 'Cancel')}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,122 @@
+import React from 'react';
+import { Heart, Star } from 'lucide-react';
+import { Button } from '../common';
+import { useTranslation } from 'react-i18next';
+
+export type FilterType = 'all' | 'liked' | 'favorited';
+
+interface GalleryFilterProps {
+  currentFilter: FilterType;
+  onFilterChange: (filter: FilterType) => void;
+  feedbackEnabled: boolean;
+  likeCount?: number;
+  favoriteCount?: number;
+  className?: string;
+  isMobile?: boolean;
+}
+
+export const GalleryFilter: React.FC<GalleryFilterProps> = ({
+  currentFilter,
+  onFilterChange,
+  feedbackEnabled,
+  likeCount = 0,
+  favoriteCount = 0,
+  className = '',
+  isMobile = false
+}) => {
+  const { t } = useTranslation();
+
+  if (!feedbackEnabled) {
+    return null;
+  }
+
+  return (
+    <div className={`${className}`}>
+      {/* Mobile-optimized vertical layout */}
+      {isMobile ? (
+        <div className="space-y-2">
+          <div className="text-xs text-neutral-600 font-medium">
+            {t('gallery.feedbackFilter', 'Feedback Filter')}
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button
+              variant={currentFilter === 'all' ? 'primary' : 'outline'}
+              size="sm"
+              onClick={() => onFilterChange('all')}
+              className="text-xs flex-1 min-w-[80px]"
+            >
+              {t('gallery.all', 'All')}
+            </Button>
+            
+            <Button
+              variant={currentFilter === 'liked' ? 'primary' : 'outline'}
+              size="sm"
+              onClick={() => onFilterChange('liked')}
+              className="text-xs flex-1 min-w-[80px] flex items-center justify-center gap-1"
+            >
+              <Heart className="w-3 h-3" />
+              <span>{likeCount > 0 ? likeCount : t('gallery.liked', 'Liked')}</span>
+            </Button>
+            
+            <Button
+              variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
+              size="sm"
+              onClick={() => onFilterChange('favorited')}
+              className="text-xs flex-1 min-w-[80px] flex items-center justify-center gap-1"
+            >
+              <Star className="w-3 h-3" />
+              <span>{favoriteCount > 0 ? favoriteCount : t('gallery.favorites', 'Favorites')}</span>
+            </Button>
+          </div>
+        </div>
+      ) : (
+        /* Desktop layout - inline with categories */
+        <div className="flex items-center gap-3">
+          <span className="text-sm text-neutral-600 font-medium whitespace-nowrap">
+            {t('gallery.feedbackFilter', 'Feedback Filter')}:
+          </span>
+          <div className="flex gap-2">
+            <Button
+              variant={currentFilter === 'all' ? 'primary' : 'outline'}
+              size="sm"
+              onClick={() => onFilterChange('all')}
+              className="text-xs sm:text-sm"
+            >
+              {t('gallery.all', 'All')}
+            </Button>
+            
+            <Button
+              variant={currentFilter === 'liked' ? 'primary' : 'outline'}
+              size="sm"
+              onClick={() => onFilterChange('liked')}
+              className="text-xs sm:text-sm flex items-center gap-1"
+            >
+              <Heart className="w-3 h-3 sm:w-4 sm:h-4" />
+              <span className="hidden sm:inline">{t('gallery.liked', 'Liked')}</span>
+              {likeCount > 0 && (
+                <span className="bg-primary-100 text-primary-700 px-1.5 rounded">
+                  {likeCount}
+                </span>
+              )}
+            </Button>
+            
+            <Button
+              variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
+              size="sm"
+              onClick={() => onFilterChange('favorited')}
+              className="text-xs sm:text-sm flex items-center gap-1"
+            >
+              <Star className="w-3 h-3 sm:w-4 sm:h-4" />
+              <span className="hidden sm:inline">{t('gallery.favorited', 'Favorites')}</span>
+              {favoriteCount > 0 && (
+                <span className="bg-primary-100 text-primary-700 px-1.5 rounded">
+                  {favoriteCount}
+                </span>
+              )}
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
@@ -23,6 +23,12 @@ interface GalleryLayoutProps {
    footer_text?: string;
    favicon_url?: string;
    logo_url?: string;
+    logo_size?: 'small' | 'medium' | 'large' | 'xlarge' | 'custom';
+    logo_max_height?: number;
+    logo_position?: 'left' | 'center' | 'right';
+    logo_display_header?: boolean;
+    logo_display_hero?: boolean;
+    logo_display_mode?: 'logo_only' | 'text_only' | 'logo_and_text';
  };
  showLogout?: boolean;
  onLogout?: () => void;
@@ -56,6 +62,53 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
  const fontFamily = theme.fontFamily || 'Inter, sans-serif';
  const headingFontFamily = theme.headingFontFamily || fontFamily;
  
+  // Calculate logo size classes based on settings
+  const getLogoSizeClass = (context: 'header' | 'hero') => {
+    const size = brandingSettings?.logo_size || 'medium';
+    const maxHeight = brandingSettings?.logo_max_height || 48;
+    
+    if (size === 'custom') {
+      return { maxHeight: `${maxHeight}px`, height: 'auto' };
+    }
+    
+    const sizeMap = {
+      small: context === 'header' ? 'h-6 sm:h-8' : 'h-12 sm:h-14 lg:h-16',
+      medium: context === 'header' ? 'h-8 sm:h-10 lg:h-12' : 'h-16 sm:h-20 lg:h-24',
+      large: context === 'header' ? 'h-10 sm:h-12 lg:h-16' : 'h-20 sm:h-24 lg:h-32',
+      xlarge: context === 'header' ? 'h-12 sm:h-16 lg:h-20' : 'h-24 sm:h-32 lg:h-40'
+    };
+    
+    return sizeMap[size] || sizeMap.medium;
+  };
+  
+  // Determine logo position classes
+  const getLogoPositionClass = () => {
+    const position = brandingSettings?.logo_position || 'left';
+    return {
+      left: 'justify-start',
+      center: 'justify-center',
+      right: 'justify-end'
+    }[position];
+  };
+  
+  // Check if logo should be displayed
+  const shouldShowLogo = (context: 'header' | 'hero') => {
+    const displayMode = brandingSettings?.logo_display_mode || 'logo_and_text';
+    if (displayMode === 'text_only') return false;
+    
+    if (context === 'header') {
+      return brandingSettings?.logo_display_header !== false;
+    } else {
+      return brandingSettings?.logo_display_hero !== false;
+    }
+  };
+  
+  // Check if company name should be displayed
+  const shouldShowCompanyName = () => {
+    const displayMode = brandingSettings?.logo_display_mode || 'logo_and_text';
+    return displayMode !== 'logo_only';
+  };
+  
  return (
    <div className="min-h-screen bg-neutral-50">
      {/* Dynamic Favicon */}
@@ -122,16 +175,31 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
                )}
                
                {/* Logo - Show custom logo or fallback to PicPeak logo */}
-                <div className="flex-shrink-0">
-                  <img 
-                    src={brandingSettings?.logo_url ? 
-                      buildResourceUrl(brandingSettings.logo_url) : 
-                      '/picpeak-logo-transparent.png'
-                    } 
-                    alt={brandingSettings?.company_name || 'PicPeak'}
-                    className="h-8 sm:h-10 lg:h-12 w-auto object-contain"
-                  />
-                </div>
+                {shouldShowLogo('header') && (
+                  <div className={`flex-shrink-0 flex items-center gap-2 ${brandingSettings?.logo_position === 'center' ? 'flex-1' : ''} ${getLogoPositionClass()}`}>
+                    <img 
+                      src={brandingSettings?.logo_url ? 
+                        buildResourceUrl(brandingSettings.logo_url) : 
+                        '/picpeak-logo-transparent.png'
+                      } 
+                      alt={brandingSettings?.company_name || 'PicPeak'}
+                      className={`${typeof getLogoSizeClass('header') === 'string' ? getLogoSizeClass('header') : ''} w-auto object-contain`}
+                      style={typeof getLogoSizeClass('header') === 'object' ? getLogoSizeClass('header') : undefined}
+                    />
+                    {shouldShowCompanyName() && brandingSettings?.company_name && (
+                      <span className="hidden sm:inline text-lg font-semibold text-neutral-900">
+                        {brandingSettings.company_name}
+                      </span>
+                    )}
+                  </div>
+                )}
+                {!shouldShowLogo('header') && shouldShowCompanyName() && brandingSettings?.company_name && (
+                  <div className={`flex-shrink-0 ${brandingSettings?.logo_position === 'center' ? 'flex-1' : ''} ${getLogoPositionClass()}`}>
+                    <span className="text-lg font-semibold text-neutral-900">
+                      {brandingSettings.company_name || 'PicPeak'}
+                    </span>
+                  </div>
+                )}
              </div>
              
              {/* Center - Event info */}
@@ -277,19 +345,32 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
          <div className="container py-12 sm:py-16 lg:py-20 relative z-10">
            <div className="text-center max-w-4xl mx-auto">
              {/* Logo - Show custom logo or fallback to PicPeak logo */}
-              <div className="mb-6">
-                <img 
-                  src={brandingSettings?.logo_url ? 
-                    buildResourceUrl(brandingSettings.logo_url) : 
-                    '/picpeak-logo-transparent.png'
-                  } 
-                  alt={brandingSettings?.company_name || 'PicPeak'}
-                  className="h-16 sm:h-20 lg:h-24 w-auto object-contain mx-auto"
-                  style={{ 
-                    filter: 'brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))'
-                  }}
-                />
-              </div>
+              {shouldShowLogo('hero') && (
+                <div className="mb-6">
+                  <img 
+                    src={brandingSettings?.logo_url ? 
+                      buildResourceUrl(brandingSettings.logo_url) : 
+                      '/picpeak-logo-transparent.png'
+                    } 
+                    alt={brandingSettings?.company_name || 'PicPeak'}
+                    className={`${typeof getLogoSizeClass('hero') === 'string' ? getLogoSizeClass('hero') : ''} w-auto object-contain mx-auto`}
+                    style={typeof getLogoSizeClass('hero') === 'object' ? 
+                      { ...getLogoSizeClass('hero'), filter: 'brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))' } : 
+                      { filter: 'brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))' }
+                    }
+                  />
+                  {shouldShowCompanyName() && brandingSettings?.company_name && (
+                    <div className="mt-3 text-xl sm:text-2xl font-semibold text-white/90" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.3)' }}>
+                      {brandingSettings.company_name}
+                    </div>
+                  )}
+                </div>
+              )}
+              {!shouldShowLogo('hero') && shouldShowCompanyName() && brandingSettings?.company_name && (
+                <div className="mb-6 text-2xl sm:text-3xl font-bold text-white" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.3)' }}>
+                  {brandingSettings.company_name || 'PicPeak'}
+                </div>
+              )}
              
              {/* Event Name */}
              <h1 
@@ -3,6 +3,7 @@ import { X, Download, Filter, SortAsc, Search, Calendar, Type, HardDrive, Check,
 import { Button } from '../common';
 import { PhotoCategory } from '../../types';
 import { useTranslation } from 'react-i18next';
+import { GalleryFilter, type FilterType } from './GalleryFilter';

 interface GallerySidebarProps {
  isOpen: boolean;
@@ -28,6 +29,11 @@ interface GallerySidebarProps {
  galleryLayout?: string;
  allowUploads?: boolean;
  onUploadClick?: () => void;
+  feedbackEnabled?: boolean;
+  filterType?: FilterType;
+  onFilterChange?: (filter: FilterType) => void;
+  likeCount?: number;
+  favoriteCount?: number;
 }

 export const GallerySidebar: React.FC<GallerySidebarProps> = ({
@@ -53,7 +59,12 @@ export const GallerySidebar: React.FC<GallerySidebarProps> = ({
  isMobile,
  galleryLayout,
  allowUploads,
-  onUploadClick
+  onUploadClick,
+  feedbackEnabled = false,
+  filterType = 'all',
+  onFilterChange,
+  likeCount = 0,
+  favoriteCount = 0
 }) => {
  const { t } = useTranslation();
  const sidebarRef = useRef<HTMLDivElement>(null);
@@ -194,13 +205,30 @@ export const GallerySidebar: React.FC<GallerySidebarProps> = ({
                    disabled={isDownloading}
                    className="w-full"
                  >
-                    {t('gallery.downloadSelected')} ({selectedCount})
+                    {t('gallery.downloadSelected', { count: selectedCount })} ({selectedCount})
                  </Button>
                )}
              </div>
            </div>
          )}

+          {/* Feedback Filter Section */}
+          {feedbackEnabled && onFilterChange && (
+            <div className="p-4 border-b border-neutral-200">
+              <GalleryFilter
+                currentFilter={filterType}
+                onFilterChange={(filter) => {
+                  onFilterChange(filter);
+                  if (isMobile) onClose();
+                }}
+                feedbackEnabled={feedbackEnabled}
+                likeCount={likeCount}
+                favoriteCount={favoriteCount}
+                className="w-full"
+              />
+            </div>
+          )}
+
          {/* Categories Section - Hidden for carousel layout */}
          {galleryLayout !== 'carousel' && categories.length > 0 && (
            <div className="p-4 border-b border-neutral-200">
@@ -13,6 +13,7 @@ import { GalleryLayout } from './GalleryLayout';
 import { GallerySidebar } from './GallerySidebar';
 import { PhotoFilterBar } from './PhotoFilterBar';
 import { UserPhotoUpload } from './UserPhotoUpload';
+import type { FilterType } from './GalleryFilter';
 import { analyticsService } from '../../services/analytics.service';
 import { useDevToolsProtection } from '../../hooks/useDevToolsProtection';
 import { GALLERY_THEME_PRESETS } from '../../types/theme.types';
@@ -55,9 +56,22 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
  const { watermarkEnabled } = useWatermarkSettings();
  const [protectionLevel, setProtectionLevel] = useState<'basic' | 'standard' | 'enhanced' | 'maximum'>('standard');
+  const [filterType, setFilterType] = useState<FilterType>('all');
+  const [guestId, setGuestId] = useState<string>('');
  
-  // Fetch photos
-  const { data, isLoading, error, refetch } = useGalleryPhotos(slug);
+  // Generate a unique guest ID for this session
+  useEffect(() => {
+    // Use existing guest ID from localStorage or generate new one
+    let storedGuestId = localStorage.getItem('gallery_guest_id');
+    if (!storedGuestId) {
+      storedGuestId = `guest_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+      localStorage.setItem('gallery_guest_id', storedGuestId);
+    }
+    setGuestId(storedGuestId);
+  }, []);
+  
+  // Fetch photos with filter support
+  const { data, isLoading, error, refetch } = useGalleryPhotos(slug, filterType, guestId);
  
  // Set protection level when data is available
  useEffect(() => {
@@ -122,7 +136,6 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
      try {
        // Use public endpoint to get feedback settings
        const response = await api.get(`/gallery/${slug}/feedback-settings`);
-        console.log('Feedback settings response:', response.data);
        return response.data;
      } catch (error) {
        console.error('Error fetching feedback settings:', error);
@@ -136,7 +149,6 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
  // Update feedbackEnabled when settings change
  useEffect(() => {
    if (feedbackSettings) {
-      console.log('Setting feedbackEnabled to:', feedbackSettings.feedback_enabled);
      setFeedbackEnabled(feedbackSettings.feedback_enabled || false);
    }
  }, [feedbackSettings]);
@@ -424,6 +436,11 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
          galleryLayout={theme.galleryLayout}
          allowUploads={data?.event?.allow_user_uploads || event?.allow_user_uploads || false}
          onUploadClick={() => setShowUploadModal(true)}
+          feedbackEnabled={feedbackEnabled}
+          filterType={filterType}
+          onFilterChange={setFilterType}
+          likeCount={data?.photos?.filter(p => p.like_count > 0).length || 0}
+          favoriteCount={data?.photos?.filter(p => p.favorite_count > 0).length || 0}
        />
      ) : null}

@@ -510,6 +527,12 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
              sortBy={sortBy}
              onSortChange={setSortBy}
              photoCount={filteredPhotos.length}
+              // Feedback filter props
+              feedbackEnabled={feedbackEnabled}
+              currentFilter={filterType}
+              onFilterChange={setFilterType}
+              likeCount={data?.photos?.filter(p => p.like_count > 0).length || 0}
+              favoriteCount={data?.photos?.filter(p => p.favorite_count > 0).length || 0}
            />
          </div>
        ) : null}
@@ -103,8 +103,8 @@ export const PhotoComments: React.FC<PhotoCommentsProps> = ({

    submitCommentMutation.mutate({
      comment_text: commentText.trim(),
-      guest_name: guestName.trim(),
-      guest_email: guestEmail.trim()
+      guest_name: guestName.trim() || undefined,
+      guest_email: guestEmail.trim() || undefined
    });
  };

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { feedbackService } from '../../services/feedback.service';
 import { toast } from 'react-toastify';
+import { FeedbackIdentityModal } from './FeedbackIdentityModal';

 interface PhotoFavoritesProps {
  photoId: string;
@@ -11,6 +12,7 @@ interface PhotoFavoritesProps {
  isFavorited: boolean;
  favoriteCount: number;
  isEnabled: boolean;
+  requireNameEmail?: boolean;
  onFavoriteChange?: (favorited: boolean) => void;
 }

@@ -20,17 +22,22 @@ export const PhotoFavorites: React.FC<PhotoFavoritesProps> = ({
  isFavorited,
  favoriteCount,
  isEnabled,
+  requireNameEmail = false,
  onFavoriteChange
 }) => {
  const { t } = useTranslation();
  const queryClient = useQueryClient();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [animating, setAnimating] = useState(false);
+  const [showIdentityModal, setShowIdentityModal] = useState(false);
+  const [savedIdentity, setSavedIdentity] = useState<{ name: string; email: string } | null>(null);

  const submitFavoriteMutation = useMutation({
-    mutationFn: () => 
+    mutationFn: (data: { guest_name?: string; guest_email?: string } = {}) => 
      feedbackService.submitFeedback(gallerySlug, photoId, {
-        feedback_type: 'favorite'
+        feedback_type: 'favorite',
+        guest_name: data.guest_name || undefined,
+        guest_email: data.guest_email || undefined
      }),
    onMutate: async () => {
      setIsSubmitting(true);
@@ -62,13 +69,25 @@ export const PhotoFavorites: React.FC<PhotoFavoritesProps> = ({

  const handleFavoriteClick = () => {
    if (!isEnabled || isSubmitting) return;
-    submitFavoriteMutation.mutate();
+    
+    if (requireNameEmail && !savedIdentity) {
+      setShowIdentityModal(true);
+    } else {
+      submitFavoriteMutation.mutate(savedIdentity || {});
+    }
+  };
+
+  const handleIdentitySubmit = (name: string, email: string) => {
+    setSavedIdentity({ name, email });
+    setShowIdentityModal(false);
+    submitFavoriteMutation.mutate({ guest_name: name, guest_email: email });
  };

  if (!isEnabled) return null;

  return (
-    <button
+    <>
+      <button
      onClick={handleFavoriteClick}
      disabled={isSubmitting}
      className={`group flex items-center gap-2 px-3 py-2 rounded-lg transition-all ${
@@ -88,6 +107,13 @@ export const PhotoFavorites: React.FC<PhotoFavoritesProps> = ({
      <span className="text-sm font-medium">
        {favoriteCount > 0 ? favoriteCount : ''}
      </span>
-    </button>
+      </button>
+      <FeedbackIdentityModal
+        isOpen={showIdentityModal}
+        onClose={() => setShowIdentityModal(false)}
+        onSubmit={handleIdentitySubmit}
+        feedbackType={t('feedback.favorite', 'favorite')}
+      />
+    </>
  );
 };
@@ -26,7 +26,10 @@ export const PhotoFeedback: React.FC<PhotoFeedbackProps> = ({
  // Fetch feedback settings for the gallery
  const { data: settings, isLoading: settingsLoading } = useQuery({
    queryKey: ['gallery-feedback-settings', gallerySlug],
-    queryFn: () => feedbackService.getGalleryFeedbackSettings(gallerySlug),
+    queryFn: async () => {
+      const data = await feedbackService.getGalleryFeedbackSettings(gallerySlug);
+      return data;
+    },
    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
  });

@@ -104,6 +107,7 @@ export const PhotoFeedback: React.FC<PhotoFeedbackProps> = ({
          averageRating={Number(feedbackData?.summary?.average_rating) || 0}
          totalRatings={Number(feedbackData?.summary?.total_ratings) || 0}
          isEnabled={true}
+          requireNameEmail={settings.require_name_email || false}
          onRatingChange={handleRatingChange}
        />
      )}
@@ -118,6 +122,7 @@ export const PhotoFeedback: React.FC<PhotoFeedbackProps> = ({
              isLiked={isLiked}
              likeCount={likeCount}
              isEnabled={true}
+              requireNameEmail={settings.require_name_email || false}
              onLikeChange={handleLikeChange}
            />
          )}
@@ -128,6 +133,7 @@ export const PhotoFeedback: React.FC<PhotoFeedbackProps> = ({
              isFavorited={isFavorited}
              favoriteCount={favoriteCount}
              isEnabled={true}
+              requireNameEmail={settings.require_name_email || false}
              onFavoriteChange={handleFavoriteChange}
            />
          )}
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import { Search, SortAsc, Grid } from 'lucide-react';
+import { Search, SortAsc, Grid, Heart, Star } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Button, Input } from '../common';
+import type { FilterType } from './GalleryFilter';

 interface PhotoCategory {
  id: number;
@@ -13,6 +14,8 @@ interface PhotoCategory {
 interface Photo {
  id: number;
  category_id?: number;
+  like_count?: number;
+  favorite_count?: number;
 }

 interface PhotoFilterBarProps {
@@ -25,6 +28,12 @@ interface PhotoFilterBarProps {
  sortBy: 'date' | 'name' | 'size' | 'rating';
  onSortChange: (sort: 'date' | 'name' | 'size' | 'rating') => void;
  photoCount: number;
+  // Feedback filter props
+  feedbackEnabled?: boolean;
+  currentFilter?: FilterType;
+  onFilterChange?: (filter: FilterType) => void;
+  likeCount?: number;
+  favoriteCount?: number;
 }

 export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
@@ -37,6 +46,11 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
  sortBy,
  onSortChange,
  photoCount,
+  feedbackEnabled = false,
+  currentFilter = 'all',
+  onFilterChange,
+  likeCount = 0,
+  favoriteCount = 0,
 }) => {
  const { t } = useTranslation();
  const [showSortMenu, setShowSortMenu] = useState(false);
@@ -44,7 +58,7 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
  return (
    <div className="space-y-4">
      {/* Search and Sort */}
-      <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
+      <div className="flex flex-col md:flex-row gap-3 md:gap-4">
        {/* Search Bar */}
        <div className="flex-1">
          <Input
@@ -53,7 +67,7 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
            leftIcon={<Search className="w-5 h-5 text-neutral-400" />}
            value={searchTerm}
            onChange={(e) => onSearchChange(e.target.value)}
-            className="text-sm sm:text-base"
+            className="text-sm md:text-base"
          />
        </div>
        
@@ -64,9 +78,9 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
            size="md"
            leftIcon={<SortAsc className="w-4 h-4" />}
            onClick={() => setShowSortMenu(!showSortMenu)}
-            className="w-full sm:w-auto text-sm sm:text-base"
+            className="w-full md:w-auto text-sm md:text-base"
          >
-            <span className="hidden sm:inline">{t('common.sortBy')} </span>
+            <span className="hidden md:inline">{t('common.sortBy')} </span>
            {sortBy === 'date' ? t('gallery.sortByDate').replace('Sort by ', '') : 
             sortBy === 'name' ? t('gallery.sortByName').replace('Sort by ', '') : 
             sortBy === 'size' ? t('gallery.sortBySize').replace('Sort by ', '') :
@@ -74,7 +88,7 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
          </Button>
          
          {showSortMenu && (
-            <div className="absolute right-0 sm:right-auto sm:left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-neutral-200 py-1 z-10">
+            <div className="absolute right-0 md:right-auto md:left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-neutral-200 py-1 z-10">
              <button
                onClick={() => {
                  onSortChange('date');
@@ -124,18 +138,19 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
        </div>
      </div>

-      {/* Category Filter */}
-      {categories && categories.length > 0 && (
-        <div className="space-y-3">
-          <div className="flex items-start sm:items-center justify-between flex-col sm:flex-row gap-3">
-            <div className="w-full sm:w-auto overflow-x-auto pb-2 sm:pb-0">
+      {/* Category and Feedback Filters */}
+      <div className="space-y-3">
+        {/* Categories Row */}
+        {categories && categories.length > 0 && (
+          <div className="flex items-start lg:items-center justify-between flex-col lg:flex-row gap-3">
+            <div className="w-full overflow-x-auto pb-2 lg:pb-0">
              <div className="flex items-center gap-2 min-w-max">
                <Button
                  variant={selectedCategoryId === null ? 'primary' : 'outline'}
                  size="sm"
                  onClick={() => onCategoryChange(null)}
-                  leftIcon={<Grid className="w-3 h-3 sm:w-4 sm:h-4" />}
-                  className="text-xs sm:text-sm whitespace-nowrap"
+                  leftIcon={<Grid className="w-3 h-3 md:w-4 md:h-4" />}
+                  className="text-xs md:text-sm whitespace-nowrap flex-shrink-0"
                >
                  {t('gallery.allPhotos')} ({photos.length})
                </Button>
@@ -149,21 +164,92 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
                      variant={selectedCategoryId === category.id ? 'primary' : 'outline'}
                      size="sm"
                      onClick={() => onCategoryChange(category.id)}
-                      className="text-xs sm:text-sm whitespace-nowrap"
+                      className="text-xs md:text-sm whitespace-nowrap flex-shrink-0"
                    >
                      {category.name} ({categoryPhotoCount})
                    </Button>
                  );
                })}
+                
+                {/* Feedback Filter - Inline on desktop, below on mobile/tablet */}
+                {feedbackEnabled && onFilterChange && (
+                  <>
+                    {/* Desktop: Divider and inline filter - only on larger screens */}
+                    <div className="hidden lg:flex items-center gap-2 ml-2 pl-2 border-l border-neutral-300">
+                      <span className="text-sm text-neutral-600 whitespace-nowrap">{t('gallery.feedbackFilter')}:</span>
+                      <Button
+                        variant={currentFilter === 'all' ? 'primary' : 'outline'}
+                        size="sm"
+                        onClick={() => onFilterChange('all')}
+                        className="text-xs sm:text-sm"
+                      >
+                        {t('gallery.all')}
+                      </Button>
+                      <Button
+                        variant={currentFilter === 'liked' ? 'primary' : 'outline'}
+                        size="sm"
+                        onClick={() => onFilterChange('liked')}
+                        className="text-xs sm:text-sm flex items-center gap-1"
+                      >
+                        <Heart className="w-3 h-3" />
+                        {likeCount > 0 && <span>{likeCount}</span>}
+                      </Button>
+                      <Button
+                        variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
+                        size="sm"
+                        onClick={() => onFilterChange('favorited')}
+                        className="text-xs sm:text-sm flex items-center gap-1"
+                      >
+                        <Star className="w-3 h-3" />
+                        {favoriteCount > 0 && <span>{favoriteCount}</span>}
+                      </Button>
+                    </div>
+                  </>
+                )}
              </div>
            </div>

-            <p className="text-xs sm:text-sm text-neutral-600 flex-shrink-0">
+            <p className="text-xs md:text-sm text-neutral-600 flex-shrink-0 ml-auto">
              {photoCount} {photoCount === 1 ? t('common.photo') : t('common.photos')}
            </p>
          </div>
-        </div>
-      )}
+        )}
+        
+        {/* Mobile/Tablet: Feedback Filter below categories */}
+        {feedbackEnabled && onFilterChange && (
+          <div className="flex lg:hidden items-center gap-2">
+            <span className="text-xs text-neutral-600">{t('gallery.feedbackFilter')}:</span>
+            <div className="flex gap-1 flex-1">
+              <Button
+                variant={currentFilter === 'all' ? 'primary' : 'outline'}
+                size="sm"
+                onClick={() => onFilterChange('all')}
+                className="text-xs flex-1"
+              >
+                {t('gallery.all')}
+              </Button>
+              <Button
+                variant={currentFilter === 'liked' ? 'primary' : 'outline'}
+                size="sm"
+                onClick={() => onFilterChange('liked')}
+                className="text-xs flex-1 flex items-center justify-center gap-1"
+              >
+                <Heart className="w-3 h-3" />
+                {likeCount > 0 && <span>{likeCount}</span>}
+              </Button>
+              <Button
+                variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
+                size="sm"
+                onClick={() => onFilterChange('favorited')}
+                className="text-xs flex-1 flex items-center justify-center gap-1"
+              >
+                <Star className="w-3 h-3" />
+                {favoriteCount > 0 && <span>{favoriteCount}</span>}
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
    </div>
  );
 };
@@ -35,9 +35,6 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
  const [touchDistance, setTouchDistance] = useState<number | null>(null);
  const [showFeedback, setShowFeedback] = useState(false);
  
-  // Debug logging
-  console.log('PhotoLightbox feedbackEnabled:', feedbackEnabled);
-  
  const downloadPhotoMutation = useDownloadPhoto();
  const currentPhoto = photos[currentIndex];
  
@@ -288,7 +285,6 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
            {feedbackEnabled && (
              <button
                onClick={() => {
-                  console.log('Feedback button clicked, current feedbackEnabled:', feedbackEnabled);
                  setShowFeedback(!showFeedback);
                }}
                className="relative p-2 bg-white/10 hover:bg-white/20 rounded-full transition-colors"
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { feedbackService } from '../../services/feedback.service';
 import { toast } from 'react-toastify';
+import { FeedbackIdentityModal } from './FeedbackIdentityModal';

 interface PhotoLikesProps {
  photoId: string;
@@ -11,6 +12,7 @@ interface PhotoLikesProps {
  isLiked: boolean;
  likeCount: number;
  isEnabled: boolean;
+  requireNameEmail?: boolean;
  onLikeChange?: (liked: boolean) => void;
 }

@@ -20,17 +22,22 @@ export const PhotoLikes: React.FC<PhotoLikesProps> = ({
  isLiked,
  likeCount,
  isEnabled,
+  requireNameEmail = false,
  onLikeChange
 }) => {
  const { t } = useTranslation();
  const queryClient = useQueryClient();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [animating, setAnimating] = useState(false);
+  const [showIdentityModal, setShowIdentityModal] = useState(false);
+  const [savedIdentity, setSavedIdentity] = useState<{ name: string; email: string } | null>(null);

  const submitLikeMutation = useMutation({
-    mutationFn: () => 
+    mutationFn: (data: { guest_name?: string; guest_email?: string } = {}) => 
      feedbackService.submitFeedback(gallerySlug, photoId, {
-        feedback_type: 'like'
+        feedback_type: 'like',
+        guest_name: data.guest_name || undefined,
+        guest_email: data.guest_email || undefined
      }),
    onMutate: async () => {
      setIsSubmitting(true);
@@ -62,13 +69,25 @@ export const PhotoLikes: React.FC<PhotoLikesProps> = ({

  const handleLikeClick = () => {
    if (!isEnabled || isSubmitting) return;
-    submitLikeMutation.mutate();
+    
+    if (requireNameEmail && !savedIdentity) {
+      setShowIdentityModal(true);
+    } else {
+      submitLikeMutation.mutate(savedIdentity || {});
+    }
+  };
+
+  const handleIdentitySubmit = (name: string, email: string) => {
+    setSavedIdentity({ name, email });
+    setShowIdentityModal(false);
+    submitLikeMutation.mutate({ guest_name: name, guest_email: email });
  };

  if (!isEnabled) return null;

  return (
-    <button
+    <>
+      <button
      onClick={handleLikeClick}
      disabled={isSubmitting}
      className={`group flex items-center gap-2 px-3 py-2 rounded-lg transition-all ${
@@ -88,6 +107,13 @@ export const PhotoLikes: React.FC<PhotoLikesProps> = ({
      <span className="text-sm font-medium">
        {likeCount > 0 ? likeCount : ''}
      </span>
-    </button>
+      </button>
+      <FeedbackIdentityModal
+        isOpen={showIdentityModal}
+        onClose={() => setShowIdentityModal(false)}
+        onSubmit={handleIdentitySubmit}
+        feedbackType={t('feedback.like', 'like')}
+      />
+    </>
  );
 };
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { feedbackService } from '../../services/feedback.service';
 import { toast } from 'react-toastify';
+import { FeedbackIdentityModal } from './FeedbackIdentityModal';

 interface PhotoRatingProps {
  photoId: string;
@@ -12,6 +13,7 @@ interface PhotoRatingProps {
  averageRating?: number;
  totalRatings?: number;
  isEnabled: boolean;
+  requireNameEmail?: boolean;
  onRatingChange?: (rating: number) => void;
 }

@@ -22,6 +24,7 @@ export const PhotoRating: React.FC<PhotoRatingProps> = ({
  averageRating = 0,
  totalRatings = 0,
  isEnabled,
+  requireNameEmail = false,
  onRatingChange
 }) => {
  // Ensure averageRating is a valid number
@@ -30,18 +33,23 @@ export const PhotoRating: React.FC<PhotoRatingProps> = ({
  const queryClient = useQueryClient();
  const [hoveredRating, setHoveredRating] = useState(0);
  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showIdentityModal, setShowIdentityModal] = useState(false);
+  const [pendingRating, setPendingRating] = useState(0);
+  const [savedIdentity, setSavedIdentity] = useState<{ name: string; email: string } | null>(null);

  const submitRatingMutation = useMutation({
-    mutationFn: (rating: number) => 
+    mutationFn: (data: { rating: number; guest_name?: string; guest_email?: string }) => 
      feedbackService.submitFeedback(gallerySlug, photoId, {
        feedback_type: 'rating',
-        rating
+        rating: data.rating,
+        guest_name: data.guest_name || undefined,
+        guest_email: data.guest_email || undefined
      }),
-    onMutate: async (rating) => {
+    onMutate: async (data) => {
      setIsSubmitting(true);
      // Optimistic update
      if (onRatingChange) {
-        onRatingChange(rating);
+        onRatingChange(data.rating);
      }
    },
    onSuccess: () => {
@@ -69,47 +77,75 @@ export const PhotoRating: React.FC<PhotoRatingProps> = ({
    
    // If clicking the same rating, remove it
    const newRating = rating === currentRating ? 0 : rating;
-    submitRatingMutation.mutate(newRating);
+    
+    if (requireNameEmail && !savedIdentity) {
+      setPendingRating(newRating);
+      setShowIdentityModal(true);
+    } else {
+      submitRatingMutation.mutate({ 
+        rating: newRating, 
+        guest_name: savedIdentity?.name,
+        guest_email: savedIdentity?.email
+      });
+    }
+  };
+
+  const handleIdentitySubmit = (name: string, email: string) => {
+    setSavedIdentity({ name, email });
+    setShowIdentityModal(false);
+    submitRatingMutation.mutate({ 
+      rating: pendingRating,
+      guest_name: name,
+      guest_email: email
+    });
  };

  if (!isEnabled) return null;

  return (
-    <div className="flex flex-col items-center gap-2">
-      {/* Star Rating Input */}
-      <div className="flex items-center gap-1">
-        {[1, 2, 3, 4, 5].map((star) => (
-          <button
-            key={star}
-            onClick={() => handleRatingClick(star)}
-            onMouseEnter={() => setHoveredRating(star)}
-            onMouseLeave={() => setHoveredRating(0)}
-            disabled={isSubmitting}
-            className={`p-1 transition-all ${
-              isSubmitting ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:scale-110'
-            }`}
-            aria-label={t('feedback.rateStar', 'Rate {{count}} stars', { count: star })}
-          >
-            <Star
-              className={`w-6 h-6 transition-colors ${
-                star <= (hoveredRating || currentRating)
-                  ? 'fill-yellow-500 text-yellow-500'
-                  : 'text-neutral-300 hover:text-yellow-400'
+    <>
+      <div className="flex flex-col items-center gap-2">
+        {/* Star Rating Input */}
+        <div className="flex items-center gap-1">
+          {[1, 2, 3, 4, 5].map((star) => (
+            <button
+              key={star}
+              onClick={() => handleRatingClick(star)}
+              onMouseEnter={() => setHoveredRating(star)}
+              onMouseLeave={() => setHoveredRating(0)}
+              disabled={isSubmitting}
+              className={`p-1 transition-all ${
+                isSubmitting ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:scale-110'
              }`}
-            />
-          </button>
-        ))}
-      </div>
-
-      {/* Average Rating Display */}
-      {totalRatings > 0 && (
-        <div className="text-sm text-neutral-600">
-          <span className="font-medium">{safeAverageRating.toFixed(1)}</span>
-          <span className="text-neutral-400 ml-1">
-            ({t('feedback.ratingsCount', '{{count}} ratings', { count: totalRatings })})
-          </span>
+              aria-label={t('feedback.rateStar', 'Rate {{count}} stars', { count: star })}
+            >
+              <Star
+                className={`w-6 h-6 transition-colors ${
+                  star <= (hoveredRating || currentRating)
+                    ? 'fill-yellow-500 text-yellow-500'
+                    : 'text-neutral-300 hover:text-yellow-400'
+                }`}
+              />
+            </button>
+          ))}
        </div>
-      )}
-    </div>
+
+        {/* Average Rating Display */}
+        {totalRatings > 0 && (
+          <div className="text-sm text-neutral-600">
+            <span className="font-medium">{safeAverageRating.toFixed(1)}</span>
+            <span className="text-neutral-400 ml-1">
+              ({t('feedback.ratingsCount', '{{count}} ratings', { count: totalRatings })})
+            </span>
+          </div>
+        )}
+      </div>
+      <FeedbackIdentityModal
+        isOpen={showIdentityModal}
+        onClose={() => setShowIdentityModal(false)}
+        onSubmit={handleIdentitySubmit}
+        feedbackType={t('feedback.rating', 'rating')}
+      />
+    </>
  );
 };
@@ -48,10 +48,25 @@ api.interceptors.request.use(
      const galleryMatch = config.url?.match(/gallery\/([^\/]+)/);
      
      if (galleryMatch && galleryMatch[1]) {
-        const gallerySlug = galleryMatch[1];
+        const galleryIdOrSlug = galleryMatch[1];
        // Remove any query parameters from the slug
-        const cleanSlug = gallerySlug.split('?')[0];
-        const token = localStorage.getItem(`gallery_token_${cleanSlug}`);
+        const cleanIdOrSlug = galleryIdOrSlug.split('?')[0];
+        
+        // Check if it's a numeric ID (for upload endpoints)
+        let token = null;
+        if (/^\d+$/.test(cleanIdOrSlug)) {
+          // It's an event ID - try to find the token from current page slug
+          const pathParts = window.location.pathname.split('/');
+          if (pathParts[1] === 'gallery' && pathParts[2]) {
+            const gallerySlug = pathParts[2];
+            const cleanSlug = gallerySlug.split('?')[0];
+            token = localStorage.getItem(`gallery_token_${cleanSlug}`);
+          }
+        } else {
+          // It's a slug - use it directly
+          token = localStorage.getItem(`gallery_token_${cleanIdOrSlug}`);
+        }
+        
        if (token) {
          if (!config.headers) {
            config.headers = {};
@@ -11,10 +11,10 @@ export const useGalleryInfo = (slug: string, token?: string) => {
  });
 };

-export const useGalleryPhotos = (slug: string, enabled: boolean = true) => {
+export const useGalleryPhotos = (slug: string, filter?: 'liked' | 'favorited' | 'all', guestId?: string, enabled: boolean = true) => {
  return useQuery({
-    queryKey: ['gallery-photos', slug],
-    queryFn: () => galleryService.getGalleryPhotos(slug),
+    queryKey: ['gallery-photos', slug, filter, guestId],
+    queryFn: () => galleryService.getGalleryPhotos(slug, filter, guestId),
    enabled,
    retry: 1,
    staleTime: 5 * 60 * 1000, // 5 minutes
@@ -36,6 +36,11 @@
    "customize": "Anpassen",
    "hide": "Ausblenden",
    "unknown": "Unbekannt",
+    "notSet": "Nicht festgelegt",
+    "of": "von",
+    "up": "Nach oben",
+    "select": "Auswählen",
+    "selected": "Ausgewählt",
    "chunk": "Teil"
  },
  "upload": {
@@ -50,6 +55,10 @@
    "uploadFailed": "Upload fehlgeschlagen",
    "someFilesFailed": "Einige Dateien konnten nicht hochgeladen werden",
    "uploadPhotos": "Fotos hochladen",
+    "importExternal": "Aus externem Ordner importieren",
+    "externalImportInfo": "Alle Bilder aus dem ausgewählten Ordner werden importiert.",
+    "selectExternalFolder": "Externen Ordner unter /external-media auswählen",
+    "importFromSelectedFolder": "Ausgewählten Ordner importieren",
    "maxFilesReached": "Maximal 500 Dateien erlaubt",
    "someFilesSkipped": "Einige Dateien wurden übersprungen (500 Dateien Limit)",
    "tooManyFiles": "Maximal 500 Dateien können gleichzeitig hochgeladen werden",
@@ -66,6 +75,342 @@
    "backup": "Backup & Wiederherstellung",
    "cmsPages": "CMS-Seiten"
  },
+  "backup": {
+    "external": {
+      "warning": {
+        "title": "Externe Medien ausgeschlossen",
+        "body": "Diese Installation referenziert Fotos aus /external-media. Diese Originale sind von Backups ausgeschlossen. Thumbnails und Datenbank werden weiterhin gesichert."
+      }
+    },
+    "title": "Backup-Verwaltung",
+    "subtitle": "System-Backups verwalten, automatische Backups konfigurieren und aus früheren Backups wiederherstellen.",
+    "tabs": {
+      "dashboard": "Dashboard",
+      "configuration": "Konfiguration",
+      "history": "Backup-Verlauf",
+      "restore": "Wiederherstellen"
+    },
+    "status": {
+      "inProgress": "Backup wird ausgeführt...",
+      "lastBackup": "Letztes Backup",
+      "noBackups": "Keine Backups gefunden",
+      "nextBackup": "Nächstes Backup",
+      "notScheduled": "Nicht geplant",
+      "enabled": "Aktiviert",
+      "disabled": "Deaktiviert"
+    },
+    "actions": {
+      "runBackupNow": "Backup jetzt starten",
+      "starting": "Starte...",
+      "running": "Läuft...",
+      "testConnection": "Verbindung testen",
+      "save": "Konfiguration speichern",
+      "delete": "Löschen",
+      "view": "Details anzeigen",
+      "download": "Herunterladen",
+      "refresh": "Aktualisieren"
+    },
+    "dashboard": {
+      "backupHealth": "Backup-Gesundheit",
+      "health": {
+        "title": "Backup-Gesundheit"
+      },
+      "healthMessages": {
+        "noBackups": "Keine Backups gefunden",
+        "lastBackupFailed": "Letztes Backup fehlgeschlagen",
+        "upToDate": "Backup ist aktuell",
+        "recent": "Backup ist kürzlich",
+        "gettingOld": "Backup wird alt",
+        "outdated": "Backup ist veraltet"
+      },
+      "stats": {
+        "totalBackups": "Gesamt-Backups",
+        "backupSize": "Backup-Größe",
+        "lastDuration": "Letzte Dauer",
+        "backupStatus": "Backup-Status",
+        "last": "Letztes",
+        "files": "Dateien",
+        "minutes": "{{count}}m",
+        "active": "Aktiv",
+        "inactive": "Inaktiv",
+        "noBackupsYet": "Noch keine Backups"
+      },
+      "recentActivity": {
+        "title": "Letzte Backup-Aktivitäten"
+      },
+      "notConfigured": {
+        "title": "Backup nicht konfiguriert",
+        "message": "Bitte konfigurieren Sie die Backup-Einstellungen im Tab \"Konfiguration\", bevor Sie Backups ausführen."
+      },
+      "coverage": {
+        "title": "Backup-Abdeckung",
+        "database": "Datenbank",
+        "photos": "Fotos",
+        "archives": "Archive",
+        "systemFiles": "Systemdateien",
+        "included": "Enthalten",
+        "excluded": "Ausgeschlossen",
+        "optional": "Optional"
+      },
+      "storageDestination": "Speicherziel",
+      "nextScheduledBackup": "Nächstes geplantes Backup",
+      "backupType": "{{type}}-Backup",
+      "noDestinationSet": "Kein Ziel gesetzt"
+    },
+    "configuration": {
+      "enableBackup": "Automatische Backups aktivieren",
+      "enableBackupHelp": "Backups automatisch gemäß Zeitplan erstellen",
+      "destinationType": "Backup-Ziel",
+      "destinationTypes": {
+        "local": {
+          "name": "Lokaler Speicher",
+          "description": "Backups auf dem lokalen Dateisystem speichern"
+        },
+        "rsync": {
+          "name": "Remote-Server (Rsync)",
+          "description": "Backups per SSH/Rsync auf einen entfernten Server synchronisieren"
+        },
+        "s3": {
+          "name": "S3-kompatibler Speicher",
+          "description": "Backups in Amazon S3 oder kompatiblen Objektspeicher ablegen"
+        }
+      },
+      "fields": {
+        "destinationPath": "Zielpfad",
+        "destinationPathHelp": "Lokaler Verzeichnispfad für Backups",
+        "destinationPathPlaceholder": "/pfad/zum/backup/verzeichnis",
+        "rsyncHost": "Remote Host",
+        "rsyncHostPlaceholder": "backup.example.com",
+        "rsyncUser": "Benutzer",
+        "rsyncUserPlaceholder": "backupuser",
+        "rsyncPath": "Remote-Pfad",
+        "rsyncPathPlaceholder": "/pfad/auf/server",
+        "rsyncSshKey": "SSH-Schlüssel",
+        "rsyncSshKeyPlaceholder": "Privater SSH-Schlüssel (PEM)",
+        "rsyncSshKeyHelp": "Fügen Sie den privaten SSH-Schlüssel im PEM-Format ein.",
+        "s3Endpoint": "S3-Endpunkt-URL",
+        "s3EndpointHelp": "z. B. https://s3.amazonaws.com oder Ihr MinIO-Endpunkt",
+        "s3Bucket": "Bucket-Name",
+        "s3Region": "Region",
+        "s3AccessKey": "Access Key ID",
+        "s3SecretKey": "Secret Access Key"
+      },
+      "schedule": {
+        "title": "Zeitplan",
+        "scheduleType": "Zeitplantyp",
+        "customCron": "Eigener Cron-Ausdruck",
+        "customCronHelp": "Cron-Ausdruck für benutzerdefinierten Zeitplan",
+        "retention": "Aufbewahrung (Tage)",
+        "retentionHelp": "Anzahl der Tage, nach denen alte Backups automatisch gelöscht werden"
+      },
+      "whatToBackup": {
+        "title": "Was soll gesichert werden",
+        "database": "Datenbank",
+        "databaseHelp": "Datenbank (Einstellungen, Events, Benutzer)",
+        "photos": "Fotos",
+        "photosHelp": "Aktive Galeriefotos sichern",
+        "archives": "Archive",
+        "archivesHelp": "Archivierte ZIP-Dateien",
+        "thumbnails": "Thumbnails",
+        "thumbnailsHelp": "Generierte Vorschaubilder"
+      },
+      "advancedOptions": {
+        "title": "Erweiterte Optionen",
+        "compression": "Kompression",
+        "compressionHelp": "Backups komprimieren, um Speicherplatz zu sparen",
+        "encryption": "Verschlüsselung",
+        "encryptionHelp": "Backups mit einer Passphrase verschlüsseln",
+        "encryptionPassphrase": "Verschlüsselungs-Passphrase",
+        "encryptionPassphraseHelp": "Passphrase zum Verschlüsseln/Entschlüsseln der Backups"
+      },
+      "savingSettings": "Einstellungen werden gespeichert...",
+      "saveSettings": "Einstellungen speichern"
+    },
+    "history": {
+      "columns": {
+        "status": "Status",
+        "dateTime": "Datum & Uhrzeit",
+        "type": "Typ",
+        "size": "Größe",
+        "duration": "Dauer",
+        "actions": "Aktionen"
+      },
+      "details": "Details",
+      "statistics": "Statistiken",
+      "errors": "Fehler",
+      "backupDetails": {
+        "backupId": "Backup-ID",
+        "startTime": "Startzeit",
+        "endTime": "Endzeit",
+        "destination": "Ziel",
+        "filesProcessed": "Verarbeitete Dateien",
+        "totalSize": "Gesamtgröße",
+        "compressionRatio": "Kompressionsrate",
+        "errorLog": "Fehlerprotokoll",
+        "noErrors": "Keine Fehler aufgetreten"
+      },
+      "pagination": {
+        "showing": "Zeige {{from}}–{{to}} von {{total}} Backups",
+        "previous": "Zurück",
+        "next": "Weiter"
+      },
+      "filter": {
+        "allStatus": "Alle Status",
+        "completed": "Abgeschlossen",
+        "failed": "Fehlgeschlagen",
+        "running": "Läuft",
+        "partial": "Teilweise"
+      },
+      "noBackupsFound": "Keine Backups gefunden",
+      "backupsWillAppear": "Backups erscheinen hier, sobald sie erstellt wurden",
+      "messages": {
+        "deleteSuccess": "Backup erfolgreich gelöscht"
+      }
+    },
+    "restore": {
+      "steps": {
+        "selectSource": "Quelle auswählen",
+        "chooseBackup": "Backup wählen",
+        "restoreOptions": "Wiederherstellungsoptionen",
+        "reviewConfirm": "Prüfen & Bestätigen",
+        "progress": "Fortschritt"
+      },
+      "source": {
+        "title": "Backup-Quelle auswählen",
+        "subtitle": "Wählen Sie, woher das Backup wiederhergestellt werden soll",
+        "local": {
+          "name": "Lokales Backup",
+          "description": "Vom lokalen Dateisystem wiederherstellen"
+        },
+        "s3": {
+          "name": "S3-Speicher",
+          "description": "Aus S3-Bucket wiederherstellen"
+        },
+        "upload": {
+          "name": "Backup hochladen",
+          "description": "Eine Backup-Datei hochladen",
+          "comingSoon": "Upload-Funktion folgt in Kürze"
+        },
+        "configuration": {
+          "s3": "S3-Konfiguration",
+          "endpoint": "S3-Endpunkt-URL",
+          "bucket": "Bucket-Name",
+          "accessKey": "Access Key ID",
+          "secretKey": "Secret Access Key"
+        }
+      },
+      "backup": {
+        "title": "Backup zum Wiederherstellen wählen",
+        "subtitle": "Aus verfügbaren Backups auswählen",
+        "noBackupsFound": "Keine Backups in der gewählten Quelle gefunden",
+        "encrypted": "Verschlüsseltes Backup",
+        "encryptedMessage": "Zum Wiederherstellen dieses Backups wird die Verschlüsselungs-Passphrase benötigt.",
+        "enterPassphrase": "Verschlüsselungs-Passphrase eingeben",
+        "at": "um"
+      },
+      "restoreTypes": {
+        "full": {
+          "name": "Vollständige Wiederherstellung",
+          "description": "Alles wiederherstellen (Datenbank, Fotos und Archive)",
+          "warning": "Dies ersetzt alle aktuellen Daten"
+        },
+        "database": {
+          "name": "Nur Datenbank",
+          "description": "Nur die Datenbank wiederherstellen (Einstellungen, Events, Benutzer)",
+          "warning": "Aktuelle Datenbank wird ersetzt"
+        },
+        "files": {
+          "name": "Nur Dateien",
+          "description": "Nur Fotos und Archive wiederherstellen",
+          "warning": "Vorhandene Dateien können überschrieben werden"
+        },
+        "selective": {
+          "name": "Selektive Wiederherstellung",
+          "description": "Bestimmte Elemente zur Wiederherstellung auswählen",
+          "warning": "Es werden nur ausgewählte Elemente wiederhergestellt"
+        }
+      },
+      "options": {
+        "title": "Wiederherstellungsoptionen",
+        "subtitle": "Auswählen, was wiederhergestellt werden soll",
+        "additionalOptions": {
+          "title": "Zusätzliche Optionen",
+          "skipPreBackup": "Vorab-Backup überspringen",
+          "skipPreBackupHelp": "Standardmäßig wird vor der Wiederherstellung ein Backup erstellt. Aktivieren, um dies zu überspringen.",
+          "force": "Wiederherstellung erzwingen",
+          "forceHelp": "Sicherheitsprüfungen und Warnungen überschreiben (mit Vorsicht verwenden)"
+        }
+      },
+      "confirmation": {
+        "title": "Prüfen & Bestätigen",
+        "subtitle": "Bitte prüfen Sie Ihre Wiederherstellungskonfiguration",
+        "validation": {
+          "passed": "Validierung bestanden",
+          "failed": "Validierung fehlgeschlagen",
+          "checking": "Wiederherstellungskonfiguration wird geprüft..."
+        },
+        "spaceCheck": {
+          "title": "Speicherplatz",
+          "required": "Erforderlich",
+          "available": "Verfügbar",
+          "insufficient": "Nicht genügend Speicherplatz"
+        },
+        "summary": {
+          "title": "Zusammenfassung",
+          "source": "Quelle",
+          "backupDate": "Backup-Datum",
+          "restoreType": "Art der Wiederherstellung",
+          "preBackup": "Vorab-Backup",
+          "enabled": "Aktiviert",
+          "skipped": "Übersprungen"
+        },
+        "warning": {
+          "title": "Wichtiger Hinweis",
+          "message": "Diese Wiederherstellung ersetzt bestehende Daten. Stellen Sie sicher, dass Sie ein aktuelles Backup haben. Dieser Vorgang kann nicht rückgängig gemacht werden."
+        }
+      },
+      "progress": {
+        "title": "Fortschritt der Wiederherstellung",
+        "inProgress": "Wiederherstellung läuft...",
+        "completed": "Wiederherstellung abgeschlossen",
+        "overallProgress": "Gesamtfortschritt",
+        "current": "Aktuell",
+        "statusDetails": "Statusdetails",
+        "restoreLogs": "Wiederherstellungs-Logs",
+        "steps": {
+          "completed": "Abgeschlossen",
+          "running": "Läuft",
+          "failed": "Fehlgeschlagen",
+          "pending": "Ausstehend"
+        },
+        "success": {
+          "title": "Wiederherstellung erfolgreich abgeschlossen",
+          "message": "Ihre Daten wurden wiederhergestellt. Bitte prüfen Sie, ob alles korrekt funktioniert."
+        }
+      },
+      "actions": {
+        "back": "Zurück",
+        "next": "Weiter",
+        "startRestore": "Wiederherstellung starten",
+        "starting": "Starte...",
+        "validating": "Validiere...",
+        "startNewRestore": "Neue Wiederherstellung starten"
+      },
+      "messages": {
+        "restoreStarted": "Wiederherstellung erfolgreich gestartet"
+      }
+    },
+    "messages": {
+      "backupStarted": "Backup erfolgreich gestartet",
+      "backupFailed": "Backup konnte nicht gestartet werden",
+      "configUpdated": "Backup-Konfiguration aktualisiert",
+      "configUpdateFailed": "Konfiguration konnte nicht aktualisiert werden",
+      "backupDeleted": "Backup erfolgreich gelöscht",
+      "deleteFailed": "Backup konnte nicht gelöscht werden",
+      "testEmailSent": "Verbindung erfolgreich getestet!",
+      "testEmailFailed": "Verbindungstest fehlgeschlagen"
+    }
+  },
  "archives": {
    "title": "Archive",
    "subtitle": "Archivierte Fotogalerien verwalten",
@@ -134,7 +479,6 @@
    "sortByName": "Nach Name sortieren",
    "sortBySize": "Nach Größe sortieren",
    "allPhotos": "Alle Fotos",
-    "downloadSelected": "Ausgewählte herunterladen",
    "shareGallery": "Galerie teilen",
    "needHelp": "Hilfe benötigt? Kontaktieren Sie uns unter",
    "noPhotosFound": "Keine Fotos gefunden",
@@ -1438,4 +1782,4 @@
    "poweredBy": "Bereitgestellt von PicPeak",
    "devModeHint": "Entwicklungsmodus: E-Mail: admin@example.com, Passwort: admin123"
  }
-}
+}
@@ -36,6 +36,11 @@
    "customize": "Customize",
    "hide": "Hide",
    "unknown": "Unknown",
+    "notSet": "Not set",
+    "of": "of",
+    "up": "Up",
+    "select": "Select",
+    "selected": "Selected",
    "chunk": "Chunk"
  },
  "upload": {
@@ -50,6 +55,10 @@
    "uploadFailed": "Upload failed",
    "someFilesFailed": "Some files failed to upload",
    "uploadPhotos": "Upload Photos",
+    "importExternal": "Import from External Folder",
+    "externalImportInfo": "All pictures from the selected folder will be imported.",
+    "selectExternalFolder": "Select external folder under /external-media",
+    "importFromSelectedFolder": "Import from selected folder",
    "maxFilesReached": "Maximum 500 files allowed",
    "someFilesSkipped": "Some files were skipped (500 file limit)",
    "tooManyFiles": "Maximum 500 files can be uploaded at once",
@@ -134,6 +143,12 @@
    "sortByName": "Sort by Name", 
    "sortBySize": "Sort by Size",
    "allPhotos": "All Photos",
+    "filter": "Filter",
+    "feedbackFilter": "Feedback Filter",
+    "all": "All",
+    "liked": "Liked",
+    "favorited": "Favorited",
+    "favorites": "Favorites",
    "downloadSelected": "Download Selected",
    "shareGallery": "Share Gallery",
    "needHelp": "Need help? Contact us at",
@@ -967,6 +982,12 @@
    "pageUpdated": "Page updated successfully"
  },
  "backup": {
+    "external": {
+      "warning": {
+        "title": "External media excluded",
+        "body": "This installation references photos from /external-media. These originals are excluded from backups. Thumbnails and database are still backed up."
+      }
+    },
    "title": "Backup Management",
    "subtitle": "Manage system backups, configure automated backups, and restore from previous backups.",
    "tabs": {
@@ -1490,4 +1511,4 @@
    "poweredBy": "Powered by PicPeak",
    "devModeHint": "Development Mode: Use email: admin@example.com, password: admin123"
  }
-}
+}
@@ -144,6 +144,21 @@ export const BrandingPage: React.FC = () => {
    }
  };

+  const handleLogoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      try {
+        const logoUrl = await settingsService.uploadLogo(file);
+        setBrandingSettings(prev => ({ ...prev, logo_url: logoUrl }));
+        setCurrentTheme(prev => ({ ...prev, logoUrl }));
+        toast.success(t('toast.uploadSuccess'));
+      } catch (error) {
+        console.error('Failed to upload logo:', error);
+        toast.error(t('toast.uploadError'));
+      }
+    }
+  };
+
  const handleWatermarkLogoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
@@ -316,6 +331,166 @@ export const BrandingPage: React.FC = () => {
            </div>
          </div>

+          {/* Logo Customization Settings */}
+          <div className="mt-6 pt-6 border-t border-neutral-200">
+            <h3 className="text-md font-semibold text-neutral-900 mb-4">{t('branding.logoCustomization', 'Logo Customization')}</h3>
+            
+            <div className="space-y-4">
+              {/* Logo Upload */}
+              <div>
+                <label className="block text-sm font-medium text-neutral-700 mb-2">
+                  {t('branding.logo', 'Logo')}
+                </label>
+                <div className="flex items-center gap-4">
+                  {brandingSettings.logo_url && (
+                    <div className="relative">
+                      <img 
+                        src={brandingSettings.logo_url.startsWith('http') ? brandingSettings.logo_url : buildResourceUrl(brandingSettings.logo_url)} 
+                        alt="Logo"
+                        className="h-16 object-contain bg-neutral-100 rounded p-2"
+                      />
+                      <button
+                        type="button"
+                        onClick={() => handleBrandingChange('logo_url', '')}
+                        className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-red-600"
+                      >
+                        ×
+                      </button>
+                    </div>
+                  )}
+                  <label className="cursor-pointer">
+                    <input
+                      type="file"
+                      accept="image/png,image/jpeg,image/svg+xml"
+                      onChange={handleLogoUpload}
+                      className="hidden"
+                    />
+                    <span className="btn-secondary inline-flex items-center">
+                      <Upload className="w-4 h-4 mr-2" />
+                      {brandingSettings.logo_url ? t('branding.changeLogo', 'Change Logo') : t('branding.uploadLogo', 'Upload Logo')}
+                    </span>
+                  </label>
+                </div>
+                <p className="text-xs text-neutral-600 mt-1">
+                  {t('branding.logoHelp', 'PNG, JPG or SVG format, recommended width: 200px')}
+                </p>
+              </div>
+              {/* Logo Size */}
+              <div>
+                <label className="block text-sm font-medium text-neutral-700 mb-2">
+                  {t('branding.logoSize', 'Logo Size')}
+                </label>
+                <select
+                  value={brandingSettings.logo_size || 'medium'}
+                  onChange={(e) => handleBrandingChange('logo_size', e.target.value)}
+                  className="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+                >
+                  <option value="small">{t('branding.logoSizeSmall', 'Small (32px)')}</option>
+                  <option value="medium">{t('branding.logoSizeMedium', 'Medium (48px)')}</option>
+                  <option value="large">{t('branding.logoSizeLarge', 'Large (64px)')}</option>
+                  <option value="xlarge">{t('branding.logoSizeXLarge', 'Extra Large (96px)')}</option>
+                  <option value="custom">{t('branding.logoSizeCustom', 'Custom')}</option>
+                </select>
+              </div>
+
+              {/* Custom Height (only shown when size is custom) */}
+              {brandingSettings.logo_size === 'custom' && (
+                <div>
+                  <label className="block text-sm font-medium text-neutral-700 mb-2">
+                    {t('branding.logoMaxHeight', 'Maximum Height (pixels)')}
+                  </label>
+                  <input
+                    type="number"
+                    min="20"
+                    max="200"
+                    value={brandingSettings.logo_max_height || 48}
+                    onChange={(e) => handleBrandingChange('logo_max_height', parseInt(e.target.value))}
+                    className="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+                  />
+                  <p className="text-xs text-neutral-600 mt-1">
+                    {t('branding.logoMaxHeightHelp', 'Set a custom maximum height for the logo (20-200 pixels)')}
+                  </p>
+                </div>
+              )}
+
+              {/* Logo Position */}
+              <div>
+                <label className="block text-sm font-medium text-neutral-700 mb-2">
+                  {t('branding.logoPosition', 'Logo Position in Header')}
+                </label>
+                <div className="flex gap-2">
+                  {(['left', 'center', 'right'] as const).map((position) => (
+                    <button
+                      key={position}
+                      type="button"
+                      onClick={() => handleBrandingChange('logo_position', position)}
+                      className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                        brandingSettings.logo_position === position
+                          ? 'bg-primary-600 text-white'
+                          : 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'
+                      }`}
+                    >
+                      {t(`branding.position${position.charAt(0).toUpperCase() + position.slice(1)}`, position.charAt(0).toUpperCase() + position.slice(1))}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Display Mode */}
+              <div>
+                <label className="block text-sm font-medium text-neutral-700 mb-2">
+                  {t('branding.logoDisplayMode', 'Display Mode')}
+                </label>
+                <select
+                  value={brandingSettings.logo_display_mode || 'logo_and_text'}
+                  onChange={(e) => handleBrandingChange('logo_display_mode', e.target.value)}
+                  className="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+                >
+                  <option value="logo_only">{t('branding.logoOnly', 'Logo Only')}</option>
+                  <option value="text_only">{t('branding.textOnly', 'Company Name Only')}</option>
+                  <option value="logo_and_text">{t('branding.logoAndText', 'Logo and Company Name')}</option>
+                </select>
+              </div>
+
+              {/* Display Options */}
+              <div className="space-y-3">
+                <label className="flex items-center gap-3 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={brandingSettings.logo_display_header !== false}
+                    onChange={(e) => handleBrandingChange('logo_display_header', e.target.checked)}
+                    className="rounded border-neutral-300 text-primary-600 focus:ring-primary-500"
+                  />
+                  <div>
+                    <span className="text-sm font-medium text-neutral-900">
+                      {t('branding.showLogoInHeader', 'Show logo in gallery header')}
+                    </span>
+                    <p className="text-xs text-neutral-600">
+                      {t('branding.showLogoInHeaderHelp', 'Display the logo in the main header bar')}
+                    </p>
+                  </div>
+                </label>
+
+                <label className="flex items-center gap-3 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={brandingSettings.logo_display_hero !== false}
+                    onChange={(e) => handleBrandingChange('logo_display_hero', e.target.checked)}
+                    className="rounded border-neutral-300 text-primary-600 focus:ring-primary-500"
+                  />
+                  <div>
+                    <span className="text-sm font-medium text-neutral-900">
+                      {t('branding.showLogoInHero', 'Show logo in hero section')}
+                    </span>
+                    <p className="text-xs text-neutral-600">
+                      {t('branding.showLogoInHeroHelp', 'Display the logo in hero sections (for non-grid layouts)')}
+                    </p>
+                  </div>
+                </label>
+              </div>
+            </div>
+          </div>
+
          <div className="mt-6 pt-6 border-t border-neutral-200">
            <label className="flex items-center gap-3 cursor-pointer">
              <input
@@ -28,9 +28,68 @@ import { EventCategoryManager, AdminPhotoGrid, AdminPhotoViewer, PhotoFilters, P
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { eventsService } from '../../services/events.service';
 import { archiveService } from '../../services/archive.service';
+import { externalMediaService } from '../../services/externalMedia.service';
 import { photosService, AdminPhoto } from '../../services/photos.service';
 import { feedbackService, FeedbackSettings as FeedbackSettingsType } from '../../services/feedback.service';
 import { ThemeConfig, GALLERY_THEME_PRESETS } from '../../types/theme.types';
+import { useTranslation } from 'react-i18next';
+
+const ExternalFolderPicker: React.FC<{ value: string; onChange: (p: string) => void }> = ({ value, onChange }) => {
+  const { t } = useTranslation();
+  const [entries, setEntries] = useState<{ path: string; entries: any[]; canNavigateUp: boolean } | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [currentPath, setCurrentPath] = useState<string>(value || '');
+
+  const load = async (p: string) => {
+    try {
+      setLoading(true);
+      const res = await externalMediaService.list(p);
+      setEntries(res);
+      setCurrentPath(res.path);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { load(currentPath || ''); }, []);
+
+  const navigateUp = () => {
+    if (!entries?.canNavigateUp) return;
+    const parts = (entries.path || '').split('/').filter(Boolean);
+    parts.pop();
+    load(parts.join('/'));
+  };
+
+  return (
+    <div className="mt-2 border rounded-lg p-3">
+      <div className="flex items-center justify-between mb-2">
+        <div className="text-sm text-neutral-600">/external-media/{entries?.path || ''}</div>
+        <div className="flex gap-2">
+          <button className="text-sm underline" onClick={navigateUp} disabled={!entries?.canNavigateUp}>{t('common.up', 'Up')}</button>
+          <button className="text-sm underline" onClick={() => onChange(entries?.path || '')}>{t('common.select', 'Select')}</button>
+        </div>
+      </div>
+      {loading ? (
+        <div className="text-sm text-neutral-500">{t('common.loading', 'Loading...')}</div>
+      ) : (
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
+          {entries?.entries?.filter((e: any) => e.type === 'dir').map((e: any) => (
+            <button
+              key={e.name}
+              onClick={() => load([entries?.path, e.name].filter(Boolean).join('/'))}
+              className="px-3 py-2 border rounded text-left hover:bg-neutral-50"
+            >
+              📁 {e.name}
+            </button>
+          ))}
+        </div>
+      )}
+      {value && (
+        <div className="mt-2 text-xs text-neutral-600">{t('common.selected', 'Selected')}: /external-media/{value}</div>
+      )}
+    </div>
+  );
+};

 export const EventDetailsPage: React.FC = () => {
  const { id } = useParams<{ id: string }>();
@@ -67,7 +126,10 @@ export const EventDetailsPage: React.FC = () => {
  });
  const [copiedLink, setCopiedLink] = useState(false);
  const [showPhotoUpload, setShowPhotoUpload] = useState(false);
+  const [showExternalImport, setShowExternalImport] = useState(false);
  const [activeTab, setActiveTab] = useState<'overview' | 'photos' | 'categories'>('overview');
+  const [externalPath, setExternalPath] = useState<string>('');
+  const [importing, setImporting] = useState<boolean>(false);
  const [selectedPhoto, setSelectedPhoto] = useState<{ photo: AdminPhoto; index: number } | null>(null);
  const [showPasswordReset, setShowPasswordReset] = useState(false);
  const [currentTheme, setCurrentTheme] = useState<ThemeConfig | null>(null);
@@ -279,12 +341,38 @@ export const EventDetailsPage: React.FC = () => {

  const handleCopyLink = async () => {
    try {
-      await navigator.clipboard.writeText(event.share_link);
+      // Check if share_link exists
+      if (!event.share_link) {
+        toast.error(t('errors.noShareLink', 'No share link available'));
+        return;
+      }
+
+      // Try modern clipboard API first
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(event.share_link);
+      } else {
+        // Fallback for non-HTTPS contexts or older browsers
+        const textArea = document.createElement('textarea');
+        textArea.value = event.share_link;
+        textArea.style.position = 'fixed';
+        textArea.style.left = '-999999px';
+        textArea.style.top = '-999999px';
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        const successful = document.execCommand('copy');
+        document.body.removeChild(textArea);
+        if (!successful) {
+          throw new Error('Copy failed');
+        }
+      }
+      
      setCopiedLink(true);
      setTimeout(() => setCopiedLink(false), 2000);
      toast.success(t('toast.linkCopied'));
    } catch (err) {
-      toast.error(t('errors.somethingWentWrong'));
+      console.error('Copy failed:', err);
+      toast.error(t('errors.copyFailed', 'Failed to copy link. Please copy manually.'));
    }
  };

@@ -572,6 +660,15 @@ export const EventDetailsPage: React.FC = () => {
              </div>
            ) : (
              <dl className="space-y-4">
+                <div>
+                  <dt className="text-sm font-medium text-neutral-500">Source Mode</dt>
+                  <dd className="mt-1 text-sm text-neutral-900">
+                    {event.source_mode === 'reference' ? 'Reference (external folder)' : 'Managed (upload)'}
+                    {event.source_mode === 'reference' && event.external_path ? (
+                      <span className="text-neutral-500 ml-2">/external-media/{event.external_path}</span>
+                    ) : null}
+                  </dd>
+                </div>
                <div>
                  <dt className="text-sm font-medium text-neutral-500">{t('events.welcomeMessage')}</dt>
                  <dd className="mt-1 text-sm text-neutral-900">
@@ -925,6 +1022,17 @@ export const EventDetailsPage: React.FC = () => {
            >
              {t('events.uploadPhotos')}
            </Button>
+            {event.source_mode === 'reference' && (
+              <div className="ml-3">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setShowExternalImport(true)}
+                >
+                  {t('events.importExternal', 'Import from External Folder')}
+                </Button>
+              </div>
+            )}
          </div>

          {/* Photo Grid */}
@@ -998,6 +1106,59 @@ export const EventDetailsPage: React.FC = () => {
        />
      )}

+      {/* External Import Modal */}
+      {showExternalImport && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <Card className="max-w-2xl w-full">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-xl font-semibold text-neutral-900">{t('events.importExternal', 'Import from External Folder')}</h2>
+              <button onClick={() => setShowExternalImport(false)} className="text-neutral-400 hover:text-neutral-600">
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            <div className="mb-3 text-sm text-neutral-700">
+              {t('events.externalImportInfo', 'All pictures from the selected folder will be imported.')}
+            </div>
+            <div className="mb-2 text-sm text-neutral-700">
+              {t('events.selectExternalFolder', 'Select external folder under /external-media')}
+            </div>
+            <ExternalFolderPicker value={externalPath || event.external_path || ''} onChange={setExternalPath} />
+
+            <div className="mt-4 flex justify-end gap-2">
+              <Button variant="outline" onClick={() => setShowExternalImport(false)}>
+                {t('common.cancel')}
+              </Button>
+              <Button
+                variant="primary"
+                isLoading={importing}
+                onClick={async () => {
+                  try {
+                    setImporting(true);
+                    const selected = externalPath || event.external_path || '';
+                    if (!selected) {
+                      toast.error(t('errors.somethingWentWrong', 'Something went wrong'));
+                      return;
+                    }
+                    await externalMediaService.importEvent(parseInt(id!), selected, { recursive: true });
+                    toast.success(t('toast.saveSuccess'));
+                    queryClient.invalidateQueries({ queryKey: ['admin-event', id] });
+                    queryClient.invalidateQueries({ queryKey: ['admin-event-photos', id] });
+                    setShowExternalImport(false);
+                  } catch (e: any) {
+                    toast.error(e?.response?.data?.error || 'Import failed');
+                  } finally {
+                    setImporting(false);
+                  }
+                }}
+              >
+                {t('events.importFromSelectedFolder', 'Import from selected folder')}
+              </Button>
+            </div>
+          </Card>
+        </div>
+      )}
+
    </div>
  );
 };
@@ -20,6 +20,7 @@ import { toast } from 'react-toastify';
 import { format } from 'date-fns';

 import { Button, Card, Loading } from '../../components/common';
+import { AdminAuthenticatedImage } from '../../components/admin/AdminAuthenticatedImage';
 import { FeedbackSettings } from '../../components/admin';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { eventsService } from '../../services/events.service';
@@ -250,11 +251,15 @@ export const EventFeedbackPage: React.FC = () => {
              {feedbackData?.feedback?.map((item: PhotoFeedback) => (
                <Card key={item.id} className="overflow-hidden">
                  <div className="p-4 flex items-start gap-4">
-                    <img
-                      src={`/thumbnails/${item.path}`}
-                      alt={item.filename}
-                      className="w-16 h-16 object-cover rounded"
-                    />
+                    {item.photo_id && (
+                      <div className="w-16 h-16 overflow-hidden rounded">
+                        <AdminAuthenticatedImage
+                          src={`/api/admin/photos/${eventId}/thumbnail/${item.photo_id}`}
+                          alt={item.filename || 'Photo'}
+                          className="w-16 h-16 object-cover rounded"
+                        />
+                      </div>
+                    )}
                    <div className="flex-1">
                      <div className="flex items-start justify-between">
                        <div>
@@ -522,4 +527,4 @@ export const EventFeedbackPage: React.FC = () => {
      )}
    </div>
  );
-};
+};
@@ -0,0 +1,22 @@
+import { api } from '../config/api';
+
+export interface ExternalEntry { name: string; type: 'dir' | 'file'; size?: number; mtime?: string }
+
+export const externalMediaService = {
+  async list(pathRel: string = ''): Promise<{ path: string; entries: ExternalEntry[]; canNavigateUp: boolean }> {
+    const params = new URLSearchParams();
+    if (pathRel) params.set('path', pathRel);
+    const res = await api.get(`/admin/external-media/list?${params.toString()}`);
+    return res.data;
+  },
+
+  async importEvent(eventId: number, externalPath: string, options?: { recursive?: boolean; map?: { individual?: string; collages?: string } }): Promise<{ imported: number; skipped: number; thumbnailsQueued: number }> {
+    const res = await api.post(`/admin/external-media/events/${eventId}/import-external`, {
+      external_path: externalPath,
+      recursive: options?.recursive ?? true,
+      map: options?.map
+    });
+    return res.data;
+  }
+}
+
@@ -16,8 +16,13 @@ export const galleryService = {
  },

  // Get gallery photos (requires auth)
-  async getGalleryPhotos(slug: string): Promise<GalleryData> {
-    const response = await api.get<GalleryData>(`/gallery/${slug}/photos`);
+  async getGalleryPhotos(slug: string, filter?: 'liked' | 'favorited' | 'all', guestId?: string): Promise<GalleryData> {
+    const params: any = {};
+    if (filter && filter !== 'all' && guestId) {
+      params.filter = filter;
+      params.guest_id = guestId;
+    }
+    const response = await api.get<GalleryData>(`/gallery/${slug}/photos`, { params });
    return response.data;
  },

@@ -45,7 +45,8 @@ class PhotosService {
    }
    
    const queryString = params.toString();
-    const url = `/admin/events/${eventId}/photos${queryString ? `?${queryString}` : ''}`;
+    // Use admin photos router for listing to ensure URL alignment with media/thumbnail endpoints
+    const url = `/admin/photos/${eventId}/photos${queryString ? `?${queryString}` : ''}`;
    
    const response = await api.get(url);
    
@@ -96,4 +97,4 @@ class PhotosService {
  }
 }

-export const photosService = new PhotosService();
+export const photosService = new PhotosService();
@@ -12,6 +12,12 @@ export interface BrandingSettings {
  watermark_logo_url?: string;
  logo_url?: string;
  favicon_url?: string;
+  logo_size?: 'small' | 'medium' | 'large' | 'xlarge' | 'custom';
+  logo_max_height?: number;
+  logo_position?: 'left' | 'center' | 'right';
+  logo_display_header?: boolean;
+  logo_display_hero?: boolean;
+  logo_display_mode?: 'logo_only' | 'text_only' | 'logo_and_text';
 }

 export interface ThemeSettings {
@@ -215,7 +221,13 @@ export const settingsService = {
      watermark_size: rawSettings.branding_watermark_size || 15,
      watermark_logo_url: rawSettings.branding_watermark_logo_url || undefined,
      logo_url: rawSettings.branding_logo_url || undefined,
-      favicon_url: rawSettings.branding_favicon_url || undefined
+      favicon_url: rawSettings.branding_favicon_url || undefined,
+      logo_size: rawSettings.branding_logo_size || 'medium',
+      logo_max_height: rawSettings.branding_logo_max_height || 48,
+      logo_position: rawSettings.branding_logo_position || 'left',
+      logo_display_header: rawSettings.branding_logo_display_header !== false,
+      logo_display_hero: rawSettings.branding_logo_display_hero !== false,
+      logo_display_mode: rawSettings.branding_logo_display_mode || 'logo_and_text'
    };
  },

@@ -13,7 +13,7 @@ IFS=$'\n\t'
 # Script configuration
 readonly SCRIPT_VERSION="2.0.0"
 readonly APP_NAME="PicPeak"
-readonly REPO_URL="https://github.com/yourusername/wedding-photo-sharing"
+readonly REPO_URL="https://github.com/the-luap/picpeak.git"
 readonly NODE_VERSION="20"
 readonly MIN_RAM_DOCKER=2048
 readonly MIN_RAM_NATIVE=1024
@@ -44,7 +44,6 @@ INSTALL_METHOD=""  # docker or native
 OS_TYPE=""
 OS_VERSION=""
 PACKAGE_MANAGER=""
-ADMIN_PASSWORD=""
 ADMIN_EMAIL="admin@example.com"
 DOMAIN_NAME=""
 SMTP_HOST=""
@@ -61,6 +60,38 @@ UNINSTALL_MODE=false
 # Helper Functions
 ################################################################################

+# Run a command as the application user, even if sudo is not available
+run_as_user() {
+    local cmd="$*"
+    if [[ "$(id -u)" -ne 0 ]]; then
+        # Already non-root; just run
+        bash -lc "$cmd"
+        return $?
+    fi
+    if command_exists sudo; then
+        sudo -H -u "$NATIVE_APP_USER" bash -lc "$cmd"
+    elif command_exists runuser; then
+        runuser -u "$NATIVE_APP_USER" -- bash -lc "$cmd"
+    else
+        su -s /bin/bash - "$NATIVE_APP_USER" -c "$cmd"
+    fi
+}
+
+# Prompt for admin email interactively (unless provided or unattended)
+prompt_admin_email() {
+    if [[ -n "$ADMIN_EMAIL" ]]; then
+        return
+    fi
+    if [[ "$UNATTENDED" == "true" ]]; then
+        ADMIN_EMAIL="admin@example.com"
+        return
+    fi
+    echo
+    echo "Please enter the admin email address (used for the initial admin account):"
+    read -p "Admin email [admin@example.com]: " ADMIN_EMAIL
+    ADMIN_EMAIL=${ADMIN_EMAIL:-admin@example.com}
+}
+
 print_banner() {
    echo -e "${PURPLE}"
    echo "╔════════════════════════════════════════════════════════════════════════╗"
@@ -110,11 +141,16 @@ generate_jwt_secret() {
 }

 get_available_ram_mb() {
-    if command_exists free; then
-        free -m | awk '/^Mem:/{print $2}'
-    else
-        echo "0"
+    # Prefer /proc/meminfo (always available on Linux), fallback to free(1)
+    if [[ -r /proc/meminfo ]]; then
+        awk '/^MemTotal:/ { printf "%d\n", $2/1024 }' /proc/meminfo
+        return
    fi
+    if command_exists free; then
+        free -m | awk '/^Mem:/ {print $2}'
+        return
+    fi
+    echo "0"
 }

 get_available_disk_gb() {
@@ -331,7 +367,6 @@ setup_docker_installation() {
    local jwt_secret=$(generate_jwt_secret)
    local db_password=$(generate_password)
    local redis_password=$(generate_password)
-    [[ -z "$ADMIN_PASSWORD" ]] && ADMIN_PASSWORD=$(generate_password)
    
    # Create .env file
    log_step "Creating configuration..."
@@ -346,7 +381,6 @@ JWT_SECRET=$jwt_secret

 # Admin
 ADMIN_EMAIL=$ADMIN_EMAIL
-ADMIN_PASSWORD=$ADMIN_PASSWORD

 # Database
 DB_HOST=postgres
@@ -373,7 +407,7 @@ SMTP_FROM=${SMTP_USER:-noreply@localhost}

 # URLs
 FRONTEND_URL=${DOMAIN_NAME:+https://$DOMAIN_NAME}
-ADMIN_URL=${DOMAIN_NAME:+https://$DOMAIN_NAME/admin}
+ADMIN_URL=${DOMAIN_NAME:+https://$DOMAIN_NAME}

 # Features
 ENABLE_FILE_WATCHER=true
@@ -551,29 +585,55 @@ setup_native_installation() {
    
    # Create application directory
    log_step "Creating application directory..."
-    mkdir -p "$NATIVE_APP_DIR"/{backend,events/{active,archived},logs,config}
+    mkdir -p "$NATIVE_APP_DIR"/{app,events/{active,archived},logs,config}
+    chown -R $NATIVE_APP_USER:$NATIVE_APP_USER "$NATIVE_APP_DIR"
    
    # Clone repository
    log_step "Downloading PicPeak..."
-    if [[ -d "$NATIVE_APP_DIR/backend/.git" ]]; then
-        cd "$NATIVE_APP_DIR/backend"
-        git pull
+    if [[ -d "$NATIVE_APP_DIR/app/.git" ]]; then
+        cd "$NATIVE_APP_DIR/app"
+        # Ensure correct remote and update even if history was rewritten
+        run_as_user "git config --global --add safe.directory $NATIVE_APP_DIR/app" || true
+        run_as_user "git remote set-url origin $REPO_URL" || true
+        run_as_user "git fetch --all --prune" || true
+        # Prefer checking out remote main and hard resetting to avoid merge prompts
+        if ! run_as_user "git checkout -B main origin/main"; then
+          run_as_user "git checkout main" || true
+          run_as_user "git reset --hard origin/main"
+        fi
    else
-        git clone "$REPO_URL" "$NATIVE_APP_DIR/backend"
+        run_as_user "git clone $REPO_URL $NATIVE_APP_DIR/app" || {
+            run_as_user "git config --global --add safe.directory $NATIVE_APP_DIR/app"
+            run_as_user "git clone $REPO_URL $NATIVE_APP_DIR/app"
+        }
    fi
    
    # Install dependencies
    log_step "Installing dependencies..."
-    cd "$NATIVE_APP_DIR/backend"
+    # The repository root contains both backend/ and frontend/
+    # Install backend production dependencies
+    cd "$NATIVE_APP_DIR/app/backend"
    npm install --production
+    # Ensure SQLite data directory exists for native installs
+    mkdir -p "$NATIVE_APP_DIR/app/backend/data"
+
+    # Build frontend for native serving
+    log_step "Building frontend..."
+    if [[ -d "$NATIVE_APP_DIR/app/frontend" ]]; then
+      cd "$NATIVE_APP_DIR/app/frontend"
+      # Try ci (faster/clean) then fallback to install
+      run_as_user "npm ci --include=dev" || run_as_user "npm install"
+      run_as_user "npm run build"
+    else
+      log_warn "Frontend directory not found; admin UI will not be served by backend"
+    fi
    
    # Generate secrets
    local jwt_secret=$(generate_jwt_secret)
-    [[ -z "$ADMIN_PASSWORD" ]] && ADMIN_PASSWORD=$(generate_password)
    
    # Create .env file
    log_step "Creating configuration..."
-    cat > "$NATIVE_APP_DIR/backend/.env" <<EOF
+    cat > "$NATIVE_APP_DIR/app/backend/.env" <<EOF
 # PicPeak Native Configuration
 # Generated: $(date)

@@ -584,14 +644,14 @@ JWT_SECRET=$jwt_secret

 # Admin
 ADMIN_USERNAME=admin
-ADMIN_PASSWORD=$ADMIN_PASSWORD
 ADMIN_EMAIL=$ADMIN_EMAIL

-# Database
-DATABASE_PATH=$NATIVE_APP_DIR/backend/database.sqlite
+# Database (native uses SQLite by default)
+DATABASE_CLIENT=sqlite3
+DATABASE_PATH=$NATIVE_APP_DIR/app/backend/data/photo_sharing.db

-# Storage
-PHOTOS_DIR=$NATIVE_APP_DIR/events
+# Storage root (thumbnails/uploads live under this path)
+STORAGE_PATH=$NATIVE_APP_DIR

 # Email
 SMTP_ENABLED=${SMTP_HOST:+true}
@@ -603,7 +663,7 @@ SMTP_FROM=${SMTP_USER:-noreply@localhost}

 # URLs
 FRONTEND_URL=${DOMAIN_NAME:+https://$DOMAIN_NAME}
-ADMIN_URL=${DOMAIN_NAME:+https://$DOMAIN_NAME/admin}
+ADMIN_URL=${DOMAIN_NAME:+https://$DOMAIN_NAME}

 # Features
 ENABLE_FILE_WATCHER=true
@@ -614,16 +674,20 @@ DEFAULT_EXPIRY_DAYS=30
 # Logging
 LOG_DIR=$NATIVE_APP_DIR/logs
 LOG_LEVEL=info
+
+# Frontend serving (native installs)
+SERVE_FRONTEND=true
+FRONTEND_DIR=$NATIVE_APP_DIR/app/frontend/dist
 EOF
    
    # Set permissions
    chown -R $NATIVE_APP_USER:$NATIVE_APP_USER "$NATIVE_APP_DIR"
-    chmod 600 "$NATIVE_APP_DIR/backend/.env"
+    chmod 600 "$NATIVE_APP_DIR/app/backend/.env"
    
    # Run database migrations
    log_step "Initializing database..."
-    cd "$NATIVE_APP_DIR/backend"
-    sudo -u $NATIVE_APP_USER npm run migrate
+    cd "$NATIVE_APP_DIR/app/backend"
+    run_as_user "npm run migrate"
    
    # Create systemd services
    create_systemd_services
@@ -636,8 +700,15 @@ EOF
    # Start services
    log_step "Starting services..."
    systemctl daemon-reload
-    systemctl enable picpeak-backend picpeak-workers
-    systemctl start picpeak-backend picpeak-workers
+    systemctl enable picpeak-backend
+    # Stop/remove legacy workers service if present
+    if systemctl list-unit-files | grep -q '^picpeak-workers.service'; then
+      systemctl disable picpeak-workers || true
+      systemctl stop picpeak-workers || true
+      rm -f /etc/systemd/system/picpeak-workers.service
+      systemctl daemon-reload
+    fi
+    systemctl start picpeak-backend
    
    log_success "Native installation completed!"
 }
@@ -654,7 +725,7 @@ After=network.target
 [Service]
 Type=simple
 User=$NATIVE_APP_USER
-WorkingDirectory=$NATIVE_APP_DIR/backend
+    WorkingDirectory=$NATIVE_APP_DIR/app/backend
 Environment="NODE_ENV=production"
 ExecStart=/usr/bin/node server.js
 Restart=always
@@ -675,7 +746,7 @@ After=network.target picpeak-backend.service
 [Service]
 Type=simple
 User=$NATIVE_APP_USER
-WorkingDirectory=$NATIVE_APP_DIR/backend
+    WorkingDirectory=$NATIVE_APP_DIR/app/backend
 Environment="NODE_ENV=production"
 ExecStart=/usr/bin/node src/services/workerManager.js
 Restart=always
@@ -845,8 +916,32 @@ print_success_message() {
    echo
    echo "🔐 Admin Credentials:"
    echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-    echo -e "Email:    ${CYAN}$ADMIN_EMAIL${NC}"
-    echo -e "Password: ${CYAN}$ADMIN_PASSWORD${NC}"
+    # Read from ADMIN_CREDENTIALS.txt when available
+    local cred_file email_line pass_line admin_email_val admin_pass_val
+    if [[ "$INSTALL_METHOD" == "docker" ]]; then
+        cred_file="$app_dir/data/ADMIN_CREDENTIALS.txt"
+    else
+        cred_file="$NATIVE_APP_DIR/app/backend/data/ADMIN_CREDENTIALS.txt"
+    fi
+    if [[ -f "$cred_file" ]]; then
+        email_line=$(grep -m1 '^Email:' "$cred_file" || true)
+        pass_line=$(grep -m1 '^Password:' "$cred_file" || true)
+        admin_email_val=${email_line#Email: }
+        admin_pass_val=${pass_line#Password: }
+        if [[ -n "$admin_email_val" ]]; then
+          echo -e "Email:    ${CYAN}$admin_email_val${NC}"
+        else
+          echo -e "Email:    ${CYAN}$ADMIN_EMAIL${NC}"
+        fi
+        if [[ -n "$admin_pass_val" ]]; then
+          echo -e "Password: ${CYAN}$admin_pass_val${NC}"
+        else
+          echo -e "Password: ${YELLOW}(see $cred_file)${NC}"
+        fi
+      else
+        echo -e "Email:    ${CYAN}$ADMIN_EMAIL${NC}"
+        echo -e "Password: ${YELLOW}(credentials file not found)${NC}"
+      fi
    echo
    echo -e "${YELLOW}⚠️  IMPORTANT: Change the admin password on first login!${NC}"
    
@@ -870,16 +965,16 @@ print_success_message() {
        echo "🔧 Service Commands:"
        echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
        echo "View logs:    sudo journalctl -u picpeak-backend -f"
-        echo "Stop:         sudo systemctl stop picpeak-backend picpeak-workers"
-        echo "Start:        sudo systemctl start picpeak-backend picpeak-workers"
+        echo "Stop:         sudo systemctl stop picpeak-backend"
+        echo "Start:        sudo systemctl start picpeak-backend"
        echo "Status:       sudo systemctl status picpeak-backend"
    fi
    
    echo
    echo "📚 Documentation:"
    echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-    echo "Setup Guide:  https://github.com/yourusername/wedding-photo-sharing/blob/main/SIMPLE_SETUP.md"
-    echo "Full Docs:    https://github.com/yourusername/wedding-photo-sharing"
+    echo "Setup Guide:  https://github.com/the-luap/picpeak/blob/main/SIMPLE_SETUP.md"
+    echo "Full Docs:    https://github.com/the-luap/picpeak"
    echo
    echo -e "${GREEN}✨ Setup complete! Visit the admin panel to start creating galleries.${NC}"
 }
@@ -890,16 +985,31 @@ print_success_message() {

 update_installation() {
    print_header "Updating PicPeak"
-    
-    # Detect existing installation
-    if [[ -d "$DOCKER_APP_DIR" ]] || [[ -d "/home/${SUDO_USER:-}/picpeak" ]]; then
-        INSTALL_METHOD="docker"
-        update_docker_installation
-    elif [[ -d "$NATIVE_APP_DIR" ]]; then
+
+    # Prefer explicit native install detection first
+    native_detected=false
+    docker_detected=false
+
+    # Native detection: app/backend exists OR systemd unit present
+    if [[ -d "$NATIVE_APP_DIR/app/backend" ]]; then
+        native_detected=true
+    elif command -v systemctl >/dev/null 2>&1 && systemctl list-unit-files | grep -q '^picpeak-backend.service'; then
+        native_detected=true
+    fi
+
+    # Docker detection: docker app dir or user home picpeak dir exists
+    if [[ -d "$DOCKER_APP_DIR" ]] || [[ -n "${SUDO_USER:-}" && -d "/home/${SUDO_USER}/picpeak" ]]; then
+        docker_detected=true
+    fi
+
+    if [[ "$native_detected" == true ]]; then
        INSTALL_METHOD="native"
        update_native_installation
+    elif [[ "$docker_detected" == true ]]; then
+        INSTALL_METHOD="docker"
+        update_docker_installation
    else
-        die "No existing PicPeak installation found"
+        die "No existing PicPeak installation found (native dir $NATIVE_APP_DIR/app/backend or docker dir $DOCKER_APP_DIR not present)"
    fi
 }

@@ -932,23 +1042,51 @@ update_native_installation() {
    log_step "Updating native installation..."
    
    # Stop services
-    systemctl stop picpeak-backend picpeak-workers
+    systemctl stop picpeak-backend || true
+    if systemctl list-unit-files | grep -q '^picpeak-workers.service'; then
+      systemctl stop picpeak-workers || true
+    fi
    
    # Backup current configuration
-    cp "$NATIVE_APP_DIR/backend/.env" "$NATIVE_APP_DIR/backend/.env.backup-$(date +%Y%m%d-%H%M%S)"
+    if [[ -f "$NATIVE_APP_DIR/app/backend/.env" ]]; then
+      cp "$NATIVE_APP_DIR/app/backend/.env" "$NATIVE_APP_DIR/app/backend/.env.backup-$(date +%Y%m%d-%H%M%S)"
+    fi
    
    # Pull latest code
-    cd "$NATIVE_APP_DIR/backend"
-    sudo -u $NATIVE_APP_USER git pull
+    cd "$NATIVE_APP_DIR/app"
+    run_as_user "git config --global --add safe.directory $NATIVE_APP_DIR/app" || true
+    run_as_user "git remote set-url origin $REPO_URL" || true
+    run_as_user "git fetch --all --prune"
+    if ! run_as_user "git checkout -B main origin/main"; then
+      run_as_user "git checkout main" || true
+      run_as_user "git reset --hard origin/main"
+    fi
    
-    # Update dependencies
-    sudo -u $NATIVE_APP_USER npm install --production
+    # Update backend dependencies
+    cd "$NATIVE_APP_DIR/app/backend"
+    run_as_user "npm install --production"
    
    # Run migrations
-    sudo -u $NATIVE_APP_USER npm run migrate
+    run_as_user "npm run migrate"
+
+    # Rebuild frontend (ensure admin UI for native installs)
+    if [[ -d "$NATIVE_APP_DIR/app/frontend" ]]; then
+      log_step "Rebuilding frontend..."
+      cd "$NATIVE_APP_DIR/app/frontend"
+      run_as_user "npm ci --include=dev" || run_as_user "npm install"
+      run_as_user "npm run build"
+    fi
+
+    # Ensure env has frontend serving flags
+    if ! grep -q '^SERVE_FRONTEND=' "$NATIVE_APP_DIR/app/backend/.env"; then
+      echo "SERVE_FRONTEND=true" >> "$NATIVE_APP_DIR/app/backend/.env"
+    fi
+    if ! grep -q '^FRONTEND_DIR=' "$NATIVE_APP_DIR/app/backend/.env"; then
+      echo "FRONTEND_DIR=$NATIVE_APP_DIR/app/frontend/dist" >> "$NATIVE_APP_DIR/app/backend/.env"
+    fi
    
    # Restart services
-    systemctl start picpeak-backend picpeak-workers
+    systemctl restart picpeak-backend
    
    log_success "Native installation updated successfully!"
 }
@@ -1042,10 +1180,6 @@ parse_arguments() {
                ADMIN_EMAIL="$2"
                shift 2
                ;;
-            --admin-password)
-                ADMIN_PASSWORD="$2"
-                shift 2
-                ;;
            --smtp-host)
                SMTP_HOST="$2"
                shift 2
@@ -1103,7 +1237,6 @@ Options:
  --unattended        Run without prompts
  --domain DOMAIN     Set domain name for HTTPS
  --email EMAIL       Admin email address
-  --admin-password    Admin password (auto-generated if not set)
  --smtp-host HOST    SMTP server hostname
  --smtp-port PORT    SMTP server port
  --smtp-user USER    SMTP username
@@ -1126,7 +1259,7 @@ Examples:

  # Fully automated Docker setup
  sudo $0 --docker --unattended --domain photos.example.com \\
-    --email admin@example.com --admin-password SecurePass123 \\
+    --email admin@example.com \\
    --smtp-host smtp.gmail.com --smtp-port 587 \\
    --smtp-user user@gmail.com --smtp-pass app-password \\
    --enable-ssl
@@ -1166,6 +1299,9 @@ main() {
    # Check system requirements
    check_system_requirements
    
+    # Prompt for admin email (design choice: always ask unless provided)
+    prompt_admin_email
+    
    # Configure email (optional)
    configure_email
    
@@ -1181,4 +1317,4 @@ main() {
 }

 # Run main function
-main "$@"
+main "$@"