diff --git a/.github/workflows/publish-images.yml b/.github/workflows/publish-images.yml
index a980ce9..a6a12a1 100644
--- a/.github/workflows/publish-images.yml
+++ b/.github/workflows/publish-images.yml
@@ -204,3 +204,17 @@ jobs:
           echo "docker pull logtide/frontend:${{ needs.prepare.outputs.version }}" >> $GITHUB_STEP_SUMMARY
           echo "docker pull ghcr.io/${{ github.repository_owner }}/logtide-frontend:${{ needs.prepare.outputs.version }}" >> $GITHUB_STEP_SUMMARY
           echo '```' >> $GITHUB_STEP_SUMMARY
+
+  helm-update:
+    name: Update Helm Chart
+    needs: [prepare, merge]
+    runs-on: ubuntu-latest
+    if: needs.prepare.outputs.is_stable == 'true'
+    steps:
+      - name: Trigger helm chart update
+        uses: peter-evans/repository-dispatch@v3
+        with:
+          token: ${{ secrets.HELM_CHART_PAT }}
+          repository: logtide-dev/logtide-helm-chart
+          event-type: logtide-release
+          client-payload: '{"version": "${{ needs.prepare.outputs.version }}"}'
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8a1d135..ccda9aa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,25 @@ All notable changes to LogTide will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+
+## [0.8.4] - 2026-03-19
+
+### Added
+- **Skeleton loaders and loading overlays**: all dashboard pages now show content-shaped loading states instead of blank spinners
+  - New `Skeleton`, `SkeletonTable`, and `TableLoadingOverlay` components (`src/lib/components/ui/skeleton/`)
+  - Directional shimmer animation via `@keyframes shimmer` using design tokens — works in light and dark mode, disabled for `prefers-reduced-motion`
+  - **Initial load** (no data yet): animated skeleton rows mirroring the page layout — stat cards on `/dashboard`, project cards on `/dashboard/projects`, table rows on search, traces, errors, admin tables, incidents, alerts history, and members
+  - **Re-fetch** (filter change, pagination): existing content dims with a translucent overlay and centered spinner, preventing layout shift and context loss
+  - Pages updated: `/dashboard`, `/dashboard/search`, `/dashboard/projects`, `/dashboard/alerts`, `/dashboard/errors`, `/dashboard/traces`, `/dashboard/security`, `/dashboard/security/incidents`, `/dashboard/admin/organizations`, `/dashboard/admin/users`, `/dashboard/admin/projects`, `/dashboard/settings/members`
+  - Automated Helm chart releases: every stable Docker image release now triggers a `repository_dispatch` to `logtide-dev/logtide-helm-chart`, which auto-bumps `appVersion` and chart `version` (patch), commits, and publishes a new chart release to the Helm repo on GitHub Pages
+
+### Fixed
+- API 400 responses now include a `details` array with field-level validation errors instead of just a generic message. Covers both Fastify/AJV schema validation and Zod validation errors (including uncaught `ZodError` that previously returned 500)
+- Admin pages returned 502 Bad Gateway on direct load/reload: the admin layout (`+layout@.svelte`) breaks out of the dashboard layout chain, so `ssr = false` was not inherited; added a dedicated `+layout.ts` to the admin section
+- `/dashboard/admin/projects/[id]` crashed with "Something went wrong" due to `formatDate` being called but not defined (function was named `formatTimestamp`)
+- `POST /api/v1/logs/identifiers/batch` slow: the route was calling `reservoir.getByIds` (hitting ClickHouse/TimescaleDB/MongoDB) only to verify project access, then querying `log_identifiers` (PostgreSQL) separately. Since `log_identifiers` already stores `log_id → project_id` + identifier data, the storage engine call is now bypassed entirely — one PostgreSQL query replaces the N×storage-engine-roundtrips loop. Added bloom filter skip index on `id` in ClickHouse and a standalone `id` index in TimescaleDB (migration 032) for `getByIds` used by `findCorrelatedLogs`
+- `GET /api/v1/logs/hostnames` taking 8+ seconds: the 6h window cap was only applied when `from` was absent — explicit `from` params (e.g. 24h range from the search page) bypassed it and triggered a full-range metadata scan; cap now clamps any window to 6h max. Added `limit: 500` to the distinct call. Per-engine optimizations: **ClickHouse** adds a `hostname` materialized column (computed at ingest, eliminates `JSONExtractString` at query time) and uses it directly in distinct queries; **TimescaleDB** adds a composite expression index `(project_id, (metadata->>'hostname'), time)` (migration 032); **MongoDB** adds a sparse compound index on `metadata.hostname`. All three engines also now extract the metadata field in a subquery (once per row vs 3×)
+
 ## [0.8.3] - 2026-03-18
 
 ### Added
diff --git a/README.md b/README.md
index 2693668..eb5d5ba 100644
--- a/README.md
+++ b/README.md
@@ -16,14 +16,14 @@
   <a href="https://codecov.io/gh/logtide-dev/logtide"><img src="https://codecov.io/gh/logtide-dev/logtide/branch/main/graph/badge.svg" alt="Coverage"></a>
   <a href="https://hub.docker.com/r/logtide/backend"><img src="https://img.shields.io/docker/v/logtide/backend?label=docker&logo=docker" alt="Docker"></a>
   <a href="https://artifacthub.io/packages/helm/logtide/logtide"><img src="https://img.shields.io/endpoint?url=https://artifacthub.io/badge/repository/logtide" alt="Artifact Hub"></a>
-  <img src="https://img.shields.io/badge/version-0.8.3-blue.svg" alt="Version">
+  <img src="https://img.shields.io/badge/version-0.8.4-blue.svg" alt="Version">
   <img src="https://img.shields.io/badge/license-AGPLv3-blue.svg" alt="License">
   <img src="https://img.shields.io/badge/status-stable_alpha-success.svg" alt="Status">
 </div>
 
 <br />
 
-> **🚀 RELEASE 0.8.3:** LogTide now supports **Multi-Engine Storage** (ClickHouse, MongoDB) and **Advanced Browser Observability**.
+> **🚀 RELEASE 0.8.4:** LogTide now supports **Multi-Engine Storage** (ClickHouse, MongoDB) and **Advanced Browser Observability**.
 
 ---
 
@@ -46,7 +46,7 @@ Designed for teams that need **GDPR compliance**, **full data ownership**, and *
 ### Logs Explorer
 ![LogTide Logs](docs/images/logs.png)
 
-### Performance & Metrics (New in 0.8.3)
+### Performance & Metrics (New in 0.8.4)
 ![LogTide Metrics](docs/images/metrics.png)
 
 ### Distributed Tracing
@@ -87,7 +87,7 @@ We host it for you. Perfect for testing. [**Sign up at logtide.dev**](https://lo
 
 ---
 
-## ✨ Core Features (v0.8.3)
+## ✨ Core Features (v0.8.4)
 
 * 🚀 **Multi-Engine Reservoir:** Pluggable storage layer supporting **TimescaleDB**, **ClickHouse**, and **MongoDB**.
 * 🌐 **Browser SDK Enhancements:** Automatic collection of **Web Vitals** (LCP, INP, CLS), user session tracking, and click/network breadcrumbs.
diff --git a/package.json b/package.json
index 35932c6..35c9c33 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "logtide",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "private": true,
   "description": "LogTide - Self-hosted log management platform",
   "author": "LogTide Team",
diff --git a/packages/backend/migrations/032_hostname_index.sql b/packages/backend/migrations/032_hostname_index.sql
new file mode 100644
index 0000000..e524ebe
--- /dev/null
+++ b/packages/backend/migrations/032_hostname_index.sql
@@ -0,0 +1,25 @@
+-- Migration 032: Composite expression index for hostname lookups (TimescaleDB)
+--
+-- Migration 023 tried a standalone expression index on (metadata->>'hostname') but
+-- TimescaleDB planner preferred seq scan because it had no way to narrow by project_id.
+--
+-- A composite index (project_id, hostname_expr, time) lets the planner do an index
+-- range scan scoped to a single project, then read distinct hostname values directly
+-- from the index without touching row data.
+--
+-- Note: ClickHouse and MongoDB handle this via engine-level changes in reservoir
+-- (materialized column and compound index respectively). This migration only applies
+-- to TimescaleDB instances.
+--
+-- Note: CONCURRENTLY is not supported on TimescaleDB hypertables.
+
+CREATE INDEX IF NOT EXISTS idx_logs_project_hostname
+  ON logs (project_id, (metadata->>'hostname'), time DESC)
+  WHERE metadata->>'hostname' IS NOT NULL
+    AND metadata->>'hostname' != '';
+
+-- Index for getByIds lookups (e.g. findCorrelatedLogs).
+-- The primary key is (time, id) which requires knowing `time` to be useful.
+-- A standalone index on id lets WHERE id = ANY(...) resolve without chunk scans.
+CREATE INDEX IF NOT EXISTS idx_logs_id
+  ON logs (id);
diff --git a/packages/backend/package.json b/packages/backend/package.json
index 9adefb8..03ce10a 100644
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@logtide/backend",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "private": true,
   "description": "LogTide Backend API",
   "type": "module",
diff --git a/packages/backend/src/modules/correlation/routes.ts b/packages/backend/src/modules/correlation/routes.ts
index 9bf54e1..d5a9f59 100644
--- a/packages/backend/src/modules/correlation/routes.ts
+++ b/packages/backend/src/modules/correlation/routes.ts
@@ -331,45 +331,25 @@ export default async function correlationRoutes(fastify: FastifyInstance) {
           });
         }
 
-        // Fetch logs by IDs across accessible projects (reservoir: works with any engine)
-        const allFoundLogs: Array<{ id: string; projectId: string }> = [];
-        for (const pid of searchProjectIds) {
-          const found = await reservoir.getByIds({ ids: logIds, projectId: pid });
-          for (const log of found) {
-            allFoundLogs.push({ id: log.id, projectId: log.projectId });
-          }
-          // Stop once we've found all requested logs
-          if (allFoundLogs.length >= logIds.length) break;
-        }
-
-        if (allFoundLogs.length === 0) {
-          return reply.send({
-            success: true,
-            data: { identifiers: {} },
-          });
-        }
+        // Query log_identifiers directly — log_identifiers is always in PostgreSQL and
+        // already contains log_id, project_id, and identifier data. No need to hit the
+        // storage engine (ClickHouse/TimescaleDB/MongoDB) at all.
+        // The project_id IN searchProjectIds clause enforces access control.
+        const rows = await db
+          .selectFrom('log_identifiers')
+          .select(['log_id', 'identifier_type', 'identifier_value', 'source_field'])
+          .where('log_id', 'in', logIds)
+          .where('project_id', 'in', searchProjectIds)
+          .execute();
 
-        // Verify project access for the first log's project
-        const firstProjectId = allFoundLogs[0].projectId || projectId || '';
-        const hasAccess = await verifyProjectAccess(request as any, firstProjectId);
-        if (!hasAccess) {
-          return reply.status(403).send({
-            success: false,
-            error: 'Access denied to these logs',
-          });
-        }
-
-        // Only return identifiers for logs in accessible projects
-        const accessibleLogIds = allFoundLogs
-          .filter((log) => log.projectId === firstProjectId)
-          .map((log) => log.id);
-
-        const identifiersMap = await correlationService.getLogIdentifiersBatch(accessibleLogIds);
-
-        // Convert Map to plain object for JSON serialization
         const identifiers: Record<string, Array<{ type: string; value: string; sourceField: string }>> = {};
-        for (const [logId, matches] of identifiersMap) {
-          identifiers[logId] = matches;
+        for (const row of rows) {
+          if (!identifiers[row.log_id]) identifiers[row.log_id] = [];
+          identifiers[row.log_id].push({
+            type: row.identifier_type,
+            value: row.identifier_value,
+            sourceField: row.source_field,
+          });
         }
 
         return reply.send({
diff --git a/packages/backend/src/modules/query/service.ts b/packages/backend/src/modules/query/service.ts
index 6be8fdb..25b3e21 100644
--- a/packages/backend/src/modules/query/service.ts
+++ b/packages/backend/src/modules/query/service.ts
@@ -450,16 +450,20 @@ export class QueryService {
    * Hostnames are extracted from metadata.hostname field.
    * Cached for performance - used for filter dropdowns.
    *
-   * PERFORMANCE: Defaults to last 6 hours. Metadata extraction is expensive
-   * on large windows. With 5-minute cache, most requests are served from cache.
+   * PERFORMANCE: Window is capped at 6 hours regardless of what the caller passes.
+   * JSONB extraction is expensive on large datasets — 6h ≈ 350ms, 24h+ ≈ 8s+.
+   * For a filter dropdown this is an acceptable trade-off: hostnames are stable.
+   * With 5-minute cache, most requests are served from cache after the first hit.
    */
   async getDistinctHostnames(
     projectId: string | string[],
     from?: Date,
     to?: Date
   ): Promise<string[]> {
-    // PERFORMANCE: Default to last 6 hours
-    const effectiveFrom = from || new Date(Date.now() - 6 * 60 * 60 * 1000);
+    // PERFORMANCE: Cap window to 6h max. If the caller requests a longer window
+    // (e.g. 24h), silently clamp it — JSONB distinct over large ranges is O(rows).
+    const sixHoursAgo = new Date(Date.now() - 6 * 60 * 60 * 1000);
+    const effectiveFrom = !from || from < sixHoursAgo ? sixHoursAgo : from;
 
     // Try cache first
     const cacheKey = CacheManager.statsKey(
@@ -482,6 +486,7 @@ export class QueryService {
       projectId,
       from: effectiveFrom,
       to: to ?? new Date(),
+      limit: 500,
     });
 
     const hostnames = result.values;
diff --git a/packages/backend/src/server.ts b/packages/backend/src/server.ts
index 9b7c643..bb22dc7 100644
--- a/packages/backend/src/server.ts
+++ b/packages/backend/src/server.ts
@@ -67,7 +67,8 @@ export async function build(opts = {}) {
     // Determine HTTP status code:
     // 1. error.statusCode set by Fastify (validation, rate limit) or custom parsers
     // 2. Fastify validation errors have a .validation property → 400
-    // 3. Default → 500
+    // 3. ZodError (name === 'ZodError') → 400
+    // 4. Default → 500
     let statusCode = typeof (error as any).statusCode === 'number'
       ? (error as any).statusCode
       : undefined;
@@ -76,11 +77,18 @@ export async function build(opts = {}) {
       statusCode = 400;
     }
 
+    if (!statusCode && (error as any).name === 'ZodError') {
+      statusCode = 400;
+    }
+
     if (statusCode && statusCode >= 400 && statusCode < 500) {
-      reply.code(statusCode).send({
-        statusCode,
-        error: errMessage,
-      });
+      const body: Record<string, unknown> = { statusCode, error: errMessage };
+      if ((error as any).validation) {
+        body.details = (error as any).validation;
+      } else if ((error as any).name === 'ZodError' && Array.isArray((error as any).errors)) {
+        body.details = (error as any).errors;
+      }
+      reply.code(statusCode).send(body);
       return;
     }
 
diff --git a/packages/backend/src/utils/internal-logger.ts b/packages/backend/src/utils/internal-logger.ts
index 904d539..e446bd8 100644
--- a/packages/backend/src/utils/internal-logger.ts
+++ b/packages/backend/src/utils/internal-logger.ts
@@ -58,7 +58,7 @@ export async function initializeInternalLogging(): Promise<string | null> {
       dsn,
       service: process.env.SERVICE_NAME || 'logtide-backend',
       environment: process.env.NODE_ENV || 'development',
-      release: process.env.npm_package_version || '0.8.3',
+      release: process.env.npm_package_version || '0.8.4',
       batchSize: 5, // Smaller batch for internal logs to see them faster
       flushInterval: 5000,
       maxBufferSize: 1000,
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index c2d9366..105b8a2 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@logtide/frontend",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "private": true,
   "description": "LogTide Frontend Dashboard",
   "type": "module",
diff --git a/packages/frontend/src/app.css b/packages/frontend/src/app.css
index 6f1a3de..19eeb9b 100644
--- a/packages/frontend/src/app.css
+++ b/packages/frontend/src/app.css
@@ -89,6 +89,31 @@
   }
 }
 
+/* Skeleton shimmer animation */
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.skeleton {
+  background-color: hsl(var(--muted));
+  background-image: linear-gradient(
+    90deg,
+    hsl(var(--muted)) 0%,
+    hsl(var(--background) / 0.8) 50%,
+    hsl(var(--muted)) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.8s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton {
+    animation: none;
+    background-image: none;
+  }
+}
+
 /* High contrast mode support */
 @media (prefers-contrast: more) {
   :root {
diff --git a/packages/frontend/src/hooks.client.ts b/packages/frontend/src/hooks.client.ts
index 4354bed..a2759ee 100644
--- a/packages/frontend/src/hooks.client.ts
+++ b/packages/frontend/src/hooks.client.ts
@@ -9,7 +9,7 @@ if (dsn) {
     dsn,
     service: 'logtide-frontend-client',
     environment: env.PUBLIC_NODE_ENV || 'production',
-    release: env.PUBLIC_APP_VERSION || '0.8.3',
+    release: env.PUBLIC_APP_VERSION || '0.8.4',
     debug: env.PUBLIC_NODE_ENV === 'development',
     browser: {
       // Core Web Vitals (LCP, INP, CLS, TTFB)
diff --git a/packages/frontend/src/hooks.server.ts b/packages/frontend/src/hooks.server.ts
index 93c93db..3d43740 100644
--- a/packages/frontend/src/hooks.server.ts
+++ b/packages/frontend/src/hooks.server.ts
@@ -82,7 +82,7 @@ export const handle = dsn
         dsn,
         service: 'logtide-frontend',
         environment: privateEnv?.NODE_ENV || 'production',
-        release: process.env.npm_package_version || '0.8.3',      }) as unknown as Handle,
+        release: process.env.npm_package_version || '0.8.4',      }) as unknown as Handle,
       requestLogHandle,
       configHandle
     )
diff --git a/packages/frontend/src/lib/components/Footer.svelte b/packages/frontend/src/lib/components/Footer.svelte
index 333a19a..bf2d1a2 100644
--- a/packages/frontend/src/lib/components/Footer.svelte
+++ b/packages/frontend/src/lib/components/Footer.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import Github from "@lucide/svelte/icons/github";
 
-  const version = "Alpha v0.8.3";
+  const version = "Alpha v0.8.4";
   const currentYear = new Date().getFullYear();
   const githubUrl = "https://github.com/logtide-dev/logtide";
 </script>
diff --git a/packages/frontend/src/lib/components/ui/skeleton/index.ts b/packages/frontend/src/lib/components/ui/skeleton/index.ts
new file mode 100644
index 0000000..00aae27
--- /dev/null
+++ b/packages/frontend/src/lib/components/ui/skeleton/index.ts
@@ -0,0 +1,5 @@
+import Root from './skeleton.svelte';
+import SkeletonTable from './skeleton-table.svelte';
+import TableLoadingOverlay from './table-loading-overlay.svelte';
+
+export { Root, Root as Skeleton, SkeletonTable, TableLoadingOverlay };
diff --git a/packages/frontend/src/lib/components/ui/skeleton/skeleton-table.svelte b/packages/frontend/src/lib/components/ui/skeleton/skeleton-table.svelte
new file mode 100644
index 0000000..5101ba3
--- /dev/null
+++ b/packages/frontend/src/lib/components/ui/skeleton/skeleton-table.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+  import Skeleton from './skeleton.svelte';
+
+  interface Props {
+    rows?: number;
+    columns?: number;
+    columnWidths?: string[];
+    class?: string;
+    className?: string;
+  }
+
+  let {
+    rows = 5,
+    columns = 4,
+    columnWidths = [],
+    class: classProp = '',
+    className = '',
+  }: Props = $props();
+
+  // Vary widths naturally so rows don't look identical
+  const defaultWidths = ['70%', '55%', '65%', '45%', '60%', '50%', '40%'];
+
+  function getCellWidth(colIndex: number): string {
+    if (columnWidths[colIndex]) return columnWidths[colIndex];
+    return defaultWidths[colIndex % defaultWidths.length];
+  }
+
+  // Vary height slightly per row for a natural look
+  function getRowVariant(rowIndex: number): string {
+    return rowIndex % 3 === 0 ? 'h-4' : rowIndex % 3 === 1 ? 'h-3.5' : 'h-4';
+  }
+</script>
+
+<div class="rounded-md border overflow-hidden {classProp} {className}">
+  <table class="w-full">
+    <thead>
+      <tr class="border-b bg-muted/30">
+        {#each Array(columns) as _, i}
+          <th class="px-4 py-3 text-left">
+            <Skeleton class="h-3 w-20" />
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#each Array(rows) as _, rowIndex}
+        <tr class="border-b last:border-0">
+          {#each { length: columns } as _, colIndex}
+            <td class="px-4 py-3">
+              <Skeleton
+                class={getRowVariant(rowIndex)}
+                width={getCellWidth(colIndex)}
+              />
+            </td>
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
diff --git a/packages/frontend/src/lib/components/ui/skeleton/skeleton.svelte b/packages/frontend/src/lib/components/ui/skeleton/skeleton.svelte
new file mode 100644
index 0000000..90ecc9f
--- /dev/null
+++ b/packages/frontend/src/lib/components/ui/skeleton/skeleton.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    className?: string;
+    width?: string;
+    height?: string;
+    rounded?: 'sm' | 'md' | 'lg' | 'full' | 'none';
+  }
+
+  let {
+    class: classProp = '',
+    className = '',
+    width,
+    height,
+    rounded = 'md',
+  }: Props = $props();
+
+  const roundedMap = {
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    full: 'rounded-full',
+    none: 'rounded-none',
+  };
+
+  const combinedClass = $derived(
+    `skeleton ${roundedMap[rounded]} ${classProp} ${className}`.trim()
+  );
+</script>
+
+<div
+  class={combinedClass}
+  style:width={width}
+  style:height={height}
+  aria-hidden="true"
+></div>
diff --git a/packages/frontend/src/lib/components/ui/skeleton/table-loading-overlay.svelte b/packages/frontend/src/lib/components/ui/skeleton/table-loading-overlay.svelte
new file mode 100644
index 0000000..29f35a3
--- /dev/null
+++ b/packages/frontend/src/lib/components/ui/skeleton/table-loading-overlay.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Spinner from '$lib/components/Spinner.svelte';
+
+  interface Props {
+    loading: boolean;
+    class?: string;
+    className?: string;
+    children?: Snippet;
+  }
+
+  let {
+    loading,
+    class: classProp = '',
+    className = '',
+    children,
+  }: Props = $props();
+
+  const wrapperClass = $derived(`relative ${classProp} ${className}`.trim());
+</script>
+
+<div class={wrapperClass}>
+  <div class:opacity-40={loading} class:pointer-events-none={loading}>
+    {@render children?.()}
+  </div>
+  {#if loading}
+    <div
+      class="absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/50 backdrop-blur-[1px]"
+    >
+      <Spinner size="md" />
+    </div>
+  {/if}
+</div>
diff --git a/packages/frontend/src/routes/dashboard/+page.svelte b/packages/frontend/src/routes/dashboard/+page.svelte
index 3171b7e..2b020ff 100644
--- a/packages/frontend/src/routes/dashboard/+page.svelte
+++ b/packages/frontend/src/routes/dashboard/+page.svelte
@@ -12,6 +12,7 @@
   import RecentErrorsWidget from '$lib/components/dashboard/RecentErrorsWidget.svelte';
   import EmptyDashboard from '$lib/components/dashboard/EmptyDashboard.svelte';
   import Spinner from '$lib/components/Spinner.svelte';
+  import { Skeleton } from '$lib/components/ui/skeleton';
   import { layoutStore } from '$lib/stores/layout';
   import Activity from '@lucide/svelte/icons/activity';
   import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
@@ -230,9 +231,18 @@
       </div>
 
       {#if loading}
-        <div class="flex items-center justify-center py-24">
-          <Spinner />
-          <span class="ml-3 text-muted-foreground">Loading dashboard...</span>
+        <!-- Stat cards skeleton -->
+        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          {#each Array(4) as _}
+            <Skeleton class="h-28 rounded-lg" />
+          {/each}
+        </div>
+        <!-- Chart skeleton -->
+        <Skeleton class="h-72 w-full rounded-lg" />
+        <!-- Bottom grid skeleton -->
+        <div class="grid gap-4 md:grid-cols-2">
+          <Skeleton class="h-48 rounded-lg" />
+          <Skeleton class="h-48 rounded-lg" />
         </div>
       {:else if error}
         <div class="text-center py-24">
diff --git a/packages/frontend/src/routes/dashboard/admin/+layout.ts b/packages/frontend/src/routes/dashboard/admin/+layout.ts
new file mode 100644
index 0000000..a3d1578
--- /dev/null
+++ b/packages/frontend/src/routes/dashboard/admin/+layout.ts
@@ -0,0 +1 @@
+export const ssr = false;
diff --git a/packages/frontend/src/routes/dashboard/admin/organizations/+page.svelte b/packages/frontend/src/routes/dashboard/admin/organizations/+page.svelte
index 2e7cc0b..61ba171 100644
--- a/packages/frontend/src/routes/dashboard/admin/organizations/+page.svelte
+++ b/packages/frontend/src/routes/dashboard/admin/organizations/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import { adminAPI, type OrganizationBasic } from "$lib/api/admin";
+    import { SkeletonTable, TableLoadingOverlay } from "$lib/components/ui/skeleton";
     import { Button, buttonVariants } from "$lib/components/ui/button";
     import { Input } from "$lib/components/ui/input";
     import { Badge } from "$lib/components/ui/badge";
@@ -148,12 +149,8 @@
                 <Button onclick={handleSearch}>Search</Button>
             </div>
 
-            {#if loading}
-                <div class="text-center py-8">
-                    <p class="text-muted-foreground">
-                        Loading organizations...
-                    </p>
-                </div>
+            {#if loading && organizations.length === 0}
+                <SkeletonTable rows={6} columns={6} />
             {:else if error}
                 <div class="text-center py-8">
                     <p class="text-destructive">{error}</p>
@@ -163,6 +160,7 @@
                     <p class="text-muted-foreground">No organizations found</p>
                 </div>
             {:else}
+                <TableLoadingOverlay loading={loading}>
                 <div class="rounded-md border">
                     <Table>
                         <TableHeader>
@@ -250,6 +248,7 @@
                         </Button>
                     </div>
                 </div>
+                </TableLoadingOverlay>
             {/if}
         </CardContent>
     </Card>
diff --git a/packages/frontend/src/routes/dashboard/admin/projects/+page.svelte b/packages/frontend/src/routes/dashboard/admin/projects/+page.svelte
index 1ac0d3f..f53cb74 100644
--- a/packages/frontend/src/routes/dashboard/admin/projects/+page.svelte
+++ b/packages/frontend/src/routes/dashboard/admin/projects/+page.svelte
@@ -11,6 +11,7 @@
     import * as Table from "$lib/components/ui/table";
     import { Button, buttonVariants } from "$lib/components/ui/button";
     import { Input } from "$lib/components/ui/input";
+    import { SkeletonTable, TableLoadingOverlay } from "$lib/components/ui/skeleton";
     import {
         RefreshCw,
         Search,
@@ -225,12 +226,8 @@
             </div>
         </CardHeader>
         <CardContent>
-            {#if loading}
-                <div class="flex justify-center p-12">
-                    <RefreshCw
-                        class="h-8 w-8 animate-spin text-muted-foreground"
-                    />
-                </div>
+            {#if loading && projects.length === 0}
+                <SkeletonTable rows={8} columns={7} />
             {:else if projects.length === 0}
                 <div
                     class="flex flex-col items-center justify-center p-12 text-center"
@@ -246,6 +243,7 @@
                     </p>
                 </div>
             {:else}
+                <TableLoadingOverlay loading={loading}>
                 <Table.Root>
                     <Table.Header>
                         <Table.Row>
@@ -345,6 +343,7 @@
                         </div>
                     </div>
                 {/if}
+                </TableLoadingOverlay>
             {/if}
         </CardContent>
     </Card>
diff --git a/packages/frontend/src/routes/dashboard/admin/projects/[id]/+page.svelte b/packages/frontend/src/routes/dashboard/admin/projects/[id]/+page.svelte
index b4549f7..fd7b704 100644
--- a/packages/frontend/src/routes/dashboard/admin/projects/[id]/+page.svelte
+++ b/packages/frontend/src/routes/dashboard/admin/projects/[id]/+page.svelte
@@ -70,7 +70,7 @@
         }
     }
 
-    function formatTimestamp(date: string) {
+    function formatDate(date: string) {
         return new Date(date).toLocaleString(undefined, {
             month: "short",
             day: "numeric",
diff --git a/packages/frontend/src/routes/dashboard/admin/users/+page.svelte b/packages/frontend/src/routes/dashboard/admin/users/+page.svelte
index f69dfbb..f766580 100644
--- a/packages/frontend/src/routes/dashboard/admin/users/+page.svelte
+++ b/packages/frontend/src/routes/dashboard/admin/users/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import { adminAPI, type UserBasic } from "$lib/api/admin";
+    import { SkeletonTable, TableLoadingOverlay } from "$lib/components/ui/skeleton";
     import { Button, buttonVariants } from "$lib/components/ui/button";
     import { Input } from "$lib/components/ui/input";
     import { Badge } from "$lib/components/ui/badge";
@@ -145,10 +146,8 @@
                 <Button onclick={handleSearch}>Search</Button>
             </div>
 
-            {#if loading}
-                <div class="text-center py-8">
-                    <p class="text-muted-foreground">Loading users...</p>
-                </div>
+            {#if loading && users.length === 0}
+                <SkeletonTable rows={8} columns={7} />
             {:else if error}
                 <div class="text-center py-8">
                     <p class="text-destructive">{error}</p>
@@ -158,6 +157,7 @@
                     <p class="text-muted-foreground">No users found</p>
                 </div>
             {:else}
+                <TableLoadingOverlay loading={loading}>
                 <div class="rounded-md border">
                     <Table>
                         <TableHeader>
@@ -260,6 +260,7 @@
                         </Button>
                     </div>
                 </div>
+                </TableLoadingOverlay>
             {/if}
         </CardContent>
     </Card>
diff --git a/packages/frontend/src/routes/dashboard/alerts/+page.svelte b/packages/frontend/src/routes/dashboard/alerts/+page.svelte
index 16e9162..1102ed6 100644
--- a/packages/frontend/src/routes/dashboard/alerts/+page.svelte
+++ b/packages/frontend/src/routes/dashboard/alerts/+page.svelte
@@ -41,6 +41,7 @@
 	import EditAlertDialog from "$lib/components/EditAlertDialog.svelte";
 	import SeverityBadge from "$lib/components/siem/shared/SeverityBadge.svelte";
 	import Spinner from "$lib/components/Spinner.svelte";
+	import { SkeletonTable, TableLoadingOverlay } from "$lib/components/ui/skeleton";
 	import Bell from "@lucide/svelte/icons/bell";
 	import Plus from "@lucide/svelte/icons/plus";
 	import Trash2 from "@lucide/svelte/icons/trash-2";
@@ -510,11 +511,8 @@
 
 		<!-- Unified History Tab -->
 		<TabsContent value="history" class="space-y-4">
-			{#if loadingHistory || detectionsLoading}
-				<div class="flex items-center justify-center py-12">
-					<Spinner />
-					<span class="ml-3 text-muted-foreground">Loading history...</span>
-				</div>
+			{#if (loadingHistory || detectionsLoading) && historyItems.length === 0}
+				<SkeletonTable rows={4} columns={4} />
 			{:else if historyItems.length === 0}
 				<Card class="border-2 border-dashed">
 					<CardContent class="py-16 text-center">
@@ -526,6 +524,7 @@
 					</CardContent>
 				</Card>
 			{:else}
+				<TableLoadingOverlay loading={loadingHistory || detectionsLoading}>
 				<div class="grid gap-4">
 					{#each historyItems as item}
 						{#if item.type === 'alert'}
@@ -749,6 +748,7 @@
 						{/if}
 					{/each}
 				</div>
+				</TableLoadingOverlay>
 			{/if}
 		</TabsContent>
 	</Tabs>
diff --git a/packages/frontend/src/routes/dashboard/errors/+page.svelte b/packages/frontend/src/routes/dashboard/errors/+page.svelte
index e9c83a9..20d6b8b 100644
--- a/packages/frontend/src/routes/dashboard/errors/+page.svelte
+++ b/packages/frontend/src/routes/dashboard/errors/+page.svelte
@@ -15,7 +15,7 @@
 	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
 	import Input from '$lib/components/ui/input/input.svelte';
 	import * as Select from '$lib/components/ui/select';
-	import Spinner from '$lib/components/Spinner.svelte';
+	import { SkeletonTable, TableLoadingOverlay } from '$lib/components/ui/skeleton';
 	import { ErrorGroupCard } from '$lib/components/exceptions';
 	import Bug from '@lucide/svelte/icons/bug';
 	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
@@ -322,10 +322,7 @@
 		</CardHeader>
 		<CardContent>
 			{#if loading && groups.length === 0}
-				<div class="flex items-center justify-center py-12">
-					<Spinner />
-					<span class="ml-3 text-muted-foreground">Loading error groups...</span>
-				</div>
+				<SkeletonTable rows={5} columns={4} />
 			{:else if error}
 				<div class="text-center py-12 text-destructive">
 					<Bug class="w-12 h-12 mx-auto mb-4 opacity-50" />
@@ -352,11 +349,13 @@
 					{/if}
 				</div>
 			{:else}
+				<TableLoadingOverlay loading={loading}>
 				<div class="space-y-3">
 					{#each groups as group}
 						<ErrorGroupCard {group} onclick={() => viewErrorGroup(group)} />
 					{/each}
 				</div>
+				</TableLoadingOverlay>
 
 				<!-- Pagination -->
 				{#if totalPages > 1}
diff --git a/packages/frontend/src/routes/dashboard/projects/+page.svelte b/packages/frontend/src/routes/dashboard/projects/+page.svelte
index 40e75b7..db76c38 100644
--- a/packages/frontend/src/routes/dashboard/projects/+page.svelte
+++ b/packages/frontend/src/routes/dashboard/projects/+page.svelte
@@ -32,6 +32,7 @@
     AlertDialogTrigger,
   } from "$lib/components/ui/alert-dialog";
   import Spinner from "$lib/components/Spinner.svelte";
+  import { Skeleton } from "$lib/components/ui/skeleton";
   import CreateOrganizationDialog from "$lib/components/CreateOrganizationDialog.svelte";
   import CreateProjectDialog from "$lib/components/CreateProjectDialog.svelte";
   import FolderOpen from "@lucide/svelte/icons/folder-open";
@@ -238,9 +239,10 @@
     {/if}
 
     {#if loading}
-      <div class="flex flex-col items-center justify-center py-16">
-        <Spinner size="lg" className="text-primary mb-4" />
-        <p class="text-muted-foreground">Loading projects...</p>
+      <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {#each Array(6) as _}
+          <Skeleton class="h-36 rounded-lg" />
+        {/each}
       </div>
     {:else if projects.length === 0}
       <Card class="border-2 border-dashed">
diff --git a/packages/frontend/src/routes/dashboard/search/+page.svelte b/packages/frontend/src/routes/dashboard/search/+page.svelte
index db48fad..ee57ec6 100644
--- a/packages/frontend/src/routes/dashboard/search/+page.svelte
+++ b/packages/frontend/src/routes/dashboard/search/+page.svelte
@@ -39,6 +39,7 @@
   import ExportLogsDialog from "$lib/components/ExportLogsDialog.svelte";
   import { correlationAPI, type IdentifierMatch, type CorrelatedLog } from "$lib/api/correlation";
   import EmptyLogs from "$lib/components/EmptyLogs.svelte";
+  import { SkeletonTable, TableLoadingOverlay } from "$lib/components/ui/skeleton";
   import TerminalLogView from "$lib/components/TerminalLogView.svelte";
   import TimeRangePicker, { type TimeRangeType } from "$lib/components/TimeRangePicker.svelte";
   import { layoutStore } from "$lib/stores/layout";
@@ -1488,15 +1489,20 @@
           </div>
         </CardHeader>
         <CardContent>
-          {#if paginatedLogs.length === 0}
+          {#if isLoading && logs.length === 0}
+            <SkeletonTable rows={8} columns={6} />
+          {:else if paginatedLogs.length === 0}
             <EmptyLogs />
           {:else if viewMode === "terminal"}
+            <TableLoadingOverlay loading={isLoading}>
             <TerminalLogView
               logs={paginatedLogs}
               isLiveTail={liveTail}
               maxHeight="600px"
             />
+            </TableLoadingOverlay>
           {:else}
+            <TableLoadingOverlay loading={isLoading}>
             <div class="rounded-md border overflow-x-auto" bind:this={logsContainer}>
               <Table class="w-full">
                 <TableHeader>
@@ -1738,6 +1744,7 @@
                 </div>
               </div>
             {/if}
+            </TableLoadingOverlay>
           {/if}
         </CardContent>
       </Card>
diff --git a/packages/frontend/src/routes/dashboard/security/+page.svelte b/packages/frontend/src/routes/dashboard/security/+page.svelte
index f1b572a..99237d2 100644
--- a/packages/frontend/src/routes/dashboard/security/+page.svelte
+++ b/packages/frontend/src/routes/dashboard/security/+page.svelte
@@ -7,6 +7,7 @@
 	import { toastStore } from '$lib/stores/toast';
 	import Button from '$lib/components/ui/button/button.svelte';
 	import Spinner from '$lib/components/Spinner.svelte';
+	import { Skeleton, SkeletonTable } from '$lib/components/ui/skeleton';
 	import StatsBar from '$lib/components/siem/dashboard/StatsBar.svelte';
 	import TimelineWidget from '$lib/components/siem/dashboard/TimelineWidget.svelte';
 	import RecentEventsTable from '$lib/components/siem/dashboard/RecentEventsTable.svelte';
@@ -197,9 +198,20 @@
 	</div>
 
 	{#if $dashboardLoading && !$dashboardStats}
-		<div class="flex items-center justify-center py-24">
-			<Spinner />
-			<span class="ml-3 text-muted-foreground">Loading security dashboard...</span>
+		<!-- Stats bar skeleton -->
+		<div class="flex gap-3 mb-4">
+			{#each Array(4) as _}
+				<Skeleton class="h-20 flex-1 rounded-lg" />
+			{/each}
+		</div>
+		<!-- Timeline skeleton -->
+		<Skeleton class="h-48 w-full rounded-lg mb-4" />
+		<!-- Table skeleton -->
+		<Skeleton class="h-64 w-full rounded-lg mb-4" />
+		<!-- Bottom grid skeleton -->
+		<div class="grid gap-4 md:grid-cols-2 mb-4">
+			<Skeleton class="h-48 rounded-lg" />
+			<Skeleton class="h-48 rounded-lg" />
 		</div>
 	{:else if $dashboardError}
 		<div class="text-center py-24">
@@ -207,10 +219,13 @@
 			<Button onclick={loadDashboard}>Retry</Button>
 		</div>
 	{:else if !$dashboardStats}
-		<div class="flex items-center justify-center py-24">
-			<Spinner />
-			<span class="ml-3 text-muted-foreground">Loading security dashboard...</span>
+		<div class="flex gap-3 mb-4">
+			{#each Array(4) as _}
+				<Skeleton class="h-20 flex-1 rounded-lg" />
+			{/each}
 		</div>
+		<Skeleton class="h-48 w-full rounded-lg mb-4" />
+		<Skeleton class="h-64 w-full rounded-lg mb-4" />
 	{:else if isEmpty}
 		<EmptyStateSiem
 			type="incidents"
diff --git a/packages/frontend/src/routes/dashboard/security/incidents/+page.svelte b/packages/frontend/src/routes/dashboard/security/incidents/+page.svelte
index 006aa17..1ecbcc2 100644
--- a/packages/frontend/src/routes/dashboard/security/incidents/+page.svelte
+++ b/packages/frontend/src/routes/dashboard/security/incidents/+page.svelte
@@ -9,7 +9,7 @@
 	import { onDestroy } from 'svelte';
 	import Button from '$lib/components/ui/button/button.svelte';
 	import { Badge } from '$lib/components/ui/badge';
-	import Spinner from '$lib/components/Spinner.svelte';
+	import { SkeletonTable, TableLoadingOverlay } from '$lib/components/ui/skeleton';
 	import IncidentCard from '$lib/components/siem/incidents/IncidentCard.svelte';
 	import IncidentFilters from '$lib/components/siem/incidents/IncidentFilters.svelte';
 	import EmptyStateSiem from '$lib/components/siem/shared/EmptyStateSiem.svelte';
@@ -284,10 +284,7 @@
 
 	<!-- Content -->
 	{#if loading && incidents.length === 0}
-		<div class="flex items-center justify-center py-24">
-			<Spinner />
-			<span class="ml-3 text-muted-foreground">Loading incidents...</span>
-		</div>
+		<SkeletonTable rows={5} columns={5} />
 	{:else if error}
 		<div class="text-center py-24">
 			<p class="text-destructive mb-4">{error}</p>
@@ -305,11 +302,13 @@
 		/>
 	{:else}
 		<!-- Incident List -->
+		<TableLoadingOverlay loading={loading}>
 		<div class="space-y-4">
 			{#each incidents as incident}
 				<IncidentCard {incident} onclick={() => handleIncidentClick(incident)} />
 			{/each}
 		</div>
+		</TableLoadingOverlay>
 
 		<!-- Pagination -->
 		<div class="mt-6 flex items-center justify-between">
diff --git a/packages/frontend/src/routes/dashboard/settings/members/+page.svelte b/packages/frontend/src/routes/dashboard/settings/members/+page.svelte
index 00a5c41..8531dac 100644
--- a/packages/frontend/src/routes/dashboard/settings/members/+page.svelte
+++ b/packages/frontend/src/routes/dashboard/settings/members/+page.svelte
@@ -50,6 +50,7 @@
   import { Tabs, TabsContent, TabsList, TabsTrigger } from '$lib/components/ui/tabs';
   import InviteMemberDialog from '$lib/components/InviteMemberDialog.svelte';
   import Spinner from '$lib/components/Spinner.svelte';
+  import { SkeletonTable } from '$lib/components/ui/skeleton';
 
   let user: any = null;
   let token: string | null = null;
@@ -297,10 +298,7 @@
 
         <TabsContent value="members">
           {#if loadingMembers}
-            <div class="flex items-center justify-center py-8">
-              <Spinner size="md" />
-              <span class="ml-2 text-sm text-muted-foreground">Loading members...</span>
-            </div>
+            <SkeletonTable rows={5} columns={4} />
           {:else if members.length === 0}
             <div class="text-center py-8">
               <Users class="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
@@ -411,10 +409,7 @@
 
         <TabsContent value="invitations">
           {#if loadingInvitations}
-            <div class="flex items-center justify-center py-8">
-              <Spinner size="md" />
-              <span class="ml-2 text-sm text-muted-foreground">Loading invitations...</span>
-            </div>
+            <SkeletonTable rows={3} columns={5} />
           {:else if pendingInvitations.length === 0}
             <div class="text-center py-8">
               <Mail class="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
diff --git a/packages/frontend/src/routes/dashboard/traces/+page.svelte b/packages/frontend/src/routes/dashboard/traces/+page.svelte
index af2d3e9..43cd2c9 100644
--- a/packages/frontend/src/routes/dashboard/traces/+page.svelte
+++ b/packages/frontend/src/routes/dashboard/traces/+page.svelte
@@ -46,6 +46,7 @@
   import ArrowLeft from "@lucide/svelte/icons/arrow-left";
   import EmptyTraces from "$lib/components/EmptyTraces.svelte";
   import Spinner from "$lib/components/Spinner.svelte";
+  import { SkeletonTable, TableLoadingOverlay } from "$lib/components/ui/skeleton";
   import { layoutStore } from "$lib/stores/layout";
   import { toastStore } from "$lib/stores/toast";
 
@@ -606,13 +607,12 @@
         </div>
       </CardHeader>
       <CardContent>
-        {#if isLoading}
-          <div class="flex items-center justify-center h-64">
-            <Spinner size="lg" />
-          </div>
+        {#if isLoading && traces.length === 0}
+          <SkeletonTable rows={7} columns={7} />
         {:else if traces.length === 0}
           <EmptyTraces />
         {:else}
+          <TableLoadingOverlay loading={isLoading}>
           <div class="rounded-md border">
             <Table>
               <TableHeader>
@@ -795,6 +795,7 @@
               </div>
             </div>
           {/if}
+          </TableLoadingOverlay>
         {/if}
       </CardContent>
     </Card>
diff --git a/packages/reservoir/docker-compose.test.yml b/packages/reservoir/docker-compose.test.yml
new file mode 100644
index 0000000..53eda0e
--- /dev/null
+++ b/packages/reservoir/docker-compose.test.yml
@@ -0,0 +1,32 @@
+services:
+  clickhouse-test:
+    image: clickhouse/clickhouse-server:24.1
+    container_name: reservoir-clickhouse-test
+    environment:
+      CLICKHOUSE_DB: logtide_test
+      CLICKHOUSE_USER: default
+      CLICKHOUSE_PASSWORD: ""
+      CLICKHOUSE_DEFAULT_ACCESS_MANAGEMENT: 1
+    ports:
+      - "18123:8123"
+      - "19000:9000"
+    tmpfs:
+      - /var/lib/clickhouse
+    healthcheck:
+      test: ["CMD", "clickhouse-client", "--query", "SELECT 1"]
+      interval: 5s
+      timeout: 3s
+      retries: 10
+
+  mongodb-test:
+    image: mongo:7
+    container_name: reservoir-mongodb-test
+    ports:
+      - "27017:27017"
+    tmpfs:
+      - /data/db
+    healthcheck:
+      test: ["CMD", "mongosh", "--eval", "db.adminCommand('ping')"]
+      interval: 5s
+      timeout: 3s
+      retries: 10
diff --git a/packages/reservoir/package.json b/packages/reservoir/package.json
index 5ba76a3..b2d786e 100644
--- a/packages/reservoir/package.json
+++ b/packages/reservoir/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@logtide/reservoir",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "Pluggable storage abstraction for Logtide log management",
   "type": "module",
   "main": "./dist/index.js",
diff --git a/packages/reservoir/src/engines/clickhouse/clickhouse-engine.ts b/packages/reservoir/src/engines/clickhouse/clickhouse-engine.ts
index dcc47fd..d5e4c40 100644
--- a/packages/reservoir/src/engines/clickhouse/clickhouse-engine.ts
+++ b/packages/reservoir/src/engines/clickhouse/clickhouse-engine.ts
@@ -192,6 +192,19 @@ export class ClickHouseEngine extends StorageEngine {
       // index may already exist
     }
 
+    // Bloom filter on id — lets getByIds skip data granules that don't contain
+    // any of the requested UUIDs without a full project scan.
+    try {
+      await client.command({
+        query: `ALTER TABLE ${t} ADD INDEX IF NOT EXISTS idx_id id TYPE bloom_filter(0.01) GRANULARITY 1`,
+      });
+      await client.command({
+        query: `ALTER TABLE ${t} MATERIALIZE INDEX idx_id`,
+      });
+    } catch {
+      // index may already exist
+    }
+
     try {
       await client.command({
         query: `ALTER TABLE ${t} ADD INDEX IF NOT EXISTS idx_span_id span_id TYPE bloom_filter(0.01) GRANULARITY 1`,
@@ -212,6 +225,20 @@ export class ClickHouseEngine extends StorageEngine {
       // projection may already exist
     }
 
+    // Materialized column for hostname — extracted from metadata JSON once at ingest time.
+    // Eliminates JSONExtractString() calls on every DISTINCT/filter query row.
+    // MATERIALIZE backfills existing data parts asynchronously during merges.
+    try {
+      await client.command({
+        query: `ALTER TABLE ${t} ADD COLUMN IF NOT EXISTS hostname String MATERIALIZED JSONExtractString(metadata, 'hostname')`,
+      });
+      await client.command({
+        query: `ALTER TABLE ${t} MATERIALIZE COLUMN hostname`,
+      });
+    } catch {
+      // column may already exist
+    }
+
     // Spans table
     await client.command({
       query: `
diff --git a/packages/reservoir/src/engines/clickhouse/query-translator.ts b/packages/reservoir/src/engines/clickhouse/query-translator.ts
index 9f0bc43..43172ea 100644
--- a/packages/reservoir/src/engines/clickhouse/query-translator.ts
+++ b/packages/reservoir/src/engines/clickhouse/query-translator.ts
@@ -257,24 +257,30 @@ export class ClickHouseQueryTranslator extends QueryTranslator {
       }
     }
 
-    let selectExpr: string;
-    if (params.field.startsWith('metadata.')) {
-      const jsonKey = params.field.slice('metadata.'.length);
-      selectExpr = `JSONExtractString(metadata, '${jsonKey}')`;
-    } else {
-      selectExpr = params.field;
-    }
-
-    conditions.push(`${selectExpr} IS NOT NULL`);
-    conditions.push(`${selectExpr} != ''`);
-
     const prewhereClause = prewhere.length > 0 ? ` PREWHERE ${prewhere.join(' AND ')}` : '';
     const whereClause = conditions.length > 0 ? ` WHERE ${conditions.join(' AND ')}` : '';
-    let query = `SELECT DISTINCT ${selectExpr} AS value FROM ${this.tableName}${prewhereClause}${whereClause} ORDER BY value ASC`;
-
-    if (params.limit) {
-      query += ` LIMIT {p_limit:UInt32}`;
-      queryParams.p_limit = params.limit;
+    const limitClause = params.limit ? ` LIMIT {p_limit:UInt32}` : '';
+    if (params.limit) queryParams.p_limit = params.limit;
+
+    let query: string;
+    if (params.field === 'metadata.hostname') {
+      // Use the materialized `hostname` column — pre-computed at ingest, no JSON parsing at query time.
+      // Fast path: ClickHouse reads only the native string column, skipping the entire metadata blob.
+      const fullWhere = [...conditions, `hostname != ''`];
+      const whereAll = fullWhere.length > 0 ? ` WHERE ${fullWhere.join(' AND ')}` : '';
+      query = `SELECT DISTINCT hostname AS value FROM ${this.tableName}${prewhereClause}${whereAll} ORDER BY value ASC${limitClause}`;
+    } else if (params.field.startsWith('metadata.')) {
+      // For other metadata fields: extract JSON once in a subquery instead of 3x per row.
+      // JSONExtractString always returns '' for missing keys — IS NOT NULL is redundant.
+      const jsonKey = params.field.slice('metadata.'.length);
+      const extract = `JSONExtractString(metadata, '${jsonKey}')`;
+      query = `SELECT DISTINCT value FROM (SELECT ${extract} AS value FROM ${this.tableName}${prewhereClause}${whereClause}) WHERE value != '' ORDER BY value ASC${limitClause}`;
+    } else {
+      const selectExpr = params.field;
+      conditions.push(`${selectExpr} IS NOT NULL`);
+      conditions.push(`${selectExpr} != ''`);
+      const fullWhere = conditions.length > 0 ? ` WHERE ${conditions.join(' AND ')}` : '';
+      query = `SELECT DISTINCT ${selectExpr} AS value FROM ${this.tableName}${prewhereClause}${fullWhere} ORDER BY value ASC${limitClause}`;
     }
 
     return { query, parameters: [queryParams] };
diff --git a/packages/reservoir/src/engines/mongodb/mongodb-engine.ts b/packages/reservoir/src/engines/mongodb/mongodb-engine.ts
index 7491c31..b61875d 100644
--- a/packages/reservoir/src/engines/mongodb/mongodb-engine.ts
+++ b/packages/reservoir/src/engines/mongodb/mongodb-engine.ts
@@ -475,8 +475,10 @@ export class MongoDBEngine extends StorageEngine {
 
     const pipeline: Document[] = [
       { $match: filter },
+      // Pre-filter before $group to reduce the number of docs aggregated.
+      // Avoids grouping null/empty values that would be discarded afterwards.
+      { $match: { [mongoField]: { $exists: true, $ne: null, $gt: '' } } },
       { $group: { _id: `$${mongoField}` } },
-      { $match: { _id: { $ne: null } } },
       { $sort: { _id: 1 } },
       { $limit: limit },
       { $project: { value: '$_id', _id: 0 } },
@@ -1224,7 +1226,9 @@ export class MongoDBEngine extends StorageEngine {
     await safeCreateIndex(col, { project_id: 1, service: 1, time: -1 }, 'idx_project_service_time');
     await safeCreateIndex(col, { project_id: 1, level: 1, time: -1 }, 'idx_project_level_time');
     await safeCreateIndex(col, { project_id: 1, service: 1, level: 1, time: -1 }, 'idx_project_service_level_time');
-    await safeCreateIndex(col, { project_id: 1, hostname: 1, time: -1 }, 'idx_project_hostname_time');
+    // hostname is stored in metadata.hostname (nested), not top-level — index accordingly.
+    // The top-level `hostname` field is always null (ingestion puts it in metadata).
+    await safeCreateIndex(col, { 'metadata.hostname': 1, project_id: 1, time: -1 }, 'idx_project_metadata_hostname_time', { sparse: true });
 
     // Text index for $text search (not supported on time-series timeField/metaField)
     if (!this.useTimeSeries) {
diff --git a/packages/reservoir/src/engines/timescale/query-translator.ts b/packages/reservoir/src/engines/timescale/query-translator.ts
index 2ef2322..146920e 100644
--- a/packages/reservoir/src/engines/timescale/query-translator.ts
+++ b/packages/reservoir/src/engines/timescale/query-translator.ts
@@ -322,20 +322,22 @@ export class TimescaleQueryTranslator extends QueryTranslator {
     values.push(params.to);
     idx++;
 
-    let selectExpr: string;
+    const where = ` WHERE ${conditions.join(' AND ')}`;
+    let query: string;
+
     if (params.field.startsWith('metadata.')) {
+      // Extract JSONB once in a subquery instead of 3x per row (SELECT + IS NOT NULL + != '').
       const jsonKey = params.field.slice('metadata.'.length);
-      selectExpr = `metadata->>'${jsonKey}'`;
+      const extract = `metadata->>'${jsonKey}'`;
+      query = `SELECT DISTINCT value FROM (SELECT ${extract} AS value FROM ${this.table}${where}) sub WHERE value IS NOT NULL AND value != '' ORDER BY value ASC`;
     } else {
-      selectExpr = params.field;
+      const selectExpr = params.field;
+      conditions.push(`${selectExpr} IS NOT NULL`);
+      conditions.push(`${selectExpr} != ''`);
+      const fullWhere = ` WHERE ${conditions.join(' AND ')}`;
+      query = `SELECT DISTINCT ${selectExpr} AS value FROM ${this.table}${fullWhere} ORDER BY value ASC`;
     }
 
-    conditions.push(`${selectExpr} IS NOT NULL`);
-    conditions.push(`${selectExpr} != ''`);
-
-    const where = ` WHERE ${conditions.join(' AND ')}`;
-    let query = `SELECT DISTINCT ${selectExpr} AS value FROM ${this.table}${where} ORDER BY value ASC`;
-
     if (params.limit) {
       query += ` LIMIT $${idx}`;
       values.push(params.limit);
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 916af85..7a278ec 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@logtide/shared",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "private": true,
   "description": "Shared types, schemas and utilities for LogTide",
   "type": "module",