diff --git a/.cursor/rules/docs.mdc b/.cursor/rules/docs.mdc
new file mode 100644
index 00000000..a3755c0d
--- /dev/null
+++ b/.cursor/rules/docs.mdc
@@ -0,0 +1,5 @@
+---
+alwaysApply: true
+---
+
+when working with this project and adding API endpoints always document them in @API_DOCS.md
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
index fdc53d7d..8ae57ee7 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -35,7 +35,9 @@ FROM python:3.12-slim AS runtime
 RUN useradd -m -u 1000 toolbox && \
     chown -R toolbox:toolbox /home/toolbox && \
     mkdir -p /home/toolbox/.cache/huggingface && \
-    chown -R toolbox:toolbox /home/toolbox/.cache/huggingface
+    chown -R toolbox:toolbox /home/toolbox/.cache/huggingface && \
+    mkdir -p /home/toolbox/site/backend/main/data/photos && \
+    chown -R toolbox:toolbox /home/toolbox/site/backend/main/data/photos
 USER toolbox
 
 # 3.2. Copy content
diff --git a/backend/main/API_DOCS.md b/backend/main/API_DOCS.md
index 144e9bce..2d29460d 100644
--- a/backend/main/API_DOCS.md
+++ b/backend/main/API_DOCS.md
@@ -293,4 +293,57 @@ The Toolbox.io Telegram bot provides the same support functionality as the web i
 ## Authentication
 
 - All protected endpoints require the `Authorization: Bearer <access_token>` header.
-- JWT tokens are returned by `/api/auth/login` and must be stored securely on the client.
\ No newline at end of file
+- JWT tokens are returned by `/api/auth/login` and must be stored securely on the client.
+
+---
+
+## Photo Storage Endpoints
+
+All `/photos/*` endpoints are under the `/photos` prefix and require authentication (`Authorization: Bearer <access_token>`).
+
+### GET `/photos/sync`
+- **Description:** List all photo UUIDs and metadata for the authenticated user (for sync).
+- **Headers:**
+  - `Authorization: Bearer <access_token>`
+- **Response:**
+  ```json
+  {
+    "photos": [
+      {"uuid": "<uuid>", "uploaded_at": "<date>T<time>Z", "filename": "<string>"}
+      // ...
+    ]
+  }
+  ```
+- **Errors:**
+  - `401`: Unauthorized (invalid or missing token)
+
+---
+
+### POST `/photos/upload`
+- **Description:** Upload an encrypted photo file with a client-generated UUID.
+- **Headers:**
+  - `Authorization: Bearer <access_token>`
+- **Request (multipart/form-data):**
+  - `photo_uuid`: string (UUID, required)
+  - `file`: binary (encrypted photo, required)
+- **Response:**
+  `201 Created`
+  ```json
+  { "status": "success" }
+  ```
+- **Errors:**
+  - `400`: Photo UUID already exists for this user
+  - `401`: Unauthorized (invalid or missing token)
+
+---
+
+### GET `/photos/download/{photo_uuid}`
+- **Description:** Download the encrypted photo file for the given UUID (if it belongs to the user).
+- **Headers:**
+  - `Authorization: Bearer <access_token>`
+- **Response:**
+  - Content-Type: `application/octet-stream`
+  - File download (binary)
+- **Errors:**
+  - `404`: Photo not found or file missing
+  - `401`: Unauthorized (invalid or missing token)
\ No newline at end of file
diff --git a/backend/main/app.py b/backend/main/app.py
index 95827a8c..4f9a46db 100644
--- a/backend/main/app.py
+++ b/backend/main/app.py
@@ -7,7 +7,7 @@
 
 import utils
 from limiter import limiter
-from routes import auth, guides, core, issues, support
+from routes import auth, guides, core, issues, support, photos
 from live_reload import HTMLInjectorMiddleware
 import live_reload
 
@@ -55,3 +55,4 @@ async def rate_limit_handler(request: Request, exc: RateLimitExceeded) -> Respon
 app.include_router(issues.router, prefix="/api/issues")
 app.include_router(live_reload.router)
 app.include_router(support.router, prefix="/api/support")
+app.include_router(photos.router, prefix="/api/photos")
diff --git a/backend/main/models.py b/backend/main/models.py
index f8d7a207..56778434 100644
--- a/backend/main/models.py
+++ b/backend/main/models.py
@@ -1,6 +1,6 @@
 import re
 from datetime import datetime
-from sqlalchemy import Boolean, String, DateTime, Column, Integer
+from sqlalchemy import Boolean, String, DateTime, Column, Integer, ForeignKey
 from sqlalchemy.ext.declarative import declarative_base
 from sqlalchemy.sql import func
 
@@ -110,4 +110,11 @@ class BlacklistedToken(Base):
     __tablename__ = "blacklisted_tokens"
     id = Column(Integer, primary_key=True, index=True)
     token = Column(String(512), unique=True, nullable=False)
-    blacklisted_at = Column(DateTime(timezone=True), server_default=func.now())
\ No newline at end of file
+    blacklisted_at = Column(DateTime(timezone=True), server_default=func.now())
+
+class Photo(Base):
+    __tablename__ = "photos"
+    user_id = Column(Integer, ForeignKey("users.id"), nullable=False)
+    uuid = Column(String(36), unique=True, index=True, nullable=False, primary_key=True)  # Client-generated UUID
+    filename = Column(String(255), nullable=False)
+    uploaded_at = Column(DateTime(timezone=True), server_default=func.now())
\ No newline at end of file
diff --git a/backend/main/routes/photos.py b/backend/main/routes/photos.py
new file mode 100644
index 00000000..fc19fa7d
--- /dev/null
+++ b/backend/main/routes/photos.py
@@ -0,0 +1,117 @@
+from fastapi import APIRouter, UploadFile, File, Form, Depends, HTTPException, status
+from fastapi.responses import FileResponse
+from sqlalchemy.orm import Session
+import os
+from uuid import uuid4
+from utils import FileTooLargeError, save_file
+from models import Photo, User
+from db.core import get_db
+from routes.auth.utils import get_current_user
+from limiter import limiter
+from fastapi import Request
+import logging
+
+router = APIRouter()
+PHOTO_DIR = "data/photos"
+os.makedirs(PHOTO_DIR, exist_ok=True)
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+MAX_SIZE = 50 * 1024 * 1024 # 50MB
+USER_MAX_STORAGE = 1024 * 1024 * 1024  # 1GB
+
+def get_used_storage(photos: list[Photo]):
+    user_storage = 0
+    for p in photos:
+        try:
+            if os.path.exists(p.filename):
+                user_storage += os.path.getsize(p.filename)
+        except Exception as e:
+            logger.error(e);
+            pass
+    return user_storage
+    
+
+def delete_old_photos(usedStorage: int, photos: list[Photo], db: Session):
+    while usedStorage > USER_MAX_STORAGE and photos:
+        oldest = photos.pop(0)
+        try:
+            if os.path.exists(oldest.filename):
+                user_storage -= os.path.getsize(oldest.filename)
+                os.remove(oldest.filename)
+            db.delete(oldest)
+            db.commit()
+        except Exception as e:
+            logger.warning(f"Failed to delete old photo {oldest.uuid}: {e}")
+
+@router.get("/sync")
+def sync_photos(
+    db: Session = Depends(get_db),
+    current_user: User = Depends(get_current_user)
+):
+    photos = db.query(Photo).filter_by(user_id=current_user.id).all()
+    photos_new = photos.copy()
+
+    for photo in photos:
+        logger.info(f"Checking {photo}")
+        if os.path.exists(photo.filename):
+            photos_new += {
+                "uuid": photo.uuid, 
+                "uploaded_at": photo.uploaded_at, 
+                "filename": photo.filename
+            }
+        else:
+            logger.warning(f"Photo {photo.uuid} doesn't exist")
+
+    return {"photos": photos_new}
+
+@router.post("/upload", status_code=status.HTTP_201_CREATED)
+@limiter.limit("1/minute")
+async def upload_photo(
+    request: Request,
+    photo_uuid: str = Form(...),
+    file: UploadFile = File(...),
+    db: Session = Depends(get_db),
+    current_user: User = Depends(get_current_user)
+):
+    filename = f"{current_user.id}_{photo_uuid}.bin"
+    file_path = os.path.join(PHOTO_DIR, filename)
+
+    # Calculate current user storage usage
+    user_photos = db.query(Photo).filter_by(user_id=current_user.id).order_by(Photo.uploaded_at).all()
+    user_storage = get_used_storage(user_photos)
+    
+    # Read file in chunks, check size
+    try:
+        total_size = await save_file(input=file, output=file_path, max_size=MAX_SIZE)
+    except FileTooLargeError:
+        raise HTTPException(status_code=413, detail="File too large (max 50MB)")
+    
+    # Enforce 1GB per-user storage limit
+    delete_old_photos(usedStorage=user_storage + total_size, photos=user_photos, db=db)
+
+    # Check if UUID already exists for this user
+    if db.query(Photo).filter_by(uuid=photo_uuid, user_id=current_user.id).first():
+        os.remove(file_path)
+        raise HTTPException(status_code=400, detail="Photo UUID already exists.")
+    # Save metadata, including user_id and uuid (attached server-side)
+    photo = Photo(uuid=photo_uuid, user_id=current_user.id, filename=filename)
+    db.add(photo)
+    db.commit()
+    return {"status": "success"}
+
+@router.get("/download/{photo_uuid}")
+def download_photo(
+    photo_uuid: str,
+    db: Session = Depends(get_db),
+    current_user: User = Depends(get_current_user)
+):
+    photo = db.query(Photo).filter_by(uuid=photo_uuid, user_id=current_user.id).first()
+    if not photo:
+        raise HTTPException(status_code=404, detail="Photo not found.")
+    file_path = os.path.join(PHOTO_DIR, photo.filename)
+    if not os.path.exists(file_path):
+        raise HTTPException(status_code=404, detail="File not found on server.")
+    return FileResponse(file_path, media_type="application/octet-stream", filename=photo.filename)
\ No newline at end of file
diff --git a/backend/main/utils.py b/backend/main/utils.py
index fcf600b2..24f9fbb3 100644
--- a/backend/main/utils.py
+++ b/backend/main/utils.py
@@ -1,9 +1,10 @@
 import os
+from os import PathLike
 from functools import wraps
 from pathlib import Path
 from typing import Tuple, Optional
 
-from fastapi import APIRouter, HTTPException
+from fastapi import APIRouter, HTTPException, UploadFile
 from starlette.staticfiles import StaticFiles
 
 from constants import CONTENT_PATH
@@ -87,4 +88,22 @@ def trim_margin(text: str, margin: str = '|') -> str:
             trimmed_lines.append(line[idx + len(margin):])
         else:
             trimmed_lines.append(line)
-    return '\n'.join(trimmed_lines)
\ No newline at end of file
+    return '\n'.join(trimmed_lines)
+
+class FileTooLargeError(Exception): pass
+
+async def save_file(input: UploadFile, output: str | PathLike[str], max_size: int = 0, chunk_size: int = 1024 * 1024):
+    total_size = 0
+    with open(output, "wb") as out_file:
+        while True:
+            chunk = await input.read(chunk_size)
+            if not chunk:
+                break
+            total_size += len(chunk)
+            if max_size != 0 and total_size > max_size:
+                out_file.close()
+                os.remove(output)
+                raise FileTooLargeError()
+            out_file.write(chunk)
+    
+    return total_size
\ No newline at end of file
diff --git a/frontend/css/common/_animations.scss b/frontend/css/common/_animations.scss
index d5ea1875..c5e2e399 100755
--- a/frontend/css/common/_animations.scss
+++ b/frontend/css/common/_animations.scss
@@ -48,4 +48,15 @@
         opacity: 1;
         transform: translateY(0);
     }
+}
+
+@keyframes modalExpand {
+    from { 
+        transform: scale(0.8); 
+        opacity: 0; 
+    }
+    to { 
+        transform: scale(1); 
+        opacity: 1; 
+    }
 }
\ No newline at end of file
diff --git a/frontend/css/photos.scss b/frontend/css/photos.scss
new file mode 100644
index 00000000..7c022bcc
--- /dev/null
+++ b/frontend/css/photos.scss
@@ -0,0 +1,112 @@
+#photo-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 16px;
+    padding: 24px 0;
+    min-height: 200px;
+    position: relative;
+    background: #f8f9fa;
+    border-radius: 12px;
+    transition: box-shadow 0.2s;
+
+    &.dragover {
+        box-shadow: 0 0 0 4px #007bff33;
+        background: #e3f0ff;
+    }
+
+    #gallery-placeholder {
+        grid-column: 1 / -1;
+        text-align: center;
+        color: #888;
+        font-size: 1.1em;
+        padding: 40px 0;
+    }
+      
+    .gallery-thumb {
+        width: 100%;
+        height: 120px;
+        object-fit: cover;
+        border-radius: 8px;
+        cursor: pointer;
+        box-shadow: 0 2px 8px #0001;
+        transition: transform 0.2s, box-shadow 0.2s;
+
+        &:hover {
+            transform: scale(1.04);
+            box-shadow: 0 4px 16px #0002;
+        }
+    }
+}
+
+
+#photo-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0,0,0,0.7);
+    opacity: 1;
+    pointer-events: auto;
+    transition: opacity 0.3s;
+
+    &.hidden {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    .modal-overlay {
+        position: absolute;
+        inset: 0;
+        background: transparent;
+    }
+
+    .modal-content {
+        position: relative;
+        background: #fff;
+        border-radius: 12px;
+        box-shadow: 0 8px 32px #0003;
+        padding: 32px 24px 24px 24px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        min-width: 320px;
+        min-height: 320px;
+        animation: modalExpand 0.3s cubic-bezier(.4,2,.6,1) both;
+
+        #modal-photo {
+            max-width: 80vw;
+            max-height: 60vh;
+            border-radius: 8px;
+            margin-bottom: 24px;
+            box-shadow: 0 2px 16px #0002;
+        }
+
+        .modal-actions {
+            position: absolute;
+            top: 12px;
+            left: 0;
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            padding: 0 24px;
+
+            button {
+                background: #007bff;
+                color: #fff;
+                border: none;
+                border-radius: 6px;
+                padding: 8px 18px;
+                font-size: 1em;
+                cursor: pointer;
+                box-shadow: 0 2px 8px #007bff22;
+                transition: background 0.2s;
+
+                &:hover {
+                    background: #0056b3;
+                }
+            }
+        }
+    }
+}
diff --git a/frontend/js/account/index.ts b/frontend/js/account/index.ts
index 1b3db4b2..10341f46 100644
--- a/frontend/js/account/index.ts
+++ b/frontend/js/account/index.ts
@@ -35,7 +35,7 @@ interface PasswordChangeData {
 
 interface ApiResponse<T = any> {
     data?: T;
-    error?: string;
+    detail?: string;
     message?: string;
     access_token?: string
 }
@@ -96,14 +96,22 @@ type PageType = 'login' | 'register' | 'account';
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify(credentials),
                 });
+
                 const data: ApiResponse = await response.json();
                 if (response.ok) {
                     localStorage.setItem('authToken', data.access_token || '');
+                    // Save password hash to localStorage
+                    const enc = new TextEncoder();
+                    const hashBuffer = await crypto.subtle.digest('SHA-256', enc.encode(password));
+                    const hashArray = Array.from(new Uint8Array(hashBuffer));
+                    const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+                    localStorage.setItem('passwordHash', hashHex);
                     location.href = '/account';
                 } else {
-                    showError(errorMessage, data.error || 'Не удалось войти');
+                    showError(errorMessage, data.detail || 'Не удалось войти');
                 }
             } catch (error) {
+                console.error(error);
                 showError(errorMessage, 'Неизвестная ошибка');
             }
         });
@@ -154,7 +162,7 @@ type PageType = 'login' | 'register' | 'account';
                 if (response.ok) {
                     location.href = `/account/register-code.html?email=${encodeURIComponent(email)}`;
                 } else {
-                    showError(errorMessage, data.error || 'Не удалось зарегистрироваться');
+                    showError(errorMessage, data.detail || 'Не удалось зарегистрироваться');
                 }
             } catch (error) {
                 showError(errorMessage, 'Неизвестная ошибка');
@@ -397,7 +405,7 @@ type PageType = 'login' | 'register' | 'account';
                     closePasswordDialog();
                 }, 2000);
             } else {
-                await showDialogError(dialogError, data.error || 'Не удалось сменить пароль');
+                await showDialogError(dialogError, data.detail || 'Не удалось сменить пароль');
             }
         } catch (error) {
             await showDialogError(dialogError, 'Неизвестная ошибка');
diff --git a/frontend/js/photos.ts b/frontend/js/photos.ts
new file mode 100644
index 00000000..a30e3b7f
--- /dev/null
+++ b/frontend/js/photos.ts
@@ -0,0 +1,225 @@
+(async () => {
+    interface Photo {
+        uuid: string;
+        url: string; // data URL or blob URL
+    }
+    
+    const gallery = document.getElementById('photo-gallery')!;
+    const modal = document.getElementById('photo-modal')!;
+    const modalPhoto = document.getElementById('modal-photo') as HTMLImageElement;
+    const downloadBtn = document.getElementById('download-photo')!;
+    const deleteBtn = document.getElementById('delete-photo')!;
+    const galleryPlaceholder = document.getElementById('gallery-placeholder')!;
+    
+    let photos: Photo[] = [];
+    let currentPhoto: Photo | null = null;
+    
+    function renderGallery() {
+        gallery.innerHTML = '';
+        if (photos.length === 0) {
+            gallery.appendChild(galleryPlaceholder);
+        } else {
+            photos.forEach(photo => {
+                const img = document.createElement('img');
+                img.src = photo.url;
+                img.className = 'gallery-thumb';
+                img.onclick = () => openModal(photo);
+                gallery.appendChild(img);
+            });
+        }
+    }
+    
+    function openModal(photo: Photo) {
+        currentPhoto = photo;
+        modalPhoto.src = photo.url;
+        modal.classList.remove('hidden');
+    }
+    
+    function closeModal() {
+        modal.classList.add('hidden');
+        currentPhoto = null;
+    }
+    
+    // Modal overlay click closes modal
+    modal.querySelector('.modal-overlay')!.addEventListener('click', closeModal);
+    
+    // Download and delete button events (placeholders)
+    downloadBtn.addEventListener('click', () => {
+        if (currentPhoto) {
+            // TODO: implement download logic
+            alert('Download: ' + currentPhoto.uuid);
+        }
+    });
+    deleteBtn.addEventListener('click', () => {
+        if (currentPhoto) {
+            // TODO: implement delete logic
+            alert('Delete: ' + currentPhoto.uuid);
+        }
+    });
+    
+    // --- Encryption Utilities ---
+    async function deriveKeyFromPasswordHash(passwordHash: string): Promise<CryptoKey> {
+        // Use SHA-256 of the password hash as the key material
+        const enc = new TextEncoder();
+        const hashBuffer = await crypto.subtle.digest('SHA-256', enc.encode(passwordHash));
+        return crypto.subtle.importKey(
+            'raw',
+            hashBuffer,
+            { name: 'AES-GCM' },
+            false,
+            ['encrypt', 'decrypt']
+        );
+    }
+
+    async function encryptData(data: ArrayBuffer, key: CryptoKey): Promise<{cipher: ArrayBuffer, iv: Uint8Array}> {
+        const iv = crypto.getRandomValues(new Uint8Array(12)); // 96-bit IV for AES-GCM
+        const cipher = await crypto.subtle.encrypt(
+            { name: 'AES-GCM', iv },
+            key,
+            data
+        );
+        return { cipher, iv };
+    }
+
+    async function decryptData(cipher: ArrayBuffer, key: CryptoKey, iv: Uint8Array): Promise<ArrayBuffer> {
+        return crypto.subtle.decrypt(
+            { name: 'AES-GCM', iv },
+            key,
+            cipher
+        );
+    }
+
+    function generateUUID() {
+        // RFC4122 v4 compliant UUID
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+            const r = crypto.getRandomValues(new Uint8Array(1))[0] % 16;
+            const v = c === 'x' ? r : (r & 0x3 | 0x8);
+            return v.toString(16);
+        });
+    }
+
+    function getPasswordHash(): string | null {
+        return localStorage.getItem('passwordHash');
+    }
+
+    // --- Upload Logic ---
+    async function handleFileUpload(file: File) {
+        const passwordHash = getPasswordHash();
+        if (!passwordHash) {
+            alert('No password hash found. Please log in again.');
+            return;
+        }
+        const key = await deriveKeyFromPasswordHash(passwordHash);
+        const arrayBuffer = await file.arrayBuffer();
+        const { cipher, iv } = await encryptData(arrayBuffer, key);
+        const uuid = generateUUID();
+
+        // Prepare form data
+        const formData = new FormData();
+        formData.append('photo_uuid', uuid);
+        // Combine IV and cipher for upload
+        const ivAndCipher = new Uint8Array(iv.length + cipher.byteLength);
+        ivAndCipher.set(iv, 0);
+        ivAndCipher.set(new Uint8Array(cipher), iv.length);
+        formData.append('file', new Blob([ivAndCipher]), file.name + '.enc');
+
+        // Upload to backend
+        const resp = await fetch('/api/photos/upload', {
+            method: 'POST',
+            body: formData,
+            headers: {
+                "Authorization": `Bearer ${localStorage.getItem("authToken")}`
+            }
+        });
+        if (!resp.ok) {
+            alert('Upload failed: ' + (await resp.text()));
+            return;
+        }
+        // Add to gallery
+        const url = URL.createObjectURL(file); // Show original for now (will reload from backend)
+        photos.push({ uuid, url });
+        renderGallery();
+    }
+
+    // --- Download & Decrypt Logic ---
+    async function downloadAndDecryptPhoto(uuid: string, filename: string): Promise<string> {
+        const passwordHash = getPasswordHash();
+        if (!passwordHash) throw new Error('No password hash found.');
+        const key = await deriveKeyFromPasswordHash(passwordHash);
+        const resp = await fetch(
+            `/api/photos/download/${uuid}`, 
+            {
+                headers: {
+                    "Authorization": `Bearer ${localStorage.getItem("authToken")}`
+                }
+            }
+        );
+        if (!resp.ok) throw new Error('Download failed');
+        const blob = await resp.blob();
+        const buffer = await blob.arrayBuffer();
+        // Extract IV and cipher
+        const iv = new Uint8Array(buffer.slice(0, 12));
+        const cipher = buffer.slice(12);
+        const plain = await decryptData(cipher, key, iv);
+        // Convert to data URL for display
+        const fileType = filename.split('.').pop()?.toLowerCase() === 'jpg' ? 'image/jpeg' : 'image/png';
+        return URL.createObjectURL(new Blob([plain], { type: fileType }));
+    }
+
+    // Drag-and-drop upload integration
+    function handleDrop(e: DragEvent) {
+        e.preventDefault();
+        if (e.dataTransfer && e.dataTransfer.files.length > 0) {
+            for (const file of Array.from(e.dataTransfer.files)) {
+                handleFileUpload(file);
+            }
+        }
+        gallery.classList.remove('dragover');
+    }
+    
+    gallery.addEventListener('dragover', e => {
+        e.preventDefault();
+        gallery.classList.add('dragover');
+    });
+    gallery.addEventListener('dragleave', e => {
+        e.preventDefault();
+        gallery.classList.remove('dragover');
+    });
+    gallery.addEventListener('drop', handleDrop);
+    
+    // --- Load and decrypt photos from backend ---
+    const checkAuth = await fetch("/api/auth/check-auth", {
+        headers: {
+            "Authorization": `Bearer ${localStorage.getItem("authToken")}`
+        }
+    })
+    if (!checkAuth.ok) {
+        location.href = "/account/login";
+        return;
+    }
+
+    const resp = await fetch(
+        '/api/photos/sync', 
+        { 
+            "headers": {
+                "Authorization": `Bearer ${localStorage.getItem("authToken")}`
+            }
+        }
+    );
+    if (!resp.ok) {
+        alert('Не удалось загрузить список фото');
+        return;
+    }
+    const data = await resp.json();
+    const photoList = data.photos as { uuid: string, filename: string }[];
+    photos = [];
+    for (const { uuid, filename } of photoList) {
+        try {
+            const url = await downloadAndDecryptPhoto(uuid, filename);
+            photos.push({ uuid, url });
+        } catch (e) {
+            console.error('Failed to load photo', uuid, e);
+        }
+    }
+    renderGallery();
+})();
\ No newline at end of file
diff --git a/frontend/photos.html b/frontend/photos.html
new file mode 100644
index 00000000..b2670e63
--- /dev/null
+++ b/frontend/photos.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8"/>
+        <meta lang="en" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Toolbox.io</title>
+        <link rel="icon" href="/res/favicon.svg" />
+
+        <link rel="stylesheet" href="/css/common.css" />
+        <link rel="stylesheet" href="/css/photos.css" />
+
+        <script src="/lib/jquery.js"></script>
+        <script type="module" src="/js/common.js"></script>
+    </head>
+    <body>
+        <tio-header class="top" tab="0"></tio-header>
+        <div class="wrapper">
+            <div id="main" class="automargin">
+                <h1>Фото</h1>
+                <div id="photo-gallery" class="gallery-drop-area">
+                    <!-- Thumbnails will be rendered here by JS -->
+                    <div id="gallery-placeholder">Перетащите фото сюда для загрузки</div>
+                </div>
+                <div id="photo-modal" class="hidden">
+                    <div class="modal-overlay"></div>
+                    <div class="modal-content">
+                        <img id="modal-photo" src="" alt="Фото" />
+                        <div class="modal-actions">
+                            <button id="download-photo">Скачать</button>
+                            <button id="delete-photo">Удалить</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <tio-footer></tio-footer>
+        <script type="module" src="/js/photos.js"></script>
+    </body>
+</html>
\ No newline at end of file