chore: release v0.3.3

Features:
- Health check endpoint for Portainer monitoring
- Local search filtering in DataGrid
- Container status badges reflect health (green/orange/blue)

Improvements:
- Standardized 56px header heights across panels
- Container grid parses Docker API format correctly
- Search bar styling improvements
- Status badges have consistent width

Fixes:
- Quick links persistence (link type, form refresh)
- Iframe switching closes existing content first
- ContainerState type conflict resolved

Branding:
- Updated favicon and icons with Tatlock bucket logo

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.claude/settings.local.json

@@ -3,7 +3,8 @@
     "allow": [
       "mcp__chrome-devtools__take_screenshot",
       "mcp__puppeteer__puppeteer_evaluate",
-      "mcp__chrome-devtools__navigate_page"
+      "mcp__chrome-devtools__navigate_page",
+      "mcp__chrome-devtools__take_snapshot"
     ]
   }
 }

.gitea/workflows/build.yml

@@ -0,0 +1,34 @@
+name: Build and Push
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Login to Gitea Registry
+        uses: docker/login-action@v3
+        with:
+          registry: git.schweitz.internal
+          username: ${{ secrets.REGISTRY_USER }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          tags: |
+            git.schweitz.internal/jpmschweitzer/tatlock-ui:latest
+            git.schweitz.internal/jpmschweitzer/tatlock-ui:${{ github.ref_name }}
+
+      - name: Trigger Watchtower update
+        if: success()
+        run: |
+          curl -sf -H "Authorization: Bearer ${{ secrets.WATCHTOWER_TOKEN }}" \
+            http://watchtower:8080/v1/update

.gitignore

@@ -12,7 +12,6 @@ pubspec.lock
 *.freezed.dart
 *.gr.dart
 *.mocks.dart
-lib/generated_plugin_registrant.dart
 
 # Keep version.g.dart - it's generated but should be committed
 # so CI/CD builds have version info without running the generator
@@ -120,3 +119,4 @@ secrets/
 # Uploads (reference images, not tracked)
 uploads/
 logs/
+.vscode/launch.json

AGENTS.md

@@ -42,7 +42,36 @@ This document contains instructions and documentation references for AI assistan
     * Tag after updating `pubspec.yaml` version and CHANGELOG
     * Push tags with `git push --tags`
 
+### 🚀 Release Procedure
+
+This project uses version-tag-based CI/CD. Releases trigger automated Docker builds and deployments.
+
+**Release Steps:**
+
+1. Update version in `pubspec.yaml` (bump major.minor.patch, not build number)
+2. Update `CHANGELOG.md` with changes under `## [x.x.x] - YYYY-MM-DD`
+3. Commit changes: `git commit -m "chore: release vX.X.X"`
+4. Create git tag: `git tag vX.X.X`
+5. Push with tags: `git push origin master --tags`
+6. Create release in Gitea UI (git.schweitz.net → Releases → New Release)
+   * Select the tag
+   * Add release notes (can copy from CHANGELOG)
+   * **Publish** the release (this triggers CI/CD)
+
+**What happens on release:**
+
+* Gitea CI builds Flutter web app in Docker
+* Image pushed to `git.schweitz.internal/jpmschweitzer/tatlock-ui:latest` and `:vX.X.X`
+* Watchtower detects new image and auto-updates running container
+* App available at `http://tower:8092` (and eventually `home.schweitz.net`)
+
+**Rollback:**
+
+* In Portainer, update image tag to previous version (e.g., `:v0.2.0`)
+* Or: `docker pull git.schweitz.internal/jpmschweitzer/tatlock-ui:v0.2.0`
+
 ### 🧪 Testing Requirements
+
 * **Always add tests for new code before committing.** No exceptions.
 * Tests should cover the happy path and key edge cases.
 * Run `flutter test` before committing to ensure all tests pass.
@@ -50,5 +79,14 @@ This document contains instructions and documentation references for AI assistan
 * Code coverage should not decrease with new commits.
 
 ### 📝 Changelog Maintenance
+
 * **Update `CHANGELOG.md`** with every user-facing change.
-* Format: `## [Unreleased] - YYYY-MM-DD` followed by `### Added`, `### Changed`, or `### Fixed`.
+* Format: `## [Unreleased] - YYYY-MM-DD` followed by `### Added`, `### Changed`, or `### Fixed`.
+
+### 🎨 UI Patterns (MUST READ BEFORE CHANGES)
+
+* **Before modifying the widget tree**, read `docs/UI_LAYOUT.md` to understand established patterns.
+* Investigate existing implementations in the codebase before creating new components.
+* **DO NOT** reinvent wheels - check if shared components already exist in `lib/shared/components/`.
+* Look at similar features for reference patterns (e.g., how other list views, forms, or CRUD screens are built).
+* Deviating from established patterns creates inconsistency and technical debt.

CHANGELOG.md

@@ -7,6 +7,34 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.3.3] - 2026-01-03
+
+### Added
+- Health check endpoint (`/health.html`) for Portainer container monitoring
+- Local search filtering in DataGrid (filters cached data client-side)
+- Container status badges now reflect health status (green=healthy, orange=unhealthy)
+- `ContainerHealth` enum for parsing Docker health status from status string
+
+### Changed
+- Standardized header bar heights to 56px across all panels
+- Container grid now correctly parses Docker API JSON format (capitalized keys)
+- Status column displays clean uptime (stripped health indicators)
+- Status badges have consistent minimum width (90px)
+- Search bar styling improved (36px height, visible border, proper background)
+- Quick links now properly persist link type (iframe vs new tab)
+- Iframe switching now closes existing content before loading new link
+
+### Fixed
+- Quick links form properly saves changes and refreshes panel
+- `ContainerState` type conflict resolved (removed duplicate enum)
+- Container data parsing handles null values safely
+
+### Branding
+- Updated favicon and icons with Tatlock bucket logo
+- Updated manifest.json with Tatlock branding
+
+## [0.3.2] - 2025-01-02
+
 ### Changed
 - API defaults now use LAN IPs for local development (no auth required)
 - Auth interceptor skips authentication when using LAN endpoints

Dockerfile

@@ -0,0 +1,41 @@
+# Stage 1: Build Flutter web application
+FROM ghcr.io/cirruslabs/flutter:stable AS builder
+
+WORKDIR /app
+
+# Copy dependency files first for better caching
+COPY pubspec.yaml ./
+
+# Get dependencies (generates pubspec.lock)
+RUN flutter pub get
+
+# Copy the rest of the application
+COPY . .
+
+# Generate code with build_runner
+RUN dart run build_runner build --delete-conflicting-outputs
+
+# Build for web release
+RUN flutter build web --release
+
+# Stage 2: Serve with nginx
+FROM nginx:alpine
+
+# Install curl for healthcheck
+RUN apk add --no-cache curl
+
+# Copy custom nginx configuration
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# Copy built web app to nginx html directory
+COPY --from=builder /app/build/web /usr/share/nginx/html
+
+# Expose port 80
+EXPOSE 80
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+  CMD curl -f http://localhost:80/ || exit 1
+
+# Run nginx in foreground
+CMD ["nginx", "-g", "daemon off;"]

analysis_options.yaml

@@ -9,6 +9,12 @@
 # packages, and plugins designed to encourage good coding practices.
 include: package:flutter_lints/flutter.yaml
 
+analyzer:
+  errors:
+    # Freezed uses @JsonKey on constructor parameters which triggers this warning
+    # but is the correct pattern for freezed classes
+    invalid_annotation_target: ignore
+
 linter:
   # The lint rules applied to this project can be customized in the
   # section below to disable rules from the `package:flutter_lints/flutter.yaml`

docs/ARCHITECTURE.md

@@ -197,6 +197,139 @@ class ContainerRepositoryImpl implements ContainerRepository {
 }
 ```
 
+## Data Model Patterns
+
+Models handle conversion between API JSON and domain entities. The pattern depends on whether the feature is **read-only** or **CRUD**.
+
+### Read-Only Models
+
+For data fetched from external systems (Docker, NPM, Portainer) where Flutter doesn't create/update records:
+
+```dart
+@freezed
+sealed class ContainerModel with _$ContainerModel {
+  const factory ContainerModel({
+    required String id,
+    required String name,
+    required String status,
+  }) = _ContainerModel;
+
+  const ContainerModel._();
+
+  factory ContainerModel.fromJson(Map<String, dynamic> json) =>
+      _$ContainerModelFromJson(json);
+
+  /// Converts API response to domain entity.
+  Container toEntity() => Container(
+    id: id,
+    name: name,
+    status: ContainerStatus.values.byName(status),
+  );
+}
+```
+
+**Only `toEntity()` is needed** - no `fromEntity()` or `toJson()` required.
+
+### CRUD Models (Bidirectional)
+
+For data that Flutter creates, updates, and deletes:
+
+```dart
+@freezed
+sealed class QuickLinkModel with _$QuickLinkModel {
+  const factory QuickLinkModel({
+    @Default(0) int id,
+    required String title,
+    required String url,
+    String? icon,
+    String? category,
+    @Default(0) int position,
+    @JsonKey(name: 'is_visible') @Default(true) bool isVisible,
+  }) = _QuickLinkModel;
+
+  const QuickLinkModel._();
+
+  factory QuickLinkModel.fromJson(Map<String, dynamic> json) =>
+      _$QuickLinkModelFromJson(json);
+
+  /// Converts API response to domain entity.
+  QuickLink toEntity() => QuickLink(
+    id: id.toString(),
+    name: title,
+    url: url,
+    iconName: icon ?? 'link',
+    category: category,
+    sortOrder: position,
+    isActive: isVisible,
+  );
+
+  /// Creates model from domain entity for API requests.
+  factory QuickLinkModel.fromEntity(QuickLink entity) => QuickLinkModel(
+    id: int.tryParse(entity.id) ?? 0,
+    title: entity.name,
+    url: entity.url,
+    icon: entity.iconName,
+    category: entity.category,
+    position: entity.sortOrder,
+    isVisible: entity.isActive,
+  );
+}
+```
+
+**Critical rules for CRUD models:**
+
+1. **Always use generated `toJson()`** - Never write custom JSON methods that selectively include fields. The generated `toJson()` from freezed/json_serializable always includes ALL fields, which is the correct behavior.
+
+2. **Never create custom `toCreateJson()` or similar** - This leads to bugs where fields are silently dropped.
+
+3. **Use `fromEntity()` factory** - Maps domain entity fields to API field names.
+
+### Form Update Pattern
+
+When updating existing entities in forms, **always use `copyWith()`** to preserve existing data:
+
+```dart
+// ✅ Correct - preserves all existing fields
+final updatedLink = existingLink.copyWith(
+  name: _nameController.text.trim(),
+  url: _urlController.text.trim(),
+  category: category.isEmpty ? null : category,
+);
+await actions.update(updatedLink);
+
+// ❌ Wrong - loses existing data not in form
+final newLink = QuickLink(
+  id: existingLink.id,
+  name: _nameController.text.trim(),
+  url: _urlController.text.trim(),
+  // Missing: sortOrder, other fields...
+);
+```
+
+### Datasource Usage
+
+```dart
+// Create - convert entity to model, use toJson()
+Future<QuickLink> createQuickLink(QuickLink link) async {
+  final model = QuickLinkModel.fromEntity(link);
+  final response = await _dio.post<Map<String, dynamic>>(
+    _basePath,
+    data: model.toJson(), // Always use generated toJson()
+  );
+  return QuickLinkModel.fromJson(response.data!).toEntity();
+}
+
+// Update - same pattern
+Future<QuickLink> updateQuickLink(QuickLink link) async {
+  final model = QuickLinkModel.fromEntity(link);
+  final response = await _dio.put<Map<String, dynamic>>(
+    '$_basePath/${link.id}',
+    data: model.toJson(), // Always use generated toJson()
+  );
+  return QuickLinkModel.fromJson(response.data!).toEntity();
+}
+```
+
 ### Presentation Layer (Flutter + Riverpod)
 
 The presentation layer contains UI code and state management.

docs/CORE_API_SPEC.md

@@ -1,346 +0,0 @@
-# Core API Specification
-
-Expected API endpoints for the Tatlock UI Control Room feature.
-
-**Base URL:** `http://{host}:8083` (configurable via `CORE_API_URL`)
-
----
-
-## Containers
-
-### List Containers
-
-```
-GET /infrastructure/containers
-```
-
-**Query Parameters:**
-| Parameter | Type | Default | Description |
-|-----------|------|---------|-------------|
-| `all` | boolean | `true` | Include stopped containers |
-
-**Response:** `200 OK`
-```json
-[
-  {
-    "Id": "abc123def456...",
-    "Names": ["/container-name"],
-    "Image": "nginx:latest",
-    "State": "running",
-    "Status": "Up 2 hours",
-    "Labels": {
-      "com.docker.compose.project": "my-stack",
-      "com.docker.compose.service": "web"
-    },
-    "Ports": [
-      {
-        "IP": "0.0.0.0",
-        "PrivatePort": 80,
-        "PublicPort": 8080,
-        "Type": "tcp"
-      }
-    ],
-    "Mounts": [
-      {
-        "Type": "bind",
-        "Source": "/host/path",
-        "Destination": "/container/path",
-        "Mode": "rw",
-        "RW": true
-      }
-    ],
-    "NetworkSettings": {
-      "Networks": {
-        "bridge": {}
-      }
-    },
-    "Created": 1704067200,
-    "SizeRw": 12345,
-    "SizeRootFs": 67890
-  }
-]
-```
-
----
-
-### Get Container
-
-```
-GET /infrastructure/containers/{id}
-```
-
-**Path Parameters:**
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `id` | string | Full container ID |
-
-**Response:** `200 OK`
-```json
-{
-  "Id": "abc123def456...",
-  "Names": ["/container-name"],
-  "Image": "nginx:latest",
-  "State": "running",
-  "Status": "Up 2 hours",
-  "Labels": {},
-  "Ports": [],
-  "Mounts": [],
-  "NetworkSettings": {},
-  "Created": 1704067200
-}
-```
-
----
-
-### Container Actions
-
-```
-POST /infrastructure/containers/{id}/{action}
-```
-
-**Path Parameters:**
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `id` | string | Full container ID |
-| `action` | string | One of: `start`, `stop`, `restart` |
-
-**Response:** `204 No Content`
-
----
-
-### Get Container Logs
-
-```
-GET /infrastructure/containers/{id}/logs
-```
-
-**Path Parameters:**
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `id` | string | Full container ID |
-
-**Query Parameters:**
-| Parameter | Type | Default | Description |
-|-----------|------|---------|-------------|
-| `tail` | integer | (all) | Number of lines from end |
-| `timestamps` | boolean | `false` | Include timestamps |
-
-**Response:** `200 OK`
-```
-Content-Type: text/plain
-
-2024-01-01T12:00:00Z Log line 1
-2024-01-01T12:00:01Z Log line 2
-...
-```
-
----
-
-### Delete Container
-
-```
-DELETE /infrastructure/containers/{id}
-```
-
-**Path Parameters:**
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `id` | string | Full container ID |
-
-**Query Parameters:**
-| Parameter | Type | Default | Description |
-|-----------|------|---------|-------------|
-| `force` | boolean | `false` | Force remove running container |
-
-**Response:** `204 No Content`
-
----
-
-## Stacks
-
-Stacks are Docker Compose projects. The stack ID is the value of the `com.docker.compose.project` label on containers.
-
-### Get Stack Compose YAML
-
-```
-GET /infrastructure/stacks/{stackId}/compose
-```
-
-**Path Parameters:**
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `stackId` | string | Stack name (compose project name) |
-
-**Response:** `200 OK`
-```
-Content-Type: text/yaml
-
-version: '3.8'
-services:
-  web:
-    image: nginx:latest
-    ports:
-      - "8080:80"
-  db:
-    image: postgres:14
-    environment:
-      POSTGRES_PASSWORD: ${DB_PASSWORD}
-```
-
----
-
-### Update Stack Compose YAML
-
-```
-PUT /infrastructure/stacks/{stackId}/compose
-```
-
-**Path Parameters:**
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `stackId` | string | Stack name (compose project name) |
-
-**Request Body:**
-```
-Content-Type: text/yaml
-
-version: '3.8'
-services:
-  web:
-    image: nginx:latest
-    ...
-```
-
-**Response:** `204 No Content`
-
----
-
-### Get Stack Environment Variables
-
-```
-GET /infrastructure/stacks/{stackId}/env
-```
-
-**Path Parameters:**
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `stackId` | string | Stack name (compose project name) |
-
-**Response:** `200 OK`
-```json
-{
-  "DB_PASSWORD": "secret123",
-  "API_KEY": "abc-def-ghi",
-  "DEBUG": "false"
-}
-```
-
----
-
-### Update Stack Environment Variables
-
-```
-PUT /infrastructure/stacks/{stackId}/env
-```
-
-**Path Parameters:**
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `stackId` | string | Stack name (compose project name) |
-
-**Request Body:**
-```json
-{
-  "DB_PASSWORD": "new-secret",
-  "API_KEY": "new-key",
-  "DEBUG": "true"
-}
-```
-
-**Response:** `204 No Content`
-
----
-
-### Deploy Stack
-
-Redeploys the stack with current YAML and environment variables.
-
-```
-POST /infrastructure/stacks/{stackId}/deploy
-```
-
-**Path Parameters:**
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `stackId` | string | Stack name (compose project name) |
-
-**Response:** `202 Accepted`
-
----
-
-### Rebuild Stack
-
-Pulls fresh images and recreates all containers in the stack.
-
-```
-POST /infrastructure/stacks/{stackId}/rebuild
-```
-
-**Path Parameters:**
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `stackId` | string | Stack name (compose project name) |
-
-**Response:** `202 Accepted`
-
----
-
-## Data Types Reference
-
-### Container States
-
-| Value | Description |
-|-------|-------------|
-| `created` | Container created but not started |
-| `running` | Container is running |
-| `paused` | Container is paused |
-| `restarting` | Container is restarting |
-| `removing` | Container is being removed |
-| `exited` | Container has exited |
-| `dead` | Container is dead |
-
-### Port Types
-
-| Value | Description |
-|-------|-------------|
-| `tcp` | TCP port |
-| `udp` | UDP port |
-
-### Mount Types
-
-| Value | Description |
-|-------|-------------|
-| `bind` | Bind mount from host |
-| `volume` | Docker volume |
-| `tmpfs` | Temporary filesystem |
-
----
-
-## Error Responses
-
-All endpoints return standard HTTP error codes:
-
-| Code | Description |
-|------|-------------|
-| `400` | Bad Request - Invalid parameters |
-| `404` | Not Found - Container/Stack not found |
-| `409` | Conflict - Container already in requested state |
-| `500` | Internal Server Error |
-
-**Error Body:**
-```json
-{
-  "error": "Container not found",
-  "code": "NOT_FOUND"
-}
-```

docs/UI_LAYOUT.md

@@ -75,18 +75,197 @@ All left-side panels (Nav Panel, Filter Panel) dock their header content to the
 
 Right-side panels (Detail Panel, Chat Dock) use standard vertically-centered headers since the logo bulge doesn't reach them.
 
+### Nav Panel Sections
+
+Nav items can be organized into **sections**. Section headers are **conditionally visible** - they only appear when multiple sections exist.
+
+#### Single Section (headers hidden)
+
+When all items belong to one section, no headers are shown:
+
+```
+┌─────────────────────────┐
+│  [≡] Sections     [···] │  ← Panel header
+├─────────────────────────┤
+│  ▸ Containers           │
+│    Networks             │
+│    Volumes              │
+│    Images               │
+│                         │
+└─────────────────────────┘
+```
+
+#### Multiple Sections (headers visible)
+
+When items span multiple sections, section headers appear:
+
+```
+┌─────────────────────────┐
+│  [≡] Sections     [···] │  ← Panel header
+├─────────────────────────┤
+│ ▌Portainer              │  ← Section header (subtle bg, left accent)
+│  ▸ Containers           │
+│    Networks             │
+│    Volumes              │
+│    Images               │
+│                         │
+│ ▌NPM                    │  ← Section header
+│    Proxy Hosts          │
+│    Redirections         │
+│    Streams              │
+│                         │
+│ ▌Authentik              │  ← Section header
+│    Users                │
+│    Groups               │
+│    Applications         │
+│                         │
+└─────────────────────────┘
+```
+
+#### Section Header Styling
+
+```
+┌─────────────────────────┐
+│▌SECTION NAME            │  ← Left accent bar (2px, primary color)
+└─────────────────────────┘   ← Background: surfaceContainerHigh
+                              ← Text: labelSmall, onSurfaceVariant
+                              ← Padding: 8px horizontal, 6px vertical
+                              ← All caps, letter-spacing: 0.5
+```
+
+#### Data Model
+
+```dart
+/// NavItem model (in nav_panel.dart)
+class NavItem {
+  final String id;
+  final String label;
+  final IconData icon;
+  final String? section;  // null = ungrouped
+}
+
+// Section headers auto-generate from unique section values
+// Visibility: items.map((i) => i.section).toSet().length > 1
+```
+
+#### Route Configuration Driven
+
+Sections are defined in the feature's route configuration, not the widget:
+
+```dart
+/// In lib/features/control_room/router.dart
+
+enum ControlRoomNav {
+  // Portainer section
+  containers('containers', 'Containers', Icons.dns, 'Portainer'),
+  networks('networks', 'Networks', Icons.hub, 'Portainer'),
+  volumes('volumes', 'Volumes', Icons.storage, 'Portainer'),
+  images('images', 'Images', Icons.photo_library, 'Portainer'),
+  // NPM section (future)
+  proxyHosts('proxy-hosts', 'Proxy Hosts', Icons.public, 'NPM'),
+  redirections('redirections', 'Redirections', Icons.alt_route, 'NPM'),
+  // Authentik section (future)
+  users('users', 'Users', Icons.people, 'Authentik'),
+  groups('groups', 'Groups', Icons.group_work, 'Authentik');
+
+  const ControlRoomNav(this.id, this.label, this.icon, this.section);
+
+  final String id;
+  final String label;
+  final IconData icon;
+  final String section;
+
+  NavItem toNavItem() => NavItem(
+        id: id,
+        label: label,
+        icon: icon,
+        section: section,
+      );
+}
+```
+
+The NavPanel widget receives items and auto-generates section headers based on unique section values in the list. No section logic lives in the widget - it just renders what the route config provides.
+
 ---
 
 ## Panel Configurations by Room
 
 ### Front Hall
+
+Front Hall uses a **three-mode content system** with a persistent QuickLinks panel:
+
+| Mode | QuickLinks Panel | Content Area |
+|------|------------------|--------------|
+| **Dashboard** | Normal navigation | Dashboard widgets (stats, weather) |
+| **Iframe** | Normal navigation | Embedded iframe content |
+| **Settings** | Edit mode (back button, add new, overflow menus) | QuickLinkPage (EntityPageScaffold) |
+
+#### Dashboard Mode (default)
 ```
-┌────────────────────────────────────────────────────────────────┬────────────┐
-│  PRIMARY CONTENT (no nav panel)                                │ CHAT DOCK  │
-│  Dashboard cards, activity feed                                │ (expanded) │
-└────────────────────────────────────────────────────────────────┴────────────┘
+┌──────────────┬─────────────────────────────────────────────────┬────────────┐
+│ QUICK LINKS  │  PRIMARY CONTENT                                │ CHAT DOCK  │
+│              │                                                 │ (expanded) │
+│ ▌HOME        │  SYSTEM STATS                                   │            │
+│   Jellyfin   │  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐           │            │
+│   WebUI      │  │ CPU  │ │ MEM  │ │ DISK │ │ NET  │           │            │
+│              │  └──────┘ └──────┘ └──────┘ └──────┘           │            │
+│ ▌AMP         │                                                 │            │
+│   AMP Home   │  WEATHER              AIR QUALITY               │            │
+│              │  ┌────────────────┐   ┌────────────────┐        │            │
+│ ▌INFRA       │  │ 72°F Sunny     │   │ AQI: 42 Good   │        │            │
+│   Netdata    │  └────────────────┘   └────────────────┘        │            │
+│              │                                                 │            │
+│ [⚙ Settings] │                                                 │            │
+└──────────────┴─────────────────────────────────────────────────┴────────────┘
 ```
 
+#### Iframe Mode
+```
+┌──────────────┬─────────────────────────────────────────────────┬────────────┐
+│ QUICK LINKS  │ ┌─────────────────────────────────────────────┐ │ CHAT DOCK  │
+│              │ │ Jellyfin          [↗] [⟳] [✕]              │ │ (collapsed)│
+│ ▌HOME        │ ├─────────────────────────────────────────────┤ │            │
+│  ▸Jellyfin   │ │                                             │ │            │
+│   WebUI      │ │        <iframe src="jellyfin.url">          │ │            │
+│              │ │                                             │ │            │
+│ ▌AMP         │ │                                             │ │            │
+│   AMP Home   │ │                                             │ │            │
+│              │ │                                             │ │            │
+│ ▌INFRA       │ │                                             │ │            │
+│   Netdata    │ │                                             │ │            │
+│              │ └─────────────────────────────────────────────┘ │            │
+│ [⚙ Settings] │                                                 │            │
+└──────────────┴─────────────────────────────────────────────────┴────────────┘
+```
+
+#### Settings Mode
+```
+┌──────────────┬─────────────────────────────────────────────────┬────────────┐
+│ [←] Links    │ ┌─────────────────────────────────────────────┐ │ CHAT DOCK  │
+│              │ │ ← Back    Edit Quick Link         [Save]    │ │ (collapsed)│
+│ [+ Add New]  │ ├─────────────────────────────────────────────┤ │            │
+├──────────────┤ │                                             │ │            │
+│ ▌HOME        │ │  Name:     [Jellyfin_________________]      │ │            │
+│  ▸Jellyfin ⋮ │ │                                             │ │            │
+│   WebUI    ⋮ │ │  URL:      [https://jellyfin.schweitz...]   │ │            │
+│              │ │                                             │ │            │
+│ ▌AMP         │ │  Category: [Home ▼]                         │ │            │
+│   AMP Home ⋮ │ │                                             │ │            │
+│              │ │  Type:     ◉ Iframe  ○ New Tab              │ │            │
+│ ▌INFRA       │ │                                             │ │            │
+│   Netdata  ⋮ │ │  Icon:     [🎬 Pick...]                     │ │            │
+│   Portainer⋮ │ │                                             │ │            │
+│              │ │  Active:   [✓]                              │ │            │
+└──────────────┴─────────────────────────────────────────────────┴────────────┘
+```
+
+**Settings mode panel behavior:**
+- Back button in header (exits settings mode → dashboard)
+- "+ Add New Link" button at top
+- Each item has overflow menu (Edit, Delete, Move Up/Down)
+- Clicking item selects it for editing in content area
+- Uses EntityPageScaffold pattern (no modals)
+
 ### Control Room
 ```
 ┌───────────┬──────────────────────────────────────────────────────┬──────────┐
@@ -260,29 +439,51 @@ Primary landing page. Chat dock expanded by default.
 
 ### Control Room (Infrastructure)
 
-Context sidebar with section navigation. Chat collapsed.
+Nav panel with grouped section navigation. Chat collapsed.
 
+**Current state** (single grouper - headers hidden):
 ```
 ┌───────────────┬───────────────────────────────────────────────────────┬──────┐
 │               │                                                       │      │
 │  SECTIONS     │  CONTAINERS                        [Search] [+ New]   │  💬  │
 │               │  ─────────────────────────────────────────────────── │      │
 │  ▸ Containers │  ☑ NAME          STATUS    CPU    MEM    IMAGE    ⋮  │      │
-│    Stacks     │  ☐ jellyfin      ● Run     2.3%   1.2GB  latest   ⋮  │      │
+│    Networks   │  ☐ jellyfin      ● Run     2.3%   1.2GB  latest   ⋮  │      │
+│    Volumes    │  ☐ ollama        ● Run     45%    8.0GB  0.1.32   ⋮  │      │
+│    Images     │  ☐ postgres      ● Run     1.1%   512MB  16-alp   ⋮  │      │
+│               │  ☐ redis         ● Run     0.2%   128MB  7-alp    ⋮  │      │
+│               │  ─────────────────────────────────────────────────── │      │
+│               │  Showing 5 of 40                    < 1 2 3 4 5 >    │      │
+│               │                                                       │      │
+└───────────────┴───────────────────────────────────────────────────────┴──────┘
+```
+
+**Future state** (multiple groupers - headers visible):
+```
+┌───────────────┬───────────────────────────────────────────────────────┬──────┐
+│               │                                                       │      │
+│  SECTIONS     │  CONTAINERS                        [Search] [+ New]   │  💬  │
+│               │  ─────────────────────────────────────────────────── │      │
+│ ▌PORTAINER    │  ☑ NAME          STATUS    CPU    MEM    IMAGE    ⋮  │      │
+│  ▸ Containers │  ☐ jellyfin      ● Run     2.3%   1.2GB  latest   ⋮  │      │
 │    Networks   │  ☐ ollama        ● Run     45%    8.0GB  0.1.32   ⋮  │      │
-│    Volumes    │  ☐ postgres      ● Run     1.1%   512MB  16-alp   ⋮  │      │
-│    Images     │  ☐ redis         ● Run     0.2%   128MB  7-alp    ⋮  │      │
-│               │  ☐ authentik     ○ Stop    -      -      2024.2   ⋮  │      │
-│  ──────────── │  ─────────────────────────────────────────────────── │      │
-│    Netdata  ↗ │  Showing 5 of 40                    < 1 2 3 4 5 >    │      │
-│    Portainer↗ │                                                       │      │
-│    NPM      ↗ │                                                       │      │
+│    Volumes    │  ─────────────────────────────────────────────────── │      │
+│    Images     │  Showing 3 of 40                    < 1 2 3 4 5 >    │      │
+│               │                                                       │      │
+│ ▌NPM          │                                                       │      │
+│    Proxy Hosts│                                                       │      │
+│    Redirects  │                                                       │      │
+│               │                                                       │      │
+│ ▌AUTHENTIK    │                                                       │      │
+│    Users      │                                                       │      │
+│    Groups     │                                                       │      │
 │               │                                                       │      │
 └───────────────┴───────────────────────────────────────────────────────┴──────┘
 ```
 
 **Components:**
-- Context Sidebar: Section nav + external links
+- Nav Panel: Grouped section navigation (grouper headers conditional)
+- Filter Panel: Stack/item filtering within section
 - DataGrid: Container list with bulk actions
 - Detail Panel: Opens on row selection (replaces grid or slides in)
 

lib/app.dart

@@ -12,7 +12,7 @@ class TatlockApp extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final router = ref.watch(appRouterProvider);
-    final themeAsync = ref.watch(themeNotifierProvider);
+    final themeAsync = ref.watch(themeProvider);
 
     // Get theme mode, defaulting to system while loading
     final themeMode = switch (themeAsync) {

lib/core/api/api_client.dart

@@ -7,7 +7,7 @@ part 'api_client.g.dart';
 
 /// Provides the Dio instance for Core API.
 @riverpod
-Dio coreApiClient(CoreApiClientRef ref) {
+Dio coreApiClient(Ref ref) {
   final dio = Dio(
     BaseOptions(
       baseUrl: AppConfig.coreApiUrl,
@@ -31,7 +31,7 @@ Dio coreApiClient(CoreApiClientRef ref) {
 
 /// Provides the Dio instance for Tatlock API.
 @riverpod
-Dio tatlockApiClient(TatlockApiClientRef ref) {
+Dio tatlockApiClient(Ref ref) {
   final dio = Dio(
     BaseOptions(
       baseUrl: AppConfig.tatlockApiUrl,

lib/core/api/api_interceptors.dart

@@ -1,6 +1,7 @@
 import 'dart:developer' as developer;
 
 import 'package:dio/dio.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:tatlock_ui/core/auth/auth_provider.dart';
 import 'package:tatlock_ui/core/config/app_config.dart';
@@ -22,7 +23,7 @@ class AuthInterceptor extends Interceptor {
       return;
     }
 
-    final authState = _ref.read(authNotifierProvider);
+    final authState = _ref.read(authProvider);
 
     authState.whenData((auth) {
       if (auth.isAuthenticated && auth.accessToken != null) {
@@ -43,39 +44,65 @@ class AuthInterceptor extends Interceptor {
 
     if (err.response?.statusCode == 401) {
       // Token expired - trigger re-authentication
-      _ref.read(authNotifierProvider.notifier).signOut();
+      _ref.read(authProvider.notifier).signOut();
     }
     handler.next(err);
   }
 }
 
-/// Logs requests and responses in debug mode.
+/// Logs API requests and responses to the console.
+///
+/// All requests are logged with method, URL, query params, and body.
+/// Responses include status code. Errors include full details.
 class LoggingInterceptor extends Interceptor {
   @override
   void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
-    developer.log(
-      '→ ${options.method} ${options.uri}',
-      name: 'api',
-    );
+    final buffer = StringBuffer()
+      ..writeln('┌── API Request ──────────────────────────────────────')
+      ..writeln('│ ${options.method} ${options.path}');
+
+    if (options.queryParameters.isNotEmpty) {
+      buffer.writeln('│ Query: ${options.queryParameters}');
+    }
+
+    if (options.data != null) {
+      buffer.writeln('│ Body: ${options.data}');
+    }
+
+    buffer.writeln('└─────────────────────────────────────────────────────');
+
+    final message = buffer.toString();
+    developer.log(message, name: 'API');
+    debugPrint(message);
     handler.next(options);
   }
 
   @override
   void onResponse(Response response, ResponseInterceptorHandler handler) {
-    developer.log(
-      '← ${response.statusCode} ${response.requestOptions.uri}',
-      name: 'api',
-    );
+    final message =
+        '✓ ${response.statusCode} ${response.requestOptions.method} ${response.requestOptions.path}';
+    developer.log(message, name: 'API');
+    debugPrint(message);
     handler.next(response);
   }
 
   @override
   void onError(DioException err, ErrorInterceptorHandler handler) {
-    developer.log(
-      '✗ ${err.response?.statusCode ?? 'NETWORK'} ${err.requestOptions.uri}: ${err.message}',
-      name: 'api',
-      error: err,
-    );
+    final buffer = StringBuffer()
+      ..writeln('┌── API Error ────────────────────────────────────────')
+      ..writeln('│ ${err.requestOptions.method} ${err.requestOptions.path}')
+      ..writeln('│ Status: ${err.response?.statusCode ?? 'NETWORK ERROR'}')
+      ..writeln('│ Message: ${err.message}');
+
+    if (err.response?.data != null) {
+      buffer.writeln('│ Response: ${err.response?.data}');
+    }
+
+    buffer.writeln('└─────────────────────────────────────────────────────');
+
+    final message = buffer.toString();
+    developer.log(message, name: 'API', error: err);
+    debugPrint(message);
     handler.next(err);
   }
 }

lib/core/auth/auth_state.dart

@@ -4,7 +4,7 @@ part 'auth_state.freezed.dart';
 
 /// Authentication state.
 @freezed
-class AuthState with _$AuthState {
+sealed class AuthState with _$AuthState {
   const factory AuthState({
     @Default(false) bool isAuthenticated,
     String? accessToken,

lib/features/control_room/containers/data/datasources/containers_datasource.dart

@@ -1,5 +1,4 @@
 import 'package:dio/dio.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 import 'package:tatlock_ui/core/api/api_client.dart';
 import 'package:tatlock_ui/features/control_room/containers/data/models/container_model.dart';

lib/features/control_room/containers/data/models/container_model.dart

@@ -6,7 +6,7 @@ part 'container_model.g.dart';
 
 /// Container data model for API serialization.
 @freezed
-class ContainerModel with _$ContainerModel {
+sealed class ContainerModel with _$ContainerModel {
   const factory ContainerModel({
     @JsonKey(name: 'Id') required String id,
     @JsonKey(name: 'Names') required List<String> names,
@@ -68,7 +68,7 @@ class ContainerModel with _$ContainerModel {
 
 /// Port mapping model.
 @freezed
-class PortModel with _$PortModel {
+sealed class PortModel with _$PortModel {
   const factory PortModel({
     @JsonKey(name: 'IP') String? ip,
     @JsonKey(name: 'PrivatePort') required int privatePort,
@@ -93,7 +93,7 @@ class PortModel with _$PortModel {
 
 /// Mount model.
 @freezed
-class MountModel with _$MountModel {
+sealed class MountModel with _$MountModel {
   const factory MountModel({
     @JsonKey(name: 'Type') required String type,
     @JsonKey(name: 'Source') required String source,
@@ -119,7 +119,7 @@ class MountModel with _$MountModel {
 
 /// Network settings model.
 @freezed
-class NetworkSettingsModel with _$NetworkSettingsModel {
+sealed class NetworkSettingsModel with _$NetworkSettingsModel {
   const factory NetworkSettingsModel({
     @JsonKey(name: 'Networks') @Default({}) Map<String, dynamic> networks,
   }) = _NetworkSettingsModel;

lib/features/control_room/containers/data/repositories/container_repository_impl.dart

@@ -77,7 +77,7 @@ class ContainerRepositoryImpl implements ContainerRepository {
 
 /// Provides the container repository.
 @riverpod
-ContainerRepository containerRepository(ContainerRepositoryRef ref) {
+ContainerRepository containerRepository(Ref ref) {
   final datasource = ref.watch(containersDatasourceProvider);
   return ContainerRepositoryImpl(datasource);
 }

lib/features/control_room/containers/domain/entities/container.dart

@@ -4,7 +4,7 @@ part 'container.freezed.dart';
 
 /// Docker container entity.
 @freezed
-class Container with _$Container {
+sealed class Container with _$Container {
   const factory Container({
     /// Container ID (short form).
     required String id,
@@ -122,7 +122,7 @@ enum ContainerState {
 
 /// Port mapping configuration.
 @freezed
-class PortMapping with _$PortMapping {
+sealed class PortMapping with _$PortMapping {
   const factory PortMapping({
     /// Host IP (usually 0.0.0.0).
     String? hostIp,
@@ -149,7 +149,7 @@ class PortMapping with _$PortMapping {
 
 /// Volume mount configuration.
 @freezed
-class VolumeMount with _$VolumeMount {
+sealed class VolumeMount with _$VolumeMount {
   const factory VolumeMount({
     /// Mount type (bind, volume, tmpfs).
     required String type,

lib/features/control_room/containers/presentation/pages/containers_list_page.dart

@@ -1,17 +1,214 @@
 import 'package:flutter/material.dart' hide Container;
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:tatlock_ui/features/control_room/containers/domain/entities/container.dart';
+import 'package:tatlock_ui/core/api/api_client.dart';
 import 'package:tatlock_ui/features/control_room/containers/presentation/providers/containers_provider.dart';
 import 'package:tatlock_ui/features/control_room/containers/presentation/widgets/container_logs_viewer.dart';
 import 'package:tatlock_ui/features/control_room/containers/presentation/widgets/container_status_badge.dart';
+import 'package:tatlock_ui/shared/components/data_grid/adapters/core_api_source.dart';
+import 'package:tatlock_ui/shared/components/data_grid/data_grid_exports.dart';
+
+/// Health status of a container.
+enum ContainerHealth { healthy, unhealthy, starting, none }
+
+/// Container data class for DataGrid display.
+class ContainerData {
+  ContainerData({
+    required this.id,
+    required this.fullId,
+    required this.name,
+    required this.image,
+    required this.state,
+    required this.status,
+    required this.ports,
+    required this.health,
+  });
+
+  factory ContainerData.fromJson(Map<String, dynamic> json) {
+    // Docker API uses capitalized keys
+    final ports = (json['Ports'] as List<dynamic>?)
+            ?.map((p) => ContainerPort.fromJson(p as Map<String, dynamic>))
+            .toList() ??
+        [];
+
+    final fullId = json['Id'] as String? ?? '';
+    final names = json['Names'] as List<dynamic>? ?? [];
+    final name = names.isNotEmpty
+        ? (names.first as String).replaceFirst('/', '')
+        : 'Unknown';
+
+    final status = json['Status'] as String? ?? 'Unknown';
+
+    return ContainerData(
+      id: fullId.length > 12 ? fullId.substring(0, 12) : fullId,
+      fullId: fullId,
+      name: name,
+      image: json['Image'] as String? ?? 'Unknown',
+      state: json['State'] as String? ?? 'unknown',
+      status: status,
+      ports: ports,
+      health: _parseHealth(status),
+    );
+  }
+
+  /// Parse health status from Docker status string (e.g., "Up 2 hours (healthy)")
+  static ContainerHealth _parseHealth(String status) {
+    final lower = status.toLowerCase();
+    if (lower.contains('(healthy)')) return ContainerHealth.healthy;
+    if (lower.contains('(unhealthy)')) return ContainerHealth.unhealthy;
+    if (lower.contains('(health: starting)')) return ContainerHealth.starting;
+    return ContainerHealth.none;
+  }
+
+  final String id;
+  final String fullId;
+  final String name;
+  final String image;
+  final String state;
+  final String status;
+  final List<ContainerPort> ports;
+  final ContainerHealth health;
+
+  /// Status string with health info stripped (just shows uptime).
+  String get displayStatus {
+    return status
+        .replaceAll(RegExp(r'\s*\(healthy\)', caseSensitive: false), '')
+        .replaceAll(RegExp(r'\s*\(unhealthy\)', caseSensitive: false), '')
+        .replaceAll(RegExp(r'\s*\(health: starting\)', caseSensitive: false), '')
+        .trim();
+  }
+
+  bool get canStart => state == 'exited' || state == 'created';
+  bool get canStop => state == 'running';
+  bool get canRestart => state == 'running';
+}
+
+class ContainerPort {
+  ContainerPort({required this.privatePort, this.publicPort, this.type = 'tcp'});
+
+  factory ContainerPort.fromJson(Map<String, dynamic> json) => ContainerPort(
+        // Docker API uses PrivatePort/PublicPort
+        privatePort: json['PrivatePort'] as int? ?? 0,
+        publicPort: json['PublicPort'] as int?,
+        type: json['Type'] as String? ?? 'tcp',
+      );
+
+  final int privatePort;
+  final int? publicPort;
+  final String type;
+
+  String get formatted => publicPort != null ? '$publicPort:$privatePort' : '$privatePort';
+}
 
 /// Page displaying the list of containers using DataGrid.
-class ContainersListPage extends ConsumerWidget {
+class ContainersListPage extends ConsumerStatefulWidget {
   const ContainersListPage({super.key});
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final containersAsync = ref.watch(containersProvider);
+  ConsumerState<ContainersListPage> createState() => _ContainersListPageState();
+}
+
+class _ContainersListPageState extends ConsumerState<ContainersListPage> {
+  late final StateNotifierProvider<DataGridController<ContainerData>,
+      DataGridState<ContainerData>> _gridProvider;
+
+  @override
+  void initState() {
+    super.initState();
+    final dio = ref.read(coreApiClientProvider);
+    final source = CoreApiDataSource<ContainerData>(
+      dio: dio,
+      endpoint: '/infrastructure/containers',
+      fromJson: ContainerData.fromJson,
+    );
+
+    _gridProvider = dataGridProvider<ContainerData>(
+      source: source,
+      config: _buildConfig(),
+      idSelector: (c) => c.id,
+    );
+  }
+
+  DataGridConfig<ContainerData> _buildConfig() {
+    return DataGridConfig<ContainerData>(
+      columns: [
+        DataGridColumn<ContainerData>(
+          header: 'Container',
+          valueBuilder: (c) => '${c.name} ${c.image}',
+          sortable: true,
+          searchable: true,
+          width: const DataGridColumnWidth.flex(2),
+          cellBuilder: (context, c) => _ContainerCell(container: c),
+        ),
+        DataGridColumn<ContainerData>(
+          header: 'Ports',
+          valueBuilder: (c) => c.ports.map((p) => p.formatted).join(', '),
+          width: const DataGridColumnWidth.flex(1),
+          cellBuilder: (context, c) => _PortsCell(ports: c.ports),
+        ),
+        DataGridColumn<ContainerData>(
+          header: 'Status',
+          valueBuilder: (c) => c.displayStatus,
+          width: const DataGridColumnWidth.fixed(160),
+          alignment: DataGridColumnAlignment.end,
+        ),
+      ],
+      actions: [
+        DataGridAction<ContainerData>(
+          icon: Icons.play_arrow,
+          label: 'Start',
+          onTap: (c) async => _handleAction(c, 'start'),
+          showWhen: (c) => c.canStart,
+        ),
+        DataGridAction<ContainerData>(
+          icon: Icons.stop,
+          label: 'Stop',
+          onTap: (c) async => _handleAction(c, 'stop'),
+          showWhen: (c) => c.canStop,
+        ),
+        DataGridAction<ContainerData>(
+          icon: Icons.refresh,
+          label: 'Restart',
+          onTap: (c) async => _handleAction(c, 'restart'),
+          showWhen: (c) => c.canRestart,
+        ),
+        DataGridAction<ContainerData>(
+          icon: Icons.article,
+          label: 'View Logs',
+          onTap: (c) async => _showLogs(c),
+        ),
+      ],
+      enableSearch: true,
+      searchHint: 'Search containers...',
+      showHeader: true,
+      showFooter: true,
+    );
+  }
+
+  Future<void> _handleAction(ContainerData container, String action) async {
+    final actions = ref.read(containerActionsProvider.notifier);
+    switch (action) {
+      case 'start':
+        await actions.start(container.fullId);
+      case 'stop':
+        await actions.stop(container.fullId);
+      case 'restart':
+        await actions.restart(container.fullId);
+    }
+    // Refresh the grid after action
+    ref.read(_gridProvider.notifier).refresh();
+  }
+
+  Future<void> _showLogs(ContainerData container) async {
+    if (!mounted) return;
+    showContainerLogs(
+      context,
+      containerId: container.fullId,
+      containerName: container.name,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
     final colorScheme = Theme.of(context).colorScheme;
 
     // Listen for container action results to show snackbars
@@ -53,343 +250,87 @@ class ContainersListPage extends ConsumerWidget {
       }
     });
 
-    return containersAsync.when(
-      loading: () => const Center(child: CircularProgressIndicator()),
-      error: (error, stack) => Center(
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            Icon(
-              Icons.error_outline,
-              size: 48,
-              color: colorScheme.error,
-            ),
-            const SizedBox(height: 16),
-            const Text('Failed to load containers'),
-            const SizedBox(height: 8),
-            Text(
-              error.toString(),
-              style: TextStyle(color: colorScheme.outline),
-            ),
-            const SizedBox(height: 16),
-            FilledButton.icon(
-              onPressed: () => ref.invalidate(containersProvider),
-              icon: const Icon(Icons.refresh),
-              label: const Text('Retry'),
-            ),
-          ],
-        ),
-      ),
-      data: (containers) => _ContainersList(
-        containers: containers,
-        onAction: (container, action) => _handleAction(ref, container, action),
-        onViewLogs: (c) => showContainerLogs(
-          context,
-          containerId: c.fullId,
-          containerName: c.name,
-        ),
-        onRefresh: () => ref.invalidate(containersProvider),
-      ),
-    );
-  }
-
-  void _handleAction(WidgetRef ref, Container container, String action) {
-    final actions = ref.read(containerActionsProvider.notifier);
-    switch (action) {
-      case 'start':
-        actions.start(container.fullId);
-      case 'stop':
-        actions.stop(container.fullId);
-      case 'restart':
-        actions.restart(container.fullId);
-    }
-  }
-}
-
-class _ContainersList extends StatefulWidget {
-  const _ContainersList({
-    required this.containers,
-    required this.onAction,
-    required this.onViewLogs,
-    required this.onRefresh,
-  });
-
-  final List<Container> containers;
-  final void Function(Container, String) onAction;
-  final void Function(Container) onViewLogs;
-  final VoidCallback onRefresh;
-
-  @override
-  State<_ContainersList> createState() => _ContainersListState();
-}
-
-class _ContainersListState extends State<_ContainersList> {
-  final _searchController = TextEditingController();
-  String _searchQuery = '';
-
-  @override
-  void dispose() {
-    _searchController.dispose();
-    super.dispose();
-  }
-
-  List<Container> get _filteredContainers {
-    if (_searchQuery.isEmpty) return widget.containers;
-    final query = _searchQuery.toLowerCase();
-    return widget.containers.where((c) {
-      return c.name.toLowerCase().contains(query) ||
-          c.image.toLowerCase().contains(query) ||
-          c.status.toLowerCase().contains(query);
-    }).toList();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final colorScheme = Theme.of(context).colorScheme;
-    final filtered = _filteredContainers;
-
-    return Column(
-      children: [
-        // Toolbar with search
-        Padding(
-          padding: const EdgeInsets.all(16),
-          child: Row(
-            children: [
-              Text(
-                '${filtered.length} of ${widget.containers.length} containers',
-                style: Theme.of(context).textTheme.titleSmall?.copyWith(
-                      color: colorScheme.onSurfaceVariant,
-                    ),
-              ),
-              const Spacer(),
-              SizedBox(
-                width: 250,
-                child: TextField(
-                  controller: _searchController,
-                  decoration: InputDecoration(
-                    hintText: 'Search containers...',
-                    prefixIcon: const Icon(Icons.search, size: 20),
-                    suffixIcon: _searchQuery.isNotEmpty
-                        ? IconButton(
-                            icon: const Icon(Icons.clear, size: 18),
-                            onPressed: () {
-                              _searchController.clear();
-                              setState(() => _searchQuery = '');
-                            },
-                          )
-                        : null,
-                    isDense: true,
-                    contentPadding: const EdgeInsets.symmetric(
-                      horizontal: 12,
-                      vertical: 8,
-                    ),
-                    border: OutlineInputBorder(
-                      borderRadius: BorderRadius.circular(8),
-                    ),
-                  ),
-                  onChanged: (value) => setState(() => _searchQuery = value),
-                ),
-              ),
-              const SizedBox(width: 8),
-              IconButton(
-                icon: const Icon(Icons.refresh),
-                tooltip: 'Refresh',
-                onPressed: widget.onRefresh,
-              ),
-            ],
-          ),
-        ),
-        // Container list or empty state
-        Expanded(
-          child: filtered.isEmpty
-              ? Center(
-                  child: Column(
-                    mainAxisSize: MainAxisSize.min,
-                    children: [
-                      Icon(
-                        _searchQuery.isEmpty
-                            ? Icons.inbox_outlined
-                            : Icons.search_off,
-                        size: 64,
-                        color: colorScheme.outline,
-                      ),
-                      const SizedBox(height: 16),
-                      Text(
-                        _searchQuery.isEmpty
-                            ? 'No containers found'
-                            : 'No containers match "$_searchQuery"',
-                        style: Theme.of(context).textTheme.titleMedium?.copyWith(
-                              color: colorScheme.onSurfaceVariant,
-                            ),
-                      ),
-                      if (_searchQuery.isNotEmpty) ...[
-                        const SizedBox(height: 8),
-                        TextButton(
-                          onPressed: () {
-                            _searchController.clear();
-                            setState(() => _searchQuery = '');
-                          },
-                          child: const Text('Clear search'),
-                        ),
-                      ],
-                    ],
-                  ),
-                )
-              : ListView.builder(
-                  itemCount: filtered.length,
-                  itemBuilder: (context, index) {
-                    final container = filtered[index];
-                    return _ContainerListTile(
-                      container: container,
-                      onAction: (action) => widget.onAction(container, action),
-                      onViewLogs: () => widget.onViewLogs(container),
-                    );
-                  },
-                ),
+    return DataGrid<ContainerData>(
+      provider: _gridProvider,
+      config: _buildConfig(),
+      idSelector: (c) => c.id,
+      toolbarActions: [
+        IconButton(
+          icon: const Icon(Icons.refresh),
+          tooltip: 'Refresh',
+          onPressed: () => ref.read(_gridProvider.notifier).refresh(),
         ),
       ],
     );
   }
 }
 
-class _ContainerListTile extends StatelessWidget {
-  const _ContainerListTile({
-    required this.container,
-    required this.onAction,
-    required this.onViewLogs,
-  });
+class _ContainerCell extends StatelessWidget {
+  const _ContainerCell({required this.container});
 
-  final Container container;
-  final void Function(String) onAction;
-  final VoidCallback onViewLogs;
+  final ContainerData container;
 
   @override
   Widget build(BuildContext context) {
     final colorScheme = Theme.of(context).colorScheme;
 
-    return Card(
-      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
-      child: Padding(
-        padding: const EdgeInsets.all(12),
-        child: Row(
-          children: [
-            // Status and name
-            Expanded(
-              flex: 2,
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Row(
-                    children: [
-                      ContainerStatusBadge(state: container.state),
-                      const SizedBox(width: 8),
-                      Expanded(
-                        child: Text(
-                          container.name,
-                          style: const TextStyle(fontWeight: FontWeight.w500),
-                          overflow: TextOverflow.ellipsis,
-                        ),
-                      ),
-                    ],
-                  ),
-                  const SizedBox(height: 4),
-                  Text(
-                    container.image,
-                    style: TextStyle(
-                      fontSize: 12,
-                      color: colorScheme.onSurfaceVariant,
-                    ),
-                    overflow: TextOverflow.ellipsis,
-                  ),
-                ],
+    return Row(
+      children: [
+        ContainerStatusBadge.fromString(container.state, health: container.health),
+        const SizedBox(width: 8),
+        Expanded(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Text(
+                container.name,
+                style: const TextStyle(fontWeight: FontWeight.w500),
+                overflow: TextOverflow.ellipsis,
               ),
-            ),
-            // Ports
-            if (container.ports.isNotEmpty)
-              Expanded(
-                child: Text(
-                  container.ports.map((p) => p.formatted).join(', '),
-                  style: TextStyle(
-                    fontSize: 12,
-                    color: colorScheme.onSurfaceVariant,
-                    fontFamily: 'monospace',
-                  ),
-                  overflow: TextOverflow.ellipsis,
-                ),
-              ),
-            // Status text
-            SizedBox(
-              width: 120,
-              child: Text(
-                container.status,
+              Text(
+                container.image,
                 style: TextStyle(
                   fontSize: 12,
                   color: colorScheme.onSurfaceVariant,
                 ),
-                textAlign: TextAlign.end,
+                overflow: TextOverflow.ellipsis,
               ),
-            ),
-            // Actions
-            const SizedBox(width: 8),
-            PopupMenuButton<String>(
-              icon: const Icon(Icons.more_vert),
-              tooltip: 'Actions',
-              onSelected: (action) {
-                if (action == 'logs') {
-                  onViewLogs();
-                } else {
-                  onAction(action);
-                }
-              },
-              itemBuilder: (context) => [
-                if (container.canStart)
-                  const PopupMenuItem(
-                    value: 'start',
-                    child: Row(
-                      children: [
-                        Icon(Icons.play_arrow, size: 18),
-                        SizedBox(width: 8),
-                        Text('Start'),
-                      ],
-                    ),
-                  ),
-                if (container.canStop)
-                  const PopupMenuItem(
-                    value: 'stop',
-                    child: Row(
-                      children: [
-                        Icon(Icons.stop, size: 18),
-                        SizedBox(width: 8),
-                        Text('Stop'),
-                      ],
-                    ),
-                  ),
-                if (container.canRestart)
-                  const PopupMenuItem(
-                    value: 'restart',
-                    child: Row(
-                      children: [
-                        Icon(Icons.refresh, size: 18),
-                        SizedBox(width: 8),
-                        Text('Restart'),
-                      ],
-                    ),
-                  ),
-                const PopupMenuItem(
-                  value: 'logs',
-                  child: Row(
-                    children: [
-                      Icon(Icons.article, size: 18),
-                      SizedBox(width: 8),
-                      Text('View Logs'),
-                    ],
-                  ),
-                ),
-              ],
-            ),
-          ],
+            ],
+          ),
         ),
+      ],
+    );
+  }
+}
+
+class _PortsCell extends StatelessWidget {
+  const _PortsCell({required this.ports});
+
+  final List<ContainerPort> ports;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    if (ports.isEmpty) {
+      return Text(
+        '-',
+        style: TextStyle(
+          fontSize: 12,
+          color: colorScheme.outline,
+        ),
+      );
+    }
+
+    return Text(
+      ports.map((p) => p.formatted).join(', '),
+      style: TextStyle(
+        fontSize: 12,
+        color: colorScheme.onSurfaceVariant,
+        fontFamily: 'monospace',
       ),
+      overflow: TextOverflow.ellipsis,
     );
   }
 }

lib/features/control_room/containers/presentation/providers/containers_provider.dart

@@ -7,14 +7,14 @@ part 'containers_provider.g.dart';
 
 /// Provides all containers.
 @riverpod
-Future<List<Container>> allContainers(AllContainersRef ref) async {
+Future<List<Container>> allContainers(Ref ref) async {
   final repository = ref.watch(containerRepositoryProvider);
   return repository.getContainers();
 }
 
 /// Provides containers filtered by the selected stack.
 @riverpod
-Future<List<Container>> containers(ContainersRef ref) async {
+Future<List<Container>> containers(Ref ref) async {
   final repository = ref.watch(containerRepositoryProvider);
   final selectedStack = ref.watch(selectedStackProvider);
 
@@ -27,7 +27,7 @@ Future<List<Container>> containers(ContainersRef ref) async {
 
 /// Provides a single container by ID.
 @riverpod
-Future<Container> container(ContainerRef ref, String id) async {
+Future<Container> container(Ref ref, String id) async {
   final repository = ref.watch(containerRepositoryProvider);
   return repository.getContainer(id);
 }
@@ -82,7 +82,7 @@ class ContainerActions extends _$ContainerActions {
 /// Container logs provider.
 @riverpod
 Future<String> containerLogs(
-  ContainerLogsRef ref,
+  Ref ref,
   String id, {
   int? tail = 100,
 }) async {

lib/features/control_room/containers/presentation/widgets/container_logs_viewer.dart

@@ -22,7 +22,6 @@ class ContainerLogsViewer extends ConsumerStatefulWidget {
 class _ContainerLogsViewerState extends ConsumerState<ContainerLogsViewer> {
   final _scrollController = ScrollController();
   int _tailLines = 100;
-  bool _autoScroll = true;
 
   @override
   void dispose() {

lib/features/control_room/containers/presentation/widgets/container_status_badge.dart

@@ -1,22 +1,67 @@
 import 'package:flutter/material.dart' hide Container;
 import 'package:tatlock_ui/features/control_room/containers/domain/entities/container.dart';
+import 'package:tatlock_ui/features/control_room/containers/presentation/pages/containers_list_page.dart';
 
-/// Status badge for container state.
+/// Status badge for container state with optional health indication.
 class ContainerStatusBadge extends StatelessWidget {
   const ContainerStatusBadge({
     super.key,
     required this.state,
+    this.health,
     this.showLabel = true,
   });
 
+  /// Create badge from a string state value.
+  factory ContainerStatusBadge.fromString(
+    String state, {
+    ContainerHealth? health,
+    bool showLabel = true,
+  }) {
+    return ContainerStatusBadge(
+      state: _parseState(state),
+      health: health,
+      showLabel: showLabel,
+    );
+  }
+
+  /// Create badge from state enum and status string (parses health from status).
+  factory ContainerStatusBadge.withStatus({
+    required ContainerState state,
+    required String status,
+    bool showLabel = true,
+  }) {
+    return ContainerStatusBadge(
+      state: state,
+      health: _parseHealthFromStatus(status),
+      showLabel: showLabel,
+    );
+  }
+
+  /// Parse health status from Docker status string.
+  static ContainerHealth _parseHealthFromStatus(String status) {
+    final lower = status.toLowerCase();
+    if (lower.contains('(healthy)')) return ContainerHealth.healthy;
+    if (lower.contains('(unhealthy)')) return ContainerHealth.unhealthy;
+    if (lower.contains('(health: starting)')) return ContainerHealth.starting;
+    return ContainerHealth.none;
+  }
+
   final ContainerState state;
+  final ContainerHealth? health;
   final bool showLabel;
 
+  static ContainerState _parseState(String value) {
+    return ContainerState.values.firstWhere(
+      (s) => s.name == value.toLowerCase(),
+      orElse: () => ContainerState.exited,
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     final (color, icon, label) = _getStateStyle(context);
 
-    return DecoratedBox(
+    Widget badge = DecoratedBox(
       decoration: BoxDecoration(
         color: color.withValues(alpha: 0.15),
         borderRadius: BorderRadius.circular(4),
@@ -43,17 +88,22 @@ class ContainerStatusBadge extends StatelessWidget {
         ),
       ),
     );
+
+    if (showLabel) {
+      badge = ConstrainedBox(
+        constraints: const BoxConstraints(minWidth: 90),
+        child: badge,
+      );
+    }
+
+    return badge;
   }
 
   (Color, IconData, String) _getStateStyle(BuildContext context) {
     final colorScheme = Theme.of(context).colorScheme;
 
     return switch (state) {
-      ContainerState.running => (
-          Colors.green,
-          Icons.play_circle,
-          'Running',
-        ),
+      ContainerState.running => _getRunningStyle(colorScheme),
       ContainerState.paused => (
           Colors.orange,
           Icons.pause_circle,
@@ -86,4 +136,30 @@ class ContainerStatusBadge extends StatelessWidget {
         ),
     };
   }
+
+  /// Get style for running state, factoring in health status.
+  (Color, IconData, String) _getRunningStyle(ColorScheme colorScheme) {
+    return switch (health) {
+      ContainerHealth.healthy => (
+          Colors.green,
+          Icons.play_circle,
+          'Running',
+        ),
+      ContainerHealth.unhealthy => (
+          Colors.orange,
+          Icons.warning_amber_rounded,
+          'Unhealthy',
+        ),
+      ContainerHealth.starting => (
+          Colors.blue,
+          Icons.hourglass_top,
+          'Starting',
+        ),
+      ContainerHealth.none || null => (
+          Colors.green,
+          Icons.play_circle,
+          'Running',
+        ),
+    };
+  }
 }

lib/features/control_room/npm/data/datasources/proxy_hosts_datasource.dart

@@ -0,0 +1,68 @@
+import 'package:dio/dio.dart';
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+import 'package:tatlock_ui/core/api/api_client.dart';
+import 'package:tatlock_ui/features/control_room/npm/data/models/proxy_host_model.dart';
+
+part 'proxy_hosts_datasource.g.dart';
+
+/// Remote data source for NPM proxy host operations via Core API.
+class ProxyHostsDatasource {
+  ProxyHostsDatasource(this._dio);
+
+  final Dio _dio;
+
+  /// Gets all configured domains from Core API.
+  Future<List<DomainInfoModel>> getDomains() async {
+    final response = await _dio.get<List<dynamic>>(
+      '/infrastructure/domains',
+    );
+
+    return response.data!
+        .map((json) => DomainInfoModel.fromJson(json as Map<String, dynamic>))
+        .toList();
+  }
+
+  /// Gets detailed proxy host configuration by ID.
+  Future<ProxyHostModel> getProxyHost(int proxyId) async {
+    final response = await _dio.get<Map<String, dynamic>>(
+      '/infrastructure/proxy/$proxyId',
+    );
+
+    return ProxyHostModel.fromJson(response.data!);
+  }
+
+  /// Creates a new proxy host.
+  Future<void> createProxyHost({
+    required List<String> domainNames,
+    required String forwardScheme,
+    required String forwardHost,
+    required int forwardPort,
+    bool sslEnabled = false,
+  }) async {
+    await _dio.post<void>(
+      '/infrastructure/proxy',
+      data: {
+        'domain_names': domainNames,
+        'forward_scheme': forwardScheme,
+        'forward_host': forwardHost,
+        'forward_port': forwardPort,
+        'ssl_enabled': sslEnabled,
+      },
+    );
+  }
+
+  /// Updates an existing proxy host.
+  Future<void> updateProxyHost(int proxyId, Map<String, dynamic> config) async {
+    await _dio.put<void>(
+      '/infrastructure/proxy/$proxyId',
+      data: config,
+    );
+  }
+}
+
+/// Provides the proxy hosts datasource.
+@riverpod
+ProxyHostsDatasource proxyHostsDatasource(Ref ref) {
+  final dio = ref.watch(coreApiClientProvider);
+  return ProxyHostsDatasource(dio);
+}

lib/features/control_room/npm/data/models/proxy_host_model.dart

@@ -0,0 +1,137 @@
+import 'package:freezed_annotation/freezed_annotation.dart';
+import 'package:tatlock_ui/features/control_room/npm/domain/entities/proxy_host.dart';
+
+part 'proxy_host_model.freezed.dart';
+part 'proxy_host_model.g.dart';
+
+/// Converts API values that can be either int or bool (false) to int?.
+/// NPM returns false instead of null for missing IDs.
+class NullableIntOrBoolConverter implements JsonConverter<int?, dynamic> {
+  const NullableIntOrBoolConverter();
+
+  @override
+  int? fromJson(dynamic json) {
+    if (json == null || json == false) return null;
+    if (json is int) return json;
+    if (json is num) return json.toInt();
+    return null;
+  }
+
+  @override
+  dynamic toJson(int? object) => object;
+}
+
+/// Converts API values that can be either int or bool to int.
+/// NPM returns true/false for some 0/1 fields.
+class IntOrBoolConverter implements JsonConverter<int, dynamic> {
+  const IntOrBoolConverter();
+
+  @override
+  int fromJson(dynamic json) {
+    if (json == null) return 0;
+    if (json is bool) return json ? 1 : 0;
+    if (json is int) return json;
+    if (json is num) return json.toInt();
+    return 0;
+  }
+
+  @override
+  dynamic toJson(int object) => object;
+}
+
+/// Proxy host data model for API serialization.
+///
+/// Maps to the NPM API response format via Core API.
+@freezed
+sealed class ProxyHostModel with _$ProxyHostModel {
+  const factory ProxyHostModel({
+    required int id,
+    @JsonKey(name: 'domain_names') required List<String> domainNames,
+    @JsonKey(name: 'forward_scheme') required String forwardScheme,
+    @JsonKey(name: 'forward_host') required String forwardHost,
+    @JsonKey(name: 'forward_port') required int forwardPort,
+    @JsonKey(name: 'ssl_forced') @Default(false) bool sslForced,
+    @NullableIntOrBoolConverter() @JsonKey(name: 'certificate_id') int? certificateId,
+    @IntOrBoolConverter() @Default(1) int enabled,
+    @IntOrBoolConverter() @JsonKey(name: 'http2_support') @Default(0) int http2Support,
+    @IntOrBoolConverter() @JsonKey(name: 'hsts_enabled') @Default(0) int hstsEnabled,
+    @NullableIntOrBoolConverter() @JsonKey(name: 'access_list_id') int? accessListId,
+    @IntOrBoolConverter() @JsonKey(name: 'caching_enabled') @Default(0) int cachingEnabled,
+    @IntOrBoolConverter() @JsonKey(name: 'block_exploits') @Default(0) int blockExploits,
+    @IntOrBoolConverter() @JsonKey(name: 'allow_websocket_upgrade') @Default(0) int allowWebsocketUpgrade,
+    @JsonKey(name: 'created_on') String? createdOn,
+    @JsonKey(name: 'modified_on') String? modifiedOn,
+    @Default([]) List<ProxyLocationModel> locations,
+  }) = _ProxyHostModel;
+
+  const ProxyHostModel._();
+
+  factory ProxyHostModel.fromJson(Map<String, dynamic> json) =>
+      _$ProxyHostModelFromJson(json);
+
+  /// Converts to domain entity.
+  ProxyHost toEntity() {
+    return ProxyHost(
+      id: id,
+      domainNames: domainNames,
+      forwardScheme: forwardScheme,
+      forwardHost: forwardHost,
+      forwardPort: forwardPort,
+      sslEnabled: certificateId != null && certificateId! > 0,
+      certificateId: certificateId,
+      enabled: enabled == 1,
+      http2Support: http2Support == 1,
+      hstsEnabled: hstsEnabled == 1,
+      forceSSL: sslForced,
+      accessListId: accessListId,
+      cacheAssets: cachingEnabled == 1,
+      blockExploits: blockExploits == 1,
+      websocketSupport: allowWebsocketUpgrade == 1,
+      locations: locations.map((l) => l.toEntity()).toList(),
+      createdAt: createdOn != null ? DateTime.tryParse(createdOn!) : null,
+      modifiedAt: modifiedOn != null ? DateTime.tryParse(modifiedOn!) : null,
+    );
+  }
+}
+
+/// Proxy location model.
+@freezed
+sealed class ProxyLocationModel with _$ProxyLocationModel {
+  const factory ProxyLocationModel({
+    required String path,
+    @JsonKey(name: 'forward_scheme') required String forwardScheme,
+    @JsonKey(name: 'forward_host') required String forwardHost,
+    @JsonKey(name: 'forward_port') required int forwardPort,
+  }) = _ProxyLocationModel;
+
+  const ProxyLocationModel._();
+
+  factory ProxyLocationModel.fromJson(Map<String, dynamic> json) =>
+      _$ProxyLocationModelFromJson(json);
+
+  ProxyLocation toEntity() {
+    return ProxyLocation(
+      path: path,
+      forwardScheme: forwardScheme,
+      forwardHost: forwardHost,
+      forwardPort: forwardPort,
+    );
+  }
+}
+
+/// Domain info model for the /infrastructure/domains endpoint.
+///
+/// This is a simpler model used for listing domains.
+@freezed
+sealed class DomainInfoModel with _$DomainInfoModel {
+  const factory DomainInfoModel({
+    required String domain,
+    required String service,
+    @JsonKey(name: 'proxy_host_id') required int proxyHostId,
+    @JsonKey(name: 'ssl_enabled') @Default(false) bool sslEnabled,
+    @JsonKey(name: 'certificate_id') int? certificateId,
+  }) = _DomainInfoModel;
+
+  factory DomainInfoModel.fromJson(Map<String, dynamic> json) =>
+      _$DomainInfoModelFromJson(json);
+}

lib/features/control_room/npm/domain/entities/proxy_host.dart

@@ -0,0 +1,93 @@
+import 'package:freezed_annotation/freezed_annotation.dart';
+
+part 'proxy_host.freezed.dart';
+
+/// NPM proxy host entity representing a domain configuration.
+@freezed
+sealed class ProxyHost with _$ProxyHost {
+  const factory ProxyHost({
+    /// Proxy host ID.
+    required int id,
+
+    /// Domain names (can have multiple).
+    required List<String> domainNames,
+
+    /// Forward scheme (http or https).
+    required String forwardScheme,
+
+    /// Forward host (IP or hostname).
+    required String forwardHost,
+
+    /// Forward port.
+    required int forwardPort,
+
+    /// Whether SSL is enabled.
+    required bool sslEnabled,
+
+    /// SSL certificate ID (if enabled).
+    int? certificateId,
+
+    /// Whether the host is enabled.
+    @Default(true) bool enabled,
+
+    /// Whether HTTP/2 is enabled.
+    @Default(false) bool http2Support,
+
+    /// Whether HSTS is enabled.
+    @Default(false) bool hstsEnabled,
+
+    /// Whether to force SSL.
+    @Default(false) bool forceSSL,
+
+    /// Custom locations (advanced nginx config).
+    @Default([]) List<ProxyLocation> locations,
+
+    /// Access list ID (for auth).
+    int? accessListId,
+
+    /// Cache assets enabled.
+    @Default(false) bool cacheAssets,
+
+    /// Block common exploits.
+    @Default(false) bool blockExploits,
+
+    /// Websocket support.
+    @Default(false) bool websocketSupport,
+
+    /// Created timestamp.
+    DateTime? createdAt,
+
+    /// Modified timestamp.
+    DateTime? modifiedAt,
+  }) = _ProxyHost;
+
+  const ProxyHost._();
+
+  /// Primary domain (first in list).
+  String get primaryDomain =>
+      domainNames.isNotEmpty ? domainNames.first : 'Unknown';
+
+  /// Forward URL (scheme://host:port).
+  String get forwardUrl => '$forwardScheme://$forwardHost:$forwardPort';
+
+  /// SSL status label.
+  String get sslStatus => sslEnabled ? 'SSL Enabled' : 'No SSL';
+}
+
+/// Proxy location for advanced routing.
+@freezed
+sealed class ProxyLocation with _$ProxyLocation {
+  const factory ProxyLocation({
+    /// Location path.
+    required String path,
+
+    /// Forward scheme.
+    required String forwardScheme,
+
+    /// Forward host.
+    required String forwardHost,
+
+    /// Forward port.
+    required int forwardPort,
+  }) = _ProxyLocation;
+}

lib/features/control_room/npm/presentation/pages/proxy_host_page.dart

@@ -0,0 +1,297 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:tatlock_ui/features/control_room/npm/domain/entities/proxy_host.dart';
+import 'package:tatlock_ui/features/control_room/npm/presentation/providers/proxy_hosts_provider.dart';
+import 'package:tatlock_ui/features/control_room/npm/presentation/widgets/proxy_host_form.dart';
+import 'package:tatlock_ui/shared/widgets/entity_page.dart';
+
+/// Unified page for proxy host create, view, and edit.
+///
+/// Usage:
+/// - Create: `ProxyHostPage.create(onClose: ...)`
+/// - View/Edit: `ProxyHostPage(proxyHostId: 123, onClose: ...)`
+class ProxyHostPage extends ConsumerStatefulWidget {
+  const ProxyHostPage({
+    super.key,
+    required this.proxyHostId,
+    required this.onClose,
+  }) : _isCreate = false;
+
+  const ProxyHostPage.create({
+    super.key,
+    required this.onClose,
+  })  : proxyHostId = null,
+        _isCreate = true;
+
+  final int? proxyHostId;
+  final VoidCallback onClose;
+  final bool _isCreate;
+
+  @override
+  ConsumerState<ProxyHostPage> createState() => _ProxyHostPageState();
+}
+
+class _ProxyHostPageState extends ConsumerState<ProxyHostPage>
+    with EntityPageModeMixin {
+  @override
+  void initState() {
+    super.initState();
+    // Start in create mode if no ID, otherwise view mode
+    mode = widget._isCreate ? EntityPageMode.create : EntityPageMode.view;
+  }
+
+  String get _title {
+    switch (mode) {
+      case EntityPageMode.create:
+        return 'New Proxy Host';
+      case EntityPageMode.view:
+        return 'Proxy Host Details';
+      case EntityPageMode.edit:
+        return 'Edit Proxy Host';
+    }
+  }
+
+  void _handleSaved() {
+    if (widget._isCreate) {
+      // After create, close and return to list
+      widget.onClose();
+    } else {
+      // After edit, return to view mode and refresh
+      stopEditing();
+      ref.invalidate(proxyHostProvider(widget.proxyHostId!));
+    }
+    ref.invalidate(domainsProvider);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // Create mode - no need to fetch existing data
+    if (widget._isCreate) {
+      return EntityPageScaffold(
+        title: _title,
+        onBack: widget.onClose,
+        child: ProxyHostForm(
+          mode: EntityPageMode.create,
+          onCancel: widget.onClose,
+          onSaved: _handleSaved,
+        ),
+      );
+    }
+
+    // View/Edit mode - fetch existing proxy host
+    final proxyHostAsync = ref.watch(proxyHostProvider(widget.proxyHostId!));
+
+    return EntityPageScaffold(
+      title: _title,
+      onBack: widget.onClose,
+      actions: [
+        if (isViewing)
+          IconButton(
+            icon: const Icon(Icons.edit),
+            tooltip: 'Edit',
+            onPressed: startEditing,
+          ),
+        IconButton(
+          icon: const Icon(Icons.refresh),
+          tooltip: 'Refresh',
+          onPressed: () =>
+              ref.invalidate(proxyHostProvider(widget.proxyHostId!)),
+        ),
+      ],
+      child: EntityAsyncContent<ProxyHost>(
+        isLoading: proxyHostAsync.isLoading,
+        error: proxyHostAsync.error,
+        data: proxyHostAsync.value,
+        onRetry: () => ref.invalidate(proxyHostProvider(widget.proxyHostId!)),
+        builder: (proxyHost) {
+          if (isEditing) {
+            return ProxyHostForm(
+              mode: EntityPageMode.edit,
+              proxyHost: proxyHost,
+              onCancel: stopEditing,
+              onSaved: _handleSaved,
+            );
+          }
+          return _ProxyHostView(proxyHost: proxyHost);
+        },
+      ),
+    );
+  }
+}
+
+/// Read-only view of proxy host details.
+class _ProxyHostView extends StatelessWidget {
+  const _ProxyHostView({required this.proxyHost});
+
+  final ProxyHost proxyHost;
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      padding: const EdgeInsets.all(24),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          // Domain names
+          EntitySection(
+            title: 'Domain Names',
+            icon: Icons.public,
+            child: Wrap(
+              spacing: 8,
+              runSpacing: 8,
+              children: proxyHost.domainNames.map((domain) {
+                return Chip(
+                  avatar: Icon(
+                    proxyHost.sslEnabled ? Icons.lock : Icons.lock_open,
+                    size: 16,
+                    color: proxyHost.sslEnabled ? Colors.green : null,
+                  ),
+                  label: Text(domain),
+                );
+              }).toList(),
+            ),
+          ),
+          const SizedBox(height: 24),
+
+          // Forward destination
+          EntitySection(
+            title: 'Forward Destination',
+            icon: Icons.arrow_forward,
+            child: Card(
+              child: Padding(
+                padding: const EdgeInsets.all(16),
+                child: Row(
+                  children: [
+                    Icon(Icons.dns,
+                        color: Theme.of(context).colorScheme.primary),
+                    const SizedBox(width: 12),
+                    Expanded(
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Text(
+                            proxyHost.forwardUrl,
+                            style: Theme.of(context)
+                                .textTheme
+                                .titleMedium
+                                ?.copyWith(fontFamily: 'monospace'),
+                          ),
+                          const SizedBox(height: 4),
+                          Text(
+                            '${proxyHost.forwardScheme.toUpperCase()} → ${proxyHost.forwardHost}:${proxyHost.forwardPort}',
+                            style: TextStyle(
+                                color: Theme.of(context).colorScheme.outline),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+          const SizedBox(height: 24),
+
+          // SSL Settings
+          EntitySection(
+            title: 'SSL Settings',
+            icon: Icons.verified_user,
+            child: Card(
+              child: Padding(
+                padding: const EdgeInsets.all(16),
+                child: Column(
+                  children: [
+                    EntitySettingRow(
+                      label: 'SSL Enabled',
+                      value: proxyHost.sslEnabled,
+                    ),
+                    if (proxyHost.sslEnabled) ...[
+                      const Divider(),
+                      EntitySettingRow(
+                        label: 'Force SSL',
+                        value: proxyHost.forceSSL,
+                        subtitle: 'Redirect HTTP to HTTPS',
+                      ),
+                      const Divider(),
+                      EntitySettingRow(
+                        label: 'HTTP/2 Support',
+                        value: proxyHost.http2Support,
+                      ),
+                      const Divider(),
+                      EntitySettingRow(
+                        label: 'HSTS Enabled',
+                        value: proxyHost.hstsEnabled,
+                      ),
+                    ],
+                  ],
+                ),
+              ),
+            ),
+          ),
+          const SizedBox(height: 24),
+
+          // Advanced Settings
+          EntitySection(
+            title: 'Advanced Settings',
+            icon: Icons.settings,
+            child: Card(
+              child: Padding(
+                padding: const EdgeInsets.all(16),
+                child: Column(
+                  children: [
+                    EntitySettingRow(
+                      label: 'WebSocket Support',
+                      value: proxyHost.websocketSupport,
+                    ),
+                    const Divider(),
+                    EntitySettingRow(
+                      label: 'Block Exploits',
+                      value: proxyHost.blockExploits,
+                    ),
+                    const Divider(),
+                    EntitySettingRow(
+                      label: 'Cache Assets',
+                      value: proxyHost.cacheAssets,
+                    ),
+                    const Divider(),
+                    EntitySettingRow(
+                      label: 'Enabled',
+                      value: proxyHost.enabled,
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+
+          // Locations (if any)
+          if (proxyHost.locations.isNotEmpty) ...[
+            const SizedBox(height: 24),
+            EntitySection(
+              title: 'Custom Locations',
+              icon: Icons.route,
+              child: Card(
+                child: ListView.separated(
+                  shrinkWrap: true,
+                  physics: const NeverScrollableScrollPhysics(),
+                  itemCount: proxyHost.locations.length,
+                  separatorBuilder: (_, index) => const Divider(height: 1),
+                  itemBuilder: (context, index) {
+                    final loc = proxyHost.locations[index];
+                    return ListTile(
+                      leading: const Icon(Icons.subdirectory_arrow_right),
+                      title: Text(loc.path,
+                          style: const TextStyle(fontFamily: 'monospace')),
+                      subtitle: Text(
+                          '${loc.forwardScheme}://${loc.forwardHost}:${loc.forwardPort}'),
+                    );
+                  },
+                ),
+              ),
+            ),
+          ],
+        ],
+      ),
+    );
+  }
+}

lib/features/control_room/npm/presentation/pages/proxy_hosts_page.dart

@@ -0,0 +1,243 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:tatlock_ui/core/api/api_client.dart';
+import 'package:tatlock_ui/features/control_room/npm/presentation/pages/proxy_host_page.dart';
+import 'package:tatlock_ui/features/control_room/npm/presentation/providers/proxy_hosts_provider.dart';
+import 'package:tatlock_ui/shared/components/data_grid/adapters/core_api_source.dart';
+import 'package:tatlock_ui/shared/components/data_grid/data_grid_exports.dart';
+
+/// Domain info data class for DataGrid display.
+class DomainData {
+  DomainData({
+    required this.domain,
+    required this.service,
+    required this.proxyHostId,
+    required this.sslEnabled,
+    this.certificateId,
+  });
+
+  factory DomainData.fromJson(Map<String, dynamic> json) => DomainData(
+        domain: json['domain'] as String,
+        service: json['service'] as String,
+        proxyHostId: json['proxy_host_id'] as int,
+        sslEnabled: json['ssl_enabled'] as bool? ?? false,
+        certificateId: json['certificate_id'] as int?,
+      );
+
+  final String domain;
+  final String service;
+  final int proxyHostId;
+  final bool sslEnabled;
+  final int? certificateId;
+}
+
+/// Page displaying the list of proxy hosts (domains) from NPM.
+class ProxyHostsPage extends ConsumerStatefulWidget {
+  const ProxyHostsPage({super.key});
+
+  @override
+  ConsumerState<ProxyHostsPage> createState() => _ProxyHostsPageState();
+}
+
+class _ProxyHostsPageState extends ConsumerState<ProxyHostsPage> {
+  late final StateNotifierProvider<DataGridController<DomainData>,
+      DataGridState<DomainData>> _gridProvider;
+
+  @override
+  void initState() {
+    super.initState();
+    final dio = ref.read(coreApiClientProvider);
+    final source = CoreApiDataSource<DomainData>(
+      dio: dio,
+      endpoint: '/infrastructure/domains',
+      fromJson: DomainData.fromJson,
+    );
+
+    _gridProvider = dataGridProvider<DomainData>(
+      source: source,
+      config: _buildConfig(),
+      idSelector: (d) => d.proxyHostId.toString(),
+    );
+  }
+
+  DataGridConfig<DomainData> _buildConfig() {
+    return DataGridConfig<DomainData>(
+      columns: [
+        DataGridColumn<DomainData>(
+          header: 'Domain',
+          valueBuilder: (d) => d.domain,
+          sortable: true,
+          searchable: true,
+          width: const DataGridColumnWidth.flex(2),
+          cellBuilder: (context, d) => _DomainCell(domain: d),
+        ),
+        DataGridColumn<DomainData>(
+          header: 'Service',
+          valueBuilder: (d) => d.service,
+          width: const DataGridColumnWidth.flex(1),
+          cellBuilder: (context, d) => _ServiceCell(service: d.service),
+        ),
+        DataGridColumn<DomainData>(
+          header: 'SSL',
+          valueBuilder: (d) => d.sslEnabled ? 'Enabled' : 'Disabled',
+          width: const DataGridColumnWidth.fixed(100),
+          alignment: DataGridColumnAlignment.end,
+          cellBuilder: (context, d) => _SslBadge(enabled: d.sslEnabled),
+        ),
+      ],
+      actions: [
+        DataGridAction<DomainData>(
+          icon: Icons.edit,
+          label: 'Edit',
+          onTap: (d) async => _viewDomain(d),
+        ),
+      ],
+      enableSearch: true,
+      searchHint: 'Search domains...',
+      showHeader: true,
+      showFooter: true,
+    );
+  }
+
+  void _viewDomain(DomainData domain) {
+    ref.read(selectedProxyHostProvider.notifier).select(domain.proxyHostId);
+  }
+
+  void _createNew() {
+    ref.read(creatingProxyHostProvider.notifier).start();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final selectedId = ref.watch(selectedProxyHostProvider);
+    final isCreating = ref.watch(creatingProxyHostProvider);
+
+    // Show create page if creating new
+    if (isCreating) {
+      return ProxyHostPage.create(
+        onClose: () {
+          ref.read(creatingProxyHostProvider.notifier).stop();
+          ref.read(_gridProvider.notifier).refresh();
+        },
+      );
+    }
+
+    // Show detail page if a proxy host is selected
+    if (selectedId != null) {
+      return ProxyHostPage(
+        proxyHostId: selectedId,
+        onClose: () {
+          ref.read(selectedProxyHostProvider.notifier).clear();
+          ref.read(_gridProvider.notifier).refresh();
+        },
+      );
+    }
+
+    return DataGrid<DomainData>(
+      provider: _gridProvider,
+      config: _buildConfig(),
+      idSelector: (d) => d.proxyHostId.toString(),
+      toolbarActions: [
+        IconButton(
+          icon: const Icon(Icons.refresh),
+          tooltip: 'Refresh',
+          onPressed: () => ref.read(_gridProvider.notifier).refresh(),
+        ),
+        const SizedBox(width: 8),
+        FilledButton.icon(
+          onPressed: _createNew,
+          icon: const Icon(Icons.add),
+          label: const Text('New'),
+        ),
+      ],
+    );
+  }
+}
+
+class _DomainCell extends StatelessWidget {
+  const _DomainCell({required this.domain});
+
+  final DomainData domain;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Row(
+      children: [
+        Container(
+          padding: const EdgeInsets.all(8),
+          decoration: BoxDecoration(
+            color: domain.sslEnabled
+                ? Colors.green.withValues(alpha: 0.1)
+                : colorScheme.surfaceContainerHighest,
+            borderRadius: BorderRadius.circular(8),
+          ),
+          child: Icon(
+            domain.sslEnabled ? Icons.lock : Icons.lock_open,
+            size: 20,
+            color: domain.sslEnabled ? Colors.green : colorScheme.outline,
+          ),
+        ),
+        const SizedBox(width: 12),
+        Expanded(
+          child: Text(
+            domain.domain,
+            style: const TextStyle(fontWeight: FontWeight.w500),
+            overflow: TextOverflow.ellipsis,
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _ServiceCell extends StatelessWidget {
+  const _ServiceCell({required this.service});
+
+  final String service;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Text(
+      service,
+      style: TextStyle(
+        fontSize: 12,
+        color: colorScheme.onSurfaceVariant,
+        fontFamily: 'monospace',
+      ),
+      overflow: TextOverflow.ellipsis,
+    );
+  }
+}
+
+class _SslBadge extends StatelessWidget {
+  const _SslBadge({required this.enabled});
+
+  final bool enabled;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+      decoration: BoxDecoration(
+        color: enabled
+            ? Colors.green.withValues(alpha: 0.1)
+            : colorScheme.surfaceContainerHighest,
+        borderRadius: BorderRadius.circular(4),
+      ),
+      child: Text(
+        enabled ? 'SSL' : 'HTTP',
+        style: TextStyle(
+          fontSize: 11,
+          fontWeight: FontWeight.w500,
+          color: enabled ? Colors.green : colorScheme.outline,
+        ),
+      ),
+    );
+  }
+}

lib/features/control_room/npm/presentation/providers/proxy_hosts_provider.dart

@@ -0,0 +1,72 @@
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+import 'package:tatlock_ui/features/control_room/npm/data/datasources/proxy_hosts_datasource.dart';
+import 'package:tatlock_ui/features/control_room/npm/data/models/proxy_host_model.dart';
+import 'package:tatlock_ui/features/control_room/npm/domain/entities/proxy_host.dart';
+
+part 'proxy_hosts_provider.g.dart';
+
+/// Provider for the list of configured domains.
+@riverpod
+Future<List<DomainInfoModel>> domains(Ref ref) async {
+  final datasource = ref.watch(proxyHostsDatasourceProvider);
+  return datasource.getDomains();
+}
+
+/// Provider for a specific proxy host details.
+@riverpod
+Future<ProxyHost> proxyHost(Ref ref, int proxyId) async {
+  final datasource = ref.watch(proxyHostsDatasourceProvider);
+  final model = await datasource.getProxyHost(proxyId);
+  return model.toEntity();
+}
+
+/// Provider for selected proxy host ID (for detail view).
+@riverpod
+class SelectedProxyHost extends _$SelectedProxyHost {
+  @override
+  int? build() => null;
+
+  void select(int id) => state = id;
+  void clear() => state = null;
+}
+
+/// Provider for tracking if we're creating a new proxy host.
+@riverpod
+class CreatingProxyHost extends _$CreatingProxyHost {
+  @override
+  bool build() => false;
+
+  void start() => state = true;
+  void stop() => state = false;
+}
+
+/// Provider for creating a new proxy host.
+@riverpod
+Future<void> createProxyHost(
+  Ref ref, {
+  required List<String> domainNames,
+  required String forwardScheme,
+  required String forwardHost,
+  required int forwardPort,
+  bool sslEnabled = false,
+}) async {
+  final datasource = ref.watch(proxyHostsDatasourceProvider);
+  await datasource.createProxyHost(
+    domainNames: domainNames,
+    forwardScheme: forwardScheme,
+    forwardHost: forwardHost,
+    forwardPort: forwardPort,
+    sslEnabled: sslEnabled,
+  );
+}
+
+/// Provider for updating an existing proxy host.
+@riverpod
+Future<void> updateProxyHost(
+  Ref ref, {
+  required int id,
+  required Map<String, dynamic> config,
+}) async {
+  final datasource = ref.watch(proxyHostsDatasourceProvider);
+  await datasource.updateProxyHost(id, config);
+}

lib/features/control_room/npm/presentation/widgets/proxy_host_form.dart

@@ -0,0 +1,291 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:tatlock_ui/features/control_room/npm/domain/entities/proxy_host.dart';
+import 'package:tatlock_ui/features/control_room/npm/presentation/providers/proxy_hosts_provider.dart';
+import 'package:tatlock_ui/shared/widgets/entity_form_dialog.dart';
+import 'package:tatlock_ui/shared/widgets/entity_page.dart';
+
+/// Form for creating or editing a proxy host.
+class ProxyHostForm extends ConsumerStatefulWidget {
+  const ProxyHostForm({
+    super.key,
+    this.proxyHost,
+    this.mode = EntityPageMode.create,
+    required this.onCancel,
+    required this.onSaved,
+  });
+
+  /// Existing proxy host for editing (null for create).
+  final ProxyHost? proxyHost;
+
+  /// Form mode - create or edit.
+  final EntityPageMode mode;
+
+  final VoidCallback onCancel;
+  final VoidCallback onSaved;
+
+  bool get isEditing => mode == EntityPageMode.edit;
+
+  @override
+  ConsumerState<ProxyHostForm> createState() => _ProxyHostFormState();
+}
+
+class _ProxyHostFormState extends ConsumerState<ProxyHostForm> {
+  final _formKey = GlobalKey<FormState>();
+
+  late final TextEditingController _domainController;
+  late final TextEditingController _forwardHostController;
+  late final TextEditingController _forwardPortController;
+
+  late String _forwardScheme;
+  late bool _forceSSL;
+  late bool _http2Support;
+  late bool _websocketSupport;
+  late bool _blockExploits;
+  late bool _cacheAssets;
+
+  bool _isSaving = false;
+  String? _error;
+
+  @override
+  void initState() {
+    super.initState();
+    final host = widget.proxyHost;
+
+    _domainController = TextEditingController(
+      text: host?.domainNames.join(', ') ?? '',
+    );
+    _forwardHostController = TextEditingController(
+      text: host?.forwardHost ?? '',
+    );
+    _forwardPortController = TextEditingController(
+      text: host?.forwardPort.toString() ?? '80',
+    );
+
+    _forwardScheme = host?.forwardScheme ?? 'http';
+    _forceSSL = host?.forceSSL ?? false;
+    _http2Support = host?.http2Support ?? false;
+    _websocketSupport = host?.websocketSupport ?? false;
+    _blockExploits = host?.blockExploits ?? true;
+    _cacheAssets = host?.cacheAssets ?? false;
+  }
+
+  @override
+  void dispose() {
+    _domainController.dispose();
+    _forwardHostController.dispose();
+    _forwardPortController.dispose();
+    super.dispose();
+  }
+
+  Future<void> _handleSave() async {
+    if (!_formKey.currentState!.validate()) return;
+
+    setState(() {
+      _isSaving = true;
+      _error = null;
+    });
+
+    try {
+      final domains = _domainController.text
+          .split(',')
+          .map((d) => d.trim())
+          .where((d) => d.isNotEmpty)
+          .toList();
+
+      if (widget.isEditing) {
+        await ref.read(updateProxyHostProvider(
+          id: widget.proxyHost!.id,
+          config: {
+            'domain_names': domains,
+            'forward_scheme': _forwardScheme,
+            'forward_host': _forwardHostController.text,
+            'forward_port': int.parse(_forwardPortController.text),
+            'ssl_forced': _forceSSL,
+            'http2_support': _http2Support ? 1 : 0,
+            'allow_websocket_upgrade': _websocketSupport ? 1 : 0,
+            'block_exploits': _blockExploits ? 1 : 0,
+            'caching_enabled': _cacheAssets ? 1 : 0,
+          },
+        ).future);
+      } else {
+        await ref.read(createProxyHostProvider(
+          domainNames: domains,
+          forwardScheme: _forwardScheme,
+          forwardHost: _forwardHostController.text,
+          forwardPort: int.parse(_forwardPortController.text),
+        ).future);
+      }
+
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text(widget.isEditing
+                ? 'Proxy host updated successfully'
+                : 'Proxy host created successfully'),
+            backgroundColor: Colors.green,
+          ),
+        );
+        widget.onSaved();
+      }
+    } catch (e) {
+      setState(() => _error = e.toString());
+    } finally {
+      if (mounted) {
+        setState(() => _isSaving = false);
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return EntityForm(
+      formKey: _formKey,
+      mode: widget.mode,
+      onCancel: widget.onCancel,
+      onSave: _handleSave,
+      isSaving: _isSaving,
+      error: _error,
+      children: [
+        // Domain Names
+        Text('Domain Names', style: Theme.of(context).textTheme.titleMedium),
+        const SizedBox(height: 8),
+        TextFormField(
+          controller: _domainController,
+          decoration: const InputDecoration(
+            hintText: 'example.com, www.example.com',
+            helperText: 'Separate multiple domains with commas',
+            border: OutlineInputBorder(),
+          ),
+          validator: (value) {
+            if (value == null || value.trim().isEmpty) {
+              return 'At least one domain is required';
+            }
+            return null;
+          },
+        ),
+        const SizedBox(height: 24),
+
+        // Forward Destination
+        Text('Forward Destination', style: Theme.of(context).textTheme.titleMedium),
+        const SizedBox(height: 8),
+        Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            // Scheme dropdown
+            SizedBox(
+              width: 120,
+              child: DropdownButtonFormField<String>(
+                initialValue: _forwardScheme,
+                decoration: const InputDecoration(
+                  labelText: 'Scheme',
+                  border: OutlineInputBorder(),
+                ),
+                items: const [
+                  DropdownMenuItem(value: 'http', child: Text('HTTP')),
+                  DropdownMenuItem(value: 'https', child: Text('HTTPS')),
+                ],
+                onChanged: (value) {
+                  if (value != null) setState(() => _forwardScheme = value);
+                },
+              ),
+            ),
+            const SizedBox(width: 12),
+            // Host
+            Expanded(
+              flex: 2,
+              child: TextFormField(
+                controller: _forwardHostController,
+                decoration: const InputDecoration(
+                  labelText: 'Host',
+                  hintText: '192.168.1.100 or hostname',
+                  border: OutlineInputBorder(),
+                ),
+                validator: (value) {
+                  if (value == null || value.trim().isEmpty) {
+                    return 'Host is required';
+                  }
+                  return null;
+                },
+              ),
+            ),
+            const SizedBox(width: 12),
+            // Port
+            SizedBox(
+              width: 100,
+              child: TextFormField(
+                controller: _forwardPortController,
+                decoration: const InputDecoration(
+                  labelText: 'Port',
+                  border: OutlineInputBorder(),
+                ),
+                keyboardType: TextInputType.number,
+                validator: (value) {
+                  if (value == null || value.trim().isEmpty) {
+                    return 'Required';
+                  }
+                  final port = int.tryParse(value);
+                  if (port == null || port < 1 || port > 65535) {
+                    return 'Invalid';
+                  }
+                  return null;
+                },
+              ),
+            ),
+          ],
+        ),
+        const SizedBox(height: 24),
+
+        // SSL & Security Options
+        Text('SSL & Security', style: Theme.of(context).textTheme.titleMedium),
+        const SizedBox(height: 8),
+        Card(
+          child: Column(
+            children: [
+              SwitchListTile(
+                title: const Text('Force SSL'),
+                subtitle: const Text('Redirect HTTP to HTTPS'),
+                value: _forceSSL,
+                onChanged: (v) => setState(() => _forceSSL = v),
+              ),
+              const Divider(height: 1),
+              SwitchListTile(
+                title: const Text('HTTP/2 Support'),
+                value: _http2Support,
+                onChanged: (v) => setState(() => _http2Support = v),
+              ),
+              const Divider(height: 1),
+              SwitchListTile(
+                title: const Text('Block Common Exploits'),
+                value: _blockExploits,
+                onChanged: (v) => setState(() => _blockExploits = v),
+              ),
+            ],
+          ),
+        ),
+        const SizedBox(height: 24),
+
+        // Advanced Options
+        Text('Advanced', style: Theme.of(context).textTheme.titleMedium),
+        const SizedBox(height: 8),
+        Card(
+          child: Column(
+            children: [
+              SwitchListTile(
+                title: const Text('WebSocket Support'),
+                value: _websocketSupport,
+                onChanged: (v) => setState(() => _websocketSupport = v),
+              ),
+              const Divider(height: 1),
+              SwitchListTile(
+                title: const Text('Cache Assets'),
+                value: _cacheAssets,
+                onChanged: (v) => setState(() => _cacheAssets = v),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/features/control_room/presentation/pages/control_room_page.dart

@@ -1,37 +1,59 @@
 import 'package:flutter/material.dart' hide Stack;
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
 import 'package:tatlock_ui/features/control_room/containers/presentation/pages/containers_list_page.dart';
+import 'package:tatlock_ui/features/control_room/npm/presentation/pages/proxy_hosts_page.dart';
+import 'package:tatlock_ui/features/control_room/router.dart';
 import 'package:tatlock_ui/features/control_room/stacks/data/repositories/stack_repository_impl.dart';
 import 'package:tatlock_ui/features/control_room/stacks/domain/entities/stack.dart';
 import 'package:tatlock_ui/features/control_room/stacks/presentation/pages/stack_detail_page.dart';
 import 'package:tatlock_ui/features/control_room/stacks/presentation/providers/stacks_provider.dart';
 import 'package:tatlock_ui/features/control_room/stacks/presentation/widgets/stack_list_tile.dart';
 import 'package:tatlock_ui/shared/layouts/widgets/filter_panel.dart';
+import 'package:tatlock_ui/shared/layouts/widgets/nav_panel.dart';
 
-/// Main Control Room page with stacks sidebar and containers view.
+/// Main Control Room page with nav panel and section content.
 class ControlRoomPage extends ConsumerWidget {
-  const ControlRoomPage({super.key});
+  const ControlRoomPage({
+    super.key,
+    this.nav = ControlRoomNav.containers,
+  });
+
+  /// The current nav item to display.
+  final ControlRoomNav nav;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final selectedStack = ref.watch(selectedStackProvider);
+    final colorScheme = Theme.of(context).colorScheme;
 
     return Scaffold(
       body: Row(
         children: [
-          // Stacks sidebar
-          const _StacksSidebar(),
+          // Nav Panel - section navigation with grouping
+          NavPanel(
+            title: 'Sections',
+            icon: Icons.dns_outlined,
+            items: ControlRoomNav.values.map((n) => n.toNavItem()).toList(),
+            selectedId: nav.id,
+            onItemSelected: (id) {
+              final newNav = ControlRoomNav.values.firstWhere(
+                (n) => n.id == id,
+              );
+              // Navigate to section URL
+              context.go(pathForNav(newNav));
+              // Clear stack selection when changing sections
+              ref.read(selectedStackProvider.notifier).clear();
+            },
+          ),
           // Divider
           VerticalDivider(
             width: 1,
             thickness: 1,
-            color: Theme.of(context).colorScheme.outlineVariant,
+            color: colorScheme.outlineVariant,
           ),
-          // Main content area - shows either all containers or stack detail
+          // Section content
           Expanded(
-            child: selectedStack == null
-                ? const ContainersListPage()
-                : StackDetailPage(stackId: selectedStack),
+            child: _SectionContent(nav: nav),
           ),
         ],
       ),
@@ -39,9 +61,98 @@ class ControlRoomPage extends ConsumerWidget {
   }
 }
 
-/// Sidebar showing stacks list (Filter Panel per UI_LAYOUT.md).
-class _StacksSidebar extends ConsumerWidget {
-  const _StacksSidebar();
+/// Renders content for the selected nav item.
+class _SectionContent extends ConsumerWidget {
+  const _SectionContent({required this.nav});
+
+  final ControlRoomNav nav;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    switch (nav) {
+      case ControlRoomNav.containers:
+        return const _ContainersSection();
+      case ControlRoomNav.proxyHosts:
+        return const ProxyHostsPage();
+      default:
+        return _PlaceholderSection(nav: nav);
+    }
+  }
+}
+
+/// Containers section with optional stack filter.
+class _ContainersSection extends ConsumerWidget {
+  const _ContainersSection();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final selectedStack = ref.watch(selectedStackProvider);
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Row(
+      children: [
+        // Stacks filter panel
+        const _StacksFilterPanel(),
+        // Divider
+        VerticalDivider(
+          width: 1,
+          thickness: 1,
+          color: colorScheme.outlineVariant,
+        ),
+        // Main content - containers list or stack detail
+        Expanded(
+          child: selectedStack == null
+              ? const ContainersListPage()
+              : StackDetailPage(stackId: selectedStack),
+        ),
+      ],
+    );
+  }
+}
+
+/// Placeholder for nav items not yet implemented.
+class _PlaceholderSection extends StatelessWidget {
+  const _PlaceholderSection({required this.nav});
+
+  final ControlRoomNav nav;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    return Center(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Icon(
+            nav.icon,
+            size: 64,
+            color: colorScheme.outline,
+          ),
+          const SizedBox(height: 16),
+          Text(
+            nav.label,
+            style: textTheme.headlineSmall?.copyWith(
+              color: colorScheme.onSurfaceVariant,
+            ),
+          ),
+          const SizedBox(height: 8),
+          Text(
+            '${nav.section} • Coming soon',
+            style: textTheme.bodyMedium?.copyWith(
+              color: colorScheme.outline,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+/// Stacks filter panel for Containers section (includes "All Containers" option).
+class _StacksFilterPanel extends ConsumerWidget {
+  const _StacksFilterPanel();
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {

lib/features/control_room/router.dart

@@ -0,0 +1,80 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:tatlock_ui/features/control_room/presentation/pages/control_room_page.dart';
+import 'package:tatlock_ui/shared/layouts/widgets/nav_panel.dart';
+
+/// Route paths for Control Room.
+abstract class ControlRoomRoutes {
+  static const base = '/control-room';
+  // Portainer
+  static const containers = '/control-room/containers';
+  static const networks = '/control-room/networks';
+  static const volumes = '/control-room/volumes';
+  static const images = '/control-room/images';
+  // NPM
+  static const proxyHosts = '/control-room/proxy-hosts';
+  static const redirections = '/control-room/redirections';
+  static const streams = '/control-room/streams';
+  static const certificates = '/control-room/certificates';
+}
+
+/// Control Room navigation items with section grouping.
+enum ControlRoomNav {
+  // Portainer section
+  containers('containers', 'Containers', Icons.dns, 'Portainer'),
+  networks('networks', 'Networks', Icons.hub, 'Portainer'),
+  volumes('volumes', 'Volumes', Icons.storage, 'Portainer'),
+  images('images', 'Images', Icons.photo_library, 'Portainer'),
+  // NPM section
+  proxyHosts('proxy-hosts', 'Proxy Hosts', Icons.public, 'NPM'),
+  redirections('redirections', 'Redirections', Icons.alt_route, 'NPM'),
+  streams('streams', 'Streams', Icons.stream, 'NPM'),
+  certificates('certificates', 'SSL Certificates', Icons.verified_user, 'NPM');
+
+  const ControlRoomNav(this.id, this.label, this.icon, this.section);
+
+  final String id;
+  final String label;
+  final IconData icon;
+  final String section;
+
+  NavItem toNavItem() => NavItem(
+        id: id,
+        label: label,
+        icon: icon,
+        section: section,
+      );
+
+  /// Get route path for this nav item.
+  String get path => '/control-room/$id';
+}
+
+/// Get route path for a nav item.
+String pathForNav(ControlRoomNav nav) => nav.path;
+
+/// Control Room routes for go_router.
+List<RouteBase> controlRoomRoutes() {
+  return [
+    // Redirect /control-room to /control-room/containers
+    GoRoute(
+      path: ControlRoomRoutes.base,
+      name: 'controlRoom',
+      redirect: (context, state) => ControlRoomRoutes.containers,
+    ),
+    // Generate routes for all nav items
+    for (final nav in ControlRoomNav.values)
+      GoRoute(
+        path: nav.path,
+        name: 'controlRoom${_capitalize(nav.id.replaceAll('-', '_'))}',
+        builder: (context, state) => ControlRoomPage(nav: nav),
+      ),
+  ];
+}
+
+String _capitalize(String s) {
+  if (s.isEmpty) return s;
+  return s
+      .split('_')
+      .map((part) => part[0].toUpperCase() + part.substring(1))
+      .join('');
+}

lib/features/control_room/stacks/data/datasources/stacks_datasource.dart

@@ -125,7 +125,7 @@ class StacksDatasource {
 
 /// Provides the stacks datasource.
 @riverpod
-StacksDatasource stacksDatasource(StacksDatasourceRef ref) {
+StacksDatasource stacksDatasource(Ref ref) {
   final dio = ref.watch(coreApiClientProvider);
   final containersDatasource = ref.watch(containersDatasourceProvider);
   return StacksDatasource(dio, containersDatasource);

lib/features/control_room/stacks/data/models/stack_model.dart

@@ -6,7 +6,7 @@ part 'stack_model.g.dart';
 
 /// Stack data model for API serialization.
 @freezed
-class StackModel with _$StackModel {
+sealed class StackModel with _$StackModel {
   const factory StackModel({
     required String id,
     required String name,

lib/features/control_room/stacks/data/repositories/stack_repository_impl.dart

@@ -75,7 +75,7 @@ class StackRepositoryImpl implements StackRepository {
 
 /// Provides the stack repository.
 @riverpod
-StackRepository stackRepository(StackRepositoryRef ref) {
+StackRepository stackRepository(Ref ref) {
   final datasource = ref.watch(stacksDatasourceProvider);
   return StackRepositoryImpl(datasource);
 }

lib/features/control_room/stacks/domain/entities/stack.dart

@@ -4,7 +4,7 @@ part 'stack.freezed.dart';
 
 /// Container orchestration stack (Docker Compose stack).
 @freezed
-class Stack with _$Stack {
+sealed class Stack with _$Stack {
   const factory Stack({
     /// Unique stack identifier.
     required String id,

lib/features/control_room/stacks/presentation/pages/stack_detail_page.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart' hide Stack;
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:tatlock_ui/features/control_room/containers/domain/entities/container.dart'
+    as container_entity;
 import 'package:tatlock_ui/features/control_room/containers/presentation/providers/containers_provider.dart';
 import 'package:tatlock_ui/features/control_room/containers/presentation/widgets/container_logs_viewer.dart';
 import 'package:tatlock_ui/features/control_room/containers/presentation/widgets/container_status_badge.dart';
@@ -133,7 +135,9 @@ class _StackEditor extends ConsumerWidget {
       children: [
         // Header with stack info and actions
         Container(
-          padding: const EdgeInsets.all(16),
+          height: 56,
+          padding: const EdgeInsets.only(left: 16, right: 16, bottom: 8),
+          alignment: Alignment.bottomCenter,
           decoration: BoxDecoration(
             color: colorScheme.surfaceContainerHighest,
             border: Border(
@@ -141,11 +145,13 @@ class _StackEditor extends ConsumerWidget {
             ),
           ),
           child: Row(
+            crossAxisAlignment: CrossAxisAlignment.end,
             children: [
               Icon(Icons.layers, color: colorScheme.primary),
               const SizedBox(width: 12),
               Expanded(
                 child: Column(
+                  mainAxisSize: MainAxisSize.min,
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
                     Text(
@@ -211,7 +217,7 @@ class _CompactContainerList extends ConsumerWidget {
     required this.stackId,
   });
 
-  final List<dynamic> containers;
+  final List<container_entity.Container> containers;
   final String stackId;
 
   @override
@@ -269,7 +275,10 @@ class _CompactContainerList extends ConsumerWidget {
                       ),
                       child: ListTile(
                         dense: true,
-                        leading: ContainerStatusBadge(state: container.state),
+                        leading: ContainerStatusBadge.withStatus(
+                          state: container.state,
+                          status: container.status,
+                        ),
                         title: Text(
                           container.name,
                           style: const TextStyle(fontSize: 13),

lib/features/control_room/stacks/presentation/providers/stacks_provider.dart

@@ -6,14 +6,14 @@ part 'stacks_provider.g.dart';
 
 /// Provides the list of all stacks.
 @riverpod
-Future<List<Stack>> stacks(StacksRef ref) async {
+Future<List<Stack>> stacks(Ref ref) async {
   final repository = ref.watch(stackRepositoryProvider);
   return repository.getStacks();
 }
 
 /// Provides a single stack by ID.
 @riverpod
-Future<Stack> stack(StackRef ref, String id) async {
+Future<Stack> stack(Ref ref, String id) async {
   final repository = ref.watch(stackRepositoryProvider);
   return repository.getStack(id);
 }
@@ -35,14 +35,14 @@ class SelectedStack extends _$SelectedStack {
 
 /// Provides the YAML content for a stack.
 @riverpod
-Future<String> stackYaml(StackYamlRef ref, String stackId) async {
+Future<String> stackYaml(Ref ref, String stackId) async {
   final repository = ref.watch(stackRepositoryProvider);
   return repository.getStackYaml(stackId);
 }
 
 /// Provides the environment variables for a stack.
 @riverpod
-Future<Map<String, String>> stackEnvVars(StackEnvVarsRef ref, String stackId) async {
+Future<Map<String, String>> stackEnvVars(Ref ref, String stackId) async {
   final repository = ref.watch(stackRepositoryProvider);
   return repository.getStackEnvVars(stackId);
 }

lib/features/front_hall/data/datasources/quick_links_datasource.dart

@@ -0,0 +1,104 @@
+import 'package:dio/dio.dart';
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+import 'package:tatlock_ui/core/api/api_client.dart';
+import 'package:tatlock_ui/features/front_hall/data/models/quick_link_model.dart';
+import 'package:tatlock_ui/features/front_hall/domain/entities/quick_link.dart';
+
+part 'quick_links_datasource.g.dart';
+
+/// Data source for quick link operations.
+///
+/// Provides CRUD operations for Front Hall quick links via Core API
+/// dashboard/quick-links endpoint.
+class QuickLinksDatasource {
+  QuickLinksDatasource(this._dio);
+
+  final Dio _dio;
+
+  static const _basePath = '/dashboard/quick-links';
+
+  /// Gets all quick links.
+  ///
+  /// API returns: {"links": [...], "total": N}
+  Future<List<QuickLink>> getQuickLinks() async {
+    final response = await _dio.get<Map<String, dynamic>>(_basePath);
+    final data = response.data;
+
+    if (data == null) {
+      return [];
+    }
+
+    final links = data['links'] as List<dynamic>? ?? [];
+    return links
+        .map((json) => QuickLinkModel.fromJson(json as Map<String, dynamic>))
+        .map((model) => model.toEntity())
+        .toList();
+  }
+
+  /// Gets a single quick link by ID.
+  Future<QuickLink> getQuickLink(int id) async {
+    final response = await _dio.get<Map<String, dynamic>>('$_basePath/$id');
+    final data = response.data;
+
+    if (data == null) {
+      throw Exception('Quick link not found: $id');
+    }
+
+    return QuickLinkModel.fromJson(data).toEntity();
+  }
+
+  /// Creates a new quick link.
+  Future<QuickLink> createQuickLink(QuickLink link) async {
+    final model = QuickLinkModel.fromEntity(link);
+    final response = await _dio.post<Map<String, dynamic>>(
+      _basePath,
+      data: model.toJson(),
+    );
+    final data = response.data;
+
+    if (data == null) {
+      throw Exception('Failed to create quick link');
+    }
+
+    return QuickLinkModel.fromJson(data).toEntity();
+  }
+
+  /// Updates an existing quick link.
+  Future<QuickLink> updateQuickLink(QuickLink link) async {
+    final model = QuickLinkModel.fromEntity(link);
+    final id = int.tryParse(link.id) ?? 0;
+    final response = await _dio.put<Map<String, dynamic>>(
+      '$_basePath/$id',
+      data: model.toJson(),
+    );
+    final data = response.data;
+
+    if (data == null) {
+      throw Exception('Failed to update quick link');
+    }
+
+    return QuickLinkModel.fromJson(data).toEntity();
+  }
+
+  /// Deletes a quick link.
+  Future<void> deleteQuickLink(int id) async {
+    await _dio.delete<void>('$_basePath/$id');
+  }
+
+  /// Reorders quick links by updating positions.
+  ///
+  /// API expects: {"link_ids": [1, 2, 3]}
+  Future<void> reorderQuickLinks(List<int> orderedIds) async {
+    await _dio.post<void>(
+      '$_basePath/reorder',
+      data: {'link_ids': orderedIds},
+    );
+  }
+}
+
+/// Provides the quick links datasource.
+@riverpod
+QuickLinksDatasource quickLinksDatasource(Ref ref) {
+  final dio = ref.watch(coreApiClientProvider);
+  return QuickLinksDatasource(dio);
+}

lib/features/front_hall/data/models/quick_link_model.dart

@@ -0,0 +1,79 @@
+import 'package:freezed_annotation/freezed_annotation.dart';
+import 'package:tatlock_ui/features/front_hall/domain/entities/quick_link.dart';
+
+part 'quick_link_model.freezed.dart';
+part 'quick_link_model.g.dart';
+
+/// Quick link data model matching Core API dashboard/quick-links endpoint.
+///
+/// Field mapping:
+/// - title (API) ↔ name (Flutter entity)
+/// - icon (API) ↔ iconName (Flutter entity)
+/// - position (API) ↔ sortOrder (Flutter entity)
+/// - is_visible (API) ↔ isActive (Flutter entity)
+/// - link_type (API) ↔ type (Flutter entity)
+@freezed
+sealed class QuickLinkModel with _$QuickLinkModel {
+  const factory QuickLinkModel({
+    @Default(0) int id,
+    required String title,
+    required String url,
+    String? icon,
+    String? description,
+    String? category,
+    @Default(0) int position,
+    @JsonKey(name: 'is_visible') @Default(true) bool isVisible,
+    @JsonKey(name: 'link_type') @Default('iframe') String linkType,
+    String? color,
+    @JsonKey(name: 'background_color') String? backgroundColor,
+  }) = _QuickLinkModel;
+
+  const QuickLinkModel._();
+
+  factory QuickLinkModel.fromJson(Map<String, dynamic> json) =>
+      _$QuickLinkModelFromJson(json);
+
+  /// Converts to domain entity.
+  QuickLink toEntity() {
+    return QuickLink(
+      id: id.toString(),
+      name: title,
+      url: url,
+      iconName: icon ?? 'link',
+      category: category,
+      type: _parseQuickLinkType(linkType),
+      sortOrder: position,
+      isActive: isVisible,
+    );
+  }
+
+  /// Creates model from domain entity.
+  factory QuickLinkModel.fromEntity(QuickLink entity) {
+    return QuickLinkModel(
+      id: int.tryParse(entity.id) ?? 0,
+      title: entity.name,
+      url: entity.url,
+      icon: entity.iconName,
+      category: entity.category,
+      position: entity.sortOrder,
+      isVisible: entity.isActive,
+      linkType: _formatQuickLinkType(entity.type),
+    );
+  }
+}
+
+/// Parses API link_type string to QuickLinkType enum.
+QuickLinkType _parseQuickLinkType(String linkType) {
+  return switch (linkType) {
+    'new_tab' => QuickLinkType.newTab,
+    _ => QuickLinkType.iframe,
+  };
+}
+
+/// Formats QuickLinkType enum to API link_type string.
+String _formatQuickLinkType(QuickLinkType type) {
+  return switch (type) {
+    QuickLinkType.newTab => 'new_tab',
+    QuickLinkType.iframe => 'iframe',
+  };
+}

lib/features/front_hall/domain/entities/quick_link.dart

@@ -0,0 +1,53 @@
+import 'package:freezed_annotation/freezed_annotation.dart';
+
+part 'quick_link.freezed.dart';
+
+/// Quick link type for navigation behavior.
+enum QuickLinkType {
+  /// Opens in embedded iframe within the app.
+  iframe,
+
+  /// Opens in a new browser tab.
+  newTab,
+}
+
+/// Quick link entity for Front Hall navigation.
+///
+/// Represents a shortcut link that can either open embedded content
+/// in an iframe or navigate to an external URL in a new tab.
+@freezed
+sealed class QuickLink with _$QuickLink {
+  const factory QuickLink({
+    /// Unique identifier.
+    required String id,
+
+    /// Display name.
+    required String name,
+
+    /// Target URL.
+    required String url,
+
+    /// Material icon name (e.g., 'home', 'settings', 'movie').
+    required String iconName,
+
+    /// Category for grouping (e.g., 'Home', 'AMP', 'Coding', 'Infrastructure').
+    String? category,
+
+    /// Navigation behavior type.
+    @Default(QuickLinkType.iframe) QuickLinkType type,
+
+    /// Sort order within category.
+    @Default(0) int sortOrder,
+
+    /// Whether the link is active/visible.
+    @Default(true) bool isActive,
+  }) = _QuickLink;
+
+  const QuickLink._();
+
+  /// Whether this link opens in an iframe.
+  bool get isIframe => type == QuickLinkType.iframe;
+
+  /// Whether this link opens in a new tab.
+  bool get isNewTab => type == QuickLinkType.newTab;
+}

lib/features/front_hall/presentation/pages/front_hall_page.dart

@@ -1,142 +1,65 @@
 import 'package:flutter/material.dart';
-import 'package:tatlock_ui/version.g.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:tatlock_ui/features/front_hall/presentation/providers/front_hall_state_provider.dart';
+import 'package:tatlock_ui/features/front_hall/presentation/widgets/dashboard_content.dart';
+import 'package:tatlock_ui/features/front_hall/presentation/widgets/iframe_view.dart';
+import 'package:tatlock_ui/features/front_hall/presentation/widgets/quick_link_settings_content.dart';
+import 'package:tatlock_ui/features/front_hall/presentation/widgets/quick_links_panel.dart';
 
 /// Front Hall - estate overview and quick access.
-class FrontHallPage extends StatelessWidget {
+///
+/// Three-mode content area:
+/// - Dashboard: Stats, weather, welcome message
+/// - Iframe: Embedded external content (web only)
+/// - Settings: Quick link management
+class FrontHallPage extends ConsumerWidget {
   const FrontHallPage({super.key});
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
     final colorScheme = Theme.of(context).colorScheme;
+    final frontHallState = ref.watch(frontHallStateProvider);
 
-    // No Scaffold/AppBar needed - header is provided by AppScaffold
-    return ListView(
-        padding: const EdgeInsets.all(16),
-        children: [
-          // Welcome card
-          Card(
-            child: Padding(
-              padding: const EdgeInsets.all(24),
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Row(
-                    children: [
-                      Icon(
-                        Icons.waving_hand,
-                        size: 32,
-                        color: colorScheme.primary,
-                      ),
-                      const SizedBox(width: 12),
-                      Flexible(
-                        child: Text(
-                          'Welcome to Tatlock',
-                          style: Theme.of(context).textTheme.headlineSmall,
-                        ),
-                      ),
-                    ],
-                  ),
-                  const SizedBox(height: 12),
-                  Text(
-                    'Your homelab dashboard is ready. More features coming soon.',
-                    style: Theme.of(context).textTheme.bodyLarge?.copyWith(
-                          color: colorScheme.onSurfaceVariant,
-                        ),
-                  ),
-                ],
-              ),
-            ),
-          ),
-          const SizedBox(height: 16),
+    return Row(
+      children: [
+        // Left panel - Quick Links
+        const QuickLinksPanel(),
 
-          // Quick stats placeholder
-          Wrap(
-            spacing: 12,
-            runSpacing: 12,
-            children: [
-              SizedBox(
-                width: 160,
-                child: _StatCard(
-                  icon: Icons.memory,
-                  label: 'CPU',
-                  value: '--',
-                  color: colorScheme.primary,
-                ),
-              ),
-              SizedBox(
-                width: 160,
-                child: _StatCard(
-                  icon: Icons.storage,
-                  label: 'Memory',
-                  value: '--',
-                  color: colorScheme.secondary,
-                ),
-              ),
-              SizedBox(
-                width: 160,
-                child: _StatCard(
-                  icon: Icons.dns,
-                  label: 'Containers',
-                  value: '--',
-                  color: colorScheme.tertiary,
-                ),
-              ),
-            ],
-          ),
-          const SizedBox(height: 24),
-
-          // Version info
-          Center(
-            child: Text(
-              '${AppVersion.name} v${AppVersion.fullVersion}',
-              style: Theme.of(context).textTheme.bodySmall?.copyWith(
-                    color: colorScheme.outline,
-                  ),
-            ),
-          ),
-        ],
-      );
-  }
-}
-
-class _StatCard extends StatelessWidget {
-  const _StatCard({
-    required this.icon,
-    required this.label,
-    required this.value,
-    required this.color,
-  });
-
-  final IconData icon;
-  final String label;
-  final String value;
-  final Color color;
-
-  @override
-  Widget build(BuildContext context) {
-    return Card(
-      child: Padding(
-        padding: const EdgeInsets.all(16),
-        child: Column(
-          children: [
-            Icon(icon, size: 32, color: color),
-            const SizedBox(height: 8),
-            Text(
-              value,
-              style: Theme.of(context).textTheme.headlineMedium?.copyWith(
-                    fontWeight: FontWeight.bold,
-                  ),
-            ),
-            const SizedBox(height: 4),
-            Text(
-              label,
-              style: Theme.of(context).textTheme.bodySmall?.copyWith(
-                    color: Theme.of(context).colorScheme.outline,
-                  ),
-            ),
-          ],
+        // Vertical divider
+        VerticalDivider(
+          width: 1,
+          thickness: 1,
+          color: colorScheme.outlineVariant,
         ),
-      ),
+
+        // Main content area - switches based on mode
+        Expanded(
+          child: _buildContent(context, ref, frontHallState),
+        ),
+      ],
     );
   }
+
+  Widget _buildContent(
+    BuildContext context,
+    WidgetRef ref,
+    FrontHallState state,
+  ) {
+    switch (state.mode) {
+      case FrontHallMode.dashboard:
+        return const DashboardContent();
+
+      case FrontHallMode.iframe:
+        return IframeView(
+          key: ValueKey(state.activeIframeUrl),
+          url: state.activeIframeUrl!,
+          title: state.activeIframeTitle ?? 'External Content',
+          onClose: () =>
+              ref.read(frontHallStateProvider.notifier).showDashboard(),
+        );
+
+      case FrontHallMode.settings:
+        return const QuickLinkSettingsContent();
+    }
+  }
 }

lib/features/front_hall/presentation/providers/front_hall_state_provider.dart

@@ -0,0 +1,82 @@
+import 'package:freezed_annotation/freezed_annotation.dart';
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+part 'front_hall_state_provider.freezed.dart';
+part 'front_hall_state_provider.g.dart';
+
+/// Front Hall content display mode.
+enum FrontHallMode {
+  /// Shows dashboard widgets (stats, weather, etc.).
+  dashboard,
+
+  /// Shows embedded iframe content.
+  iframe,
+
+  /// Shows link management/settings UI.
+  settings,
+}
+
+/// State for Front Hall content area.
+@freezed
+sealed class FrontHallState with _$FrontHallState {
+  const factory FrontHallState({
+    /// Current display mode.
+    @Default(FrontHallMode.dashboard) FrontHallMode mode,
+
+    /// Active iframe URL (when mode is iframe).
+    String? activeIframeUrl,
+
+    /// Active iframe title (when mode is iframe).
+    String? activeIframeTitle,
+
+    /// Selected link ID for editing (when mode is settings).
+    /// Null means creating a new link.
+    String? selectedLinkId,
+  }) = _FrontHallState;
+
+  const FrontHallState._();
+}
+
+/// Controller for Front Hall state.
+@riverpod
+class FrontHallStateNotifier extends _$FrontHallStateNotifier {
+  @override
+  FrontHallState build() => const FrontHallState();
+
+  /// Shows the dashboard (default mode).
+  void showDashboard() {
+    state = const FrontHallState();
+  }
+
+  /// Shows an iframe with the given URL and title.
+  void showIframe(String url, String title) {
+    state = FrontHallState(
+      mode: FrontHallMode.iframe,
+      activeIframeUrl: url,
+      activeIframeTitle: title,
+    );
+  }
+
+  /// Enters settings mode, optionally selecting a link for editing.
+  void enterSettings({String? linkId}) {
+    state = FrontHallState(
+      mode: FrontHallMode.settings,
+      selectedLinkId: linkId,
+    );
+  }
+
+  /// Selects a link for editing (while in settings mode).
+  void selectLink(String linkId) {
+    state = state.copyWith(selectedLinkId: linkId);
+  }
+
+  /// Clears the selected link (for creating new).
+  void clearSelectedLink() {
+    state = state.copyWith(selectedLinkId: null);
+  }
+
+  /// Exits settings mode and returns to dashboard.
+  void exitSettings() {
+    state = const FrontHallState();
+  }
+}

lib/features/front_hall/presentation/providers/quick_links_provider.dart

@@ -0,0 +1,229 @@
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+import 'package:tatlock_ui/features/front_hall/data/datasources/quick_links_datasource.dart';
+import 'package:tatlock_ui/features/front_hall/domain/entities/quick_link.dart';
+
+part 'quick_links_provider.g.dart';
+
+/// Provides the list of all quick links.
+/// Falls back to default links if API is unavailable.
+@riverpod
+Future<List<QuickLink>> quickLinks(Ref ref) async {
+  try {
+    final datasource = ref.watch(quickLinksDatasourceProvider);
+    final links = await datasource.getQuickLinks();
+    // Return defaults if API returns empty list
+    return links.isEmpty ? getDefaultQuickLinks() : links;
+  } catch (_) {
+    // Return default links if API fails (e.g., backend not running)
+    return getDefaultQuickLinks();
+  }
+}
+
+/// Provides a single quick link by ID.
+/// Falls back to default links if API is unavailable.
+@riverpod
+Future<QuickLink> quickLink(Ref ref, String id) async {
+  // First try to find in defaults (works offline)
+  final defaults = getDefaultQuickLinks();
+  final defaultLink = defaults.where((link) => link.id == id).firstOrNull;
+  if (defaultLink != null) {
+    return defaultLink;
+  }
+
+  // If not in defaults, try API
+  try {
+    final datasource = ref.watch(quickLinksDatasourceProvider);
+    final intId = int.tryParse(id);
+    if (intId == null) {
+      throw Exception('Invalid link ID: $id');
+    }
+    return await datasource.getQuickLink(intId);
+  } catch (_) {
+    throw Exception('Link not found: $id');
+  }
+}
+
+/// Controller for quick link CRUD operations.
+@riverpod
+class QuickLinkActions extends _$QuickLinkActions {
+  @override
+  AsyncValue<void> build() => const AsyncValue.data(null);
+
+  /// Safely sets state, ignoring disposal errors.
+  void _safeSetState(AsyncValue<void> newState) {
+    try {
+      state = newState;
+    } catch (_) {
+      // Provider was disposed - ignore
+    }
+  }
+
+  /// Safely invalidates providers after async operations.
+  void _safeInvalidate(List<ProviderOrFamily> providers) {
+    try {
+      for (final provider in providers) {
+        ref.invalidate(provider);
+      }
+    } catch (_) {
+      // Provider was disposed - ignore
+    }
+  }
+
+  /// Creates a new quick link.
+  Future<QuickLink?> create(QuickLink link) async {
+    QuickLink? result;
+    try {
+      _safeSetState(const AsyncValue.loading());
+      final datasource = ref.read(quickLinksDatasourceProvider);
+      result = await datasource.createQuickLink(link);
+      _safeInvalidate([quickLinksProvider]);
+      _safeSetState(const AsyncValue.data(null));
+    } catch (e, st) {
+      _safeSetState(AsyncValue.error(e, st));
+    }
+    return result;
+  }
+
+  /// Updates an existing quick link.
+  Future<QuickLink?> update(QuickLink link) async {
+    QuickLink? result;
+    try {
+      _safeSetState(const AsyncValue.loading());
+      final datasource = ref.read(quickLinksDatasourceProvider);
+      result = await datasource.updateQuickLink(link);
+      _safeInvalidate([quickLinksProvider, quickLinkProvider(link.id)]);
+      _safeSetState(const AsyncValue.data(null));
+    } catch (e, st) {
+      _safeSetState(AsyncValue.error(e, st));
+    }
+    return result;
+  }
+
+  /// Deletes a quick link.
+  Future<void> delete(String id) async {
+    try {
+      _safeSetState(const AsyncValue.loading());
+      final datasource = ref.read(quickLinksDatasourceProvider);
+      final intId = int.tryParse(id) ?? 0;
+      await datasource.deleteQuickLink(intId);
+      _safeInvalidate([quickLinksProvider]);
+      _safeSetState(const AsyncValue.data(null));
+    } catch (e, st) {
+      _safeSetState(AsyncValue.error(e, st));
+    }
+  }
+
+  /// Reorders quick links.
+  Future<void> reorder(List<String> orderedIds) async {
+    try {
+      _safeSetState(const AsyncValue.loading());
+      final datasource = ref.read(quickLinksDatasourceProvider);
+      final intIds = orderedIds.map((id) => int.tryParse(id) ?? 0).toList();
+      await datasource.reorderQuickLinks(intIds);
+      _safeInvalidate([quickLinksProvider]);
+      _safeSetState(const AsyncValue.data(null));
+    } catch (e, st) {
+      _safeSetState(AsyncValue.error(e, st));
+    }
+  }
+}
+
+/// Default seed data for quick links (used when API returns empty).
+List<QuickLink> getDefaultQuickLinks() {
+  return [
+    // Home category
+    const QuickLink(
+      id: 'jellyfin',
+      name: 'Jellyfin',
+      url: 'https://jellyfin.schweitz.net',
+      iconName: 'movie',
+      category: 'Home',
+      type: QuickLinkType.iframe,
+      sortOrder: 0,
+    ),
+    const QuickLink(
+      id: 'webui',
+      name: 'Open WebUI',
+      url: 'https://webui.schweitz.net',
+      iconName: 'chat',
+      category: 'Home',
+      type: QuickLinkType.iframe,
+      sortOrder: 1,
+    ),
+    const QuickLink(
+      id: 'searxng',
+      name: 'SearXNG',
+      url: 'https://search.schweitz.net',
+      iconName: 'search',
+      category: 'Home',
+      type: QuickLinkType.newTab,
+      sortOrder: 2,
+    ),
+    // AMP category
+    const QuickLink(
+      id: 'amp',
+      name: 'AMP Home',
+      url: 'https://amp.schweitz.net',
+      iconName: 'videogame_asset',
+      category: 'AMP',
+      type: QuickLinkType.newTab,
+      sortOrder: 0,
+    ),
+    // Coding category
+    const QuickLink(
+      id: 'gitea',
+      name: 'Gitea',
+      url: 'https://git.schweitz.net',
+      iconName: 'code',
+      category: 'Coding',
+      type: QuickLinkType.iframe,
+      sortOrder: 0,
+    ),
+    const QuickLink(
+      id: 'cloud-ide',
+      name: 'Cloud IDE',
+      url: 'https://code.schweitz.net',
+      iconName: 'terminal',
+      category: 'Coding',
+      type: QuickLinkType.newTab,
+      sortOrder: 1,
+    ),
+    // Infrastructure category
+    const QuickLink(
+      id: 'netdata',
+      name: 'Netdata',
+      url: 'https://netdata.schweitz.net',
+      iconName: 'monitoring',
+      category: 'Infrastructure',
+      type: QuickLinkType.iframe,
+      sortOrder: 0,
+    ),
+    const QuickLink(
+      id: 'portainer',
+      name: 'Portainer',
+      url: 'https://portainer.schweitz.net',
+      iconName: 'dns',
+      category: 'Infrastructure',
+      type: QuickLinkType.iframe,
+      sortOrder: 1,
+    ),
+    const QuickLink(
+      id: 'npm',
+      name: 'Proxy Manager',
+      url: 'https://npm.schweitz.net',
+      iconName: 'public',
+      category: 'Infrastructure',
+      type: QuickLinkType.iframe,
+      sortOrder: 2,
+    ),
+    const QuickLink(
+      id: 'core-api',
+      name: 'Core API',
+      url: 'https://api.schweitz.net/docs',
+      iconName: 'api',
+      category: 'Infrastructure',
+      type: QuickLinkType.iframe,
+      sortOrder: 3,
+    ),
+  ];
+}

lib/features/front_hall/presentation/widgets/dashboard_content.dart

@@ -0,0 +1,167 @@
+import 'package:flutter/material.dart';
+import 'package:tatlock_ui/shared/widgets/widgets.dart';
+import 'package:tatlock_ui/version.g.dart';
+
+/// Dashboard content shown in Front Hall when mode is dashboard.
+///
+/// Displays system stats with gauges, weather, air quality, and version info.
+class DashboardContent extends StatelessWidget {
+  const DashboardContent({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return ListView(
+      padding: const EdgeInsets.all(16),
+      children: [
+        // Welcome card
+        Card(
+          child: Padding(
+            padding: const EdgeInsets.all(24),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Row(
+                  children: [
+                    Icon(
+                      Icons.waving_hand,
+                      size: 32,
+                      color: colorScheme.primary,
+                    ),
+                    const SizedBox(width: 12),
+                    Flexible(
+                      child: Text(
+                        'Welcome to Tatlock',
+                        style: Theme.of(context).textTheme.headlineSmall,
+                      ),
+                    ),
+                  ],
+                ),
+                const SizedBox(height: 12),
+                Text(
+                  'Your homelab dashboard is ready.',
+                  style: Theme.of(context).textTheme.bodyLarge?.copyWith(
+                        color: colorScheme.onSurfaceVariant,
+                      ),
+                ),
+              ],
+            ),
+          ),
+        ),
+        const SizedBox(height: 16),
+
+        // System Stats - Gauges
+        _SectionHeader(title: 'System Stats', icon: Icons.monitor_heart),
+        const SizedBox(height: 8),
+        Card(
+          child: Padding(
+            padding: const EdgeInsets.all(16),
+            child: GaugeRow(
+              gaugeSize: 90,
+              gauges: [
+                GaugeData(
+                  value: 0.35,
+                  label: 'CPU',
+                  icon: Icons.memory,
+                  color: colorScheme.primary,
+                ),
+                GaugeData(
+                  value: 0.62,
+                  label: 'Memory',
+                  icon: Icons.storage,
+                  color: colorScheme.secondary,
+                ),
+                GaugeData(
+                  value: 0.78,
+                  label: 'Disk',
+                  icon: Icons.disc_full,
+                  color: colorScheme.tertiary,
+                ),
+                GaugeData(
+                  value: 0.12,
+                  label: 'Network',
+                  icon: Icons.wifi,
+                  color: Colors.teal,
+                ),
+              ],
+            ),
+          ),
+        ),
+        const SizedBox(height: 24),
+
+        // Environment - Weather & Air Quality
+        _SectionHeader(title: 'Environment', icon: Icons.eco),
+        const SizedBox(height: 8),
+        LayoutBuilder(
+          builder: (context, constraints) {
+            // Responsive layout: side-by-side on wider screens
+            if (constraints.maxWidth > 500) {
+              return Row(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Expanded(child: WeatherWidget()),
+                  const SizedBox(width: 12),
+                  Expanded(child: AirQualityWidget()),
+                ],
+              );
+            }
+            // Stack on narrow screens
+            return Column(
+              children: [
+                WeatherWidget(),
+                const SizedBox(height: 12),
+                AirQualityWidget(),
+              ],
+            );
+          },
+        ),
+        const SizedBox(height: 24),
+
+        // Version info
+        Center(
+          child: Text(
+            '${AppVersion.name} v${AppVersion.fullVersion}',
+            style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                  color: colorScheme.outline,
+                ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+/// Section header with icon and title.
+class _SectionHeader extends StatelessWidget {
+  const _SectionHeader({
+    required this.title,
+    required this.icon,
+  });
+
+  final String title;
+  final IconData icon;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Row(
+      children: [
+        Icon(
+          icon,
+          size: 18,
+          color: colorScheme.onSurfaceVariant,
+        ),
+        const SizedBox(width: 8),
+        Text(
+          title,
+          style: Theme.of(context).textTheme.titleSmall?.copyWith(
+                color: colorScheme.onSurfaceVariant,
+                fontWeight: FontWeight.w500,
+              ),
+        ),
+      ],
+    );
+  }
+}

lib/features/front_hall/presentation/widgets/iframe_view.dart

@@ -0,0 +1,4 @@
+// Conditional export for platform-specific iframe implementation.
+// Web uses actual iframe embedding, other platforms open in browser.
+export 'iframe_view_stub.dart'
+    if (dart.library.html) 'iframe_view_web.dart';

lib/features/front_hall/presentation/widgets/iframe_view_stub.dart

@@ -0,0 +1,83 @@
+import 'package:flutter/material.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+/// Stub implementation for non-web platforms.
+///
+/// Since iframes are web-only, this shows a message and offers
+/// to open the link in an external browser.
+class IframeView extends StatelessWidget {
+  const IframeView({
+    super.key,
+    required this.url,
+    required this.title,
+    required this.onClose,
+  });
+
+  final String url;
+  final String title;
+  final VoidCallback onClose;
+
+  Future<void> _openInBrowser() async {
+    final uri = Uri.tryParse(url);
+    if (uri != null && await canLaunchUrl(uri)) {
+      await launchUrl(uri, mode: LaunchMode.externalApplication);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    // Auto-open in browser and show message
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      _openInBrowser();
+    });
+
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.all(32),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(
+              Icons.open_in_browser,
+              size: 64,
+              color: colorScheme.primary,
+            ),
+            const SizedBox(height: 16),
+            Text(
+              'Opening in Browser',
+              style: textTheme.titleLarge,
+            ),
+            const SizedBox(height: 8),
+            Text(
+              'Embedded views are not supported on this platform.\n"$title" is opening in your browser.',
+              textAlign: TextAlign.center,
+              style: textTheme.bodyMedium?.copyWith(
+                color: colorScheme.onSurfaceVariant,
+              ),
+            ),
+            const SizedBox(height: 24),
+            Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                OutlinedButton.icon(
+                  onPressed: _openInBrowser,
+                  icon: const Icon(Icons.open_in_new),
+                  label: const Text('Open Again'),
+                ),
+                const SizedBox(width: 12),
+                FilledButton.icon(
+                  onPressed: onClose,
+                  icon: const Icon(Icons.arrow_back),
+                  label: const Text('Back to Dashboard'),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/features/front_hall/presentation/widgets/iframe_view_web.dart

@@ -0,0 +1,144 @@
+import 'dart:html' as html;
+import 'dart:ui_web' as ui_web;
+
+import 'package:flutter/material.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+/// Embedded iframe view for displaying external content (web only).
+///
+/// Uses HtmlElementView for Flutter web to embed an iframe.
+/// Includes a header bar with title, refresh, open in new tab, and close actions.
+class IframeView extends StatefulWidget {
+  const IframeView({
+    super.key,
+    required this.url,
+    required this.title,
+    required this.onClose,
+  });
+
+  /// URL to display in the iframe.
+  final String url;
+
+  /// Title displayed in the header bar.
+  final String title;
+
+  /// Callback when the close button is pressed.
+  final VoidCallback onClose;
+
+  @override
+  State<IframeView> createState() => _IframeViewState();
+}
+
+class _IframeViewState extends State<IframeView> {
+  late final String _viewType;
+  late html.IFrameElement _iframe;
+  bool _isLoading = true;
+
+  @override
+  void initState() {
+    super.initState();
+    _viewType = 'iframe-${widget.url.hashCode}-${DateTime.now().millisecondsSinceEpoch}';
+    _createIframe();
+  }
+
+  void _createIframe() {
+    _iframe = html.IFrameElement()
+      ..src = widget.url
+      ..style.border = 'none'
+      ..style.width = '100%'
+      ..style.height = '100%'
+      ..allow = 'fullscreen'
+      ..onLoad.listen((_) {
+        if (mounted) {
+          setState(() => _isLoading = false);
+        }
+      });
+
+    // Register the view factory
+    ui_web.platformViewRegistry.registerViewFactory(
+      _viewType,
+      (int viewId) => _iframe,
+    );
+  }
+
+  void _refresh() {
+    setState(() => _isLoading = true);
+    // Reload the iframe by setting src again
+    _iframe.src = widget.url;
+  }
+
+  Future<void> _openInNewTab() async {
+    final uri = Uri.tryParse(widget.url);
+    if (uri != null && await canLaunchUrl(uri)) {
+      await launchUrl(uri, mode: LaunchMode.externalApplication);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    return Column(
+      children: [
+        // Header bar
+        Container(
+          height: 56,
+          padding: const EdgeInsets.symmetric(horizontal: 16),
+          decoration: BoxDecoration(
+            color: colorScheme.surfaceContainerHighest,
+            border: Border(
+              bottom: BorderSide(color: colorScheme.outlineVariant),
+            ),
+          ),
+          child: Row(
+            children: [
+              // Title
+              Expanded(
+                child: Text(
+                  widget.title,
+                  style: textTheme.titleSmall?.copyWith(
+                    fontWeight: FontWeight.w600,
+                  ),
+                  overflow: TextOverflow.ellipsis,
+                ),
+              ),
+              // Actions
+              IconButton(
+                icon: const Icon(Icons.open_in_new, size: 20),
+                tooltip: 'Open in new tab',
+                onPressed: _openInNewTab,
+              ),
+              IconButton(
+                icon: const Icon(Icons.refresh, size: 20),
+                tooltip: 'Refresh',
+                onPressed: _refresh,
+              ),
+              IconButton(
+                icon: const Icon(Icons.close, size: 20),
+                tooltip: 'Close',
+                onPressed: widget.onClose,
+              ),
+            ],
+          ),
+        ),
+        // Iframe content
+        Expanded(
+          child: Stack(
+            children: [
+              HtmlElementView(viewType: _viewType),
+              // Loading overlay
+              if (_isLoading)
+                Container(
+                  color: colorScheme.surface,
+                  child: const Center(
+                    child: CircularProgressIndicator(),
+                  ),
+                ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/features/front_hall/presentation/widgets/quick_link_form.dart

@@ -0,0 +1,343 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:tatlock_ui/features/front_hall/domain/entities/quick_link.dart';
+import 'package:tatlock_ui/features/front_hall/presentation/providers/quick_links_provider.dart';
+import 'package:tatlock_ui/shared/widgets/entity_page.dart';
+import 'package:tatlock_ui/shared/widgets/icon_picker.dart';
+
+/// Form for creating and editing Quick Links.
+///
+/// Handles validation, submission, and state management for link data.
+class QuickLinkForm extends ConsumerStatefulWidget {
+  const QuickLinkForm({
+    super.key,
+    required this.mode,
+    this.quickLink,
+    required this.onCancel,
+    required this.onSaved,
+  });
+
+  final EntityPageMode mode;
+  final QuickLink? quickLink;
+  final VoidCallback onCancel;
+  final VoidCallback onSaved;
+
+  @override
+  ConsumerState<QuickLinkForm> createState() => _QuickLinkFormState();
+}
+
+class _QuickLinkFormState extends ConsumerState<QuickLinkForm> {
+  final _formKey = GlobalKey<FormState>();
+
+  late final TextEditingController _nameController;
+  late final TextEditingController _urlController;
+  late final TextEditingController _categoryController;
+  late String _iconName;
+  late QuickLinkType _type;
+  late bool _isActive;
+
+  bool _isSubmitting = false;
+
+  @override
+  void initState() {
+    super.initState();
+    final link = widget.quickLink;
+    _nameController = TextEditingController(text: link?.name ?? '');
+    _urlController = TextEditingController(text: link?.url ?? '');
+    _categoryController = TextEditingController(text: link?.category ?? '');
+    _iconName = link?.iconName ?? 'link';
+    _type = link?.type ?? QuickLinkType.iframe;
+    _isActive = link?.isActive ?? true;
+  }
+
+  @override
+  void dispose() {
+    _nameController.dispose();
+    _urlController.dispose();
+    _categoryController.dispose();
+    super.dispose();
+  }
+
+  bool get isCreate => widget.mode == EntityPageMode.create;
+
+  Future<void> _handleSubmit() async {
+    if (!_formKey.currentState!.validate()) return;
+
+    setState(() => _isSubmitting = true);
+
+    try {
+      final actions = ref.read(quickLinkActionsProvider.notifier);
+      final category = _categoryController.text.trim();
+
+      final QuickLink link;
+      if (isCreate) {
+        // Create new entity
+        link = QuickLink(
+          id: _nameController.text.toLowerCase().replaceAll(RegExp(r'\s+'), '-'),
+          name: _nameController.text.trim(),
+          url: _urlController.text.trim(),
+          iconName: _iconName,
+          category: category.isEmpty ? null : category,
+          type: _type,
+          isActive: _isActive,
+          sortOrder: 0,
+        );
+        await actions.create(link);
+        if (mounted) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            const SnackBar(
+              content: Text('Link created successfully'),
+              behavior: SnackBarBehavior.floating,
+            ),
+          );
+        }
+      } else {
+        // Update: use copyWith to preserve all existing data
+        link = widget.quickLink!.copyWith(
+          name: _nameController.text.trim(),
+          url: _urlController.text.trim(),
+          iconName: _iconName,
+          category: category.isEmpty ? null : category,
+          type: _type,
+          isActive: _isActive,
+        );
+        await actions.update(link);
+        if (mounted) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            const SnackBar(
+              content: Text('Link updated successfully'),
+              behavior: SnackBarBehavior.floating,
+            ),
+          );
+        }
+      }
+
+      // Refresh the list before exiting
+      ref.invalidate(quickLinksProvider);
+
+      widget.onSaved();
+    } catch (e) {
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text('Error: $e'),
+            behavior: SnackBarBehavior.floating,
+            backgroundColor: Theme.of(context).colorScheme.error,
+          ),
+        );
+      }
+    } finally {
+      if (mounted) {
+        setState(() => _isSubmitting = false);
+      }
+    }
+  }
+
+  Future<void> _handleDelete() async {
+    if (widget.quickLink == null) return;
+
+    final confirm = await showDialog<bool>(
+      context: context,
+      builder: (context) => AlertDialog(
+        title: const Text('Delete Link'),
+        content: Text('Are you sure you want to delete "${widget.quickLink!.name}"?'),
+        actions: [
+          TextButton(
+            onPressed: () => Navigator.of(context).pop(false),
+            child: const Text('Cancel'),
+          ),
+          FilledButton(
+            onPressed: () => Navigator.of(context).pop(true),
+            style: FilledButton.styleFrom(
+              backgroundColor: Theme.of(context).colorScheme.error,
+            ),
+            child: const Text('Delete'),
+          ),
+        ],
+      ),
+    );
+
+    if (confirm == true) {
+      setState(() => _isSubmitting = true);
+      try {
+        await ref.read(quickLinkActionsProvider.notifier).delete(widget.quickLink!.id);
+        if (mounted) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            const SnackBar(
+              content: Text('Link deleted'),
+              behavior: SnackBarBehavior.floating,
+            ),
+          );
+          widget.onSaved();
+        }
+      } catch (e) {
+        if (mounted) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            SnackBar(
+              content: Text('Error deleting: $e'),
+              behavior: SnackBarBehavior.floating,
+              backgroundColor: Theme.of(context).colorScheme.error,
+            ),
+          );
+        }
+      } finally {
+        if (mounted) {
+          setState(() => _isSubmitting = false);
+        }
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Form(
+      key: _formKey,
+      child: ListView(
+        padding: const EdgeInsets.all(24),
+        children: [
+          // Name field
+          TextFormField(
+            controller: _nameController,
+            decoration: const InputDecoration(
+              labelText: 'Name',
+              hintText: 'Enter link name',
+              border: OutlineInputBorder(),
+            ),
+            validator: (value) {
+              if (value == null || value.trim().isEmpty) {
+                return 'Name is required';
+              }
+              return null;
+            },
+            textInputAction: TextInputAction.next,
+          ),
+          const SizedBox(height: 16),
+
+          // URL field
+          TextFormField(
+            controller: _urlController,
+            decoration: const InputDecoration(
+              labelText: 'URL',
+              hintText: 'https://example.com',
+              border: OutlineInputBorder(),
+            ),
+            validator: (value) {
+              if (value == null || value.trim().isEmpty) {
+                return 'URL is required';
+              }
+              final uri = Uri.tryParse(value);
+              if (uri == null || !uri.hasScheme) {
+                return 'Enter a valid URL with scheme (http/https)';
+              }
+              return null;
+            },
+            keyboardType: TextInputType.url,
+            textInputAction: TextInputAction.next,
+          ),
+          const SizedBox(height: 16),
+
+          // Category field
+          TextFormField(
+            controller: _categoryController,
+            decoration: const InputDecoration(
+              labelText: 'Category',
+              hintText: 'e.g., Home, Infrastructure, Coding',
+              border: OutlineInputBorder(),
+            ),
+            textInputAction: TextInputAction.done,
+          ),
+          const SizedBox(height: 24),
+
+          // Icon picker
+          IconPicker(
+            selectedIcon: _iconName,
+            onChanged: (icon) => setState(() => _iconName = icon),
+          ),
+          const SizedBox(height: 24),
+
+          // Link type
+          Text(
+            'Link Type',
+            style: Theme.of(context).textTheme.labelMedium?.copyWith(
+                  color: colorScheme.onSurfaceVariant,
+                ),
+          ),
+          const SizedBox(height: 8),
+          SegmentedButton<QuickLinkType>(
+            segments: const [
+              ButtonSegment(
+                value: QuickLinkType.iframe,
+                icon: Icon(Icons.web),
+                label: Text('Iframe'),
+              ),
+              ButtonSegment(
+                value: QuickLinkType.newTab,
+                icon: Icon(Icons.open_in_new),
+                label: Text('New Tab'),
+              ),
+            ],
+            selected: {_type},
+            onSelectionChanged: (selected) {
+              setState(() => _type = selected.first);
+            },
+          ),
+          const SizedBox(height: 8),
+          Text(
+            _type == QuickLinkType.iframe
+                ? 'Opens embedded in the dashboard'
+                : 'Opens in a new browser tab',
+            style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                  color: colorScheme.outline,
+                ),
+          ),
+          const SizedBox(height: 24),
+
+          // Active toggle
+          SwitchListTile(
+            title: const Text('Active'),
+            subtitle: const Text('Show this link in the panel'),
+            value: _isActive,
+            onChanged: (value) => setState(() => _isActive = value),
+            contentPadding: EdgeInsets.zero,
+          ),
+          const SizedBox(height: 32),
+
+          // Action buttons
+          Row(
+            children: [
+              if (!isCreate) ...[
+                OutlinedButton.icon(
+                  onPressed: _isSubmitting ? null : _handleDelete,
+                  style: OutlinedButton.styleFrom(
+                    foregroundColor: colorScheme.error,
+                  ),
+                  icon: const Icon(Icons.delete),
+                  label: const Text('Delete'),
+                ),
+                const Spacer(),
+              ] else
+                const Spacer(),
+              TextButton(
+                onPressed: _isSubmitting ? null : widget.onCancel,
+                child: const Text('Cancel'),
+              ),
+              const SizedBox(width: 8),
+              FilledButton(
+                onPressed: _isSubmitting ? null : _handleSubmit,
+                child: _isSubmitting
+                    ? const SizedBox(
+                        width: 20,
+                        height: 20,
+                        child: CircularProgressIndicator(strokeWidth: 2),
+                      )
+                    : Text(isCreate ? 'Create' : 'Save'),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/features/front_hall/presentation/widgets/quick_link_settings_content.dart

@@ -0,0 +1,147 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:tatlock_ui/features/front_hall/presentation/providers/front_hall_state_provider.dart';
+import 'package:tatlock_ui/features/front_hall/presentation/providers/quick_links_provider.dart';
+import 'package:tatlock_ui/features/front_hall/presentation/widgets/quick_link_form.dart';
+import 'package:tatlock_ui/shared/widgets/entity_page.dart';
+
+/// Settings content for Quick Link management.
+///
+/// Shows either:
+/// - Create form (when isCreating state is set)
+/// - Edit form (when a link is selected)
+/// - Empty state with "Add New Link" prompt (when no link selected)
+class QuickLinkSettingsContent extends ConsumerStatefulWidget {
+  const QuickLinkSettingsContent({super.key});
+
+  @override
+  ConsumerState<QuickLinkSettingsContent> createState() =>
+      _QuickLinkSettingsContentState();
+}
+
+class _QuickLinkSettingsContentState
+    extends ConsumerState<QuickLinkSettingsContent> {
+  bool _isCreating = false;
+
+  void _startCreating() {
+    setState(() => _isCreating = true);
+    // Clear any selected link when creating new
+    ref.read(frontHallStateProvider.notifier).clearSelectedLink();
+  }
+
+  void _stopCreating() {
+    setState(() => _isCreating = false);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+    final frontHallState = ref.watch(frontHallStateProvider);
+    final selectedLinkId = frontHallState.selectedLinkId;
+
+    // Create mode - show create form
+    if (_isCreating) {
+      return Scaffold(
+        appBar: AppBar(
+          leading: IconButton(
+            icon: const Icon(Icons.arrow_back),
+            onPressed: _stopCreating,
+          ),
+          title: const Text('Create New Link'),
+        ),
+        body: QuickLinkForm(
+          mode: EntityPageMode.create,
+          onCancel: _stopCreating,
+          onSaved: () =>
+              ref.read(frontHallStateProvider.notifier).exitSettings(),
+        ),
+      );
+    }
+
+    // No link selected - show empty state
+    if (selectedLinkId == null) {
+      return Center(
+        child: Padding(
+          padding: const EdgeInsets.all(32),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Icon(
+                Icons.add_link,
+                size: 64,
+                color: colorScheme.outline,
+              ),
+              const SizedBox(height: 16),
+              Text(
+                'No link selected',
+                style: textTheme.titleLarge?.copyWith(
+                  color: colorScheme.onSurfaceVariant,
+                ),
+              ),
+              const SizedBox(height: 8),
+              Text(
+                'Select a link from the panel to edit, or create a new one.',
+                textAlign: TextAlign.center,
+                style: textTheme.bodyMedium?.copyWith(
+                  color: colorScheme.outline,
+                ),
+              ),
+              const SizedBox(height: 24),
+              FilledButton.icon(
+                onPressed: _startCreating,
+                icon: const Icon(Icons.add),
+                label: const Text('Create New Link'),
+              ),
+            ],
+          ),
+        ),
+      );
+    }
+
+    // Link selected - show edit form
+    final linkAsync = ref.watch(quickLinkProvider(selectedLinkId));
+
+    return linkAsync.when(
+      loading: () => const Center(child: CircularProgressIndicator()),
+      error: (error, _) => Center(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(Icons.error_outline, size: 48, color: colorScheme.error),
+            const SizedBox(height: 16),
+            Text('Error loading link: $error'),
+            const SizedBox(height: 16),
+            TextButton.icon(
+              onPressed: () =>
+                  ref.invalidate(quickLinkProvider(selectedLinkId)),
+              icon: const Icon(Icons.refresh),
+              label: const Text('Retry'),
+            ),
+          ],
+        ),
+      ),
+      data: (link) => Scaffold(
+        appBar: AppBar(
+          leading: IconButton(
+            icon: const Icon(Icons.arrow_back),
+            onPressed: () => ref
+                .read(frontHallStateProvider.notifier)
+                .clearSelectedLink(),
+          ),
+          title: Text('Edit: ${link.name}'),
+        ),
+        body: QuickLinkForm(
+          key: ValueKey(link.id), // Force recreation when link changes
+          mode: EntityPageMode.edit,
+          quickLink: link,
+          onCancel: () => ref
+              .read(frontHallStateProvider.notifier)
+              .clearSelectedLink(),
+          onSaved: () =>
+              ref.read(frontHallStateProvider.notifier).exitSettings(),
+        ),
+      ),
+    );
+  }
+}

lib/features/front_hall/presentation/widgets/quick_links_panel.dart

@@ -0,0 +1,683 @@
+import 'dart:ui' show lerpDouble;
+
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:tatlock_ui/features/front_hall/domain/entities/quick_link.dart';
+import 'package:tatlock_ui/features/front_hall/presentation/providers/front_hall_state_provider.dart';
+import 'package:tatlock_ui/features/front_hall/presentation/providers/quick_links_provider.dart';
+import 'package:tatlock_ui/shared/layouts/widgets/panel_header.dart';
+import 'package:tatlock_ui/shared/widgets/icon_picker.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+/// Left-side panel for quick link navigation in Front Hall.
+///
+/// Shows categorized links that can open in iframe or new tab.
+/// Adapts behavior based on current mode (normal vs settings).
+class QuickLinksPanel extends ConsumerWidget {
+  const QuickLinksPanel({
+    super.key,
+    this.width = 280,
+  });
+
+  final double width;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final frontHallState = ref.watch(frontHallStateProvider);
+    final quickLinksAsync = ref.watch(quickLinksProvider);
+    final isSettingsMode = frontHallState.mode == FrontHallMode.settings;
+
+    return SizedBox(
+      width: width,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          // Header changes based on mode
+          if (isSettingsMode)
+            _SettingsModeHeader(
+              onBack: () =>
+                  ref.read(frontHallStateProvider.notifier).exitSettings(),
+            )
+          else
+            PanelHeader(
+              title: 'Quick Links',
+              icon: Icons.link,
+              dockToBottom: true,
+              actions: [
+                IconButton(
+                  icon: const Icon(Icons.refresh, size: 20),
+                  tooltip: 'Refresh',
+                  onPressed: () => ref.invalidate(quickLinksProvider),
+                  padding: EdgeInsets.zero,
+                  constraints: const BoxConstraints(),
+                ),
+              ],
+            ),
+
+          // Add new link button (settings mode only)
+          if (isSettingsMode) ...[
+            Padding(
+              padding: const EdgeInsets.all(8),
+              child: FilledButton.icon(
+                onPressed: () => ref
+                    .read(frontHallStateProvider.notifier)
+                    .clearSelectedLink(),
+                icon: const Icon(Icons.add, size: 18),
+                label: const Text('Add New Link'),
+              ),
+            ),
+            Divider(height: 1, color: colorScheme.outlineVariant),
+          ],
+
+          // Links list
+          Expanded(
+            child: quickLinksAsync.when(
+              loading: () => const Center(child: CircularProgressIndicator()),
+              error: (error, _) => _ErrorState(
+                error: error,
+                onRetry: () => ref.invalidate(quickLinksProvider),
+              ),
+              data: (links) {
+                // Use default links if empty
+                final displayLinks =
+                    links.isEmpty ? getDefaultQuickLinks() : links;
+                return _QuickLinksList(
+                  links: displayLinks,
+                  selectedLinkId: frontHallState.selectedLinkId,
+                  isSettingsMode: isSettingsMode,
+                );
+              },
+            ),
+          ),
+
+          // Settings button (normal mode only)
+          if (!isSettingsMode) ...[
+            Divider(height: 1, color: colorScheme.outlineVariant),
+            Padding(
+              padding: const EdgeInsets.all(8),
+              child: TextButton.icon(
+                onPressed: () => ref
+                    .read(frontHallStateProvider.notifier)
+                    .enterSettings(),
+                icon: const Icon(Icons.settings, size: 18),
+                label: const Text('Settings'),
+              ),
+            ),
+          ],
+        ],
+      ),
+    );
+  }
+}
+
+/// Header for settings mode with back button.
+class _SettingsModeHeader extends StatelessWidget {
+  const _SettingsModeHeader({required this.onBack});
+
+  final VoidCallback onBack;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    return Container(
+      height: 56,
+      padding: const EdgeInsets.symmetric(horizontal: 8),
+      decoration: BoxDecoration(
+        color: colorScheme.surfaceContainerHighest,
+        border: Border(
+          bottom: BorderSide(color: colorScheme.outlineVariant),
+        ),
+      ),
+      child: Row(
+        children: [
+          IconButton(
+            icon: const Icon(Icons.arrow_back),
+            tooltip: 'Back to Dashboard',
+            onPressed: onBack,
+          ),
+          const SizedBox(width: 4),
+          Icon(Icons.link, size: 20, color: colorScheme.primary),
+          const SizedBox(width: 8),
+          Text(
+            'Quick Links',
+            style: textTheme.titleSmall?.copyWith(
+              fontWeight: FontWeight.w600,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+/// List of quick links grouped by category.
+///
+/// In settings mode, shows a flat reorderable list.
+/// In normal mode, shows grouped list with category headers.
+class _QuickLinksList extends ConsumerWidget {
+  const _QuickLinksList({
+    required this.links,
+    required this.selectedLinkId,
+    required this.isSettingsMode,
+  });
+
+  final List<QuickLink> links;
+  final String? selectedLinkId;
+  final bool isSettingsMode;
+
+  /// Groups links by category, preserving order.
+  List<(String?, List<QuickLink>)> get _groupedLinks {
+    final groups = <String?, List<QuickLink>>{};
+    final order = <String?>[];
+
+    for (final link in links) {
+      if (!groups.containsKey(link.category)) {
+        groups[link.category] = [];
+        order.add(link.category);
+      }
+      groups[link.category]!.add(link);
+    }
+
+    return order.map((category) => (category, groups[category]!)).toList();
+  }
+
+  bool get _showCategoryHeaders {
+    final categories =
+        links.map((l) => l.category).where((c) => c != null).toSet();
+    return categories.length > 1;
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    // In settings mode, show reorderable list
+    if (isSettingsMode) {
+      return _buildReorderableList(context, ref);
+    }
+
+    // In normal mode, show grouped list
+    return ListView(
+      padding: const EdgeInsets.symmetric(vertical: 8),
+      children: _buildLinkList(context, ref),
+    );
+  }
+
+  Widget _buildReorderableList(BuildContext context, WidgetRef ref) {
+    return ReorderableListView.builder(
+      padding: const EdgeInsets.symmetric(vertical: 8),
+      itemCount: links.length,
+      onReorder: (oldIndex, newIndex) => _handleReorder(ref, oldIndex, newIndex),
+      proxyDecorator: (child, index, animation) {
+        return AnimatedBuilder(
+          animation: animation,
+          builder: (context, child) {
+            final elevation = lerpDouble(0, 8, animation.value) ?? 0;
+            return Material(
+              elevation: elevation,
+              borderRadius: BorderRadius.circular(8),
+              child: child,
+            );
+          },
+          child: child,
+        );
+      },
+      itemBuilder: (context, index) {
+        final link = links[index];
+        return _ReorderableLinkTile(
+          key: ValueKey(link.id),
+          link: link,
+          index: index,
+          isSelected: link.id == selectedLinkId,
+          onTap: () => _handleLinkTap(ref, link),
+          onEdit: () => ref
+              .read(frontHallStateProvider.notifier)
+              .selectLink(link.id),
+          onDelete: () => _handleDelete(context, ref, link),
+        );
+      },
+    );
+  }
+
+  void _handleReorder(WidgetRef ref, int oldIndex, int newIndex) {
+    // Adjust for the removal
+    if (newIndex > oldIndex) {
+      newIndex -= 1;
+    }
+
+    // Create new ordered list
+    final reorderedLinks = List<QuickLink>.from(links);
+    final item = reorderedLinks.removeAt(oldIndex);
+    reorderedLinks.insert(newIndex, item);
+
+    // Extract IDs in new order
+    final orderedIds = reorderedLinks.map((l) => l.id).toList();
+
+    // Call reorder API
+    ref.read(quickLinkActionsProvider.notifier).reorder(orderedIds);
+  }
+
+  List<Widget> _buildLinkList(BuildContext context, WidgetRef ref) {
+    final widgets = <Widget>[];
+    final showHeaders = _showCategoryHeaders;
+
+    for (final (category, categoryLinks) in _groupedLinks) {
+      // Add category header if multiple categories exist
+      if (showHeaders && category != null) {
+        widgets.add(_CategoryHeader(title: category));
+      }
+
+      // Add links
+      for (final link in categoryLinks) {
+        widgets.add(
+          _QuickLinkTile(
+            link: link,
+            isSelected: link.id == selectedLinkId,
+            isSettingsMode: isSettingsMode,
+            onTap: () => _handleLinkTap(ref, link),
+            onEdit: isSettingsMode
+                ? () => ref
+                    .read(frontHallStateProvider.notifier)
+                    .selectLink(link.id)
+                : null,
+            onDelete: isSettingsMode
+                ? () => _handleDelete(context, ref, link)
+                : null,
+          ),
+        );
+      }
+    }
+
+    return widgets;
+  }
+
+  void _handleLinkTap(WidgetRef ref, QuickLink link) {
+    if (isSettingsMode) {
+      // In settings mode, select link for editing
+      ref.read(frontHallStateProvider.notifier).selectLink(link.id);
+    } else {
+      // Close any open content first to ensure clean state
+      ref.read(frontHallStateProvider.notifier).showDashboard();
+
+      // Then open the new link
+      if (link.isIframe) {
+        ref
+            .read(frontHallStateProvider.notifier)
+            .showIframe(link.url, link.name);
+      } else {
+        // Open in new tab
+        _openInNewTab(link.url);
+      }
+    }
+  }
+
+  Future<void> _openInNewTab(String url) async {
+    final uri = Uri.tryParse(url);
+    if (uri != null && await canLaunchUrl(uri)) {
+      await launchUrl(uri, mode: LaunchMode.externalApplication);
+    }
+  }
+
+  Future<void> _handleDelete(
+    BuildContext context,
+    WidgetRef ref,
+    QuickLink link,
+  ) async {
+    final confirmed = await showDialog<bool>(
+      context: context,
+      builder: (context) => AlertDialog(
+        title: const Text('Delete Link'),
+        content: Text('Delete "${link.name}"?'),
+        actions: [
+          TextButton(
+            onPressed: () => Navigator.pop(context, false),
+            child: const Text('Cancel'),
+          ),
+          FilledButton(
+            onPressed: () => Navigator.pop(context, true),
+            child: const Text('Delete'),
+          ),
+        ],
+      ),
+    );
+
+    if (confirmed == true) {
+      await ref.read(quickLinkActionsProvider.notifier).delete(link.id);
+    }
+  }
+}
+
+/// Reorderable link tile with drag handle for settings mode.
+class _ReorderableLinkTile extends StatelessWidget {
+  const _ReorderableLinkTile({
+    super.key,
+    required this.link,
+    required this.index,
+    required this.isSelected,
+    required this.onTap,
+    required this.onEdit,
+    required this.onDelete,
+  });
+
+  final QuickLink link;
+  final int index;
+  final bool isSelected;
+  final VoidCallback onTap;
+  final VoidCallback onEdit;
+  final VoidCallback onDelete;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
+      child: Material(
+        color: isSelected
+            ? colorScheme.primaryContainer.withValues(alpha: 0.4)
+            : Colors.transparent,
+        borderRadius: BorderRadius.circular(8),
+        child: InkWell(
+          onTap: onTap,
+          borderRadius: BorderRadius.circular(8),
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 10),
+            child: Row(
+              children: [
+                // Drag handle
+                ReorderableDragStartListener(
+                  index: index,
+                  child: MouseRegion(
+                    cursor: SystemMouseCursors.grab,
+                    child: Icon(
+                      Icons.drag_indicator,
+                      size: 20,
+                      color: colorScheme.outline,
+                    ),
+                  ),
+                ),
+                const SizedBox(width: 8),
+                // Icon
+                Icon(
+                  getIconData(link.iconName),
+                  size: 20,
+                  color: isSelected
+                      ? colorScheme.primary
+                      : colorScheme.onSurfaceVariant,
+                ),
+                const SizedBox(width: 12),
+                // Name and subtitle
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        link.name,
+                        style: textTheme.bodyMedium?.copyWith(
+                          color: isSelected
+                              ? colorScheme.primary
+                              : colorScheme.onSurface,
+                          fontWeight: isSelected ? FontWeight.w600 : null,
+                        ),
+                      ),
+                      Text(
+                        link.category ?? 'No category',
+                        style: textTheme.bodySmall?.copyWith(
+                          color: colorScheme.outline,
+                          fontSize: 11,
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+                // Overflow menu
+                PopupMenuButton<String>(
+                  icon: Icon(
+                    Icons.more_vert,
+                    size: 18,
+                    color: colorScheme.onSurfaceVariant,
+                  ),
+                  padding: EdgeInsets.zero,
+                  itemBuilder: (context) => [
+                    const PopupMenuItem(
+                      value: 'edit',
+                      child: Row(
+                        children: [
+                          Icon(Icons.edit, size: 18),
+                          SizedBox(width: 8),
+                          Text('Edit'),
+                        ],
+                      ),
+                    ),
+                    const PopupMenuItem(
+                      value: 'delete',
+                      child: Row(
+                        children: [
+                          Icon(Icons.delete, size: 18),
+                          SizedBox(width: 8),
+                          Text('Delete'),
+                        ],
+                      ),
+                    ),
+                  ],
+                  onSelected: (value) {
+                    switch (value) {
+                      case 'edit':
+                        onEdit();
+                      case 'delete':
+                        onDelete();
+                    }
+                  },
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// Category header with left accent bar.
+class _CategoryHeader extends StatelessWidget {
+  const _CategoryHeader({required this.title});
+
+  final String title;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    return Container(
+      margin: const EdgeInsets.only(top: 8, bottom: 4),
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
+      decoration: BoxDecoration(
+        color: colorScheme.surfaceContainerHigh,
+        border: Border(
+          left: BorderSide(
+            color: colorScheme.primary,
+            width: 2,
+          ),
+        ),
+      ),
+      child: Text(
+        title.toUpperCase(),
+        style: textTheme.labelSmall?.copyWith(
+          color: colorScheme.onSurfaceVariant,
+          letterSpacing: 0.5,
+          fontWeight: FontWeight.w600,
+        ),
+      ),
+    );
+  }
+}
+
+/// Individual quick link tile.
+class _QuickLinkTile extends StatelessWidget {
+  const _QuickLinkTile({
+    required this.link,
+    required this.isSelected,
+    required this.isSettingsMode,
+    required this.onTap,
+    this.onEdit,
+    this.onDelete,
+  });
+
+  final QuickLink link;
+  final bool isSelected;
+  final bool isSettingsMode;
+  final VoidCallback onTap;
+  final VoidCallback? onEdit;
+  final VoidCallback? onDelete;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
+      child: Material(
+        color: isSelected
+            ? colorScheme.primaryContainer.withValues(alpha: 0.4)
+            : Colors.transparent,
+        borderRadius: BorderRadius.circular(8),
+        child: InkWell(
+          onTap: onTap,
+          borderRadius: BorderRadius.circular(8),
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+            child: Row(
+              children: [
+                Icon(
+                  getIconData(link.iconName),
+                  size: 20,
+                  color: isSelected
+                      ? colorScheme.primary
+                      : colorScheme.onSurfaceVariant,
+                ),
+                const SizedBox(width: 12),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        link.name,
+                        style: textTheme.bodyMedium?.copyWith(
+                          color:
+                              isSelected ? colorScheme.primary : colorScheme.onSurface,
+                          fontWeight: isSelected ? FontWeight.w600 : null,
+                        ),
+                      ),
+                      if (isSettingsMode)
+                        Text(
+                          link.isNewTab ? 'Opens in new tab' : 'Opens in iframe',
+                          style: textTheme.bodySmall?.copyWith(
+                            color: colorScheme.outline,
+                            fontSize: 11,
+                          ),
+                        ),
+                    ],
+                  ),
+                ),
+                // New tab indicator (normal mode)
+                if (!isSettingsMode && link.isNewTab)
+                  Icon(
+                    Icons.open_in_new,
+                    size: 14,
+                    color: colorScheme.outline,
+                  ),
+                // Overflow menu (settings mode)
+                if (isSettingsMode)
+                  PopupMenuButton<String>(
+                    icon: Icon(
+                      Icons.more_vert,
+                      size: 18,
+                      color: colorScheme.onSurfaceVariant,
+                    ),
+                    padding: EdgeInsets.zero,
+                    itemBuilder: (context) => [
+                      const PopupMenuItem(
+                        value: 'edit',
+                        child: Row(
+                          children: [
+                            Icon(Icons.edit, size: 18),
+                            SizedBox(width: 8),
+                            Text('Edit'),
+                          ],
+                        ),
+                      ),
+                      const PopupMenuItem(
+                        value: 'delete',
+                        child: Row(
+                          children: [
+                            Icon(Icons.delete, size: 18),
+                            SizedBox(width: 8),
+                            Text('Delete'),
+                          ],
+                        ),
+                      ),
+                    ],
+                    onSelected: (value) {
+                      switch (value) {
+                        case 'edit':
+                          onEdit?.call();
+                        case 'delete':
+                          onDelete?.call();
+                      }
+                    },
+                  ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// Error state widget.
+class _ErrorState extends StatelessWidget {
+  const _ErrorState({
+    required this.error,
+    required this.onRetry,
+  });
+
+  final Object error;
+  final VoidCallback onRetry;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(
+              Icons.error_outline,
+              color: colorScheme.error,
+              size: 32,
+            ),
+            const SizedBox(height: 8),
+            Text(
+              'Failed to load links',
+              style: TextStyle(color: colorScheme.error),
+            ),
+            const SizedBox(height: 8),
+            TextButton.icon(
+              onPressed: onRetry,
+              icon: const Icon(Icons.refresh, size: 16),
+              label: const Text('Retry'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/features/security/groups/groups_list_page.dart

@@ -0,0 +1,188 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:tatlock_ui/core/api/api_client.dart';
+import 'package:tatlock_ui/shared/components/data_grid/adapters/core_api_source.dart';
+import 'package:tatlock_ui/shared/components/data_grid/data_grid_exports.dart';
+
+/// Simple group data class for display.
+class GroupData {
+  GroupData({
+    required this.id,
+    required this.name,
+    required this.isSuperuser,
+    required this.memberCount,
+    this.parentName,
+  });
+
+  factory GroupData.fromJson(Map<String, dynamic> json) => GroupData(
+        id: json['id'] as String,
+        name: json['name'] as String,
+        isSuperuser: json['is_superuser'] as bool? ?? false,
+        memberCount: json['member_count'] as int? ?? 0,
+        parentName: json['parent_name'] as String?,
+      );
+
+  final String id;
+  final String name;
+  final bool isSuperuser;
+  final int memberCount;
+  final String? parentName;
+}
+
+/// Groups list page using the shared DataGrid component.
+class GroupsListPage extends ConsumerStatefulWidget {
+  const GroupsListPage({super.key});
+
+  @override
+  ConsumerState<GroupsListPage> createState() => _GroupsListPageState();
+}
+
+class _GroupsListPageState extends ConsumerState<GroupsListPage> {
+  late final StateNotifierProvider<DataGridController<GroupData>,
+      DataGridState<GroupData>> _gridProvider;
+  bool _isSyncing = false;
+
+  @override
+  void initState() {
+    super.initState();
+    // Create provider in initState to ensure stable reference
+    final dio = ref.read(coreApiClientProvider);
+    final source = CoreApiDataSource<GroupData>(
+      dio: dio,
+      endpoint: '/auth/groups',
+      fromJson: GroupData.fromJson,
+    );
+
+    _gridProvider = dataGridProvider<GroupData>(
+      source: source,
+      config: _buildConfig(),
+      idSelector: (g) => g.id,
+    );
+  }
+
+  Future<void> _syncFromAuthentik() async {
+    if (_isSyncing) return;
+    setState(() => _isSyncing = true);
+
+    try {
+      final dio = ref.read(coreApiClientProvider);
+      await dio.post<void>('/auth/groups/sync-from-authentik');
+
+      if (!mounted) return;
+      ref.read(_gridProvider.notifier).refresh();
+
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(
+          content: const Text('Groups synced from Authentik'),
+          behavior: SnackBarBehavior.floating,
+          duration: const Duration(seconds: 2),
+        ),
+      );
+    } catch (e) {
+      if (!mounted) return;
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(
+          content: Text('Sync failed: $e'),
+          behavior: SnackBarBehavior.floating,
+          duration: const Duration(seconds: 4),
+        ),
+      );
+    } finally {
+      if (mounted) setState(() => _isSyncing = false);
+    }
+  }
+
+  DataGridConfig<GroupData> _buildConfig() {
+    return DataGridConfig<GroupData>(
+      columns: [
+        DataGridColumn<GroupData>(
+          header: 'Name',
+          valueBuilder: (g) => g.name,
+          sortable: true,
+          searchable: true,
+          width: const DataGridColumnWidth.flex(2),
+        ),
+        DataGridColumn<GroupData>(
+          header: 'Members',
+          valueBuilder: (g) => g.memberCount.toString(),
+          width: const DataGridColumnWidth.fixed(100),
+          alignment: DataGridColumnAlignment.end,
+        ),
+        DataGridColumn<GroupData>(
+          header: 'Type',
+          valueBuilder: (g) => g.isSuperuser ? 'Superuser' : 'Standard',
+          cellBuilder: (context, g) => _GroupTypeBadge(isSuperuser: g.isSuperuser),
+          width: const DataGridColumnWidth.fixed(120),
+        ),
+        DataGridColumn<GroupData>(
+          header: 'Parent',
+          valueBuilder: (g) => g.parentName ?? '-',
+          width: const DataGridColumnWidth.flex(1),
+        ),
+      ],
+      enableSearch: true,
+      searchHint: 'Search groups...',
+      showHeader: true,
+      showFooter: true,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return DataGrid<GroupData>(
+      provider: _gridProvider,
+      config: _buildConfig(),
+      idSelector: (g) => g.id,
+      toolbarActions: [
+        IconButton(
+          icon: const Icon(Icons.refresh),
+          tooltip: 'Refresh',
+          onPressed: () => ref.read(_gridProvider.notifier).refresh(),
+        ),
+        const SizedBox(width: 8),
+        FilledButton.icon(
+          onPressed: _isSyncing ? null : _syncFromAuthentik,
+          icon: _isSyncing
+              ? const SizedBox(
+                  width: 16,
+                  height: 16,
+                  child: CircularProgressIndicator(strokeWidth: 2),
+                )
+              : const Icon(Icons.sync),
+          label: const Text('Sync from Authentik'),
+        ),
+      ],
+    );
+  }
+}
+
+class _GroupTypeBadge extends StatelessWidget {
+  const _GroupTypeBadge({required this.isSuperuser});
+
+  final bool isSuperuser;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+      decoration: BoxDecoration(
+        color: isSuperuser
+            ? colorScheme.primaryContainer
+            : colorScheme.surfaceContainerHighest,
+        borderRadius: BorderRadius.circular(4),
+      ),
+      child: Text(
+        isSuperuser ? 'Superuser' : 'Standard',
+        style: TextStyle(
+          fontSize: 12,
+          fontWeight: FontWeight.w500,
+          color: isSuperuser
+              ? colorScheme.onPrimaryContainer
+              : colorScheme.onSurfaceVariant,
+        ),
+      ),
+    );
+  }
+}

lib/features/security/presentation/pages/security_page.dart

@@ -0,0 +1,113 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+import 'package:tatlock_ui/features/security/router.dart';
+import 'package:tatlock_ui/features/security/users/users_list_page.dart';
+import 'package:tatlock_ui/features/security/groups/groups_list_page.dart';
+import 'package:tatlock_ui/shared/layouts/widgets/nav_panel.dart';
+
+/// Main Security room page with nav panel and section content.
+class SecurityPage extends ConsumerWidget {
+  const SecurityPage({
+    super.key,
+    this.nav = SecurityNav.users,
+  });
+
+  /// The current nav item to display.
+  final SecurityNav nav;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Scaffold(
+      body: Row(
+        children: [
+          // Nav Panel - section navigation with grouping
+          NavPanel(
+            title: 'Sections',
+            icon: Icons.security_outlined,
+            items: SecurityNav.values.map((n) => n.toNavItem()).toList(),
+            selectedId: nav.id,
+            onItemSelected: (id) {
+              final newNav = SecurityNav.values.firstWhere(
+                (n) => n.id == id,
+              );
+              // Navigate to section URL
+              context.go(pathForSecurityNav(newNav));
+            },
+          ),
+          // Divider
+          VerticalDivider(
+            width: 1,
+            thickness: 1,
+            color: colorScheme.outlineVariant,
+          ),
+          // Section content
+          Expanded(
+            child: _SectionContent(nav: nav),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+/// Renders content for the selected nav item.
+class _SectionContent extends StatelessWidget {
+  const _SectionContent({required this.nav});
+
+  final SecurityNav nav;
+
+  @override
+  Widget build(BuildContext context) {
+    switch (nav) {
+      case SecurityNav.users:
+        return const UsersListPage();
+      case SecurityNav.groups:
+        return const GroupsListPage();
+      default:
+        return _PlaceholderSection(nav: nav);
+    }
+  }
+}
+
+/// Placeholder for nav items not yet implemented.
+class _PlaceholderSection extends StatelessWidget {
+  const _PlaceholderSection({required this.nav});
+
+  final SecurityNav nav;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    return Center(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Icon(
+            nav.icon,
+            size: 64,
+            color: colorScheme.outline,
+          ),
+          const SizedBox(height: 16),
+          Text(
+            nav.label,
+            style: textTheme.headlineSmall?.copyWith(
+              color: colorScheme.onSurfaceVariant,
+            ),
+          ),
+          const SizedBox(height: 8),
+          Text(
+            '${nav.section} • Coming soon',
+            style: textTheme.bodyMedium?.copyWith(
+              color: colorScheme.outline,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/features/security/router.dart

@@ -0,0 +1,74 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:tatlock_ui/features/security/presentation/pages/security_page.dart';
+import 'package:tatlock_ui/shared/layouts/widgets/nav_panel.dart';
+
+/// Route paths for Security room.
+abstract class SecurityRoutes {
+  static const base = '/security';
+  // User Management (Authentik)
+  static const users = '/security/users';
+  static const groups = '/security/groups';
+  // Monitoring (future)
+  static const cveMonitor = '/security/cve-monitor';
+  static const networkMonitor = '/security/network-monitor';
+  static const dnsAdblock = '/security/dns-adblock';
+}
+
+/// Security room navigation items with section grouping.
+enum SecurityNav {
+  // User Management section (moved from Control Room)
+  users('users', 'Users', Icons.people, 'User Management'),
+  groups('groups', 'Groups', Icons.group_work, 'User Management'),
+  // Monitoring section (placeholders for future)
+  cveMonitor('cve-monitor', 'CVE Monitor', Icons.security, 'Monitoring'),
+  networkMonitor('network-monitor', 'Network Monitor', Icons.router, 'Monitoring'),
+  dnsAdblock('dns-adblock', 'DNS / Adblock', Icons.dns, 'Monitoring');
+
+  const SecurityNav(this.id, this.label, this.icon, this.section);
+
+  final String id;
+  final String label;
+  final IconData icon;
+  final String section;
+
+  NavItem toNavItem() => NavItem(
+        id: id,
+        label: label,
+        icon: icon,
+        section: section,
+      );
+
+  /// Get route path for this nav item.
+  String get path => '/security/$id';
+}
+
+/// Get route path for a nav item.
+String pathForSecurityNav(SecurityNav nav) => nav.path;
+
+/// Security room routes for go_router.
+List<RouteBase> securityRoutes() {
+  return [
+    // Redirect /security to /security/users
+    GoRoute(
+      path: SecurityRoutes.base,
+      name: 'security',
+      redirect: (context, state) => SecurityRoutes.users,
+    ),
+    // Generate routes for all nav items
+    for (final nav in SecurityNav.values)
+      GoRoute(
+        path: nav.path,
+        name: 'security${_capitalize(nav.id.replaceAll('-', '_'))}',
+        builder: (context, state) => SecurityPage(nav: nav),
+      ),
+  ];
+}
+
+String _capitalize(String s) {
+  if (s.isEmpty) return s;
+  return s
+      .split('_')
+      .map((part) => part[0].toUpperCase() + part.substring(1))
+      .join('');
+}

lib/features/security/users/users_list_page.dart

@@ -0,0 +1,306 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:tatlock_ui/core/api/api_client.dart';
+import 'package:tatlock_ui/shared/components/data_grid/adapters/core_api_source.dart';
+import 'package:tatlock_ui/shared/components/data_grid/data_grid_exports.dart';
+
+/// Simple user data class for display.
+class UserData {
+  UserData({
+    required this.id,
+    required this.email,
+    required this.name,
+    this.avatarUrl,
+    required this.createdAt,
+    this.lastLogin,
+    this.roles = const [],
+  });
+
+  factory UserData.fromJson(Map<String, dynamic> json) => UserData(
+        id: json['id'] as String,
+        email: json['email'] as String,
+        name: json['name'] as String,
+        avatarUrl: json['avatar_url'] as String?,
+        createdAt: DateTime.parse(json['created_at'] as String),
+        lastLogin: json['last_login'] != null
+            ? DateTime.parse(json['last_login'] as String)
+            : null,
+        roles: (json['roles'] as List<dynamic>?)?.cast<String>() ?? [],
+      );
+
+  final String id;
+  final String email;
+  final String name;
+  final String? avatarUrl;
+  final DateTime createdAt;
+  final DateTime? lastLogin;
+  final List<String> roles;
+
+  bool get isAdmin => roles.any((r) => r.endsWith(':admin'));
+
+  String get initials {
+    final parts = name.split(' ');
+    if (parts.length >= 2) {
+      return '${parts.first[0]}${parts.last[0]}'.toUpperCase();
+    }
+    return name.substring(0, name.length.clamp(0, 2)).toUpperCase();
+  }
+
+  String get lastLoginFormatted {
+    if (lastLogin == null) return 'Never';
+    final diff = DateTime.now().difference(lastLogin!);
+    if (diff.inDays > 30) {
+      return '${lastLogin!.day}/${lastLogin!.month}/${lastLogin!.year}';
+    }
+    if (diff.inDays > 0) return '${diff.inDays}d ago';
+    if (diff.inHours > 0) return '${diff.inHours}h ago';
+    if (diff.inMinutes > 0) return '${diff.inMinutes}m ago';
+    return 'Just now';
+  }
+}
+
+/// Users list page using the shared DataGrid component.
+class UsersListPage extends ConsumerStatefulWidget {
+  const UsersListPage({super.key});
+
+  @override
+  ConsumerState<UsersListPage> createState() => _UsersListPageState();
+}
+
+class _UsersListPageState extends ConsumerState<UsersListPage> {
+  late final StateNotifierProvider<DataGridController<UserData>,
+      DataGridState<UserData>> _gridProvider;
+  bool _isSyncing = false;
+
+  @override
+  void initState() {
+    super.initState();
+    final dio = ref.read(coreApiClientProvider);
+    final source = CoreApiDataSource<UserData>(
+      dio: dio,
+      endpoint: '/auth/users',
+      fromJson: UserData.fromJson,
+    );
+
+    _gridProvider = dataGridProvider<UserData>(
+      source: source,
+      config: _buildConfig(),
+      idSelector: (u) => u.id,
+    );
+  }
+
+  Future<void> _syncFromAuthentik() async {
+    if (_isSyncing) return;
+    setState(() => _isSyncing = true);
+
+    try {
+      final dio = ref.read(coreApiClientProvider);
+      await dio.post<void>('/auth/users/sync-from-authentik');
+
+      if (!mounted) return;
+      ref.read(_gridProvider.notifier).refresh();
+
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(
+          content: const Text('Users synced from Authentik'),
+          behavior: SnackBarBehavior.floating,
+          duration: const Duration(seconds: 2),
+        ),
+      );
+    } catch (e) {
+      if (!mounted) return;
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(
+          content: Text('Sync failed: $e'),
+          behavior: SnackBarBehavior.floating,
+          duration: const Duration(seconds: 4),
+        ),
+      );
+    } finally {
+      if (mounted) setState(() => _isSyncing = false);
+    }
+  }
+
+  DataGridConfig<UserData> _buildConfig() {
+    return DataGridConfig<UserData>(
+      columns: [
+        DataGridColumn<UserData>(
+          header: 'User',
+          valueBuilder: (u) => u.name,
+          sortable: true,
+          searchable: true,
+          width: const DataGridColumnWidth.flex(2),
+          cellBuilder: (context, u) => _UserCell(user: u),
+        ),
+        DataGridColumn<UserData>(
+          header: 'Roles',
+          valueBuilder: (u) => u.roles.join(', '),
+          width: const DataGridColumnWidth.flex(1),
+          cellBuilder: (context, u) => _RolesCell(roles: u.roles),
+        ),
+        DataGridColumn<UserData>(
+          header: 'Last Login',
+          valueBuilder: (u) => u.lastLoginFormatted,
+          width: const DataGridColumnWidth.fixed(120),
+          alignment: DataGridColumnAlignment.end,
+        ),
+      ],
+      enableSearch: true,
+      searchHint: 'Search users...',
+      showHeader: true,
+      showFooter: true,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return DataGrid<UserData>(
+      provider: _gridProvider,
+      config: _buildConfig(),
+      idSelector: (u) => u.id,
+      toolbarActions: [
+        IconButton(
+          icon: const Icon(Icons.refresh),
+          tooltip: 'Refresh',
+          onPressed: () => ref.read(_gridProvider.notifier).refresh(),
+        ),
+        const SizedBox(width: 8),
+        FilledButton.icon(
+          onPressed: _isSyncing ? null : _syncFromAuthentik,
+          icon: _isSyncing
+              ? const SizedBox(
+                  width: 16,
+                  height: 16,
+                  child: CircularProgressIndicator(strokeWidth: 2),
+                )
+              : const Icon(Icons.sync),
+          label: const Text('Sync from Authentik'),
+        ),
+      ],
+    );
+  }
+}
+
+class _UserCell extends StatelessWidget {
+  const _UserCell({required this.user});
+
+  final UserData user;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Row(
+      children: [
+        CircleAvatar(
+          radius: 16,
+          backgroundColor: colorScheme.primaryContainer,
+          backgroundImage:
+              user.avatarUrl != null ? NetworkImage(user.avatarUrl!) : null,
+          child: user.avatarUrl == null
+              ? Text(
+                  user.initials,
+                  style: TextStyle(
+                    fontSize: 12,
+                    color: colorScheme.onPrimaryContainer,
+                    fontWeight: FontWeight.w500,
+                  ),
+                )
+              : null,
+        ),
+        const SizedBox(width: 12),
+        Expanded(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Row(
+                children: [
+                  Flexible(
+                    child: Text(
+                      user.name,
+                      style: const TextStyle(fontWeight: FontWeight.w500),
+                      overflow: TextOverflow.ellipsis,
+                    ),
+                  ),
+                  if (user.isAdmin) ...[
+                    const SizedBox(width: 8),
+                    Container(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: 6,
+                        vertical: 2,
+                      ),
+                      decoration: BoxDecoration(
+                        color: colorScheme.primaryContainer,
+                        borderRadius: BorderRadius.circular(4),
+                      ),
+                      child: Text(
+                        'Admin',
+                        style: TextStyle(
+                          fontSize: 10,
+                          fontWeight: FontWeight.w500,
+                          color: colorScheme.onPrimaryContainer,
+                        ),
+                      ),
+                    ),
+                  ],
+                ],
+              ),
+              Text(
+                user.email,
+                style: TextStyle(
+                  fontSize: 12,
+                  color: colorScheme.onSurfaceVariant,
+                ),
+                overflow: TextOverflow.ellipsis,
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _RolesCell extends StatelessWidget {
+  const _RolesCell({required this.roles});
+
+  final List<String> roles;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    if (roles.isEmpty) {
+      return Text(
+        'No roles',
+        style: TextStyle(
+          fontSize: 12,
+          color: colorScheme.outline,
+          fontStyle: FontStyle.italic,
+        ),
+      );
+    }
+
+    return Wrap(
+      spacing: 4,
+      runSpacing: 4,
+      children: roles.take(3).map((role) {
+        return Container(
+          padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+          decoration: BoxDecoration(
+            color: colorScheme.surfaceContainerHighest,
+            borderRadius: BorderRadius.circular(4),
+          ),
+          child: Text(
+            role.split(':').last,
+            style: TextStyle(
+              fontSize: 10,
+              color: colorScheme.onSurfaceVariant,
+            ),
+          ),
+        );
+      }).toList(),
+    );
+  }
+}

lib/routing/app_router.dart

@@ -1,8 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
-import 'package:tatlock_ui/features/control_room/presentation/pages/control_room_page.dart';
+import 'package:tatlock_ui/features/control_room/router.dart';
 import 'package:tatlock_ui/features/front_hall/presentation/pages/front_hall_page.dart';
+import 'package:tatlock_ui/features/security/router.dart';
 import 'package:tatlock_ui/shared/layouts/app_scaffold.dart';
 
 part 'app_router.g.dart';
@@ -10,16 +11,13 @@ part 'app_router.g.dart';
 /// Route paths as constants.
 abstract class AppRoutes {
   static const frontHall = '/';
-  static const controlRoom = '/control-room';
-  static const containers = '/control-room/containers';
-  static const containerDetail = '/control-room/containers/:id';
   static const parlor = '/parlor';
   static const settings = '/settings';
 }
 
 /// Provides the GoRouter instance.
 @riverpod
-GoRouter appRouter(AppRouterRef ref) {
+GoRouter appRouter(Ref ref) {
   return GoRouter(
     initialLocation: AppRoutes.frontHall,
     debugLogDiagnostics: true,
@@ -32,11 +30,8 @@ GoRouter appRouter(AppRouterRef ref) {
             name: 'frontHall',
             builder: (context, state) => const FrontHallPage(),
           ),
-          GoRoute(
-            path: AppRoutes.controlRoom,
-            name: 'controlRoom',
-            builder: (context, state) => const ControlRoomPage(),
-          ),
+          ...controlRoomRoutes(),
+          ...securityRoutes(),
           GoRoute(
             path: AppRoutes.parlor,
             name: 'parlor',

lib/shared/components/code_editor/code_editor.dart

@@ -97,31 +97,34 @@ class CodeEditorState extends State<CodeEditor> {
 
     return CodeTheme(
       data: isDark ? _darkTheme(colorScheme) : _lightTheme(colorScheme),
-      child: CodeField(
-        controller: _controller,
-        readOnly: widget.readOnly,
-        gutterStyle: widget.showLineNumbers
-            ? GutterStyle(
-                showLineNumbers: true,
-                showErrors: false,
-                showFoldingHandles: false,
-                margin: 0,
-                textStyle: TextStyle(
-                  fontFamily: 'monospace',
-                  fontSize: 12,
-                  color: colorScheme.outline,
-                ),
-                background: colorScheme.surfaceContainerLow,
-              )
-            : GutterStyle.none,
-        textStyle: TextStyle(
-          fontFamily: 'monospace',
-          fontSize: 13,
-          height: 1.5,
-          color: colorScheme.onSurface,
+      child: SingleChildScrollView(
+        child: CodeField(
+          controller: _controller,
+          readOnly: widget.readOnly,
+          minLines: 1,
+          gutterStyle: widget.showLineNumbers
+              ? GutterStyle(
+                  showLineNumbers: true,
+                  showErrors: false,
+                  showFoldingHandles: false,
+                  margin: 0,
+                  textStyle: TextStyle(
+                    fontFamily: 'monospace',
+                    fontSize: 12,
+                    color: colorScheme.outline,
+                  ),
+                  background: colorScheme.surfaceContainerLow,
+                )
+              : GutterStyle.none,
+          textStyle: TextStyle(
+            fontFamily: 'monospace',
+            fontSize: 13,
+            height: 1.5,
+            color: colorScheme.onSurface,
+          ),
+          padding: const EdgeInsets.all(16),
+          background: colorScheme.surfaceContainerLowest,
         ),
-        padding: const EdgeInsets.all(16),
-        background: colorScheme.surfaceContainerLowest,
       ),
     );
   }

lib/shared/components/data_grid/adapters/core_api_source.dart

@@ -88,28 +88,37 @@ class CoreApiDataSource<T> extends DataGridSource<T> {
       queryParams[limitParam] = limit;
     }
 
-    final response = await dio.get<Map<String, dynamic>>(
+    final response = await dio.get<dynamic>(
       endpoint,
       queryParameters: queryParams,
     );
 
-    final data = response.data!;
+    final responseData = response.data!;
 
     // Handle both paginated and wrapped responses
     List<dynamic> itemsJson;
     int totalCount;
 
-    if (data.containsKey(itemsKey)) {
-      // Paginated response: { items: [...], total: N }
-      itemsJson = data[itemsKey] as List<dynamic>;
-      totalCount = data[totalCountKey] as int? ?? itemsJson.length;
+    if (responseData is List) {
+      // Direct array response: [...]
+      itemsJson = responseData;
+      totalCount = itemsJson.length;
+    } else if (responseData is Map<String, dynamic>) {
+      final data = responseData;
+      if (data.containsKey(itemsKey)) {
+        // Paginated response: { items: [...], total: N }
+        itemsJson = data[itemsKey] as List<dynamic>;
+        totalCount = data[totalCountKey] as int? ?? itemsJson.length;
+      } else {
+        // Try common wrapper patterns: { data: [...] } or { results: [...] }
+        itemsJson = (data['data'] ?? data['results'] ?? []) as List<dynamic>;
+        totalCount = data['count'] as int? ??
+            data['total'] as int? ??
+            data['totalCount'] as int? ??
+            itemsJson.length;
+      }
     } else {
-      // Try common wrapper patterns: { data: [...] } or { results: [...] }
-      itemsJson = (data['data'] ?? data['results'] ?? []) as List<dynamic>;
-      totalCount = data['count'] as int? ??
-          data['total'] as int? ??
-          data['totalCount'] as int? ??
-          itemsJson.length;
+      throw FormatException('Unexpected response type: ${responseData.runtimeType}');
     }
 
     final items = itemsJson

lib/shared/components/data_grid/data_grid.dart

@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_riverpod/legacy.dart';
 
 import 'data_grid_config.dart';
 import 'data_grid_provider.dart';
-import 'data_grid_source.dart';
 import 'data_grid_state.dart';
 import 'widgets/data_grid_bulk_actions.dart';
 import 'widgets/data_grid_empty_state.dart';
@@ -103,9 +103,19 @@ class DataGrid<T> extends ConsumerWidget {
     DataGridState<T> state,
     DataGridController<T> controller,
   ) {
-    return Padding(
-      padding: const EdgeInsets.all(16),
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Container(
+      height: 56,
+      padding: const EdgeInsets.symmetric(horizontal: 16),
+      decoration: BoxDecoration(
+        color: colorScheme.surfaceContainerHighest,
+        border: Border(
+          bottom: BorderSide(color: colorScheme.outlineVariant),
+        ),
+      ),
       child: Row(
+        crossAxisAlignment: CrossAxisAlignment.center,
         children: [
           if (config.enableSearch)
             DataGridSearchBar(

lib/shared/components/data_grid/data_grid_exports.dart

@@ -75,6 +75,9 @@
 /// ```
 library;
 
+export 'package:flutter_riverpod/legacy.dart'
+    show StateNotifierProvider, StateNotifier;
+
 export 'data_grid.dart';
 export 'data_grid_action.dart';
 export 'data_grid_column.dart';

lib/shared/components/data_grid/data_grid_provider.dart

@@ -1,7 +1,7 @@
 import 'dart:async';
 
 import 'package:flutter/foundation.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_riverpod/legacy.dart';
 
 import 'data_grid_config.dart';
 import 'data_grid_source.dart';
@@ -35,6 +35,9 @@ class DataGridController<T> extends StateNotifier<DataGridState<T>> {
   /// Debounce timer for search.
   Timer? _searchDebounce;
 
+  /// All items before local filtering (for local search).
+  List<T> _allItems = [];
+
   @override
   void dispose() {
     _searchDebounce?.cancel();
@@ -57,16 +60,21 @@ class DataGridController<T> extends StateNotifier<DataGridState<T>> {
       final (offset, limit) = _getPaginationParams();
 
       final result = await source.fetch(
-        searchQuery: state.searchQuery.isEmpty ? null : state.searchQuery,
         sortField: sortField,
         sortDescending: state.sortDescending,
         offset: offset,
         limit: limit,
       );
 
+      // Store all items for local filtering
+      _allItems = result.items;
+
+      // Apply local filter if search query exists
+      final filteredItems = _applyLocalFilter(_allItems);
+
       state = state.copyWith(
-        items: result.items,
-        totalCount: result.totalCount,
+        items: filteredItems,
+        totalCount: filteredItems.length,
         hasMore: result.hasMore,
         isLoading: false,
         isInitialLoad: false,
@@ -82,6 +90,26 @@ class DataGridController<T> extends StateNotifier<DataGridState<T>> {
     }
   }
 
+  /// Applies local filtering based on search query.
+  List<T> _applyLocalFilter(List<T> items) {
+    if (state.searchQuery.isEmpty) return items;
+
+    final query = state.searchQuery.toLowerCase();
+
+    return items.where((item) {
+      // Check all searchable columns
+      for (final column in config.columns) {
+        if (column.searchable) {
+          final value = column.valueBuilder(item);
+          if (value.toLowerCase().contains(query)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    }).toList();
+  }
+
   /// Gets pagination parameters based on data mode.
   (int?, int?) _getPaginationParams() {
     return switch (config.dataMode) {
@@ -97,13 +125,13 @@ class DataGridController<T> extends StateNotifier<DataGridState<T>> {
   /// Refreshes the grid data.
   Future<void> refresh() => _load(refresh: true);
 
-  /// Sets the search query with debouncing.
+  /// Sets the search query with debouncing (filters locally).
   void search(String query) {
     _searchDebounce?.cancel();
-    _searchDebounce = Timer(const Duration(milliseconds: 300), () {
+    _searchDebounce = Timer(const Duration(milliseconds: 150), () {
       if (state.searchQuery != query) {
         state = state.copyWith(searchQuery: query, currentPage: 0);
-        _load(refresh: true);
+        _applyFilterAndUpdateState();
       }
     });
   }
@@ -113,10 +141,19 @@ class DataGridController<T> extends StateNotifier<DataGridState<T>> {
     _searchDebounce?.cancel();
     if (state.searchQuery.isNotEmpty) {
       state = state.copyWith(searchQuery: '', currentPage: 0);
-      _load(refresh: true);
+      _applyFilterAndUpdateState();
     }
   }
 
+  /// Applies local filter and updates state with filtered items.
+  void _applyFilterAndUpdateState() {
+    final filteredItems = _applyLocalFilter(_allItems);
+    state = state.copyWith(
+      items: filteredItems,
+      totalCount: filteredItems.length,
+    );
+  }
+
   /// Sorts by the given column index.
   void sortBy(int columnIndex) {
     final column = config.columns[columnIndex];

lib/shared/components/data_grid/data_grid_state.dart

@@ -4,7 +4,7 @@ part 'data_grid_state.freezed.dart';
 
 /// State for a DataGrid instance.
 @freezed
-class DataGridState<T> with _$DataGridState<T> {
+sealed class DataGridState<T> with _$DataGridState<T> {
   const factory DataGridState({
     /// Current items being displayed.
     @Default([]) List<T> items,

lib/shared/components/data_grid/widgets/data_grid_search_bar.dart

@@ -40,14 +40,16 @@ class _DataGridSearchBarState extends State<DataGridSearchBar> {
 
     return SizedBox(
       width: 300,
+      height: 36,
       child: TextField(
         controller: _controller,
+        style: const TextStyle(fontSize: 14),
         decoration: InputDecoration(
           hintText: widget.hintText,
-          prefixIcon: const Icon(Icons.search),
+          prefixIcon: const Icon(Icons.search, size: 20),
           suffixIcon: _controller.text.isNotEmpty
               ? IconButton(
-                  icon: const Icon(Icons.clear),
+                  icon: const Icon(Icons.clear, size: 18),
                   onPressed: () {
                     _controller.clear();
                     widget.onClear();
@@ -56,14 +58,22 @@ class _DataGridSearchBarState extends State<DataGridSearchBar> {
               : null,
           isDense: true,
           filled: true,
-          fillColor: colorScheme.surfaceContainerHighest,
+          fillColor: colorScheme.surface,
           border: OutlineInputBorder(
             borderRadius: BorderRadius.circular(8),
-            borderSide: BorderSide.none,
+            borderSide: BorderSide(color: colorScheme.outlineVariant),
+          ),
+          enabledBorder: OutlineInputBorder(
+            borderRadius: BorderRadius.circular(8),
+            borderSide: BorderSide(color: colorScheme.outlineVariant),
+          ),
+          focusedBorder: OutlineInputBorder(
+            borderRadius: BorderRadius.circular(8),
+            borderSide: BorderSide(color: colorScheme.primary),
           ),
           contentPadding: const EdgeInsets.symmetric(
-            horizontal: 16,
-            vertical: 12,
+            horizontal: 12,
+            vertical: 8,
           ),
         ),
         onChanged: (value) {

lib/shared/layouts/app_scaffold.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
+import 'package:tatlock_ui/features/control_room/router.dart';
+import 'package:tatlock_ui/features/security/router.dart';
 import 'package:tatlock_ui/routing/app_router.dart';
 import 'package:tatlock_ui/shared/layouts/widgets/top_header_bar.dart';
 
@@ -52,8 +54,9 @@ class AppScaffold extends StatelessWidget {
   int _selectedIndex(BuildContext context) {
     final location = GoRouterState.of(context).matchedLocation;
 
-    if (location.startsWith(AppRoutes.controlRoom)) return 1;
-    if (location.startsWith(AppRoutes.parlor)) return 2;
+    if (location.startsWith(ControlRoomRoutes.base)) return 1;
+    if (location.startsWith(SecurityRoutes.base)) return 2;
+    if (location.startsWith(AppRoutes.parlor)) return 3;
     // Settings is no longer in main nav (accessed via Profile dropdown)
     return 0; // Front Hall
   }
@@ -61,8 +64,9 @@ class AppScaffold extends StatelessWidget {
   void _onNavSelected(BuildContext context, int index) {
     final route = switch (index) {
       0 => AppRoutes.frontHall,
-      1 => AppRoutes.controlRoom,
-      2 => AppRoutes.parlor,
+      1 => ControlRoomRoutes.containers,
+      2 => SecurityRoutes.users,
+      3 => AppRoutes.parlor,
       _ => AppRoutes.frontHall,
     };
     context.go(route);

lib/shared/layouts/widgets/nav_panel.dart

@@ -0,0 +1,263 @@
+import 'package:flutter/material.dart';
+
+import 'panel_header.dart';
+
+/// A navigation item in the NavPanel.
+class NavItem {
+  const NavItem({
+    required this.id,
+    required this.label,
+    required this.icon,
+    this.section,
+    this.badge,
+  });
+
+  /// Unique identifier for routing.
+  final String id;
+
+  /// Display label.
+  final String label;
+
+  /// Item icon.
+  final IconData icon;
+
+  /// Optional section grouping (e.g., 'Portainer', 'NPM', 'Authentik').
+  /// Section headers are shown only when multiple sections exist.
+  final String? section;
+
+  /// Optional badge (e.g., item count).
+  final String? badge;
+}
+
+/// Left-side navigation panel for room-level section navigation.
+///
+/// Shows a list of items within the current room (e.g., Containers, Networks
+/// for Control Room). Items can be grouped into sections with headers.
+/// Section headers only appear when multiple sections exist.
+///
+/// Header content is docked to bottom to accommodate the logo bulge overlay.
+///
+/// See UI_LAYOUT.md for panel taxonomy and layout specifications.
+class NavPanel extends StatelessWidget {
+  const NavPanel({
+    super.key,
+    required this.title,
+    required this.icon,
+    required this.items,
+    required this.selectedId,
+    required this.onItemSelected,
+    this.width = 280,
+    this.trailing,
+  });
+
+  /// Panel title displayed in header.
+  final String title;
+
+  /// Leading icon for the header.
+  final IconData icon;
+
+  /// List of navigation items.
+  final List<NavItem> items;
+
+  /// Currently selected item ID.
+  final String selectedId;
+
+  /// Callback when an item is tapped.
+  final ValueChanged<String> onItemSelected;
+
+  /// Panel width (default 280px per UI_LAYOUT.md spec).
+  final double width;
+
+  /// Optional trailing widget below items (e.g., external links).
+  final Widget? trailing;
+
+  /// Returns true if section headers should be shown.
+  bool get _showSectionHeaders {
+    final sections = items.map((i) => i.section).where((s) => s != null).toSet();
+    return sections.length > 1;
+  }
+
+  /// Groups items by section, preserving order.
+  List<(String?, List<NavItem>)> get _groupedItems {
+    final groups = <String?, List<NavItem>>{};
+    final order = <String?>[];
+
+    for (final item in items) {
+      if (!groups.containsKey(item.section)) {
+        groups[item.section] = [];
+        order.add(item.section);
+      }
+      groups[item.section]!.add(item);
+    }
+
+    return order.map((section) => (section, groups[section]!)).toList();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return SizedBox(
+      width: width,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          PanelHeader(
+            title: title,
+            icon: icon,
+            dockToBottom: true, // Left-side panel
+          ),
+          Expanded(
+            child: ListView(
+              padding: const EdgeInsets.symmetric(vertical: 8),
+              children: _buildItemList(context),
+            ),
+          ),
+          if (trailing != null) ...[
+            Divider(height: 1, color: colorScheme.outlineVariant),
+            trailing!,
+          ],
+        ],
+      ),
+    );
+  }
+
+  List<Widget> _buildItemList(BuildContext context) {
+    final widgets = <Widget>[];
+    final showHeaders = _showSectionHeaders;
+
+    for (final (section, sectionItems) in _groupedItems) {
+      // Add section header if multiple sections exist
+      if (showHeaders && section != null) {
+        widgets.add(_SectionHeader(title: section));
+      }
+
+      // Add items
+      for (final item in sectionItems) {
+        widgets.add(
+          _NavTile(
+            item: item,
+            isSelected: item.id == selectedId,
+            onTap: () => onItemSelected(item.id),
+          ),
+        );
+      }
+    }
+
+    return widgets;
+  }
+}
+
+/// Section header widget with left accent bar.
+class _SectionHeader extends StatelessWidget {
+  const _SectionHeader({required this.title});
+
+  final String title;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    return Container(
+      margin: const EdgeInsets.only(top: 8, bottom: 4),
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
+      decoration: BoxDecoration(
+        color: colorScheme.surfaceContainerHigh,
+        border: Border(
+          left: BorderSide(
+            color: colorScheme.primary,
+            width: 2,
+          ),
+        ),
+      ),
+      child: Text(
+        title.toUpperCase(),
+        style: textTheme.labelSmall?.copyWith(
+          color: colorScheme.onSurfaceVariant,
+          letterSpacing: 0.5,
+          fontWeight: FontWeight.w600,
+        ),
+      ),
+    );
+  }
+}
+
+class _NavTile extends StatelessWidget {
+  const _NavTile({
+    required this.item,
+    required this.isSelected,
+    required this.onTap,
+  });
+
+  final NavItem item;
+  final bool isSelected;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
+      child: Material(
+        color: isSelected
+            ? colorScheme.primaryContainer.withValues(alpha: 0.4)
+            : Colors.transparent,
+        borderRadius: BorderRadius.circular(8),
+        child: InkWell(
+          onTap: onTap,
+          borderRadius: BorderRadius.circular(8),
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+            child: Row(
+              children: [
+                Icon(
+                  item.icon,
+                  size: 20,
+                  color: isSelected
+                      ? colorScheme.primary
+                      : colorScheme.onSurfaceVariant,
+                ),
+                const SizedBox(width: 12),
+                Expanded(
+                  child: Text(
+                    item.label,
+                    style: textTheme.bodyMedium?.copyWith(
+                      color: isSelected
+                          ? colorScheme.primary
+                          : colorScheme.onSurface,
+                      fontWeight: isSelected ? FontWeight.w600 : null,
+                    ),
+                  ),
+                ),
+                if (item.badge != null)
+                  Container(
+                    padding: const EdgeInsets.symmetric(
+                      horizontal: 8,
+                      vertical: 2,
+                    ),
+                    decoration: BoxDecoration(
+                      color: isSelected
+                          ? colorScheme.primary.withValues(alpha: 0.2)
+                          : colorScheme.surfaceContainerHighest,
+                      borderRadius: BorderRadius.circular(12),
+                    ),
+                    child: Text(
+                      item.badge!,
+                      style: textTheme.labelSmall?.copyWith(
+                        color: isSelected
+                            ? colorScheme.primary
+                            : colorScheme.onSurfaceVariant,
+                      ),
+                    ),
+                  ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/shared/layouts/widgets/profile_dropdown.dart

@@ -12,7 +12,7 @@ class ProfileDropdown extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final authState = ref.watch(authNotifierProvider);
+    final authState = ref.watch(authProvider);
     final colorScheme = Theme.of(context).colorScheme;
 
     return authState.when(
@@ -94,7 +94,7 @@ class ProfileDropdown extends ConsumerWidget {
             case 'settings':
               context.go(AppRoutes.settings);
             case 'logout':
-              ref.read(authNotifierProvider.notifier).signOut();
+              ref.read(authProvider.notifier).signOut();
           }
         },
       ),
@@ -106,7 +106,7 @@ class ProfileDropdown extends ConsumerWidget {
           child: CircularProgressIndicator(strokeWidth: 2),
         ),
       ),
-      error: (_, __) => CircleAvatar(
+      error: (err, stack) => CircleAvatar(
         radius: 18,
         backgroundColor: colorScheme.errorContainer,
         child: Icon(

lib/shared/layouts/widgets/top_header_bar.dart

@@ -34,6 +34,11 @@ class TopHeaderBar extends StatelessWidget {
       selectedIcon: Icons.dns,
       label: 'Control Room',
     ),
+    _RoomDestination(
+      icon: Icons.security_outlined,
+      selectedIcon: Icons.security,
+      label: 'Security',
+    ),
     _RoomDestination(
       icon: Icons.lightbulb_outline,
       selectedIcon: Icons.lightbulb,
@@ -76,7 +81,7 @@ class TopHeaderBar extends StatelessWidget {
               'assets/icons/logo.png',
               height: _logoSize,
               width: _logoSize,
-              errorBuilder: (_, __, ___) => Icon(
+              errorBuilder: (context, error, stack) => Icon(
                 Icons.layers,
                 size: 32,
                 color: colorScheme.primary,

lib/shared/widgets/air_quality_widget.dart

@@ -0,0 +1,316 @@
+import 'package:flutter/material.dart';
+
+/// Air Quality Index widget displaying current AQI.
+///
+/// Currently uses mock data. Will be connected to air quality API in future.
+class AirQualityWidget extends StatelessWidget {
+  const AirQualityWidget({
+    super.key,
+    this.data,
+    this.compact = false,
+  });
+
+  /// Air quality data to display. Uses mock data if null.
+  final AirQualityData? data;
+
+  /// Whether to use compact layout.
+  final bool compact;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final aqi = data ?? AirQualityData.mock();
+
+    if (compact) {
+      return _buildCompact(context, colorScheme, aqi);
+    }
+
+    return Card(
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            // Header
+            Row(
+              children: [
+                Icon(
+                  Icons.air,
+                  size: 20,
+                  color: colorScheme.onSurfaceVariant,
+                ),
+                const SizedBox(width: 8),
+                Text(
+                  'Air Quality',
+                  style: Theme.of(context).textTheme.titleSmall?.copyWith(
+                        color: colorScheme.onSurfaceVariant,
+                      ),
+                ),
+              ],
+            ),
+            const SizedBox(height: 16),
+
+            // AQI Display
+            Row(
+              children: [
+                // AQI number with colored background
+                Container(
+                  width: 64,
+                  height: 64,
+                  decoration: BoxDecoration(
+                    color: aqi.level.color.withValues(alpha: 0.15),
+                    borderRadius: BorderRadius.circular(12),
+                    border: Border.all(
+                      color: aqi.level.color.withValues(alpha: 0.3),
+                      width: 2,
+                    ),
+                  ),
+                  child: Center(
+                    child: Text(
+                      '${aqi.index}',
+                      style:
+                          Theme.of(context).textTheme.headlineMedium?.copyWith(
+                                fontWeight: FontWeight.bold,
+                                color: aqi.level.color,
+                              ),
+                    ),
+                  ),
+                ),
+                const SizedBox(width: 16),
+
+                // Level info
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        aqi.level.label,
+                        style:
+                            Theme.of(context).textTheme.titleMedium?.copyWith(
+                                  fontWeight: FontWeight.w600,
+                                  color: aqi.level.color,
+                                ),
+                      ),
+                      const SizedBox(height: 4),
+                      Text(
+                        aqi.level.description,
+                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                              color: colorScheme.onSurfaceVariant,
+                            ),
+                        maxLines: 2,
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+
+            // Pollutants
+            if (aqi.pollutants.isNotEmpty) ...[
+              const SizedBox(height: 16),
+              const Divider(height: 1),
+              const SizedBox(height: 12),
+              Wrap(
+                spacing: 16,
+                runSpacing: 8,
+                children: aqi.pollutants
+                    .map((p) => _PollutantChip(pollutant: p))
+                    .toList(),
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildCompact(
+    BuildContext context,
+    ColorScheme colorScheme,
+    AirQualityData aqi,
+  ) {
+    return Card(
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Container(
+              width: 32,
+              height: 32,
+              decoration: BoxDecoration(
+                color: aqi.level.color.withValues(alpha: 0.15),
+                borderRadius: BorderRadius.circular(6),
+              ),
+              child: Center(
+                child: Text(
+                  '${aqi.index}',
+                  style: Theme.of(context).textTheme.titleSmall?.copyWith(
+                        fontWeight: FontWeight.bold,
+                        color: aqi.level.color,
+                      ),
+                ),
+              ),
+            ),
+            const SizedBox(width: 8),
+            Text(
+              'AQI',
+              style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                    color: colorScheme.onSurfaceVariant,
+                  ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _PollutantChip extends StatelessWidget {
+  const _PollutantChip({required this.pollutant});
+
+  final Pollutant pollutant;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Text(
+          pollutant.name,
+          style: Theme.of(context).textTheme.labelSmall?.copyWith(
+                color: colorScheme.outline,
+              ),
+        ),
+        const SizedBox(width: 4),
+        Text(
+          '${pollutant.value.round()} ${pollutant.unit}',
+          style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                fontWeight: FontWeight.w500,
+              ),
+        ),
+      ],
+    );
+  }
+}
+
+/// Air Quality Index levels based on US EPA standard.
+enum AqiLevel {
+  good(
+    label: 'Good',
+    description: 'Air quality is satisfactory',
+    color: Colors.green,
+    minIndex: 0,
+    maxIndex: 50,
+  ),
+  moderate(
+    label: 'Moderate',
+    description: 'Acceptable for most people',
+    color: Colors.amber,
+    minIndex: 51,
+    maxIndex: 100,
+  ),
+  unhealthySensitive(
+    label: 'Unhealthy for Sensitive',
+    description: 'May affect sensitive groups',
+    color: Colors.orange,
+    minIndex: 101,
+    maxIndex: 150,
+  ),
+  unhealthy(
+    label: 'Unhealthy',
+    description: 'Health effects for everyone',
+    color: Colors.red,
+    minIndex: 151,
+    maxIndex: 200,
+  ),
+  veryUnhealthy(
+    label: 'Very Unhealthy',
+    description: 'Serious health effects',
+    color: Color(0xFF8B008B),
+    minIndex: 201,
+    maxIndex: 300,
+  ),
+  hazardous(
+    label: 'Hazardous',
+    description: 'Health emergency conditions',
+    color: Color(0xFF800000),
+    minIndex: 301,
+    maxIndex: 500,
+  );
+
+  const AqiLevel({
+    required this.label,
+    required this.description,
+    required this.color,
+    required this.minIndex,
+    required this.maxIndex,
+  });
+
+  final String label;
+  final String description;
+  final Color color;
+  final int minIndex;
+  final int maxIndex;
+
+  static AqiLevel fromIndex(int index) {
+    for (final level in AqiLevel.values) {
+      if (index >= level.minIndex && index <= level.maxIndex) {
+        return level;
+      }
+    }
+    return AqiLevel.hazardous;
+  }
+}
+
+/// Pollutant data.
+class Pollutant {
+  const Pollutant({
+    required this.name,
+    required this.value,
+    required this.unit,
+  });
+
+  final String name;
+  final double value;
+  final String unit;
+}
+
+/// Air quality data model.
+class AirQualityData {
+  const AirQualityData({
+    required this.index,
+    required this.level,
+    this.pollutants = const [],
+  });
+
+  final int index;
+  final AqiLevel level;
+  final List<Pollutant> pollutants;
+
+  /// Create from index value.
+  factory AirQualityData.fromIndex(int index, {List<Pollutant>? pollutants}) {
+    return AirQualityData(
+      index: index,
+      level: AqiLevel.fromIndex(index),
+      pollutants: pollutants ?? const [],
+    );
+  }
+
+  /// Mock air quality data for development.
+  factory AirQualityData.mock() {
+    return const AirQualityData(
+      index: 42,
+      level: AqiLevel.good,
+      pollutants: [
+        Pollutant(name: 'PM2.5', value: 8.5, unit: 'µg/m³'),
+        Pollutant(name: 'PM10', value: 15, unit: 'µg/m³'),
+        Pollutant(name: 'O₃', value: 32, unit: 'ppb'),
+      ],
+    );
+  }
+}

lib/shared/widgets/entity_form_dialog.dart

@@ -0,0 +1,288 @@
+import 'package:flutter/material.dart';
+import 'package:tatlock_ui/shared/widgets/entity_page.dart';
+
+/// A reusable dialog wrapper for entity create/edit forms.
+///
+/// Provides consistent styling across all Control Room sections:
+/// - Constrained max width/height
+/// - AppBar with title and close button
+/// - Scrollable content area
+///
+/// Usage:
+/// ```dart
+/// showEntityFormDialog(
+///   context: context,
+///   title: 'New Proxy Host',
+///   child: ProxyHostForm(
+///     onCancel: () => Navigator.of(context).pop(),
+///     onSaved: () {
+///       Navigator.of(context).pop();
+///       ref.invalidate(domainsProvider);
+///     },
+///   ),
+/// );
+/// ```
+void showEntityFormDialog({
+  required BuildContext context,
+  required String title,
+  required Widget child,
+  double maxWidth = 600,
+  double maxHeight = 700,
+}) {
+  showDialog(
+    context: context,
+    builder: (context) => EntityFormDialog(
+      title: title,
+      maxWidth: maxWidth,
+      maxHeight: maxHeight,
+      child: child,
+    ),
+  );
+}
+
+/// Dialog widget for entity forms.
+class EntityFormDialog extends StatelessWidget {
+  const EntityFormDialog({
+    super.key,
+    required this.title,
+    required this.child,
+    this.maxWidth = 600,
+    this.maxHeight = 700,
+  });
+
+  final String title;
+  final Widget child;
+  final double maxWidth;
+  final double maxHeight;
+
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      child: ConstrainedBox(
+        constraints: BoxConstraints(
+          maxWidth: maxWidth,
+          maxHeight: maxHeight,
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            AppBar(
+              title: Text(title),
+              automaticallyImplyLeading: false,
+              actions: [
+                IconButton(
+                  icon: const Icon(Icons.close),
+                  onPressed: () => Navigator.of(context).pop(),
+                ),
+              ],
+            ),
+            Flexible(child: child),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// A standardized form wrapper with common patterns.
+///
+/// Handles:
+/// - Error display banner
+/// - Loading state on save button
+/// - Cancel/Save button row
+/// - Form key management
+/// - Create vs Edit mode awareness
+///
+/// Use [mode] to indicate whether this is a create or edit form.
+/// Child widgets can use [EntityFormScope.of(context)] to check the mode
+/// and disable fields that should only be editable during creation.
+class EntityForm extends StatelessWidget {
+  const EntityForm({
+    super.key,
+    required this.formKey,
+    required this.onCancel,
+    required this.onSave,
+    required this.isSaving,
+    required this.children,
+    this.mode = EntityPageMode.create,
+    this.error,
+    this.saveLabel,
+    this.cancelLabel = 'Cancel',
+  });
+
+  final GlobalKey<FormState> formKey;
+  final VoidCallback onCancel;
+  final VoidCallback onSave;
+  final bool isSaving;
+  final List<Widget> children;
+  final EntityPageMode mode;
+  final String? error;
+  final String? saveLabel;
+  final String cancelLabel;
+
+  bool get isCreating => mode == EntityPageMode.create;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final effectiveSaveLabel = saveLabel ?? (isCreating ? 'Create' : 'Save');
+
+    return EntityFormScope(
+      mode: mode,
+      child: Form(
+        key: formKey,
+        child: SingleChildScrollView(
+          padding: const EdgeInsets.all(24),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              // Error banner
+              if (error != null)
+                Container(
+                  padding: const EdgeInsets.all(12),
+                  margin: const EdgeInsets.only(bottom: 16),
+                  decoration: BoxDecoration(
+                    color: colorScheme.errorContainer,
+                    borderRadius: BorderRadius.circular(8),
+                  ),
+                  child: Row(
+                    children: [
+                      Icon(Icons.error, color: colorScheme.onErrorContainer),
+                      const SizedBox(width: 8),
+                      Expanded(
+                        child: Text(
+                          error!,
+                          style: TextStyle(color: colorScheme.onErrorContainer),
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+
+              // Form fields
+              ...children,
+
+              const SizedBox(height: 32),
+
+              // Action buttons
+              Row(
+                mainAxisAlignment: MainAxisAlignment.end,
+                children: [
+                  OutlinedButton(
+                    onPressed: isSaving ? null : onCancel,
+                    child: Text(cancelLabel),
+                  ),
+                  const SizedBox(width: 12),
+                  FilledButton.icon(
+                    onPressed: isSaving ? null : onSave,
+                    icon: isSaving
+                        ? const SizedBox(
+                            width: 16,
+                            height: 16,
+                            child: CircularProgressIndicator(strokeWidth: 2),
+                          )
+                        : const Icon(Icons.save),
+                    label: Text(effectiveSaveLabel),
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// InheritedWidget to provide form mode to descendants.
+///
+/// Allows form fields to check if they're in create or edit mode
+/// and adjust their behavior accordingly (e.g., disable create-only fields).
+class EntityFormScope extends InheritedWidget {
+  const EntityFormScope({
+    super.key,
+    required this.mode,
+    required super.child,
+  });
+
+  final EntityPageMode mode;
+
+  bool get isCreating => mode == EntityPageMode.create;
+  bool get isEditing => mode == EntityPageMode.edit;
+
+  static EntityFormScope? maybeOf(BuildContext context) {
+    return context.dependOnInheritedWidgetOfExactType<EntityFormScope>();
+  }
+
+  static EntityFormScope of(BuildContext context) {
+    final scope = maybeOf(context);
+    assert(scope != null, 'No EntityFormScope found in context');
+    return scope!;
+  }
+
+  @override
+  bool updateShouldNotify(EntityFormScope oldWidget) => mode != oldWidget.mode;
+}
+
+/// A form field wrapper that can be marked as create-only.
+///
+/// When [createOnly] is true, the field will be disabled in edit mode.
+/// Shows a lock icon and tooltip to indicate the field is immutable.
+///
+/// Usage:
+/// ```dart
+/// CreateOnlyField(
+///   createOnly: true,
+///   child: TextFormField(
+///     controller: _nameController,
+///     decoration: InputDecoration(labelText: 'Name'),
+///   ),
+/// )
+/// ```
+class CreateOnlyField extends StatelessWidget {
+  const CreateOnlyField({
+    super.key,
+    required this.child,
+    this.createOnly = true,
+    this.disabledHint = 'This field cannot be changed after creation',
+  });
+
+  final Widget child;
+  final bool createOnly;
+  final String disabledHint;
+
+  @override
+  Widget build(BuildContext context) {
+    final scope = EntityFormScope.maybeOf(context);
+    final isEditing = scope?.isEditing ?? false;
+    final shouldDisable = createOnly && isEditing;
+
+    if (!shouldDisable) {
+      return child;
+    }
+
+    return Tooltip(
+      message: disabledHint,
+      child: AbsorbPointer(
+        absorbing: true,
+        child: Opacity(
+          opacity: 0.6,
+          child: Stack(
+            children: [
+              child,
+              Positioned(
+                right: 8,
+                top: 8,
+                child: Icon(
+                  Icons.lock,
+                  size: 16,
+                  color: Theme.of(context).colorScheme.outline,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/shared/widgets/entity_page.dart

@@ -0,0 +1,272 @@
+import 'package:flutter/material.dart';
+
+/// Reusable scaffold for entity pages (create, view, edit).
+///
+/// Provides consistent layout across all Control Room entity pages:
+/// - AppBar with back button, title, and customizable actions
+/// - Loading, error, and content states
+/// - Consistent padding and styling
+///
+/// Usage:
+/// ```dart
+/// EntityPageScaffold(
+///   title: 'Proxy Host Details',
+///   onBack: () => Navigator.pop(context),
+///   actions: [
+///     IconButton(icon: Icon(Icons.edit), onPressed: onEdit),
+///   ],
+///   child: MyContent(),
+/// )
+/// ```
+class EntityPageScaffold extends StatelessWidget {
+  const EntityPageScaffold({
+    super.key,
+    required this.title,
+    required this.child,
+    this.onBack,
+    this.actions,
+    this.floatingActionButton,
+  });
+
+  final String title;
+  final Widget child;
+  final VoidCallback? onBack;
+  final List<Widget>? actions;
+  final Widget? floatingActionButton;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        leading: onBack != null
+            ? IconButton(
+                icon: const Icon(Icons.arrow_back),
+                onPressed: onBack,
+              )
+            : null,
+        title: Text(title),
+        actions: actions,
+      ),
+      body: child,
+      floatingActionButton: floatingActionButton,
+    );
+  }
+}
+
+/// Async content wrapper with loading, error, and data states.
+///
+/// Use with Riverpod AsyncValue for consistent loading/error handling.
+class EntityAsyncContent<T> extends StatelessWidget {
+  const EntityAsyncContent({
+    super.key,
+    required this.isLoading,
+    required this.error,
+    required this.data,
+    required this.onRetry,
+    required this.builder,
+  });
+
+  final bool isLoading;
+  final Object? error;
+  final T? data;
+  final VoidCallback onRetry;
+  final Widget Function(T data) builder;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    if (isLoading) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    if (error != null) {
+      return Center(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(Icons.error_outline, size: 48, color: colorScheme.error),
+            const SizedBox(height: 16),
+            const Text('Failed to load'),
+            const SizedBox(height: 8),
+            Text(
+              error.toString(),
+              style: TextStyle(color: colorScheme.outline),
+              textAlign: TextAlign.center,
+            ),
+            const SizedBox(height: 16),
+            FilledButton.icon(
+              onPressed: onRetry,
+              icon: const Icon(Icons.refresh),
+              label: const Text('Retry'),
+            ),
+          ],
+        ),
+      );
+    }
+
+    if (data != null) {
+      return builder(data as T);
+    }
+
+    return const SizedBox.shrink();
+  }
+}
+
+/// Section header for entity detail pages.
+///
+/// Consistent styling for grouping related fields.
+class EntitySection extends StatelessWidget {
+  const EntitySection({
+    super.key,
+    required this.title,
+    required this.icon,
+    required this.child,
+    this.trailing,
+  });
+
+  final String title;
+  final IconData icon;
+  final Widget child;
+  final Widget? trailing;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          children: [
+            Icon(icon, size: 20, color: colorScheme.primary),
+            const SizedBox(width: 8),
+            Expanded(
+              child: Text(
+                title,
+                style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                      color: colorScheme.primary,
+                      fontWeight: FontWeight.w600,
+                    ),
+              ),
+            ),
+            if (trailing != null) trailing!,
+          ],
+        ),
+        const SizedBox(height: 8),
+        child,
+      ],
+    );
+  }
+}
+
+/// Row displaying a boolean setting with label and indicator.
+class EntitySettingRow extends StatelessWidget {
+  const EntitySettingRow({
+    super.key,
+    required this.label,
+    required this.value,
+    this.subtitle,
+  });
+
+  final String label;
+  final bool value;
+  final String? subtitle;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Expanded(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(label),
+              if (subtitle != null)
+                Text(
+                  subtitle!,
+                  style: TextStyle(
+                    fontSize: 12,
+                    color: Theme.of(context).colorScheme.outline,
+                  ),
+                ),
+            ],
+          ),
+        ),
+        Icon(
+          value ? Icons.check_circle : Icons.cancel,
+          color: value ? Colors.green : Colors.grey,
+          size: 20,
+        ),
+      ],
+    );
+  }
+}
+
+/// Row displaying a key-value pair.
+class EntityInfoRow extends StatelessWidget {
+  const EntityInfoRow({
+    super.key,
+    required this.label,
+    required this.value,
+    this.monospace = false,
+  });
+
+  final String label;
+  final String value;
+  final bool monospace;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        SizedBox(
+          width: 120,
+          child: Text(
+            label,
+            style: TextStyle(color: colorScheme.outline),
+          ),
+        ),
+        Expanded(
+          child: Text(
+            value,
+            style: monospace
+                ? const TextStyle(fontFamily: 'monospace')
+                : null,
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+/// Enum for entity page modes.
+enum EntityPageMode {
+  create,
+  view,
+  edit,
+}
+
+/// Mixin for pages that support view/edit mode toggle.
+///
+/// Provides standard mode management for entity detail pages.
+mixin EntityPageModeMixin<T extends StatefulWidget> on State<T> {
+  EntityPageMode _mode = EntityPageMode.view;
+
+  EntityPageMode get mode => _mode;
+  set mode(EntityPageMode value) => _mode = value;
+
+  bool get isViewing => _mode == EntityPageMode.view;
+  bool get isEditing => _mode == EntityPageMode.edit;
+  bool get isCreating => _mode == EntityPageMode.create;
+
+  void setMode(EntityPageMode newMode) {
+    setState(() => _mode = newMode);
+  }
+
+  void startEditing() => setMode(EntityPageMode.edit);
+  void stopEditing() => setMode(EntityPageMode.view);
+}

lib/shared/widgets/gauge_widget.dart

@@ -0,0 +1,221 @@
+import 'dart:math' as math;
+
+import 'package:flutter/material.dart';
+
+/// A circular gauge widget for displaying percentage values.
+///
+/// Commonly used for system stats like CPU, Memory, Disk usage.
+class GaugeWidget extends StatelessWidget {
+  const GaugeWidget({
+    super.key,
+    required this.value,
+    required this.label,
+    this.size = 120,
+    this.strokeWidth = 10,
+    this.color,
+    this.backgroundColor,
+    this.showPercentage = true,
+    this.icon,
+  });
+
+  /// The value to display (0.0 - 1.0).
+  final double value;
+
+  /// Label displayed below the gauge.
+  final String label;
+
+  /// Size of the gauge widget.
+  final double size;
+
+  /// Width of the gauge arc stroke.
+  final double strokeWidth;
+
+  /// Color of the filled arc. Uses primary color if not specified.
+  final Color? color;
+
+  /// Color of the background arc. Uses surfaceVariant if not specified.
+  final Color? backgroundColor;
+
+  /// Whether to show the percentage text in the center.
+  final bool showPercentage;
+
+  /// Optional icon to show above the percentage.
+  final IconData? icon;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final effectiveColor = color ?? colorScheme.primary;
+    final effectiveBackgroundColor =
+        backgroundColor ?? colorScheme.surfaceContainerHighest;
+
+    // Clamp value between 0 and 1
+    final clampedValue = value.clamp(0.0, 1.0);
+
+    return SizedBox(
+      width: size,
+      height: size + 24, // Extra space for label
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          SizedBox(
+            width: size,
+            height: size,
+            child: CustomPaint(
+              painter: _GaugePainter(
+                value: clampedValue,
+                color: effectiveColor,
+                backgroundColor: effectiveBackgroundColor,
+                strokeWidth: strokeWidth,
+              ),
+              child: Center(
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    if (icon != null) ...[
+                      Icon(
+                        icon,
+                        size: size * 0.2,
+                        color: effectiveColor,
+                      ),
+                      SizedBox(height: size * 0.02),
+                    ],
+                    if (showPercentage)
+                      Text(
+                        '${(clampedValue * 100).round()}%',
+                        style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                              fontWeight: FontWeight.bold,
+                              fontSize: size * 0.18,
+                            ),
+                      ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+          const SizedBox(height: 8),
+          Text(
+            label,
+            style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                  color: colorScheme.onSurfaceVariant,
+                ),
+            textAlign: TextAlign.center,
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _GaugePainter extends CustomPainter {
+  _GaugePainter({
+    required this.value,
+    required this.color,
+    required this.backgroundColor,
+    required this.strokeWidth,
+  });
+
+  final double value;
+  final Color color;
+  final Color backgroundColor;
+  final double strokeWidth;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final center = Offset(size.width / 2, size.height / 2);
+    final radius = (size.width - strokeWidth) / 2;
+
+    // Start from top (-90 degrees) and sweep clockwise
+    const startAngle = -math.pi / 2;
+    const sweepAngle = 2 * math.pi;
+
+    // Background arc
+    final backgroundPaint = Paint()
+      ..color = backgroundColor
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = strokeWidth
+      ..strokeCap = StrokeCap.round;
+
+    canvas.drawArc(
+      Rect.fromCircle(center: center, radius: radius),
+      startAngle,
+      sweepAngle,
+      false,
+      backgroundPaint,
+    );
+
+    // Value arc
+    if (value > 0) {
+      final valuePaint = Paint()
+        ..color = color
+        ..style = PaintingStyle.stroke
+        ..strokeWidth = strokeWidth
+        ..strokeCap = StrokeCap.round;
+
+      canvas.drawArc(
+        Rect.fromCircle(center: center, radius: radius),
+        startAngle,
+        sweepAngle * value,
+        false,
+        valuePaint,
+      );
+    }
+  }
+
+  @override
+  bool shouldRepaint(_GaugePainter oldDelegate) {
+    return oldDelegate.value != value ||
+        oldDelegate.color != color ||
+        oldDelegate.backgroundColor != backgroundColor ||
+        oldDelegate.strokeWidth != strokeWidth;
+  }
+}
+
+/// A row of gauge widgets with consistent sizing.
+class GaugeRow extends StatelessWidget {
+  const GaugeRow({
+    super.key,
+    required this.gauges,
+    this.gaugeSize = 100,
+  });
+
+  final List<GaugeData> gauges;
+  final double gaugeSize;
+
+  @override
+  Widget build(BuildContext context) {
+    return Wrap(
+      spacing: 16,
+      runSpacing: 16,
+      alignment: WrapAlignment.center,
+      children: gauges
+          .map(
+            (data) => GaugeWidget(
+              value: data.value,
+              label: data.label,
+              size: gaugeSize,
+              color: data.color,
+              icon: data.icon,
+            ),
+          )
+          .toList(),
+    );
+  }
+}
+
+/// Data class for gauge configuration.
+class GaugeData {
+  const GaugeData({
+    required this.value,
+    required this.label,
+    this.color,
+    this.icon,
+  });
+
+  final double value;
+  final String label;
+  final Color? color;
+  final IconData? icon;
+}

lib/shared/widgets/icon_picker.dart

@@ -0,0 +1,465 @@
+import 'package:flutter/material.dart';
+
+/// A widget that displays a grid of Material icons for selection.
+///
+/// Shows a button that opens a dialog with available icons.
+class IconPicker extends StatelessWidget {
+  const IconPicker({
+    super.key,
+    required this.selectedIcon,
+    required this.onChanged,
+    this.label = 'Icon',
+  });
+
+  /// Currently selected icon name.
+  final String selectedIcon;
+
+  /// Callback when an icon is selected.
+  final ValueChanged<String> onChanged;
+
+  /// Label for the field.
+  final String label;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          label,
+          style: textTheme.labelMedium?.copyWith(
+            color: colorScheme.onSurfaceVariant,
+          ),
+        ),
+        const SizedBox(height: 8),
+        InkWell(
+          onTap: () => _showIconPicker(context),
+          borderRadius: BorderRadius.circular(8),
+          child: Container(
+            padding: const EdgeInsets.all(12),
+            decoration: BoxDecoration(
+              border: Border.all(color: colorScheme.outline),
+              borderRadius: BorderRadius.circular(8),
+            ),
+            child: Row(
+              children: [
+                Container(
+                  width: 40,
+                  height: 40,
+                  decoration: BoxDecoration(
+                    color: colorScheme.primaryContainer,
+                    borderRadius: BorderRadius.circular(8),
+                  ),
+                  child: Icon(
+                    getIconData(selectedIcon),
+                    color: colorScheme.onPrimaryContainer,
+                  ),
+                ),
+                const SizedBox(width: 12),
+                Expanded(
+                  child: Text(
+                    selectedIcon,
+                    style: textTheme.bodyLarge,
+                  ),
+                ),
+                Icon(
+                  Icons.arrow_drop_down,
+                  color: colorScheme.onSurfaceVariant,
+                ),
+              ],
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Future<void> _showIconPicker(BuildContext context) async {
+    final result = await showDialog<String>(
+      context: context,
+      builder: (context) => IconPickerDialog(
+        selectedIcon: selectedIcon,
+        onSelected: (icon) => Navigator.of(context).pop(icon),
+      ),
+    );
+
+    if (result != null) {
+      onChanged(result);
+    }
+  }
+}
+
+/// Dialog that displays a grid of icons.
+class IconPickerDialog extends StatefulWidget {
+  const IconPickerDialog({
+    super.key,
+    required this.selectedIcon,
+    required this.onSelected,
+  });
+
+  final String selectedIcon;
+  final ValueChanged<String> onSelected;
+
+  @override
+  State<IconPickerDialog> createState() => _IconPickerDialogState();
+}
+
+class _IconPickerDialogState extends State<IconPickerDialog> {
+  String _searchQuery = '';
+
+  List<String> get _filteredIcons {
+    if (_searchQuery.isEmpty) {
+      return availableIcons;
+    }
+    return availableIcons
+        .where((icon) => icon.toLowerCase().contains(_searchQuery.toLowerCase()))
+        .toList();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Dialog(
+      child: Container(
+        width: 400,
+        height: 500,
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              'Select Icon',
+              style: Theme.of(context).textTheme.titleLarge,
+            ),
+            const SizedBox(height: 16),
+            TextField(
+              decoration: const InputDecoration(
+                hintText: 'Search icons...',
+                prefixIcon: Icon(Icons.search),
+                border: OutlineInputBorder(),
+                isDense: true,
+              ),
+              onChanged: (value) => setState(() => _searchQuery = value),
+            ),
+            const SizedBox(height: 16),
+            Expanded(
+              child: GridView.builder(
+                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                  crossAxisCount: 5,
+                  mainAxisSpacing: 8,
+                  crossAxisSpacing: 8,
+                ),
+                itemCount: _filteredIcons.length,
+                itemBuilder: (context, index) {
+                  final iconName = _filteredIcons[index];
+                  final isSelected = iconName == widget.selectedIcon;
+
+                  return InkWell(
+                    onTap: () => widget.onSelected(iconName),
+                    borderRadius: BorderRadius.circular(8),
+                    child: Container(
+                      decoration: BoxDecoration(
+                        color: isSelected
+                            ? colorScheme.primaryContainer
+                            : colorScheme.surfaceContainerHighest,
+                        borderRadius: BorderRadius.circular(8),
+                        border: isSelected
+                            ? Border.all(color: colorScheme.primary, width: 2)
+                            : null,
+                      ),
+                      child: Tooltip(
+                        message: iconName,
+                        child: Icon(
+                          getIconData(iconName),
+                          color: isSelected
+                              ? colorScheme.onPrimaryContainer
+                              : colorScheme.onSurface,
+                        ),
+                      ),
+                    ),
+                  );
+                },
+              ),
+            ),
+            const SizedBox(height: 16),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: [
+                TextButton(
+                  onPressed: () => Navigator.of(context).pop(),
+                  child: const Text('Cancel'),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// Common icons available for selection.
+const List<String> availableIcons = [
+  'home',
+  'settings',
+  'search',
+  'menu',
+  'add',
+  'remove',
+  'close',
+  'check',
+  'edit',
+  'delete',
+  'favorite',
+  'star',
+  'movie',
+  'music_note',
+  'photo',
+  'videocam',
+  'camera',
+  'mic',
+  'volume_up',
+  'play_arrow',
+  'pause',
+  'stop',
+  'skip_next',
+  'skip_previous',
+  'folder',
+  'file_copy',
+  'cloud',
+  'cloud_download',
+  'cloud_upload',
+  'download',
+  'upload',
+  'share',
+  'link',
+  'public',
+  'language',
+  'dns',
+  'storage',
+  'memory',
+  'code',
+  'terminal',
+  'bug_report',
+  'api',
+  'http',
+  'vpn_key',
+  'lock',
+  'lock_open',
+  'security',
+  'verified_user',
+  'admin_panel_settings',
+  'monitor',
+  'monitoring',
+  'analytics',
+  'dashboard',
+  'speed',
+  'timer',
+  'schedule',
+  'calendar_today',
+  'event',
+  'notifications',
+  'email',
+  'message',
+  'chat',
+  'forum',
+  'person',
+  'people',
+  'group',
+  'account_circle',
+  'shopping_cart',
+  'credit_card',
+  'attach_money',
+  'trending_up',
+  'trending_down',
+  'wifi',
+  'bluetooth',
+  'router',
+  'devices',
+  'computer',
+  'laptop',
+  'phone_android',
+  'tablet',
+  'watch',
+  'tv',
+  'games',
+  'videogame_asset',
+  'sports_esports',
+  'local_cafe',
+  'local_dining',
+  'restaurant',
+  'directions_car',
+  'flight',
+  'hotel',
+  'map',
+  'place',
+  'explore',
+  'navigation',
+  'book',
+  'school',
+  'science',
+  'psychology',
+  'work',
+  'business',
+  'apartment',
+  'location_city',
+  'eco',
+  'water_drop',
+  'air',
+  'thermostat',
+  'bolt',
+  'light_mode',
+  'dark_mode',
+  'brightness_4',
+  'palette',
+  'brush',
+  'format_paint',
+  'extension',
+  'widgets',
+  'view_module',
+  'grid_view',
+  'list',
+  'table_chart',
+  'pie_chart',
+  'bar_chart',
+  'show_chart',
+  'donut_large',
+  'disc_full',
+];
+
+/// Convert icon name string to IconData.
+IconData getIconData(String iconName) {
+  const iconMap = <String, IconData>{
+    'home': Icons.home,
+    'settings': Icons.settings,
+    'search': Icons.search,
+    'menu': Icons.menu,
+    'add': Icons.add,
+    'remove': Icons.remove,
+    'close': Icons.close,
+    'check': Icons.check,
+    'edit': Icons.edit,
+    'delete': Icons.delete,
+    'favorite': Icons.favorite,
+    'star': Icons.star,
+    'movie': Icons.movie,
+    'music_note': Icons.music_note,
+    'photo': Icons.photo,
+    'videocam': Icons.videocam,
+    'camera': Icons.camera,
+    'mic': Icons.mic,
+    'volume_up': Icons.volume_up,
+    'play_arrow': Icons.play_arrow,
+    'pause': Icons.pause,
+    'stop': Icons.stop,
+    'skip_next': Icons.skip_next,
+    'skip_previous': Icons.skip_previous,
+    'folder': Icons.folder,
+    'file_copy': Icons.file_copy,
+    'cloud': Icons.cloud,
+    'cloud_download': Icons.cloud_download,
+    'cloud_upload': Icons.cloud_upload,
+    'download': Icons.download,
+    'upload': Icons.upload,
+    'share': Icons.share,
+    'link': Icons.link,
+    'public': Icons.public,
+    'language': Icons.language,
+    'dns': Icons.dns,
+    'storage': Icons.storage,
+    'memory': Icons.memory,
+    'code': Icons.code,
+    'terminal': Icons.terminal,
+    'bug_report': Icons.bug_report,
+    'api': Icons.api,
+    'http': Icons.http,
+    'vpn_key': Icons.vpn_key,
+    'lock': Icons.lock,
+    'lock_open': Icons.lock_open,
+    'security': Icons.security,
+    'verified_user': Icons.verified_user,
+    'admin_panel_settings': Icons.admin_panel_settings,
+    'monitor': Icons.monitor,
+    'monitoring': Icons.monitor_heart,
+    'analytics': Icons.analytics,
+    'dashboard': Icons.dashboard,
+    'speed': Icons.speed,
+    'timer': Icons.timer,
+    'schedule': Icons.schedule,
+    'calendar_today': Icons.calendar_today,
+    'event': Icons.event,
+    'notifications': Icons.notifications,
+    'email': Icons.email,
+    'message': Icons.message,
+    'chat': Icons.chat,
+    'forum': Icons.forum,
+    'person': Icons.person,
+    'people': Icons.people,
+    'group': Icons.group,
+    'account_circle': Icons.account_circle,
+    'shopping_cart': Icons.shopping_cart,
+    'credit_card': Icons.credit_card,
+    'attach_money': Icons.attach_money,
+    'trending_up': Icons.trending_up,
+    'trending_down': Icons.trending_down,
+    'wifi': Icons.wifi,
+    'bluetooth': Icons.bluetooth,
+    'router': Icons.router,
+    'devices': Icons.devices,
+    'computer': Icons.computer,
+    'laptop': Icons.laptop,
+    'phone_android': Icons.phone_android,
+    'tablet': Icons.tablet,
+    'watch': Icons.watch,
+    'tv': Icons.tv,
+    'games': Icons.games,
+    'videogame_asset': Icons.videogame_asset,
+    'sports_esports': Icons.sports_esports,
+    'local_cafe': Icons.local_cafe,
+    'local_dining': Icons.local_dining,
+    'restaurant': Icons.restaurant,
+    'directions_car': Icons.directions_car,
+    'flight': Icons.flight,
+    'hotel': Icons.hotel,
+    'map': Icons.map,
+    'place': Icons.place,
+    'explore': Icons.explore,
+    'navigation': Icons.navigation,
+    'book': Icons.book,
+    'school': Icons.school,
+    'science': Icons.science,
+    'psychology': Icons.psychology,
+    'work': Icons.work,
+    'business': Icons.business,
+    'apartment': Icons.apartment,
+    'location_city': Icons.location_city,
+    'eco': Icons.eco,
+    'water_drop': Icons.water_drop,
+    'air': Icons.air,
+    'thermostat': Icons.thermostat,
+    'bolt': Icons.bolt,
+    'light_mode': Icons.light_mode,
+    'dark_mode': Icons.dark_mode,
+    'brightness_4': Icons.brightness_4,
+    'palette': Icons.palette,
+    'brush': Icons.brush,
+    'format_paint': Icons.format_paint,
+    'extension': Icons.extension,
+    'widgets': Icons.widgets,
+    'view_module': Icons.view_module,
+    'grid_view': Icons.grid_view,
+    'list': Icons.list,
+    'table_chart': Icons.table_chart,
+    'pie_chart': Icons.pie_chart,
+    'bar_chart': Icons.bar_chart,
+    'show_chart': Icons.show_chart,
+    'donut_large': Icons.donut_large,
+    'disc_full': Icons.disc_full,
+  };
+
+  return iconMap[iconName] ?? Icons.help_outline;
+}

lib/shared/widgets/weather_widget.dart

@@ -0,0 +1,258 @@
+import 'package:flutter/material.dart';
+
+/// Weather widget displaying current conditions.
+///
+/// Currently uses mock data. Will be connected to weather API in future.
+class WeatherWidget extends StatelessWidget {
+  const WeatherWidget({
+    super.key,
+    this.data,
+    this.compact = false,
+  });
+
+  /// Weather data to display. Uses mock data if null.
+  final WeatherData? data;
+
+  /// Whether to use compact layout.
+  final bool compact;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final weather = data ?? WeatherData.mock();
+
+    if (compact) {
+      return _buildCompact(context, colorScheme, weather);
+    }
+
+    return Card(
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            // Header
+            Row(
+              children: [
+                Icon(
+                  Icons.location_on,
+                  size: 16,
+                  color: colorScheme.onSurfaceVariant,
+                ),
+                const SizedBox(width: 4),
+                Expanded(
+                  child: Text(
+                    weather.location,
+                    style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                          color: colorScheme.onSurfaceVariant,
+                        ),
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                  ),
+                ),
+              ],
+            ),
+            const SizedBox(height: 12),
+
+            // Main weather display
+            Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Icon(
+                  weather.icon,
+                  size: 48,
+                  color: weather.iconColor ?? colorScheme.primary,
+                ),
+                const SizedBox(width: 12),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        '${weather.temperature.round()}°${weather.unit.symbol}',
+                        style:
+                            Theme.of(context).textTheme.headlineMedium?.copyWith(
+                                  fontWeight: FontWeight.bold,
+                                ),
+                      ),
+                      Text(
+                        weather.condition,
+                        style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                              color: colorScheme.onSurfaceVariant,
+                            ),
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+
+            // Details
+            if (weather.humidity != null || weather.windSpeed != null) ...[
+              const SizedBox(height: 12),
+              const Divider(height: 1),
+              const SizedBox(height: 12),
+              Row(
+                children: [
+                  if (weather.humidity != null)
+                    Expanded(
+                      child: _DetailItem(
+                        icon: Icons.water_drop_outlined,
+                        label: 'Humidity',
+                        value: '${weather.humidity}%',
+                      ),
+                    ),
+                  if (weather.windSpeed != null)
+                    Expanded(
+                      child: _DetailItem(
+                        icon: Icons.air,
+                        label: 'Wind',
+                        value:
+                            '${weather.windSpeed!.round()} ${weather.windUnit}',
+                      ),
+                    ),
+                  if (weather.feelsLike != null)
+                    Expanded(
+                      child: _DetailItem(
+                        icon: Icons.thermostat,
+                        label: 'Feels like',
+                        value:
+                            '${weather.feelsLike!.round()}°${weather.unit.symbol}',
+                      ),
+                    ),
+                ],
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildCompact(
+    BuildContext context,
+    ColorScheme colorScheme,
+    WeatherData weather,
+  ) {
+    return Card(
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(
+              weather.icon,
+              size: 24,
+              color: weather.iconColor ?? colorScheme.primary,
+            ),
+            const SizedBox(width: 8),
+            Text(
+              '${weather.temperature.round()}°${weather.unit.symbol}',
+              style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                    fontWeight: FontWeight.bold,
+                  ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _DetailItem extends StatelessWidget {
+  const _DetailItem({
+    required this.icon,
+    required this.label,
+    required this.value,
+  });
+
+  final IconData icon;
+  final String label;
+  final String value;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Icon(
+          icon,
+          size: 16,
+          color: colorScheme.onSurfaceVariant,
+        ),
+        const SizedBox(width: 4),
+        Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              value,
+              style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                    fontWeight: FontWeight.w600,
+                  ),
+            ),
+            Text(
+              label,
+              style: Theme.of(context).textTheme.labelSmall?.copyWith(
+                    color: colorScheme.outline,
+                    fontSize: 10,
+                  ),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}
+
+/// Temperature unit for weather display.
+enum TemperatureUnit {
+  celsius('C'),
+  fahrenheit('F');
+
+  const TemperatureUnit(this.symbol);
+  final String symbol;
+}
+
+/// Weather data model.
+class WeatherData {
+  const WeatherData({
+    required this.location,
+    required this.temperature,
+    required this.condition,
+    required this.icon,
+    this.unit = TemperatureUnit.celsius,
+    this.humidity,
+    this.windSpeed,
+    this.windUnit = 'km/h',
+    this.feelsLike,
+    this.iconColor,
+  });
+
+  final String location;
+  final double temperature;
+  final String condition;
+  final IconData icon;
+  final TemperatureUnit unit;
+  final int? humidity;
+  final double? windSpeed;
+  final String windUnit;
+  final double? feelsLike;
+  final Color? iconColor;
+
+  /// Mock weather data for development.
+  factory WeatherData.mock() {
+    return const WeatherData(
+      location: 'Rotterdam, NL',
+      temperature: 8,
+      condition: 'Partly Cloudy',
+      icon: Icons.cloud,
+      humidity: 72,
+      windSpeed: 18,
+      feelsLike: 5,
+      iconColor: Colors.blueGrey,
+    );
+  }
+}

lib/shared/widgets/widgets.dart

@@ -0,0 +1,7 @@
+/// Shared widgets for Tatlock UI.
+library;
+
+export 'air_quality_widget.dart';
+export 'gauge_widget.dart';
+export 'icon_picker.dart';
+export 'weather_widget.dart';

lib/version.g.dart

@@ -7,7 +7,7 @@ class AppVersion {
 
   static const String name = 'tatlock_ui';
   static const String description = 'Tatlock - a Home Lab AI';
-  static const String version = '0.3.0';
+  static const String version = '0.3.3';
   static const int buildNumber = 1;
-  static const String fullVersion = '0.3.0+1';
+  static const String fullVersion = '0.3.3+1';
 }

nginx.conf

@@ -0,0 +1,87 @@
+worker_processes auto;
+error_log /var/log/nginx/error.log warn;
+pid /var/run/nginx.pid;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
+                    '$status $body_bytes_sent "$http_referer" '
+                    '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log /var/log/nginx/access.log main;
+
+    sendfile on;
+    tcp_nopush on;
+    tcp_nodelay on;
+    keepalive_timeout 65;
+    types_hash_max_size 2048;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_min_length 1000;
+    gzip_types
+        text/plain
+        text/css
+        text/javascript
+        application/javascript
+        application/json
+        application/x-javascript
+        application/xml
+        application/xml+rss
+        image/svg+xml
+        font/woff
+        font/woff2;
+
+    server {
+        listen 80;
+        server_name _;
+        root /usr/share/nginx/html;
+        index index.html;
+
+        # Security headers
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        add_header X-Content-Type-Options "nosniff" always;
+        add_header X-XSS-Protection "1; mode=block" always;
+
+        # SPA routing: all routes fall back to index.html
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+
+        # No cache for index.html (ensures updates are picked up)
+        location = /index.html {
+            add_header Cache-Control "no-cache, no-store, must-revalidate";
+            add_header Pragma "no-cache";
+            add_header Expires "0";
+        }
+
+        # Long cache for Flutter assets (content-hash naming ensures freshness)
+        location ~* \.(js|css|woff|woff2|ttf|eot|ico|png|jpg|jpeg|gif|svg|webp)$ {
+            expires 1y;
+            add_header Cache-Control "public, immutable";
+            access_log off;
+        }
+
+        # Cache manifest and version files briefly
+        location ~* \.(json|webmanifest)$ {
+            expires 1h;
+            add_header Cache-Control "public";
+        }
+
+        # Health check endpoint
+        location /health {
+            access_log off;
+            return 200 "OK";
+            add_header Content-Type text/plain;
+        }
+    }
+}

pubspec.yaml

@@ -16,7 +16,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
 # In Windows, build-name is used as the major, minor, and patch parts
 # of the product and file versions while build-number is used as the build suffix.
-version: 0.3.0+1
+version: 0.3.3+1
 
 environment:
   sdk: ^3.10.4
@@ -32,20 +32,20 @@ dependencies:
     sdk: flutter
 
   # State Management
-  flutter_riverpod: ^2.6.1
-  riverpod_annotation: ^2.6.1
-  hooks_riverpod: ^2.6.1
-  flutter_hooks: ^0.20.5
+  flutter_riverpod: ^3.0.0
+  riverpod_annotation: ^4.0.0
+  hooks_riverpod: ^3.0.0
+  flutter_hooks: ^0.21.0
 
   # Code Generation Support
-  freezed_annotation: ^2.4.4
+  freezed_annotation: ^3.1.0
   json_annotation: ^4.9.0
 
   # Networking
   dio: ^5.7.0
 
   # Routing
-  go_router: ^14.6.2
+  go_router: ^17.0.1
 
   # Storage
   shared_preferences: ^2.3.3
@@ -54,7 +54,7 @@ dependencies:
   flex_color_scheme: ^8.1.0
   flutter_adaptive_scaffold: ^0.3.1
   flutter_markdown: ^0.7.4
-  fl_chart: ^0.69.2
+  fl_chart: ^1.1.1
 
   # Icons
   cupertino_icons: ^1.0.8
@@ -70,19 +70,19 @@ dev_dependencies:
     sdk: flutter
 
   # Linting
-  flutter_lints: ^5.0.0
+  flutter_lints: ^6.0.0
 
   # Code Generation
   build_runner: ^2.4.13
-  freezed: ^2.5.7
+  freezed: ^3.2.3
   json_serializable: ^6.8.0
-  riverpod_generator: ^2.6.3
+  riverpod_generator: ^4.0.0
 
   # Testing
   mocktail: ^1.0.4
 
   # Build tools
-  build: ^2.4.0
+  build: ^4.0.3
   yaml: ^3.1.0
 
 # For information on the generic Dart part of this file, see the

test/features/control_room/containers/data/models/container_model_test.dart

@@ -0,0 +1,458 @@
+import 'package:flutter_test/flutter_test.dart';
+import 'package:tatlock_ui/features/control_room/containers/data/models/container_model.dart';
+import 'package:tatlock_ui/features/control_room/containers/domain/entities/container.dart';
+
+void main() {
+  group('ContainerModel', () {
+    group('fromJson', () {
+      test('deserializes minimal container', () {
+        final json = {
+          'Id': 'abc123def456',
+          'Names': ['/my-container'],
+          'Image': 'nginx:latest',
+          'State': 'running',
+          'Status': 'Up 2 hours',
+        };
+
+        final model = ContainerModel.fromJson(json);
+
+        expect(model.id, equals('abc123def456'));
+        expect(model.names, equals(['/my-container']));
+        expect(model.image, equals('nginx:latest'));
+        expect(model.state, equals('running'));
+        expect(model.status, equals('Up 2 hours'));
+      });
+
+      test('deserializes full container with all fields', () {
+        final json = {
+          'Id': 'abc123def456789xyz',
+          'Names': ['/my-container', '/alias'],
+          'Image': 'nginx:latest',
+          'State': 'running',
+          'Status': 'Up 2 hours',
+          'Labels': {
+            'com.docker.compose.project': 'mystack',
+            'maintainer': 'test@example.com',
+          },
+          'Ports': [
+            {'PrivatePort': 80, 'PublicPort': 8080, 'Type': 'tcp'},
+          ],
+          'Mounts': [
+            {
+              'Type': 'bind',
+              'Source': '/host/path',
+              'Destination': '/container/path',
+              'Mode': 'rw',
+              'RW': true,
+            },
+          ],
+          'NetworkSettings': {
+            'Networks': {'bridge': {}, 'custom': {}},
+          },
+          'Created': 1704067200, // 2024-01-01 00:00:00 UTC
+          'SizeRw': 1024,
+          'SizeRootFs': 2048,
+        };
+
+        final model = ContainerModel.fromJson(json);
+
+        expect(model.labels['com.docker.compose.project'], equals('mystack'));
+        expect(model.ports.length, equals(1));
+        expect(model.mounts.length, equals(1));
+        expect(model.networkSettings?.networks.length, equals(2));
+        expect(model.created, equals(1704067200));
+        expect(model.sizeRw, equals(1024));
+        expect(model.sizeRootFs, equals(2048));
+      });
+
+      test('handles empty lists and maps', () {
+        final json = {
+          'Id': 'abc123',
+          'Names': ['/container'],
+          'Image': 'alpine',
+          'State': 'exited',
+          'Status': 'Exited (0)',
+          'Labels': <String, String>{},
+          'Ports': <Map<String, dynamic>>[],
+          'Mounts': <Map<String, dynamic>>[],
+        };
+
+        final model = ContainerModel.fromJson(json);
+
+        expect(model.labels, isEmpty);
+        expect(model.ports, isEmpty);
+        expect(model.mounts, isEmpty);
+      });
+    });
+
+    group('toEntity', () {
+      test('converts to entity with truncated ID', () {
+        final model = ContainerModel(
+          id: 'abc123def456789xyz',
+          names: ['/my-container'],
+          image: 'nginx:latest',
+          state: 'running',
+          status: 'Up 2 hours',
+        );
+
+        final entity = model.toEntity();
+
+        expect(entity.id, equals('abc123def456')); // Truncated to 12 chars
+        expect(entity.fullId, equals('abc123def456789xyz'));
+      });
+
+      test('strips leading slash from container name', () {
+        final model = ContainerModel(
+          id: 'abc123def456',
+          names: ['/my-container'],
+          image: 'nginx:latest',
+          state: 'running',
+          status: 'Up 2 hours',
+        );
+
+        final entity = model.toEntity();
+
+        expect(entity.name, equals('my-container'));
+      });
+
+      test('uses ID as name when names list is empty', () {
+        final model = ContainerModel(
+          id: 'abc123def456',
+          names: [],
+          image: 'nginx:latest',
+          state: 'running',
+          status: 'Up 2 hours',
+        );
+
+        final entity = model.toEntity();
+
+        expect(entity.name, equals('abc123def456'));
+      });
+
+      test('extracts stack name from compose labels', () {
+        final model = ContainerModel(
+          id: 'abc123def456',
+          names: ['/container'],
+          image: 'nginx',
+          state: 'running',
+          status: 'Up',
+          labels: {'com.docker.compose.project': 'my-stack'},
+        );
+
+        final entity = model.toEntity();
+
+        expect(entity.stackName, equals('my-stack'));
+        expect(entity.stackId, equals('my-stack'));
+      });
+
+      test('handles missing stack labels', () {
+        final model = ContainerModel(
+          id: 'abc123def456',
+          names: ['/container'],
+          image: 'nginx',
+          state: 'running',
+          status: 'Up',
+          labels: {},
+        );
+
+        final entity = model.toEntity();
+
+        expect(entity.stackName, isNull);
+        expect(entity.stackId, isNull);
+      });
+
+      test('converts created timestamp to DateTime', () {
+        final model = ContainerModel(
+          id: 'abc123def456',
+          names: ['/container'],
+          image: 'nginx',
+          state: 'running',
+          status: 'Up',
+          created: 1704067200, // 2024-01-01 00:00:00 UTC
+        );
+
+        final entity = model.toEntity();
+
+        expect(entity.createdAt, isNotNull);
+        expect(entity.createdAt!.year, equals(2024));
+        expect(entity.createdAt!.month, equals(1));
+        expect(entity.createdAt!.day, equals(1));
+      });
+
+      test('handles null created timestamp', () {
+        final model = ContainerModel(
+          id: 'abc123def456',
+          names: ['/container'],
+          image: 'nginx',
+          state: 'running',
+          status: 'Up',
+          created: null,
+        );
+
+        final entity = model.toEntity();
+
+        expect(entity.createdAt, isNull);
+      });
+
+      test('extracts networks from network settings', () {
+        final model = ContainerModel(
+          id: 'abc123def456',
+          names: ['/container'],
+          image: 'nginx',
+          state: 'running',
+          status: 'Up',
+          networkSettings: const NetworkSettingsModel(
+            networks: {'bridge': {}, 'custom-network': {}},
+          ),
+        );
+
+        final entity = model.toEntity();
+
+        expect(entity.networks, containsAll(['bridge', 'custom-network']));
+      });
+
+      test('handles null network settings', () {
+        final model = ContainerModel(
+          id: 'abc123def456',
+          names: ['/container'],
+          image: 'nginx',
+          state: 'running',
+          status: 'Up',
+          networkSettings: null,
+        );
+
+        final entity = model.toEntity();
+
+        expect(entity.networks, isEmpty);
+      });
+    });
+
+    group('_parseState', () {
+      final testCases = {
+        'created': ContainerState.created,
+        'Created': ContainerState.created,
+        'CREATED': ContainerState.created,
+        'running': ContainerState.running,
+        'Running': ContainerState.running,
+        'RUNNING': ContainerState.running,
+        'paused': ContainerState.paused,
+        'Paused': ContainerState.paused,
+        'restarting': ContainerState.restarting,
+        'Restarting': ContainerState.restarting,
+        'removing': ContainerState.removing,
+        'Removing': ContainerState.removing,
+        'exited': ContainerState.exited,
+        'Exited': ContainerState.exited,
+        'dead': ContainerState.dead,
+        'Dead': ContainerState.dead,
+        'unknown': ContainerState.exited, // Unknown defaults to exited
+        '': ContainerState.exited, // Empty defaults to exited
+        'invalid': ContainerState.exited, // Invalid defaults to exited
+      };
+
+      testCases.forEach((input, expected) {
+        test('parses "$input" to ${expected.name}', () {
+          final model = ContainerModel(
+            id: 'abc123def456',
+            names: ['/container'],
+            image: 'nginx',
+            state: input,
+            status: 'Status',
+          );
+
+          final entity = model.toEntity();
+
+          expect(entity.state, equals(expected));
+        });
+      });
+    });
+  });
+
+  group('PortModel', () {
+    group('fromJson', () {
+      test('deserializes port with all fields', () {
+        final json = {
+          'IP': '0.0.0.0',
+          'PrivatePort': 80,
+          'PublicPort': 8080,
+          'Type': 'tcp',
+        };
+
+        final model = PortModel.fromJson(json);
+
+        expect(model.ip, equals('0.0.0.0'));
+        expect(model.privatePort, equals(80));
+        expect(model.publicPort, equals(8080));
+        expect(model.type, equals('tcp'));
+      });
+
+      test('deserializes port with minimal fields', () {
+        final json = {
+          'PrivatePort': 443,
+        };
+
+        final model = PortModel.fromJson(json);
+
+        expect(model.ip, isNull);
+        expect(model.privatePort, equals(443));
+        expect(model.publicPort, isNull);
+        expect(model.type, equals('tcp')); // Default
+      });
+
+      test('handles UDP type', () {
+        final json = {
+          'PrivatePort': 53,
+          'Type': 'udp',
+        };
+
+        final model = PortModel.fromJson(json);
+
+        expect(model.type, equals('udp'));
+      });
+    });
+
+    group('toEntity', () {
+      test('converts to PortMapping entity', () {
+        const model = PortModel(
+          ip: '127.0.0.1',
+          privatePort: 80,
+          publicPort: 8080,
+          type: 'tcp',
+        );
+
+        final entity = model.toEntity();
+
+        expect(entity.hostIp, equals('127.0.0.1'));
+        expect(entity.hostPort, equals(8080));
+        expect(entity.containerPort, equals(80));
+        expect(entity.protocol, equals('tcp'));
+      });
+
+      test('handles null public port', () {
+        const model = PortModel(
+          privatePort: 80,
+          publicPort: null,
+        );
+
+        final entity = model.toEntity();
+
+        expect(entity.hostPort, isNull);
+        expect(entity.containerPort, equals(80));
+      });
+    });
+  });
+
+  group('MountModel', () {
+    group('fromJson', () {
+      test('deserializes bind mount', () {
+        final json = {
+          'Type': 'bind',
+          'Source': '/host/path',
+          'Destination': '/container/path',
+          'Mode': 'rw',
+          'RW': true,
+        };
+
+        final model = MountModel.fromJson(json);
+
+        expect(model.type, equals('bind'));
+        expect(model.source, equals('/host/path'));
+        expect(model.destination, equals('/container/path'));
+        expect(model.mode, equals('rw'));
+        expect(model.rw, isTrue);
+      });
+
+      test('deserializes volume mount', () {
+        final json = {
+          'Type': 'volume',
+          'Source': 'my-volume',
+          'Destination': '/data',
+          'Mode': 'ro',
+          'RW': false,
+        };
+
+        final model = MountModel.fromJson(json);
+
+        expect(model.type, equals('volume'));
+        expect(model.rw, isFalse);
+      });
+
+      test('uses defaults for missing fields', () {
+        final json = {
+          'Type': 'bind',
+          'Source': '/src',
+          'Destination': '/dst',
+        };
+
+        final model = MountModel.fromJson(json);
+
+        expect(model.mode, equals('rw'));
+        expect(model.rw, isTrue);
+      });
+    });
+
+    group('toEntity', () {
+      test('converts read-write mount to entity', () {
+        const model = MountModel(
+          type: 'bind',
+          source: '/host',
+          destination: '/container',
+          rw: true,
+        );
+
+        final entity = model.toEntity();
+
+        expect(entity.type, equals('bind'));
+        expect(entity.source, equals('/host'));
+        expect(entity.destination, equals('/container'));
+        expect(entity.mode, equals('rw'));
+      });
+
+      test('converts read-only mount to entity', () {
+        const model = MountModel(
+          type: 'volume',
+          source: 'vol',
+          destination: '/data',
+          rw: false,
+        );
+
+        final entity = model.toEntity();
+
+        expect(entity.mode, equals('ro'));
+      });
+    });
+  });
+
+  group('NetworkSettingsModel', () {
+    test('deserializes network settings', () {
+      final json = {
+        'Networks': {
+          'bridge': {'IPAddress': '172.17.0.2'},
+          'custom': {'IPAddress': '10.0.0.5'},
+        },
+      };
+
+      final model = NetworkSettingsModel.fromJson(json);
+
+      expect(model.networks.keys, containsAll(['bridge', 'custom']));
+    });
+
+    test('handles empty networks', () {
+      final json = {
+        'Networks': <String, dynamic>{},
+      };
+
+      final model = NetworkSettingsModel.fromJson(json);
+
+      expect(model.networks, isEmpty);
+    });
+
+    test('uses empty map as default', () {
+      final json = <String, dynamic>{};
+
+      final model = NetworkSettingsModel.fromJson(json);
+
+      expect(model.networks, isEmpty);
+    });
+  });
+}

test/features/control_room/npm/data/models/proxy_host_model_test.dart

@@ -0,0 +1,335 @@
+import 'package:flutter_test/flutter_test.dart';
+import 'package:tatlock_ui/features/control_room/npm/data/models/proxy_host_model.dart';
+
+void main() {
+  group('NullableIntOrBoolConverter', () {
+    const converter = NullableIntOrBoolConverter();
+
+    group('fromJson', () {
+      test('returns null for null input', () {
+        expect(converter.fromJson(null), isNull);
+      });
+
+      test('returns null for false input', () {
+        expect(converter.fromJson(false), isNull);
+      });
+
+      test('returns null for true input (treats as invalid)', () {
+        // true is not a valid ID, so we return null
+        expect(converter.fromJson(true), isNull);
+      });
+
+      test('returns int for int input', () {
+        expect(converter.fromJson(42), equals(42));
+      });
+
+      test('returns int for positive int', () {
+        expect(converter.fromJson(1), equals(1));
+      });
+
+      test('returns int for zero', () {
+        expect(converter.fromJson(0), equals(0));
+      });
+
+      test('converts double to int', () {
+        expect(converter.fromJson(42.0), equals(42));
+      });
+
+      test('converts double with decimals to int (truncates)', () {
+        expect(converter.fromJson(42.9), equals(42));
+      });
+
+      test('returns null for string input', () {
+        expect(converter.fromJson('42'), isNull);
+      });
+
+      test('returns null for empty string', () {
+        expect(converter.fromJson(''), isNull);
+      });
+    });
+
+    group('toJson', () {
+      test('returns null for null input', () {
+        expect(converter.toJson(null), isNull);
+      });
+
+      test('returns int for int input', () {
+        expect(converter.toJson(42), equals(42));
+      });
+
+      test('returns zero for zero input', () {
+        expect(converter.toJson(0), equals(0));
+      });
+    });
+  });
+
+  group('IntOrBoolConverter', () {
+    const converter = IntOrBoolConverter();
+
+    group('fromJson', () {
+      test('returns 0 for null input', () {
+        expect(converter.fromJson(null), equals(0));
+      });
+
+      test('returns 0 for false input', () {
+        expect(converter.fromJson(false), equals(0));
+      });
+
+      test('returns 1 for true input', () {
+        expect(converter.fromJson(true), equals(1));
+      });
+
+      test('returns int for int input', () {
+        expect(converter.fromJson(42), equals(42));
+      });
+
+      test('returns 0 for zero input', () {
+        expect(converter.fromJson(0), equals(0));
+      });
+
+      test('returns 1 for one input', () {
+        expect(converter.fromJson(1), equals(1));
+      });
+
+      test('converts double to int', () {
+        expect(converter.fromJson(42.0), equals(42));
+      });
+
+      test('converts double with decimals to int (truncates)', () {
+        expect(converter.fromJson(42.9), equals(42));
+      });
+
+      test('returns 0 for string input', () {
+        expect(converter.fromJson('42'), equals(0));
+      });
+
+      test('returns 0 for empty string', () {
+        expect(converter.fromJson(''), equals(0));
+      });
+
+      test('returns 0 for invalid types', () {
+        expect(converter.fromJson([1, 2, 3]), equals(0));
+        expect(converter.fromJson({'key': 'value'}), equals(0));
+      });
+    });
+
+    group('toJson', () {
+      test('returns int for int input', () {
+        expect(converter.toJson(42), equals(42));
+      });
+
+      test('returns 0 for zero input', () {
+        expect(converter.toJson(0), equals(0));
+      });
+
+      test('returns 1 for one input', () {
+        expect(converter.toJson(1), equals(1));
+      });
+    });
+  });
+
+  group('ProxyHostModel JSON serialization', () {
+    test('deserializes with boolean certificate_id (false)', () {
+      final json = {
+        'id': 1,
+        'domain_names': ['example.com'],
+        'forward_scheme': 'http',
+        'forward_host': 'localhost',
+        'forward_port': 8080,
+        'certificate_id': false, // NPM returns false for no certificate
+      };
+
+      final model = ProxyHostModel.fromJson(json);
+
+      expect(model.certificateId, isNull);
+    });
+
+    test('deserializes with int certificate_id', () {
+      final json = {
+        'id': 1,
+        'domain_names': ['example.com'],
+        'forward_scheme': 'http',
+        'forward_host': 'localhost',
+        'forward_port': 8080,
+        'certificate_id': 42,
+      };
+
+      final model = ProxyHostModel.fromJson(json);
+
+      expect(model.certificateId, equals(42));
+    });
+
+    test('deserializes with null certificate_id', () {
+      final json = {
+        'id': 1,
+        'domain_names': ['example.com'],
+        'forward_scheme': 'http',
+        'forward_host': 'localhost',
+        'forward_port': 8080,
+        'certificate_id': null,
+      };
+
+      final model = ProxyHostModel.fromJson(json);
+
+      expect(model.certificateId, isNull);
+    });
+
+    test('deserializes with boolean http2_support (true)', () {
+      final json = {
+        'id': 1,
+        'domain_names': ['example.com'],
+        'forward_scheme': 'http',
+        'forward_host': 'localhost',
+        'forward_port': 8080,
+        'http2_support': true, // NPM can return boolean
+      };
+
+      final model = ProxyHostModel.fromJson(json);
+
+      expect(model.http2Support, equals(1));
+    });
+
+    test('deserializes with boolean http2_support (false)', () {
+      final json = {
+        'id': 1,
+        'domain_names': ['example.com'],
+        'forward_scheme': 'http',
+        'forward_host': 'localhost',
+        'forward_port': 8080,
+        'http2_support': false,
+      };
+
+      final model = ProxyHostModel.fromJson(json);
+
+      expect(model.http2Support, equals(0));
+    });
+
+    test('deserializes with int http2_support', () {
+      final json = {
+        'id': 1,
+        'domain_names': ['example.com'],
+        'forward_scheme': 'http',
+        'forward_host': 'localhost',
+        'forward_port': 8080,
+        'http2_support': 1,
+      };
+
+      final model = ProxyHostModel.fromJson(json);
+
+      expect(model.http2Support, equals(1));
+    });
+
+    test('deserializes with all boolean flags', () {
+      final json = {
+        'id': 1,
+        'domain_names': ['example.com'],
+        'forward_scheme': 'https',
+        'forward_host': 'localhost',
+        'forward_port': 443,
+        'ssl_forced': true,
+        'certificate_id': false,
+        'enabled': true,
+        'http2_support': true,
+        'hsts_enabled': false,
+        'access_list_id': false,
+        'caching_enabled': true,
+        'block_exploits': true,
+        'allow_websocket_upgrade': false,
+      };
+
+      final model = ProxyHostModel.fromJson(json);
+
+      expect(model.sslForced, isTrue);
+      expect(model.certificateId, isNull);
+      expect(model.enabled, equals(1));
+      expect(model.http2Support, equals(1));
+      expect(model.hstsEnabled, equals(0));
+      expect(model.accessListId, isNull);
+      expect(model.cachingEnabled, equals(1));
+      expect(model.blockExploits, equals(1));
+      expect(model.allowWebsocketUpgrade, equals(0));
+    });
+
+    test('deserializes with all int flags', () {
+      final json = {
+        'id': 1,
+        'domain_names': ['example.com'],
+        'forward_scheme': 'https',
+        'forward_host': 'localhost',
+        'forward_port': 443,
+        'ssl_forced': false,
+        'certificate_id': 5,
+        'enabled': 1,
+        'http2_support': 1,
+        'hsts_enabled': 0,
+        'access_list_id': 3,
+        'caching_enabled': 1,
+        'block_exploits': 1,
+        'allow_websocket_upgrade': 0,
+      };
+
+      final model = ProxyHostModel.fromJson(json);
+
+      expect(model.sslForced, isFalse);
+      expect(model.certificateId, equals(5));
+      expect(model.enabled, equals(1));
+      expect(model.http2Support, equals(1));
+      expect(model.hstsEnabled, equals(0));
+      expect(model.accessListId, equals(3));
+      expect(model.cachingEnabled, equals(1));
+      expect(model.blockExploits, equals(1));
+      expect(model.allowWebsocketUpgrade, equals(0));
+    });
+
+    test('toEntity converts correctly', () {
+      final model = ProxyHostModel(
+        id: 1,
+        domainNames: ['example.com', 'www.example.com'],
+        forwardScheme: 'https',
+        forwardHost: 'backend',
+        forwardPort: 8080,
+        sslForced: true,
+        certificateId: 5,
+        enabled: 1,
+        http2Support: 1,
+        hstsEnabled: 1,
+        cachingEnabled: 0,
+        blockExploits: 1,
+        allowWebsocketUpgrade: 1,
+      );
+
+      final entity = model.toEntity();
+
+      expect(entity.id, equals(1));
+      expect(entity.domainNames, equals(['example.com', 'www.example.com']));
+      expect(entity.forwardScheme, equals('https'));
+      expect(entity.forwardHost, equals('backend'));
+      expect(entity.forwardPort, equals(8080));
+      expect(entity.forceSSL, isTrue);
+      expect(entity.sslEnabled, isTrue); // certificateId > 0
+      expect(entity.certificateId, equals(5));
+      expect(entity.enabled, isTrue);
+      expect(entity.http2Support, isTrue);
+      expect(entity.hstsEnabled, isTrue);
+      expect(entity.cacheAssets, isFalse);
+      expect(entity.blockExploits, isTrue);
+      expect(entity.websocketSupport, isTrue);
+    });
+
+    test('toEntity handles null certificateId correctly', () {
+      final model = ProxyHostModel(
+        id: 1,
+        domainNames: ['example.com'],
+        forwardScheme: 'http',
+        forwardHost: 'backend',
+        forwardPort: 80,
+        certificateId: null,
+      );
+
+      final entity = model.toEntity();
+
+      expect(entity.sslEnabled, isFalse);
+      expect(entity.certificateId, isNull);
+    });
+  });
+}

test/features/control_room/stacks/data/models/stack_model_test.dart

@@ -0,0 +1,395 @@
+import 'package:flutter_test/flutter_test.dart';
+import 'package:tatlock_ui/features/control_room/stacks/data/models/stack_model.dart';
+import 'package:tatlock_ui/features/control_room/stacks/domain/entities/stack.dart';
+
+void main() {
+  group('StackModel', () {
+    group('fromJson', () {
+      test('deserializes minimal stack', () {
+        final json = {
+          'id': 'stack-123',
+          'name': 'my-stack',
+        };
+
+        final model = StackModel.fromJson(json);
+
+        expect(model.id, equals('stack-123'));
+        expect(model.name, equals('my-stack'));
+        expect(model.containerCount, equals(0)); // Default
+        expect(model.runningCount, equals(0)); // Default
+      });
+
+      test('deserializes full stack with all fields', () {
+        final json = {
+          'id': 'stack-456',
+          'name': 'production-stack',
+          'type': 'compose',
+          'status': 'active',
+          'container_count': 5,
+          'running_count': 5,
+          'compose_file': '/path/to/docker-compose.yml',
+          'environment': 'production',
+          'created_at': '2024-01-15T10:30:00Z',
+          'updated_at': '2024-01-20T15:45:00Z',
+        };
+
+        final model = StackModel.fromJson(json);
+
+        expect(model.id, equals('stack-456'));
+        expect(model.name, equals('production-stack'));
+        expect(model.typeString, equals('compose'));
+        expect(model.statusString, equals('active'));
+        expect(model.containerCount, equals(5));
+        expect(model.runningCount, equals(5));
+        expect(model.composeFile, equals('/path/to/docker-compose.yml'));
+        expect(model.environment, equals('production'));
+        expect(model.createdAt, equals('2024-01-15T10:30:00Z'));
+        expect(model.updatedAt, equals('2024-01-20T15:45:00Z'));
+      });
+
+      test('handles null optional fields', () {
+        final json = {
+          'id': 'stack-789',
+          'name': 'minimal-stack',
+          'type': null,
+          'status': null,
+          'compose_file': null,
+          'environment': null,
+          'created_at': null,
+          'updated_at': null,
+        };
+
+        final model = StackModel.fromJson(json);
+
+        expect(model.typeString, isNull);
+        expect(model.statusString, isNull);
+        expect(model.composeFile, isNull);
+        expect(model.environment, isNull);
+        expect(model.createdAt, isNull);
+        expect(model.updatedAt, isNull);
+      });
+
+      test('uses defaults for missing container counts', () {
+        final json = {
+          'id': 'stack-abc',
+          'name': 'test-stack',
+        };
+
+        final model = StackModel.fromJson(json);
+
+        expect(model.containerCount, equals(0));
+        expect(model.runningCount, equals(0));
+      });
+    });
+
+    group('toEntity', () {
+      test('converts to entity with all fields', () {
+        const model = StackModel(
+          id: 'stack-123',
+          name: 'my-stack',
+          typeString: 'compose',
+          statusString: 'active',
+          containerCount: 3,
+          runningCount: 2,
+          composeFile: '/compose.yml',
+          environment: 'staging',
+          createdAt: '2024-01-01T00:00:00Z',
+          updatedAt: '2024-01-02T12:00:00Z',
+        );
+
+        final entity = model.toEntity();
+
+        expect(entity.id, equals('stack-123'));
+        expect(entity.name, equals('my-stack'));
+        expect(entity.type, equals(StackType.compose));
+        expect(entity.status, equals(StackStatus.active));
+        expect(entity.containerCount, equals(3));
+        expect(entity.runningCount, equals(2));
+        expect(entity.composeFile, equals('/compose.yml'));
+        expect(entity.environment, equals('staging'));
+        expect(entity.createdAt, isNotNull);
+        expect(entity.updatedAt, isNotNull);
+      });
+
+      test('handles null timestamps', () {
+        const model = StackModel(
+          id: 'stack-123',
+          name: 'my-stack',
+          createdAt: null,
+          updatedAt: null,
+        );
+
+        final entity = model.toEntity();
+
+        expect(entity.createdAt, isNull);
+        expect(entity.updatedAt, isNull);
+      });
+
+      test('handles invalid timestamp format', () {
+        const model = StackModel(
+          id: 'stack-123',
+          name: 'my-stack',
+          createdAt: 'invalid-date',
+          updatedAt: 'not-a-date',
+        );
+
+        final entity = model.toEntity();
+
+        expect(entity.createdAt, isNull);
+        expect(entity.updatedAt, isNull);
+      });
+
+      test('parses valid ISO 8601 timestamps', () {
+        const model = StackModel(
+          id: 'stack-123',
+          name: 'my-stack',
+          createdAt: '2024-06-15T14:30:00.000Z',
+          updatedAt: '2024-06-16T09:15:30.500Z',
+        );
+
+        final entity = model.toEntity();
+
+        expect(entity.createdAt?.year, equals(2024));
+        expect(entity.createdAt?.month, equals(6));
+        expect(entity.createdAt?.day, equals(15));
+        expect(entity.updatedAt?.hour, equals(9));
+        expect(entity.updatedAt?.minute, equals(15));
+      });
+    });
+
+    group('_parseStackType', () {
+      final testCases = {
+        'compose': StackType.compose,
+        'Compose': StackType.compose,
+        'COMPOSE': StackType.compose,
+        'swarm': StackType.swarm,
+        'Swarm': StackType.swarm,
+        'SWARM': StackType.swarm,
+        'kubernetes': StackType.kubernetes,
+        'Kubernetes': StackType.kubernetes,
+        'KUBERNETES': StackType.kubernetes,
+        'k8s': StackType.kubernetes,
+        'K8S': StackType.kubernetes,
+        'K8s': StackType.kubernetes,
+        'unknown': StackType.compose, // Defaults to compose
+        '': StackType.compose, // Empty defaults to compose
+        'invalid': StackType.compose, // Invalid defaults to compose
+      };
+
+      testCases.forEach((input, expected) {
+        test('parses "$input" to ${expected.name}', () {
+          final model = StackModel(
+            id: 'stack-123',
+            name: 'test',
+            typeString: input,
+          );
+
+          final entity = model.toEntity();
+
+          expect(entity.type, equals(expected));
+        });
+      });
+
+      test('handles null type', () {
+        const model = StackModel(
+          id: 'stack-123',
+          name: 'test',
+          typeString: null,
+        );
+
+        final entity = model.toEntity();
+
+        expect(entity.type, equals(StackType.compose));
+      });
+    });
+
+    group('_parseStackStatus', () {
+      final testCases = {
+        'active': StackStatus.active,
+        'Active': StackStatus.active,
+        'ACTIVE': StackStatus.active,
+        'running': StackStatus.active,
+        'Running': StackStatus.active,
+        'RUNNING': StackStatus.active,
+        'inactive': StackStatus.inactive,
+        'Inactive': StackStatus.inactive,
+        'INACTIVE': StackStatus.inactive,
+        'stopped': StackStatus.inactive,
+        'Stopped': StackStatus.inactive,
+        'STOPPED': StackStatus.inactive,
+        'error': StackStatus.error,
+        'Error': StackStatus.error,
+        'ERROR': StackStatus.error,
+        'unknown': StackStatus.unknown, // Defaults to unknown
+        '': StackStatus.unknown, // Empty defaults to unknown
+        'invalid': StackStatus.unknown, // Invalid defaults to unknown
+      };
+
+      testCases.forEach((input, expected) {
+        test('parses "$input" to ${expected.name}', () {
+          final model = StackModel(
+            id: 'stack-123',
+            name: 'test',
+            statusString: input,
+          );
+
+          final entity = model.toEntity();
+
+          expect(entity.status, equals(expected));
+        });
+      });
+
+      test('handles null status', () {
+        const model = StackModel(
+          id: 'stack-123',
+          name: 'test',
+          statusString: null,
+        );
+
+        final entity = model.toEntity();
+
+        expect(entity.status, equals(StackStatus.unknown));
+      });
+    });
+  });
+
+  group('Stack entity', () {
+    group('isHealthy', () {
+      test('returns true when all containers are running', () {
+        const stack = Stack(
+          id: 'stack-1',
+          name: 'healthy-stack',
+          containerCount: 5,
+          runningCount: 5,
+        );
+
+        expect(stack.isHealthy, isTrue);
+      });
+
+      test('returns false when some containers are not running', () {
+        const stack = Stack(
+          id: 'stack-1',
+          name: 'partial-stack',
+          containerCount: 5,
+          runningCount: 3,
+        );
+
+        expect(stack.isHealthy, isFalse);
+      });
+
+      test('returns false when no containers are running', () {
+        const stack = Stack(
+          id: 'stack-1',
+          name: 'stopped-stack',
+          containerCount: 5,
+          runningCount: 0,
+        );
+
+        expect(stack.isHealthy, isFalse);
+      });
+
+      test('returns false when containerCount is zero', () {
+        const stack = Stack(
+          id: 'stack-1',
+          name: 'empty-stack',
+          containerCount: 0,
+          runningCount: 0,
+        );
+
+        expect(stack.isHealthy, isFalse);
+      });
+    });
+
+    group('hasRunningContainers', () {
+      test('returns true when some containers are running', () {
+        const stack = Stack(
+          id: 'stack-1',
+          name: 'running-stack',
+          containerCount: 5,
+          runningCount: 2,
+        );
+
+        expect(stack.hasRunningContainers, isTrue);
+      });
+
+      test('returns false when no containers are running', () {
+        const stack = Stack(
+          id: 'stack-1',
+          name: 'stopped-stack',
+          containerCount: 5,
+          runningCount: 0,
+        );
+
+        expect(stack.hasRunningContainers, isFalse);
+      });
+
+      test('returns true when all containers are running', () {
+        const stack = Stack(
+          id: 'stack-1',
+          name: 'healthy-stack',
+          containerCount: 3,
+          runningCount: 3,
+        );
+
+        expect(stack.hasRunningContainers, isTrue);
+      });
+    });
+
+    group('isPartial', () {
+      test('returns true when some but not all containers are running', () {
+        const stack = Stack(
+          id: 'stack-1',
+          name: 'partial-stack',
+          containerCount: 5,
+          runningCount: 3,
+        );
+
+        expect(stack.isPartial, isTrue);
+      });
+
+      test('returns false when all containers are running', () {
+        const stack = Stack(
+          id: 'stack-1',
+          name: 'healthy-stack',
+          containerCount: 5,
+          runningCount: 5,
+        );
+
+        expect(stack.isPartial, isFalse);
+      });
+
+      test('returns false when no containers are running', () {
+        const stack = Stack(
+          id: 'stack-1',
+          name: 'stopped-stack',
+          containerCount: 5,
+          runningCount: 0,
+        );
+
+        expect(stack.isPartial, isFalse);
+      });
+
+      test('returns false when containerCount is zero', () {
+        const stack = Stack(
+          id: 'stack-1',
+          name: 'empty-stack',
+          containerCount: 0,
+          runningCount: 0,
+        );
+
+        expect(stack.isPartial, isFalse);
+      });
+
+      test('returns true when only one of many containers is running', () {
+        const stack = Stack(
+          id: 'stack-1',
+          name: 'degraded-stack',
+          containerCount: 10,
+          runningCount: 1,
+        );
+
+        expect(stack.isPartial, isTrue);
+      });
+    });
+  });
+}

web/health.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>OK</title>
+</head>
+<body>OK</body>
+</html>

web/index.html

@@ -18,18 +18,18 @@
 
   <meta charset="UTF-8">
   <meta content="IE=Edge" http-equiv="X-UA-Compatible">
-  <meta name="description" content="A new Flutter project.">
+  <meta name="description" content="Tatlock Home Dashboard">
 
   <!-- iOS meta tags & icons -->
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <meta name="apple-mobile-web-app-title" content="tatlock_ui">
+  <meta name="apple-mobile-web-app-title" content="Tatlock">
   <link rel="apple-touch-icon" href="icons/Icon-192.png">
 
   <!-- Favicon -->
   <link rel="icon" type="image/png" href="favicon.png"/>
 
-  <title>tatlock_ui</title>
+  <title>Tatlock</title>
   <link rel="manifest" href="manifest.json">
 </head>
 <body>

web/manifest.json

@@ -1,11 +1,11 @@
 {
-    "name": "tatlock_ui",
-    "short_name": "tatlock_ui",
+    "name": "Tatlock",
+    "short_name": "Tatlock",
     "start_url": ".",
     "display": "standalone",
-    "background_color": "#0175C2",
-    "theme_color": "#0175C2",
-    "description": "A new Flutter project.",
+    "background_color": "#1a1a2e",
+    "theme_color": "#1a1a2e",
+    "description": "Tatlock Home Dashboard",
     "orientation": "portrait-primary",
     "prefer_related_applications": false,
     "icons": [