diff --git a/README-compose.md b/README-compose.md
index 139042b..f883c16 100644
--- a/README-compose.md
+++ b/README-compose.md
@@ -12,6 +12,10 @@ Lifecycle scripts (mode-aware) are available:
 - `./scripts/start.sh --prod`
 - `./scripts/status.sh --dev|--prod`
 - `./scripts/stop.sh --dev|--prod [--wipe]`
+- `.\scripts\start.ps1 --dev`
+- `.\scripts\start.ps1 --prod`
+- `.\scripts\status.ps1 --dev|--prod`
+- `.\scripts\stop.ps1 --dev|--prod [--wipe]`
 
 ## 1) Prepare environment and secrets
 
diff --git a/README.md b/README.md
index 2be7a4a..a19cef8 100644
--- a/README.md
+++ b/README.md
@@ -52,6 +52,10 @@ Run the entire platform with one command:
 ./scripts/start.sh
 ```
 
+```powershell
+.\scripts\start.ps1
+```
+
 ### Services started:
 
 | Service  | Purpose                                 | Exposed port |
@@ -65,7 +69,7 @@ Run the entire platform with one command:
 
 Open the app at `http://localhost:3000`. The frontend container proxies `/api`, `/auth`, `/health`, `/metrics`, `/docs`, `/redoc`, `/openapi.json` and `/ws/*` (with WebSocket upgrade) to the `api` service, so browser clients only need to talk to port 3000.
 
-### What `start.sh` does automatically
+### What `start.sh` / `start.ps1` do automatically
 
 - verifies required tools (`docker`, `docker compose`, `curl`, `rg`)
 - creates `.env` on first run with generated secrets (`POSTGRES_PASSWORD`, `JWT_SECRET_KEY`)
@@ -92,10 +96,17 @@ docker compose logs -f frontend api worker       # tail live logs
 ./scripts/stop.sh --wipe                         # stop + wipe volumes
 ```
 
+```powershell
+.\scripts\status.ps1                             # compose + health summary
+docker compose logs -f frontend api worker       # tail live logs
+.\scripts\stop.ps1                               # stop stack
+.\scripts\stop.ps1 --wipe                        # stop + wipe volumes
+```
+
 ### Troubleshooting
 
 - If Docker daemon is not running, start Docker Desktop / Docker Engine first.
-- If startup fails after a major change, run `./scripts/stop.sh --wipe` and then `./scripts/start.sh`.
+- If startup fails after a major change, run `./scripts/stop.sh --wipe` (or `.\scripts\stop.ps1 --wipe` on Windows) and then restart.
 - If ports are already in use, stop conflicting services or adjust host port bindings in `compose.yaml` plus overlay files.
 
 ## 🎮 Examples & Demo
@@ -131,7 +142,7 @@ During dev the Vite server listens on `http://localhost:5173`; since `VITE_API_B
 
 If you are new to this codebase, follow this order:
 
-1. **Run the stack first** with `./scripts/start.sh` so you can see the full upload → analysis → results flow end-to-end.
+1. **Run the stack first** with `./scripts/start.sh` (or `.\scripts\start.ps1` on Windows) so you can see the full upload → analysis → results flow end-to-end.
 2. **Read the backend entrypoint** (`backend/app/main.py`) and API router composition (`backend/app/api/router.py`) to understand how routes are wired.
 3. **Study the analysis pipeline** in `backend/app/application/services/analysis_service.py` and worker task orchestration in `backend/app/workers/tasks.py`.
 4. **Review plugin-based checks** under `backend/app/plugins/` (Hadolint, compose runnability, security checks, resource estimation).
diff --git a/backend/app/api/routers/ws.py b/backend/app/api/routers/ws.py
index 3958712..753eee2 100644
--- a/backend/app/api/routers/ws.py
+++ b/backend/app/api/routers/ws.py
@@ -4,11 +4,59 @@
 from fastapi import APIRouter, Query, WebSocket, WebSocketDisconnect
 
 from app.core.security import decode_token
+from app.infrastructure.db.repositories import JobRepository
+from app.infrastructure.db.session import SessionLocal
+from app.infrastructure.events.bus import redis_client
 from app.infrastructure.events.bus import subscribe
 
 router = APIRouter(tags=["websockets"])
 
 
+async def _job_belongs_to_user(job_id: uuid.UUID, user_id: uuid.UUID) -> bool:
+    async with SessionLocal() as session:
+        repo = JobRepository(session)
+        job = await repo.get_job(job_id, user_id)
+        return job is not None
+
+
+async def _user_has_container_access(user_id: uuid.UUID, container_id: str) -> bool:
+    pattern = f"deploy:{user_id}:*"
+    cursor = 0
+    while True:
+        cursor, keys = await redis_client.scan(cursor=cursor, match=pattern, count=100)
+        for key in keys:
+            raw_state = await redis_client.get(key)
+            if not raw_state:
+                continue
+            try:
+                state = json.loads(raw_state)
+            except json.JSONDecodeError:
+                continue
+            if not isinstance(state, dict):
+                continue
+            ids: set[str] = set()
+            top_id = state.get("container_id")
+            if isinstance(top_id, str) and top_id:
+                ids.add(top_id)
+            top_ids = state.get("container_ids")
+            if isinstance(top_ids, list):
+                for row in top_ids:
+                    if isinstance(row, str) and row:
+                        ids.add(row)
+            containers = state.get("containers")
+            if isinstance(containers, list):
+                for row in containers:
+                    if isinstance(row, dict):
+                        row_id = row.get("id")
+                        if isinstance(row_id, str) and row_id:
+                            ids.add(row_id)
+            if container_id in ids:
+                return True
+        if cursor == 0:
+            break
+    return False
+
+
 @router.websocket("/ws/jobs/{job_id}")
 async def job_updates(
     websocket: WebSocket,
@@ -20,13 +68,18 @@ async def job_updates(
         payload = decode_token(token)
         if payload.get("type") != "access":
             raise ValueError("wrong token type")
-        _ = uuid.UUID(payload["sub"])
-        uuid.UUID(job_id)
-    except Exception:
+        user_id = uuid.UUID(payload["sub"])
+        job_uuid = uuid.UUID(job_id)
+    except (KeyError, TypeError, ValueError):
         await websocket.send_json({"error": "invalid token"})
         await websocket.close(code=4401)
         return
 
+    if not await _job_belongs_to_user(job_uuid, user_id):
+        await websocket.send_json({"error": "forbidden"})
+        await websocket.close(code=4403)
+        return
+
     try:
         async for event in subscribe(f"job:{job_id}:events"):
             await websocket.send_text(json.dumps(event))
@@ -45,11 +98,16 @@ async def container_metrics(
         payload = decode_token(token)
         if payload.get("type") != "access":
             raise ValueError("wrong token type")
-        _ = uuid.UUID(payload["sub"])
-    except Exception:
+        user_id = uuid.UUID(payload["sub"])
+    except (KeyError, TypeError, ValueError):
         await websocket.send_json({"error": "invalid token"})
         await websocket.close(code=4401)
         return
+
+    if not await _user_has_container_access(user_id, container_id):
+        await websocket.send_json({"error": "forbidden"})
+        await websocket.close(code=4403)
+        return
     try:
         async for event in subscribe(f"container:{container_id}:metrics"):
             await websocket.send_text(json.dumps(event))
@@ -72,7 +130,7 @@ async def user_container_metrics(
         if payload.get("sub") != user_id:
             raise ValueError("user mismatch")
         uuid.UUID(user_id)
-    except Exception:
+    except (KeyError, TypeError, ValueError):
         await websocket.send_json({"error": "invalid token"})
         await websocket.close(code=4401)
         return
@@ -81,3 +139,29 @@ async def user_container_metrics(
             await websocket.send_text(json.dumps(event))
     except WebSocketDisconnect:
         return
+
+
+@router.websocket("/ws/users/{user_id}/events")
+async def user_events(
+    websocket: WebSocket,
+    user_id: str,
+    token: str = Query(...),
+) -> None:
+    await websocket.accept()
+    try:
+        payload = decode_token(token)
+        if payload.get("type") != "access":
+            raise ValueError("wrong token type")
+        if payload.get("sub") != user_id:
+            raise ValueError("user mismatch")
+        uuid.UUID(user_id)
+    except (KeyError, TypeError, ValueError):
+        await websocket.send_json({"error": "invalid token"})
+        await websocket.close(code=4401)
+        return
+
+    try:
+        async for event in subscribe(f"user:{user_id}:events"):
+            await websocket.send_text(json.dumps(event))
+    except WebSocketDisconnect:
+        return
diff --git a/backend/app/application/services/analysis_service.py b/backend/app/application/services/analysis_service.py
index 6c1d6dc..4bb2bb7 100644
--- a/backend/app/application/services/analysis_service.py
+++ b/backend/app/application/services/analysis_service.py
@@ -64,6 +64,22 @@ def _grade(score: int) -> str:
     return "F"
 
 
+def _build_analysis_started_payload(context: dict[str, Any]) -> dict[str, Any]:
+    filename = context.get("filename")
+    source = context.get("source")
+    dockerfile_content = context.get("dockerfile_content")
+    compose_content = context.get("compose_content")
+    analysis_type = "compose" if isinstance(compose_content, str) and compose_content else "dockerfile"
+    effective_source = compose_content if analysis_type == "compose" else dockerfile_content
+    line_count = len(effective_source.splitlines()) if isinstance(effective_source, str) else 0
+    payload: dict[str, Any] = {"analysis_type": analysis_type, "line_count": max(1, line_count)}
+    if isinstance(filename, str) and filename:
+        payload["filename"] = filename
+    if isinstance(source, str) and source:
+        payload["source"] = source
+    return payload
+
+
 class AnalysisService:
     def __init__(self, session: AsyncSession) -> None:
         self.session = session
@@ -140,7 +156,8 @@ async def analyze_content(
     async def run_job_with_plugins(
         self, user_id: uuid.UUID, job_id: uuid.UUID, context: dict[str, Any], plugin_names: Iterable[str]
     ) -> dict[str, Any]:
-        await publish_event(DomainEvent("user.analysis.started", str(user_id), str(job_id), payload=context))
+        safe_start_payload = _build_analysis_started_payload(context)
+        await publish_event(DomainEvent("user.analysis.started", str(user_id), str(job_id), payload=safe_start_payload))
         await self.repo.update_status(job_id, user_id, JobStatus.running)
         await self.session.commit()
 
diff --git a/backend/app/workers/tasks.py b/backend/app/workers/tasks.py
index 6692f6b..a31ab81 100644
--- a/backend/app/workers/tasks.py
+++ b/backend/app/workers/tasks.py
@@ -88,7 +88,17 @@ async def run_project_analysis(ctx, payload: dict) -> dict:
         repo = JobRepository(session)
         svc = AnalysisService(session)
 
-        await publish_event(DomainEvent("project.analysis_started", str(user_id), str(job_id), payload={"project_path": str(project_path)}))
+        await publish_event(
+            DomainEvent(
+                "project.analysis_started",
+                str(user_id),
+                str(job_id),
+                payload={
+                    "dockerfile_count": len(dockerfiles),
+                    "compose_count": len(compose_files),
+                },
+            )
+        )
         await repo.update_status(job_id, user_id, JobStatus.running)
         await session.commit()
 
diff --git a/backend/tests/test_analysis_service.py b/backend/tests/test_analysis_service.py
index dce5b46..b31d383 100644
--- a/backend/tests/test_analysis_service.py
+++ b/backend/tests/test_analysis_service.py
@@ -1,6 +1,6 @@
 from unittest.mock import AsyncMock
 
-from app.application.services.analysis_service import AnalysisService
+from app.application.services.analysis_service import AnalysisService, _build_analysis_started_payload
 
 
 def test_normalize_issue_uses_level_when_severity_missing():
@@ -70,3 +70,20 @@ def test_normalize_issue_dclint_rdjson_code_object():
     assert issue.line == 7
     assert issue.severity == "error"
     assert issue.suggestion == "Bind ports to a host interface."
+
+
+def test_build_analysis_started_payload_omits_source_content():
+    payload = _build_analysis_started_payload(
+        {
+            "filename": "docker-compose.yml",
+            "source": "upload",
+            "compose_content": "services:\n  web:\n    image: nginx:1.27\n",
+            "dockerfile_content": "",
+        }
+    )
+    assert payload["analysis_type"] == "compose"
+    assert payload["line_count"] == 3
+    assert payload["filename"] == "docker-compose.yml"
+    assert payload["source"] == "upload"
+    assert "compose_content" not in payload
+    assert "dockerfile_content" not in payload
diff --git a/backend/tests/test_ws_metrics.py b/backend/tests/test_ws_metrics.py
index 983ead8..7feb9fe 100644
--- a/backend/tests/test_ws_metrics.py
+++ b/backend/tests/test_ws_metrics.py
@@ -1,5 +1,6 @@
 import json
 import uuid
+from unittest.mock import AsyncMock
 
 from app.core.security import create_token
 
@@ -18,6 +19,7 @@ async def fake_subscribe(channel: str):
         }
 
     monkeypatch.setattr("app.api.routers.ws.subscribe", fake_subscribe)
+    monkeypatch.setattr("app.api.routers.ws._user_has_container_access", AsyncMock(return_value=True))
 
     with client.websocket_connect(f"/ws/metrics/web-container?token={token}") as websocket:
         message = websocket.receive_text()
@@ -42,6 +44,7 @@ async def fake_subscribe(channel: str):
         }
 
     monkeypatch.setattr("app.api.routers.ws.subscribe", fake_subscribe)
+    monkeypatch.setattr("app.api.routers.ws._job_belongs_to_user", AsyncMock(return_value=True))
 
     with client.websocket_connect(f"/ws/jobs/{job_id}?token={token}") as websocket:
         message = websocket.receive_text()
@@ -77,3 +80,54 @@ async def fake_subscribe(channel: str):
     ) as websocket:
         payload = websocket.receive_json()
         assert payload["error"] == "invalid token"
+
+
+def test_ws_jobs_rejects_non_owner_subscription(client, monkeypatch):
+    user_id = uuid.uuid4()
+    job_id = uuid.uuid4()
+    token = create_token(str(user_id), "access", 30)
+    monkeypatch.setattr("app.api.routers.ws._job_belongs_to_user", AsyncMock(return_value=False))
+
+    with client.websocket_connect(f"/ws/jobs/{job_id}?token={token}") as websocket:
+        payload = websocket.receive_json()
+        assert payload["error"] == "forbidden"
+
+
+def test_ws_metrics_rejects_non_owner_subscription(client, monkeypatch):
+    user_id = uuid.uuid4()
+    token = create_token(str(user_id), "access", 30)
+    monkeypatch.setattr("app.api.routers.ws._user_has_container_access", AsyncMock(return_value=False))
+
+    with client.websocket_connect(f"/ws/metrics/web-container?token={token}") as websocket:
+        payload = websocket.receive_json()
+        assert payload["error"] == "forbidden"
+
+
+def test_ws_user_events_streams_with_matching_token(client, monkeypatch):
+    user_id = uuid.uuid4()
+    token = create_token(str(user_id), "access", 30)
+
+    async def fake_subscribe(channel: str):
+        assert channel == f"user:{user_id}:events"
+        yield {
+            "event_name": "user.analysis.completed",
+            "user_id": str(user_id),
+            "job_id": "j-1",
+            "payload": {"status": "done"},
+        }
+
+    monkeypatch.setattr("app.api.routers.ws.subscribe", fake_subscribe)
+
+    with client.websocket_connect(f"/ws/users/{user_id}/events?token={token}") as websocket:
+        payload = websocket.receive_json()
+        assert payload["event_name"] == "user.analysis.completed"
+
+
+def test_ws_user_events_rejects_user_mismatch(client):
+    user_id = uuid.uuid4()
+    other_user_id = uuid.uuid4()
+    token = create_token(str(user_id), "access", 30)
+
+    with client.websocket_connect(f"/ws/users/{other_user_id}/events?token={token}") as websocket:
+        payload = websocket.receive_json()
+        assert payload["error"] == "invalid token"
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f6e135d..2b12c77 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,13 +8,18 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@lottiefiles/dotlottie-react": "^0.19.4",
         "@radix-ui/react-progress": "1.1.2",
         "@radix-ui/react-slot": "1.1.2",
         "@radix-ui/react-tabs": "1.1.3",
+        "@react-three/drei": "^10.7.7",
+        "@react-three/fiber": "^9.6.1",
+        "@rive-app/react-canvas": "^4.28.6",
         "class-variance-authority": "0.7.1",
         "clsx": "2.1.1",
+        "gsap": "^3.15.0",
         "lucide-react": "0.487.0",
-        "motion": "^12.38.0",
+        "motion": "^12.40.0",
         "next-themes": "0.4.6",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
@@ -22,7 +27,10 @@
         "react-syntax-highlighter": "^16.1.1",
         "recharts": "2.15.2",
         "sonner": "2.0.3",
-        "tailwind-merge": "3.2.0"
+        "tailwind-merge": "3.2.0",
+        "three": "^0.184.0",
+        "three-vanta": "npm:three@^0.121.1",
+        "vanta": "^0.5.24"
       },
       "devDependencies": {
         "@eslint/js": "^9.39.4",
@@ -307,6 +315,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@dimforge/rapier3d-compat": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
+      "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@emnapi/core": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.1.tgz",
@@ -600,6 +614,50 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@lottiefiles/dotlottie-react": {
+      "version": "0.19.4",
+      "resolved": "https://registry.npmjs.org/@lottiefiles/dotlottie-react/-/dotlottie-react-0.19.4.tgz",
+      "integrity": "sha512-YgX1Ie0gK9MEA89Ap7Ic/lOv85sOzELV3y3RAQ4GrB79+wJ4gLga9Ge59mWzBqjlbT8bZNhNPEm+jYyV8kMYqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lottiefiles/dotlottie-web": "0.74.0"
+      },
+      "engines": {
+        "node": ">=18.17.0",
+        "npm": ">=9.5.0"
+      },
+      "peerDependencies": {
+        "react": "^17 || ^18 || ^19"
+      }
+    },
+    "node_modules/@lottiefiles/dotlottie-web": {
+      "version": "0.74.0",
+      "resolved": "https://registry.npmjs.org/@lottiefiles/dotlottie-web/-/dotlottie-web-0.74.0.tgz",
+      "integrity": "sha512-rG12+dJSVhQDdleGr9epR7zU/UJ6hh8jzBDHAurClHP5t5dSrOh3eP3UCFxolpVPcobaRVYsBnYg4HQokQewpg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.17.0",
+        "npm": ">=9.5.0"
+      }
+    },
+    "node_modules/@mediapipe/tasks-vision": {
+      "version": "0.10.17",
+      "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.17.tgz",
+      "integrity": "sha512-CZWV/q6TTe8ta61cZXjfnnHsfWIdFhms03M9T7Cnd5y2mdpylJM0rF1qRq+wsQVRMLz1OYPVEBU9ph2Bx8cxrg==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@monogrid/gainmap-js": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@monogrid/gainmap-js/-/gainmap-js-3.4.0.tgz",
+      "integrity": "sha512-2Z0FATFHaoYJ8b+Y4y4Hgfn3FRFwuU5zRrk+9dFWp4uGAdHGqVEdP7HP+gLA3X469KXHmfupJaUbKo1b/aDKIg==",
+      "license": "MIT",
+      "dependencies": {
+        "promise-worker-transferable": "^1.0.4"
+      },
+      "peerDependencies": {
+        "three": ">= 0.159.0"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.1.tgz",
@@ -920,6 +978,112 @@
         }
       }
     },
+    "node_modules/@react-three/drei": {
+      "version": "10.7.7",
+      "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-10.7.7.tgz",
+      "integrity": "sha512-ff+J5iloR0k4tC++QtD/j9u3w5fzfgFAWDtAGQah9pF2B1YgOq/5JxqY0/aVoQG5r3xSZz0cv5tk2YuBob4xEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mediapipe/tasks-vision": "0.10.17",
+        "@monogrid/gainmap-js": "^3.0.6",
+        "@use-gesture/react": "^10.3.1",
+        "camera-controls": "^3.1.0",
+        "cross-env": "^7.0.3",
+        "detect-gpu": "^5.0.56",
+        "glsl-noise": "^0.0.0",
+        "hls.js": "^1.5.17",
+        "maath": "^0.10.8",
+        "meshline": "^3.3.1",
+        "stats-gl": "^2.2.8",
+        "stats.js": "^0.17.0",
+        "suspend-react": "^0.1.3",
+        "three-mesh-bvh": "^0.8.3",
+        "three-stdlib": "^2.35.6",
+        "troika-three-text": "^0.52.4",
+        "tunnel-rat": "^0.1.2",
+        "use-sync-external-store": "^1.4.0",
+        "utility-types": "^3.11.0",
+        "zustand": "^5.0.1"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": "^9.0.0",
+        "react": "^19",
+        "react-dom": "^19",
+        "three": ">=0.159"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-three/fiber": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-9.6.1.tgz",
+      "integrity": "sha512-zF0rsKcVYpcJwbFEnv2HkHX9cvOEgsfQo/X8lwmR2dn13S4qEQJXir9fxf5js2LQFoXqxOY7MDkOkYx2uZ4gSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.17.8",
+        "@types/webxr": "*",
+        "base64-js": "^1.5.1",
+        "buffer": "^6.0.3",
+        "its-fine": "^2.0.0",
+        "react-use-measure": "^2.1.7",
+        "scheduler": "^0.27.0",
+        "suspend-react": "^0.1.3",
+        "use-sync-external-store": "^1.4.0",
+        "zustand": "^5.0.3"
+      },
+      "peerDependencies": {
+        "expo": ">=43.0",
+        "expo-asset": ">=8.4",
+        "expo-file-system": ">=11.0",
+        "expo-gl": ">=11.0",
+        "react": ">=19 <19.3",
+        "react-dom": ">=19 <19.3",
+        "react-native": ">=0.78",
+        "three": ">=0.156"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        },
+        "expo-asset": {
+          "optional": true
+        },
+        "expo-file-system": {
+          "optional": true
+        },
+        "expo-gl": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rive-app/canvas": {
+      "version": "2.37.8",
+      "resolved": "https://registry.npmjs.org/@rive-app/canvas/-/canvas-2.37.8.tgz",
+      "integrity": "sha512-nffrPG+VkBKHAxZdcqYlP5M+n/mOAoagj774HH397UPTsfC27gwQURg64i6dX7WswMc5qIVX0rzCrZ86Wb2HOA==",
+      "license": "MIT"
+    },
+    "node_modules/@rive-app/react-canvas": {
+      "version": "4.28.6",
+      "resolved": "https://registry.npmjs.org/@rive-app/react-canvas/-/react-canvas-4.28.6.tgz",
+      "integrity": "sha512-tMEb7uDr+xuPny4HRVnkfGDHgTCkTFn15u7GHj12hC94N59g/dO15TiGr9312GVTO82FulOymOKy6sgxZyi5rw==",
+      "license": "MIT",
+      "dependencies": {
+        "@rive-app/canvas": "2.37.8"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0"
+      }
+    },
     "node_modules/@rolldown/binding-android-arm64": {
       "version": "1.0.0-rc.10",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.10.tgz",
@@ -1468,6 +1632,12 @@
         "vite": "^5.2.0 || ^6 || ^7 || ^8"
       }
     },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "license": "MIT"
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -1542,6 +1712,12 @@
       "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
       "license": "MIT"
     },
+    "node_modules/@types/draco3d": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.10.tgz",
+      "integrity": "sha512-AX22jp8Y7wwaBgAixaSvkoG4M/+PlAcm3Qs4OW8yT9DM4xUpWKeFhLueTAyZF39pviAdcDdeJoACapiAceqNcw==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1575,6 +1751,12 @@
         "undici-types": "~7.16.0"
       }
     },
+    "node_modules/@types/offscreencanvas": {
+      "version": "2019.7.3",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
+      "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==",
+      "license": "MIT"
+    },
     "node_modules/@types/prismjs": {
       "version": "1.26.6",
       "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.6.tgz",
@@ -1585,7 +1767,6 @@
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -1601,6 +1782,15 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/react-reconciler": {
+      "version": "0.28.9",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.9.tgz",
+      "integrity": "sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-syntax-highlighter": {
       "version": "15.5.13",
       "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.13.tgz",
@@ -1611,12 +1801,38 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/three": {
+      "version": "0.184.1",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.184.1.tgz",
+      "integrity": "sha512-6q4VdiqVsrTRqmk62/BnlcAvIrnDM0zf2ZDVKI5kZiniWrSaOHaQzmbp+BNzoggc/8tgW412pL//wZIxu2PPTA==",
+      "license": "MIT",
+      "dependencies": {
+        "@dimforge/rapier3d-compat": "~0.12.0",
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": ">=0.5.17",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~1.1.1"
+      }
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
       "license": "MIT"
     },
+    "node_modules/@types/webxr": {
+      "version": "0.5.24",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz",
+      "integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.57.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.57.1.tgz",
@@ -1912,6 +2128,24 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@use-gesture/core": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
+      "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==",
+      "license": "MIT"
+    },
+    "node_modules/@use-gesture/react": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
+      "integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@use-gesture/core": "10.3.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.1.tgz",
@@ -2045,6 +2279,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.10.9",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.9.tgz",
@@ -2058,6 +2312,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -2103,6 +2366,30 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -2113,6 +2400,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/camera-controls": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-3.1.2.tgz",
+      "integrity": "sha512-xkxfpG2ECZ6Ww5/9+kf4mfg1VEYAoe9aDSY+IwF0UEs7qEzwy0aVRfs2grImIECs/PoBtWFrh7RXsQkwG922JA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=22.0.0",
+        "npm": ">=10.5.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.126.1"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001780",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001780.tgz",
@@ -2259,11 +2559,28 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -2445,6 +2762,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/detect-gpu": {
+      "version": "5.0.70",
+      "resolved": "https://registry.npmjs.org/detect-gpu/-/detect-gpu-5.0.70.tgz",
+      "integrity": "sha512-bqerEP1Ese6nt3rFkwPnGbsUF9a4q+gMmpTVVOEzoCyeCc+y7/RvJnQZJx1JwhgQI5Ntg0Kgat8Uu7XpBqnz1w==",
+      "license": "MIT",
+      "dependencies": {
+        "webgl-constants": "^1.1.1"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -2465,6 +2791,12 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/draco3d": {
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.7.tgz",
+      "integrity": "sha512-m6WCKt/erDXcw+70IJXnG7M3awwQPAsZvJGX5zY7beBqpELw6RDGkYVU0W43AFxye4pDZ5i2Lbyc/NNGqwjUVQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.321",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.321.tgz",
@@ -2760,6 +3092,12 @@
         }
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.3.tgz",
+      "integrity": "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -2834,13 +3172,13 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "12.38.0",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.38.0.tgz",
-      "integrity": "sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g==",
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.40.0.tgz",
+      "integrity": "sha512-uaBd3qC1v3KQqBEjwTUd183K6PbS+j0yR9w9VmEOLWA/tnUcSn8Xa3uck7t4dgpDoUss8xQTcj8W2L07lrnLFg==",
       "license": "MIT",
       "dependencies": {
-        "motion-dom": "^12.38.0",
-        "motion-utils": "^12.36.0",
+        "motion-dom": "^12.40.0",
+        "motion-utils": "^12.39.0",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -2911,6 +3249,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/glsl-noise": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/glsl-noise/-/glsl-noise-0.0.0.tgz",
+      "integrity": "sha512-b/ZCF6amfAUb7dJM/MxRs7AetQEahYzJ8PtgfrmEdtw6uyGOr+ZSGtgjFm6mfsBkxJ4d2W7kg+Nlqzqvn3Bc0w==",
+      "license": "MIT"
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -2918,6 +3262,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/gsap": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.15.0.tgz",
+      "integrity": "sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -2990,6 +3340,32 @@
       "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==",
       "license": "CC0-1.0"
     },
+    "node_modules/hls.js": {
+      "version": "1.6.16",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.16.tgz",
+      "integrity": "sha512-VSIRpLfRwlAAdGL4wiTucx2ScRipo0ed1FBatWkyt832jC4CReKstga6yIhYVwGu9LOBjuX9wzmRMeQdBJtzEA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3000,6 +3376,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -3103,13 +3485,30 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true,
       "license": "ISC"
     },
+    "node_modules/its-fine": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-2.0.0.tgz",
+      "integrity": "sha512-KLViCmWx94zOvpLwSlsx6yOCeMhZYaxrJV87Po5k/FoZzcPSahvK5qJ7fYhS61sZi5ikmh2S3Hz55A2l3U69ng==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react-reconciler": "^0.28.9"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0"
+      }
+    },
     "node_modules/jiti": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
@@ -3210,6 +3609,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
@@ -3545,6 +3953,16 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/maath": {
+      "version": "0.10.8",
+      "resolved": "https://registry.npmjs.org/maath/-/maath-0.10.8.tgz",
+      "integrity": "sha512-tRvbDF0Pgqz+9XUa4jjfgAQ8/aPKmQdWXilFu2tMy4GWj4NOsx99HlULO4IeREfbO3a0sA145DZYyvXPkybm0g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/three": ">=0.134.0",
+        "three": ">=0.134.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -3555,6 +3973,21 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/meshline": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/meshline/-/meshline-3.3.1.tgz",
+      "integrity": "sha512-/TQj+JdZkeSUOl5Mk2J7eLcYTLiQm2IDzmlSvYm7ov15anEcDJ92GHqqazxTSreeNgfnYu24kiEvvv0WlbCdFQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.137"
+      }
+    },
+    "node_modules/meshoptimizer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-1.1.1.tgz",
+      "integrity": "sha512-oRFNWJRDA/WTrVj7NWvqa5HqE1t9MYDj2VaWirQCzCCrAd2GHrqR/sQezCxiWATPNlKTcRaPRHPJwIRoPBAp5g==",
+      "license": "MIT"
+    },
     "node_modules/minimatch": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
@@ -3569,12 +4002,12 @@
       }
     },
     "node_modules/motion": {
-      "version": "12.38.0",
-      "resolved": "https://registry.npmjs.org/motion/-/motion-12.38.0.tgz",
-      "integrity": "sha512-uYfXzeHlgThchzwz5Te47dlv5JOUC7OB4rjJ/7XTUgtBZD8CchMN8qEJ4ZVsUmTyYA44zjV0fBwsiktRuFnn+w==",
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.40.0.tgz",
+      "integrity": "sha512-yjrHUrBFW6kQvjJwRsoiPSAhC5tRwRqNGJWmiJ4CrGnbKp0V88AdzkhBmDoqIsIPfarOe0Uddd37Xq43/gIocA==",
       "license": "MIT",
       "dependencies": {
-        "framer-motion": "^12.38.0",
+        "framer-motion": "^12.40.0",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -3595,18 +4028,18 @@
       }
     },
     "node_modules/motion-dom": {
-      "version": "12.38.0",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.38.0.tgz",
-      "integrity": "sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA==",
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.40.0.tgz",
+      "integrity": "sha512-HxU3ZaBwNPVQUBQf1xxgq+7JrPNZvjLVxgbpEZL7RrWJnsxOf0/OM+yrHG9ogLQ31Do/r57Oz2gQWPK+6q62mg==",
       "license": "MIT",
       "dependencies": {
-        "motion-utils": "^12.36.0"
+        "motion-utils": "^12.39.0"
       }
     },
     "node_modules/motion-utils": {
-      "version": "12.36.0",
-      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.36.0.tgz",
-      "integrity": "sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==",
+      "version": "12.39.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.39.0.tgz",
+      "integrity": "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==",
       "license": "MIT"
     },
     "node_modules/ms": {
@@ -3770,7 +4203,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -3832,6 +4264,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/potpack": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+      "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==",
+      "license": "ISC"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -3851,6 +4289,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/promise-worker-transferable": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/promise-worker-transferable/-/promise-worker-transferable-1.0.4.tgz",
+      "integrity": "sha512-bN+0ehEnrXfxV2ZQvU2PetO0n4gqBD4ulq3MI1WOPLgr7/Mg9yRQkX5+0v1vagr74ZTsl7XtzlaYDo2EuCeYJw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "is-promise": "^2.1.0",
+        "lie": "^3.0.2"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -3998,6 +4446,21 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-use-measure": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
+      "integrity": "sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/recharts": {
       "version": "2.15.2",
       "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.2.tgz",
@@ -4052,6 +4515,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -4129,7 +4601,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
@@ -4142,7 +4613,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -4178,6 +4648,32 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/stats-gl": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/stats-gl/-/stats-gl-2.4.2.tgz",
+      "integrity": "sha512-g5O9B0hm9CvnM36+v7SFl39T7hmAlv541tU81ME8YeSb3i1CIP5/QdDeSB3A0la0bKNHpxpwxOVRo2wFTYEosQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/three": "*",
+        "three": "^0.170.0"
+      },
+      "peerDependencies": {
+        "@types/three": "*",
+        "three": "*"
+      }
+    },
+    "node_modules/stats-gl/node_modules/three": {
+      "version": "0.170.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.170.0.tgz",
+      "integrity": "sha512-FQK+LEpYc0fBD+J8g6oSEyyNzjp+Q7Ks1C568WWaoMRLW+TkNNWmenWeGgJjV105Gd+p/2ql1ZcjYvNiPZBhuQ==",
+      "license": "MIT"
+    },
+    "node_modules/stats.js": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/stats.js/-/stats.js-0.17.0.tgz",
+      "integrity": "sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==",
+      "license": "MIT"
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -4204,6 +4700,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/suspend-react": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.1.3.tgz",
+      "integrity": "sha512-aqldKgX9aZqpoDp3e8/BZ8Dm7x1pJl+qI3ZKxDN0i/IQTWUwBx/ManmlVJ3wowqbno6c2bmiIfs+Um6LbsjJyQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=17.0"
+      }
+    },
     "node_modules/tailwind-merge": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.2.0.tgz",
@@ -4235,6 +4740,51 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/three": {
+      "version": "0.184.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.184.0.tgz",
+      "integrity": "sha512-wtTRjG92pM5eUg/KuUnHsqSAlPM296brTOcLgMRqEeylYTh/CdtvKUvCyyCQTzFuStieWxvZb8mVTMvdPyUpxg==",
+      "license": "MIT"
+    },
+    "node_modules/three-mesh-bvh": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/three-mesh-bvh/-/three-mesh-bvh-0.8.3.tgz",
+      "integrity": "sha512-4G5lBaF+g2auKX3P0yqx+MJC6oVt6sB5k+CchS6Ob0qvH0YIhuUk1eYr7ktsIpY+albCqE80/FVQGV190PmiAg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">= 0.159.0"
+      }
+    },
+    "node_modules/three-stdlib": {
+      "version": "2.36.1",
+      "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.36.1.tgz",
+      "integrity": "sha512-XyGQrFmNQ5O/IoKm556ftwKsBg11TIb301MB5dWNicziQBEs2g3gtOYIf7pFiLa0zI2gUwhtCjv9fmjnxKZ1Cg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/draco3d": "^1.4.0",
+        "@types/offscreencanvas": "^2019.6.4",
+        "@types/webxr": "^0.5.2",
+        "draco3d": "^1.4.1",
+        "fflate": "^0.6.9",
+        "potpack": "^1.0.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.128.0"
+      }
+    },
+    "node_modules/three-stdlib/node_modules/fflate": {
+      "version": "0.6.10",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
+      "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
+      "license": "MIT"
+    },
+    "node_modules/three-vanta": {
+      "name": "three",
+      "version": "0.121.1",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.121.1.tgz",
+      "integrity": "sha512-+rYhNpW5W1aBdLkPQDld/GA4Sj/uOKJJKVpCAZUbpk/HZEiYRUlPt8+s+9nmxRglWmRHdBa3ERvUwqg4nmoA5w==",
+      "license": "MIT"
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -4258,6 +4808,36 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/troika-three-text": {
+      "version": "0.52.4",
+      "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.52.4.tgz",
+      "integrity": "sha512-V50EwcYGruV5rUZ9F4aNsrytGdKcXKALjEtQXIOBfhVoZU9VAqZNIoGQ3TMiooVqFAbR1w15T+f+8gkzoFzawg==",
+      "license": "MIT",
+      "dependencies": {
+        "bidi-js": "^1.0.2",
+        "troika-three-utils": "^0.52.4",
+        "troika-worker-utils": "^0.52.0",
+        "webgl-sdf-generator": "1.1.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-three-utils": {
+      "version": "0.52.4",
+      "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.52.4.tgz",
+      "integrity": "sha512-NORAStSVa/BDiG52Mfudk4j1FG4jC4ILutB3foPnfGbOeIs9+G5vZLa0pnmnaftZUGm4UwSoqEpWdqvC7zms3A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-worker-utils": {
+      "version": "0.52.0",
+      "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.52.0.tgz",
+      "integrity": "sha512-W1CpvTHykaPH5brv5VHLfQo9D1OYuo0cSBEUQFFT/nBUzM8iD6Lq2/tgG/f1OelbAS1WtaTPQzE5uM49egnngw==",
+      "license": "MIT"
+    },
     "node_modules/ts-api-utils": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
@@ -4277,6 +4857,43 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/tunnel-rat": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/tunnel-rat/-/tunnel-rat-0.1.2.tgz",
+      "integrity": "sha512-lR5VHmkPhzdhrM092lI2nACsLO4QubF0/yoOhzX7c+wIpbN1GjHNzCc91QlpxBi+cnx8vVJ+Ur6vL5cEoQPFpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "zustand": "^4.3.2"
+      }
+    },
+    "node_modules/tunnel-rat/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -4376,6 +4993,30 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/utility-types": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
+      "integrity": "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/vanta": {
+      "version": "0.5.24",
+      "resolved": "https://registry.npmjs.org/vanta/-/vanta-0.5.24.tgz",
+      "integrity": "sha512-fvieEbHy1ZS23zrcX+topzqAgA4Uct1enngOEWLFBgs9TtOf6RDFOYatH7KSVdrABzQDMCQ5myQy+nTSZZwLzg==",
+      "license": "MIT"
+    },
     "node_modules/victory-vendor": {
       "version": "36.9.2",
       "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
@@ -4476,11 +5117,21 @@
         }
       }
     },
+    "node_modules/webgl-constants": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-constants/-/webgl-constants-1.1.1.tgz",
+      "integrity": "sha512-LkBXKjU5r9vAW7Gcu3T5u+5cvSvh5WwINdr0C+9jpzVB41cjQAP5ePArDtk/WHYdVj0GefCgM73BA7FlIiNtdg=="
+    },
+    "node_modules/webgl-sdf-generator": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-sdf-generator/-/webgl-sdf-generator-1.1.1.tgz",
+      "integrity": "sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
@@ -4544,6 +5195,35 @@
       "peerDependencies": {
         "zod": "^3.25.0 || ^4.0.0"
       }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.14",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.14.tgz",
+      "integrity": "sha512-/8tAspM5LMPr28b3fwLYrtdj77ECpfZviaP75CMTnwO8ISyaE4GDIG/9rDDYq/cH9D2Xw2A2RXglLInmVBQB/g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index b60d038..45b7e15 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,13 +10,18 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@lottiefiles/dotlottie-react": "^0.19.4",
     "@radix-ui/react-progress": "1.1.2",
     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-tabs": "1.1.3",
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.6.1",
+    "@rive-app/react-canvas": "^4.28.6",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
+    "gsap": "^3.15.0",
     "lucide-react": "0.487.0",
-    "motion": "^12.38.0",
+    "motion": "^12.40.0",
     "next-themes": "0.4.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
@@ -24,7 +29,10 @@
     "react-syntax-highlighter": "^16.1.1",
     "recharts": "2.15.2",
     "sonner": "2.0.3",
-    "tailwind-merge": "3.2.0"
+    "tailwind-merge": "3.2.0",
+    "three": "^0.184.0",
+    "three-vanta": "npm:three@^0.121.1",
+    "vanta": "^0.5.24"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
diff --git a/frontend/src/auth/AuthProvider.tsx b/frontend/src/auth/AuthProvider.tsx
index a6fe8ba..b420cf6 100644
--- a/frontend/src/auth/AuthProvider.tsx
+++ b/frontend/src/auth/AuthProvider.tsx
@@ -10,6 +10,7 @@ import {
   readUserFromStorage,
   type User,
 } from "../utils/api";
+import { clearNotificationsForUser } from "../utils/notifications";
 
 interface AuthContextValue {
   user: User | null;
@@ -30,10 +31,11 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const [isBooting, setIsBooting] = useState<boolean>(() => !!getAccessToken());
 
   const logout = useCallback(() => {
+    clearNotificationsForUser(user?.id);
     clearSession();
     setUser(null);
     setToken(null);
-  }, []);
+  }, [user?.id]);
 
   useEffect(() => {
     let cancelled = false;
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 35f7161..a7cb9cf 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { FileCode, History, Home, KeyRound, LogOut, BarChart3 } from "lucide-react";
 import { useAuth } from "../auth/AuthProvider";
+import { NotificationEventBridge } from "./NotificationEventBridge";
 import { NotificationPanel } from "./NotificationPanel";
 import { Button } from "./ui/button";
 import { checkHealth } from "../utils/api";
@@ -43,6 +44,7 @@ export function Layout({ children }: LayoutProps) {
 
   return (
     <div className="min-h-screen bg-slate-950 flex flex-col">
+      <NotificationEventBridge />
       <header className="border-b border-slate-800 bg-slate-900/50 backdrop-blur-sm sticky top-0 z-50">
         <div className="container mx-auto px-4 py-4">
           <div className="flex items-center justify-between">
diff --git a/frontend/src/components/NotificationEventBridge.tsx b/frontend/src/components/NotificationEventBridge.tsx
new file mode 100644
index 0000000..82532ec
--- /dev/null
+++ b/frontend/src/components/NotificationEventBridge.tsx
@@ -0,0 +1,187 @@
+import { useEffect, useRef } from "react";
+
+import { useAuth } from "../auth/AuthProvider";
+import { jobs, ws, type DomainEvent, type JobStatus } from "../utils/api";
+import { pushNotification } from "../utils/notifications";
+
+const RECENT_JOB_WINDOW_MS = 15 * 60 * 1000;
+
+function replayStateStorageKey(userId: string): string {
+  return `dqa:notifications:replay:${userId}`;
+}
+
+function loadReplayState(userId: string): Record<string, JobStatus> {
+  try {
+    const raw = localStorage.getItem(replayStateStorageKey(userId));
+    if (!raw) return {};
+    return JSON.parse(raw) as Record<string, JobStatus>;
+  } catch {
+    return {};
+  }
+}
+
+function saveReplayState(userId: string, state: Record<string, JobStatus>) {
+  localStorage.setItem(replayStateStorageKey(userId), JSON.stringify(state));
+}
+
+function notifyFromEvent(event: DomainEvent) {
+  const payload = event.payload ?? {};
+  const jobSuffix = event.job_id ? event.job_id.slice(0, 8) : "unknown";
+  const messageFromPayload =
+    typeof payload.message === "string" && payload.message.trim().length > 0
+      ? payload.message
+      : undefined;
+
+  switch (event.event_name) {
+    case "user.analysis.completed":
+    case "project.analysis_completed":
+      pushNotification(
+        "success",
+        "Analysis Complete",
+        `Job ${jobSuffix} finished successfully`,
+        { dedupeKey: `analysis.completed:${event.job_id ?? "none"}` },
+      );
+      return;
+    case "user.analysis.failed":
+    case "project.analysis_failed":
+      pushNotification(
+        "error",
+        "Analysis Failed",
+        messageFromPayload ?? `Job ${jobSuffix} failed`,
+        { dedupeKey: `analysis.failed:${event.job_id ?? "none"}` },
+      );
+      return;
+    case "container.started":
+      pushNotification(
+        "success",
+        "Containers Running",
+        "Compose containers started successfully",
+        { dedupeKey: `container.started:${event.job_id ?? "none"}` },
+      );
+      return;
+    case "container.stopped":
+    case "project.runtime_stopped":
+      pushNotification(
+        "warning",
+        "Runtime Stopped",
+        "Containers have stopped",
+        { dedupeKey: `${event.event_name}:${event.job_id ?? "none"}` },
+      );
+      return;
+    case "deploy.cleanup_started":
+      pushNotification(
+        "info",
+        "Cleanup Started",
+        "Removing containers created by the failed deploy",
+        { dedupeKey: `${event.event_name}:${event.job_id ?? "none"}` },
+      );
+      return;
+    case "deploy.cleanup_completed":
+      pushNotification(
+        "success",
+        "Cleanup Completed",
+        "Failed deploy containers were removed from the sandbox",
+        { dedupeKey: `${event.event_name}:${event.job_id ?? "none"}` },
+      );
+      return;
+    default:
+      return;
+  }
+}
+
+export function NotificationEventBridge() {
+  const { user } = useAuth();
+  const socketRef = useRef<WebSocket | null>(null);
+
+  useEffect(() => {
+    if (!user?.id) return;
+    let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+    let closedByEffect = false;
+    let replayState = loadReplayState(user.id);
+
+    const reconcileMissedJobOutcomes = async () => {
+      try {
+        const allJobs = await jobs.list();
+        const now = Date.now();
+        const nextReplayState: Record<string, JobStatus> = {};
+
+        for (const job of allJobs) {
+          const createdAt = Date.parse(job.created_at);
+          const isRecent = Number.isFinite(createdAt) && now - createdAt <= RECENT_JOB_WINDOW_MS;
+          const previousStatus = replayState[job.id];
+          const statusChanged = previousStatus != null && previousStatus !== job.status;
+          const isFreshTerminal =
+            previousStatus == null && isRecent && (job.status === "done" || job.status === "failed");
+
+          if ((statusChanged || isFreshTerminal) && job.status === "done") {
+            pushNotification(
+              "success",
+              "Analysis Complete",
+              `Job ${job.id.slice(0, 8)} finished successfully`,
+              { dedupeKey: `analysis.completed:${job.id}`, dedupeWindowMs: 12 * 60 * 60 * 1000 },
+            );
+          } else if ((statusChanged || isFreshTerminal) && job.status === "failed") {
+            const resultMessage =
+              job.result && typeof job.result === "object" && "message" in job.result
+                ? job.result.message
+                : null;
+            pushNotification(
+              "error",
+              "Analysis Failed",
+              typeof resultMessage === "string" && resultMessage.trim()
+                ? resultMessage
+                : `Job ${job.id.slice(0, 8)} failed`,
+              { dedupeKey: `analysis.failed:${job.id}`, dedupeWindowMs: 12 * 60 * 60 * 1000 },
+            );
+          }
+
+          nextReplayState[job.id] = job.status;
+        }
+
+        replayState = nextReplayState;
+        saveReplayState(user.id, nextReplayState);
+      } catch {
+        // Non-blocking reconciliation best effort only.
+      }
+    };
+
+    const connect = () => {
+      if (closedByEffect) return;
+      const socket = ws.connectUserEvents(user.id);
+      socketRef.current = socket;
+      void reconcileMissedJobOutcomes();
+
+      socket.onmessage = (rawEvent) => {
+        try {
+          const event = JSON.parse(rawEvent.data as string) as DomainEvent;
+          notifyFromEvent(event);
+        } catch {
+          // ignore malformed payloads
+        }
+      };
+
+      socket.onclose = () => {
+        if (closedByEffect) return;
+        reconnectTimer = setTimeout(connect, 2000);
+      };
+    };
+
+    connect();
+    return () => {
+      closedByEffect = true;
+      if (reconnectTimer) {
+        clearTimeout(reconnectTimer);
+      }
+      if (socketRef.current) {
+        try {
+          socketRef.current.close();
+        } catch {
+          // noop
+        }
+        socketRef.current = null;
+      }
+    };
+  }, [user?.id]);
+
+  return null;
+}
diff --git a/frontend/src/components/NotificationPanel.tsx b/frontend/src/components/NotificationPanel.tsx
index 04c3c84..b3c5113 100644
--- a/frontend/src/components/NotificationPanel.tsx
+++ b/frontend/src/components/NotificationPanel.tsx
@@ -1,22 +1,23 @@
-import { useState } from "react";
-import { Bell, Check, Trash2, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { AlertCircle, AlertTriangle, Bell, Check, CheckCircle2, Info, Trash2, X } from "lucide-react";
 import {
   useNotifications,
   markAllRead,
+  markNotificationRead,
   clearNotifications,
   type AppNotification,
 } from "../utils/notifications";
 
-function typeIcon(type: AppNotification["type"]) {
+function TypeIcon({ type }: { type: AppNotification["type"] }) {
   switch (type) {
     case "success":
-      return "🟢";
+      return <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" />;
     case "warning":
-      return "🟡";
+      return <AlertTriangle className="w-3.5 h-3.5 text-amber-400" />;
     case "error":
-      return "🔴";
+      return <AlertCircle className="w-3.5 h-3.5 text-red-400" />;
     default:
-      return "🔵";
+      return <Info className="w-3.5 h-3.5 text-sky-400" />;
   }
 }
 
@@ -31,27 +32,62 @@ function timeAgo(ts: number): string {
 export function NotificationPanel() {
   const { notifications, unreadCount } = useNotifications();
   const [open, setOpen] = useState(false);
+  const [activeFilter, setActiveFilter] = useState<"unread" | "all">("all");
+  const panelId = "notification-panel";
+  const filteredNotifications =
+    activeFilter === "unread"
+      ? notifications.filter((notification) => !notification.read)
+      : notifications;
 
   const handleToggle = () => {
-    if (!open && unreadCount > 0) {
-      markAllRead();
-    }
-    setOpen(!open);
+    setOpen((prev) => {
+      const next = !prev;
+      if (next) {
+        setActiveFilter(unreadCount > 0 ? "unread" : "all");
+      }
+      return next;
+    });
   };
 
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+
   return (
     <div className="relative">
       <button
         onClick={handleToggle}
-        className="relative p-1.5 rounded-md text-slate-400 hover:text-white transition-colors"
-        title="Notifications"
+        className={`relative h-9 w-9 rounded-lg border transition-colors ${
+          unreadCount > 0
+            ? "text-sky-300 border-sky-500/40 bg-sky-500/10 hover:bg-sky-500/15"
+            : "text-slate-300 border-slate-700 bg-slate-900 hover:bg-slate-800"
+        } ${open ? "ring-2 ring-sky-500/30" : ""}`}
+        title={unreadCount > 0 ? `${unreadCount} unread notifications` : "Notifications"}
+        aria-label={unreadCount > 0 ? `${unreadCount} unread notifications` : "Notifications"}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        aria-controls={panelId}
       >
-        <Bell className="w-4 h-4" />
+        <Bell className="w-4 h-4 mx-auto" />
         {unreadCount > 0 && (
-          <span className="absolute -top-0.5 -right-0.5 w-4 h-4 bg-blue-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center">
-            {unreadCount > 9 ? "9+" : unreadCount}
+          <span className="absolute -top-1.5 -right-1.5 min-w-5 h-5 px-1 rounded-full bg-sky-500 text-white text-[10px] font-semibold border-2 border-slate-950 inline-flex items-center justify-center">
+            {unreadCount > 99 ? "99+" : unreadCount}
           </span>
         )}
+        <span className="sr-only">
+          {unreadCount > 0
+            ? `${unreadCount} unread notifications`
+            : "No unread notifications"}
+        </span>
       </button>
 
       {open && (
@@ -60,55 +96,127 @@ export function NotificationPanel() {
             className="fixed inset-0 z-40"
             onClick={() => setOpen(false)}
           />
-          <div className="absolute right-0 top-8 z-50 w-80 max-h-96 bg-slate-900 border border-slate-700 rounded-lg shadow-xl overflow-hidden flex flex-col">
-            <div className="flex items-center justify-between px-3 py-2 border-b border-slate-800">
-              <span className="text-xs font-semibold text-slate-300">Notifications</span>
-              <div className="flex items-center gap-1">
+          <div
+            id={panelId}
+            role="dialog"
+            aria-label="Notifications panel"
+            className="absolute right-0 top-11 z-50 w-96 max-w-[calc(100vw-1rem)] max-h-[28rem] bg-slate-900 border border-slate-700 rounded-xl shadow-2xl overflow-hidden flex flex-col"
+          >
+            <div className="flex items-center justify-between px-4 py-3 border-b border-slate-800">
+              <div className="min-w-0">
+                <div className="text-sm font-semibold text-slate-100">Notifications</div>
+                <div className="text-[11px] text-slate-400">
+                  {unreadCount > 0 ? `${unreadCount} unread` : "All caught up"}
+                </div>
+              </div>
+              <div className="flex items-center gap-1.5">
+                {notifications.length > 0 && unreadCount > 0 && (
+                  <button
+                    onClick={() => { markAllRead(); }}
+                    className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-[11px] text-slate-300 hover:text-white hover:bg-slate-800"
+                    title="Mark all as read"
+                  >
+                    <Check className="w-3 h-3" />
+                    Mark all
+                  </button>
+                )}
                 {notifications.length > 0 && (
-                  <>
-                    <button
-                      onClick={() => { markAllRead(); }}
-                      className="p-1 text-slate-500 hover:text-slate-300"
-                      title="Mark all read"
-                    >
-                      <Check className="w-3 h-3" />
-                    </button>
-                    <button
-                      onClick={() => { clearNotifications(); }}
-                      className="p-1 text-slate-500 hover:text-red-400"
-                      title="Clear all"
-                    >
-                      <Trash2 className="w-3 h-3" />
-                    </button>
-                  </>
+                  <button
+                    onClick={() => { clearNotifications(); }}
+                    className="p-1.5 rounded-md text-slate-500 hover:text-red-300 hover:bg-red-500/10"
+                    title="Clear all notifications"
+                    aria-label="Clear all notifications"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </button>
                 )}
                 <button
                   onClick={() => setOpen(false)}
-                  className="p-1 text-slate-500 hover:text-slate-300"
+                  className="p-1.5 rounded-md text-slate-500 hover:text-slate-200 hover:bg-slate-800"
+                  aria-label="Close notifications"
                 >
-                  <X className="w-3 h-3" />
+                  <X className="w-3.5 h-3.5" />
                 </button>
               </div>
             </div>
+            {notifications.length > 0 && (
+              <div className="px-3 py-2 border-b border-slate-800">
+                <div className="inline-flex rounded-md bg-slate-800 p-1">
+                  <button
+                    type="button"
+                    onClick={() => setActiveFilter("unread")}
+                    className={`px-2.5 py-1 text-[11px] rounded transition-colors ${
+                      activeFilter === "unread"
+                        ? "bg-slate-700 text-slate-100"
+                        : "text-slate-400 hover:text-slate-200"
+                    }`}
+                  >
+                    Unread ({unreadCount})
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setActiveFilter("all")}
+                    className={`px-2.5 py-1 text-[11px] rounded transition-colors ${
+                      activeFilter === "all"
+                        ? "bg-slate-700 text-slate-100"
+                        : "text-slate-400 hover:text-slate-200"
+                    }`}
+                  >
+                    All ({notifications.length})
+                  </button>
+                </div>
+              </div>
+            )}
             <div className="overflow-y-auto flex-1">
               {notifications.length === 0 ? (
-                <div className="px-3 py-6 text-center text-xs text-slate-500">
-                  No notifications yet
+                <div className="px-4 py-10 text-center">
+                  <Bell className="w-8 h-8 text-slate-600 mx-auto mb-2" />
+                  <p className="text-sm text-slate-300">No notifications yet</p>
+                  <p className="text-xs text-slate-500 mt-1">
+                    Updates about analysis and runtime events will appear here.
+                  </p>
+                </div>
+              ) : filteredNotifications.length === 0 ? (
+                <div className="px-4 py-10 text-center">
+                  <Check className="w-7 h-7 text-emerald-500 mx-auto mb-2" />
+                  <p className="text-sm text-slate-200">No unread notifications</p>
+                  <p className="text-xs text-slate-500 mt-1">
+                    You are all caught up. Switch to All to review recent updates.
+                  </p>
                 </div>
               ) : (
-                notifications.map((n) => (
+                filteredNotifications.map((n) => (
                   <div
                     key={n.id}
-                    className={`px-3 py-2 border-b border-slate-800 last:border-0 ${
-                      !n.read ? "bg-slate-800/50" : ""
+                    className={`px-4 py-3 border-b border-slate-800/80 last:border-0 cursor-pointer hover:bg-slate-800/40 ${
+                      !n.read ? "bg-slate-800/25 border-l-2 border-l-sky-400" : ""
                     }`}
+                    onClick={() => markNotificationRead(n.id)}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={(event) => {
+                      if (event.key === "Enter" || event.key === " ") {
+                        event.preventDefault();
+                        markNotificationRead(n.id);
+                      }
+                    }}
+                    aria-label={`Notification: ${n.title}. ${n.read ? "Read" : "Unread"}`}
                   >
-                    <div className="flex items-start gap-2">
-                      <span className="text-xs mt-0.5">{typeIcon(n.type)}</span>
+                    <div className="flex items-start gap-2.5">
+                      <span className="mt-0.5">
+                        <TypeIcon type={n.type} />
+                      </span>
                       <div className="flex-1 min-w-0">
-                        <div className="text-xs font-medium text-slate-200">{n.title}</div>
-                        <div className="text-xs text-slate-400 truncate">{n.message}</div>
-                        <div className="text-[10px] text-slate-600 mt-0.5">{timeAgo(n.timestamp)}</div>
+                        <div className="text-xs font-semibold text-slate-100 flex items-center gap-2">
+                          <span className="truncate">{n.title}</span>
+                          {!n.read && (
+                            <span className="inline-block h-1.5 w-1.5 rounded-full bg-sky-400 shrink-0" />
+                          )}
+                        </div>
+                        <div className="text-xs text-slate-400 mt-0.5 leading-relaxed">
+                          {n.message}
+                        </div>
+                        <div className="text-[10px] text-slate-500 mt-1.5">{timeAgo(n.timestamp)}</div>
                       </div>
                     </div>
                   </div>
diff --git a/frontend/src/components/auth/AuthShell.tsx b/frontend/src/components/auth/AuthShell.tsx
new file mode 100644
index 0000000..4be2ec6
--- /dev/null
+++ b/frontend/src/components/auth/AuthShell.tsx
@@ -0,0 +1,501 @@
+import { useEffect, useRef, type CSSProperties, type ReactNode } from "react";
+import {
+  Boxes,
+  Container,
+  FileCode2,
+  Route,
+  Server,
+  Shield,
+  ShieldAlert,
+  Workflow,
+  Zap,
+} from "lucide-react";
+
+interface AuthShellProps {
+  mode: "login" | "register";
+  children: ReactNode;
+}
+
+function FloatingTile({
+  className,
+  icon,
+}: {
+  className: string;
+  icon: ReactNode;
+}) {
+  return (
+    <div className={className}>
+      {icon}
+    </div>
+  );
+}
+
+function NodeCard({
+  title,
+  subtitle,
+  icon,
+  colorClass,
+  className,
+}: {
+  title: string;
+  subtitle: string;
+  icon: ReactNode;
+  colorClass: string;
+  className: string;
+}) {
+  return (
+    <div className={className}>
+      <div className={`auth-flow-node-frame rounded-xl border bg-slate-900/94 px-4 py-3.5 ${colorClass}`}>
+        <div className="flex items-center gap-2 text-sm font-medium text-slate-200">
+          {icon}
+          {title}
+        </div>
+        <div className="mt-1.5 text-xs text-slate-400">{subtitle}</div>
+      </div>
+    </div>
+  );
+}
+
+function MiniChip({
+  label,
+  icon,
+  className,
+}: {
+  label: string;
+  icon: ReactNode;
+  className: string;
+}) {
+  return (
+    <div className={`${className} auth-flow-chip`}>
+      <span className="text-slate-300">{icon}</span>
+      <span>{label}</span>
+    </div>
+  );
+}
+
+function ContainerFlowPanel() {
+  const nodeClass =
+    "absolute left-1/2 z-30 w-[34%] -translate-x-1/2 -translate-y-1/2";
+  const chipClass =
+    "absolute z-30 inline-flex h-10 w-[24%] -translate-y-1/2 items-center justify-center gap-1.5 rounded-xl border bg-slate-900/92 px-3 text-xs text-slate-300 shadow-[0_8px_20px_rgba(2,6,23,0.28)]";
+
+  return (
+    <div className="relative h-full min-h-[390px] flex-1 overflow-hidden rounded-2xl border border-slate-500/80 bg-slate-950/88 p-4">
+
+      {/*
+        The diagram uses one shared percentage coordinate system:
+        - left chips:  left 8%, width 24%  => right edge 32%
+        - node cards:  left 50%, width 34% => edges 33% and 67%
+        - right chips: right 8%, width 24% => left edge 68%
+        SVG paths intentionally overlap those edges by ~1 so the lines sit
+        underneath the borders and look physically connected on every width.
+      */}
+      <svg
+        className="pointer-events-none absolute inset-0 z-10 h-full w-full"
+        viewBox="0 0 100 100"
+        preserveAspectRatio="none"
+        aria-hidden="true"
+      >
+        <defs>
+          <linearGradient id="auth-flow-side-link-1-left" x1="31.5" y1="9" x2="33.5" y2="14" gradientUnits="userSpaceOnUse">
+            <stop offset="0%" stopColor="rgb(56 189 248)" stopOpacity="0.9" />
+            <stop offset="100%" stopColor="rgb(34 211 238)" stopOpacity="0.9" />
+          </linearGradient>
+          <linearGradient id="auth-flow-side-link-1-right" x1="68.5" y1="20" x2="66.5" y2="14" gradientUnits="userSpaceOnUse">
+            <stop offset="0%" stopColor="rgb(56 189 248)" stopOpacity="0.9" />
+            <stop offset="100%" stopColor="rgb(34 211 238)" stopOpacity="0.9" />
+          </linearGradient>
+          <linearGradient id="auth-flow-side-link-2-left" x1="31.5" y1="43" x2="33.5" y2="39" gradientUnits="userSpaceOnUse">
+            <stop offset="0%" stopColor="rgb(52 211 153)" stopOpacity="0.9" />
+            <stop offset="100%" stopColor="rgb(16 185 129)" stopOpacity="0.9" />
+          </linearGradient>
+          <linearGradient id="auth-flow-side-link-2-right" x1="68.5" y1="34" x2="66.5" y2="39" gradientUnits="userSpaceOnUse">
+            <stop offset="0%" stopColor="rgb(52 211 153)" stopOpacity="0.9" />
+            <stop offset="100%" stopColor="rgb(16 185 129)" stopOpacity="0.9" />
+          </linearGradient>
+          <linearGradient id="auth-flow-side-link-3-left" x1="31.5" y1="60" x2="33.5" y2="64" gradientUnits="userSpaceOnUse">
+            <stop offset="0%" stopColor="rgb(56 189 248)" stopOpacity="0.9" />
+            <stop offset="100%" stopColor="rgb(14 165 233)" stopOpacity="0.9" />
+          </linearGradient>
+          <linearGradient id="auth-flow-side-link-3-right" x1="68.5" y1="71" x2="66.5" y2="64" gradientUnits="userSpaceOnUse">
+            <stop offset="0%" stopColor="rgb(56 189 248)" stopOpacity="0.9" />
+            <stop offset="100%" stopColor="rgb(14 165 233)" stopOpacity="0.9" />
+          </linearGradient>
+          <linearGradient id="auth-flow-side-link-4-left" x1="31.5" y1="93" x2="33.5" y2="89" gradientUnits="userSpaceOnUse">
+            <stop offset="0%" stopColor="rgb(251 191 36)" stopOpacity="0.9" />
+            <stop offset="100%" stopColor="rgb(245 158 11)" stopOpacity="0.9" />
+          </linearGradient>
+          <linearGradient id="auth-flow-side-link-4-right" x1="68.5" y1="83" x2="66.5" y2="89" gradientUnits="userSpaceOnUse">
+            <stop offset="0%" stopColor="rgb(251 191 36)" stopOpacity="0.9" />
+            <stop offset="100%" stopColor="rgb(245 158 11)" stopOpacity="0.9" />
+          </linearGradient>
+          <linearGradient id="auth-flow-main-link-1" x1="50" y1="19.5" x2="50" y2="32.5" gradientUnits="userSpaceOnUse">
+            <stop offset="0%" stopColor="rgb(34 211 238)" stopOpacity="0.9" />
+            <stop offset="100%" stopColor="rgb(16 185 129)" stopOpacity="0.9" />
+          </linearGradient>
+          <linearGradient id="auth-flow-main-link-2" x1="50" y1="44.5" x2="50" y2="57.5" gradientUnits="userSpaceOnUse">
+            <stop offset="0%" stopColor="rgb(16 185 129)" stopOpacity="0.9" />
+            <stop offset="100%" stopColor="rgb(14 165 233)" stopOpacity="0.9" />
+          </linearGradient>
+          <linearGradient id="auth-flow-main-link-3" x1="50" y1="69.5" x2="50" y2="82.5" gradientUnits="userSpaceOnUse">
+            <stop offset="0%" stopColor="rgb(14 165 233)" stopOpacity="0.9" />
+            <stop offset="100%" stopColor="rgb(245 158 11)" stopOpacity="0.9" />
+          </linearGradient>
+        </defs>
+        <g
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="0.8"
+          vectorEffect="non-scaling-stroke"
+        >
+          <path className="auth-flow-link auth-flow-link-delay-0" d="M 31.5 9 L 33.5 14" stroke="url(#auth-flow-side-link-1-left)" />
+          <path className="auth-flow-link auth-flow-link-delay-1" d="M 68.5 20 L 66.5 14" stroke="url(#auth-flow-side-link-1-right)" />
+
+          <path className="auth-flow-link auth-flow-link-delay-2" d="M 31.5 43 L 33.5 39" stroke="url(#auth-flow-side-link-2-left)" />
+          <path className="auth-flow-link auth-flow-link-delay-3" d="M 68.5 34 L 66.5 39" stroke="url(#auth-flow-side-link-2-right)" />
+
+          <path className="auth-flow-link auth-flow-link-delay-0" d="M 31.5 60 L 33.5 64" stroke="url(#auth-flow-side-link-3-left)" />
+          <path className="auth-flow-link auth-flow-link-delay-1" d="M 68.5 71 L 66.5 64" stroke="url(#auth-flow-side-link-3-right)" />
+
+          <path className="auth-flow-link auth-flow-link-delay-2" d="M 31.5 93 L 33.5 89" stroke="url(#auth-flow-side-link-4-left)" />
+          <path className="auth-flow-link auth-flow-link-delay-3" d="M 68.5 83 L 66.5 89" stroke="url(#auth-flow-side-link-4-right)" />
+
+          <path className="auth-flow-spine auth-flow-link-delay-1" d="M 50 19.5 V 32.5" stroke="url(#auth-flow-main-link-1)" />
+          <path className="auth-flow-spine auth-flow-link-delay-2" d="M 50 44.5 V 57.5" stroke="url(#auth-flow-main-link-2)" />
+          <path className="auth-flow-spine auth-flow-link-delay-3" d="M 50 69.5 V 82.5" stroke="url(#auth-flow-main-link-3)" />
+        </g>
+      </svg>
+
+      <style>
+        {`
+          @keyframes authFlowLinkPulse {
+            0%, 100% { opacity: 0.65; }
+            50% { opacity: 1; }
+          }
+
+          @keyframes authFlowDashTravel {
+            to { stroke-dashoffset: -14; }
+          }
+
+          @keyframes authFlowNodeGlow {
+            0%, 100% { box-shadow: 0 0 0 rgba(2, 6, 23, 0.25); }
+            50% { box-shadow: 0 0 0.8rem rgba(56, 189, 248, 0.18); }
+          }
+
+          @keyframes authFlowChipBreath {
+            0%, 100% { opacity: 0.9; }
+            50% { opacity: 1; }
+          }
+
+          .auth-flow-link {
+            animation: authFlowLinkPulse 3.6s ease-in-out infinite;
+          }
+
+          .auth-flow-link-delay-0 { animation-delay: 0s; }
+          .auth-flow-link-delay-1 { animation-delay: 0.35s; }
+          .auth-flow-link-delay-2 { animation-delay: 0.7s; }
+          .auth-flow-link-delay-3 { animation-delay: 1.05s; }
+
+          .auth-flow-spine {
+            stroke-dasharray: 3 4;
+            animation:
+              authFlowDashTravel 1.8s linear infinite,
+              authFlowLinkPulse 4.2s ease-in-out infinite;
+          }
+
+          .auth-flow-node-frame {
+            animation: authFlowNodeGlow 5.2s ease-in-out infinite;
+          }
+
+          .auth-flow-chip {
+            animation: authFlowChipBreath 4.6s ease-in-out infinite;
+          }
+
+          @media (prefers-reduced-motion: reduce) {
+            .auth-flow-link,
+            .auth-flow-spine,
+            .auth-flow-node-frame,
+            .auth-flow-chip {
+              animation: none !important;
+            }
+          }
+        `}
+      </style>
+
+      <NodeCard
+        title="frontend-app"
+        subtitle="presentation layer"
+        icon={<Workflow className="h-[18px] w-[18px] text-cyan-400" />}
+        colorClass="border-cyan-500/45 shadow-[0_0_22px_rgba(34,211,238,0.22)]"
+        className={`${nodeClass} top-[14%]`}
+      />
+      <NodeCard
+        title="api-gateway"
+        subtitle="service orchestration"
+        icon={<Server className="h-[18px] w-[18px] text-emerald-400" />}
+        colorClass="border-emerald-500/50 shadow-[0_0_26px_rgba(16,185,129,0.25)]"
+        className={`${nodeClass} top-[39%]`}
+      />
+      <NodeCard
+        title="worker-queue"
+        subtitle="async execution"
+        icon={<Boxes className="h-[18px] w-[18px] text-sky-400" />}
+        colorClass="border-sky-500/45 shadow-[0_0_22px_rgba(14,165,233,0.25)]"
+        className={`${nodeClass} top-[64%]`}
+      />
+      <NodeCard
+        title="security-scan"
+        subtitle="quality controls"
+        icon={<Shield className="h-[18px] w-[18px] text-amber-400" />}
+        colorClass="border-amber-500/45 shadow-[0_0_22px_rgba(245,158,11,0.2)]"
+        className={`${nodeClass} top-[89%]`}
+      />
+
+      <MiniChip
+        label="pages"
+        icon={<FileCode2 className="h-4 w-4 text-cyan-300" />}
+        className={`${chipClass} left-[8%] top-[9%] border-cyan-500/35`}
+      />
+      <MiniChip
+        label="routes"
+        icon={<Route className="h-4 w-4 text-cyan-300" />}
+        className={`${chipClass} right-[8%] top-[20%] border-cyan-500/35`}
+      />
+      <MiniChip
+        label="/auth"
+        icon={<Server className="h-4 w-4 text-emerald-300" />}
+        className={`${chipClass} left-[8%] top-[43%] border-emerald-500/35`}
+      />
+      <MiniChip
+        label="ws-events"
+        icon={<Zap className="h-4 w-4 text-emerald-300" />}
+        className={`${chipClass} right-[8%] top-[34%] border-emerald-500/35`}
+      />
+      <MiniChip
+        label="jobs"
+        icon={<Boxes className="h-4 w-4 text-sky-300" />}
+        className={`${chipClass} left-[8%] top-[60%] border-sky-500/35`}
+      />
+      <MiniChip
+        label="runtime"
+        icon={<Container className="h-4 w-4 text-sky-300" />}
+        className={`${chipClass} right-[8%] top-[71%] border-sky-500/35`}
+      />
+      <MiniChip
+        label="hadolint"
+        icon={<Shield className="h-4 w-4 text-amber-300" />}
+        className={`${chipClass} left-[8%] top-[93%] border-amber-500/35`}
+      />
+      <MiniChip
+        label="vuln scan"
+        icon={<ShieldAlert className="h-4 w-4 text-amber-300" />}
+        className={`${chipClass} right-[8%] top-[83%] border-amber-500/35`}
+      />
+    </div>
+  );
+}
+
+export function AuthShell({ mode, children }: AuthShellProps) {
+  const vantaRef = useRef<HTMLDivElement | null>(null);
+  const vantaEffectRef = useRef<{ destroy: () => void } | null>(null);
+
+  useEffect(() => {
+    let isCancelled = false;
+
+    const initVantaWaves = async () => {
+      if (!vantaRef.current || vantaEffectRef.current) return;
+
+      try {
+        const THREE = await import("three-vanta");
+        (globalThis as { THREE?: unknown }).THREE = THREE;
+        const vantaModule = await import("vanta/dist/vanta.waves.min");
+
+        if (isCancelled || !vantaRef.current) return;
+
+        const globalVanta = (globalThis as { VANTA?: { WAVES?: unknown } }).VANTA;
+        const WAVES = (globalVanta?.WAVES ??
+          (vantaModule as { default?: unknown }).default ??
+          (vantaModule as { WAVES?: unknown }).WAVES) as
+          | ((options: Record<string, unknown>) => { destroy: () => void })
+          | undefined;
+
+        if (typeof WAVES !== "function") {
+          throw new Error("Vanta WAVES effect did not load as a callable module.");
+        }
+
+        vantaEffectRef.current = WAVES({
+          el: vantaRef.current,
+          THREE,
+          mouseControls: true,
+          touchControls: true,
+          gyroControls: false,
+          minHeight: 200,
+          minWidth: 200,
+          scale: 1,
+          scaleMobile: 1,
+          backgroundColor: 0x01040f,
+          color: 0x1e3a8a,
+          shininess: 64,
+          waveHeight: 20,
+          waveSpeed: 0.85,
+          zoom: 0.88,
+        });
+      } catch (error) {
+        console.error("Failed to initialize Vanta waves background:", error);
+      }
+    };
+
+    void initVantaWaves();
+
+    return () => {
+      isCancelled = true;
+      vantaEffectRef.current?.destroy();
+      vantaEffectRef.current = null;
+      delete (globalThis as { THREE?: unknown }).THREE;
+    };
+  }, []);
+
+  const whaleAgents = [
+    { top: "6%", left: "5%", size: 186, duration: 18, delay: -3 },
+    { top: "12%", left: "52%", size: 204, duration: 20, delay: -8 },
+    { top: "18%", left: "82%", size: 174, duration: 21, delay: -5 },
+    { top: "24%", left: "28%", size: 228, duration: 22, delay: -1 },
+    { top: "31%", left: "66%", size: 192, duration: 19, delay: -11 },
+    { top: "38%", left: "9%", size: 216, duration: 24, delay: -6 },
+    { top: "46%", left: "44%", size: 240, duration: 23, delay: -14 },
+    { top: "54%", left: "79%", size: 180, duration: 20, delay: -9 },
+    { top: "61%", left: "18%", size: 210, duration: 25, delay: -4 },
+    { top: "69%", left: "58%", size: 246, duration: 24, delay: -12 },
+    { top: "76%", left: "87%", size: 186, duration: 20, delay: -16 },
+    { top: "84%", left: "34%", size: 234, duration: 23, delay: -7 },
+    { top: "90%", left: "70%", size: 198, duration: 22, delay: -10 },
+    { top: "95%", left: "10%", size: 174, duration: 19, delay: -13 },
+  ] as const;
+
+  return (
+    <div className="relative min-h-screen overflow-x-hidden bg-slate-950">
+      <div className="absolute inset-0">
+        <div ref={vantaRef} className="auth-vanta-layer absolute inset-0" />
+        <div className="pointer-events-none absolute inset-0">
+          {whaleAgents.map((whale, index) => (
+            <div
+              key={`bg-whale-${whale.top}-${whale.left}-${index}`}
+              className="auth-floating-whale"
+              style={
+                {
+                  top: whale.top,
+                  left: whale.left,
+                  width: `${whale.size}px`,
+                  height: `${Math.round(whale.size * 0.62)}px`,
+                  animationDuration: `${whale.duration}s`,
+                  animationDelay: `${whale.delay}s`,
+                } as CSSProperties
+              }
+            >
+              <svg viewBox="0 0 120 80" className="h-full w-full">
+                <g fill="none" stroke="rgba(12,74,110,0.95)" strokeWidth="2.2">
+                  <path d="M10 50 Q35 28 68 36 Q80 30 94 34 Q100 26 113 24 Q107 34 112 45 Q106 43 98 45 Q89 50 82 58 Q62 74 33 66 Q20 62 10 50 Z" fill="rgba(8,27,48,0.72)" />
+                  <rect x="47" y="18" width="7" height="6" rx="1.3" fill="rgba(14,116,144,0.58)" stroke="none" />
+                  <rect x="56" y="18" width="7" height="6" rx="1.3" fill="rgba(14,116,144,0.58)" stroke="none" />
+                  <rect x="65" y="18" width="7" height="6" rx="1.3" fill="rgba(14,116,144,0.58)" stroke="none" />
+                  <circle cx="33.5" cy="48" r="3" fill="rgba(224,242,254,0.92)" stroke="none" />
+                  <circle cx="33.2" cy="48.2" r="1.45" fill="rgba(8,47,73,0.92)" stroke="none" />
+                  <circle cx="32.7" cy="47.35" r="0.6" fill="rgba(255,255,255,0.9)" stroke="none" />
+                </g>
+              </svg>
+            </div>
+          ))}
+        </div>
+        <div className="pointer-events-none absolute inset-0 bg-slate-950/8" />
+      </div>
+
+      <style>
+        {`
+          .auth-vanta-layer {
+            opacity: 0.44;
+            mix-blend-mode: screen;
+          }
+
+          @keyframes authWhaleFloat {
+            0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
+            20% { transform: translate3d(16px, -18px, 0) rotate(2deg); }
+            45% { transform: translate3d(-10px, -28px, 0) rotate(-1.6deg); }
+            70% { transform: translate3d(18px, -12px, 0) rotate(2.4deg); }
+          }
+
+          .auth-floating-whale {
+            position: absolute;
+            opacity: 0.86;
+            filter: drop-shadow(0 0 12px rgba(8, 47, 73, 0.42));
+            animation: authWhaleFloat ease-in-out infinite;
+            will-change: transform;
+          }
+
+          @media (prefers-reduced-motion: reduce) {
+            .auth-vanta-layer {
+              opacity: 0.18;
+            }
+            .auth-floating-whale {
+              animation: none !important;
+              opacity: 0.28;
+            }
+          }
+        `}
+      </style>
+
+      <div className="relative mx-auto grid min-h-screen max-w-7xl grid-cols-1 lg:grid-cols-[1.05fr_0.95fr]">
+        <section className="hidden min-h-0 flex-col border-r border-slate-800/80 px-10 py-12 lg:flex">
+          <div className="shrink-0">
+            <div className="inline-flex items-center gap-2 rounded-full border border-slate-500/80 bg-slate-950/88 px-3 py-1 text-xs text-white">
+              <FileCode2 className="h-3.5 w-3.5 text-sky-400" />
+              Docker Quality Analyzer
+            </div>
+            <div className="mt-6 w-full rounded-xl border border-slate-500/80 bg-slate-950/88 p-4">
+              <h1 className="text-4xl font-semibold leading-tight text-white">
+                Analyze Docker quality with confidence.
+              </h1>
+              <p className="mt-4 text-sm leading-relaxed text-slate-200">
+                Lint, security, runnability, and project-level insights in one place. Sign in to continue
+                monitoring your container workflows.
+              </p>
+            </div>
+          </div>
+
+          <div className="mt-8 flex min-h-0 flex-1">
+            <ContainerFlowPanel />
+          </div>
+
+          <div className="mt-6 shrink-0 rounded-xl border border-slate-500/80 bg-slate-950/88 p-4">
+            <div className="text-sm font-medium text-white">
+              {mode === "login" ? "Welcome back" : "Create your workspace"}
+            </div>
+            <div className="mt-1 text-xs text-slate-200">
+              Rebuilt flow scene with clearer links and stronger node hierarchy.
+            </div>
+          </div>
+        </section>
+
+        <section className="flex items-center justify-center px-4 py-10 sm:px-8">
+          <div className="absolute inset-x-0 top-5 flex items-center justify-center lg:hidden">
+            <div className="relative w-full max-w-sm rounded-xl border border-slate-800/80 bg-slate-900/40 px-4 py-3">
+              <div className="inline-flex items-center gap-2 rounded-full border border-slate-700 bg-slate-900/80 px-2.5 py-1 text-[11px] text-slate-300">
+                <FileCode2 className="h-3 w-3 text-sky-400" />
+                Docker Quality Analyzer
+              </div>
+              <FloatingTile
+                className="absolute right-3 top-2 rounded-lg border border-slate-700 bg-slate-900/80 p-1.5"
+                icon={<Container className="h-3.5 w-3.5 text-emerald-400" />}
+              />
+              <FloatingTile
+                className="absolute bottom-2 right-12 rounded-lg border border-slate-700 bg-slate-900/80 p-1.5"
+                icon={<Boxes className="h-3.5 w-3.5 text-sky-400" />}
+              />
+            </div>
+          </div>
+          <div className="w-full max-w-lg">{children}</div>
+        </section>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/AnalysisProgress.tsx b/frontend/src/pages/AnalysisProgress.tsx
index eeb2d62..d4fb1df 100644
--- a/frontend/src/pages/AnalysisProgress.tsx
+++ b/frontend/src/pages/AnalysisProgress.tsx
@@ -237,7 +237,9 @@ export function AnalysisProgress() {
       // sessionStorage may be blocked; safe to ignore
     }
     toast.success("Analysis complete");
-    pushNotification("success", "Analysis Complete", `Job ${latestJob.id.slice(0, 8)} finished successfully`);
+    pushNotification("success", "Analysis Complete", `Job ${latestJob.id.slice(0, 8)} finished successfully`, {
+      dedupeKey: `analysis.completed:${latestJob.id}`,
+    });
     closeSocket();
     setTimeout(() => {
       navigate(`/results?jobId=${latestJob.id}`);
@@ -248,7 +250,9 @@ export function AnalysisProgress() {
     setJobStatus("failed");
     failAllRemaining(message);
     toast.error(message);
-    pushNotification("error", "Analysis Failed", message);
+    pushNotification("error", "Analysis Failed", message, {
+      dedupeKey: `analysis.failed:${jobId ?? "unknown"}`,
+    });
     closeSocket();
   };
 
diff --git a/frontend/src/pages/AuthLayout.tsx b/frontend/src/pages/AuthLayout.tsx
new file mode 100644
index 0000000..d527171
--- /dev/null
+++ b/frontend/src/pages/AuthLayout.tsx
@@ -0,0 +1,14 @@
+import { Outlet, useLocation } from "react-router-dom";
+
+import { AuthShell } from "../components/auth/AuthShell";
+
+export function AuthLayout() {
+  const location = useLocation();
+  const mode = location.pathname === "/register" ? "register" : "login";
+
+  return (
+    <AuthShell mode={mode}>
+      <Outlet />
+    </AuthShell>
+  );
+}
diff --git a/frontend/src/pages/ContainerExecution.tsx b/frontend/src/pages/ContainerExecution.tsx
index 91c9546..f3544e6 100644
--- a/frontend/src/pages/ContainerExecution.tsx
+++ b/frontend/src/pages/ContainerExecution.tsx
@@ -314,7 +314,9 @@ export function ContainerExecution() {
         "done",
         ids.length > 0 ? `${ids.length} container(s) started` : "Container started",
       );
-      pushNotification("success", "Containers Running", `${ids.length || 1} container(s) are now running`);
+      pushNotification("success", "Containers Running", `${ids.length || 1} container(s) are now running`, {
+        dedupeKey: `container.started:${parsed.job_id ?? job?.id ?? "unknown"}`,
+      });
     } else if (parsed.event_name === "container.metrics") {
       const metricContainerId = String(
         (parsed.payload as { container_id?: string })?.container_id ?? "",
@@ -366,7 +368,9 @@ export function ContainerExecution() {
       }
       setTimelineStatus("metrics", "error", "All containers exited unexpectedly");
       pushLog({ message: "All containers have exited.", timestamp: parsed.timestamp, tone: "error" });
-      pushNotification("warning", "Runtime Stopped", "All containers have exited");
+      pushNotification("warning", "Runtime Stopped", "All containers have exited", {
+        dedupeKey: `project.runtime_stopped:${parsed.job_id ?? job?.id ?? "unknown"}`,
+      });
       markProblematicStack(
         "Current stack is problematic. Please fix the stack and resubmit before deploying again.",
         { cleanupRuntime: true, keepExitData: true },
@@ -382,7 +386,9 @@ export function ContainerExecution() {
       sessionStorage.removeItem("dqa:containerStatus");
       if (stateKey) clearState(stateKey);
       toast.success("Compose stack stopped");
-      pushNotification("warning", "Containers Stopped", "All containers have been stopped");
+      pushNotification("warning", "Containers Stopped", "All containers have been stopped", {
+        dedupeKey: `container.stopped:${parsed.job_id ?? job?.id ?? "unknown"}`,
+      });
     } else if (parsed.event_name === "deploy.cleanup_started") {
       const projectName = String(
         (parsed.payload as { project_name?: string })?.project_name ?? "compose stack",
@@ -395,7 +401,9 @@ export function ContainerExecution() {
         tone: "info",
       });
       toast.message("Stopping and removing stack resources...");
-      pushNotification("info", "Cleanup Started", "Removing containers created by the failed deploy");
+      pushNotification("info", "Cleanup Started", "Removing containers created by the failed deploy", {
+        dedupeKey: `deploy.cleanup_started:${parsed.job_id ?? job?.id ?? "unknown"}`,
+      });
     } else if (parsed.event_name === "deploy.cleanup_completed") {
       const projectName = String(
         (parsed.payload as { project_name?: string })?.project_name ?? "compose stack",
@@ -412,7 +420,9 @@ export function ContainerExecution() {
         tone: "success",
       });
       toast.success("Failed deploy containers stopped and removed");
-      pushNotification("success", "Cleanup Completed", "Failed deploy containers were removed from the sandbox");
+      pushNotification("success", "Cleanup Completed", "Failed deploy containers were removed from the sandbox", {
+        dedupeKey: `deploy.cleanup_completed:${parsed.job_id ?? job?.id ?? "unknown"}`,
+      });
     } else if (parsed.event_name === "user.analysis.failed") {
       setTimelineStatus(
         "start",
@@ -635,7 +645,9 @@ export function ContainerExecution() {
         tone: "success",
       });
       toast.success("Deploy request accepted");
-      pushNotification("info", "Deploy Started", `Compose stack deploy queued for job ${job.id.slice(0, 8)}`);
+      pushNotification("info", "Deploy Started", `Compose stack deploy queued for job ${job.id.slice(0, 8)}`, {
+        dedupeKey: `deploy.started:${job.id}`,
+      });
 
       connectJobSocket(job.id, true);
 
@@ -690,7 +702,9 @@ export function ContainerExecution() {
       });
       setTimelineStatus("metrics", "done", "Stop signal sent");
       toast.success("Stop request accepted");
-      pushNotification("info", "Stopping Containers", "Stop signal sent, waiting for containers to shut down...");
+      pushNotification("info", "Stopping Containers", "Stop signal sent, waiting for containers to shut down...", {
+        dedupeKey: `deploy.stop.requested:${job.id}`,
+      });
 
       for (let i = 0; i < 30; i++) {
         if (unmountedRef.current) break;
@@ -704,7 +718,9 @@ export function ContainerExecution() {
             if (stateKey) clearState(stateKey);
             sessionStorage.removeItem("dqa:containerStatus");
             pushLog({ message: "Stack confirmed stopped", tone: "success" });
-            pushNotification("success", "Containers Stopped", "All containers have been successfully stopped");
+            pushNotification("success", "Containers Stopped", "All containers have been successfully stopped", {
+              dedupeKey: `deploy.stop.completed:${job.id}`,
+            });
             break;
           }
         } catch {
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index f8aec43..1b8c84d 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -1,16 +1,18 @@
-import { useState, type FormEvent } from "react";
+import { useEffect, useMemo, useState, type FormEvent } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { toast } from "sonner";
 import { motion, useReducedMotion } from "motion/react";
+import { ArrowRight, CheckCircle2, Eye, EyeOff, KeyRound, Mail } from "lucide-react";
 
 import { useAuth } from "../auth/AuthProvider";
-import { ApiError } from "../utils/api";
 import { Button } from "../components/ui/button";
 import { Card } from "../components/ui/card";
 import { authCardVariants, authCardTransition, pageVariantsReduced, pageTransitionReduced } from "../components/motion/variants";
+import { explainAuthError, type ExplainedAuthError } from "../utils/authErrors";
 
 const authInputClass =
-  "w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+  "w-full rounded-lg border border-slate-700/80 bg-slate-950/70 px-3 py-2.5 text-sm text-slate-100 placeholder:text-slate-500 shadow-inner shadow-black/10 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/70 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 disabled:cursor-not-allowed disabled:opacity-60";
+const AUTH_REDIRECT_DELAY_MS = 250;
 
 export function Login() {
   const navigate = useNavigate();
@@ -18,89 +20,152 @@ export function Login() {
   const { loginWithPassword } = useAuth();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<ExplainedAuthError | null>(null);
+  const [showPassword, setShowPassword] = useState(false);
+  const [capsLockOn, setCapsLockOn] = useState(false);
+  const [success, setSuccess] = useState(false);
 
   const redirect = (location.state as { from?: string } | null)?.from || "/";
+  const canSubmit = useMemo(
+    () => email.trim().length > 3 && password.length >= 8,
+    [email, password],
+  );
+  const submitHint = useMemo(() => {
+    if (email.trim().length <= 3) return "Enter a valid email address.";
+    if (password.length < 8) return "Password must be at least 8 characters.";
+    return null;
+  }, [email, password]);
+
+  useEffect(() => {
+    void import("./Register");
+  }, []);
 
   const onSubmit = async (event: FormEvent) => {
     event.preventDefault();
-    setLoading(true);
+    setSuccess(false);
     setError(null);
     try {
       await loginWithPassword(email, password);
+      setSuccess(true);
       toast.success("Signed in");
+      await new Promise((resolve) => setTimeout(resolve, AUTH_REDIRECT_DELAY_MS));
       navigate(redirect, { replace: true });
     } catch (err) {
-      const message =
-        err instanceof ApiError
-          ? err.message
-          : err instanceof Error
-            ? err.message
-            : "Login failed.";
-      setError(message);
-      toast.error(message);
-    } finally {
-      setLoading(false);
+      const explained = explainAuthError(err);
+      setError(explained);
+      toast.error(explained.message);
     }
   };
 
   const reducedMotion = useReducedMotion();
 
   return (
-    <div className="min-h-screen bg-slate-950 grid place-items-center px-4">
-      <motion.div
-        initial="initial"
-        animate="animate"
-        variants={reducedMotion ? pageVariantsReduced : authCardVariants}
-        transition={reducedMotion ? pageTransitionReduced : authCardTransition}
-        className="w-full max-w-md"
-      >
-      <Card className="w-full p-6 bg-slate-900 border-slate-800">
-        <h1 className="text-2xl font-semibold text-white mb-2">Sign in</h1>
-        <p className="text-slate-400 mb-6">Access your docker-platform-api workspace.</p>
-        <form onSubmit={onSubmit} className="space-y-5">
-          <div className="flex flex-col gap-3">
+    <motion.div
+      initial="initial"
+      animate="animate"
+      variants={reducedMotion ? pageVariantsReduced : authCardVariants}
+      transition={reducedMotion ? pageTransitionReduced : authCardTransition}
+    >
+      <Card className="w-full p-7 bg-slate-900/95 border-slate-800">
+        <div className="mb-6">
+          <p className="text-xs uppercase tracking-wide text-slate-500">Docker Quality Analyzer</p>
+          <h1 className="mt-2 text-2xl font-semibold text-white">Sign in to your workspace</h1>
+          <p className="mt-2 text-sm text-slate-400">
+            Continue where you left off with analysis history, real-time runtime updates, and research insights.
+          </p>
+        </div>
+        <form onSubmit={onSubmit} className="space-y-4">
+          <div className="flex flex-col gap-2">
             <label htmlFor="email" className="text-sm font-medium text-foreground">
-              Email
+              Email address
             </label>
-            <input
-              id="email"
-              type="email"
-              required
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              autoComplete="email"
-              className={authInputClass}
-            />
+            <div className="relative">
+              <Mail className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
+              <input
+                id="email"
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                autoComplete="email"
+                placeholder="you@company.com"
+                className={`${authInputClass} pl-9`}
+              />
+            </div>
           </div>
-          <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-2">
             <label htmlFor="password" className="text-sm font-medium text-foreground">
               Password
             </label>
-            <input
-              id="password"
-              type="password"
-              required
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              autoComplete="current-password"
-              className={authInputClass}
-            />
+            <div className="relative">
+              <KeyRound className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
+              <input
+                id="password"
+                type={showPassword ? "text" : "password"}
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                onKeyUp={(e) => setCapsLockOn(e.getModifierState("CapsLock"))}
+                onKeyDown={(e) => setCapsLockOn(e.getModifierState("CapsLock"))}
+                onBlur={() => setCapsLockOn(false)}
+                autoComplete="current-password"
+                placeholder="Your secure password"
+                className={`${authInputClass} pl-9 pr-10`}
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword((prev) => !prev)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 hover:text-slate-300"
+                aria-label={showPassword ? "Hide password" : "Show password"}
+              >
+                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </button>
+            </div>
+            {capsLockOn && (
+              <p className="text-xs text-amber-400">Caps Lock is on.</p>
+            )}
           </div>
-          {error && <p className="text-sm text-red-400">{error}</p>}
-          <Button type="submit" disabled={loading} className="w-full">
-            {loading ? "Signing in..." : "Sign in"}
+          {error && (
+            <div className="rounded-lg border border-red-800/60 bg-red-950/30 p-3">
+              <p className="text-sm font-medium text-red-300">{error.title}</p>
+              <p className="mt-1 text-sm text-red-200/90">{error.message}</p>
+              {error.tips.length > 0 && (
+                <ul className="mt-2 list-disc space-y-1 pl-4 text-xs text-red-200/80">
+                  {error.tips.map((tip) => (
+                    <li key={tip}>{tip}</li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          )}
+          {success && (
+            <div className="rounded-lg border border-emerald-800/60 bg-emerald-950/30 p-3 text-sm text-emerald-300">
+              <div className="flex items-center gap-2">
+                <CheckCircle2 className="h-4 w-4" />
+                <span>Signed in successfully. Redirecting...</span>
+              </div>
+            </div>
+          )}
+          <Button type="submit" disabled={success || !canSubmit} className="w-full">
+            {success ? "Signed in" : "Sign in"}
+            {!success && <ArrowRight className="ml-2 h-4 w-4" />}
           </Button>
+          {!canSubmit && !success && submitHint && (
+            <p className="text-xs text-amber-400" aria-live="polite">
+              {submitHint}
+            </p>
+          )}
+          <p className="text-[11px] text-slate-500">
+            Tip: use the same account you used for prior analysis jobs to keep your history and notifications.
+          </p>
         </form>
-        <p className="text-sm text-slate-400 mt-4">
-          No account?{" "}
-          <Link className="text-blue-400 hover:text-blue-300" to="/register">
-            Create one
+        <p className="mt-5 text-sm text-slate-400">
+          New to Docker Quality Analyzer?{" "}
+          <Link className="text-sky-400 hover:text-sky-300" to="/register">
+            Create an account
           </Link>
         </p>
       </Card>
-      </motion.div>
-    </div>
+    </motion.div>
   );
 }
diff --git a/frontend/src/pages/Register.tsx b/frontend/src/pages/Register.tsx
index 751c202..357f9bb 100644
--- a/frontend/src/pages/Register.tsx
+++ b/frontend/src/pages/Register.tsx
@@ -1,104 +1,213 @@
-import { useState, type FormEvent } from "react";
+import { useEffect, useMemo, useState, type FormEvent } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { toast } from "sonner";
 import { motion, useReducedMotion } from "motion/react";
+import { ArrowRight, CheckCircle2, Eye, EyeOff, KeyRound, Mail } from "lucide-react";
 
 import { useAuth } from "../auth/AuthProvider";
-import { ApiError } from "../utils/api";
 import { Button } from "../components/ui/button";
 import { Card } from "../components/ui/card";
 import { authCardVariants, authCardTransition, pageVariantsReduced, pageTransitionReduced } from "../components/motion/variants";
+import { explainAuthError, type ExplainedAuthError } from "../utils/authErrors";
 
 const authInputClass =
-  "w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+  "w-full rounded-lg border border-slate-700/80 bg-slate-950/70 px-3 py-2.5 text-sm text-slate-100 placeholder:text-slate-500 shadow-inner shadow-black/10 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/70 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 disabled:cursor-not-allowed disabled:opacity-60";
+const AUTH_REDIRECT_DELAY_MS = 250;
 
 export function Register() {
   const navigate = useNavigate();
   const { registerWithPassword } = useAuth();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState<ExplainedAuthError | null>(null);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [capsLockOn, setCapsLockOn] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const passwordMismatch = confirmPassword.length > 0 && password !== confirmPassword;
+  const canSubmit = useMemo(
+    () => email.trim().length > 3 && password.length >= 8 && password === confirmPassword,
+    [email, password, confirmPassword],
+  );
+  const submitHint = useMemo(() => {
+    if (email.trim().length <= 3) return "Enter a valid email address.";
+    if (password.length < 8) return "Password must be at least 8 characters.";
+    if (password !== confirmPassword) return "Password and confirmation must match.";
+    return null;
+  }, [email, password, confirmPassword]);
+
+  useEffect(() => {
+    void import("./Login");
+  }, []);
 
   const onSubmit = async (event: FormEvent) => {
     event.preventDefault();
-    setLoading(true);
+    if (passwordMismatch) {
+      setError({
+        title: "Passwords do not match",
+        message: "Please make sure password and confirmation are identical.",
+        tips: ["Double-check both fields and try again."],
+      });
+      return;
+    }
+    setSuccess(false);
     setError(null);
     try {
       await registerWithPassword(email, password);
+      setSuccess(true);
       toast.success("Account created");
+      await new Promise((resolve) => setTimeout(resolve, AUTH_REDIRECT_DELAY_MS));
       navigate("/", { replace: true });
     } catch (err) {
-      const message =
-        err instanceof ApiError
-          ? err.message
-          : err instanceof Error
-            ? err.message
-            : "Registration failed.";
-      setError(message);
-      toast.error(message);
-    } finally {
-      setLoading(false);
+      const explained = explainAuthError(err);
+      setError(explained);
+      toast.error(explained.message);
     }
   };
 
   const reducedMotion = useReducedMotion();
 
   return (
-    <div className="min-h-screen bg-slate-950 grid place-items-center px-4">
-      <motion.div
-        initial="initial"
-        animate="animate"
-        variants={reducedMotion ? pageVariantsReduced : authCardVariants}
-        transition={reducedMotion ? pageTransitionReduced : authCardTransition}
-        className="w-full max-w-md"
-      >
-      <Card className="w-full p-6 bg-slate-900 border-slate-800">
-        <h1 className="text-2xl font-semibold text-white mb-2">Create account</h1>
-        <p className="text-slate-400 mb-6">Start analyzing your Docker workflows.</p>
-        <form onSubmit={onSubmit} className="space-y-5">
-          <div className="flex flex-col gap-3">
+    <motion.div
+      initial="initial"
+      animate="animate"
+      variants={reducedMotion ? pageVariantsReduced : authCardVariants}
+      transition={reducedMotion ? pageTransitionReduced : authCardTransition}
+    >
+      <Card className="w-full p-7 bg-slate-900/95 border-slate-800">
+        <div className="mb-6">
+          <p className="text-xs uppercase tracking-wide text-slate-500">Docker Quality Analyzer</p>
+          <h1 className="mt-2 text-2xl font-semibold text-white">Create your account</h1>
+          <p className="mt-2 text-sm text-slate-400">
+            Set up your secure workspace to run Dockerfile, Compose, and project quality checks.
+          </p>
+        </div>
+        <form onSubmit={onSubmit} className="space-y-4">
+          <div className="flex flex-col gap-2">
             <label htmlFor="email" className="text-sm font-medium text-foreground">
-              Email
+              Work email
             </label>
-            <input
-              id="email"
-              type="email"
-              required
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              autoComplete="email"
-              className={authInputClass}
-            />
+            <div className="relative">
+              <Mail className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
+              <input
+                id="email"
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                autoComplete="email"
+                placeholder="you@company.com"
+                className={`${authInputClass} pl-9`}
+              />
+            </div>
           </div>
-          <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-2">
             <label htmlFor="password" className="text-sm font-medium text-foreground">
               Password
             </label>
-            <input
-              id="password"
-              type="password"
-              minLength={8}
-              required
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              autoComplete="new-password"
-              className={authInputClass}
-            />
+            <div className="relative">
+              <KeyRound className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
+              <input
+                id="password"
+                type={showPassword ? "text" : "password"}
+                minLength={8}
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                onKeyUp={(e) => setCapsLockOn(e.getModifierState("CapsLock"))}
+                onKeyDown={(e) => setCapsLockOn(e.getModifierState("CapsLock"))}
+                onBlur={() => setCapsLockOn(false)}
+                autoComplete="new-password"
+                placeholder="At least 8 characters"
+                className={`${authInputClass} pl-9 pr-10`}
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword((prev) => !prev)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 hover:text-slate-300"
+                aria-label={showPassword ? "Hide password" : "Show password"}
+              >
+                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </button>
+            </div>
+            <p className="text-[11px] text-slate-500">
+              Use a strong password with letters, numbers, and symbols.
+            </p>
+            {capsLockOn && (
+              <p className="text-xs text-amber-400">Caps Lock is on.</p>
+            )}
+          </div>
+          <div className="flex flex-col gap-2">
+            <label htmlFor="confirm-password" className="text-sm font-medium text-foreground">
+              Confirm password
+            </label>
+            <div className="relative">
+              <KeyRound className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
+              <input
+                id="confirm-password"
+                type={showConfirmPassword ? "text" : "password"}
+                required
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                onKeyUp={(e) => setCapsLockOn(e.getModifierState("CapsLock"))}
+                onKeyDown={(e) => setCapsLockOn(e.getModifierState("CapsLock"))}
+                onBlur={() => setCapsLockOn(false)}
+                autoComplete="new-password"
+                placeholder="Repeat password"
+                className={`${authInputClass} pl-9 pr-10`}
+              />
+              <button
+                type="button"
+                onClick={() => setShowConfirmPassword((prev) => !prev)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 hover:text-slate-300"
+                aria-label={showConfirmPassword ? "Hide password confirmation" : "Show password confirmation"}
+              >
+                {showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </button>
+            </div>
+            {passwordMismatch && (
+              <p className="text-xs text-red-400">Passwords do not match yet.</p>
+            )}
           </div>
-          {error && <p className="text-sm text-red-400">{error}</p>}
-          <Button type="submit" disabled={loading} className="w-full">
-            {loading ? "Creating account..." : "Create account"}
+          {error && (
+            <div className="rounded-lg border border-red-800/60 bg-red-950/30 p-3">
+              <p className="text-sm font-medium text-red-300">{error.title}</p>
+              <p className="mt-1 text-sm text-red-200/90">{error.message}</p>
+              {error.tips.length > 0 && (
+                <ul className="mt-2 list-disc space-y-1 pl-4 text-xs text-red-200/80">
+                  {error.tips.map((tip) => (
+                    <li key={tip}>{tip}</li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          )}
+          {success && (
+            <div className="rounded-lg border border-emerald-800/60 bg-emerald-950/30 p-3 text-sm text-emerald-300">
+              <div className="flex items-center gap-2">
+                <CheckCircle2 className="h-4 w-4" />
+                <span>Account created successfully. Redirecting...</span>
+              </div>
+            </div>
+          )}
+          <Button type="submit" disabled={success || !canSubmit} className="w-full">
+            {success ? "Account created" : "Create account"}
+            {!success && <ArrowRight className="ml-2 h-4 w-4" />}
           </Button>
+          {!canSubmit && !success && submitHint && (
+            <p className="text-xs text-amber-400" aria-live="polite">
+              {submitHint}
+            </p>
+          )}
         </form>
-        <p className="text-sm text-slate-400 mt-4">
+        <p className="mt-5 text-sm text-slate-400">
           Already have an account?{" "}
-          <Link className="text-blue-400 hover:text-blue-300" to="/login">
+          <Link className="text-sky-400 hover:text-sky-300" to="/login">
             Sign in
           </Link>
         </p>
       </Card>
-      </motion.div>
-    </div>
+    </motion.div>
   );
 }
diff --git a/frontend/src/pages/ResultsDashboard.tsx b/frontend/src/pages/ResultsDashboard.tsx
index aa10674..1e9fd04 100644
--- a/frontend/src/pages/ResultsDashboard.tsx
+++ b/frontend/src/pages/ResultsDashboard.tsx
@@ -430,7 +430,9 @@ export function ResultsDashboard() {
     const previousStatus = containerStatus;
     setContainerStatus("stopping");
     sessionStorage.setItem("dqa:containerStatus", "stopping");
-    pushNotification("info", "Stopping Containers", "Stop signal sent, waiting for shutdown...");
+    pushNotification("info", "Stopping Containers", "Stop signal sent, waiting for shutdown...", {
+      dedupeKey: `deploy.stop.requested:${job.id}`,
+    });
     try {
       await composeApi.stopDeploy({ job_id: job.id });
       for (let i = 0; i < 30; i++) {
@@ -444,7 +446,9 @@ export function ResultsDashboard() {
             setContainerStatus("stopped");
             sessionStorage.removeItem("dqa:containerStatus");
             toast.success("Containers stopped");
-            pushNotification("success", "Containers Stopped", "All containers have been successfully stopped");
+            pushNotification("success", "Containers Stopped", "All containers have been successfully stopped", {
+              dedupeKey: `deploy.stop.completed:${job.id}`,
+            });
             return;
           }
         } catch {
@@ -460,7 +464,9 @@ export function ResultsDashboard() {
         setContainerStatus(previousStatus);
         sessionStorage.removeItem("dqa:containerStatus");
         toast.error("Failed to stop containers");
-        pushNotification("error", "Stop Failed", "Failed to stop containers");
+        pushNotification("error", "Stop Failed", "Failed to stop containers", {
+          dedupeKey: `deploy.stop.failed:${job.id}`,
+        });
       }
     }
   };
diff --git a/frontend/src/routes.tsx b/frontend/src/routes.tsx
index a031297..da2ac8b 100644
--- a/frontend/src/routes.tsx
+++ b/frontend/src/routes.tsx
@@ -2,25 +2,25 @@ import { createBrowserRouter } from "react-router-dom";
 import App from "./App";
 import { DockerLoader } from "./components/DockerLoader";
 import { RequireAuth } from "./components/RequireAuth";
+import { AuthLayout } from "./pages/AuthLayout";
+import { Login } from "./pages/Login";
+import { Register } from "./pages/Register";
 
 const routeHydrateFallbackElement = <DockerLoader message="Loading page..." />;
 
 export const router = createBrowserRouter([
   {
-    path: "/login",
-    hydrateFallbackElement: routeHydrateFallbackElement,
-    lazy: async () => {
-      const m = await import("./pages/Login");
-      return { Component: m.Login };
-    },
-  },
-  {
-    path: "/register",
-    hydrateFallbackElement: routeHydrateFallbackElement,
-    lazy: async () => {
-      const m = await import("./pages/Register");
-      return { Component: m.Register };
-    },
+    Component: AuthLayout,
+    children: [
+      {
+        path: "/login",
+        Component: Login,
+      },
+      {
+        path: "/register",
+        Component: Register,
+      },
+    ],
   },
   {
     path: "/",
diff --git a/frontend/src/types/vanta-waves.d.ts b/frontend/src/types/vanta-waves.d.ts
new file mode 100644
index 0000000..b3ff598
--- /dev/null
+++ b/frontend/src/types/vanta-waves.d.ts
@@ -0,0 +1 @@
+declare module "vanta/dist/vanta.waves.min";
diff --git a/frontend/src/types/vanta.d.ts b/frontend/src/types/vanta.d.ts
new file mode 100644
index 0000000..ba9d0c4
--- /dev/null
+++ b/frontend/src/types/vanta.d.ts
@@ -0,0 +1,87 @@
+declare module "vanta/dist/vanta.net.min" {
+  interface VantaEffect {
+    destroy: () => void;
+  }
+
+  interface VantaNetOptions {
+    el: HTMLElement;
+    THREE: unknown;
+    mouseControls?: boolean;
+    touchControls?: boolean;
+    gyroControls?: boolean;
+    minHeight?: number;
+    minWidth?: number;
+    scale?: number;
+    scaleMobile?: number;
+    color?: number;
+    backgroundColor?: number;
+    points?: number;
+    maxDistance?: number;
+    spacing?: number;
+    showDots?: boolean;
+  }
+
+  const NET: (options: VantaNetOptions) => VantaEffect;
+
+  export default NET;
+}
+
+declare module "vanta/dist/vanta.birds.min" {
+  interface VantaEffect {
+    destroy: () => void;
+  }
+
+  interface VantaBirdsOptions {
+    el: HTMLElement;
+    THREE: unknown;
+    mouseControls?: boolean;
+    touchControls?: boolean;
+    gyroControls?: boolean;
+    minHeight?: number;
+    minWidth?: number;
+    scale?: number;
+    scaleMobile?: number;
+    backgroundColor?: number;
+    color1?: number;
+    color2?: number;
+    birdSize?: number;
+    wingSpan?: number;
+    speedLimit?: number;
+    separation?: number;
+    alignment?: number;
+    cohesion?: number;
+    quantity?: number;
+  }
+
+  const BIRDS: (options: VantaBirdsOptions) => VantaEffect;
+
+  export default BIRDS;
+}
+
+declare module "vanta/dist/vanta.waves.min" {
+  interface VantaEffect {
+    destroy: () => void;
+  }
+
+  interface VantaWavesOptions {
+    el: HTMLElement;
+    THREE: unknown;
+    mouseControls?: boolean;
+    touchControls?: boolean;
+    gyroControls?: boolean;
+    minHeight?: number;
+    minWidth?: number;
+    scale?: number;
+    scaleMobile?: number;
+    color?: number;
+    backgroundColor?: number;
+    shininess?: number;
+    waveHeight?: number;
+    waveSpeed?: number;
+    zoom?: number;
+  }
+
+  const WAVES: (options: VantaWavesOptions) => VantaEffect;
+
+  export default WAVES;
+}
diff --git a/frontend/src/utils/api.ts b/frontend/src/utils/api.ts
index 1ca728f..1f2bc4f 100644
--- a/frontend/src/utils/api.ts
+++ b/frontend/src/utils/api.ts
@@ -781,6 +781,12 @@ export const ws = {
       `${wsBase()}/ws/users/${userId}/containers/${containerId}?token=${encodeURIComponent(token)}`,
     );
   },
+  connectUserEvents(userId: string): WebSocket {
+    const token = getAccessToken() ?? "";
+    return new WebSocket(
+      `${wsBase()}/ws/users/${userId}/events?token=${encodeURIComponent(token)}`,
+    );
+  },
 };
 
 // ---------- health ----------
diff --git a/frontend/src/utils/authErrors.ts b/frontend/src/utils/authErrors.ts
new file mode 100644
index 0000000..8115478
--- /dev/null
+++ b/frontend/src/utils/authErrors.ts
@@ -0,0 +1,68 @@
+import { ApiError } from "./api";
+
+export interface ExplainedAuthError {
+  title: string;
+  message: string;
+  tips: string[];
+}
+
+function normalizeMessage(input: unknown): string {
+  if (typeof input === "string" && input.trim().length > 0) {
+    return input.trim();
+  }
+  return "Authentication failed. Please try again.";
+}
+
+function tipsForMessage(message: string): string[] {
+  const normalized = message.toLowerCase();
+  if (
+    normalized.includes("invalid") &&
+    (normalized.includes("credential") || normalized.includes("email") || normalized.includes("password"))
+  ) {
+    return [
+      "Check that your email address is correct.",
+      "Ensure Caps Lock is not affecting your password.",
+      "If needed, create a new account from the register page.",
+    ];
+  }
+  if (normalized.includes("already") && normalized.includes("exist")) {
+    return [
+      "Try signing in with this email instead of registering again.",
+      "Use a different email if you need a separate workspace.",
+    ];
+  }
+  if (normalized.includes("password")) {
+    return [
+      "Use at least 8 characters.",
+      "Include a mix of letters, numbers, and symbols for stronger security.",
+    ];
+  }
+  return [
+    "Retry in a few seconds in case of a temporary network issue.",
+    "If this continues, verify API availability and try again.",
+  ];
+}
+
+export function explainAuthError(error: unknown): ExplainedAuthError {
+  if (error instanceof ApiError) {
+    return {
+      title: "Unable to continue",
+      message: normalizeMessage(error.message),
+      tips: tipsForMessage(error.message),
+    };
+  }
+
+  if (error instanceof Error) {
+    return {
+      title: "Request failed",
+      message: normalizeMessage(error.message),
+      tips: tipsForMessage(error.message),
+    };
+  }
+
+  return {
+    title: "Authentication error",
+    message: "Something went wrong while processing your request.",
+    tips: ["Please try again."],
+  };
+}
diff --git a/frontend/src/utils/notifications.ts b/frontend/src/utils/notifications.ts
index 91fcbf7..a928fc4 100644
--- a/frontend/src/utils/notifications.ts
+++ b/frontend/src/utils/notifications.ts
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { readUserFromStorage } from "./api";
 
 export type NotificationType = "info" | "success" | "warning" | "error";
 
@@ -9,20 +10,30 @@ export interface AppNotification {
   message: string;
   timestamp: number;
   read: boolean;
+  dedupe_key?: string;
 }
 
-const STORAGE_KEY = "dqa:notifications";
+const STORAGE_KEY_PREFIX = "dqa:notifications";
 const MAX_NOTIFICATIONS = 50;
 
 let listeners: Array<() => void> = [];
 
+function storageKeyForUser(userId: string | null | undefined): string {
+  return userId ? `${STORAGE_KEY_PREFIX}:${userId}` : STORAGE_KEY_PREFIX;
+}
+
+function activeStorageKey(): string {
+  const user = readUserFromStorage();
+  return storageKeyForUser(user?.id);
+}
+
 function notifyListeners() {
   listeners.forEach((fn) => fn());
 }
 
 function loadNotifications(): AppNotification[] {
   try {
-    const raw = localStorage.getItem(STORAGE_KEY);
+    const raw = localStorage.getItem(activeStorageKey());
     if (!raw) return [];
     return JSON.parse(raw) as AppNotification[];
   } catch {
@@ -31,11 +42,32 @@ function loadNotifications(): AppNotification[] {
 }
 
 function saveNotifications(notifications: AppNotification[]) {
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(notifications.slice(0, MAX_NOTIFICATIONS)));
+  localStorage.setItem(activeStorageKey(), JSON.stringify(notifications.slice(0, MAX_NOTIFICATIONS)));
 }
 
-export function pushNotification(type: NotificationType, title: string, message: string) {
+export interface NotificationOptions {
+  dedupeKey?: string;
+  dedupeWindowMs?: number;
+}
+
+export function pushNotification(
+  type: NotificationType,
+  title: string,
+  message: string,
+  options?: NotificationOptions,
+) {
   const notifications = loadNotifications();
+  const dedupeWindowMs = options?.dedupeWindowMs ?? 60_000;
+  if (options?.dedupeKey) {
+    const now = Date.now();
+    const existing = notifications.find(
+      (n) => n.dedupe_key === options.dedupeKey && now - n.timestamp <= dedupeWindowMs,
+    );
+    if (existing) {
+      notifyListeners();
+      return;
+    }
+  }
   const entry: AppNotification = {
     id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
     type,
@@ -43,6 +75,7 @@ export function pushNotification(type: NotificationType, title: string, message:
     message,
     timestamp: Date.now(),
     read: false,
+    dedupe_key: options?.dedupeKey,
   };
   notifications.unshift(entry);
   saveNotifications(notifications);
@@ -56,8 +89,22 @@ export function markAllRead() {
   notifyListeners();
 }
 
+export function markNotificationRead(notificationId: string) {
+  const notifications = loadNotifications();
+  const target = notifications.find((n) => n.id === notificationId);
+  if (!target || target.read) return;
+  target.read = true;
+  saveNotifications(notifications);
+  notifyListeners();
+}
+
 export function clearNotifications() {
-  localStorage.removeItem(STORAGE_KEY);
+  localStorage.removeItem(activeStorageKey());
+  notifyListeners();
+}
+
+export function clearNotificationsForUser(userId: string | null | undefined) {
+  localStorage.removeItem(storageKeyForUser(userId));
   notifyListeners();
 }
 
@@ -67,7 +114,12 @@ export function useNotifications(): { notifications: AppNotification[]; unreadCo
   useEffect(() => {
     const update = () => setNotifications(loadNotifications());
     const handleStorage = (event: StorageEvent) => {
-      if (event.key === STORAGE_KEY || event.key === null) {
+      if (
+        event.key === null ||
+        event.key === activeStorageKey() ||
+        event.key.startsWith(`${STORAGE_KEY_PREFIX}:`) ||
+        event.key === STORAGE_KEY_PREFIX
+      ) {
         update();
       }
     };
diff --git a/scripts/common.ps1 b/scripts/common.ps1
new file mode 100644
index 0000000..9acaac0
--- /dev/null
+++ b/scripts/common.ps1
@@ -0,0 +1,96 @@
+Set-StrictMode -Version Latest
+$ErrorActionPreference = "Stop"
+
+$script:RootDir = [System.IO.Path]::GetFullPath((Join-Path $PSScriptRoot ".."))
+Set-Location $script:RootDir
+
+function Initialize-ComposeContext {
+  param(
+    [Parameter(ValueFromRemainingArguments = $true)]
+    [string[]]$ScriptArgs
+  )
+
+  $script:Mode = if ($env:MODE) { $env:MODE } else { "dev" }
+  $script:ProfileArgs = @()
+
+  foreach ($arg in $ScriptArgs) {
+    switch ($arg) {
+      "--dev" { $script:Mode = "dev" }
+      "--prod" { $script:Mode = "prod" }
+      "--tools" { $script:ProfileArgs += @("--profile", "tools") }
+      default { }
+    }
+  }
+
+  if (($script:Mode -ne "dev") -and ($script:Mode -ne "prod")) {
+    throw "[scripts][error] MODE must be 'dev' or 'prod'"
+  }
+
+  $script:ComposeFiles = @("compose.yaml")
+  if ($script:Mode -eq "dev") {
+    $script:ComposeFiles += "compose.dev.yaml"
+  }
+  else {
+    $script:ComposeFiles += "compose.prod.yaml"
+  }
+}
+
+function Get-ComposeArgs {
+  $args = @("compose", "--env-file", ".env")
+  foreach ($composeFile in $script:ComposeFiles) {
+    $args += @("-f", $composeFile)
+  }
+  $args += $script:ProfileArgs
+  return $args
+}
+
+function Invoke-ComposeChecked {
+  param(
+    [Parameter(ValueFromRemainingArguments = $true)]
+    [string[]]$ComposeArgs
+  )
+
+  & docker @(Get-ComposeArgs) @ComposeArgs
+  if ($LASTEXITCODE -ne 0) {
+    throw "[scripts][error] docker compose command failed."
+  }
+}
+
+function Test-ComposeCommand {
+  param(
+    [Parameter(ValueFromRemainingArguments = $true)]
+    [string[]]$ComposeArgs
+  )
+
+  & docker @(Get-ComposeArgs) @ComposeArgs *> $null
+  return ($LASTEXITCODE -eq 0)
+}
+
+function Require-Command {
+  param([Parameter(Mandatory = $true)][string]$CommandName)
+
+  if (-not (Get-Command -Name $CommandName -ErrorAction SilentlyContinue)) {
+    throw "[scripts][error] Missing required command: $CommandName"
+  }
+}
+
+function New-SecretValue {
+  param([int]$Length = 48)
+
+  $alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
+  $chars = New-Object char[] $Length
+  $rng = [System.Security.Cryptography.RandomNumberGenerator]::Create()
+
+  try {
+    $bytes = New-Object byte[] $Length
+    $rng.GetBytes($bytes)
+    for ($i = 0; $i -lt $Length; $i++) {
+      $chars[$i] = $alphabet[$bytes[$i] % $alphabet.Length]
+    }
+  }
+  finally {
+    $rng.Dispose()
+  }
+
+  return -join $chars
+}
diff --git a/scripts/start.cmd b/scripts/start.cmd
new file mode 100644
index 0000000..ebbed20
--- /dev/null
+++ b/scripts/start.cmd
@@ -0,0 +1,3 @@
+@echo off
+setlocal
+powershell -NoProfile -ExecutionPolicy Bypass -File "%~dp0start.ps1" %*
diff --git a/scripts/start.ps1 b/scripts/start.ps1
new file mode 100644
index 0000000..df93564
--- /dev/null
+++ b/scripts/start.ps1
@@ -0,0 +1,191 @@
+Set-StrictMode -Version Latest
+$ErrorActionPreference = "Stop"
+
+. (Join-Path $PSScriptRoot "common.ps1")
+Initialize-ComposeContext @args
+
+function Write-StartLog {
+  param([string]$Message)
+  Write-Host "[start] $Message"
+}
+
+function Wait-Http {
+  param(
+    [Parameter(Mandatory = $true)][string]$Url,
+    [Parameter(Mandatory = $true)][string]$Name,
+    [int]$TimeoutSeconds = 120
+  )
+
+  $deadline = (Get-Date).AddSeconds($TimeoutSeconds)
+  while ((Get-Date) -lt $deadline) {
+    try {
+      Invoke-WebRequest -Uri $Url -Method Get -TimeoutSec 10 | Out-Null
+      Write-StartLog "$Name is healthy at $Url"
+      return
+    }
+    catch {
+      Start-Sleep -Seconds 2
+    }
+  }
+
+  throw "[start][error] Timed out waiting for $Name at $Url"
+}
+
+function Wait-Postgres {
+  param([int]$TimeoutSeconds = 120)
+
+  $deadline = (Get-Date).AddSeconds($TimeoutSeconds)
+  while ((Get-Date) -lt $deadline) {
+    if (Test-ComposeCommand @("exec", "-T", "postgres", "sh", "-lc", 'pg_isready -U "$POSTGRES_USER" -d "$POSTGRES_DB"')) {
+      Write-StartLog "Postgres is ready"
+      return
+    }
+    Start-Sleep -Seconds 2
+  }
+
+  throw "[start][error] Timed out waiting for Postgres readiness"
+}
+
+function Wait-ApiContainer {
+  param([int]$TimeoutSeconds = 120)
+
+  $deadline = (Get-Date).AddSeconds($TimeoutSeconds)
+  while ((Get-Date) -lt $deadline) {
+    if (Test-ComposeCommand @("exec", "-T", "api", "sh", "-lc", 'curl -fsS http://127.0.0.1:8000/health >/dev/null')) {
+      Write-StartLog "API is healthy in container network"
+      return
+    }
+    Start-Sleep -Seconds 2
+  }
+
+  throw "[start][error] Timed out waiting for API container health"
+}
+
+function Ensure-EnvFile {
+  if (Test-Path ".env") {
+    return
+  }
+
+  if (Test-Path ".env.example") {
+    Copy-Item -Path ".env.example" -Destination ".env"
+    Write-StartLog "Created .env from .env.example"
+    return
+  }
+
+  @"
+COMPOSE_PROJECT_NAME=docker-platform
+APP_ENV=dev
+POSTGRES_USER=postgres
+POSTGRES_DB=docker_platform
+API_PORT=8000
+FRONTEND_PORT=3000
+ADMINER_PORT=8080
+VITE_API_BASE_URL=
+"@ | Set-Content -Path ".env" -Encoding ascii
+  Write-StartLog "Created minimal .env"
+}
+
+function Ensure-SecretFile {
+  param(
+    [Parameter(Mandatory = $true)][string]$TargetPath,
+    [Parameter(Mandatory = $true)][string]$ExamplePath
+  )
+
+  if (Test-Path $TargetPath) {
+    return
+  }
+
+  $parentDir = Split-Path -Path $TargetPath -Parent
+  if (-not (Test-Path $parentDir)) {
+    New-Item -ItemType Directory -Path $parentDir | Out-Null
+  }
+
+  if (Test-Path $ExamplePath) {
+    Copy-Item -Path $ExamplePath -Destination $TargetPath
+  }
+  else {
+    New-SecretValue | Set-Content -Path $TargetPath -Encoding ascii
+  }
+
+  Write-StartLog "Created missing secret file: $TargetPath"
+}
+
+function Invoke-Migrations {
+  $migrationLog = [System.IO.Path]::GetTempFileName()
+  $migrateCommand = @(
+    "exec", "-T", "-w", "/app", "api", "sh", "-lc",
+    'export POSTGRES_PASSWORD="$(cat /run/secrets/postgres_password)"; export DATABASE_URL="postgresql+asyncpg://${POSTGRES_USER:-postgres}:${POSTGRES_PASSWORD}@postgres:5432/${POSTGRES_DB:-docker_platform}"; PYTHONPATH=/app alembic upgrade head'
+  )
+
+  try {
+    & docker @(Get-ComposeArgs) @migrateCommand *> $migrationLog
+    if ($LASTEXITCODE -eq 0) {
+      Write-StartLog "Migrations are up to date"
+      return
+    }
+
+    $logContents = Get-Content -Path $migrationLog -Raw
+    if ($logContents -match "(?i)(duplicate|already exists|DuplicateTable)") {
+      Write-StartLog "Detected existing schema without Alembic state; stamping head then retrying"
+
+      $stampCommand = @(
+        "exec", "-T", "-w", "/app", "api", "sh", "-lc",
+        'export POSTGRES_PASSWORD="$(cat /run/secrets/postgres_password)"; export DATABASE_URL="postgresql+asyncpg://${POSTGRES_USER:-postgres}:${POSTGRES_PASSWORD}@postgres:5432/${POSTGRES_DB:-docker_platform}"; PYTHONPATH=/app alembic stamp head'
+      )
+
+      & docker @(Get-ComposeArgs) @stampCommand *>> $migrationLog
+      & docker @(Get-ComposeArgs) @migrateCommand *>> $migrationLog
+      if ($LASTEXITCODE -ne 0) {
+        throw "[start][error] Migration bootstrap failed. Logs:`n$(Get-Content -Path $migrationLog -Raw)"
+      }
+
+      Write-StartLog "Migration bootstrap completed"
+      return
+    }
+
+    throw "[start][error] Migration failed. Logs:`n$logContents"
+  }
+  finally {
+    Remove-Item -Path $migrationLog -ErrorAction SilentlyContinue
+  }
+}
+
+Require-Command docker
+if (-not (Get-Command -Name curl -ErrorAction SilentlyContinue)) {
+  Write-StartLog "curl not found on host, using PowerShell HTTP checks"
+}
+
+& docker compose version *> $null
+if ($LASTEXITCODE -ne 0) {
+  throw "[start][error] Docker Compose v2 is required (docker compose ...)"
+}
+
+Ensure-EnvFile
+Ensure-SecretFile -TargetPath "secrets/postgres_password.txt" -ExamplePath "secrets/postgres_password.txt.example"
+Ensure-SecretFile -TargetPath "secrets/jwt_secret.txt" -ExamplePath "secrets/jwt_secret.txt.example"
+
+Write-StartLog "Starting stack in mode: $script:Mode"
+Invoke-ComposeChecked up -d --build
+
+Write-StartLog "Waiting for Postgres"
+Wait-Postgres -TimeoutSeconds 180
+
+Write-StartLog "Running migrations"
+Invoke-Migrations
+
+$frontendPort = if ($env:FRONTEND_PORT) { $env:FRONTEND_PORT } else { "3000" }
+Wait-Http -Url "http://127.0.0.1:$frontendPort" -Name "Frontend" -TimeoutSeconds 180
+
+if ($script:Mode -eq "dev") {
+  Wait-ApiContainer -TimeoutSeconds 180
+  Write-Host "UI (dev):      http://127.0.0.1:$frontendPort"
+  Write-Host "API (network): http://api:8000 (inside compose network)"
+}
+else {
+  Wait-Http -Url "http://127.0.0.1:$frontendPort/health" -Name "API via frontend proxy" -TimeoutSeconds 180
+  Write-Host "UI (prod-like): http://127.0.0.1:$frontendPort"
+  Write-Host "API is available through frontend proxy routes"
+}
+
+Write-Host "Use .\scripts\status.ps1 --$script:Mode for runtime status"
+Write-Host "Use .\scripts\stop.ps1 --$script:Mode --wipe to reset everything"
diff --git a/scripts/status.cmd b/scripts/status.cmd
new file mode 100644
index 0000000..888cff7
--- /dev/null
+++ b/scripts/status.cmd
@@ -0,0 +1,3 @@
+@echo off
+setlocal
+powershell -NoProfile -ExecutionPolicy Bypass -File "%~dp0status.ps1" %*
diff --git a/scripts/status.ps1 b/scripts/status.ps1
new file mode 100644
index 0000000..9e686a6
--- /dev/null
+++ b/scripts/status.ps1
@@ -0,0 +1,46 @@
+Set-StrictMode -Version Latest
+$ErrorActionPreference = "Stop"
+
+. (Join-Path $PSScriptRoot "common.ps1")
+Initialize-ComposeContext @args
+
+$frontendPort = if ($env:FRONTEND_PORT) { $env:FRONTEND_PORT } else { "3000" }
+
+Write-Host "[status] docker compose services"
+Invoke-ComposeChecked ps
+Write-Host ""
+Write-Host "[status] mode: $script:Mode"
+Write-Host ""
+
+if ($script:Mode -eq "dev") {
+  Write-Host "[status] api health (compose network)"
+  $apiHealth = & docker @(Get-ComposeArgs) @("exec", "-T", "api", "sh", "-lc", "curl -fsS http://127.0.0.1:8000/health") 2>$null
+  if ($LASTEXITCODE -eq 0) {
+    $apiHealth
+    Write-Host ""
+  }
+  else {
+    Write-Host "API not healthy in compose network"
+  }
+}
+else {
+  Write-Host "[status] api health (via frontend proxy)"
+  try {
+    $response = Invoke-WebRequest -Uri "http://127.0.0.1:$frontendPort/health" -Method Get -TimeoutSec 10
+    $response.Content
+    Write-Host ""
+  }
+  catch {
+    Write-Host "API proxy health not reachable via frontend"
+  }
+}
+
+Write-Host ""
+Write-Host "[status] frontend"
+try {
+  Invoke-WebRequest -Uri "http://127.0.0.1:$frontendPort" -Method Get -TimeoutSec 10 | Out-Null
+  Write-Host "Frontend reachable at http://127.0.0.1:$frontendPort"
+}
+catch {
+  Write-Host "Frontend not reachable"
+}
diff --git a/scripts/stop.cmd b/scripts/stop.cmd
new file mode 100644
index 0000000..c4ac858
--- /dev/null
+++ b/scripts/stop.cmd
@@ -0,0 +1,3 @@
+@echo off
+setlocal
+powershell -NoProfile -ExecutionPolicy Bypass -File "%~dp0stop.ps1" %*
diff --git a/scripts/stop.ps1 b/scripts/stop.ps1
new file mode 100644
index 0000000..e764587
--- /dev/null
+++ b/scripts/stop.ps1
@@ -0,0 +1,16 @@
+Set-StrictMode -Version Latest
+$ErrorActionPreference = "Stop"
+
+. (Join-Path $PSScriptRoot "common.ps1")
+Initialize-ComposeContext @args
+
+$wipe = $args -contains "--wipe"
+
+if ($wipe) {
+  Write-Host "[stop] Stopping $script:Mode stack and removing volumes"
+  Invoke-ComposeChecked down -v --remove-orphans
+}
+else {
+  Write-Host "[stop] Stopping $script:Mode stack"
+  Invoke-ComposeChecked down --remove-orphans
+}